docs: adapt components to new spacing tw classes

kiwicom · Aug 14, 2024 · e3d569e · e3d569e
1 parent e759d9c
commit e3d569e
Show file tree

Hide file tree

Showing 72 changed files with 205 additions and 271 deletions.
diff --git a/.github/contribution/testing-conventions.md b/.github/contribution/testing-conventions.md
@@ -136,7 +136,7 @@ import { Component } from ".";
 
 export function TestComponentStory() {
   return (
-    <div className="p-xss inline-block">
+    <div className="p-100 inline-block">
       <Component
         icon={<Icons.Airplane />}
         title="Lorem ipsum dolor"

diff --git a/docs/src/__examples__/Alert/ACTIONS_SIDEBYSIDE.tsx b/docs/src/__examples__/Alert/ACTIONS_SIDEBYSIDE.tsx
@@ -3,10 +3,10 @@ import { Heading, Stack, Alert, AlertButton } from "@kiwicom/orbit-components";
 
 export default {
   Example: () => (
-    <Stack shrink direction="column" spacing="XSmall">
+    <Stack shrink direction="column" spacing="200">
       <Heading type="title5">Type: Success</Heading>
       <Alert type="success" title="Your payment was successful." icon>
-        <Stack flex spacing="XSmall">
+        <Stack flex spacing="200">
           <AlertButton type="success">Success</AlertButton>
           <AlertButton type="successSubtle">Success</AlertButton>
         </Stack>

diff --git a/docs/src/__examples__/Box/DEFAULT.tsx b/docs/src/__examples__/Box/DEFAULT.tsx
@@ -3,7 +3,7 @@ import { Box } from "@kiwicom/orbit-components";
 
 export default {
   Example: () => (
-    <Box background="blueDark" textAlign="center" color="white" padding="large" maxWidth="300px">
+    <Box background="blueDark" textAlign="center" color="white" padding="600" maxWidth="300px">
       Text
     </Box>
   ),
@@ -19,18 +19,8 @@ export default {
         {
           name: "padding",
           type: "select",
-          defaultValue: "large",
-          options: [
-            "none",
-            "XXXSmall",
-            "XXSmall",
-            "small",
-            "medium",
-            "large",
-            "XLarge",
-            "XXLarge",
-            "XXXLarge",
-          ],
+          defaultValue: "600",
+          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
         },
         {
           name: "display",
@@ -307,17 +297,7 @@ export default {
         {
           name: "spacing",
           type: "select",
-          options: [
-            "none",
-            "XXXSmall",
-            "XXSmall",
-            "small",
-            "medium",
-            "large",
-            "XLarge",
-            "XXLarge",
-            "XXXLarge",
-          ],
+          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
           defaultValue: "",
         },
       ],

diff --git a/docs/src/__examples__/Card/EXPAND_UNCONTROLLED.tsx b/docs/src/__examples__/Card/EXPAND_UNCONTROLLED.tsx
@@ -13,7 +13,7 @@ export default {
     <OrbitProvider theme={defaultTheme} useId={React.useId}>
       <Card title="Passenger info">
         <CardSection expandable title="Yasmin Karenth">
-          <Stack direction="column" spacing="XSmall">
+          <Stack direction="column" spacing="200">
             <Text type="secondary">January 20, 1978</Text>
             <Text type="secondary">[email protected]</Text>
           </Stack>

diff --git a/docs/src/__examples__/CarrierLogo/ACCESSIBILITY.tsx b/docs/src/__examples__/CarrierLogo/ACCESSIBILITY.tsx
@@ -14,7 +14,7 @@ export default {
             },
           ]}
         />
-        <Stack direction="row" spacing="XXSmall" align="center">
+        <Stack direction="row" spacing="100" align="center">
           <CarrierLogo
             carriers={[
               {

diff --git a/docs/src/__examples__/CountryFlag/ACCESSIBILITY.tsx b/docs/src/__examples__/CountryFlag/ACCESSIBILITY.tsx
@@ -5,7 +5,7 @@ export default {
   Example: () => (
     <Stack direction="column">
       <CountryFlag code="cz" name="Czech Republic" />
-      <Stack direction="row" spacing="XXSmall" align="center">
+      <Stack direction="row" spacing="100" align="center">
         <CountryFlag name="" code="cz" />
         <Text>Czech Republic</Text>
       </Stack>

diff --git a/docs/src/__examples__/HorizontalScroll/default.tsx b/docs/src/__examples__/HorizontalScroll/default.tsx
@@ -78,17 +78,7 @@ export default {
         {
           name: "spacing",
           type: "select",
-          options: [
-            "none",
-            "XXXSmall",
-            "XXSmall",
-            "XSmall",
-            "small",
-            "medium",
-            "large",
-            "XLarge",
-            "XXLarge",
-          ],
+          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
           defaultValue: "none",
         },
       ],

diff --git a/docs/src/__examples__/Illustration/SIZES.tsx b/docs/src/__examples__/Illustration/SIZES.tsx
@@ -5,7 +5,7 @@ import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
 export default {
   Example: () => (
     <Stack>
-      <Stack spacing="XXSmall">
+      <Stack spacing="100">
         <Heading as="h3" type="title3">
           Extra small
         </Heading>
@@ -16,7 +16,7 @@ export default {
           name="PriorityBoarding"
         />
       </Stack>
-      <Stack spacing="XXSmall">
+      <Stack spacing="100">
         <Heading as="h3" type="title3">
           Small
         </Heading>
@@ -27,7 +27,7 @@ export default {
           name="PriorityBoarding"
         />
       </Stack>
-      <Stack spacing="XXSmall">
+      <Stack spacing="100">
         <Heading as="h3" type="title3">
           Medium
         </Heading>
@@ -38,7 +38,7 @@ export default {
           name="PriorityBoarding"
         />
       </Stack>
-      <Stack spacing="XXSmall">
+      <Stack spacing="100">
         <Heading as="h3" type="title3">
           Large
         </Heading>
@@ -49,7 +49,7 @@ export default {
           name="PriorityBoarding"
         />
       </Stack>
-      <Stack spacing="XXSmall">
+      <Stack spacing="100">
         <Heading as="h3" type="title3">
           Display
         </Heading>

diff --git a/docs/src/__examples__/Inline/default.tsx b/docs/src/__examples__/Inline/default.tsx
@@ -9,7 +9,7 @@ export default {
     };
 
     return (
-      <Inline spacing="medium">
+      <Inline spacing="400">
         <div style={{ ...height, width: "140px", background: defaultTheme.orbit.paletteInkDark }} />
         <div
           style={{
@@ -52,19 +52,8 @@ export default {
         {
           name: "spacing",
           type: "select",
-          options: [
-            "none",
-            "XXXSmall",
-            "XXSmall",
-            "XSmall",
-            "small",
-            "medium",
-            "large",
-            "XLarge",
-            "XXLarge",
-            "XXXLarge",
-          ],
-          defaultValue: "medium",
+          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
+          defaultValue: "400",
         },
       ],
     },

diff --git a/docs/src/__examples__/InputFile/button_label.tsx b/docs/src/__examples__/InputFile/button_label.tsx
@@ -7,7 +7,7 @@ export default {
     const [statementName, setStatementName] = React.useState("");
     const fileTypes = ".png,.jpg,.jpeg,.webp";
     return (
-      <Stack spacing="XLarge">
+      <Stack spacing="800">
         <InputFile
           buttonLabel="Select photo"
           label="Profile photo"

diff --git a/docs/src/__examples__/LinkList/DEFAULT.tsx b/docs/src/__examples__/LinkList/DEFAULT.tsx
@@ -45,18 +45,8 @@ export default {
         {
           name: "spacing",
           type: "select",
-          defaultValue: "medium",
-          options: [
-            "none",
-            "XXXSmall",
-            "XXSmall",
-            "XSmall",
-            "small",
-            "medium",
-            "large",
-            "XLarge",
-            "XXLarge",
-          ],
+          defaultValue: "400",
+          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
         },
       ],
     },

diff --git a/docs/src/__examples__/Modal/FIXED_FOOTER.tsx b/docs/src/__examples__/Modal/FIXED_FOOTER.tsx
@@ -36,11 +36,11 @@ export default {
               <Card>
                 <CardSection
                   title={
-                    <Stack direction="row" spacing="XSmall" align="center">
+                    <Stack direction="row" spacing="200" align="center">
                       <Box>
                         <CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
                       </Box>
-                      <Stack direction="row" spacing="XXSmall" align="center">
+                      <Stack direction="row" spacing="100" align="center">
                         <Text weight="bold">Cairo CAI</Text>
                         <FlightDirect size="small" />
                         <Text weight="bold">Dubai SHJ</Text>
@@ -55,11 +55,11 @@ export default {
                 />
                 <CardSection
                   title={
-                    <Stack direction="row" spacing="XSmall" align="center">
+                    <Stack direction="row" spacing="200" align="center">
                       <Box>
                         <CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
                       </Box>
-                      <Stack direction="row" spacing="XXSmall" align="center">
+                      <Stack direction="row" spacing="100" align="center">
                         <Text weight="bold">Dubai SHJ</Text>
                         <FlightDirect size="small" />
                         <Text weight="bold">Mumbai BOM</Text>
@@ -74,11 +74,11 @@ export default {
                 />
                 <CardSection
                   title={
-                    <Stack direction="row" spacing="XSmall" align="center">
+                    <Stack direction="row" spacing="200" align="center">
                       <Box>
                         <CarrierLogo carriers={[{ code: "G8", name: "Go Air" }]} size="large" />
                       </Box>
-                      <Stack direction="row" spacing="XXSmall" align="center">
+                      <Stack direction="row" spacing="100" align="center">
                         <Text weight="bold">Mumbai BOM</Text>
                         <FlightDirect size="small" />
                         <Text weight="bold">Malé MLE</Text>
@@ -102,11 +102,11 @@ export default {
               <Card>
                 <CardSection
                   title={
-                    <Stack direction="row" spacing="XSmall" align="center">
+                    <Stack direction="row" spacing="200" align="center">
                       <Box>
                         <CarrierLogo carriers={[{ code: "G8", name: "Go Air" }]} size="large" />
                       </Box>
-                      <Stack direction="row" spacing="XXSmall" align="center">
+                      <Stack direction="row" spacing="100" align="center">
                         <Text weight="bold">Malé MLE</Text>
                         <FlightDirect size="small" />
                         <Text weight="bold">Mumbai BOM</Text>
@@ -121,11 +121,11 @@ export default {
                 />
                 <CardSection
                   title={
-                    <Stack direction="row" spacing="XSmall" align="center">
+                    <Stack direction="row" spacing="200" align="center">
                       <Box>
                         <CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
                       </Box>
-                      <Stack direction="row" spacing="XXSmall" align="center">
+                      <Stack direction="row" spacing="100" align="center">
                         <Text weight="bold">Mumbai BOM</Text>
                         <FlightDirect size="small" />
                         <Text weight="bold">Dubai SHJ</Text>
@@ -140,11 +140,11 @@ export default {
                 />
                 <CardSection
                   title={
-                    <Stack direction="row" spacing="XSmall" align="center">
+                    <Stack direction="row" spacing="200" align="center">
                       <Box>
                         <CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
                       </Box>
-                      <Stack direction="row" spacing="XXSmall" align="center">
+                      <Stack direction="row" spacing="100" align="center">
                         <Text weight="bold">Dubai SHJ</Text>
                         <FlightDirect size="small" />
                         <Text weight="bold">Cairo CAI</Text>

diff --git a/docs/src/__examples__/Popover/DEFAULT.tsx b/docs/src/__examples__/Popover/DEFAULT.tsx
@@ -15,7 +15,7 @@ export default {
       <Popover
         renderInPortal={false}
         content={
-          <Stack spacing="small">
+          <Stack spacing="300">
             <ButtonLink
               external
               type="secondary"

diff --git a/docs/src/__examples__/Popover/TRIGGER.tsx b/docs/src/__examples__/Popover/TRIGGER.tsx
@@ -15,7 +15,7 @@ export default {
       <Popover
         renderInPortal={false}
         content={
-          <Stack spacing="small">
+          <Stack spacing="300">
             <ButtonLink
               external
               type="secondary"

diff --git a/docs/src/__examples__/Separator/DEFAULT.tsx b/docs/src/__examples__/Separator/DEFAULT.tsx
@@ -55,7 +55,7 @@ export default {
           name: "sideOffset",
           type: "select",
           defaultValue: "none",
-          options: ["none", "small", "medium", "large", "XLarge", "XXLarge"],
+          options: ["none", "300", "400", "600", "800", "1000"],
         },
         {
           name: "align",

diff --git a/docs/src/__examples__/SkipLink/DEFAULT.tsx b/docs/src/__examples__/SkipLink/DEFAULT.tsx
@@ -17,14 +17,14 @@ export default {
         ]}
       />
       <Stack>
-        <Stack spacing="small">
+        <Stack spacing="300">
           <Heading id="how-to">How to see the links</Heading>
           <Text>
             To see the links, click in this container. Then use Tab or Shift+Tab to focus on the
             links.
           </Text>
         </Stack>
-        <Stack spacing="small">
+        <Stack spacing="300">
           <Heading id="skiplink">SkipLink</Heading>
           <Text>
             When designing with accessibility in mind, it&apos;s important to remember that not
@@ -44,7 +44,7 @@ export default {
             at the start, consider a SkipNavigation component.
           </Text>
         </Stack>
-        <Stack spacing="small">
+        <Stack spacing="300">
           <Heading id="WCAG">Web Content Accessibility Guidelines</Heading>
           <Text>
             The Web Content Accessibility Guidelines (WCAG) offer advice and information on making

diff --git a/docs/src/__examples__/SkipNavigation/DEFAULT.tsx b/docs/src/__examples__/SkipNavigation/DEFAULT.tsx
@@ -16,7 +16,7 @@ export default {
     <OrbitProvider theme={defaultTheme} useId={React.useId}>
       <SkipNavigation />
       <Stack>
-        <Stack spacing="small">
+        <Stack spacing="300">
           <Heading dataA11ySection="how-to">How to see the links</Heading>
           <Text>
             To see the links, click in this container. Then use Tab or Shift+Tab to focus on the
@@ -45,7 +45,7 @@ export default {
             <TextLink href="https://orbit.kiwi/accessibility/skiplink/">skip link</TextLink>.
           </CardSection>
         </Card>
-        <Stack spacing="small">
+        <Stack spacing="300">
           <Heading dataA11ySection="WCAG">Web Content Accessibility Guidelines</Heading>
           <Text>
             The Web Content Accessibility Guidelines (WCAG) offer advice and information on making

diff --git a/docs/src/__examples__/Stack/DEFAULT.tsx b/docs/src/__examples__/Stack/DEFAULT.tsx
@@ -78,18 +78,8 @@ export default {
         {
           name: "spacing",
           type: "select",
-          defaultValue: "medium",
-          options: [
-            "none",
-            "XXXSmall",
-            "XXSmall",
-            "XSmall",
-            "small",
-            "medium",
-            "large",
-            "XLarge",
-            "XXLarge",
-          ],
+          defaultValue: "400",
+          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
         },
       ],
     },