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

lmc-eu · Oct 10, 2023 · 843f54f · 843f54f
1 parent 3c0ddef
commit 843f54f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 11 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/BreadcrumbsCurrentNotLink.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 iconNameStart="chevron-left">{{ _goBackTitle }}</BreadcrumbsItem>
+                    <BreadcrumbsItem href="{{ item.url ?? null }}" isGoBackOnly iconNameStart="chevron-left">{{ _goBackTitle }}</BreadcrumbsItem>
                 {% endif %}
-                <BreadcrumbsItem isCurrent={ loop.last } href={{ item.url }}>{{ item.title }}</BreadcrumbsItem>
+                <BreadcrumbsItem 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 _isCurrent = props.isCurrent | default(false) -%}
 {%- set _isGoBackOnly = props.isGoBackOnly | default(false) -%}
 {%- set _iconNameStart = props.iconNameStart | default(null) -%}
@@ -24,14 +24,18 @@
     {% if _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 _href %}
+        <Link
+            href="{{ _href }}"
+            color="{{ _isCurrent ? 'secondary' : 'primary' }}"
+            isUnderlined="{{ _isCurrent is not same as(true) }}"
+            aria-current="{{ _isCurrent ? 'page' : 'false' }}"
+        >
+            {{ _children }}
+        </Link>
+    {% else %}
         {{ _children }}
-    </Link>
+    {% endif %}
     {% if _isCurrent is not same as(true) and _isGoBackOnly is not same as(true) %}
         <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
@@ -120,7 +120,7 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 | Name               | Type            | Default         | Required | Description                                           |
 | ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- |
 | `children`         | `string`        | —               | ✕        | Custom content to override items rendering from array |
-| `href`             | `string`        | —               | ✔        | URL                                                   |
+| `href`             | `string`        | —               | ✕        | URL, if not set, the item is rendered as a plain text |
 | `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page                  |
 | `isGoBackOnly`     | `boolean`       | `fasle`         | ✕        | Whether should be displayed in go back mode           |
 | `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon component on the end of the item wrapper         |

diff --git a/...ages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCurrentNotLink.twig b/...ages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCurrentNotLink.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 }} />