Wellcome Web Components

Career Framework 

<!-- An array of cells are provided for each row. This foreach generates cells from the data provided-->

Notice: Undefined index: cells in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 41 Call Stack: 0.0002 278264 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
0.0007 302960 2. eval('?>
<?php
// Classes that refer to the column the cell is in
$stage1 = [
  'full' => 'careers-framework__cell__width-100 ',
  'include' => 'careers-frramework__cell__width-250 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-1 '
];
$stage2 = [
  'full' => 'careers-framework__cell__width-100 ',
  'include' => 'careers-framework__cell__width-200 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-2 ',
];
$stage3 = [
  'full' => 'careers-framework__cell__width-100 ',
  'include' => 'careers-framework__cell__width-233 ',
  'overlap' => 'careers-framework__cell__width-166 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-3 ',
];
$stage4 = [
  'full' => 'careers-framework__cell__width-100 ',
  'half' => 'careers-framework__cell__width-50 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-4 ',
];
// CLASSES WHICH REFER TO THE TYPE OF CELL
$div_types = [
  'list' => 'careers-framework__text-list ',
  'empty' => 'careers-framework__cell-empty ',
  'overhanging_list' => 'careers-framework__row-overhang ',
  'beneath' => 'careers-framework__row-beneath ',
  'cell' => ''
];
$border_types = [
  'solid' => 'careers-framework__cell__border__right ',
  'dashed' => 'careers-framework__cell__border__right-dashed ',
  'none' => ''
];
$row_height = function($height) { return 'flex-row careers-framework__row__height-' . $height . ' '; };
?>

    <!-- An array of cells are provided for each row. This foreach generates cells from the data provided-->
    <?php foreach ($variables['cells'] as $row_number => $row) :?>
    <div class='
    <?php
      $class =  $row_height($variables[' row_height '][$row_number - 1]);
      print corp_paragraphs_career_framework_generate_z_index_class($class, $div_types, $row);
  ?>'>
        <!-- For each row create cells  -->
        <?php foreach ($row as $cell) :?>
        <div class='
      <?php
        $stage = ${$cell[' stage ']};
        $type = $cell['type '];
        $width = $cell['width '];
        $border = $cell['border '];
        print $stage[$width] . $border_types[$border] . $div_types[$type] ;
      ?>
    '>
            <!-- check whether the cells are empty -->
            <?php if ($type !== 'empty'):?>
            <?php $content = $cell['content']; ?>
            <!-- If the cells are not empty, content is then generated -->
            <div class='careers-framework__scheme__container'>
                <!--if the content requires a list then extra ul/li elements need to be added to the content-->
                <div class='<?php print $stage[' border_top ']?>'>
                    <?php if (array_key_exists('list', $content)) : ?>
                    <p class='careers-framework__text-scheme'>
                        <?php print $content['title']['label'] ?>
                    </p>
                    <ul class='<?php print $div_types[' list '] ?>'>
                        <!-- for each list item in the content a new li element is created  -->
                        <?php foreach($content['list'] as $li) : ?>
                        <li class='careers-framework__text-scheme'>
                            <a href='<?php print $li[' href '] ?>'>
                                <p>
                                    <?php print $li['label'] ?>
                                </p>
                            </a>
                        </li>
                        <?php endforeach?>
                    </ul>
                    <?php else : ?>
                    <!-- just the standard cell content without list items -->
                    <a href='<?php print $content[' title ']['href '] ?>'>
                        <p class='careers-framework__text-scheme'>
                            <?php print $content['title']['label'] ?>
                        </p>
                    </a>
                    <?php endif ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
        <?php endforeach ?>
    </div>
    <?php endforeach;?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20 Warning: Invalid argument supplied for foreach() in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) :
    eval()'d code on line 41 Call Stack: 0.0002 278264 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0 0.0007 302960 2. eval('?>
    <?php
// Classes that refer to the column the cell is in
$stage1 = [
  'full' => 'careers-framework__cell__width-100 ',
  'include' => 'careers-frramework__cell__width-250 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-1 '
];
$stage2 = [
  'full' => 'careers-framework__cell__width-100 ',
  'include' => 'careers-framework__cell__width-200 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-2 ',
];
$stage3 = [
  'full' => 'careers-framework__cell__width-100 ',
  'include' => 'careers-framework__cell__width-233 ',
  'overlap' => 'careers-framework__cell__width-166 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-3 ',
];
$stage4 = [
  'full' => 'careers-framework__cell__width-100 ',
  'half' => 'careers-framework__cell__width-50 ',
  'border_top' => 'col-xs-12 careers__border__top-stage-4 ',
];
// CLASSES WHICH REFER TO THE TYPE OF CELL
$div_types = [
  'list' => 'careers-framework__text-list ',
  'empty' => 'careers-framework__cell-empty ',
  'overhanging_list' => 'careers-framework__row-overhang ',
  'beneath' => 'careers-framework__row-beneath ',
  'cell' => ''
];
$border_types = [
  'solid' => 'careers-framework__cell__border__right ',
  'dashed' => 'careers-framework__cell__border__right-dashed ',
  'none' => ''
];
$row_height = function($height) { return 'flex-row careers-framework__row__height-' . $height . ' '; };
?>

        <!-- An array of cells are provided for each row. This foreach generates cells from the data provided-->
        <?php foreach ($variables['cells'] as $row_number => $row) :?>
        <div class='
    <?php
      $class =  $row_height($variables[' row_height '][$row_number - 1]);
      print corp_paragraphs_career_framework_generate_z_index_class($class, $div_types, $row);
  ?>'>
            <!-- For each row create cells  -->
            <?php foreach ($row as $cell) :?>
            <div class='
      <?php
        $stage = ${$cell[' stage ']};
        $type = $cell['type '];
        $width = $cell['width '];
        $border = $cell['border '];
        print $stage[$width] . $border_types[$border] . $div_types[$type] ;
      ?>
    '>
                <!-- check whether the cells are empty -->
                <?php if ($type !== 'empty'):?>
                <?php $content = $cell['content']; ?>
                <!-- If the cells are not empty, content is then generated -->
                <div class='careers-framework__scheme__container'>
                    <!--if the content requires a list then extra ul/li elements need to be added to the content-->
                    <div class='<?php print $stage[' border_top ']?>'>
                        <?php if (array_key_exists('list', $content)) : ?>
                        <p class='careers-framework__text-scheme'>
                            <?php print $content['title']['label'] ?>
                        </p>
                        <ul class='<?php print $div_types[' list '] ?>'>
                            <!-- for each list item in the content a new li element is created  -->
                            <?php foreach($content['list'] as $li) : ?>
                            <li class='careers-framework__text-scheme'>
                                <a href='<?php print $li[' href '] ?>'>
                                    <p>
                                        <?php print $li['label'] ?>
                                    </p>
                                </a>
                            </li>
                            <?php endforeach?>
                        </ul>
                        <?php else : ?>
                        <!-- just the standard cell content without list items -->
                        <a href='<?php print $content[' title ']['href '] ?>'>
                            <p class='careers-framework__text-scheme'>
                                <?php print $content['title']['label'] ?>
                            </p>
                        </a>
                        <?php endif ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach ?>
        </div>
        <?php endforeach;?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

