From 75aa6c7c9f0cda032aca3b84abc204616b74132f Mon Sep 17 00:00:00 2001 From: literat Date: Thu, 14 Sep 2023 22:28:16 +0200 Subject: [PATCH] Feat(web-twig): Introduce BreadcrumbsItem component * and refactor Breadcrumbs to use it refs #DS-835 --- .../components/Breadcrumbs/Breadcrumbs.twig | 23 ++-------- .../Breadcrumbs/BreadcrumbsItem.twig | 42 +++++++++++++++++++ .../components/Breadcrumbs/README.md | 33 +++++++++++++-- .../breadcrumbsDefault.twig.snap.html | 19 +++++---- .../stories/BreadcrumbsDefault.twig | 34 +++++++-------- .../twig-components/breadcrumbsItem.twig | 1 + 6 files changed, 104 insertions(+), 48 deletions(-) create mode 100644 packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig create mode 100644 packages/web-twig/src/Resources/twig-components/breadcrumbsItem.twig diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig index 897b37fe35..55488eceb8 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig @@ -6,9 +6,6 @@ {# Class names #} {%- set _rootClassName = _spiritClassPrefix ~ 'Breadcrumbs' -%} -{%- set _displayNoneClassName = _spiritClassPrefix ~ 'd-none' -%} -{%- set _displayTabletNoneClassName = _spiritClassPrefix ~ 'd-tablet-none' -%} -{%- set _displayTabletFlexClassName = _spiritClassPrefix ~ 'd-tablet-flex' -%} {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} @@ -25,24 +22,12 @@
    {% for item in _items %} {% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %} -
  1. + {% set iconStart %} - {{ _goBackTitle }} -
    2. + {% endset %} + {{ _goBackTitle }} {% endif %} -
  2. - {% if loop.index0 is not same as(0) %} - - {% endif %} - - {{ item.title }} - -
    3. + {{ item.title }} {% endfor %}
{%- else -%} diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig new file mode 100644 index 0000000000..fc38d24530 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig @@ -0,0 +1,42 @@ +{# API #} +{%- set props = props | default([]) -%} +{%- set _children = block('content') -%} +{%- set _href = props.href -%} +{%- set _isCurrent = props.isCurrent | default(false) -%} +{%- set _isGoBackOnly = props.isGoBackOnly | default(false) -%} +{%- set _unsafeIconStart = props.UNSAFE_iconStart | default(null) -%} +{%- set _unsafeIconEnd = props.UNSAFE_iconEnd | default(null) -%} + +{# Class names #} +{%- set _displayNoneClassName = _spiritClassPrefix ~ 'd-none' -%} +{%- set _displayTabletNoneClassName = _spiritClassPrefix ~ 'd-tablet-none' -%} +{%- set _displayTabletFlexClassName = _spiritClassPrefix ~ 'd-tablet-flex' -%} + +{# Miscellaneous #} +{%- set _styleProps = useStyleProps(props) -%} +{% if _isGoBackOnly is not same as(true) %} + {%- set _classNames = [ _styleProps.className, _displayNoneClassName, _displayTabletFlexClassName ] -%} +{% else %} + {%- set _classNames = [ _styleProps.className, _displayTabletNoneClassName ] -%} +{% endif %} + +
  • + {% if _unsafeIconStart %} + {{ _unsafeIconStart | raw }} + {% endif %} + + {{ _children }} + + {% if _isCurrent is not same as(true) and _isGoBackOnly is not same as(true) %} + {% if _unsafeIconEnd %} + {{ _unsafeIconEnd | raw }} + {% else %} + + {% endif %} + {% endif %} +
    • diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md index f34ae2282d..37730ae247 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md @@ -1,6 +1,6 @@ # Breadcrumbs -This is Twig implementation of the [Breadcrumbs] component. +This is the Twig implementation of the [Breadcrumbs] component. Basic example usage: @@ -88,12 +88,12 @@ Without lexer: {% endembed %} ``` -## API +## Breadcrumbs The Breadcrumbs component works with breadcrumb items passed from parent and renders the content by itself or its content can be overridden by any custom block content. -## Breadcrumbs +### API | Name | Type | Default | Required | Description | | ------------- | -------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -101,6 +101,33 @@ content can be overridden by any custom block content. | `goBackTitle` | `string` | — | ✕ | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. [**Optional DEPRECATED**][Deprecated] Will be **required** in the next major version. | | `items` | `array` | `[]` | ✕ | Navigation menu items | +## BreadcrumbsItem + +Use the `BreadcrumbsItem` component for the ordered list as the component's children instead of passing the breadcrumb items array via props: + +```twig + + {% for item in items %} + + {{ item.title }} + + {% endfor %} + +``` + +### API + +| Name | Type | Default | Required | Description | +| ------------------ | --------------- | ------------------------------- | -------- | ----------------------------------------------------- | +| `children` | `string` | — | ✕ | Custom content to override items rendering from array | +| `href` | `string` | — | ✔ | URL | +| `isCurrent` | `boolean` | `false` | ✕ | Whether is the item the current page | +| `isGoBackOnly` | `boolean` | `fasle` | ✕ | Whether should be displayed in go back mode | +| `UNSAFE_iconEnd` | `string` | `` | ✕ | Icon element on the end of the item wrapper | +| `UNSAFE_iconStart` | `string` | - | ✕ | Icon component on the start of the item | +| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name | +| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | + You can add `id`, `data-*` or `aria-*` attributes to further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available, see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html index bd3ba9fd60..21b374ab90 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html @@ -8,31 +8,32 @@ diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsDefault.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsDefault.twig index 8c0c8158f0..37047451fe 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsDefault.twig +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsDefault.twig @@ -1,20 +1,20 @@ {% set items = [ - { - title: 'Root', - url: '#rootUrl', - }, - { - title: 'Category', - url: '#categoryUrl', - }, - { - title: 'Subcategory', - url: '#subcategoryUrl', - }, - { - title: 'Current page', - url: '#currentUrl', - }, + { + title: 'Root', + url: '#rootUrl', + }, + { + title: 'Category', + url: '#categoryUrl', + }, + { + title: 'Subcategory', + url: '#subcategoryUrl', + }, + { + title: 'Current page', + url: '#currentUrl', + }, ] %} - + diff --git a/packages/web-twig/src/Resources/twig-components/breadcrumbsItem.twig b/packages/web-twig/src/Resources/twig-components/breadcrumbsItem.twig new file mode 100644 index 0000000000..8a1cd28970 --- /dev/null +++ b/packages/web-twig/src/Resources/twig-components/breadcrumbsItem.twig @@ -0,0 +1 @@ +{% extends '@spirit/Breadcrumbs/BreadcrumbsItem.twig' %}