Merge pull request #1582 from dxc-technology/gomezivann-new-grid-docs

First version of the Grid documentation
dxc-technology · May 4, 2023 · 3de3cec · 3de3cec
2 parents f53d80b + a0ff279
commit 3de3cec
Show file tree

Hide file tree

Showing 26 changed files with 1,580 additions and 862 deletions.
diff --git a/lib/src/bleed/Bleed.stories.tsx b/lib/src/bleed/Bleed.stories.tsx
@@ -337,5 +337,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;
diff --git a/lib/src/flex/Flex.stories.tsx b/lib/src/flex/Flex.stories.tsx
@@ -14,19 +14,19 @@ export const Chromatic = () => (
     <Container>
       <DxcFlex>
         <Placeholder />
-        <Placeholder width="50px" />
+        <Placeholder minWidth="50px" />
         <Placeholder />
-        <Placeholder width="50px" />
-        <Placeholder width="50px" />
+        <Placeholder minWidth="50px" />
+        <Placeholder minWidth="50px" />
       </DxcFlex>
     </Container>
     <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
     <Container>
       <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="20px">
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
       </DxcFlex>
     </Container>
@@ -37,44 +37,44 @@ export const Chromatic = () => (
         <Placeholder />
         <Placeholder />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
       </DxcFlex>
     </Container>
     <Title title="Basis 100%, order, grow and align self" level={4} />
     <Container height="75px">
       <DxcFlex basis="100%">
         <DxcFlex order={3} grow={1} alignSelf="flex-end">
-          <PlaceholderGrowAndShrink>order 3, grow 1, align self end</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order 3, grow 1, align self end</Placeholder>
         </DxcFlex>
         <DxcFlex order={-1} grow={4}>
-          <PlaceholderGrowAndShrink>order -1, grow 4</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order -1, grow 4</Placeholder>
         </DxcFlex>
         <DxcFlex order={5} grow={1}>
-          <PlaceholderGrowAndShrink>order 5, grow 1</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order 5, grow 1</Placeholder>
         </DxcFlex>
         <DxcFlex order={2} grow={2}>
-          <PlaceholderGrowAndShrink>order 2. grow 2</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order 2. grow 2</Placeholder>
         </DxcFlex>
       </DxcFlex>
     </Container>
     <Title title="Basis and shrink" level={4} />
     <Container>
       <DxcFlex basis="600px">
         <DxcFlex shrink={4} basis="400px">
-          <PlaceholderGrowAndShrink>shrink 4</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">shrink 4</Placeholder>
         </DxcFlex>
         <DxcFlex shrink={2} basis="400px">
-          <PlaceholderGrowAndShrink>shrink 2</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">shrink 2</Placeholder>
         </DxcFlex>
         <DxcFlex shrink={1} basis="400px">
-          <PlaceholderGrowAndShrink>shrink 1</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">shrink 1</Placeholder>
         </DxcFlex>
       </DxcFlex>
     </Container>
@@ -88,16 +88,11 @@ const Container = styled.div<{ height?: string }>`
   ${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
 `;
 
-const Placeholder = styled.div<{ width?: string }>`
+const Placeholder = styled.div<{ minWidth?: string, width?: string }>`
   height: 40px;
-  min-width: ${({ width }) => width || "200px"};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;
-
-const PlaceholderGrowAndShrink = styled.div`
-  height: 40px;
-  width: 100%;
+  min-width: ${({ minWidth }) => minWidth ?? "200px"};
+  width: ${({ width }) => width};
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;
diff --git a/lib/src/grid/types.ts b/lib/src/grid/types.ts
@@ -23,23 +23,92 @@ type PlaceGeneric<PlaceValues, Element extends string> =
   | PlaceValues;
 
 export type GridItemProps = {
+  /**
+   * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
+   */
   areaName?: string;
+  /**
+   * Sets the grid-column CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+   */
   column?: number | string | GridCell;
+  /**
+   * Sets the grid-row CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+   */
   row?: number | string | GridCell;
+  /**
+   * Sets the place-self CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
+   */
   placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
+  /**
+   * Sets a custom HTML tag.
+   */
   as?: keyof HTMLElementTagNameMap;
+  /**
+   * Custom content inside the grid container.
+   */
   children: React.ReactNode;
 };
 
 type Props = GridItemProps & {
+  /**
+   * Sets the grid-auto-columns CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+   */
   autoColumns?: string;
-  autoRows?: string;
+  /**
+   * Sets the grid-auto-flow CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+   */
   autoFlow?: "row" | "column" | "row dense" | "column dense";
+  /**
+   * Sets the grid-auto-rows CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+   */
+  autoRows?: string;
+  /**
+   * Sets the gap CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+   */
   gap?: Spaces | Gap;
+  /**
+   * Sets the place-content CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
+   */
   placeContent?: PlaceGeneric<PlaceContentValues, "content">;
+  /**
+   * Sets the place-items CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
+   */
   placeItems?: PlaceGeneric<PlaceItemsValues, "items">;
+  /**
+   * Sets the grid-template-areas CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+   */
   templateAreas?: string[];
+  /**
+   * Sets the grid-template-columns CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+   */
   templateColumns?: string[];
+  /**
+   * Sets the grid-template-rows CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+   */
   templateRows?: string[];
 };
 

diff --git a/lib/src/inset/Inset.stories.tsx b/lib/src/inset/Inset.stories.tsx
@@ -225,5 +225,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;