diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig b/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig index 471b59c13f..3500ac3a7a 100644 --- 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' %} + + {% include '@components/Grid/stories/GridCustomSpacing.twig' %} + + + + {% include '@components/Grid/stories/GridResponsiveCustomSpacing.twig' %} + + + + {% include '@components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig' %} + + {% include '@components/Grid/stories/GridItem.twig' %} diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.twig b/packages/web-twig/src/Resources/components/Grid/Grid.twig index 0679860acc..b63ee37e7c 100644 --- 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 -%} diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md index 7ba180e76f..aee34f045e 100644 --- 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 + + + +``` + +Custom responsive spacing: + +```twig + + + +``` + +Custom vertical spacing: + +```twig + + + +``` + ### 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 new file mode 100644 index 0000000000..b41b01e25d --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/gridSpacing.twig @@ -0,0 +1,53 @@ + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + + + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + + + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + + + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + + + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + + + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridSpacing.twig.snap.html b/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridSpacing.twig.snap.html new file mode 100644 index 0000000000..03d29a8a14 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridSpacing.twig.snap.html @@ -0,0 +1,32 @@ + + + + + + + +
+ col 1 col 2 col 3 col 4 col 5 col 6 +
+ +
+ col 1 col 2 col 3 col 4 col 5 col 6 +
+ +
+ col 1 col 2 col 3 col 4 col 5 col 6 +
+ +
+ col 1 col 2 col 3 col 4 col 5 col 6 +
+ +
+ col 1 col 2 col 3 col 4 col 5 col 6 +
+ +
+ col 1 col 2 col 3 col 4 col 5 col 6 +
+ + diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig new file mode 100644 index 0000000000..b418a7d07f --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig @@ -0,0 +1,5 @@ + + {% for i in 1..4 %} + 1/2, 1/3, 1/4 + {% endfor %} + diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig new file mode 100644 index 0000000000..91e947f8a9 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig @@ -0,0 +1,9 @@ + + {% for i in 1..4 %} + 1/2, 1/3, 1/4 + {% endfor %} + diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig new file mode 100644 index 0000000000..9705aa1ae9 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig @@ -0,0 +1,5 @@ + + {% for i in 1..4 %} + 1/2, 1/3, 1/4 + {% endfor %} +