docs(PPDSC-2705): update grid storybook scenarios (#664)

* docs(PPDSC-2705): update grid storybook scenarious * docs(PPDSC-2705): design review * docs(PPDSC-2705): update bg
newscorp-ghfb · Mar 2, 2023 · a6001bd · a6001bd
1 parent 30dfda1
commit a6001bd
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 90 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -18,8 +18,8 @@ import {
 
 const unlimitedScenarios = [
   'Accordion',
+  'Grid',
   'Paragraph',
-  'grid',
   'stack',
   'card',
   'drawer',

diff --git a/src/grid/__tests__/grid.stories.tsx b/src/grid/__tests__/grid.stories.tsx
@@ -1,21 +1,37 @@
 import * as React from 'react';
-import {styled} from '../../utils/style';
+import {
+  getColorCssFromTheme,
+  getTypographyPresetFromTheme,
+  styled,
+} from '../../utils/style';
 import {Grid, Cell} from '..';
+import {GridLayout} from '../../grid-layout';
 
 const BorderedBox = styled.div`
-  border: solid 1px red;
+  border: solid 1px;
+  ${getColorCssFromTheme('borderColor', 'interfaceBrand010')};
 `;
 
-const Content = styled.div`
-  background: silver;
+const StyledGridLayout = styled(GridLayout)`
   text-align: center;
-  padding: 20px 10px;
   box-sizing: border-box;
-  border: solid 1px black;
+  ${getColorCssFromTheme('background', 'interactivePrimary010')};
+  ${getColorCssFromTheme('color', 'inkBase')};
+  ${getTypographyPresetFromTheme('utilityLabel030')};
 `;
 
+// GridLayout is used only for centering the content verticaly
+const Content = ({children}: {children: React.ReactNode}) => (
+  <StyledGridLayout
+    overrides={{height: '100px', paddingBlock: '5px'}}
+    alignItems="center"
+  >
+    {children}
+  </StyledGridLayout>
+);
+
 export default {
-  title: 'Components/grid',
+  title: 'Components/Grid',
   component: () => 'None',
 };
 
@@ -64,122 +80,63 @@ export const StoryGridDefault = () => (
     <BorderedBox>
       <Grid>
         <Cell smHidden md={2}>
-          <Content>
-            1, 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </Content>
+          <Content>1, 2</Content>
         </Cell>
         <Cell sm={4} md={1}>
-          <Content>3 - Lorem ipsum dolor sit amet.</Content>
+          <Content>3 </Content>
         </Cell>
         <Cell sm={2} md={3}>
-          <Content>
-            4, 5, 6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </Content>
+          <Content>4, 5, 6</Content>
         </Cell>
         <Cell sm={2} md={3}>
-          <Content>
-            7, 8, 9 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </Content>
+          <Content>7, 8, 9</Content>
         </Cell>
         <Cell sm={4} md={1}>
-          <Content>10 - Lorem ipsum dolor sit amet.</Content>
+          <Content>10</Content>
         </Cell>
         <Cell smHidden md={2}>
-          <Content>
-            11, 12 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </Content>
+          <Content>11, 12</Content>
         </Cell>
       </Grid>
     </BorderedBox>
     <BorderedBox>
       <Grid>
         <Cell xs={12} sm={6} md={3} lg={2}>
-          <Content>
-            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>1</Content>
         </Cell>
         <Cell xs={12} sm={6} md={3} lg={2}>
-          <Content>
-            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>2</Content>
         </Cell>
         <Cell xs={12} sm={6} md={3} lg={2}>
-          <Content>
-            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>3</Content>
         </Cell>
         <Cell xs={12} sm={6} md={3} lg={2}>
-          <Content>
-            4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>4</Content>
         </Cell>
         <Cell xs={12} sm={6} md={3} lg={2}>
-          <Content>
-            5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>5</Content>
         </Cell>
         <Cell xs={12} sm={6} md={3} lg={2}>
-          <Content>
-            6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>6</Content>
         </Cell>
       </Grid>
     </BorderedBox>
-
     <BorderedBox>
-      <Grid
-        xsColumnGutter="space000"
-        smColumnGutter="space010"
-        mdColumnGutter="space010"
-        lgColumnGutter="space020"
-      >
+      <Grid>
         <Cell xs={4}>
-          <Content>
-            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>1</Content>
         </Cell>
         <Cell xs={4}>
-          <Content>
-            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>2</Content>
         </Cell>
         <Cell xs={4}>
-          <Content>
-            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
-            nunc nisl, lobortis ac volutpat vitae, tempus nec diam. Morbi
-            ornare, magna a dignissim dignissim, lectus lacus hendrerit lectus,
-            quis accumsan est nulla eget lacus.
-          </Content>
+          <Content>3</Content>
         </Cell>
       </Grid>
     </BorderedBox>
 
     <BorderedBox>
-      <Grid xsColumnGutter="space080">
+      <Grid>
         <Cell xs={4}>
           <Content>
             <Grid xsColumnGutter="space000" xsMargin="space000">
@@ -218,7 +175,7 @@ export const StoryGridDefault = () => (
         </Cell>
         <Cell xs={4}>
           <Content>
-            <Grid xsColumnGutter="space030">
+            <Grid xsColumnGutter="space020">
               <Cell xs={3}>
                 <BorderedBox>inner 1</BorderedBox>
               </Cell>
@@ -240,16 +197,16 @@ export const StoryGridDefault = () => (
     <BorderedBox>
       <Grid>
         <Cell xs={3} xsOrder={4} smOrder={3} mdOrder={2} lgOrder={1}>
-          <Content>1 1 1 1 1 1 1 1 1 1</Content>
+          <Content>1</Content>
         </Cell>
         <Cell xs={3} xsOrder={1} smOrder={4} mdOrder={3} lgOrder={2}>
-          <Content>2 2 2 2 2 2 2 2 2 2</Content>
+          <Content>2</Content>
         </Cell>
         <Cell xs={3} xsOrder={2} smOrder={1} mdOrder={4} lgOrder={3}>
-          <Content>3 3 3 3 3 3 3 3 3 3</Content>
+          <Content>3</Content>
         </Cell>
         <Cell xs={3} xsOrder={3} smOrder={2} mdOrder={1} lgOrder={4}>
-          <Content>4 4 4 4 4 4 4 4 4 4</Content>
+          <Content>4</Content>
         </Cell>
       </Grid>
     </BorderedBox>
@@ -329,4 +286,14 @@ export const StoryGridDefault = () => (
     </BorderedBox>
   </>
 );
-StoryGridDefault.storyName = 'grid';
+StoryGridDefault.storyName = 'Default';
+StoryGridDefault.parameters = {
+  previewTabs: {
+    'storybook/canvas/panel': {index: -1},
+    'storybook/docs/panel': {hidden: true},
+  },
+  viewMode: 'story',
+  docs: {
+    page: null,
+  },
+};