Description

This template creates table columns for the career_framework paragraph.

Back-end notes

The expected data structure looks something like this:

$variables['cells'] = [
    1 => [ // '1' indicates this is row 1
        $cell, // this is the cell that is inside the row within the stage column
    ],
    2 => [
        cell, // there can be more than one cell in a row - these will divide the cell in half
        $cell,
    ],
    3 => [
        $cell,
        $cell,
    ],
];
$variables['row_height'] = ['1', '2', '3'];

The array length of both $variables[‘cells’] and $variables[‘row_height’] should be exacty the same.

##Cells A cell carries alot of information: including width, color, border etc. The structure of a cell is indicated below.

$cell = [
    'stage' => $stage,
    'type' => $type,
    'width' => $width,
    'border' => $border,
    'content' => [
        'title' => [
            'label' => $scheme['title'],
            'href' => $scheme['href'] // optional
        ],
        'list' => [ // omit this if you do not want a list
            'label' => 'hrefstring',
            'label2' => 'hrefstring'
        ]
    ],
];

A cell requires information about width, border, text, color etc.

Width has the following options:

  • full - this makes width 100% of the columm
  • half - this makes width 50% - this option is only available in the stage4 columns
  • overlap - this makes the width extend over the current stage and half of the next stage - this option is only available in the stage3 column
  • include - this makes the width the width extend over the current column and all of the next column.

    Type has the following option

  • empty - this is for if the cell has no content - or if you do not want to display the content
  • cell

Border has the following option

  • dashed - only available for a ‘half’ width left hand cell in the stage 4 column
  • solid - available only to ‘full’ width cell in stages 1-3
  • none

###How to format overlapping cells ** An example of an ‘overlap’ cell

// stage3 column
$variables['cells'] = [
    1 => [
            [
                'stage' => 'stage3',
                'type' => 'cell', // indicates there are text
                'width' => 'overlap', // overlaps half of stage 4
                'border' => 'none', // you only assign borders to 'full' or 'half' sized cells - the empty cell in the stage4 will take care of that
                'content' => [
                    'title' => [
                        'label' => 'scheme123',
                        'href' => 'schemehref'
                    ],
                ]
            ],
        ]
    ]
]
// stage4 column
$variables['cells'] = [
    1 => [
            [
                'stage' => 'stage4',
                'type' => 'empty', // indicates this cell will display no text
                'width' => 'half', // This is underneath the overlapping cell from stage3
                'border' => 'dashed', // You need a dashed right border on the first half cell in the stage4 column. This renders the dashed line in the middle
                'content' => [
                    'title' => [
                        'label' => 'scheme123', // You must put content in the cells beneath overlapping cells. This is due to the fact that the same data is used to generate the mobile table.
                        'href' => 'schemehref'
                    ],
                ]
            ],
            [
                'stage' => 'stage4',
                'type' => 'empty',
                'width' => 'half',
                'border' => 'none', // you don't want to add a border to the final cell in stage4
            ],
        ]
    ]
]

An example of an ‘include cell’

// stage3 column
$variables['cells'] = [
    1 => [
            [
                'stage' => 'stage3',
                'type' => 'cell', // indicates there are text
                'width' => 'include', // overlaps all of stage 4
                'border' => 'none',
                'content' => [
                    'title' => [
                        'label' => 'scheme123',
                        'href' => 'schemehref'
                    ],
                ]
            ],
        ]
    ]
]
// stage4 column
$variables['cells'] = [
    1 => [
            [
                'stage' => 'stage4',
                'type' => 'empty', // indicates this cell will display no text
                'width' => 'full', // This is underneath the cell from stage3
                'border' => 'none', // You don't need to add a border
                'content' => [
                    'title' => [
                        'label' => 'scheme123', // You must put content in the cells beneath overlapping cells. This is due to the fact that the same data is used to generate the mobile table.
                        'href' => 'schemehref'
                    ],
                ]
            ],
        ]
    ]
]

Front-end notes

/* No context defined for this component. */
  • Handle: @career-framework
  • Preview:
  • Filesystem Path: ../../modules/custom/corp_markup/theme/misc/career_framework_cell.tpl.php/career_framework_cell.tpl.php