Docs(web,web-react,web-twig): Switch Grid spacing tokens to new values

lmc-eu · Aug 19, 2024 · a7562ea · a7562ea
1 parent ba8b18f
commit a7562ea
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 29 deletions.
diff --git a/packages/web-react/src/components/Grid/demo/GridCustomSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridCustomSpacing.tsx
@@ -3,7 +3,7 @@ import Grid from '../Grid';
 import GridItemFactory from './GridItemFactory';
 
 const GridCustomSpacing = () => (
-  <Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} spacing="space-1000">
+  <Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} spacing="space-1200">
     <GridItemFactory items={4} label="1/2, 1/3, 1/4" />
   </Grid>
 );

diff --git a/packages/web-react/src/components/Grid/demo/GridNestedGridItem.tsx b/packages/web-react/src/components/Grid/demo/GridNestedGridItem.tsx
@@ -6,7 +6,7 @@ import GridItem from '../GridItem';
 const GridNestedGridItem = () => (
   <Grid>
     <GridItem columnStart={1} columnEnd={{ mobile: 9, tablet: 10 }}>
-      <div className="bg-cover py-400">
+      <div className="bg-cover py-500">
         <Grid>
           <GridItem columnStart={1} columnEnd="span 4">
             <DocsBox size="small">First Nested Content</DocsBox>

diff --git a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomHorizontalSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomHorizontalSpacing.tsx
@@ -7,8 +7,8 @@ const GridResponsiveCustomHorizontalSpacing = () => (
     cols={{ mobile: 2, tablet: 3, desktop: 4 }}
     spacingX={{
       mobile: 'space-100',
-      tablet: 'space-400',
-      desktop: 'space-900',
+      tablet: 'space-500',
+      desktop: 'space-1100',
     }}
   >
     <GridItemFactory items={4} label="1/2, 1/3, 1/4" />

diff --git a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomSpacing.tsx
@@ -6,13 +6,13 @@ const GridResponsiveCustomSpacing = () => (
   <Grid
     cols={{ mobile: 2, tablet: 3, desktop: 4 }}
     spacingX={{
-      mobile: 'space-1000',
-      tablet: 'space-900',
-      desktop: 'space-1200',
+      mobile: 'space-1200',
+      tablet: 'space-1100',
+      desktop: 'space-1600',
     }}
     spacingY={{
-      mobile: 'space-800',
-      tablet: 'space-1000',
+      mobile: 'space-1000',
+      tablet: 'space-1200',
       desktop: 'space-0',
     }}
   >

diff --git a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomVerticalSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomVerticalSpacing.tsx
@@ -7,8 +7,8 @@ const GridResponsiveCustomVerticalSpacing = () => (
     cols={{ mobile: 2, tablet: 3, desktop: 4 }}
     spacingY={{
       mobile: 'space-100',
-      tablet: 'space-400',
-      desktop: 'space-900',
+      tablet: 'space-500',
+      desktop: 'space-1100',
     }}
   >
     <GridItemFactory items={8} label="1/2, 1/3, 1/4" />

diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig
@@ -1,4 +1,4 @@
-<Grid cols="4" spacing="space-1000">
+<Grid cols="4" spacing="space-1200">
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% endfor %}

diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridNestedGridItem.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridNestedGridItem.twig
@@ -1,6 +1,6 @@
 <Grid>
     <GridItem columnStart="1" columnEnd="{{ { mobile: 9, tablet: 10 } }}">
-        <div class="bg-cover py-400">
+        <div class="bg-cover py-500">
             <Grid>
                 <GridItem columnStart="1" columnEnd="span 4">
                     <DocsBox size="small">First Nested Content</DocsBox>

diff --git a/...web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomHorizontalSpacing.twig b/...web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomHorizontalSpacing.twig
@@ -1,4 +1,4 @@
-<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingX="{{ { mobile: 'space-100', tablet: 'space-400', desktop: 'space-900' } }}">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingX="{{ { mobile: 'space-100', tablet: 'space-500', desktop: 'space-1100' } }}">
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% 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
@@ -1,7 +1,7 @@
 <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' } }}"
+    spacingX="{{ { mobile: 'space-1200', tablet: 'space-1100', desktop: 'space-1600' } }}"
+    spacingY="{{ { mobile: 'space-1000', tablet: 'space-1200', desktop: 'space-0' } }}"
 >
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>

diff --git a/...s/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig b/...s/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig
@@ -1,4 +1,4 @@
-<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="{{ { mobile: 'space-100', tablet: 'space-400', desktop: 'space-900' } }}">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="{{ { mobile: 'space-100', tablet: 'space-500', desktop: 'space-1100' } }}">
     {% for i in 1..8 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% endfor %}

diff --git a/packages/web/src/scss/components/Grid/index.html b/packages/web/src/scss/components/Grid/index.html
@@ -76,8 +76,8 @@ <h2 class="docs-Heading">Custom Spacing</h2>
     <div
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
-        --grid-spacing-x: var(--spirit-space-1000);
-        --grid-spacing-y: var(--spirit-space-1000);
+        --grid-spacing-x: var(--spirit-space-1200);
+        --grid-spacing-y: var(--spirit-space-1200);
       "
     >
       <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
@@ -96,11 +96,11 @@ <h2 class="docs-Heading">Responsive Custom Spacing</h2>
     <div
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
-        --grid-spacing-x: var(--spirit-space-1000);
-        --grid-spacing-x-tablet: var(--spirit-space-900);
-        --grid-spacing-x-desktop: var(--spirit-space-1200);
-        --grid-spacing-y: var(--spirit-space-800);
-        --grid-spacing-y-tablet: var(--spirit-space-1000);
+        --grid-spacing-x: var(--spirit-space-1200);
+        --grid-spacing-x-tablet: var(--spirit-space-1100);
+        --grid-spacing-x-desktop: var(--spirit-space-1600);
+        --grid-spacing-y: var(--spirit-space-1000);
+        --grid-spacing-y-tablet: var(--spirit-space-1200);
         --grid-spacing-y-desktop: var(--spirit-space-0);
       "
     >
@@ -121,8 +121,8 @@ <h2 class="docs-Heading">Responsive Custom Horizontal Spacing</h2>
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
         --grid-spacing-x: var(--spirit-space-100);
-        --grid-spacing-x-tablet: var(--spirit-space-400);
-        --grid-spacing-x-desktop: var(--spirit-space-900);
+        --grid-spacing-x-tablet: var(--spirit-space-500);
+        --grid-spacing-x-desktop: var(--spirit-space-1100);
       "
     >
       <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
@@ -142,8 +142,8 @@ <h2 class="docs-Heading">Responsive Custom Vertical Spacing</h2>
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
         --grid-spacing-y: var(--spirit-space-100);
-        --grid-spacing-y-tablet: var(--spirit-space-400);
-        --grid-spacing-y-desktop: var(--spirit-space-900);
+        --grid-spacing-y-tablet: var(--spirit-space-500);
+        --grid-spacing-y-desktop: var(--spirit-space-1100);
       "
     >
       <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
@@ -239,7 +239,7 @@ <h2 class="docs-Heading">Nested Grid with Grid Item</h2>
           --grid-item-column-end-tablet: 10;
         "
       >
-        <div class="bg-cover py-400">
+        <div class="bg-cover py-500">
           <div class="Grid">
             <div
               class="GridItem"