Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Mar 22, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c68d9a
docs(PPDSC-2692): update date-time stories
Mar 17, 2023
b728b7c
docs(PPDSC-2692): fix url in docs
Mar 20, 2023
cc6eb2a
Merge branch 'main' into docs/PPDSC-2692-date-time-stories
mutebg Mar 21, 2023
3c923d6
Merge branch 'main' into docs/PPDSC-2692-date-time-stories
mutebg Mar 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/pages/components/date-time.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}}
Expand Down
178 changes: 107 additions & 71 deletions src/date-time/__tests__/date-time.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
),
],
};