Skip to content

Commit

Permalink
Docs(web-twig): Document correctly when the goBackTitle prop is requi…
Browse files Browse the repository at this point in the history 
…red in Breadcrumbs #DS-921
  • Loading branch information
@crishpeen @literat
crishpeen authored and literat committed Jun 10, 2024
1 parent 63ab3f1 commit 30cbe8f
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 22 deletions.
8 changes: 0 additions & 8 deletions packages/web-twig/DEPRECATIONS-v3.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,6 @@ Use:

See [`Tooltip` documentation][tooltip-readme] for more details and examples.

### Breadcrumbs `goBackTitle` Prop

The `goBackTitle` prop will be required for the `Breadcrumbs` component.

#### Migration Guide

Add `goBackTitle` prop to the `Breadcrumbs` component.

### Header Abstracts Class and Style

The `style` and `class` props will be removed from these `Header` abstracts:
Expand Down
5 changes: 0 additions & 5 deletions packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}

{# Deprecations #}
{% if not _goBackTitle %}
{% deprecated 'Breadcrumbs: The "goBackTitle" property will be required starting from the next major version.' %}
{% endif %}

<{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }} aria-label="Breadcrumb">
{% apply spaceless %}
{%- if _items|length > 0 -%}
Expand Down
17 changes: 8 additions & 9 deletions packages/web-twig/src/Resources/components/Breadcrumbs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ Basic example usage:
```

```twig
<Breadcrumbs items={ items } />
<Breadcrumbs goBackTitle="Back" items={ items } />
```

Without lexer:

```twig
{% embed "@spirit/breadcrumbs.twig" with { props: {
items: items
goBackTitle: "Go back",
items: items
}} %}{% endembed %}
```

Expand Down Expand Up @@ -66,7 +67,6 @@ Without lexer:
```twig
{% embed "@spirit/breadcrumbs.twig" with { props: {
elementType: 'nav'
goBackTitle: 'Custom go back link title'
}} %}
{% block content %}
<li class="d-none d-tablet-flex">
Expand Down Expand Up @@ -95,11 +95,11 @@ content can be overridden by any custom block content.

### 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 |
| Name | Type | Default | Required | Description |
| ------------- | -------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `elementType` | `string` | `nav` | ✕ | HTML tag to render |
| `goBackTitle` | `string` | — | ✕ | Title/translation for backlink to previous page on mobile. It's required to be set when `items` are present. If the `items` property is not passed and the link tree is constructed manually within the children, the backlink needs to be included there as well. |
| `items` | `array` | `[]` | ✕ | Navigation menu items |

On top of the API options, the components accept [additional attributes][readme-additional-attributes].
If you need more control over the styling of a component, you can use [style props][readme-style-props]
Expand Down Expand Up @@ -150,7 +150,6 @@ Please see the documentation for more details.
Additional option is to use helper class `text-truncate` with defined width.

[breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Breadcrumbs
[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes
[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props
[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches
Expand Down

0 comments on commit 30cbe8f

Please sign in to comment.