Feat(web-twig): Update Tag - dictionaries and deprecate theme and `de…

…fault` #DS-442 #DS-377 Deprecate color `default`, use `neutral` as default instead. Deprecate `theme` in favor of `isSubtle`.
lmc-eu · Mar 2, 2023 · 07cb957 · 07cb957
1 parent 0d9e729
commit 07cb957
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 16 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tag/README.md b/packages/web-twig/src/Resources/components/Tag/README.md
@@ -11,17 +11,17 @@ Basic example usage:
 Advanced example usage:
 
 ```html
-<Tag color="default" elementType="div" size="small" theme="dark">Tag content</Tag>
+<Tag color="success" elementType="div" size="small" isSubtle>Tag content</Tag>
 ```
 
 Without lexer:
 
 ```twig
 {% embed "@spirit/tag.twig" with { props: {
-    color: 'default',
+    color: 'success',
     elementType: 'div'
     size: 'small',
-    theme: 'dark'
+    isSubtle: 'true'
 }} %}
     {% block content %}
         Tag content
@@ -31,15 +31,19 @@ Without lexer:
 
 ## API
 
-| Prop name     | Type                                                     | Default   | Required | Description        |
-| ------------- | -------------------------------------------------------- | --------- | -------- | ------------------ |
-| `class`       | `string`                                                 | `null`    | no       | Custom CSS class   |
-| `color`       | `default`, `informative`, `success`, `warning`, `danger` | `default` | no       | Color variant      |
-| `elementType` | `string`                                                 | `span`    | no       | HTML tag to render |
-| `size`        | `xsmall`, `small`, `medium`                              | `medium`  | no       | Size of the Tag    |
-| `theme`       | `light`, `dark`                                          | `dark`    | no       | Theme variant      |
+| Prop name     | Type                                                                            | Default   | Required | Description                                                                                                      |
+| ------------- | ------------------------------------------------------------------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
+| `class`       | `string`                                                                        | `null`    | no       | Custom CSS class                                                                                                 |
+| `color`       | [Emotion Color dictionary][dictionary-color], `neutral`, `default` (deprecated) | `neutral` | no       | Color of the component; [**DEPRECATED**][deprecated] The value `default` will be replaced by the value `neutral` |
+| `isSubtle`    | `boolean`                                                                       | `false`   | no       | Whether is Tag displayed in subtle variant                                                                       |
+| `elementType` | `string`                                                                        | `span`    | no       | HTML tag to render                                                                                               |
+| `size`        | [Size Extended dictionary][dictionary-size]                                     | `medium`  | no       | Size of the Tag                                                                                                  |
+| `theme`       | `light`, `dark`                                                                 | `null`    | no       | [**DEPRECATED**][deprecated] in favor of `isSubtle`; Theme variant                                               |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.
 
 [tag]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tag
+[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
+[dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
diff --git a/packages/web-twig/src/Resources/components/Tag/Tag.twig b/packages/web-twig/src/Resources/components/Tag/Tag.twig
@@ -1,19 +1,29 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _class = props.class | default(null) -%}
-{%- set _color = props.color | default('default') -%}
-{%- set _size = props.size | default('medium') -%}
-{%- set _theme = props.theme | default('dark') -%}
+{%- set _color = props.color | default('neutral') -%}
 {%- set _elementType = props.elementType | default('span') -%}
+{%- set _isSubtle = props.isSubtle | default(false) -%}
+{%- set _size = props.size | default('medium') -%}
+{%- set _theme = props.theme | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Tag' -%}
 {%- set _colorClassName = _spiritClassPrefix ~ 'Tag--' ~ _color -%}
 {%- set _sizeClassName = _spiritClassPrefix ~ 'Tag--' ~ _size -%}
-{%- set _themeClassName = _spiritClassPrefix ~ 'Tag--' ~ _theme -%}
+{%- set _subtleClassname = _isSubtle ? _spiritClassPrefix ~ 'Tag--subtle' : null -%}
+{%- set _themeClassName = _theme ? _spiritClassPrefix ~ 'Tag--' ~ _theme : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _colorClassName, _sizeClassName, _themeClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _colorClassName, _sizeClassName, _subtleClassname, _themeClassName, _class ] -%}
+
+{# Deprecations #}
+{% if _theme %}
+    {% deprecated 'Tag: The "theme" property is deprecated, use "isSubtle" instead.' %}
+{% endif %}
+{% if _color is same as('default') %}
+    {% deprecated 'Tag: The "default" value for "color" property will be removed in the next major version. Use "neutral" instead.' %}
+{% endif %}
 
 <{{ _elementType }} {{ mainProps(props) }} {{ classProp(_classNames) }}>
 {%- block content %}{% endblock -%}

diff --git a/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html b/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html
@@ -1,3 +1,19 @@
 <html><body>
-<span class="Tag Tag--default Tag--medium Tag--dark">Tag</span>
+<span class="Tag Tag--neutral Tag--medium">Tag</span>
+
+<span class="Tag Tag--default Tag--medium">Tag</span>
+
+<span class="Tag Tag--success Tag--medium">Tag</span>
+
+<div class="Tag Tag--neutral Tag--medium">Tag</div>
+
+<span class="Tag Tag--neutral Tag--xlarge">Tag</span>
+
+<span class="Tag Tag--neutral Tag--medium Tag--subtle">Tag</span>
+
+<div class="Tag Tag--danger Tag--xsmall Tag--subtle">Tag</div>
+
+<div class="Tag Tag--danger Tag--xsmall Tag--light">Tag</div>
+
+<div class="Tag Tag--danger Tag--xsmall Tag--dark">Tag</div>
 </body></html>
diff --git a/packages/web-twig/tests/components-fixtures/tagDefault.twig b/packages/web-twig/tests/components-fixtures/tagDefault.twig
@@ -1 +1,9 @@
 <Tag>Tag</Tag>
+<Tag color="default">Tag</Tag>
+<Tag color="success">Tag</Tag>
+<Tag elementType="div">Tag</Tag>
+<Tag size="xlarge">Tag</Tag>
+<Tag isSubtle>Tag</Tag>
+<Tag color="danger" elementType="div" size="xsmall" isSubtle>Tag</Tag>
+<Tag color="danger" elementType="div" size="xsmall" theme="light">Tag</Tag>
+<Tag color="danger" elementType="div" size="xsmall" theme="dark">Tag</Tag>