Feat(web-twig): Add spacing property to Grid

lmc-eu · Jul 24, 2024 · 01b538a · 01b538a
1 parent 0bc9f7b
commit 01b538a
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 7 deletions.
diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig b/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig
@@ -10,6 +10,18 @@
         {% include '@components/Grid/stories/GridResponsiveColumns.twig' %}
     </DocsSection>
 
+    <DocsSection title="Custom Spacing">
+        {% include '@components/Grid/stories/GridCustomSpacing.twig' %}
+    </DocsSection>
+
+    <DocsSection title="Responsive Custom Spacing">
+        {% include '@components/Grid/stories/GridResponsiveCustomSpacing.twig' %}
+    </DocsSection>
+
+    <DocsSection title="Responsive Custom Vertical Spacing">
+        {% include '@components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig' %}
+    </DocsSection>
+
     <DocsSection title="Grid Item">
         {% include '@components/Grid/stories/GridItem.twig' %}
     </DocsSection>

diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.twig b/packages/web-twig/src/Resources/components/Grid/Grid.twig
@@ -2,6 +2,9 @@
 {%- set props = props | default([]) -%}
 {%- set _cols = props.cols | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
+{%- set _spacing = props.spacing | default(null) -%}
+{%- set _spacingX = props.spacingX | default(null) -%}
+{%- set _spacingY = props.spacingY | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Grid' -%}
@@ -19,11 +22,51 @@
 {%- endif -%}
 
 {%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_colsClasses) -%}
+{%- set _style = '' -%}
+
+{%- if _spacing is iterable -%}
+    {%- for breakpoint, breakpointValue in _spacing -%}
+        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
+        {%- set _style =
+            _style ~
+                '--grid-spacing-x' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');
+                --grid-spacing-y' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');'
+        -%}
+    {%- endfor -%}
+{%- elseif _spacing -%}
+    {%- set _style =
+        _style ~
+            '--grid-spacing-x: var(--spirit-' ~ _spacing ~ ');
+            --grid-spacing-y: var(--spirit-' ~ _spacing ~ ');'
+    -%}
+{%- endif -%}
+
+{%- if _spacingX is iterable -%}
+    {%- for breakpoint, breakpointValue in _spacingX -%}
+        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
+        {%- set _style = _style ~ '--grid-spacing-x' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');' -%}
+    {%- endfor -%}
+{%- elseif _spacingX -%}
+    {%- set _style = _style ~ '--grid-spacing-x: var(--spirit-' ~ _spacingX ~ ');' -%}
+{%- endif -%}
+
+{%- if _spacingY is iterable -%}
+    {%- for breakpoint, breakpointValue in _spacingY -%}
+        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
+        {%- set _style = _style ~ '--grid-spacing-y' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');' -%}
+    {%- endfor -%}
+{%- elseif _spacingY -%}
+    {%- set _style = _style ~ '--grid-spacing-y: var(--spirit-' ~ _spacingY ~ ');' -%}
+{%- endif -%}
+
+{# Attributes #}
+{%- set _styleAttr = _style or (_styleProps.style is not same as(null)) ? 'style="' ~ _style ~ _styleProps.style | join() ~ '"' -%}
 
 <{{ _elementType }}
     {{ mainProps(props) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
+    {{ _styleAttr | raw }}
 >
     {%- block content %}{% endblock -%}
 </{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -128,15 +128,49 @@ Without lexer:
 {% endembed %}
 ```
 
+## Custom Spacing
+
+You can use the `spacing` prop to apply custom spacing between items. The prop
+accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values.
+
+You can set custom spacing in the horizontal (x-axis) and vertical (y-axis) direction using the `spacing-x` and `spacing-y` props.
+
+Custom spacing:
+
+```twig
+<Grid spacing="space-1200">
+  <!-- Grid content -->
+</Grid>
+```
+
+Custom responsive spacing:
+
+```twig
+<Grid spacing="{{ { mobile: 'space-400', tablet: 'space-800' } }}">
+  <!-- Grid content -->
+</Stack>
+```
+
+Custom vertical spacing:
+
+```twig
+<Grid spacingY="{{ { mobile: 'space-400', tablet: 'space-800' } }}">
+  <!-- Grid content -->
+</Stack>
+```
+
 ### API
 
-| Name          | Type                               | Default | Required | Description                        |
-| ------------- | ---------------------------------- | ------- | -------- | ---------------------------------- |
-| `elementType` | `string`                           | `div`   | ✕        | HTML tag to render                 |
-| `columnEnd`   | [`number` \| `string` \| `object`] | `null`  | ✕        | Column where the item should end   |
-| `columnStart` | [`number` \| `string` \| `object`] | `null`  | ✕        | Column where the item should start |
-| `rowEnd`      | [`number` \| `string` \| `object`] | `null`  | ✕        | Row where the item should end      |
-| `rowStart`    | [`number` \| `string` \| `object`] | `null`  | ✕        | Row where the item should start    |
+| Name          | Type                               | Default | Required | Description                                                      |
+| ------------- | ---------------------------------- | ------- | -------- | ---------------------------------------------------------------- |
+| `elementType` | `string`                           | `div`   | ✕        | HTML tag to render                                               |
+| `columnEnd`   | [`number` \| `string` \| `object`] | `null`  | ✕        | Column where the item should end                                 |
+| `columnStart` | [`number` \| `string` \| `object`] | `null`  | ✕        | Column where the item should start                               |
+| `rowEnd`      | [`number` \| `string` \| `object`] | `null`  | ✕        | Row where the item should end                                    |
+| `rowStart`    | [`number` \| `string` \| `object`] | `null`  | ✕        | Row where the item should start                                  |
+| `spacing`     | [`spacing token` \| `object`]      | `null`  | ✕        | Apply [custom spacing](#custom-spacing) between items            |
+| `spacingX`    | [`spacing token` \| `object`]      | `null`  | ✕        | Apply horizontal [custom spacing](#custom-spacing) between items |
+| `spacingY`    | [`spacing token` \| `object`]      | `null`  | ✕        | Apply vertical [custom spacing](#custom-spacing) between 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]

diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridSpacing.twig b/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridSpacing.twig
@@ -0,0 +1,53 @@
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacing="space-1000">
+    <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 cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="space-400">
+    <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 cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingX="space-400">
+    <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 cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacing="{{ { mobile: 'space-600', tablet: 'space-1000', desktop: 'space-1200' } }}">
+    <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 cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="{{ { mobile: 'space-600', tablet: 'space-1000', desktop: 'space-1200' } }}">
+    <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 cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingX="{{ { mobile: 'space-600', tablet: 'space-1000', desktop: 'space-1200' } }}">
+    <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>
diff --git a/...web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridSpacing.twig.snap.html b/...web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridSpacing.twig.snap.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4" style="--grid-column-gap: var(--spirit-space-1000); --grid-row-gap: var(--spirit-space-1000);">
+      <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--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4" style="--grid-row-gap: var(--spirit-space-400);">
+      <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--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4" style="--grid-column-gap: var(--spirit-space-400);">
+      <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--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4" style="--grid-column-gap: var(--spirit-space-600); --grid-row-gap: var(--spirit-space-600);--grid-column-gap-tablet: var(--spirit-space-1000); --grid-row-gap-tablet: var(--spirit-space-1000);--grid-column-gap-desktop: var(--spirit-space-1200); --grid-row-gap-desktop: var(--spirit-space-1200);">
+      <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--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4" style="--grid-row-gap: var(--spirit-space-600);--grid-row-gap-tablet: var(--spirit-space-1000);--grid-row-gap-desktop: var(--spirit-space-1200);">
+      <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--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4" style="--grid-column-gap: var(--spirit-space-600);--grid-column-gap-tablet: var(--spirit-space-1000);--grid-column-gap-desktop: var(--spirit-space-1200);">
+      <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>
+  </body>
+</html>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig
@@ -0,0 +1,5 @@
+<Grid cols="4" spacing="space-1000">
+    {% for i in 1..4 %}
+        <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
+    {% endfor %}
+</Grid>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig
@@ -0,0 +1,9 @@
+<Grid
+    cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}"
+    spacingX="{{ { mobile: 'space-1000', tablet: 'space-900', desktop: 'space-1200' } }}"
+    spacingY="{{ { mobile: 'space-800', tablet: 'space-1000', desktop: 'space-0' } }}"
+>
+    {% for i in 1..4 %}
+        <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
+    {% endfor %}
+</Grid>
diff --git a/...s/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig b/...s/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig
@@ -0,0 +1,5 @@
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="{{ { mobile: 'space-400', tablet: 'space-800', desktop: 'space-100' } }}">
+    {% for i in 1..4 %}
+        <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
+    {% endfor %}
+</Grid>