Skip to content

Commit

Permalink
Feat(web-twig): Introduce BreadcrumbsItem component
Browse files Browse the repository at this point in the history
  * and refactor Breadcrumbs to use it

refs #DS-835
  • Loading branch information
literat committed Sep 22, 2023
1 parent bbd6fac commit 75aa6c7
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 48 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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) -%}
Expand All @@ -25,24 +22,12 @@
<ol>
{% for item in _items %}
{% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %}
<li class="{{ _displayTabletNoneClassName }}">
{% set iconStart %}
<Icon name="chevron-left" />
<Link href="{{ item.url }}" color="primary" isUnderlined>{{ _goBackTitle }}</Link>
</li>
{% endset %}
<BreadcrumbsItem href={ item.url } isGoBackOnly UNSAFE_iconStart={{ iconStart }}>{{ _goBackTitle }}</BreadcrumbsItem>
{% endif %}
<li {{ classProp([_displayNoneClassName, _displayTabletFlexClassName]) }}>
{% if loop.index0 is not same as(0) %}
<Icon name="chevron-right" />
{% endif %}
<Link
href="{{ item.url }}"
color="{{ loop.last ? 'secondary' : 'primary' }}"
isUnderlined="{{ loop.last is not same as(true) }}"
aria-current="{{ loop.last ? 'page' : 'false' }}"
>
{{ item.title }}
</Link>
</li>
<BreadcrumbsItem isCurrent={ loop.last } href={{ item.url }}>{{ item.title }}</BreadcrumbsItem>
{% endfor %}
</ol>
{%- else -%}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 %}

<li {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
{% if _unsafeIconStart %}
{{ _unsafeIconStart | raw }}
{% endif %}
<Link
href="{{ _href }}"
color="{{ _isCurrent ? 'secondary' : 'primary' }}"
isUnderlined="{{ _isCurrent is not same as(true) }}"
aria-current="{{ _isCurrent ? 'page' : 'false' }}"
>
{{ _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 %}
{% endif %}
</li>
33 changes: 30 additions & 3 deletions packages/web-twig/src/Resources/components/Breadcrumbs/README.md
Original file line number Diff line number Diff line change
@@ -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:

Expand Down Expand Up @@ -88,19 +88,46 @@ 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 |
| ------------- | -------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `elementType` | `string` | `nav` || HTML tag to render |
| `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
<Breadcrumbs>
{% for item in items %}
<BreadcrumbsItem isCurrent={{ items.length === index - 1 }} href={{ item.url }}>
{{ item.title }}
</BreadcrumbsItem>
{% endfor %}
</Breadcrumbs>
```

### 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 |

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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,32 @@
<nav class="Breadcrumbs" aria-label="Breadcrumb">
<ol>
<li class="d-none d-tablet-flex">
<a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a>
<a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="fa2b65b7e049d1eae33532715c70980f" aria-hidden="true">
<path d="M9.29006 7.05475C8.90006 7.44475 8.90006 8.07475 9.29006 8.46475L13.1701 12.3447L9.29006 16.2247C8.90006 16.6147 8.90006 17.2447 9.29006 17.6347C9.68006 18.0247 10.3101 18.0247 10.7001 17.6347L15.2901 13.0447C15.6801 12.6547 15.6801 12.0247 15.2901 11.6347L10.7001 7.04475C10.3201 6.66475 9.68006 6.66475 9.29006 7.05475Z" fill="currentColor">
</path></svg>
</li>

<li class="d-none d-tablet-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="fa2b65b7e049d1eae33532715c70980f" aria-hidden="true">
<path d="M9.29006 7.05475C8.90006 7.44475 8.90006 8.07475 9.29006 8.46475L13.1701 12.3447L9.29006 16.2247C8.90006 16.6147 8.90006 17.2447 9.29006 17.6347C9.68006 18.0247 10.3101 18.0247 10.7001 17.6347L15.2901 13.0447C15.6801 12.6547 15.6801 12.0247 15.2901 11.6347L10.7001 7.04475C10.3201 6.66475 9.68006 6.66475 9.29006 7.05475Z" fill="currentColor">
</path></svg> <a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
<a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a> <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
<use href="#fa2b65b7e049d1eae33532715c70980f">
</use></svg>
</li>

<li class="d-tablet-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="421fdea4d7e5f5b250c10b634f7b9366" aria-hidden="true">
<path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="currentColor">
</path></svg><a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
</path></svg> <a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
</li>

<li class="d-none d-tablet-flex">
<a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
<svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
<use href="#fa2b65b7e049d1eae33532715c70980f">
</use></svg> <a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
</use></svg>
</li>

<li class="d-none d-tablet-flex">
<svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
<use href="#fa2b65b7e049d1eae33532715c70980f">
</use></svg> <a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
<a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
</li>
</ol>
</nav>
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
},
] %}

<Breadcrumbs items={{ items }} />
<Breadcrumbs goBackTitle="Back" items={{ items }} />
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% extends '@spirit/Breadcrumbs/BreadcrumbsItem.twig' %}

0 comments on commit 75aa6c7

Please sign in to comment.