fixup! Feat(web-twig): Add alignmentX and alignmentY prop to Grid com…

…ponent #DS-1414
lmc-eu · Aug 13, 2024 · 085d34a · 085d34a
1 parent 859fd18
commit 085d34a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 29 deletions.
diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -99,12 +99,21 @@ Custom vertical (y-axis) spacing:
 ## Item Alignment
 
 The `alignmentX` and `alignmentY` props are used to control the alignment of items within a 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
+<Grid alignmentX="left">
+  <!-- Grid content -->
+</Grid>
+```
+
 Horizontal and Vertical Alignment:
 
 ```twig
@@ -128,8 +137,8 @@ Responsive Horizontal and Vertical Alignment:
 
 | Name          | Type                                                         | Default | Required | Description                                                                                                                             |
 | ------------- | ------------------------------------------------------------ | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `alignmentX`  | [`left` \| `center` \| `right` \| `object`]                  | `null`  | ✕        | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }`   |
-| `alignmentY`  | [`top` \| `center` \| `bottom` \| `object`]                  | `null`  | ✕        | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` |
+| `alignmentX`  | [`stretch` \| `left` \| `center` \| `right` \| `object`]     | `null`  | ✕        | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }`   |
+| `alignmentY`  | [`stretch` \| `top` \| `center` \| `bottom` \| `object`]     | `null`  | ✕        | 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                                        |

diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig
@@ -1,35 +1,40 @@
 <Grid cols="2">
-    <GridItem UNSAFE_className="bg-cover">
-        <DocsBox size="small">Stretch (default)<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
-        <DocsBox size="small">Stretch (default)</DocsBox>
-    </GridItem>
+    <DocsBox size="small">Normal (default)<br/>…</DocsBox>
+    <DocsBox size="small">Normal (default)</DocsBox>
 </Grid>
 
-<Grid cols="2" alignmentX="left" alignmentY="top">
-    <GridItem UNSAFE_className="bg-cover">
+<Grid cols="2">
+    <Grid cols="1" alignmentX="stretch" alignmentY="stretch" UNSAFE_className="bg-cover">
+        <DocsBox size="small">Stretch<br/>…</DocsBox>
+    </Grid>
+    <Grid cols="1" alignmentX="stretch" alignmentY="stretch" UNSAFE_className="bg-cover">
+        <DocsBox size="small">Stretch</DocsBox>
+    </Grid>
+</Grid>
+
+<Grid cols="2">
+    <Grid cols="1" alignmentX="left" alignmentY="top" UNSAFE_className="bg-cover">
         <DocsBox size="small">Left<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid cols="1" alignmentX="left" alignmentY="top" UNSAFE_className="bg-cover">
         <DocsBox size="small">Top</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>
 
-<Grid cols="2" alignmentX="center" alignmentY="center">
-    <GridItem UNSAFE_className="bg-cover">
+<Grid cols="2" >
+    <Grid cols="1" alignmentX="center" alignmentY="center" UNSAFE_className="bg-cover">
         <DocsBox size="small">Center<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid cols="1" alignmentX="center" alignmentY="center" UNSAFE_className="bg-cover">
         <DocsBox size="small">Center</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>
 
-<Grid cols="2" alignmentX="right" alignmentY="bottom">
-    <GridItem UNSAFE_className="bg-cover">
+<Grid cols="2">
+    <Grid cols="1" alignmentX="right" alignmentY="bottom" UNSAFE_className="bg-cover">
         <DocsBox size="small">Right<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid cols="1" alignmentX="right" alignmentY="bottom" UNSAFE_className="bg-cover">
         <DocsBox size="small">Bottom</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig
@@ -1,11 +1,19 @@
 <Grid cols="2"
-    alignmentX="{{ { mobile: 'left', tablet: 'center', desktop: 'right' } }}" 
-    alignmentY="{{ { mobile: 'top', tablet: 'center', desktop: 'bottom' } }}"
 >
-    <GridItem UNSAFE_className="bg-cover">
+    <Grid 
+        cols="1" 
+        alignmentX="{{ { mobile: 'left', tablet: 'center', desktop: 'right' } }}" 
+        alignmentY="{{ { mobile: 'top', tablet: 'center', desktop: 'bottom' } }}" 
+        UNSAFE_className="bg-cover"
+    >
         <DocsBox size="small">Horizontal Alignment<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid 
+        cols="1" 
+        alignmentX="{{ { mobile: 'left', tablet: 'center', desktop: 'right' } }}" 
+        alignmentY="{{ { mobile: 'top', tablet: 'center', desktop: 'bottom' } }}" 
+        UNSAFE_className="bg-cover"
+    >
         <DocsBox size="small">Vertical Alignment</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>