From 93f29a6271acfe808ee5b42b37a12c6280270095 Mon Sep 17 00:00:00 2001 From: Petr Illek Date: Sun, 7 Jul 2024 15:09:38 +0200 Subject: [PATCH 1/6] Fix colour contrast for yellow backgorunds. --- templates/_base/variables.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/templates/_base/variables.css b/templates/_base/variables.css index d03482e..05d71d9 100644 --- a/templates/_base/variables.css +++ b/templates/_base/variables.css @@ -193,8 +193,11 @@ /* Webform */ --csgov-feedback-background: var(--csgov-color-primary-2); -} + /* Gov.cz colors A11Y fix */ + --gov-wizard-warning-indicator-color: var(--csgov-color-grey-8); + --gov-button-warning-base-color: var(--csgov-color-grey-8); +} @media (min-width: 48em) { :root { From 4e55cb5285f9fbf8f8f5ef50cbab561681814479 Mon Sep 17 00:00:00 2001 From: Petr Illek Date: Sun, 7 Jul 2024 15:11:35 +0200 Subject: [PATCH 2/6] Better accessibility name for navigation blocks. --- config/install/block.block.csgov_theme_breadcrumbs.yml | 2 +- config/install/block.block.csgov_theme_main_menu.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/install/block.block.csgov_theme_breadcrumbs.yml b/config/install/block.block.csgov_theme_breadcrumbs.yml index 6861d86..f3296d6 100644 --- a/config/install/block.block.csgov_theme_breadcrumbs.yml +++ b/config/install/block.block.csgov_theme_breadcrumbs.yml @@ -13,7 +13,7 @@ provider: null plugin: system_breadcrumb_block settings: id: system_breadcrumb_block - label: 'Drobečková navigace' + label: 'Drobečkové menu' label_display: '0' provider: system visibility: { } diff --git a/config/install/block.block.csgov_theme_main_menu.yml b/config/install/block.block.csgov_theme_main_menu.yml index c47007a..92f60df 100644 --- a/config/install/block.block.csgov_theme_main_menu.yml +++ b/config/install/block.block.csgov_theme_main_menu.yml @@ -15,7 +15,7 @@ provider: null plugin: 'system_menu_block:main' settings: id: 'system_menu_block:main' - label: 'Hlavní navigace' + label: 'Hlavní menu' label_display: '0' provider: system level: 1 From 83cb64186bc06b7b08480ec0310d15eb923afcc3 Mon Sep 17 00:00:00 2001 From: Petr Illek Date: Sun, 7 Jul 2024 18:53:33 +0200 Subject: [PATCH 3/6] Add theme for Step by Step components. --- .../step-by-step-overview.component.yml | 15 ++ .../step-by-step-overview.twig | 8 + .../step-by-step/step-by-step.component.yml | 39 +++++ .../step-by-step/step-by-step.css | 68 ++++++++ .../step-by-step/step-by-step/step-by-step.js | 27 ++++ .../step-by-step/step-by-step.twig | 65 ++++++++ csgov_theme.libraries.yml | 21 ++- .../node--csgov-step-by-step--full.html.twig | 153 ++++++++++++++++++ ...sgov-step-by-step-overview--full.html.twig | 29 ++++ .../content-types/step-by-step/readme.md | 3 + .../step-by-step/step-by-step.css | 43 +++++ ...ragraph--csgov-step-by-step-item.html.twig | 25 +++ .../paragraph--csgov-step-by-step.html.twig | 33 ++++ .../node--csgov-step-by-step.html.twig | 29 ++++ ...w--csgov-step-by-step--page-list.html.twig | 18 +++ .../view-modes/teaser/node--teaser.html.twig | 2 + ...w--csgov-step-by-step--page-list.html.twig | 99 ++++++++++++ ...d--csgov-step-by-step--page-list.html.twig | 20 +++ 18 files changed, 692 insertions(+), 5 deletions(-) create mode 100644 components/step-by-step/step-by-step-overview/step-by-step-overview.component.yml create mode 100644 components/step-by-step/step-by-step-overview/step-by-step-overview.twig create mode 100644 components/step-by-step/step-by-step/step-by-step.component.yml create mode 100644 components/step-by-step/step-by-step/step-by-step.css create mode 100644 components/step-by-step/step-by-step/step-by-step.js create mode 100644 components/step-by-step/step-by-step/step-by-step.twig create mode 100644 templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig create mode 100644 templates/content-types/step-by-step/node--csgov-step-by-step-overview--full.html.twig create mode 100644 templates/content-types/step-by-step/readme.md create mode 100644 templates/content-types/step-by-step/step-by-step.css create mode 100644 templates/paragraphs/step-by-step/paragraph--csgov-step-by-step-item.html.twig create mode 100644 templates/paragraphs/step-by-step/paragraph--csgov-step-by-step.html.twig create mode 100644 templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig create mode 100644 templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig create mode 100644 templates/views/step-by-step/views-view--csgov-step-by-step--page-list.html.twig create mode 100644 templates/views/step-by-step/views-view-unformatted--csgov-step-by-step--page-list.html.twig diff --git a/components/step-by-step/step-by-step-overview/step-by-step-overview.component.yml b/components/step-by-step/step-by-step-overview/step-by-step-overview.component.yml new file mode 100644 index 0000000..de6cf99 --- /dev/null +++ b/components/step-by-step/step-by-step-overview/step-by-step-overview.component.yml @@ -0,0 +1,15 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json +name: Step by step +props: + type: object + required: + - step_by_step_items + properties: + step_by_step_size: + type: boolean + title: Size + description: Size of the items. + step_by_step_items: + type: array + title: Step by step Items + description: The items for the step by step. diff --git a/components/step-by-step/step-by-step-overview/step-by-step-overview.twig b/components/step-by-step/step-by-step-overview/step-by-step-overview.twig new file mode 100644 index 0000000..0eac626 --- /dev/null +++ b/components/step-by-step/step-by-step-overview/step-by-step-overview.twig @@ -0,0 +1,8 @@ +{# Stepper + ## Variables ## + # step_by_step_size – Number of columns. + # step_by_step_items– List of tiles. +#} +
+ {{ step_by_step_items }} +
diff --git a/components/step-by-step/step-by-step/step-by-step.component.yml b/components/step-by-step/step-by-step/step-by-step.component.yml new file mode 100644 index 0000000..3936ee6 --- /dev/null +++ b/components/step-by-step/step-by-step/step-by-step.component.yml @@ -0,0 +1,39 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json +name: Stepper Item +props: + type: object + required: + - stepper_item_label + properties: + stepper_item_id: + type: string + title: Item ID + description: ID of the item. + stepper_item_label: + type: string + title: Title + description: Title of the item. + stepper_item_variant: + type: string + title: Variant + description: The colour of the item? + stepper_item_size: + type: string + title: Size + description: The size of the item. + stepper_item_icon: + type: string + title: Icon + description: Icon for the item. + stepper_item_prefix: + type: string + title: Prefix + description: Prefix for the item. + stepper_item_annotation: + type: string + title: Annotation + description: Annotation for the item. + stepper_item_content: + type: string + title: Content + description: Content for the item. diff --git a/components/step-by-step/step-by-step/step-by-step.css b/components/step-by-step/step-by-step/step-by-step.css new file mode 100644 index 0000000..91b4f56 --- /dev/null +++ b/components/step-by-step/step-by-step/step-by-step.css @@ -0,0 +1,68 @@ +.gov-stepper-item__title { + width: 100%; + max-width: var(--csgov-content-width); +} + +.gov-stepper-item__label { + font-size: var(--csgov-fs-xl); +} + +.gov-stepper-item__name { + width: 100%; +} + +.step-by-step__trigger { + background-color: transparent; + text-align: center; + text-decoration: none; + cursor: pointer; + appearance: none; + border: 0; + width: fit-content; + padding: 0; + margin-block: var(--csgov-spacing-s); +} + +.step-by-step__trigger:focus { + outline: none; +} + +.step-by-step__trigger:focus { + outline: none; +} + +.step-by-step__trigger:focus-visible { + border-radius: var(--gov-border-radius, 0.1875rem); + outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base); + outline-offset: 0; +} + +.step-by-step__trigger:focus-visible::before { + display: none; +} + +.step-by-step__trigger[aria-expanded=true i] .step-by-step__trigger__icon .gov-icon:not([slot=toggle-icon]) { + transform: scale(-1); +} + +.step-by-step__trigger__icon { + display: inline-flex; + vertical-align: middle; + flex: 0 0 auto; + margin-left: var(--csgov-spacing-xs); + width: 0.75rem; + height: 0.75rem; +} + +/* Gov_cz override for stepper */ +.gov-stepper-item .gov-stepper-item__prefix { + box-shadow: none !important; +} + +.gov-stepper-item__content { + max-width: var(--csgov-content-width); +} + +.step-by-step__content { + margin-bottom: var(--csgov-spacing-m); +} diff --git a/components/step-by-step/step-by-step/step-by-step.js b/components/step-by-step/step-by-step/step-by-step.js new file mode 100644 index 0000000..42140c0 --- /dev/null +++ b/components/step-by-step/step-by-step/step-by-step.js @@ -0,0 +1,27 @@ +(function (Drupal, once) { + Drupal.behaviors.govczStepperItem = { + attach: function (context, settings) { + const stepperItems = once('js-step-by-step', '.gov-stepper-item.step-by-step--has-content', context); + if (!stepperItems.length > 0) { + return; + } + stepperItems.forEach(item => { + const button = item.querySelector('.step-by-step__trigger'); + const content = item.querySelector('.gov-stepper-item__content'); + var settings = { + enableDocumentClick: false, + applyHiddenAttribute: true, + }; + const toggleSection = new ToggleSection(button, content, settings); + + // Check if the stepper item should be expanded by default + if (item.getAttribute('is-expanded') === 'true') { + toggleSection.expand(); + } else { + toggleSection.collapse(); + } + }); + + } + }; +})(Drupal, once); diff --git a/components/step-by-step/step-by-step/step-by-step.twig b/components/step-by-step/step-by-step/step-by-step.twig new file mode 100644 index 0000000..54311d6 --- /dev/null +++ b/components/step-by-step/step-by-step/step-by-step.twig @@ -0,0 +1,65 @@ +{# Stepper item + ## Variables ## + # step_by_step_item_id – The link for the tile. + # step_by_step_item_variant – Icon for the item. + # step_by_step_item_size – Title of the tile. + # step_by_step_item_icon – Title of the tile. + # step_by_step_item_prefix – Title of the tile. + # step_by_step_item_label – Title of the tile. + # step_by_step_item_annotation – Title of the tile. + # step_by_step_item_content – Title of the tile. +#} +
+
+
+ + {% if step_by_step_item_icon and not step_by_step_item_noprefix %} + + {% elseif not step_by_step_item_noprefix %} + {{ step_by_step_item_prefix }} + {% else %} +   + {% endif %} + + +

+ {{ title_prefix }} + {% if step_by_step_item_url %} + + {% if step_by_step_item_current %} + + {% endif %} + {{ step_by_step_item_label }} + + {% else %} + {{ step_by_step_item_label }} + {% endif %} + {{ title_suffix }} +

+ {% if step_by_step_item_annotation %} + {{ step_by_step_item_annotation }} + {% endif %} + {# If there is some content we add a button for accordion like behaviour. #} + {% if step_by_step_item_content %} + + {% endif %} + +
+
+
+ {{ step_by_step_item_content }} +
+
diff --git a/csgov_theme.libraries.yml b/csgov_theme.libraries.yml index b50c56e..934e3f7 100644 --- a/csgov_theme.libraries.yml +++ b/csgov_theme.libraries.yml @@ -124,11 +124,6 @@ node: theme: templates/content-types/node.css: {} -notification: - css: - theme: - templates/content-types/notification/notification.css: {} - board: css: theme: @@ -144,6 +139,22 @@ event: theme: templates/content-types/event/event.css: {} +notification: + css: + theme: + templates/content-types/notification/notification.css: {} + +step-by-step: + css: + component: + templates/content-types/step-by-step/step-by-step.css: {} + dependencies: + - core/drupal + - core/once + - gov_cz/toggle-section + - gov_cz/gov-icon + - gov_cz/gov-stepper + # View modes card: css: diff --git a/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig b/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig new file mode 100644 index 0000000..f935cd0 --- /dev/null +++ b/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig @@ -0,0 +1,153 @@ +{# +/** + * @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: (optional) 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: (optional) Themed creation date field. + * - author_name: (optional) 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() + * + */ +#} +{% + set classes = [ + extra_classes ? extra_classes|join(', '), + 'csgov-step-by-step', + 'node', + node.isPromoted() ? 'node--promoted', + node.isSticky() ? 'node--sticky', + not node.isPublished() ? 'node--unpublished', + view_mode ? 'node--view-mode-' ~ view_mode|clean_class, + ] +%} +{{ attach_library('csgov_theme/node') }} +{{ attach_library('csgov_theme/step-by-step') }} + + {{ title_prefix }} + {{ title_suffix }} + +
+
+
+
+ {% block teaser %} + {% if node.field_csgov_sbs_parent.value %} +
+
+
+

+ + {{ 'Součást'|t }} + + {{ content.field_csgov_sbs_parent }} +

+
+
+
+ {% endif %} + {% if node.field_csgov_teaser.value %} +
+
+
+ {{ content.field_csgov_teaser }} +
+
+
+ {% endif %} + {% endblock teaser %} + + {% block content %} + {% if node.field_csgov_content_components.value %} +
+ {{ content.field_csgov_content_components }} +
+ {% endif %} + {% endblock %} +
+
+ {{ drupal_view('step_by_step', 'page_list') }} +
+
+
+
+ + {% block bellow_content %} + {% if node.field_csgov_links.value %} +
+
+ {% if node.field_csgov_links_title.value %} +

{{ content.field_csgov_links_title }}

+ {% endif %} + {{ content.field_csgov_links }} +
+
+ {% endif %} + + {% if node.field_csgov_ref_person.value %} +
+
+

{{ 'Responsible person'|t({}, {'context' : 'CSGOV: Node strings'}) }}

+ {{ content.field_csgov_ref_person }} +
+
+ {% endif %} + {% endblock %} + diff --git a/templates/content-types/step-by-step/node--csgov-step-by-step-overview--full.html.twig b/templates/content-types/step-by-step/node--csgov-step-by-step-overview--full.html.twig new file mode 100644 index 0000000..e13e5e8 --- /dev/null +++ b/templates/content-types/step-by-step/node--csgov-step-by-step-overview--full.html.twig @@ -0,0 +1,29 @@ +{{ attach_library('csgov_theme/node') }} +{{ attach_library('csgov_theme/step-by-step') }} + +{% + set extra_classes = [ + 'csgov-step-by-step-overview' + ] +%} +{{ attach_library('csgov_theme/news') }} +{% embed "@csgov_theme/content-types/node--full.html.twig" %} + {% block teaser %} + {{ parent() }} + + {% endblock teaser %} + + + {% block bellow_content %} +
+ {{ include('csgov_theme:step-by-step-overview', { + step_by_step_items: content.field_csgov_sbs_items + }) + }} +
+ + + {{ parent() }} + {% endblock %} + +{% endembed %} diff --git a/templates/content-types/step-by-step/readme.md b/templates/content-types/step-by-step/readme.md new file mode 100644 index 0000000..64501da --- /dev/null +++ b/templates/content-types/step-by-step/readme.md @@ -0,0 +1,3 @@ +# Krok za krokem + +Obsah i zjednodušená komponenta je inspirována systémem pro návody Step by Step z gov.uk. Pro potřeby CSGOV je upravena. Design pak používá kombinaci komponent z českého design systému – Stepper, Wizard a Accordion. diff --git a/templates/content-types/step-by-step/step-by-step.css b/templates/content-types/step-by-step/step-by-step.css new file mode 100644 index 0000000..12b6bd2 --- /dev/null +++ b/templates/content-types/step-by-step/step-by-step.css @@ -0,0 +1,43 @@ +.csgov-step-by-step__container { + padding-left: 0; +} + +.csgov-step-by-step__navigation { + /* margin-top: var(--csgov-spacing-xl); */ + padding-inline: var(--csgov-site-padding); +} + +.csgov-step-by-step__navigation .gov-stepper-item .gov-stepper-item__label .gov-stepper-item__label__link { + font-size: var(--csgov-fs-m); + color: var(--csgov-color-secondary); +} + +.csgov-step-by-step__navigation .gov-stepper-item.step-by-step--current .gov-stepper-item__prefix { + border: 2px solid var(--csgov-color-secondary); +} + +.csgov-step-by-step__navigation .gov-stepper-item.step-by-step--current .gov-stepper-item__label .gov-stepper-item__label__link, +.csgov-step-by-step__navigation .gov-stepper-item.step-by-step--current ~ * .gov-stepper-item__label .gov-stepper-item__label__link { + font-size: var(--csgov-fs-xl); + color: inherit; +} + +.csgov-step-by-step__parent { + border-left: 5px solid var(--csgov-color-primary); + background: var(--csgov-color-primary-2); + border-radius: var(--border-radius); + padding: var(--csgov-spacing-s) var(--csgov-spacing); +} + +.csgov-step-by-step__parent-label { + font-size: var(--csgov-fs-l); + font-weight: var(--csgov-fw-bold); +} + +.csgov-step-by-step__parent-label__pretitle { + display: block; +} + +.csgov-step-by-step__parent-label a { + font-weight: var(--csgov-fw-normal); +} diff --git a/templates/paragraphs/step-by-step/paragraph--csgov-step-by-step-item.html.twig b/templates/paragraphs/step-by-step/paragraph--csgov-step-by-step-item.html.twig new file mode 100644 index 0000000..adab229 --- /dev/null +++ b/templates/paragraphs/step-by-step/paragraph--csgov-step-by-step-item.html.twig @@ -0,0 +1,25 @@ +{# If there is no icon we need to insert the current item number. #} +{% set parent_items = paragraph._referringItem.parent.parent.entity.field_csgov_p_sbs_items %} +{% set current_item = paragraph.id() %} + +{% set step_index = 0 %} +{% for key, item in parent_items %} + {% if item.target_id == current_item %} + {% set step_index = key + 1 %} + {% endif %} +{% endfor %} + +{{ include('csgov_theme:step-by-step', { + step_by_step_item_size: paragraph._referringItem.parent.parent.entity.field_csgov_p_size.value, + step_by_step_item_noprefix: paragraph._referringItem.parent.parent.entity.field_csgov_p_sbs_noprefix.value, + step_by_step_item_variant: paragraph.field_csgov_p_sbs_variant.value, + step_by_step_item_label_id: 'label-' ~ paragraph.id(), + step_by_step_item_content_id: 'content-' ~ paragraph.id(), + step_by_step_item_label: content.field_csgov_p_title, + step_by_step_item_content: content.field_csgov_p_content.0, + step_by_step_item_icon: paragraph.field_csgov_p_icon|file_url, + step_by_step_item_prefix: step_index, + step_by_step_item_annotation: content.field_csgov_p_annotation.0, + step_by_step_item_expanded: paragraph.field_csgov_p_expanded.value, + }) +}} diff --git a/templates/paragraphs/step-by-step/paragraph--csgov-step-by-step.html.twig b/templates/paragraphs/step-by-step/paragraph--csgov-step-by-step.html.twig new file mode 100644 index 0000000..f46570a --- /dev/null +++ b/templates/paragraphs/step-by-step/paragraph--csgov-step-by-step.html.twig @@ -0,0 +1,33 @@ +{{ attach_library('csgov_theme/paragraphs') }} +{{ attach_library('csgov_theme/step-by-step') }} + +{% + set classes = [ + 'step-by-step', + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished' + ] +%} + + +
+ {% if paragraph.field_csgov_p_title.value %} +
+

{{ content.field_csgov_p_title }}

+
+ {% endif %} + + {% if paragraph.field_csgov_p_content.value %} +
+ {{ content.field_csgov_p_content }} +
+ {% endif %} + + {{ include('csgov_theme:step-by-step-overview', { + step_by_step_items: content.field_csgov_p_sbs_items + }) +}} +
+ diff --git a/templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig b/templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig new file mode 100644 index 0000000..bbf71d4 --- /dev/null +++ b/templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig @@ -0,0 +1,29 @@ +{# If there is no icon we need to insert the current item number. #} +{% set parent_items = node._referringItem.parent.parent.entity.field_csgov_sbs_items %} +{% set current_item = node.id() %} + +{% set step_index = 0 %} +{% for key, item in parent_items %} + {% if item.target_id == current_item %} + {% set step_index = key + 1 %} + {% endif %} +{% endfor %} + +{% if path('') == url %} + {% set step_by_step_item_current = true %} +{% endif %} + +{{ include('csgov_theme:step-by-step', { + step_by_step_item_noprefix: node._referringItem.parent.parent.entity.field_csgov_sbs_noprefix.value, + step_by_step_item_label_id: 'label-' ~ node.id(), + step_by_step_item_content_id: 'content-' ~ node.id(), + step_by_step_item_variant: node.field_csgov_sbs_variant.value, + step_by_step_item_label: node.field_csgov_sbs_step_label.value ? content.field_csgov_sbs_step_label : label, + step_by_step_item_url: url, + step_by_step_item_current: step_by_step_current, + step_by_step_item_content: content.field_csgov_teaser.0, + step_by_step_item_icon: node.field_csgov_icon|file_url, + step_by_step_item_prefix: step_index, + step_by_step_item_annotation: content.field_csgov_sbs_annotation, + }) +}} diff --git a/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig b/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig new file mode 100644 index 0000000..2cb9782 --- /dev/null +++ b/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig @@ -0,0 +1,18 @@ +{# If there is no icon we need to insert the current item number. #} +{% if path('') == url %} + {% set step_by_step_item_current = true %} +{% endif %} + +{{ include('csgov_theme:step-by-step', { + step_by_step_item_size: 'xs', + step_by_step_item_noprefix: true, + step_by_step_item_label_id: 'label-' ~ node.id(), + step_by_step_item_content_id: 'content-' ~ node.id(), + step_by_step_item_variant: node.field_csgov_sbs_variant.value, + step_by_step_item_label: node.field_csgov_sbs_step_label.value ? content.field_csgov_sbs_step_label : label, + step_by_step_item_url: url, + step_by_step_item_current: step_by_step_current, + step_by_step_item_content: content.field_csgov_teaser.0, + step_by_step_item_annotation: content.field_csgov_sbs_annotation, + }) +}} diff --git a/templates/view-modes/teaser/node--teaser.html.twig b/templates/view-modes/teaser/node--teaser.html.twig index 8b3eb99..f38ffa3 100644 --- a/templates/view-modes/teaser/node--teaser.html.twig +++ b/templates/view-modes/teaser/node--teaser.html.twig @@ -1,5 +1,7 @@ {% if content.search_api_excerpt %} {% set teaser_content = content.search_api_excerpt %} +{% elseif content.field_csgov_sbs_annotation %} + {% set teaser_content = content.field_csgov_sbs_annotation %} {% else %} {% set teaser_content = content.field_csgov_teaser %} {% endif %} diff --git a/templates/views/step-by-step/views-view--csgov-step-by-step--page-list.html.twig b/templates/views/step-by-step/views-view--csgov-step-by-step--page-list.html.twig new file mode 100644 index 0000000..988e66b --- /dev/null +++ b/templates/views/step-by-step/views-view--csgov-step-by-step--page-list.html.twig @@ -0,0 +1,99 @@ +{# +/** + * @file + * Theme override for a main view template. + * + * Available variables: + * - attributes: Remaining HTML attributes for the element. + * - css_name: A CSS-safe version of the view name. + * - css_class: The user-specified classes names, if any. + * - header: The optional header. + * - footer: The optional footer. + * - rows: The results of the view query, if any. + * - empty: The content to display if there are no rows. + * - pager: The optional pager next/prev links to display. + * - exposed: Exposed widget form/info to display. + * - feed_icons: Optional feed icons to display. + * - more: An optional link to the next page of results. + * - title: Title of the view, only used when displaying in the admin preview. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the view title. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the view title. + * - attachment_before: An optional attachment view to be displayed before the + * view content. + * - attachment_after: An optional attachment view to be displayed after the + * view content. + * - dom_id: Unique id for every view being printed to give unique class for + * JavaScript. + * + * @see template_preprocess_views_view() + */ +#} +{% + set classes = [ + 'view', + 'view-' ~ id|clean_class, + 'view-id-' ~ id, + 'view-display-id-' ~ display_id, + dom_id ? 'js-view-dom-id-' ~ dom_id, + ] +%} + + {{ title_prefix }} + {% if title %} + {{ title }} + {% endif %} + {{ title_suffix }} + {% if header %} +
+ {{ header }} +
+ {% endif %} + {% if exposed %} +
+ {{ exposed }} +
+ {% endif %} + {% if attachment_before %} +
+ {{ attachment_before }} +
+ {% endif %} + + {% if rows %} +
+ {{ rows }} +
+ {% elseif empty %} +
+ {{ include('gov_cz:gov-empty', { + empty_title: empty.area_text_custom, + empty_content: empty.area_text_custom_1, + }) + }} +
+ {% endif %} + + {% if pager %} + {{ pager }} + {% endif %} + {% if attachment_after %} +
+ {{ attachment_after }} +
+ {% endif %} + {% if more %} + {{ more }} + {% endif %} + {% if footer %} +
+ {{ footer }} +
+ {% endif %} + {% if feed_icons %} +
+ {{ feed_icons }} +
+ {% endif %} + diff --git a/templates/views/step-by-step/views-view-unformatted--csgov-step-by-step--page-list.html.twig b/templates/views/step-by-step/views-view-unformatted--csgov-step-by-step--page-list.html.twig new file mode 100644 index 0000000..3a0b2fc --- /dev/null +++ b/templates/views/step-by-step/views-view-unformatted--csgov-step-by-step--page-list.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Theme override to display a view of unformatted rows. + * + * Available variables: + * - title: The title of this group of rows. May be empty. + * - rows: A list of the view's row items. + * - attributes: The row's HTML attributes. + * - content: The row's content. + * - view: The view object. + * - default_row_class: A flag indicating whether default classes should be + * used on rows. + * + * @see template_preprocess_views_view_unformatted() + */ +#} +{% for row in rows %} + {{- row.content -}} +{% endfor %} From 33003d78eb6614f9c3cecc483a1c52b471ebda28 Mon Sep 17 00:00:00 2001 From: Petr Illek Date: Sun, 7 Jul 2024 21:08:56 +0200 Subject: [PATCH 4/6] Fix typo in variable name. --- .../node--view--csgov-step-by-step--page-list.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig b/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig index 2cb9782..378ce19 100644 --- a/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig +++ b/templates/view-modes/step-by-step/node--view--csgov-step-by-step--page-list.html.twig @@ -11,7 +11,7 @@ step_by_step_item_variant: node.field_csgov_sbs_variant.value, step_by_step_item_label: node.field_csgov_sbs_step_label.value ? content.field_csgov_sbs_step_label : label, step_by_step_item_url: url, - step_by_step_item_current: step_by_step_current, + step_by_step_item_current: step_by_step_item_current, step_by_step_item_content: content.field_csgov_teaser.0, step_by_step_item_annotation: content.field_csgov_sbs_annotation, }) From e3089fdf73df345d9c37777b7869ed6589010e10 Mon Sep 17 00:00:00 2001 From: Petr Illek Date: Sun, 7 Jul 2024 21:09:20 +0200 Subject: [PATCH 5/6] Rename template so it works in more situations. --- ...g => node--csgov-step-by-step--csgov-step-by-step.html.twig} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename templates/view-modes/step-by-step/{node--csgov-step-by-step.html.twig => node--csgov-step-by-step--csgov-step-by-step.html.twig} (95%) diff --git a/templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig b/templates/view-modes/step-by-step/node--csgov-step-by-step--csgov-step-by-step.html.twig similarity index 95% rename from templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig rename to templates/view-modes/step-by-step/node--csgov-step-by-step--csgov-step-by-step.html.twig index bbf71d4..ec78609 100644 --- a/templates/view-modes/step-by-step/node--csgov-step-by-step.html.twig +++ b/templates/view-modes/step-by-step/node--csgov-step-by-step--csgov-step-by-step.html.twig @@ -20,7 +20,7 @@ step_by_step_item_variant: node.field_csgov_sbs_variant.value, step_by_step_item_label: node.field_csgov_sbs_step_label.value ? content.field_csgov_sbs_step_label : label, step_by_step_item_url: url, - step_by_step_item_current: step_by_step_current, + step_by_step_item_current: step_by_step_item_current, step_by_step_item_content: content.field_csgov_teaser.0, step_by_step_item_icon: node.field_csgov_icon|file_url, step_by_step_item_prefix: step_index, From ed27b8bdd3d14ed633b803a79de881f456fc57a9 Mon Sep 17 00:00:00 2001 From: Petr Illek Date: Sun, 7 Jul 2024 21:56:27 +0200 Subject: [PATCH 6/6] Fix correct name for including step-by-step view. --- .../step-by-step/node--csgov-step-by-step--full.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig b/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig index f935cd0..fb979b8 100644 --- a/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig +++ b/templates/content-types/step-by-step/node--csgov-step-by-step--full.html.twig @@ -123,7 +123,7 @@ {% endblock %}
- {{ drupal_view('step_by_step', 'page_list') }} + {{ drupal_view('csgov_step_by_step', 'page_list') }}