Feat(web-twig): Make BreadcrumbsItem href optional #DS-957

lmc-eu · Oct 17, 2023 · 439577e · 439577e
1 parent 6cf75ad
commit 439577e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig
@@ -10,4 +10,8 @@
         {% include '@components/Breadcrumbs/stories/BreadcrumbsCustom.twig' %}
     </DocsSection>
 
+    <DocsSection title="Current page is not a link">
+        {% include '@components/Breadcrumbs/stories/BreadcrumbsCurrentWithoutLink.twig' %}
+    </DocsSection>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
@@ -22,9 +22,9 @@
         <ol>
             {% for item in _items %}
                 {% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %}
-                    <BreadcrumbsItem href={ item.url } isGoBackOnly>{{ _goBackTitle }}</BreadcrumbsItem>
+                    <BreadcrumbsItem href="{{ item.url ?? null }}" isGoBackOnly>{{ _goBackTitle }}</BreadcrumbsItem>
                 {% endif %}
-                <BreadcrumbsItem isCurrent={ loop.last } href={ item.url }>{{ item.title }}</BreadcrumbsItem>
+                <BreadcrumbsItem isCurrent={ loop.last } href={ item.url ?? null }>{{ item.title }}</BreadcrumbsItem>
             {% endfor %}
         </ol>
     {%- else -%}

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig
@@ -1,7 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _children = block('content') -%}
-{%- set _href = props.href -%}
+{%- set _href = props.href | default(null) -%}
 {%- set _iconNameEnd = props.iconNameEnd | default('chevron-right') -%}
 {%- set _iconNameStart = props.iconNameStart | default('chevron-left') -%}
 {%- set _isCurrent = props.isCurrent | default(false) -%}
@@ -24,14 +24,18 @@
     {% if _isGoBackOnly and _iconNameStart %}
         <Icon name={ _iconNameStart } />
     {% endif %}
-    <Link
-        href={ _href }
-        color="{{ _isCurrent ? 'secondary' : 'primary' }}"
-        isUnderlined="{{ _isCurrent is not same as(true) }}"
-        aria-current="{{ _isCurrent ? 'page' : 'false' }}"
-    >
+    {% if not _href and _isCurrent %}
         {{ _children }}
-    </Link>
+    {% else %}
+        <Link
+            href={ _href }
+            color="{{ _isCurrent ? 'secondary' : 'primary' }}"
+            isUnderlined="{{ _isCurrent is not same as(true) }}"
+            aria-current="{{ _isCurrent ? 'page' : 'false' }}"
+        >
+            {{ _children }}
+        </Link>
+    {% endif %}
     {% if _isCurrent is not same as(true) and _isGoBackOnly is not same as(true) and _iconNameEnd %}
         <Icon name={ _iconNameEnd } />
     {% endif %}

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
@@ -121,15 +121,17 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 
 ### API
 
-| Name               | Type            | Default         | Required | Description                                 |
-| ------------------ | --------------- | --------------- | -------- | ------------------------------------------- |
-| `href`             | `string`        | —               | ✔        | URL                                         |
-| `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon name at the end of the item            |
-| `iconNameStart`    | `string`        | `chevron-left`  | ✕        | Icon name at the start of the item          |
-| `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page        |
-| `isGoBackOnly`     | `boolean`       | `false`         | ✕        | Whether should be displayed in go back mode |
-| `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                   |
-| `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                        |
+| Name               | Type            | Default         | Required | Description                                           |
+| ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- |
+| `href`             | `string`        | —               | ✕ \*     | URL, if not set, the item is rendered as a plain text |
+| `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon name at the end of the item                      |
+| `iconNameStart`    | `string`        | `chevron-left`  | ✕        | Icon name at the start of the item                    |
+| `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page                  |
+| `isGoBackOnly`     | `boolean`       | `false`         | ✕        | Whether should be displayed in go back mode           |
+| `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                             |
+| `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                                  |
+
+(\*) Optional only for the current page.
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend the component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,

diff --git a/.../web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCurrentWithoutLink.twig b/.../web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCurrentWithoutLink.twig
@@ -0,0 +1,19 @@
+{% set items = [
+    {
+        title: 'Root',
+        url: '#rootUrl',
+    },
+    {
+        title: 'Category',
+        url: '#categoryUrl',
+    },
+    {
+        title: 'Subcategory',
+        url: '#subcategoryUrl',
+    },
+    {
+        title: 'Current page',
+    },
+] %}
+
+<Breadcrumbs goBackTitle="Back" items={{ items }} />