docs(719): text cropping storybook

.storybook/preview.js

@@ -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;
@@ -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 = {
@@ -74,6 +48,7 @@ export const parameters = {
   },
   options: {
     storySort: {
+      method: 'alphabetical',
       order: ['Welcome', 'Components', 'Utilities', 'Deprecated', '*'],
     },
   },
@@ -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) => {

src/typography/__tests__/text-cropping.stories.tsx

@@ -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 ';