docs(PPDSC-2692): update date-time stories (#713)

* docs(PPDSC-2692): update date-time stories * docs(PPDSC-2692): fix url in docs
newscorp-ghfb · Mar 22, 2023 · a90af6d · a90af6d
1 parent 22b32d4
commit a90af6d
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 72 deletions.
diff --git a/site/pages/components/date-time.tsx b/site/pages/components/date-time.tsx
@@ -35,7 +35,7 @@ const DateTimeComponent = (layoutProps: LayoutProps) => (
       introduced: 'v0.18.0',
       codeUrl:
         'https://github.com/newscorp-ghfb/newskit/tree/main/src/date-time',
-      storybookId: 'components-date-time--story-date-time',
+      storybookId: 'components-date-time--story-date-time-default',
       figmaUrl:
         'https://www.figma.com/file/FSbCQa6SzVR3K48ZWLeD77/%F0%9F%9F%A2-NK-Web-Components?node-id=2057%3A5&t=iP77Jd8O6cCJYM4p-1',
     }}

diff --git a/src/date-time/__tests__/date-time.stories.tsx b/src/date-time/__tests__/date-time.stories.tsx
@@ -1,90 +1,110 @@
 import * as React from 'react';
+import {Story as StoryType} from '@storybook/react';
 import {DateTime} from '..';
-import {
-  StorybookHeading,
-  StorybookSubHeading,
-} from '../../test/storybook-comps';
+import {StorybookPage, StorybookCase} from '../../test/storybook-comps';
+import {ThemeProvider} from '../../theme';
+
 import {styled} from '../../utils';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
 
 const StyledDiv = styled.div`
   border: 1px red dotted;
 `;
 
-export const StoryDateTime = () => (
-  <>
-    <StorybookHeading>DateTime</StorybookHeading>
-    <StorybookSubHeading>default</StorybookSubHeading>
-    <DateTime date="2017-01-01T04:32:00.000Z" />
-    <StorybookSubHeading>with prefix</StorybookSubHeading>
-    <DateTime date="2017-01-01T04:32:00.000Z" prefix="Updated:" />
-    <StorybookSubHeading>with suffix</StorybookSubHeading>
-    <DateTime date="2017-01-01T04:32:00.000Z" suffix="The Times" />
-    <StorybookSubHeading>with prefix and suffix</StorybookSubHeading>
-    <DateTime
-      date="2017-01-01T04:32:00.000Z"
-      suffix="The Times"
-      prefix="Updated:"
-    />
-    <hr />
-    <StorybookHeading>DateTime with overrides</StorybookHeading>
-    <StorybookSubHeading>on prefix</StorybookSubHeading>
-    <DateTime
-      date="2017-01-01T04:32:00.000Z"
-      prefix="Updated:"
-      overrides={{
-        typographyPreset: 'utilityLabel010',
-        stylePreset: 'inkBrand010',
-        prefix: {
-          typographyPreset: 'utilityLabel020',
-          stylePreset: 'inkBrand010',
-        },
-      }}
-    />
-    <StorybookSubHeading>on suffix</StorybookSubHeading>
-    <DateTime
-      date="2017-01-01T04:32:00.000Z"
-      suffix="The Times"
-      overrides={{
-        typographyPreset: 'utilityLabel010',
-        stylePreset: 'inkBrand010',
-        suffix: {
-          typographyPreset: 'utilityLabel020',
-          stylePreset: 'inkBrand010',
-        },
-      }}
-    />
-    <StorybookSubHeading>on prefix and suffix</StorybookSubHeading>
-    <DateTime
-      date="2017-01-01T04:32:00.000Z"
-      suffix="The Times"
-      prefix="Updated:"
-      overrides={{
-        typographyPreset: 'utilityLabel010',
-        stylePreset: 'inkBrand010',
-        prefix: {
-          typographyPreset: 'utilityLabel020',
-          stylePreset: 'inkBrand010',
-        },
-        suffix: {
-          typographyPreset: 'utilityLabel020',
+const date = '2017-01-01T04:32:00.000Z'; // new Date().toISOString();
+
+export const StoryDateTimeDefault = () => (
+  <StorybookPage>
+    <StorybookCase title="">
+      <DateTime date={date} />
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryDateTimeDefault.storyName = 'Default';
+
+export const StoryDateTimeVariations = () => (
+  <StorybookPage>
+    <StorybookCase title="Prefix">
+      <DateTime date={date} prefix="Updated:" />
+    </StorybookCase>
+    <StorybookCase title="Suffix">
+      <DateTime date={date} suffix="The Times" />
+    </StorybookCase>
+    <StorybookCase title="Prefix and suffix">
+      <DateTime date={date} prefix="Updated:" suffix="The Times" />
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryDateTimeVariations.storyName = 'Variations';
+
+export const StoryDateTimeLogicalProps = () => (
+  <StorybookPage>
+    <StorybookCase title="Prefix and suffix">
+      <StyledDiv>
+        <DateTime
+          date={date}
+          prefix="Updated:"
+          suffix="The Times"
+          overrides={{paddingInline: 'space050'}}
+        />
+      </StyledDiv>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryDateTimeLogicalProps.storyName = 'Logical props';
+
+export const StoryDateTimeOverrides = () => (
+  <StorybookPage>
+    <StorybookCase title="Prefix">
+      <DateTime
+        date={date}
+        prefix="Updated:"
+        overrides={{
           stylePreset: 'inkBrand010',
-        },
-      }}
-    />
-    <StorybookSubHeading>with logical props</StorybookSubHeading>
-    <StyledDiv>
+          typographyPreset: 'utilityMeta020',
+          prefix: {
+            typographyPreset: 'utilityButton030',
+            stylePreset: 'inkBrand010',
+          },
+        }}
+      />
+    </StorybookCase>
+    <StorybookCase title="Suffix">
       <DateTime
-        date="2017-01-01T04:32:00.000Z"
+        date={date}
         suffix="The Times"
+        overrides={{
+          stylePreset: 'inkBrand010',
+          typographyPreset: 'utilityMeta020',
+          suffix: {
+            typographyPreset: 'utilityButton030',
+            stylePreset: 'inkBrand010',
+          },
+        }}
+      />
+    </StorybookCase>
+    <StorybookCase title="Prefix and suffix">
+      <DateTime
+        date={date}
         prefix="Updated:"
+        suffix="The Times"
         overrides={{
-          marginInlineStart: 'space050',
+          stylePreset: 'inkBrand010',
+          typographyPreset: 'utilityMeta020',
+          prefix: {
+            typographyPreset: 'utilityButton030',
+            stylePreset: 'inkBrand010',
+          },
+          suffix: {
+            typographyPreset: 'utilityButton030',
+            stylePreset: 'inkBrand010',
+          },
         }}
       />
-    </StyledDiv>
-  </>
+    </StorybookCase>
+  </StorybookPage>
 );
-StoryDateTime.storyName = 'date-time';
+StoryDateTimeOverrides.storyName = 'Styling overrides';
 
 export default {
   title: 'Components/Date Time',
@@ -97,4 +117,20 @@ export default {
         'The date time component is a styled, HTML5 time element for displaying date and time.',
     },
   },
+  decorators: [
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
+      <ThemeProvider
+        theme={createCustomThemeWithBaseThemeSwitch(
+          context?.globals?.backgrounds?.value,
+          {},
+          context?.name,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 };