fixup! Feat(web-twig): Introduce BreadcrumbsItem component

lmc-eu · Oct 5, 2023 · f1a4424 · f1a4424
1 parent 4263c82
commit f1a4424
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 23 deletions.
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
@@ -22,10 +22,7 @@
         <ol>
             {% for item in _items %}
                 {% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %}
-                    {% set iconStart %}
-                        <Icon name="chevron-left" />
-                    {% endset %}
-                    <BreadcrumbsItem href={ item.url } isGoBackOnly UNSAFE_iconStart={{ iconStart }}>{{ _goBackTitle }}</BreadcrumbsItem>
+                    <BreadcrumbsItem href={ item.url } isGoBackOnly iconNameStart="chevron-left">{{ _goBackTitle }}</BreadcrumbsItem>
                 {% endif %}
                 <BreadcrumbsItem isCurrent={ loop.last } href={{ item.url }}>{{ item.title }}</BreadcrumbsItem>
             {% endfor %}

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig
@@ -4,8 +4,8 @@
 {%- 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) -%}
+{%- set _iconNameStart = props.iconNameStart | default(null) -%}
+{%- set _iconNameEnd = props.iconNameEnd | default("chevron-right") -%}
 
 {# Class names #}
 {%- set _displayNoneClassName = _spiritClassPrefix ~ 'd-none' -%}
@@ -21,8 +21,8 @@
 {% endif %}
 
 <li {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
-    {% if _unsafeIconStart %}
-        {{ _unsafeIconStart | raw }}
+    {% if _iconNameStart %}
+        <Icon name={{ _iconNameStart }} />
     {% endif %}
     <Link
         href="{{ _href }}"
@@ -33,10 +33,6 @@
         {{ _children }}
     </Link>
     {% if _isCurrent is not same as(true) and _isGoBackOnly is not same as(true) %}
-        {% if _unsafeIconEnd %}
-            {{ _unsafeIconEnd | raw }}
-        {% else %}
-            <Icon name="chevron-right" />
-        {% endif %}
+        <Icon name={{ _iconNameEnd }} />
     {% endif %}
 </li>
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
@@ -117,16 +117,16 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 
 ### 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 name="chevron-right" />` | ✕        | 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                                  |
+| 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           |
+| `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon component on the end of the item wrapper         |
+| `iconNameStart`    | `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,