From a2e901711332c5d09bcb7a57b9254fedcb5286a3 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Tue, 13 Aug 2024 09:39:53 +0200 Subject: [PATCH] Feat(web-twig): Add alignmentX and alignmentY prop to Grid component #DS-1414 --- .../components/Grid/Grid.stories.twig | 9 ++- .../src/Resources/components/Grid/Grid.twig | 47 ++++++++++++++- .../src/Resources/components/Grid/README.md | 57 ++++++++++++++++--- .../Grid/__tests__/__fixtures__/grid.twig | 26 +++++++++ .../__snapshots__/grid.twig.snap.html | 31 +++++++--- .../__snapshots__/gridItem.twig.snap.html | 2 +- .../Grid/stories/GridAlignment.twig | 35 ++++++++++++ .../Grid/stories/GridResponsiveAlignment.twig | 19 +++++++ 8 files changed, 208 insertions(+), 18 deletions(-) create mode 100644 packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig create mode 100644 packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig 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 1ecc65a104..37e3c23827 100644 --- a/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig +++ b/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig @@ -1,7 +1,6 @@ {% extends 'layout/plain.html.twig' %} {% block content %} - {% include '@components/Grid/stories/GridEqualColumns.twig' %} @@ -45,4 +44,12 @@ {% include '@components/Grid/stories/GridResponsiveCenteredGridItem.twig' %} + + + {% include '@components/Grid/stories/GridAlignment.twig' %} + + + + {% include '@components/Grid/stories/GridResponsiveAlignment.twig' %} + {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.twig b/packages/web-twig/src/Resources/components/Grid/Grid.twig index 6be9ea99fb..c0ba1fbd44 100644 --- a/packages/web-twig/src/Resources/components/Grid/Grid.twig +++ b/packages/web-twig/src/Resources/components/Grid/Grid.twig @@ -5,6 +5,8 @@ {%- set _spacing = props.spacing | default(null) -%} {%- set _spacingX = props.spacingX | default(null) -%} {%- set _spacingY = props.spacingY | default(null) -%} +{%- set _alignmentX = props.alignmentX | default('stretch') -%} +{%- set _alignmentY = props.alignmentY | default('stretch') -%} {# Class names #} {%- set _rootClassName = _spiritClassPrefix ~ 'Grid' -%} @@ -21,7 +23,50 @@ {%- set _colsClasses = [_spiritClassPrefix ~ 'Grid--cols-' ~ _cols] -%} {%- endif -%} -{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_colsClasses) -%} +{%- set _alignmentXClasses = [] -%} +{%- if _alignmentX is iterable and _alignmentX is not null -%} + {%- set hasMobile = false -%} + {%- for breakpoint, breakpointValue in _alignmentX -%} + {%- if breakpoint == 'mobile' -%} + {%- set hasMobile = true -%} + {%- endif -%} + {%- endfor -%} + {%- if not hasMobile -%} + {%- set _alignmentX = { 'mobile': 'stretch' } | merge(_alignmentX) -%} + {%- endif -%} + {%- for breakpoint, breakpointValue in _alignmentX -%} + {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%} + {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%} + {%- set _alignmentXClasses = _alignmentXClasses | merge([ _spiritClassPrefix ~ 'Grid' ~ infix ~ '--alignmentX' ~ breakpointValueCapitalized ]) -%} + {%- endfor -%} +{%- elseif _alignmentX is not null -%} + {%- set _alignmentXCapitalized = _alignmentX[:1] | upper ~ _alignmentX[1:] -%} + {%- set _alignmentXClasses = [ _spiritClassPrefix ~ 'Grid--alignmentX' ~ _alignmentXCapitalized ] -%} +{%- endif -%} + +{%- set _alignmentYClasses = [] -%} +{%- if _alignmentY is iterable and _alignmentY is not null -%} + {%- set hasMobile = false -%} + {%- for breakpoint, breakpointValue in _alignmentY -%} + {%- if breakpoint == 'mobile' -%} + {%- set hasMobile = true -%} + {%- endif -%} + {%- endfor -%} + {%- if not hasMobile -%} + {%- set _alignmentY = { 'mobile': 'stretch' } | merge(_alignmentY) -%} + {%- endif -%} + {%- for breakpoint, breakpointValue in _alignmentY -%} + {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%} + {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%} + {%- set _alignmentYClasses = _alignmentYClasses | merge([ _spiritClassPrefix ~ 'Grid' ~ infix ~ '--alignmentY' ~ breakpointValueCapitalized ]) -%} + {%- endfor -%} +{%- elseif _alignmentY is not null -%} + {%- set _alignmentYCapitalized = _alignmentY[:1] | upper ~ _alignmentY[1:] -%} + {%- set _alignmentYClasses = [ _spiritClassPrefix ~ 'Grid--alignmentY' ~ _alignmentYCapitalized ] -%} +{%- endif -%} + + +{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_colsClasses, _alignmentXClasses, _alignmentYClasses) -%} {%- set _style = '' -%} {%- if _spacing is iterable -%} diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md index 20fcecf478..f2df8dbaf9 100644 --- a/packages/web-twig/src/Resources/components/Grid/README.md +++ b/packages/web-twig/src/Resources/components/Grid/README.md @@ -96,15 +96,57 @@ Custom vertical (y-axis) spacing: ``` +## Item Alignment + +The `alignmentX` and `alignmentY` props are used to control the alignment of items within the `Grid` container. +The available values for these properties can be found in our [alignment dictionary][alignment-dictionary]. + +`alignmentX`: Manages horizontal alignment, allowing you to position items to the left, center, or right of the container. It can also be configured with responsive values for different breakpoints. +`alignmentY`: Manages vertical alignment, enabling you to position items at the top, center, or bottom of the container. It supports responsive values for various breakpoints as well. + +Both props can be set using either fixed values or objects with breakpoint-specific settings to ensure the alignment adapts across different screen sizes. + +Horizontal alignment: + +```twig + + + +``` + +Horizontal and vertical alignment: + +```twig + + + +``` + +Responsive horizontal and vertical alignment: + +```twig + + + +``` + +👉 Please note that the `stretch` option may have undesired impact on elements with a defined size or aspect ratio. The dimensions (or the ratio) will not be respected by `Grid` and the element will be stretched just like any other item. + ### API -| 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 }` | -| `elementType` | `string` | `div` | ✕ | HTML tag to render | -| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions 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 | +| Name | Type | Default | Required | Description | +| ------------- | -------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| `alignmentX` | [ [AlignmentXExtended dictionary][dictionary-alignment] \| `object`] | `stretch` | ✕ | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` | +| `alignmentY` | [ [AlignmentYExtended dictionary][dictionary-alignment] \| `object`] | `stretch` | ✕ | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` | +| `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 }` | +| `elementType` | `string` | `div` | ✕ | HTML tag to render | +| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions 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] @@ -190,6 +232,7 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. +[dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword [grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/grid.twig b/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/grid.twig index 2a981b2ee6..5d5bd61817 100644 --- a/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/grid.twig +++ b/packages/web-twig/src/Resources/components/Grid/__tests__/__fixtures__/grid.twig @@ -67,3 +67,29 @@
  • col 5
  • col 6
    • + + + + col 1 + col 2 + + + + + col 1 + col 2 + + + + + col 1 + col 2 + diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/grid.twig.snap.html b/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/grid.twig.snap.html index de2232fcaf..e809c83354 100644 --- a/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/grid.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/grid.twig.snap.html @@ -5,16 +5,16 @@ -
    +
    -
    +
    col 1
    -
      +
      • col 1
        • @@ -23,27 +23,27 @@
      -
      +
      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
          • @@ -62,5 +62,20 @@
        • col 6
        + + +
        + col 1 col 2 +
        + + +
        + col 1 col 2 +
        + + +
        + col 1 col 2 +
        diff --git a/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridItem.twig.snap.html b/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridItem.twig.snap.html index edf369545b..16119024a5 100644 --- a/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridItem.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Grid/__tests__/__snapshots__/gridItem.twig.snap.html @@ -5,7 +5,7 @@ -
        +
        1–10
        diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig new file mode 100644 index 0000000000..64bf2f129b --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig @@ -0,0 +1,35 @@ + + + Stretch (default)
        …         +         + + Stretch (default) + +         + + + + Left
        …         +         + + Top + +         + + + + Center
        …         +         + + Center + +         + + + + Right
        …         +         + + Bottom + +         diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig new file mode 100644 index 0000000000..fa23b51f09 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig @@ -0,0 +1,19 @@ + + + Horizontal Alignment
        …         +         + + Vertical Alignment + +