Docs(web-react, web-twig): Switch responsive Grid props to the cols o…

…bject
lmc-eu · Nov 28, 2023 · 18f3df9 · 18f3df9
1 parent 85abe02
commit 18f3df9
Show file tree

Hide file tree

Showing 15 changed files with 20 additions and 15 deletions.
diff --git a/packages/web-react/src/components/Button/demo/ButtonDefault.tsx b/packages/web-react/src/components/Button/demo/ButtonDefault.tsx
@@ -3,7 +3,7 @@ import { Grid } from '../../Grid';
 import ButtonDemoFactory from './ButtonDemoFactory';
 
 const ButtonDefault = () => (
-  <Grid cols={1} desktop={3}>
+  <Grid cols={{ mobile: 1, desktop: 3 }}>
     <ButtonDemoFactory />
   </Grid>
 );

diff --git a/packages/web-react/src/components/Button/demo/ButtonDisabled.tsx b/packages/web-react/src/components/Button/demo/ButtonDisabled.tsx
@@ -3,7 +3,7 @@ import { Grid } from '../../Grid';
 import ButtonDemoFactory from './ButtonDemoFactory';
 
 const ButtonDisabled = () => (
-  <Grid cols={1} desktop={3}>
+  <Grid cols={{ mobile: 1, desktop: 3 }}>
     <ButtonDemoFactory isDisabled />
   </Grid>
 );

diff --git a/packages/web-react/src/components/Button/demo/ButtonLoading.tsx b/packages/web-react/src/components/Button/demo/ButtonLoading.tsx
@@ -3,7 +3,7 @@ import { Grid } from '../../Grid';
 import ButtonDemoFactory from './ButtonDemoFactory';
 
 const ButtonLoading = () => (
-  <Grid cols={1} desktop={3}>
+  <Grid cols={{ mobile: 1, desktop: 3 }}>
     <ButtonDemoFactory isLoading />
   </Grid>
 );

diff --git a/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDefault.tsx b/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDefault.tsx
@@ -3,7 +3,7 @@ import { Grid } from '../../Grid';
 import ButtonLinkDemoFactory from './ButtonLinkDemoFactory';
 
 const ButtonLinkDefault = () => (
-  <Grid cols={1} desktop={3}>
+  <Grid cols={{ mobile: 1, desktop: 3 }}>
     <ButtonLinkDemoFactory />
   </Grid>
 );

diff --git a/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDisabled.tsx b/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDisabled.tsx
@@ -3,7 +3,7 @@ import { Grid } from '../../Grid';
 import ButtonLinkDemoFactory from './ButtonLinkDemoFactory';
 
 const ButtonLinkDisabled = () => (
-  <Grid cols={1} desktop={3}>
+  <Grid cols={{ mobile: 1, desktop: 3 }}>
     <ButtonLinkDemoFactory isDisabled />
   </Grid>
 );

diff --git a/packages/web-react/src/components/Tag/demo/TagDefault.tsx b/packages/web-react/src/components/Tag/demo/TagDefault.tsx
@@ -10,7 +10,7 @@ const TagDefault = () => {
   const colors = ['neutral', ...emotionColors];
 
   return (
-    <Grid cols={1} tablet={3} desktop={5}>
+    <Grid cols={{ mobile: 1, tablet: 3, desktop: 5 }}>
       {sizes.map((size) => (
         <DocsSection key={size} title={`Size ${size}`}>
           {colors.map((color) => (

diff --git a/packages/web-react/src/icons/demo/icons.tsx b/packages/web-react/src/icons/demo/icons.tsx
@@ -11,7 +11,11 @@ const Icons = () => {
   }
 
   return (
-    <Grid elementType="ul" cols={2} tablet={4} desktop={6} UNSAFE_className="text-center my-1000 list-unstyled">
+    <Grid
+      elementType="ul"
+      cols={{ mobile: 2, tablet: 4, desktop: 6 }}
+      UNSAFE_className="text-center my-1000 list-unstyled"
+    >
       {icons?.map((icon) => (
         <li key={icon} className="mb-600">
           <Icon name={icon} />

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
@@ -98,7 +98,7 @@ content can be overridden by any custom block content.
 | Name          | Type     | Default | Required | Description                                                                                                                                                                                                                                                                       |
 | ------------- | -------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `elementType` | `string` | `nav`   | ✕        | HTML tag to render                                                                                                                                                                                                                                                                |
-| `goBackTitle` | `string` | —       | ✕        | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. [**Optional DEPRECATED**][Deprecated] Will be **required** in the next major version. |
+| `goBackTitle` | `string` | —       | ✕        | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. [**Optional DEPRECATED**][deprecated] Will be **required** in the next major version. |
 | `items`       | `array`  | `[]`    | ✕        | Navigation menu items                                                                                                                                                                                                                                                             |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend the component's
@@ -150,5 +150,6 @@ Please see the documentation for more details.
 Additional option is to use helper class `text-truncate` with defined width.
 
 [breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Breadcrumbs
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
 [twig-truncate]: https://twig.symfony.com/doc/3.x/filters/u.html
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -1,4 +1,4 @@
-<Grid cols="1" desktop="3">
+<Grid cols="{{ { mobile: 1, desktop: 3 } }}">
     {% for size in sizes %}
 
         {% set title = 'Size ' ~ size %}

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
@@ -1,4 +1,4 @@
-<Grid cols="1" desktop="3">
+<Grid cols="{{ { mobile: 1, desktop: 3 } }}">
     {% for size in sizes %}
 
         {% set title = 'Size ' ~ size %}

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
@@ -1,4 +1,4 @@
-<Grid cols="1" desktop="3">
+<Grid cols="{{ { mobile: 1, desktop: 3 } }}">
     {% for size in sizes %}
 
         {% set title = 'Size ' ~ size %}

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
@@ -1,4 +1,4 @@
-<Grid cols="1" desktop="3">
+<Grid cols="{{ { mobile: 1, desktop: 3 } }}">
     {% for size in sizes %}
 
         {% set title = 'Size ' ~ size %}

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -1,4 +1,4 @@
-<Grid cols="1" desktop="3">
+<Grid cols="{{ { mobile: 1, desktop: 3 } }}">
     {% for size in sizes %}
 
         {% set title = 'Size ' ~ size %}

diff --git a/packages/web-twig/src/Resources/components/Tag/stories/TagDefault.twig b/packages/web-twig/src/Resources/components/Tag/stories/TagDefault.twig
@@ -1,7 +1,7 @@
 {% set colors = [ 'neutral', 'success', 'informative', 'warning', 'danger' ] %}
 {% set sizes = [ 'xsmall', 'small', 'medium', 'large', 'xlarge' ] %}
 
-<Grid cols="1" tablet="3" desktop="5">
+<Grid cols="{{ { mobile: 1, tablet: 3, desktop: 5 } }}">
     {% for size in sizes %}
         {% set title = 'Size ' ~ size %}
         <DocsSection title={{ title }}>

diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig
@@ -4,7 +4,7 @@
 
     <DocsSection title="Icons">
 
-        <Grid elementType="ul" cols={2} tablet={4} desktop={6} UNSAFE_className="text-center my-1000 list-unstyled">
+        <Grid elementType="ul" cols="{{ { mobile: 2, tablet: 4, desktop: 6 } }}" UNSAFE_className="text-center my-1000 list-unstyled">
 
             {% for icon in icons %}
                 <li class="mb-600">