From 265541edc3c013c455b4d83caf60ba80b41275b8 Mon Sep 17 00:00:00 2001 From: Chintan Desai Date: Wed, 22 May 2024 00:26:01 -0400 Subject: [PATCH] sample files from a smithsonian project --- .browserslistrc | 7 + .editorconfig | 5 + .eslintignore | 1 + .eslintrc.yml | 36 ++++ .gitignore | 25 +++ .npmrc | 1 + Thumbs.db | Bin 0 -> 4608 bytes babel.config.js | 24 +++ cdesai_emulsify.breakpoints.yml | 13 ++ cdesai_emulsify.info.yml | 48 ++++++ cdesai_emulsify.theme | 15 ++ includes/block.inc | 29 ++++ includes/field.inc | 18 ++ includes/node.inc | 67 ++++++++ includes/page.inc | 12 ++ includes/paragraph.inc | 156 ++++++++++++++++++ includes/view.inc | 93 +++++++++++ package.json | 125 ++++++++++++++ postcss.config.js | 7 + prettier.config.js | 4 + screenshot.png | Bin 0 -> 11781 bytes tailwind.config.js | 130 +++++++++++++++ templates/block/block--facet-block.html.twig | 6 + .../block--filterbycontenttype.html.twig | 3 + .../block/block--mainnavigation.html.twig | 49 ++++++ templates/block/block--submenu.html.twig | 5 + ...lock--views-exposed-filter-block.html.twig | 2 + templates/block/block.html.twig | 37 +++++ .../content/node--publication--full.html.twig | 23 +++ ...node--publication--search-result.html.twig | 26 +++ .../node--publication--teaser-list.html.twig | 28 ++++ .../node--publication--teaser.html.twig | 21 +++ templates/content/node--story--full.html.twig | 7 + .../node--story--related-card.html.twig | 15 ++ .../node--story--search-result.html.twig | 26 +++ .../node--story--teaser-list.html.twig | 26 +++ .../content/node--story--teaser.html.twig | 19 +++ templates/content/node.html.twig | 95 +++++++++++ templates/content/page-title.html.twig | 20 +++ templates/content/table.html.twig | 109 ++++++++++++ ...--node--field-date--teaser-small.html.twig | 20 +++ ...d--node--field-daterange--teaser.html.twig | 26 +++ ...ld--node--field-location--teaser.html.twig | 22 +++ ...node--field-summary--teaser-list.html.twig | 20 +++ ...ld--paragraph--field-description.html.twig | 32 ++++ templates/fields/field--text-long.html.twig | 42 +++++ .../fields/field--text-with-summary.html.twig | 42 +++++ templates/fields/field.html.twig | 70 ++++++++ templates/form/checkboxes.html.twig | 15 ++ .../form/field-multiple-value-form.html.twig | 22 +++ templates/form/fieldset.html.twig | 23 +++ templates/form/form-element-label.html.twig | 15 ++ templates/form/form-element.html.twig | 59 +++++++ templates/form/input.html.twig | 13 ++ templates/form/radios.html.twig | 13 ++ templates/form/select.html.twig | 13 ++ templates/form/textarea.html.twig | 16 ++ templates/layout/page--user.html.twig | 28 ++++ templates/layout/page.html.twig | 33 ++++ templates/layout/region--footer.html.twig | 18 ++ templates/layout/region--header.html.twig | 18 ++ templates/media/media--audio.html.twig | 8 + .../media/media--image--gallery.html.twig | 1 + templates/media/media--image.html.twig | 7 + templates/media/responsive-image.html.twig | 18 ++ templates/navigation/breadcrumb.html.twig | 11 ++ templates/navigation/menu--footer.html.twig | 4 + templates/navigation/menu--main.html.twig | 26 +++ .../navigation/menu-local-action.html.twig | 15 ++ templates/navigation/menu.html.twig | 21 +++ templates/navigation/pager.html.twig | 32 ++++ .../paragraphs/paragraph--accordion.html.twig | 12 ++ .../paragraphs/paragraph--aside.html.twig | 11 ++ .../paragraph--horizontal-tabs.html.twig | 26 +++ .../paragraph--media--media-gallery.html.twig | 7 + templates/paragraphs/paragraph.html.twig | 48 ++++++ 76 files changed, 2140 insertions(+) create mode 100644 .browserslistrc create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100644 .eslintrc.yml create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 Thumbs.db create mode 100644 babel.config.js create mode 100644 cdesai_emulsify.breakpoints.yml create mode 100644 cdesai_emulsify.info.yml create mode 100644 cdesai_emulsify.theme create mode 100644 includes/block.inc create mode 100644 includes/field.inc create mode 100644 includes/node.inc create mode 100644 includes/page.inc create mode 100644 includes/paragraph.inc create mode 100644 includes/view.inc create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 prettier.config.js create mode 100644 screenshot.png create mode 100644 tailwind.config.js create mode 100644 templates/block/block--facet-block.html.twig create mode 100644 templates/block/block--filterbycontenttype.html.twig create mode 100644 templates/block/block--mainnavigation.html.twig create mode 100644 templates/block/block--submenu.html.twig create mode 100644 templates/block/block--views-exposed-filter-block.html.twig create mode 100644 templates/block/block.html.twig create mode 100644 templates/content/node--publication--full.html.twig create mode 100644 templates/content/node--publication--search-result.html.twig create mode 100644 templates/content/node--publication--teaser-list.html.twig create mode 100644 templates/content/node--publication--teaser.html.twig create mode 100644 templates/content/node--story--full.html.twig create mode 100644 templates/content/node--story--related-card.html.twig create mode 100644 templates/content/node--story--search-result.html.twig create mode 100644 templates/content/node--story--teaser-list.html.twig create mode 100644 templates/content/node--story--teaser.html.twig create mode 100644 templates/content/node.html.twig create mode 100644 templates/content/page-title.html.twig create mode 100644 templates/content/table.html.twig create mode 100644 templates/fields/field--node--field-date--teaser-small.html.twig create mode 100644 templates/fields/field--node--field-daterange--teaser.html.twig create mode 100644 templates/fields/field--node--field-location--teaser.html.twig create mode 100644 templates/fields/field--node--field-summary--teaser-list.html.twig create mode 100644 templates/fields/field--paragraph--field-description.html.twig create mode 100644 templates/fields/field--text-long.html.twig create mode 100644 templates/fields/field--text-with-summary.html.twig create mode 100644 templates/fields/field.html.twig create mode 100644 templates/form/checkboxes.html.twig create mode 100644 templates/form/field-multiple-value-form.html.twig create mode 100644 templates/form/fieldset.html.twig create mode 100644 templates/form/form-element-label.html.twig create mode 100644 templates/form/form-element.html.twig create mode 100644 templates/form/input.html.twig create mode 100644 templates/form/radios.html.twig create mode 100644 templates/form/select.html.twig create mode 100644 templates/form/textarea.html.twig create mode 100644 templates/layout/page--user.html.twig create mode 100644 templates/layout/page.html.twig create mode 100644 templates/layout/region--footer.html.twig create mode 100644 templates/layout/region--header.html.twig create mode 100644 templates/media/media--audio.html.twig create mode 100644 templates/media/media--image--gallery.html.twig create mode 100644 templates/media/media--image.html.twig create mode 100644 templates/media/responsive-image.html.twig create mode 100644 templates/navigation/breadcrumb.html.twig create mode 100644 templates/navigation/menu--footer.html.twig create mode 100644 templates/navigation/menu--main.html.twig create mode 100644 templates/navigation/menu-local-action.html.twig create mode 100644 templates/navigation/menu.html.twig create mode 100644 templates/navigation/pager.html.twig create mode 100644 templates/paragraphs/paragraph--accordion.html.twig create mode 100644 templates/paragraphs/paragraph--aside.html.twig create mode 100644 templates/paragraphs/paragraph--horizontal-tabs.html.twig create mode 100644 templates/paragraphs/paragraph--media--media-gallery.html.twig create mode 100644 templates/paragraphs/paragraph.html.twig diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..0a3af40 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,7 @@ +# Browsers that we support + +last 1 version +> 1% +maintained node versions +not dead +ie 11 diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..cf0dff6 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,5 @@ +# Unix-style newlines with a newline ending every file +[*] +indent_style = space +indent_size = 2 +insert_final_newline = true diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..db181dd --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +**/*.min.js diff --git a/.eslintrc.yml b/.eslintrc.yml new file mode 100644 index 0000000..2a4eaec --- /dev/null +++ b/.eslintrc.yml @@ -0,0 +1,36 @@ +extends: + - airbnb + - prettier + - prettier/react + - plugin:prettier/recommended +plugins: + - react + - prettier + - jest +env: + es6: true + browser: true + jest/globals: true +globals: + expect: true + it: true + describe: true + Drupal: true +parser: babel-eslint +rules: + strict: 0 + react/jsx-filename-extension: [1, { 'extensions': ['.js', '.jsx'] }] + import/no-extraneous-dependencies: 0 + react/prefer-stateless-function: 0 + prettier/prettier: error + jsx-a11y/label-has-for: + - 2 + - required: + some: + - nesting + - id +overrides: + - files: + - '*.stories.js' + rules: + react/no-danger: 0 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7b1db20 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# Ignore compiled files. +dist + +# Yarn/NPM +node_modules/ +yarn.lock + +# Storybook +.out + +# System +.DS_Store + +# Git deploy +.publish + +# Composer +composer.lock +/vendor/ + +# Jest +.coverage + +# Storybook Public +/storybook \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5fca0d5 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +scripts-prepend-node-path=true diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000000000000000000000000000000000000..484269fc385bdd05416924c78159c5f1a7b099c4 GIT binary patch literal 4608 zcmeH}drXs86u{5d@9PUnvGBDBBFak?lOZ68Zdp+%4oSvCC(dYyh|cLAQXf_4R&=66 zr-b?3lBEH4_()jXbjnP|5O9?&aX1x4qSX0dl4%8$qHXWa1qxjkvqrW*W;o<`ALqOG zo_o%@_m*GID_TmA1(?7^UIiBHL<%A&J%epZj|>A4V1xGUgpgh(05*r@e-r^5?v>_` z!eJ7H2+g?|p}HY?u_KTL@8jP}7!4YD4{I%~#mu`eDm*cc2=%`W&zRn_y0)P6XcNQI z?;gE_VjvFUAqN)1V#tMPNPr1g=At$aVqp<#CtxrB87l%rf`D<@r}Z-jx_r1Mbx{nW z`#kmsVeW5J2VFW8VN>1kWeHH2}i~t5y;T{*Q_1?O-i~WY7hyP&NG6e~ zWHJ>mm&U%+xgkys-2@WcTp zhT&_$vI3433OPLO%!l|LIEBzBIC`qcH*(;DY z_wlB}&09Vx+WOhfUAy<}-S_zyW%~~t{HpxW;UnLCd;G+ACr?#=f2O9k?(9#-bM+T~ zy?E(z+km-ws&+sdfa8{enS1CemVqmh2r9u0{s$jG%wUIMxdhu z6r3_GH}GS`2codZPMZfCC4qOUo5eT;e8 z+&RLSin6?ycQhQI#&@*sQQqB^AzneiV{fgYd7Ittp*Ce%c0Mi9->9A!$1}|Y&K!Ig z(G^0VYGbiw)(>I!TRC0kY%dMy)aJwMQ*Fko2QB;U%BUiBrJv2JtjSCqdEOeC { + api.cache(true); + + const presets = [ + '@babel/preset-react', + [ + '@babel/preset-env', + { + corejs: 3, + useBuiltIns: 'usage', + }, + ], + [ + 'minify', + { + builtIns: false + } + ] + ]; + + const comments = false; + + return { presets, comments }; +}; diff --git a/cdesai_emulsify.breakpoints.yml b/cdesai_emulsify.breakpoints.yml new file mode 100644 index 0000000..4fac4a2 --- /dev/null +++ b/cdesai_emulsify.breakpoints.yml @@ -0,0 +1,13 @@ +# Breakpoints - change based on site need +cdesai_emulsify.small: + label: small + mediaQuery: 'all and (min-width: 0px)' + weight: 0 +cdesai_emulsify.medium: + label: medium + mediaQuery: 'all and (min-width: 768px)' + weight: 1 +cdesai_emulsify.large: + label: large + mediaQuery: 'all and (min-width: 1200px)' + weight: 2 diff --git a/cdesai_emulsify.info.yml b/cdesai_emulsify.info.yml new file mode 100644 index 0000000..39abad1 --- /dev/null +++ b/cdesai_emulsify.info.yml @@ -0,0 +1,48 @@ +name: CDesai Sample +type: theme +description: Theme based on Emulsify. +base theme: stable +core: 8.x +core_version_requirement: ^8 || ^9 + +# Libraries (These are loaded on every page. Use https://www.drupal.org/developing/api/8/assets#twig whenever possible.) +libraries: + - 'cdesai_emulsify/global' + +# Libraries override allows you to remove libraries added by other projects. +libraries-override: + sample_layouts/twocol: false + sample_layouts/threecol: false + +# CKEditor stylesheet loads in wysiwyg to give content editors a better experience +ckeditor_stylesheets: + - dist/style.css + +regions: + header: Header + content: Content + sidebar: 'Sidebar' + footer: Footer + +logo: images/logo.png + +# MUST install `components` module: `drush dl components && drush en components -y`` +component-libraries: + foundations: + paths: + - source/01-foundations + layouts: + paths: + - source/02-layouts + elements: + paths: + - source/03-elements + components: + paths: + - source/04-components + templates: + paths: + - source/05-templates + content: + paths: + - source/06-content diff --git a/cdesai_emulsify.theme b/cdesai_emulsify.theme new file mode 100644 index 0000000..70281a2 --- /dev/null +++ b/cdesai_emulsify.theme @@ -0,0 +1,15 @@ +getTimestamp(); + // convert current time to timestamp + $current_timestamp = strtotime("now"); + // returns TRUE if past event, FALSE otherwise + $variables['event_is_past'] = $current_timestamp > $date_timestamp ?: FALSE; + + // break up the start and end dates + $startDateObj = DateTime::createFromFormat("l, F j, Y - h:ia", $start_date); + $event_start_date = $startDateObj->format($dateFormat); + $event_start_time = $startDateObj->format('g:ia'); + + if (!empty($end_date)) { + $endDateObj = DateTime::createFromFormat("l, F j, Y - h:ia", $end_date); + $event_end_date = $endDateObj->format($dateFormat . ', Y'); + $event_end_time = $endDateObj->format('g:ia'); + + // default to display both the start and end dates + $variables['event_date'] = $event_start_date . ' - ' . $event_end_date; + // if the start date and end date are equal, display only the end date + if ($startDateObj->format($dateFormat . ', Y') == $event_end_date) { + $variables['event_date'] = $event_end_date; + } + // append the start and end times. + $variables['event_time'] = $event_start_time . ' - ' . $event_end_time; + // If the start and end time are the same, display "All Day" instead. + if ($event_start_time == $event_end_time && $event_start_date == $event_end_date) { + $variables['event_time'] = t('All Day'); + } + } else { + // If no end date, show only the start date and the text "All Day". + $variables['event_date'] = $event_start_date; + $variables['event_time'] = t('All Day'); + } + } + } + } + +} diff --git a/includes/page.inc b/includes/page.inc new file mode 100644 index 0000000..b35a9ba --- /dev/null +++ b/includes/page.inc @@ -0,0 +1,12 @@ +getParentEntity(); + $renderer->addCacheableDependency($variables, $parent); + // Check if the node is on a page with the page type field. + if ($parent instanceof NodeInterface && + $parent->bundle() == 'page' && + $parent->hasField('field_page_type') && + !$parent->get('field_page_type')->isEmpty() + ) { + $pageTypes = $parent->get('field_page_type')->referencedEntities(); + $pageTypeTerm = reset($pageTypes); + $renderer->addCacheableDependency($variables, $pageTypeTerm); + // If the term is a child term, set the parent to page type. + if ($pageTypeTerm->parent->target_id !== "0") { + $parentTerm = Term::load($pageTypeTerm->parent->target_id); + $renderer->addCacheableDependency($variables, $parentTerm); + $variables['page_type'] = $parentTerm->getName(); + $variables['sub_page_type'] = $pageTypeTerm->getName(); + } + // Otherwise, set the term to page type. + else { + $variables['page_type'] = $pageTypeTerm->getName(); + } + } +} + +/** + * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE(). + */ +function cdesai_emulsify_preprocess_paragraph__excerpt(&$variables) { + $content = &$variables['content']; + + // check for field_url and update the link text to 'View Source' + // when the link text value contains the same value as the URL, + // which is the default behavior when no link text is provided. + if (isset($content['field_url']) & !empty($content['field_url'])) { + if (isset($content['field_url'][0]['#title'])) { + $urlString = $content['field_url'][0]['#url']->toString(); + if ($content['field_url'][0]['#title'] == $urlString) { + $content['field_url'][0]['#title'] = 'View Source'; + } + } + } + +} + +/** + * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE(). + */ +function cdesai_emulsify_preprocess_paragraph__media_item(&$variables) { + $content = &$variables['content']; + $parent = $variables['elements']['#paragraph']->getParentEntity(); + if (isset($content['field_caption_hide'][0]['#markup'])) { + switch ($content['field_caption_hide'][0]['#markup']) { + case 'No': + if (!isset($content['field_caption'][0])) { + // check for media and if the field body is not empty + if (isset($content['field_media'][0])) { + $media = $content['field_media'][0]['#media']; + if ($media->hasField('field_body') && !$media->get('field_body')->isEmpty()) { + $field_body = $media->get('field_body')->getValue(); + $paragraph = &$variables['paragraph']; + // copy field body to field caption + $paragraph->field_caption->value = $field_body[0]['value']; + // render field_caption with parent view_mode + $content['field_caption'] = $paragraph->field_caption->view($variables['view_mode']); + $content['field_caption'][0]['#format'] = 'limited_html'; + } + } + } + break; + case 'Yes': + // hide caption is checked + if (isset($content['field_caption'][0])) { + unset($content['field_caption'][0]); + } + break; + } + } + // Remove the default alignment from media items unless added to a Basic + // paragraph. + if ($parent->getEntityTypeId() != 'paragraph' || + $parent->bundle() != 'basic') { + $content['field_media_alignment'] = false; + } +} + +/** + * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE(). + */ +function cdesai_emulsify_preprocess_paragraph__header(&$variables) { + /** @var \Drupal\paragraphs\ParagraphInterface $paragraph */ + $paragraph = $variables['paragraph']; + $parent = $paragraph->getParentEntity(); + + if ($parent->hasField('field_date') && $parent->get('field_date')->count() > 0) { + $date = $parent->get('field_date')->get(0)->getValue(); + // See /admin/config/regional/date-time for date formats. + $variables['header_date'] = \Drupal::service('date.formatter')->format(strtotime($date['value']), 'header_date'); + } + + // Get the URL of the parent node for teaser headers. + if ($variables['view_mode'] == 'teaser_header') { + if ($parent instanceof NodeInterface) { + $variables['node_url'] = $parent->toUrl()->toString(); + $renderer = \Drupal::service('renderer'); + $renderer->addCacheableDependency($variables, $parent); + } + } +} + +/** + * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE(). + */ +function cdesai_emulsify_preprocess_paragraph__horizontal_tabs(&$variables) { + // Get title fields of all nested tabs for use in the tab list, + // and set a unique prefix for tab element IDs to avoid collisions when + // multiple tabs are included on a page. + $tabs = \Drupal\Core\Render\Element::children($variables['content']['field_tabs']); + $tabId = \Drupal\Component\Utility\Html::getUniqueId('tab'); + foreach ($tabs as $tabIndex) { + $paragraph = $variables['content']['field_tabs'][$tabIndex]['#paragraph']; + if ($paragraph->hasField('field_title')) { + $title = $paragraph->get('field_title'); + $variables['content']['tab_titles'][$tabIndex] = $title->view('horizontal_tab'); + $variables['content']['tab_titles'][$tabIndex]['#id_prefix'] = $tabId; + } + $variables['content']['field_tabs'][$tabIndex]['#id_prefix'] = $tabId; + } +} + +/** + * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE(). + */ +function cdesai_emulsify_preprocess_paragraph__tab__horizontal_tab(&$variables) { + if (!empty($variables['elements']['#id_prefix'])) { + $variables['id_prefix'] = $variables['elements']['#id_prefix']; + } +} diff --git a/includes/view.inc b/includes/view.inc new file mode 100644 index 0000000..ab922ca --- /dev/null +++ b/includes/view.inc @@ -0,0 +1,93 @@ + $vars['view']->getTitle(), + ]; + } + + // Add classes to the more link to selected views. + if (in_array($vars['id'], [ + 'events_teaser_small', + 'news_teaser_small', + 'media_resources_tar', + 'page_teaser_topic', + ]) && !empty($vars['more'])) { + $vars['more']['#options']['attributes']['class'][] = 'arrow-link'; + $vars['more']['#options']['attributes']['class'][] = 'view__more-link'; + } + elseif (in_array($vars['id'], [ + 'publication_teaser', + 'news_teaser', + 'news_related_card', + 'page_teaser', + ]) && !empty($vars['more'])) { + $vars['more']['#options']['attributes']['class'][] = 'button'; + $vars['more']['#options']['attributes']['class'][] = 'button--secondary'; + } +} + +/** + * Implements hook_preprocess_views_view__HOOK(). + */ +function cdesai_emulsify_preprocess_views_view__events_by_series(&$vars) { + if (!empty($vars['attachment_before']) && + !empty($vars['attachment_before'][0]) + ) { + $attachment_before = $vars['attachment_before'][0]['#view']; + $vars['attachment_before_rows'] = $attachment_before->total_rows; + } +} + +/** + * Implements hook_form_FORM_ID_alter(). + */ +function cdesai_emulsify_form_views_exposed_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $formState) { + // Group start and end date within a fieldset. + if (!empty($form['#id']) && + in_array($form['#id'], ['views-exposed-form-news-teaser-list-search-news']) && + !empty($form['published_date']) + ) { + $published_date_range = [ + '#type' => 'fieldset', + '#name' => 'published_date_range', + '#title' => t('Published Date'), + 'published_date' => $form['published_date'], + ]; + // Since the order of the displayed exposed form options more or less + // follows the array order, insert the new fieldset next to the start date. + $published_date_index = array_search('published_date', array_keys($form)); + $form = array_merge( + array_slice($form, 0, $published_date_index), + ['published_date_range' => $published_date_range], + array_slice($form, $published_date_index) + ); + unset($form['published_date']); + } +} + +/** + * Implements hook_preprocess_views_exposed_form + */ +function cdesai_emulsify_preprocess_views_exposed_form(&$vars) { + $form = &$vars['form']; + if (!empty($form['published_date_range'])) { + // Views doesn't add labels to exposed form elements until the preprocess + // function, so we do the same thing here for elements moved into a fieldset. + // @see template_preprocess_views_exposed_form + $form['published_date_range']['published_date']['min']['#title'] = t('Start'); + $form['published_date_range']['published_date']['max']['#title'] = t('End'); + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..777fb01 --- /dev/null +++ b/package.json @@ -0,0 +1,125 @@ +{ + "name": "emulsify-drupal", + "version": "1.0.0", + "description": "Storybook development + Webpack Build + Drupal 8 theme", + "keywords": [ + "component library", + "design system", + "drupal", + "pattern library", + "storybook", + "styleguide" + ], + "author": "Evan Willhite ", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.11.6", + "@babel/preset-env": "^7.11.5", + "@storybook/addon-a11y": "6.0.21", + "@storybook/addon-actions": "6.0.21", + "@storybook/addon-docs": "^6.1.14", + "@storybook/addon-links": "6.0.21", + "@storybook/addons": "6.0.21", + "@storybook/react": "6.0.21", + "@storybook/storybook-deployer": "^2.8.6", + "@tailwindcss/postcss7-compat": "^2.0.2", + "add-attributes-twig-extension": "^0.1.0", + "autoprefixer": "^9.8.6", + "babel-eslint": "^10.0.3", + "babel-loader": "^8.1.0", + "babel-preset-minify": "^0.5.0", + "bem-twig-extension": "^0.1.1", + "breakpoint-sass": "^2.7.1", + "clean-webpack-plugin": "^3.0.0", + "css-loader": "^4.3.0", + "eslint": "^7.9.0", + "eslint-loader": "^4.0.2", + "eslint-plugin-import": "^2.22.0", + "eslint-plugin-jsx-a11y": "^6.2.3", + "eslint-plugin-react": "^7.20.6", + "fibers": "^5.0.0", + "file-loader": "^6.1.0", + "focus-visible": "^5.2.0", + "fs": "^0.0.1-security", + "glob": "^7.1.4", + "gsap": "^3.6.1", + "imagemin-webpack-plugin": "^2.4.2", + "js-yaml-loader": "^1.2.2", + "macy": "^2.5.1", + "node-sass": "^4.14.1", + "node-sass-glob-importer": "^5.3.2", + "normalize.css": "^8.0.1", + "postcss": "^7.0.35", + "postcss-custom-properties": "^9.1.1", + "ramda": "^0.27.1", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "sass": "^1.32.13", + "sass-loader": "^10.0.2", + "style-loader": "^1.2.1", + "stylelint": "^13.7.1", + "stylelint-config-prettier": "^8.0.1", + "stylelint-config-standard": "^20.0.0", + "stylelint-webpack-plugin": "^2.0.0", + "svg-sprite-loader": "^5.0.0", + "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2", + "twig": "^1.15.2", + "twig-drupal-filters": "^3.1.0", + "twig-loader": "https://github.com/fourkitchens/twig-loader", + "webpack": "^4.44.1", + "webpack-cli": "^3.3.11", + "webpack-merge": "^5.1.4" + }, + "scripts": { + "commit": "git-cz", + "lint": "eslint ./source", + "a11y": "npm run build-storybook && ./scripts/a11y.js -r", + "storybook": "start-storybook --ci -s ./dist,./images -p 6006", + "build-storybook": "build-storybook -s ./dist,./images -o storybook", + "deploy-storybook": "storybook-to-ghpages -o .out", + "webpack": "webpack --watch --config ./webpack/webpack.dev.js --display-error-details", + "build": "webpack --config ./webpack/webpack.prod.js --display-error-details", + "develop": "concurrently --raw \"npm run webpack\" \"npm run storybook\"", + "test": "jest --coverage", + "twatch": "jest --no-coverage --watch --verbose", + "coverage": "yarn test && open-cli .coverage/lcov-report/index.html", + "format": "prettier --write \"**/*.{js,yml,scss,md}\"", + "lint-staged": "lint-staged", + "deploy": "npm run build && npm run build-storybook" + }, + "devDependencies": { + "@babel/preset-react": "^7.10.1", + "@storybook/addon-viewport": "^6.1.15", + "@storybook/theming": "^6.2.1", + "@testing-library/react": "^10.2.1", + "@whitespace/storybook-addon-html": "^4.2.0", + "babel-jest": "^26.3.0", + "chalk": "^4.0.0", + "commitizen": "^4.1.2", + "concurrently": "^5.3.0", + "core-js": "3", + "cz-conventional-changelog": "3.3.0", + "eslint-config-prettier": "^6.11.0", + "eslint-plugin-jest": "^23.20.0", + "eslint-plugin-prettier": "^3.1.3", + "husky": "^4.2.5", + "jest": "^26.4.2", + "lint-staged": "^10.2.11", + "micromodal": "^0.4.6", + "mini-css-extract-plugin": "^0.11.3", + "open-cli": "^6.0.1", + "pa11y": "^5.3.0", + "postcss-focus-visible": "^5.0.0", + "postcss-loader": "^3.0.0", + "prettier": "2.1.1", + "react-test-renderer": "^16.13.1", + "tiny-slider": "^2.9.3", + "twig-testing-library": "^1.1.1", + "yaml": "^1.10.0" + }, + "config": { + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..ab92c68 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + tailwindcss: {}, + 'postcss-focus-visible': {}, + autoprefixer: {}, + }, +}; \ No newline at end of file diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..de2f53c --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,4 @@ +module.exports = { + singleQuote: true, + trailingComma: 'all', +}; diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..43e603ec4f0549c6ace26705bebf79b2a5d5c5be GIT binary patch literal 11781 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 literal 0 HcmV?d00001 diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..6259f56 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,130 @@ +module.exports = { + theme: { + colors: { + purple: { + DEFAULT: '#612A60', + dark: '#3F0C39', + }, + orange: { + light: '#EDAA1A', + DEFAULT: '#DA4926', + dark: '#9E3D1F', + }, + teal: { + DEFAULT: '#1C8B81', + }, + gray: { + 100: '#F3F3F3', + 200: '#DDDDDD', + 300: '#8C8B8C', + 400: '#636363', + 500: '#333333', + warm: '#3A3633', + smoke: '#48535B', + }, + white: { + DEFAULT: '#FFFFFF', + }, + black: { + DEFAULT: '#000000', + }, + }, + fontSize: { + xxs: '12px', + xs: '14px', + sm: '16px', + 'base-sm': '18px', + base: '20px', + md: '24px', + 'md-lg': '28px', + lg: '32px', + xl: '36px', + xxl: '40px', + '3xl': '48px', + '4xl': '56px', + display: '80px', + }, + lineHeight: { + 'x-tight': '1.05', + tight: '1.15', + narrow: '1.33', + base: '1.5', + loose: '2', + }, + fontFamily: { + sans: ['freight-sans-pro', 'Helvetica', 'Arial', 'sans-serif'], + serif: ['freight-text-pro', 'Georgia', 'serif'], + }, + screens: { + 'mobile-sm': '360px', + mobile: '480px', + tablet: '640px', + 'tablet-lg': '880px', + 'hide-mobile-menu': '900px', + desktop: '1024px', + 'desktop-lg': '1200px', + 'desktop-xl': '1350px', + }, + spacing: { + 0: '0', + '1px': '1px', + '2px': '2px', + '3px': '3px', + xxs: '4px', + xs: '8px', + sm: '16px', + base: '24px', + md: '40px', + lg: '56px', + xl: '80px', + xxl: '96px', + '3xl': '160px', + '4xl': '20rem', + full: '100%', + }, + borderWidth: { + DEFAULT: '1px', + 0: '0', + 2: '2px', + 3: '3px', + 4: '4px', + 6: '6px', + 8: '8px', + }, + boxShadow: { + sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', + DEFAULT: '0 2px 8px rgba(0,0,0,0.4);', + md: '0 3px 12px -1px rgba(0, 0, 0, 0.15)', + lg: + '0 29px 70px -40px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', + none: 'none', + }, + extend: { + borderRadius: { + '4xl': '2rem', + }, + maxWidth: { + '1/4': '25%', + '1/3': '33.33%', + '1/2': '50%', + '2/3': '66.66%', + '3/4': '75%', + }, + outline: { + blue: '2px solid #0000ff', + white: '1px dashed #ffffff', + orange: '1px dashed #DA4926', + }, + letterSpacing: { + loose: '1px', + }, + }, + }, + variants: { + extend: { + outline: ['focus-visible'], + opacity: ['disabled'], + backgroundColor: ['active'], + }, + }, +}; diff --git a/templates/block/block--facet-block.html.twig b/templates/block/block--facet-block.html.twig new file mode 100644 index 0000000..a93bf63 --- /dev/null +++ b/templates/block/block--facet-block.html.twig @@ -0,0 +1,6 @@ +{% if content.0['#items'] is not null %} + {% include "@components/facets/facet-group.twig" with { + facet_group_title: label, + facet_group_items: content + }%} +{% endif %} \ No newline at end of file diff --git a/templates/block/block--filterbycontenttype.html.twig b/templates/block/block--filterbycontenttype.html.twig new file mode 100644 index 0000000..f2ddd67 --- /dev/null +++ b/templates/block/block--filterbycontenttype.html.twig @@ -0,0 +1,3 @@ +{% include '@components/horizontal-facets/horizontal-facets.twig' with { + facets: content.0['#items'] +}%} \ No newline at end of file diff --git a/templates/block/block--mainnavigation.html.twig b/templates/block/block--mainnavigation.html.twig new file mode 100644 index 0000000..410ed85 --- /dev/null +++ b/templates/block/block--mainnavigation.html.twig @@ -0,0 +1,49 @@ +{# +/** + * @file + * Theme override for a menu block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: HTML attributes for the containing element. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: HTML attributes for the title element. + * - content_attributes: HTML attributes for the content element. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * Headings should be used on navigation menus that consistently appear on + * multiple pages. When this menu block's label is configured to not be + * displayed, it is automatically made invisible using the 'visually-hidden' CSS + * class, which still keeps it visible for screen-readers and assistive + * technology. Headings allow screen-reader and keyboard only users to navigate + * to or skip the links. + * See http://juicystudio.com/article/screen-readers-display-none.php and + * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. + */ +#} + +{# Label. If not displayed, we still provide it for screen readers. #} +{% if not configuration.label_display %} + {% set title_attributes = title_attributes.addClass('visually-hidden') %} +{% endif %} +{{ title_prefix }} +{% include "@elements/text/headings/_heading.twig" with { + "heading_level": 2, + "heading": label, +} %} +{{ title_suffix }} + +{# Menu. #} +{% block content %} + {{ content }} +{% endblock %} diff --git a/templates/block/block--submenu.html.twig b/templates/block/block--submenu.html.twig new file mode 100644 index 0000000..89a418f --- /dev/null +++ b/templates/block/block--submenu.html.twig @@ -0,0 +1,5 @@ +{% include "@components/subnav/subnav.twig" with { + subnav_title: label, + subnav_menu: content, + header_id: 'subnav-header-' ~ attributes.id, +}%} diff --git a/templates/block/block--views-exposed-filter-block.html.twig b/templates/block/block--views-exposed-filter-block.html.twig new file mode 100644 index 0000000..c81b3a1 --- /dev/null +++ b/templates/block/block--views-exposed-filter-block.html.twig @@ -0,0 +1,2 @@ + +{{ content }} \ No newline at end of file diff --git a/templates/block/block.html.twig b/templates/block/block.html.twig new file mode 100644 index 0000000..f0a2529 --- /dev/null +++ b/templates/block/block.html.twig @@ -0,0 +1,37 @@ +{# +/** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + */ +#} +
+ {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} + {% block content %} + {{ content }} + {% endblock %} +
diff --git a/templates/content/node--publication--full.html.twig b/templates/content/node--publication--full.html.twig new file mode 100644 index 0000000..a778f61 --- /dev/null +++ b/templates/content/node--publication--full.html.twig @@ -0,0 +1,23 @@ +{% set image %} + {% if content.field_header.0['#paragraph'].field_image is not empty %} + {% set url = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value) %} + {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %} + {{ alt }} + {% else %} + sample placeholder image + {% endif %} +{% endset %} + +{% include '@templates/publication.twig' with { + publication_header: content.field_header|field_value, + publication_media: image, + publication_purchase_url: content.field_url.0['#url'], + publication_author: content.field_authors|field_value, + publication_editor: content.field_editors|field_value, + publication_publisher: content.field_publisher|field_value, + publication_year: content.field_year|field_value, + publication_series: content.field_series|field_value, + publication_type: content.field_publication_type|field_value, + publication_body: content.body, + publication_related_content: false +}%} \ No newline at end of file diff --git a/templates/content/node--publication--search-result.html.twig b/templates/content/node--publication--search-result.html.twig new file mode 100644 index 0000000..b33ebb0 --- /dev/null +++ b/templates/content/node--publication--search-result.html.twig @@ -0,0 +1,26 @@ +{# Set image from page header if it exists #} +{% if content.field_header.0['#paragraph'].field_image is not empty %} + {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %} + {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %} + {% set image %} + {{ alt ? alt : '' }} + {% endset %} +{% endif %} + +{# Trim summary #} +{% if content.field_summary.0['#context'].value|length > 250 %} + {% set summary %} + {{ content.field_summary.0['#context'].value|slice(0, 250) }}... + {% endset %} +{% else %} + {% set summary = content.field_summary|field_value %} +{% endif %} + +{% include "@components/search-listing/search-listing.twig" with { + listing_eyebrow: 'Publication'|t, + listing_title: label, + listing_meta: false, + listing_summary: summary, + listing_media: image ? image : false, + listing_url: url, +}%} \ No newline at end of file diff --git a/templates/content/node--publication--teaser-list.html.twig b/templates/content/node--publication--teaser-list.html.twig new file mode 100644 index 0000000..1290791 --- /dev/null +++ b/templates/content/node--publication--teaser-list.html.twig @@ -0,0 +1,28 @@ +{% set image %} + {% if content.field_header|render|striptags('')|trim %} + {{ content.field_header }} + {% else %} + + {% endif %} +{% endset %} + +{% embed "@components/teaser/teaser--listing/teaser--listing.twig" with { + teaser_media: image, + teaser_url: url, + teaser_link_text: 'View publication details'|t, + teaser_link_title: label, + modifier_classes: attributes.class|join(' ')|trim, + drupal_attributes: attributes|without('class'), +} %} + {% block content %} + {{ title_suffix.contextual_links }} + {{ content.field_year }} + {% include '@components/teaser/_teaser-title.twig' with { + title_tag: 'h4', + teaser_title: label, + modifier_classes: false, + drupal_attributes: false, + } %} + {{ content|without('field_header', 'field_year') }} + {% endblock %} +{% endembed %} diff --git a/templates/content/node--publication--teaser.html.twig b/templates/content/node--publication--teaser.html.twig new file mode 100644 index 0000000..d644cea --- /dev/null +++ b/templates/content/node--publication--teaser.html.twig @@ -0,0 +1,21 @@ +{% set image %} + {% if content.field_header.0['#paragraph'].field_image is not empty %} + {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %} + {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %} + {{ alt ? alt : '' }} + {% else %} + sample placeholder image + {% endif %} +{% endset %} + +{% include "@components/teaser/teaser.twig" with { + modifier_classes: attributes.class|join(' ')|trim, + drupal_attributes: attributes|without('class'), + teaser_image: image, + teaser_eyebrow: content.field_year|field_value, + teaser_title: label|field_value, + teaser_body: content.field_summary|field_value, + teaser_link_class: 'arrow-link', + teaser_link_url: url, + teaser_link_text: 'Read More' +}%} diff --git a/templates/content/node--story--full.html.twig b/templates/content/node--story--full.html.twig new file mode 100644 index 0000000..337e3c6 --- /dev/null +++ b/templates/content/node--story--full.html.twig @@ -0,0 +1,7 @@ +{% include "@templates/story.twig" with { + story_has_footer: tags is not empty ? true : false, + story_header: content.field_header|field_value, + story_content: content.field_content|field_value, + story_tags: content.field_keywords|field_value, + story_related_stories: drupal_view('story_related_card') +}%} diff --git a/templates/content/node--story--related-card.html.twig b/templates/content/node--story--related-card.html.twig new file mode 100644 index 0000000..1cc1428 --- /dev/null +++ b/templates/content/node--story--related-card.html.twig @@ -0,0 +1,15 @@ +{% set image %} + {% if content.field_header|render|striptags('')|trim is not empty %} + {{ content.field_header }} + {% else %} + + {% endif %} +{% endset %} + +{% include "@components/related-content/_related-content-item.twig" with { + title: label, + url: url, + date: content|without('field_header'), + media: image, + header_id: 'related-card-' ~ node.id(), +}%} diff --git a/templates/content/node--story--search-result.html.twig b/templates/content/node--story--search-result.html.twig new file mode 100644 index 0000000..a92179f --- /dev/null +++ b/templates/content/node--story--search-result.html.twig @@ -0,0 +1,26 @@ +{# Set image from page header if it exists #} +{% if content.field_header.0['#paragraph'].field_image is not empty %} + {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %} + {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %} + {% set image %} + {{ alt ? alt : '' }} + {% endset %} +{% endif %} + +{# Trim summary #} +{% if content.field_summary.0['#context'].value|length > 250 %} + {% set summary %} + {{ content.field_summary.0['#context'].value|slice(0, 250) }}... + {% endset %} +{% else %} + {% set summary = content.field_summary|field_value %} +{% endif %} + +{% include "@components/search-listing/search-listing.twig" with { + listing_eyebrow: 'Story'|t, + listing_title: label, + listing_meta: false, + listing_summary: summary, + listing_media: image ? image : false, + listing_url: url, +}%} \ No newline at end of file diff --git a/templates/content/node--story--teaser-list.html.twig b/templates/content/node--story--teaser-list.html.twig new file mode 100644 index 0000000..d37f0ef --- /dev/null +++ b/templates/content/node--story--teaser-list.html.twig @@ -0,0 +1,26 @@ +{% set image %} + {% if content.field_header|render|striptags('')|trim %} + {{ content.field_header }} + {% else %} + + {% endif %} +{% endset %} + +{% embed "@components/teaser/teaser--listing/teaser--listing.twig" with { + teaser_media: image, + teaser_url: url, + teaser_link_text: 'Read story'|t, + teaser_link_title: label, + modifier_classes: attributes.class|join(' ')|trim, + drupal_attributes: attributes|without('class'), +} %} + {% block content %} + {{ title_suffix.contextual_links }} + {{ content.field_series }} + {% include '@components/teaser/_teaser-title.twig' with { + title_tag: 'h4', + teaser_title: label, + } %} + {{ content|without('field_header', 'field_series') }} + {% endblock %} +{% endembed %} diff --git a/templates/content/node--story--teaser.html.twig b/templates/content/node--story--teaser.html.twig new file mode 100644 index 0000000..06e7695 --- /dev/null +++ b/templates/content/node--story--teaser.html.twig @@ -0,0 +1,19 @@ +{% set image %} + {% if content.field_header.0['#paragraph'].field_image is not empty %} + {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %} + {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %} + {{ alt ? alt : '' }} + {% else %} + sample placeholder image + {% endif %} +{% endset %} + +{% include "@components/teaser/teaser.twig" with { + teaser_image: image, + teaser_eyebrow: content.field_series|field_value, + teaser_title: label|field_value, + teaser_body: content.field_summary|field_value, + teaser_link_class: 'arrow-link', + teaser_link_url: url, + teaser_link_text: 'Read More' +}%} \ No newline at end of file diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig new file mode 100644 index 0000000..f2874e7 --- /dev/null +++ b/templates/content/node.html.twig @@ -0,0 +1,95 @@ +{# +/** + * @file + * Theme override to display a node. + * + * Available variables: + * - node: The node entity with limited access to object properties and methods. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - node.getCreatedTime() will return the node creation timestamp. + * - node.hasField('field_example') returns TRUE if the node bundle includes + * field_example. (This does not indicate the presence of a value in this + * field.) + * - node.isPublished() will return whether the node is published or not. + * Calling other methods, such as node.delete(), will result in an exception. + * See \Drupal\node\Entity\Node for a full list of public properties and + * methods for the node object. + * - label: The title of the node. + * - content: All node items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - author_picture: The node author user entity, rendered using the "compact" + * view mode. + * - metadata: Metadata for this node. + * - date: Themed creation date field. + * - author_name: Themed author name field. + * - url: Direct URL of the current node. + * - display_submitted: Whether submission information should be displayed. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - node: The current template type (also known as a "theming hook"). + * - node--type-[type]: The current node type. For example, if the node is an + * "Article" it would result in "node--type-article". Note that the machine + * name will often be in a short form of the human readable label. + * - node--view-mode-[view_mode]: The View Mode of the node; for example, a + * teaser would result in: "node--view-mode-teaser", and + * full: "node--view-mode-full". + * The following are controlled through the node publishing options. + * - node--promoted: Appears on nodes promoted to the front page. + * - node--sticky: Appears on nodes ordered above other non-sticky nodes in + * teaser listings. + * - node--unpublished: Appears on unpublished nodes visible only to site + * admins. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main + * content tag that appears in the template. + * - author_attributes: Same as attributes, except applied to the author of + * the node tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - view_mode: View mode; for example, "teaser" or "full". + * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'. + * - page: Flag for the full page state. Will be true if view_mode is 'full'. + * - readmore: Flag for more state. Will be true if the teaser content of the + * node cannot hold the main body content. + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_node() + * + * @todo Remove the id attribute (or make it a class), because if that gets + * rendered twice on a page this is invalid CSS for example: two lists + * in different view modes. + */ +#} + +
+ + {{ title_prefix }} +

{{ label }}

+ {{ title_suffix }} + + {% if display_submitted %} +
+ {{ author_picture }} + + {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %} + {{ metadata }} + +
+ {% endif %} + + + {{ content }} + + +
+ diff --git a/templates/content/page-title.html.twig b/templates/content/page-title.html.twig new file mode 100644 index 0000000..b31aa93 --- /dev/null +++ b/templates/content/page-title.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Theme override for page titles. + * + * Available variables: + * - title_attributes: HTML attributes for the page title element. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title: The page title, for use in the actual content. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + */ +#} + +{{ title_prefix }} +{% if title %} +

{{ title }}

+{% endif %} +{{ title_suffix }} diff --git a/templates/content/table.html.twig b/templates/content/table.html.twig new file mode 100644 index 0000000..1a4df59 --- /dev/null +++ b/templates/content/table.html.twig @@ -0,0 +1,109 @@ +{# +/** + * @file + * Theme override to display a table. + * + * Available variables: + * - attributes: HTML attributes to apply to the tag. + * - caption: A localized string for the tag. + * Note: Drupal currently supports only one table header row, see + * https://www.drupal.org/node/893530 and + * http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_table/7#comment-5109. + * - header: Table header cells. Each cell contains the following properties: + * - tag: The HTML tag name to use; either 'th' or 'td'. + * - attributes: HTML attributes to apply to the tag. + * - content: A localized string for the title of the column. + * - field: Field name (required for column sorting). + * - sort: Default sort order for this column ("asc" or "desc"). + * - sticky: A flag indicating whether to use a "sticky" table header. + * - rows: Table rows. Each row contains the following properties: + * - attributes: HTML attributes to apply to the tag. + * - data: Table cells. + * - no_striping: A flag indicating that the row should receive no + * 'even / odd' styling. Defaults to FALSE. + * - cells: Table cells of the row. Each cell contains the following keys: + * - tag: The HTML tag name to use; either 'th' or 'td'. + * - attributes: Any HTML attributes, such as "colspan", to apply to the + * table cell. + * - content: The string to display in the table cell. + * - active_table_sort: A boolean indicating whether the cell is the active + table sort. + * - footer: Table footer rows, in the same format as the rows variable. + * - empty: The message to display in an extra row if table does not have + * any rows. + * - no_striping: A boolean indicating that the row should receive no striping. + * - header_columns: The number of columns in the header. + * + * @see template_preprocess_table() + */ +#} + + {% if caption %} + + {% endif %} + + {% for colgroup in colgroups %} + {% if colgroup.cols %} + + {% for col in colgroup.cols %} + + {% endfor %} + + {% else %} + + {% endif %} + {% endfor %} + + {% if header %} + + + {% for cell in header %} + <{{ cell.tag }}{{ cell.attributes.addClass('table__heading-cell') }}> + {{- cell.content -}} + + {% endfor %} + + + {% endif %} + + {% if rows %} + + {% for row in rows %} + + {% for cell in row.cells %} + <{{ cell.tag }}{{ cell.attributes.addClass('table__cell') }}> + {{- cell.content -}} + + {% endfor %} + + {% endfor %} + + {% elseif empty %} + + + + + + {% endif %} + {% if footer %} + + {% for row in footer %} + + {% + set footer_cell_classes = [ + 'table__heading-cell', + 'table__footer-cell', + ] + %} + {% for cell in row.cells %} + <{{ cell.tag }}{{ cell.attributes.addClass(footer_cell_classes) }}> + {{- cell.content -}} + + {% endfor %} + + {% endfor %} + + {% endif %} +
tag. + * - colgroups: Column groups. Each group contains the following properties: + * - attributes: HTML attributes to apply to the
{{ caption }}
{{ empty }}
diff --git a/templates/fields/field--node--field-date--teaser-small.html.twig b/templates/fields/field--node--field-date--teaser-small.html.twig new file mode 100644 index 0000000..65bb17f --- /dev/null +++ b/templates/fields/field--node--field-date--teaser-small.html.twig @@ -0,0 +1,20 @@ +{% if label_display == 'visually_hidden' %} + {{ label }} +{% endif %} +{% if multiple %} + + {% for item in items %} + {% include '@components/teaser/teaser--small/_teaser-eyebrow.twig' with { + drupal_attributes: item.attributes|without('class'), + teaser_eyebrow: item.content, + } %} + {% endfor %} + +{% else %} + {% for item in items %} + {% include '@components/teaser/teaser--small/_teaser-eyebrow.twig' with { + drupal_attributes: attributes|without('class'), + teaser_eyebrow: item.content, + } %} + {% endfor %} +{% endif %} diff --git a/templates/fields/field--node--field-daterange--teaser.html.twig b/templates/fields/field--node--field-daterange--teaser.html.twig new file mode 100644 index 0000000..e71cdfc --- /dev/null +++ b/templates/fields/field--node--field-daterange--teaser.html.twig @@ -0,0 +1,26 @@ +{% macro display_date(date_content, attributes) %} + {% set rendered = date_content|render|striptags|trim %} + {% set dates = rendered|split(',') %} + {% include '@components/teaser/teaser--event/_teaser-date.twig' with { + teaser_start: dates.0|trim, + teaser_end: dates|length > 1 ? dates.1|trim : false, + drupal_attributes: attributes|without('class'), + modifier_classes: attributes.class|join(' ')|trim + } %} +{% endmacro %} + +{% if label_display == 'visually_hidden' %} + {{ label }} +{% endif %} + +{% if multiple %} + + {% for item in items %} + {{ _self.display_date(item.content, item.attributes) }} + {% endfor %} + +{% else %} + {% for item in items %} + {{ _self.display_date(item.content, attributes) }} + {% endfor %} +{% endif %} diff --git a/templates/fields/field--node--field-location--teaser.html.twig b/templates/fields/field--node--field-location--teaser.html.twig new file mode 100644 index 0000000..e5516d5 --- /dev/null +++ b/templates/fields/field--node--field-location--teaser.html.twig @@ -0,0 +1,22 @@ +{% if label_display == 'visually_hidden' %} + {{ label }} +{% endif %} +{% if multiple %} + + {% for item in items %} + {% include '@components/teaser/teaser--event/_teaser-location.twig' with { + drupal_attributes: item.attributes|without('class'), + teaser_location: item.content, + teaser_location_label: not label_hidden ? label : false, + } %} + {% endfor %} + +{% else %} + {% for item in items %} + {% include '@components/teaser/teaser--event/_teaser-location.twig' with { + drupal_attributes: attributes|without('class'), + teaser_location: item.content, + teaser_location_label: not label_hidden ? label : false, + } %} + {% endfor %} +{% endif %} diff --git a/templates/fields/field--node--field-summary--teaser-list.html.twig b/templates/fields/field--node--field-summary--teaser-list.html.twig new file mode 100644 index 0000000..b3a7a02 --- /dev/null +++ b/templates/fields/field--node--field-summary--teaser-list.html.twig @@ -0,0 +1,20 @@ +{% if label_display == 'visually_hidden' %} + {{ label }} +{% endif %} +{% if multiple %} + + {% for item in items %} + {% include '@components/teaser/_teaser-body.twig' with { + drupal_attributes: item.attributes|without('class'), + teaser_body: item.content, + } %} + {% endfor %} + +{% else %} + {% for item in items %} + {% include '@components/teaser/_teaser-body.twig' with { + drupal_attributes: attributes|without('class'), + teaser_body: item.content, + } %} + {% endfor %} +{% endif %} diff --git a/templates/fields/field--paragraph--field-description.html.twig b/templates/fields/field--paragraph--field-description.html.twig new file mode 100644 index 0000000..cf82fe0 --- /dev/null +++ b/templates/fields/field--paragraph--field-description.html.twig @@ -0,0 +1,32 @@ +{% + set title_classes = [ + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} + {{ item.content }}

+ {% endfor %} + + {% else %} + {% for item in items %} + {{ item.content }}

+ {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}

+ {% endfor %} + {% if multiple %} +
+ {% endif %} + +{% endif %} diff --git a/templates/fields/field--text-long.html.twig b/templates/fields/field--text-long.html.twig new file mode 100644 index 0000000..4f1cbe8 --- /dev/null +++ b/templates/fields/field--text-long.html.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + */ + + @TODO: THIS CAN BE REMOVED IF BEM CLASSES CAN BE APPLIED IN WYSIWYG +#} + +{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %} diff --git a/templates/fields/field--text-with-summary.html.twig b/templates/fields/field--text-with-summary.html.twig new file mode 100644 index 0000000..41efa5f --- /dev/null +++ b/templates/fields/field--text-with-summary.html.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + */ + + @TODO: THIS CAN BE REMOVED IF WYWSIWYG BEM CLASSES CAN BE APPLIED +#} + +{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %} diff --git a/templates/fields/field.html.twig b/templates/fields/field.html.twig new file mode 100644 index 0000000..a10384d --- /dev/null +++ b/templates/fields/field.html.twig @@ -0,0 +1,70 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + */ +#} +{% + set title_classes = [ + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + {% else %} + {% for item in items %} + {{ item.content }} + {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}
+ {% endfor %} + {% if multiple %} + + {% endif %} + +{% endif %} diff --git a/templates/form/checkboxes.html.twig b/templates/form/checkboxes.html.twig new file mode 100644 index 0000000..68b72b6 --- /dev/null +++ b/templates/form/checkboxes.html.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Theme override for a 'checkboxes' #type form element. + * + * Available variables + * - attributes: A list of HTML attributes for the wrapper element. + * - children: The rendered checkboxes. + * + * @see template_preprocess_checkboxes() + */ + @todo: remove this file once https://www.drupal.org/node/1819284 is resolved. + This is identical to core/modules/system/templates/container.html.twig +#} +{% include "@elements/forms/_checkboxes.twig" %} diff --git a/templates/form/field-multiple-value-form.html.twig b/templates/form/field-multiple-value-form.html.twig new file mode 100644 index 0000000..ffabdb5 --- /dev/null +++ b/templates/form/field-multiple-value-form.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override for an individual form element. + * + * Available variables for all fields: + * - multiple: Whether there are multiple instances of the field. + * + * Available variables for single cardinality fields: + * - elements: Form elements to be rendered. + * + * Available variables when there are multiple fields. + * - table: Table of field items. + * - description: The description element containing the following properties: + * - content: The description content of the form element. + * - attributes: HTML attributes to apply to the description container. + * - button: "Add another item" button. + * + * @see template_preprocess_field_multiple_value_form() + */ +#} +{% include "@elements/forms/_multi-value.twig" %} diff --git a/templates/form/fieldset.html.twig b/templates/form/fieldset.html.twig new file mode 100644 index 0000000..976fd61 --- /dev/null +++ b/templates/form/fieldset.html.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Theme override for a fieldset element and its children. + * + * Available variables: + * - attributes: HTML attributes for the fieldset element. + * - errors: (optional) Any errors for this fieldset element, may not be set. + * - required: Boolean indicating whether the fieldeset element is required. + * - legend: The legend element containing the following properties: + * - title: Title of the fieldset, intended for use as the text of the legend. + * - attributes: HTML attributes to apply to the legend. + * - description: The description element containing the following properties: + * - content: The description content of the fieldset. + * - attributes: HTML attributes to apply to the description container. + * - children: The rendered child elements of the fieldset. + * - prefix: The content to add before the fieldset children. + * - suffix: The content to add after the fieldset children. + * + * @see template_preprocess_fieldset() + */ +#} +{% include "@elements/forms/_fieldset.twig" %} diff --git a/templates/form/form-element-label.html.twig b/templates/form/form-element-label.html.twig new file mode 100644 index 0000000..473dccc --- /dev/null +++ b/templates/form/form-element-label.html.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Theme override for a form element label. + * + * Available variables: + * - title: The label's text. + * - title_display: Elements title_display setting. + * - required: An indicator for whether the associated form element is required. + * - attributes: A list of HTML attributes for the label. + * + * @see template_preprocess_form_element_label() + */ +#} +{% include "@elements/forms/_form-label.twig" %} diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig new file mode 100644 index 0000000..4cff540 --- /dev/null +++ b/templates/form/form-element.html.twig @@ -0,0 +1,59 @@ +{# +/** + * @file + * Theme override for a form element. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - errors: (optional) Any errors for this form element, may not be set. + * - prefix: (optional) The form element prefix, may not be set. + * - suffix: (optional) The form element suffix, may not be set. + * - required: The required marker, or empty if the associated form element is + * not required. + * - type: The type of the element. + * - name: The name of the element. + * - label: A rendered label element. + * - label_display: Label display setting. It can have these values: + * - before: The label is output before the element. This is the default. + * The label includes the #title and the required marker, if #required. + * - after: The label is output after the element. For example, this is used + * for radio and checkbox #type elements. If the #title is empty but the + * field is #required, the label will contain only the required marker. + * - invisible: Labels are critical for screen readers to enable them to + * properly navigate through forms but can be visually distracting. This + * property hides the label for everyone except screen readers. + * - attribute: Set the title attribute on the element to create a tooltip but + * output no label element. This is supported only for checkboxes and radios + * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement(). + * It is used where a visual label is not needed, such as a table of + * checkboxes where the row and column provide the context. The tooltip will + * include the title and required marker. + * - description: (optional) A list of description properties containing: + * - content: A description of the form element, may not be set. + * - attributes: (optional) A list of HTML attributes to apply to the + * description content wrapper. Will only be set when description is set. + * - description_display: Description display setting. It can have these values: + * - before: The description is output before the element. + * - after: The description is output after the element. This is the default + * value. + * - invisible: The description is output after the element, hidden visually + * but available to screen readers. + * - disabled: True if the element is disabled. + * - title_display: Title display setting. + * + * @see template_preprocess_form_element() + */ +#} +{% + set classes = [ + 'js-form-item', + 'form-item', + 'js-form-type-' ~ type|clean_class, + 'form-item-' ~ name|clean_class, + 'js-form-item-' ~ name|clean_class, + title_display not in ['after', 'before'] ? 'form-no-label', + disabled == 'disabled' ? 'form-disabled', + errors ? 'form-item--error', + ] +%} +{% include "@elements/forms/_form-element.twig" %} diff --git a/templates/form/input.html.twig b/templates/form/input.html.twig new file mode 100644 index 0000000..d06db43 --- /dev/null +++ b/templates/form/input.html.twig @@ -0,0 +1,13 @@ +{# +/** + * @file + * Theme override for an 'input' #type form element. + * + * Available variables: + * - attributes: A list of HTML attributes for the input element. + * - children: Optional additional rendered elements. + * + * @see template_preprocess_input() + */ +#} +{% include "@elements/forms/_input.twig" %} diff --git a/templates/form/radios.html.twig b/templates/form/radios.html.twig new file mode 100644 index 0000000..ae7608b --- /dev/null +++ b/templates/form/radios.html.twig @@ -0,0 +1,13 @@ +{# +/** + * @file + * Theme override for a 'radios' #type form element. + * + * Available variables + * - attributes: A list of HTML attributes for the wrapper element. + * - children: The rendered radios. + * + * @see template_preprocess_radios() + */ +#} +{% include "@elements/forms/_radios.twig" %} diff --git a/templates/form/select.html.twig b/templates/form/select.html.twig new file mode 100644 index 0000000..fd28b7c --- /dev/null +++ b/templates/form/select.html.twig @@ -0,0 +1,13 @@ +{# +/** + * @file + * Theme override for a select element. + * + * Available variables: + * - attributes: HTML attributes for the select tag. + * - options: The option element children. + * + * @see template_preprocess_select() + */ +#} +{% include "@elements/forms/_select-element.twig" %} diff --git a/templates/form/textarea.html.twig b/templates/form/textarea.html.twig new file mode 100644 index 0000000..c4c8b87 --- /dev/null +++ b/templates/form/textarea.html.twig @@ -0,0 +1,16 @@ +{# +/** + * @file + * Theme override for a 'textarea' #type form element. + * + * Available variables + * - wrapper_attributes: A list of HTML attributes for the wrapper element. + * - attributes: A list of HTML attributes for the textarea element. + * - resizable: An indicator for whether the textarea is resizable. + * - required: An indicator for whether the textarea is required. + * - value: The textarea content. + * + * @see template_preprocess_textarea() + */ +#} +{% include "@elements/forms/_textarea.twig" %} diff --git a/templates/layout/page--user.html.twig b/templates/layout/page--user.html.twig new file mode 100644 index 0000000..5a190d3 --- /dev/null +++ b/templates/layout/page--user.html.twig @@ -0,0 +1,28 @@ +{% extends '@layouts/site-container/site-container.twig' %} + {% block site_content %} + + {{ page.header }} + {{ drupal_entity('block', 'submenu') }} + {{ page.navigation }} + {{ page.breadcrumb }} + {{ page.highlighted }} + {{ page.help }} + +
+
+ {{ page.content }} +
+
+ + {{ page.footer }} + + {% endblock %} + {% block additional_content %} + {% if not is_front %} + {% include '@components/social-sharing/social-sharing.twig' with { + share_url: url(''), + share_title: share_title, + share_id: 'social-sharing', + } %} + {% endif %} + {% endblock %} diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig new file mode 100644 index 0000000..a41507a --- /dev/null +++ b/templates/layout/page.html.twig @@ -0,0 +1,33 @@ +{% extends '@layouts/site-container/site-container.twig' %} + {% block site_content %} + + {{ page.header }} + {{ drupal_entity('block', 'submenu') }} + {{ page.navigation }} + {{ page.breadcrumb }} + {{ page.highlighted }} + {{ page.help }} + +
+ {{ page.preface }} + {{ page.content }} + {% if not is_front %} + + {% endif %} + {{ page.postscript }} +
+ + {{ page.footer }} + + {% endblock %} + {% block additional_content %} + {% if not is_front %} + {% include '@components/social-sharing/social-sharing.twig' with { + share_url: url(''), + share_title: share_title, + share_id: 'social-sharing', + } %} + {% endif %} + {% endblock %} diff --git a/templates/layout/region--footer.html.twig b/templates/layout/region--footer.html.twig new file mode 100644 index 0000000..041745d --- /dev/null +++ b/templates/layout/region--footer.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override to display a region. + * + * Available variables: + * - content: The content for this region, typically blocks. + * - attributes: HTML attributes for the region div. + * - region: The name of the region variable as defined in the theme's + * .info.yml file. + * + * @see template_preprocess_region() + */ +#} +{% include "@layouts/footer/footer.twig" with { + footer_social_menu: drupal_menu('social-media'), + footer_legal_menu: drupal_menu('footer') +}%} diff --git a/templates/layout/region--header.html.twig b/templates/layout/region--header.html.twig new file mode 100644 index 0000000..3622200 --- /dev/null +++ b/templates/layout/region--header.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override to display a region. + * + * Available variables: + * - content: The content for this region, typically blocks. + * - attributes: HTML attributes for the region div. + * - region: The name of the region variable as defined in the theme's + * .info.yml file. + * + * @see template_preprocess_region() + */ +#} +{% include "@layouts/header/header.twig" with { + header_menu: drupal_menu('main'), + header_search: false +}%} diff --git a/templates/media/media--audio.html.twig b/templates/media/media--audio.html.twig new file mode 100644 index 0000000..d8a432b --- /dev/null +++ b/templates/media/media--audio.html.twig @@ -0,0 +1,8 @@ +{% set attributes = attributes.setAttribute('aria-label', name) %} + +{% include "@components/media/media--audio.twig" with { + audio: content.field_media_audio_file|field_value, + thumbnail: content.field_media_image|field_value, + modifier_classes: attributes.class|join(' ')|trim, + drupal_attributes: attributes|without('class'), +}%} diff --git a/templates/media/media--image--gallery.html.twig b/templates/media/media--image--gallery.html.twig new file mode 100644 index 0000000..1be1d9b --- /dev/null +++ b/templates/media/media--image--gallery.html.twig @@ -0,0 +1 @@ +{{ content.field_media_image|field_value }} \ No newline at end of file diff --git a/templates/media/media--image.html.twig b/templates/media/media--image.html.twig new file mode 100644 index 0000000..8e4556e --- /dev/null +++ b/templates/media/media--image.html.twig @@ -0,0 +1,7 @@ +{% set attributes = attributes.setAttribute('aria-label', name) %} + +{% include "@components/media/media--image.twig" with { + image: content.field_media_image|field_value, + modifier_classes: attributes.class|join(' ')|trim, + drupal_attributes: attributes|without('class'), +}%} diff --git a/templates/media/responsive-image.html.twig b/templates/media/responsive-image.html.twig new file mode 100644 index 0000000..49395f8 --- /dev/null +++ b/templates/media/responsive-image.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Default theme implementation of a responsive image. + * + * Available variables: + * - sources: The attributes of the tags for this tag. + * - img_element: The controlling image, with the fallback image in srcset. + * - output_image_tag: Whether or not to output an tag instead of a + * tag. + * + * @see template_preprocess() + * @see template_preprocess_responsive_image() + * + * @ingroup themeable + */ +#} +{% include "@elements/images/image/responsive-image.twig" %} diff --git a/templates/navigation/breadcrumb.html.twig b/templates/navigation/breadcrumb.html.twig new file mode 100644 index 0000000..024aefa --- /dev/null +++ b/templates/navigation/breadcrumb.html.twig @@ -0,0 +1,11 @@ +{# +/** + * @file + * Theme override for a breadcrumb trail. + * + * Available variables: + * - breadcrumb: Breadcrumb trail items. + */ +#} + +{% include "@components/breadcrumbs/breadcrumbs.twig" %} diff --git a/templates/navigation/menu--footer.html.twig b/templates/navigation/menu--footer.html.twig new file mode 100644 index 0000000..17a1e14 --- /dev/null +++ b/templates/navigation/menu--footer.html.twig @@ -0,0 +1,4 @@ +{% include "@components/menus/menu.twig" with { + menu_name: 'legal', + items: items, +}%} \ No newline at end of file diff --git a/templates/navigation/menu--main.html.twig b/templates/navigation/menu--main.html.twig new file mode 100644 index 0000000..c0bc52a --- /dev/null +++ b/templates/navigation/menu--main.html.twig @@ -0,0 +1,26 @@ +{# +/** + * @file + * Theme override to display a menu. + * + * Available variables: + * - menu_name: The machine name of the menu. + * - items: A nested list of menu items. Each menu item contains: + * - attributes: HTML attributes for the menu item. + * - below: The menu item child items. + * - title: The menu link title. + * - url: The menu link url, instance of \Drupal\Core\Url + * - localized_options: Menu link localized options. + * - is_expanded: TRUE if the link has visible children within the current + * menu tree. + * - is_collapsed: TRUE if the link has children within the current menu tree + * that are not currently visible. + * - in_active_trail: TRUE if the link is in the active trail. + */ +#} + +{{ attach_library('cdesai_emulsify/main_menu') }} + +{% include "@components/menus/main-menu/main-menu.twig" with { + menu_items: items, +}%} \ No newline at end of file diff --git a/templates/navigation/menu-local-action.html.twig b/templates/navigation/menu-local-action.html.twig new file mode 100644 index 0000000..83c167c --- /dev/null +++ b/templates/navigation/menu-local-action.html.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Theme override for a single local action link. + * + * Available variables: + * - attributes: HTML attributes for the wrapper element. + * - link: A rendered link element. + * + * @see template_preprocess_menu_local_action() + */ +#} +{% include "@elements/lists/_list-item.twig" with { + list_item_content: link +} %} diff --git a/templates/navigation/menu.html.twig b/templates/navigation/menu.html.twig new file mode 100644 index 0000000..0b885d8 --- /dev/null +++ b/templates/navigation/menu.html.twig @@ -0,0 +1,21 @@ +{# +/** + * @file + * Theme override to display a menu. + * + * Available variables: + * - menu_name: The machine name of the menu. + * - items: A nested list of menu items. Each menu item contains: + * - attributes: HTML attributes for the menu item. + * - below: The menu item child items. + * - title: The menu link title. + * - url: The menu link url, instance of \Drupal\Core\Url + * - localized_options: Menu link localized options. + * - is_expanded: TRUE if the link has visible children within the current + * menu tree. + * - is_collapsed: TRUE if the link has children within the current menu tree + * that are not currently visible. + * - in_active_trail: TRUE if the link is in the active trail. + */ +#} +{% include "@components/menus/menu.twig" %} diff --git a/templates/navigation/pager.html.twig b/templates/navigation/pager.html.twig new file mode 100644 index 0000000..e09ae22 --- /dev/null +++ b/templates/navigation/pager.html.twig @@ -0,0 +1,32 @@ +{# +/** + * @file + * Theme override to display a pager. + * + * Available variables: + * - items: List of pager items. + * The list is keyed by the following elements: + * - first: Item for the first page; not present on the first page of results. + * - previous: Item for the previous page; not present on the first page + * of results. + * - next: Item for the next page; not present on the last page of results. + * - last: Item for the last page; not present on the last page of results. + * - pages: List of pages, keyed by page number. + * Sub-sub elements: + * items.first, items.previous, items.next, items.last, and each item inside + * items.pages contain the following elements: + * - href: URL with appropriate query parameters for the item. + * - attributes: A keyed list of HTML attributes for the item. + * - text: The visible text used for the item link, such as "‹ Previous" + * or "Next ›". + * - current: The page number of the current page. + * - ellipses: If there are more pages than the quantity allows, then an + * ellipsis before or after the listed pages may be present. + * - previous: Present if the currently visible list of pages does not start + * at the first page. + * - next: Present if the visible list of pages ends before the last page. + * + * @see template_preprocess_pager() + */ +#} +{% include "@components/pager/pager.twig" %} diff --git a/templates/paragraphs/paragraph--accordion.html.twig b/templates/paragraphs/paragraph--accordion.html.twig new file mode 100644 index 0000000..6db5ed2 --- /dev/null +++ b/templates/paragraphs/paragraph--accordion.html.twig @@ -0,0 +1,12 @@ +{{ attach_library('cdesai_emulsify/accordion') }} + +{% set hidden = content.field_hide.0['#markup'] == 'Yes' ? true : false %} + +{% if not hidden %} + {% include "@components/accordion/accordion-group.twig" with { + modifier_classes: content.field_tabs|field_value|length > 5 ? 'accordion-group--small' : false, + accordion_group_items: content.field_tabs|field_value, + accordion_group_title: content.field_title|field_value, + accordion_group_intro: content.field_description|field_value, + }%} +{% endif %} diff --git a/templates/paragraphs/paragraph--aside.html.twig b/templates/paragraphs/paragraph--aside.html.twig new file mode 100644 index 0000000..46658b9 --- /dev/null +++ b/templates/paragraphs/paragraph--aside.html.twig @@ -0,0 +1,11 @@ +{{ attach_library('cdesai_emulsify/aside') }} + +{% set alignment_class %} + aside--{{ content.field_alignment.0['#markup']|lower }} +{% endset %} + +{% include "@components/aside/aside.twig" with { + modifier_classes: alignment_class, + aside_title: content.field_title|field_value, + aside_content: content.field_body|field_value +}%} \ No newline at end of file diff --git a/templates/paragraphs/paragraph--horizontal-tabs.html.twig b/templates/paragraphs/paragraph--horizontal-tabs.html.twig new file mode 100644 index 0000000..84c38f3 --- /dev/null +++ b/templates/paragraphs/paragraph--horizontal-tabs.html.twig @@ -0,0 +1,26 @@ +{% set classes = [ + 'l-paragraph', +] %} + + +
+ {% embed '@components/horizontal-tabs/horizontal-tabs.twig' with { + modifier_classes: content.tab_titles|length <= 3 ? 'horizontal-tabs--large' : false, + alignment_class: content.tab_titles|length <= 2 ? 'justify-evenly' : false, + horizontal_tabs_label: content.field_label|field_value, + horizontal_tabs_title: content.field_title|field_value, + horizontal_tabs_subtitle: content.field_description|field_value + }%} + + {% block tablist %} + {{ content.tab_titles }} + {% endblock %} + + {% block tab_panels %} + {{ content.field_tabs|field_value }} + {% endblock %} + + {% endembed %} +
+ + \ No newline at end of file diff --git a/templates/paragraphs/paragraph--media--media-gallery.html.twig b/templates/paragraphs/paragraph--media--media-gallery.html.twig new file mode 100644 index 0000000..ab8a276 --- /dev/null +++ b/templates/paragraphs/paragraph--media--media-gallery.html.twig @@ -0,0 +1,7 @@ +{{ attach_library('cdesai_emulsify/gallery') }} + +{% include "@components/gallery/gallery.twig" with { + gallery_title: content.field_title|field_value, + gallery_subtitle: content.field_description|field_value, + gallery_items: content.field_slides|field_value +}%} \ No newline at end of file diff --git a/templates/paragraphs/paragraph.html.twig b/templates/paragraphs/paragraph.html.twig new file mode 100644 index 0000000..b18bfa8 --- /dev/null +++ b/templates/paragraphs/paragraph.html.twig @@ -0,0 +1,48 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * - id: The paragraph ID. + * - bundle: The type of the paragraph, for example, "image" or "text". + * - authorid: The user ID of the paragraph author. + * - createdtime: Formatted creation date. Preprocess functions can + * reformat it by calling format_date() with the desired parameters on + * $variables['paragraph']->getCreatedTime(). + * - content: All paragraph items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_paragraph() + * + * @ingroup themeable + */ +#} + +{% + set classes = [ + paragraph.bundle|clean_class + ] +%} + + + {{ content }} +