add width docs to box component (#17007)

* add width docs to box component

ui/components/ui/box/README.mdx

@@ -289,3 +289,95 @@ import Box from '../../ui/box';
 <Box as="button">button</Box>
 <Box as="header">header</Box>
 ```
+
+### Width
+
+Use the `width` prop to pass a singular `BLOCK_SIZES` or for a responsive width pass an array up to 4 `BLOCK_SIZES`
+
+Responsive widths go from smallest to largest screen sizes
+
+Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BLOCK_SIZES.THREE_SIXTHS]
+
+- BLOCK_SIZES.HALF is the default width for `base screen size (0px)` and up
+- BLOCK_SIZES.THREE_FOURTHS is the width for `small screen size (576px) ` and up
+- BLOCK_SIZES.ONE_FIFTH is the width for `medium screen size (768px)` and up
+- BLOCK_SIZES.THREE_SIXTHS is the width for `large screen size (1280px)` and up
+
+<Canvas>
+  <Story id="ui-components-ui-box-box-stories-js--width" />
+</Canvas>
+
+```jsx
+import {
+  BLOCK_SIZES,
+  DISPLAY,
+  FLEX_WRAP,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box';
+
+<>
+  <p>Static widths</p>
+
+  <Box display={DISPLAY.FLEX}>
+    <Box width={BLOCK_SIZES.FULL}>BLOCK_SIZES.FULL</Box>
+    <Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
+    <Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
+    <Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
+    <Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
+    <Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
+    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
+    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
+    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
+    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
+  </Box>
+
+  <p>Responsive widths</p>
+
+  <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}>
+    <Box
+      width={[
+        BLOCK_SIZES.FULL,
+        BLOCK_SIZES.HALF,
+        BLOCK_SIZES.ONE_THIRD,
+        BLOCK_SIZES.ONE_FOURTH,
+      ]}
+    >
+      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+      BLOCK_SIZES.ONE_FOURTH,
+    </Box>
+    <Box
+      width={[
+        BLOCK_SIZES.FULL,
+        BLOCK_SIZES.HALF,
+        BLOCK_SIZES.ONE_THIRD,
+        BLOCK_SIZES.ONE_FOURTH,
+      ]}
+    >
+      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+      BLOCK_SIZES.ONE_FOURTH,
+    </Box>
+    <Box
+      width={[
+        BLOCK_SIZES.FULL,
+        BLOCK_SIZES.HALF,
+        BLOCK_SIZES.ONE_THIRD,
+        BLOCK_SIZES.ONE_FOURTH,
+      ]}
+    >
+      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+      BLOCK_SIZES.ONE_FOURTH,
+    </Box>
+    <Box
+      width={[
+        BLOCK_SIZES.FULL,
+        BLOCK_SIZES.HALF,
+        BLOCK_SIZES.ONE_THIRD,
+        BLOCK_SIZES.ONE_FOURTH,
+      ]}
+    >
+      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+      BLOCK_SIZES.ONE_FOURTH,
+    </Box>
+  </Box>
+</>;
+```

ui/components/ui/box/box.scss

@@ -230,26 +230,11 @@ $attributesToApplyExtraProperties: margin;
   &--width-full {
     width: 100%;
   }
-  // breakpoint classes
-  @each $breakpoint, $min-width in $screen-sizes-map {
-    @media screen and (min-width: $min-width) {
-      &--#{$breakpoint}\:width-full {
-        width: 100%;
-      }
-    }
-  }
+
 
   &--height-full {
     height: 100%;
   }
-  // breakpoint classes
-  @each $breakpoint, $min-width in $screen-sizes-map {
-    @media screen and (min-width: $min-width) {
-      &--#{$breakpoint}\:height-full {
-        height: 100%;
-      }
-    }
-  }
 
   @each $fraction, $value in design-system.$fractions {
     &--width-#{$fraction} {
@@ -274,6 +259,24 @@ $attributesToApplyExtraProperties: margin;
     }
   }
 
+  // breakpoint classes
+  @each $breakpoint, $min-width in $screen-sizes-map {
+    @media screen and (min-width: $min-width) {
+      &--#{$breakpoint}\:width-full {
+        width: 100%;
+      }
+    }
+  }
+
+  // breakpoint classes
+  @each $breakpoint, $min-width in $screen-sizes-map {
+    @media screen and (min-width: $min-width) {
+      &--#{$breakpoint}\:height-full {
+        height: 100%;
+      }
+    }
+  }
+
   &--height-screen {
     height: 100vh;
   }

ui/components/ui/box/box.stories.js

@@ -67,7 +67,7 @@ export default {
     },
     width: {
       options: Object.values(BLOCK_SIZES),
-      control: 'select',
+      control: 'multi-select',
       table: { category: 'display' },
     },
     height: {
@@ -712,3 +712,275 @@ export const As = (args) => {
     </>
   );
 };
+
+export const Width = (args) => {
+  const getColumns = () => {
+    const content = [];
+    for (let i = 0; i < 12; i++) {
+      content.push(
+        <Box
+          key={i}
+          backgroundColor={
+            i % 2 === 0 ? COLORS.ERROR_MUTED : COLORS.WARNING_MUTED
+          }
+          width={BLOCK_SIZES.ONE_TWELFTH}
+        ></Box>,
+      );
+    }
+    return content;
+  };
+
+  return (
+    <>
+      <p>
+        <b>Working demo</b>
+      </p>
+
+      <Box
+        borderColor={COLORS.BORDER_MUTED}
+        borderWidth={6}
+        marginBottom={6}
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+        {...args}
+      >
+        {args.width.map((item, i) => {
+          return `${item} ${args.width.length === i + 1 ? '' : ', '}`;
+        })}
+      </Box>
+
+      <p>
+        <b>Static widths</b>
+      </p>
+      <Box
+        display={DISPLAY.FLEX}
+        borderColor={COLORS.BACKGROUND_ALTERNATIVE}
+        style={{
+          height: '100vh',
+          position: 'relative',
+        }}
+        marginBottom={6}
+      >
+        {getColumns()}
+
+        <Box
+          width={BLOCK_SIZES.FULL}
+          display={DISPLAY.FLEX}
+          flexWrap={FLEX_WRAP.WRAP}
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            marginBottom={6}
+            width={BLOCK_SIZES.FULL}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.FULL
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            marginBottom={6}
+            width={BLOCK_SIZES.HALF}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.HALF
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            marginBottom={6}
+            width={BLOCK_SIZES.HALF}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.HALF
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            marginBottom={6}
+            width={BLOCK_SIZES.ONE_THIRD}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_THIRD
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            marginBottom={6}
+            width={BLOCK_SIZES.ONE_THIRD}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_THIRD
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            marginBottom={6}
+            width={BLOCK_SIZES.ONE_THIRD}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_THIRD
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={BLOCK_SIZES.ONE_FOURTH}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_FOURTH
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={BLOCK_SIZES.ONE_FOURTH}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_FOURTH
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={BLOCK_SIZES.ONE_FOURTH}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_FOURTH
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={BLOCK_SIZES.ONE_FOURTH}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.ONE_FOURTH
+          </Box>
+        </Box>
+      </Box>
+      <p>
+        <b>Responsive widths</b>
+      </p>
+      <Box
+        display={DISPLAY.FLEX}
+        borderColor={COLORS.BACKGROUND_ALTERNATIVE}
+        style={{ height: '100vh', position: 'relative', textAlign: 'center' }}
+      >
+        {getColumns()}
+
+        <Box
+          width={BLOCK_SIZES.FULL}
+          display={DISPLAY.FLEX}
+          flexWrap={FLEX_WRAP.WRAP}
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={[
+              BLOCK_SIZES.FULL,
+              BLOCK_SIZES.HALF,
+              BLOCK_SIZES.ONE_THIRD,
+              BLOCK_SIZES.ONE_FOURTH,
+            ]}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+            BLOCK_SIZES.ONE_FOURTH,
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={[
+              BLOCK_SIZES.FULL,
+              BLOCK_SIZES.HALF,
+              BLOCK_SIZES.ONE_THIRD,
+              BLOCK_SIZES.ONE_FOURTH,
+            ]}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+            BLOCK_SIZES.ONE_FOURTH,
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={[
+              BLOCK_SIZES.FULL,
+              BLOCK_SIZES.HALF,
+              BLOCK_SIZES.ONE_THIRD,
+              BLOCK_SIZES.ONE_FOURTH,
+            ]}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+            BLOCK_SIZES.ONE_FOURTH,
+          </Box>
+          <Box
+            borderColor={COLORS.BORDER_MUTED}
+            borderWidth={6}
+            width={[
+              BLOCK_SIZES.FULL,
+              BLOCK_SIZES.HALF,
+              BLOCK_SIZES.ONE_THIRD,
+              BLOCK_SIZES.ONE_FOURTH,
+            ]}
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
+            BLOCK_SIZES.ONE_FOURTH,
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+Width.args = {
+  width: [
+    BLOCK_SIZES.HALF,
+    BLOCK_SIZES.ONE_FIFTH,
+    BLOCK_SIZES.THREE_FOURTHS,
+    BLOCK_SIZES.ONE_FOURTH,
+  ],
+};