Docs(web-twig): Use spacing style props in all components #DS-1109

lmc-eu · Jan 23, 2024 · 3692198 · 3692198
1 parent 78a697e
commit 3692198
Show file tree

Hide file tree

Showing 13 changed files with 19 additions and 19 deletions.
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </Button>
                     <Button color={ color } size={ size }>
-                        <Icon name="hamburger" UNSAFE_className="mr-400" />
+                        <Icon name="hamburger" marginRight="space-400" />
                         Menu
                     </Button>
                     <Button color={ color } size={ size } isSquare>

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </Button>
                     <Button color={ color } size={ size } isDisabled>
-                        <Icon name="hamburger" UNSAFE_className="mr-400" />
+                        <Icon name="hamburger" marginRight="space-400" />
                         Menu
                     </Button>
                     <Button color={ color } size={ size } isDisabled isSquare>

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </Button>
                     <Button color={ color } size={ size } isLoading>
-                        <Icon name="hamburger" UNSAFE_className="mr-400" />
+                        <Icon name="hamburger" marginRight="space-400" />
                         Menu
                     </Button>
                     <Button color={ color } size={ size } isLoading isSquare>

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#">
-                        <Icon name="link" UNSAFE_className="mr-400" />
+                        <Icon name="link" marginRight="space-400" />
                         Menu
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#" isSquare>

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#" isDisabled>
-                        <Icon name="link" UNSAFE_className="mr-400" />
+                        <Icon name="link" marginRight="space-400" />
                         Menu
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#" isDisabled isSquare>

diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownPlacements.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownPlacements.twig
@@ -1,5 +1,5 @@
 <form autocomplete="off">
-    <Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 40rem;">
+    <Grid cols="3" marginX="auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 40rem;">
         <GridItem columnStart="2" rowStart="1">
 
             <Radio name="placement" isLabelHidden value="topLeft" id="placement_top_left" label="top-left"/>

diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig
@@ -4,6 +4,6 @@
         {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
     </Header>
 
-    <Heading elementType="div" size="large" UNSAFE_className="text-center mb-1200">Example Cover</Heading>
+    <Heading elementType="div" size="large" marginBottom="space-1200" UNSAFE_className="text-center">Example Cover</Heading>
 
 </div>
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
@@ -28,9 +28,9 @@
             <!-- Footer alignment demo: start -->
             <form onchange="setFooterAlignment(event, '#example-basic .ModalFooter')" class="d-none d-tablet-block">
                 <div>Footer alignment (from tablet up):</div>
-                <Radio id="footer-alignment-left" UNSAFE_className="mr-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
-                <Radio id="footer-alignment-center" UNSAFE_className="mr-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
-                <Radio id="footer-alignment-right" UNSAFE_className="mr-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
+                <Radio id="footer-alignment-left" marginRight="space-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
+                <Radio id="footer-alignment-center" marginRight="space-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
+                <Radio id="footer-alignment-right" marginRight="space-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
             </form>
             <form class="d-tablet-none">
                 <Checkbox id="expand-on-mobile" label="Expand on mobile" value="right" onchange="toggleExpandOnMobile('#example-basic .ModalDialog')" autocomplete="off" isChecked />
@@ -70,7 +70,7 @@
         <ModalBody>
 
             <!-- Content: start -->
-            <TextField UNSAFE_className="mb-400" label="Label" id="textfield" placeholder="TextField" />
+            <TextField marginBottom="space-400" label="Label" id="textfield" placeholder="TextField" />
             <p>
                 The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
             </p>

diff --git a/...es/web-twig/src/Resources/components/ScrollView/stories/ScrollViewHorizontalBreakout.twig b/...es/web-twig/src/Resources/components/ScrollView/stories/ScrollViewHorizontalBreakout.twig
@@ -4,7 +4,7 @@
         direction="horizontal"
         data-spirit-toggle="scrollView"
     >
-        <Grid cols="4" UNSAFE_className="mb-700" UNSAFE_style="padding-inline: var(--container-padding-inline)">
+        <Grid cols="4" marginBottom="space-700" UNSAFE_style="padding-inline: var(--container-padding-inline)">
             {% for i in 1..4 %}
                 <DocsBox size="small" UNSAFE_style="width: 20rem; aspect-ratio: 2/1">1/4</DocsBox>
             {% endfor %}

diff --git a/...es/web-twig/src/Resources/components/ScrollView/stories/ScrollViewOverflowDecorators.twig b/...es/web-twig/src/Resources/components/ScrollView/stories/ScrollViewOverflowDecorators.twig
@@ -15,7 +15,7 @@
     direction="horizontal"
     overflowDecorators="borders"
     data-spirit-toggle="scrollView"
-    UNSAFE_className="mb-1000"
+    marginBottom="space-1000"
 >
     <p class="py-700" style="white-space: nowrap">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
@@ -1,5 +1,5 @@
 <div>
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" UNSAFE_className="TooltipTarget">
             Tooltip on top
         </ButtonLink>
@@ -8,7 +8,7 @@
         </Tooltip>
     </TooltipWrapper>
 
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" UNSAFE_className="TooltipTarget">
             Tooltip on right
         </ButtonLink>
@@ -17,7 +17,7 @@
         </Tooltip>
     </TooltipWrapper>
 
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" UNSAFE_className="TooltipTarget">
             Tooltip on bottom
         </ButtonLink>
@@ -26,7 +26,7 @@
         </Tooltip>
     </TooltipWrapper>
 
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" UNSAFE_className="TooltipTarget">
             Tooltip on left
         </ButtonLink>

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -1,5 +1,5 @@
 <form autocomplete="off">
-    <Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
+    <Grid cols="3" marginX="auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
         <GridItem columnStart="2" rowStart="1">
 
             <Radio name="placement" isLabelHidden value="top-start" id="placement_top_start" label="top-left"/>

diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig
@@ -10,7 +10,7 @@
                 <li class="mb-600">
                     <Icon name={{ icon }} />
 
-                    <Text UNSAFE_className="mt-500" emphasis="bold">{{ icon }}</Text>
+                    <Text marginTop="space-500" emphasis="bold">{{ icon }}</Text>
                 </li>
             {% endfor %}