Merge pull request #23 from Drupalcz/step-by-step

Add Step by step

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.

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.
+#}
+<div size="{{ step_by_step_size|default('m') }}" class="gov-stepper" role="list">
+  {{ step_by_step_items }}
+</div>

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.

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);
+}

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);

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.
+#}
+<div class="gov-stepper-item {{ step_by_step_item_annotation ? 'gov-stepper-item--w-annot' }} {{ step_by_step_item_content ? 'step-by-step--has-content' }} {{ step_by_step_item_current ? 'step-by-step--current' }}" variant="{{ step_by_step_item_variant|default('primary') }}" size="{{ step_by_step_item_size|default('m') }}" {{ step_by_step_item_expanded ? 'is-expanded="true"'}}>
+  <div class="gov-stepper-item__header">
+    <div class="gov-stepper-item__title">
+      <span class="gov-stepper-item__prefix">
+        {% if step_by_step_item_icon and not step_by_step_item_noprefix %}
+          <div class="gov-icon" aria-hidden="true">
+            <span class="gov-icon__holder">
+              {{ source(step_by_step_item_icon, ignore_missing = true) }}
+            </span>
+          </div>
+        {% elseif not step_by_step_item_noprefix %}
+          {{ step_by_step_item_prefix }}
+        {% else %}
+          &nbsp;
+        {% endif %}
+      </span>
+      <span class="gov-stepper-item__name">
+        <h3 {{ attributes.addClass('gov-stepper-item__label') }}>
+          {{ title_prefix }}
+          {% if step_by_step_item_url %}
+            <a href="{{ step_by_step_item_url }}" class="gov-stepper-item__label__link">
+              {% if step_by_step_item_current %}
+                <span class="visually-hidden">{{ 'Momentálně prohlížíte:'|t }} </span>
+              {% endif %}
+              {{ step_by_step_item_label }}
+            </a>
+          {% else %}
+            {{ step_by_step_item_label }}
+          {% endif %}
+          {{ title_suffix }}
+        </h3>
+        {% if step_by_step_item_annotation %}
+          <span class="gov-stepper-item__annot">{{ step_by_step_item_annotation }}</span>
+        {% endif %}
+      {# If there is some content we add a button for accordion like behaviour. #}
+      {% if step_by_step_item_content %}
+        <button id="{{ step_by_step_item_label_id }}" class="step-by-step__trigger" aria-controls="{{ step_by_step_item_content_id }}" aria-label="{{ 'Zobrazit'|t }} {{ step_by_step_item_label }}">
+          {{ 'Zobrazit podrobnosti'|t }}
+          <span class="step-by-step__trigger__icon gov-icon">
+            <span class="gov-icon" aria-hidden="true">
+              <span class="gov-icon__holder">
+                {{ source('@gov_cz/assets/gov-design-system/gov-icons/basic/chevron-down.svg') }}
+              </span>
+            </span>
+          </span>
+        </button>
+      {% endif %}
+      </span>
+    </div>
+  </div>
+  <div class="gov-stepper-item__content" id="{{ step_by_step_item_content_id }}" aria-labelledby="{{ step_by_step_item_label_id }}" role="tabpanel">
+    {{ step_by_step_item_content }}
+  </div>
+</div>

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: {  }

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

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:

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 {