From 14c4aef9f4bbcb361fbc43dbb86908cc749a7069 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kater=CC=8Cina=20Dlouha=CC=81?= Date: Tue, 15 Aug 2023 10:14:18 +0200 Subject: [PATCH] Feat(web-twig): Document and test `Icon` props in the `Spinner` component refs #DS-759 --- .../Resources/components/Spinner/README.md | 9 +++++-- .../components/Spinner/Spinner.stories.twig | 3 +++ .../Resources/components/Spinner/Spinner.twig | 5 ++-- .../Spinner/stories/SpinnerIconProps.twig | 9 +++++++ ...ith data set spinnerIconProps.twig__1.html | 27 +++++++++++++++++++ 5 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 packages/web-twig/src/Resources/components/Spinner/stories/SpinnerIconProps.twig create mode 100644 packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerIconProps.twig__1.html diff --git a/packages/web-twig/src/Resources/components/Spinner/README.md b/packages/web-twig/src/Resources/components/Spinner/README.md index 8bbdb10b16..61d6775660 100644 --- a/packages/web-twig/src/Resources/components/Spinner/README.md +++ b/packages/web-twig/src/Resources/components/Spinner/README.md @@ -11,14 +11,15 @@ Basic example usage: Advanced example usage: ```html - + ``` Without lexer: ```twig {% embed "@spirit/spinner.twig" with { props: { - color: 'secondary' + color: 'secondary', + boxSize: 36, }} %} {% endembed %} ``` @@ -29,9 +30,13 @@ Without lexer: | ------- | ----------------------------------------- | ------- | -------- | ------------- | | `color` | [Text Color dictionary][dictionary-color] | `null` | ✕ | Color variant | +👉 `Spinner` is a wrapper of the `Icon` component. +Please, read [`Icon` documentation][icon-documentation] to find out which other props can be passed. + You can add `data-*` or `aria-*` attributes to further extend 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. [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color +[icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Icon/README.md [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig b/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig index d430f6f09c..588370083f 100644 --- a/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig +++ b/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig @@ -8,4 +8,7 @@ {# Spinner Colors #} {% include '@components/Spinner/stories/SpinnerColors.twig' %} +{# Spinner Icon Props #} +{% include '@components/Spinner/stories/SpinnerIconProps.twig' %} + {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Spinner/Spinner.twig b/packages/web-twig/src/Resources/components/Spinner/Spinner.twig index 5d0f96b71e..3a494de362 100644 --- a/packages/web-twig/src/Resources/components/Spinner/Spinner.twig +++ b/packages/web-twig/src/Resources/components/Spinner/Spinner.twig @@ -1,6 +1,5 @@ {# API #} {%- set props = props | default([]) -%} -{%- set _class = props.class | default(null) -%} {%- set _color = props.color | default(null) -%} {# Class names #} @@ -10,10 +9,10 @@ {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} {%- set _classNames = [ _rootClassName, _rootAnimationClassName, _styleProps.className ] -%} -{%- set _mainPropsWithoutLocal = props | filter((value, prop) => prop is not same as('color') and prop is not same as('class')) -%} +{%- set _mainPropsWithoutColor = props | filter((value, prop) => prop is not same as('color')) -%} {% embed "@spirit/icon.twig" with { props: { name: 'spinner', UNSAFE_className: _classNames | join(' ') | trim, UNSAFE_style: _styleProps.style, -} | merge(_mainPropsWithoutLocal) } %}{% endembed %} +} | merge(_mainPropsWithoutColor) } %}{% endembed %} diff --git a/packages/web-twig/src/Resources/components/Spinner/stories/SpinnerIconProps.twig b/packages/web-twig/src/Resources/components/Spinner/stories/SpinnerIconProps.twig new file mode 100644 index 0000000000..c312350f09 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Spinner/stories/SpinnerIconProps.twig @@ -0,0 +1,9 @@ +
+ +
+
+ +
+
+ +
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerIconProps.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerIconProps.twig__1.html new file mode 100644 index 0000000000..beb07c9f84 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerIconProps.twig__1.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + Spinner title + + +