Skip to content

Commit

Permalink
docs(719): text cropping storybook (#781)
Browse files Browse the repository at this point in the history
* docs(XXXX-0000): closes 719

* docs(XXX-0000): add sort-order alphabetic

* docs(719): remove un-used comment
  • Loading branch information
mutebg authored Apr 3, 2023
1 parent 128c665 commit a6d7aeb
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 217 deletions.
45 changes: 5 additions & 40 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,6 @@ import {
createEventInstrumentation,
} from '../src/instrumentation';

const unlimitedScenarios = [
'Accordion',
'Grid',
'Paragraph',
'Stack',
'card',
'drawer',
'Form input',
'modal',
'Image',
'image-e2e',
'grid-layout',
'Popover',
'audio-player-composable',
'text-area',
'useIntersection',
];

const BackgroundColor = styled.div`
position: absolute;
top: 0;
Expand All @@ -48,17 +30,9 @@ const StoryWrapper = styled.div`
box-sizing: border-box;
`;

const Container = styled.div`
max-width: 1024px;
max-height: 768px;
overflow: hidden;
`;

const Background = ({children}) => (
<BackgroundColor>{children}</BackgroundColor>
);
const LimitSizeDecorator = ({children}) => <Container>{children}</Container>;

const NoDecorator = ({children}) => <>{children}</>;

export const parameters = {
Expand All @@ -74,6 +48,7 @@ export const parameters = {
},
options: {
storySort: {
method: 'alphabetical',
order: ['Welcome', 'Components', 'Utilities', 'Deprecated', '*'],
},
},
Expand Down Expand Up @@ -125,21 +100,11 @@ export const parameters = {
};

export const decorators = [
// Add wrapper around stories to limit their size
(Story, context) => {
const kind = context.kind.split('/')[1];
const Decorator =
unlimitedScenarios.includes(kind) ||
context.componentId === 'welcome' ||
context.componentId === 'theme-checker'
? NoDecorator
: LimitSizeDecorator;
Story => {
return (
<Decorator>
<StoryWrapper>
<Story />
</StoryWrapper>
</Decorator>
<StoryWrapper>
<Story />
</StoryWrapper>
);
},
(Story, context) => {
Expand Down
177 changes: 0 additions & 177 deletions src/typography/__tests__/presets-cropping.stories.tsx

This file was deleted.

84 changes: 84 additions & 0 deletions src/typography/__tests__/text-cropping.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {TextBlock} from '../../text-block';
import {TypographyPreset, useTheme} from '../../theme';
import {StorybookPage, StorybookCase} from '../../test/storybook-comps';
import {getColorCssFromTheme} from '../../utils';

export default {
title: 'Components/Text cropping',
component: () => 'None',
parameters: {
nkDocs: {
title: 'Text Cropping',
url: 'https://newskit.co.uk/theme/foundation/fonts/#textcrop',
description: '',
},
},
};

const StyledTextBlock = styled(TextBlock)`
${getColorCssFromTheme('backgroundColor', 'interactivePrimary010')}
`;

const renderTextBlockWithPreset = (
presetPrefix: string,
typographyPresets: Record<string, TypographyPreset>,
) => {
const presetList = Object.keys(typographyPresets).filter(preset =>
preset.startsWith(presetPrefix),
);

return presetList.map((preset: string) => (
<StorybookCase title={` ${preset}`}>
<StyledTextBlock stylePreset="inkBase" typographyPreset={preset}>
The quick brown fox
</StyledTextBlock>
</StorybookCase>
));
};

export const EditorialCropping = () => {
const {typographyPresets} = useTheme();

const presetsKeys = [
'editorialDisplay',
'editorialHeadline',
'editorialSubheadline',
'editorialParagraph',
'editorialQuote',
'editorialCaption',
'editorialLabel',
];

return (
<StorybookPage columns="1fr">
{presetsKeys.map(presetKey =>
renderTextBlockWithPreset(presetKey, typographyPresets),
)}
</StorybookPage>
);
};
EditorialCropping.storyName = 'Editorial cropping';

export const UtilityCropping = () => {
const {typographyPresets} = useTheme();

const presetsKeys = [
'utilityHeading',
'utilitySubheading',
'utilityBody',
'utilityLabel',
'utilityButton',
'utilityMeta',
];

return (
<StorybookPage columns="1fr">
{presetsKeys.map(presetKey =>
renderTextBlockWithPreset(presetKey, typographyPresets),
)}
</StorybookPage>
);
};
UtilityCropping.storyName = 'Utility cropping ';

0 comments on commit a6d7aeb

Please sign in to comment.