Feat(web-twig): Allow object in Grid prop cols, deprecate desktop and…

… tablet #DS-995
lmc-eu · Nov 28, 2023 · 7d9d4f0 · 7d9d4f0
1 parent 7b88d4c
commit 7d9d4f0
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 22 deletions.
diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.twig b/packages/web-twig/src/Resources/components/Grid/Grid.twig
@@ -6,14 +6,33 @@
 {%- set _tablet = props.tablet | default(null) -%}
 
 {# Class names #}
-{%- set _colsClassName = _cols ? _spiritClassPrefix ~ 'Grid--cols-' ~ _cols : null -%}
-{%- set _desktopClassName = _desktop ? _spiritClassPrefix ~ 'Grid--desktop--cols-' ~ _desktop : null -%}
-{%- set _tabletClassName = _tablet ? _spiritClassPrefix ~ 'Grid--tablet--cols-' ~ _tablet : null -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Grid' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _colsClassName, _tabletClassName, _desktopClassName, _styleProps.className ] -%}
+{%- set _colsClasses = [] -%}
+{%- if _cols is iterable -%}
+    {%- for breakpoint, bpValue in _cols -%}
+        {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
+        {%- set _colsClasses = _colsClasses | merge([ _spiritClassPrefix ~ 'Grid' ~ infix ~ '--cols-' ~ bpValue ]) -%}
+    {%- endfor -%}
+{%- else -%}
+    {%- set _colsClasses = _colsClasses | merge([
+        _cols ? _spiritClassPrefix ~ 'Grid--cols-' ~ _cols : null,
+        _tablet ? _spiritClassPrefix ~ 'Grid--tablet--cols-' ~ _tablet : null,
+        _desktop ? _spiritClassPrefix ~ 'Grid--desktop--cols-' ~ _desktop : null,
+    ]) -%}
+{%- endif -%}
+
+{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_colsClasses) -%}
+
+{# Deprecations #}
+{% if _desktop %}
+    {% deprecated 'Grid: The "desktop" property is deprecated and will be removed in the next major version. Please use "cols" instead.' %}
+{% endif %}
+{% if _tablet %}
+    {% deprecated 'Grid: The "tablet" property is deprecated and will be removed in the next major version. Please use "cols" instead.' %}
+{% endif %}
 
 <{{ _elementType }}
     {{ mainProps(props) }}

diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -20,7 +20,7 @@ Basic example usage:
 Advanced example usage:
 
 ```html
-<Grid cols="2" tablet="3" desktop="4" elementType="section">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" elementType="section">
   <span>col 1</span>
   <span>col 2</span>
   <span>col 3</span>
@@ -34,9 +34,11 @@ Without lexer:
 
 ```twig
 {% embed "@spirit/grid.twig" with { props: {
-    cols: 2,
-    tablet: 3,
-    desktop: 4,
+    cols: {
+        mobile: 2,
+        tablet: 3,
+        desktop: 4,
+    },
 }} %}
     {% block content %}
         <span>col 1</span>
@@ -51,12 +53,12 @@ Without lexer:
 
 ### API
 
-| Name          | Type                                             | Default | Required | Description                         |
-| ------------- | ------------------------------------------------ | ------- | -------- | ----------------------------------- |
-| `cols`        | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`] | `null`  | ✕        | Number of columns to use            |
-| `desktop`     | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`] | `null`  | ✕        | Number of columns to use on desktop |
-| `elementType` | `string`                                         | `div`   | ✕        | HTML tag to render                  |
-| `tablet`      | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`] | `null`  | ✕        | Number of columns to use on tablet  |
+| Name          | Type                                                         | Default | Required | Description                                                                                                |
+| ------------- | ------------------------------------------------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `cols`        | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | `null`  | ✕        | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` |
+| `desktop`     | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`]             | `null`  | ✕        | [**DEPRECATED**][deprecated] in favor of `cols`; Number of columns to use on desktop                       |
+| `elementType` | `string`                                                     | `div`   | ✕        | HTML tag to render                                                                                         |
+| `tablet`      | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`]             | `null`  | ✕        | [**DEPRECATED**][deprecated] in favor of `cols`; Number of columns to use on tablet                        |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,
@@ -193,6 +195,7 @@ You can add `id`, `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.
 
-[grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid
-[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
 [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
+[grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid
diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridDefault.twig b/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridDefault.twig
@@ -1,8 +1,16 @@
-<Grid cols="2" tablet="3" desktop="4">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}">
     <span>col 1</span>
     <span>col 2</span>
     <span>col 3</span>
     <span>col 4</span>
     <span>col 5</span>
     <span>col 6</span>
-</Grid>
+</Grid>
+
+<Grid cols="{{ { desktop: 4 } }}">
+    <span>col 1</span>
+</Grid>
+
+<Grid cols="2">
+    <span>col 1</span>
+</Grid>
diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridDefaultPure.twig b/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridDefaultPure.twig
@@ -1,7 +1,9 @@
 {% embed "@spirit/grid.twig" with { props: {
-    cols: 2,
-    tablet: 3,
-    desktop: 4,
+    cols: {
+        mobile: 2,
+        tablet: 3,
+        desktop: 4,
+    },
 }} %}
     {% block content %}
         <span>col 1</span>

diff --git a/...web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridDefault.twig.snap.html b/...web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridDefault.twig.snap.html
@@ -8,5 +8,13 @@
     <div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4">
       <span>col 1</span> <span>col 2</span> <span>col 3</span> <span>col 4</span> <span>col 5</span> <span>col 6</span>
     </div>
+
+    <div class="Grid Grid--desktop--cols-4">
+      <span>col 1</span>
+    </div>
+
+    <div class="Grid Grid--cols-2">
+      <span>col 1</span>
+    </div>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveColumns.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveColumns.twig
@@ -1,4 +1,4 @@
-<Grid cols="2" tablet="3" desktop="4">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}">
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% endfor %}