Typography refresh (#884)

* feat(components): rename Heading and SubHeading components * feat(components): add codemod and test for components name change * feat(components): rename Text component to Body * feat(components): update components name codemod to include Body component * (design tokens):add new headline, subHeadline and body types * feat(components):update Headline component with new size values * feat(components):remove SizeStyles from SubHeadline component * feat(components): update Body component with new size and variants * feat(components): remove Blockquote component * add changesets * fix stories * Add codemod for typography sizes * Add codemod for body variants * feat(components):update storybook components with new size names * Update MIGRATION.md * update changesets and storybook components * update Body and Headline docs * update storybook components * update Headline and Body components * update storybook components and codemods for sizes * update docs and snapshots * update docs * Fix custom as in Body component * Fix custom styles of the Anchor component * update Body test Co-authored-by: Connor Bär <connor.baer@me.com>
sumup-oss · May 4, 2021 · eb9e0b4 · eb9e0b4
1 parent 977ad86
commit eb9e0b4
Show file tree

Hide file tree

Showing 84 changed files with 1,428 additions and 1,667 deletions.
diff --git a/.changeset/gold-roses-push.md b/.changeset/gold-roses-push.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': major
+---
+
+Added `headline`, `subHeadline`, and `body` properties to the typography design tokens. These are used by the new semantic Headline, SubHeadline, and Body components in Circuit UI.
diff --git a/.changeset/healthy-stingrays-count.md b/.changeset/healthy-stingrays-count.md
@@ -0,0 +1,48 @@
+---
+'@sumup/circuit-ui': major
+---
+
+The new semantic typography components make it clear when each should be used, are flexible enough to cover all use cases. To represent more semantic variations some of the sizes have been removed and new size names added.
+
+#### Headline
+
+Renamed the `Heading` component to `Headline` and mapped the styles to the new ones. These changes can be codemodded (🤖 _component-names-typography_).
+The size prop has been changed to accept the new size numbers. For `Headline` component **_exa_** and **_peta_** has been changed to **_one_** with new values, **_tera_** has been changed to **_two_**, **_giga_** to **_three_**, **_mega_** and **_kilo_** to **_four_** (🤖 _typography-sizes_)
+
+Usage example:
+
+```diff
+-  <Heading size="kilo" />
++  <Headline size="four" />
+```
+
+#### SubHeadline
+
+Renamed the `SubHeading` component to `SubHeadline` and mapped the styles to the new ones (🤖 _component-names-typography_). The `SubHeadline` component now uses only one size value (🤖 _typography-sizes_).
+
+#### Body
+
+The `Text` component has been renamed to `Body` (🤖 _component-names-typography_). The size prop is adapted to accept the new size numbers and **_giga_** size has been removed, **_mega_** and **_kilo_** sizes have been changed to **_one_** and **_two_** respectively.
+
+Usage example:
+
+```diff
+-  <Text size="mega" />
++  <Body size="one" />
+```
+
+The `Text` component's bold prop has been removed. Use the `Body` component `(variant="highlight")` instead (🤖 _body-variant-highlight_).
+
+Usage example:
+
+`<Body variant="highlight">bold</Body>`
+
+The `Text` component's italic and strike props has been removed. Use the custom styles instead.
+
+Additionally, the new `success`, `error` and `subtle` variants are added.
+
+The `Blockquote` component has been removed and replaced by the `Body` component with `variant="quote"`.
+
+Usage example:
+
+`<Body variant="quote">quote</Body>`
diff --git a/.storybook/components/BorderRadius.js b/.storybook/components/BorderRadius.js
@@ -19,7 +19,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { light } from '@sumup/design-tokens';
 
-import { Text } from '../../packages/circuit-ui';
+import { Body } from '@sumup/circuit-ui';
 
 const Box = styled('div')`
   ${({ theme, size }) => css`
@@ -45,7 +45,7 @@ const BorderRadiusSize = styled('span')`
   `};
 `;
 
-const BorderRadiusName = styled(Text)`
+const BorderRadiusName = styled(Body)`
   ${({ theme }) => css`
     margin-left: ${theme.spacings.kilo};
     color: ${theme.colors.n500};
@@ -56,9 +56,9 @@ const BorderRadius = ({ size, ...props }) => (
   <Wrapper>
     <Box size={size} {...props} />
     <div>
-      <Text as="span">{size}</Text>
+      <Body as="span">{size}</Body>
       <BorderRadiusSize>
-        <BorderRadiusName size="kilo" as="span">
+        <BorderRadiusName size="two" as="span">
           {light.borderRadius[size]}
         </BorderRadiusName>
       </BorderRadiusSize>

diff --git a/.storybook/components/BorderWidth.js b/.storybook/components/BorderWidth.js
@@ -20,7 +20,7 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Text } from '../../packages/circuit-ui';
+import { Body } from '@sumup/circuit-ui';
 
 const Box = styled('div')`
   ${({ theme, size }) => css`
@@ -47,7 +47,7 @@ const BorderWidthSize = styled('span')`
   `};
 `;
 
-const BorderWidthName = styled(Text)`
+const BorderWidthName = styled(Body)`
   ${({ theme }) => css`
     margin-left: ${theme.spacings.kilo};
     color: ${theme.colors.n500};
@@ -59,9 +59,9 @@ const BorderWidth = ({ size }) => (
     <Wrapper>
       <Box size={size} />
       <div>
-        <Text as="span">{size}</Text>
+        <Body as="span">{size}</Body>
         <BorderWidthSize>
-          <BorderWidthName size="kilo" as="span">
+          <BorderWidthName size="two" as="span">
             {light.borderWidth[size]}
           </BorderWidthName>
         </BorderWidthSize>

diff --git a/.storybook/components/Grid.js b/.storybook/components/Grid.js
@@ -20,7 +20,7 @@ import {
   Grid as OriginalGrid,
   Row as OriginalRow,
   Col as OriginalCol,
-} from '../../packages/circuit-ui';
+} from '@sumup/circuit-ui';
 
 export const Grid = styled(OriginalGrid)`
   ${({ theme }) => css`

diff --git a/.storybook/components/IconSize.js b/.storybook/components/IconSize.js
@@ -20,7 +20,7 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Text } from '../../packages/circuit-ui';
+import { Body } from '@sumup/circuit-ui';
 
 const Box = styled('div')`
   ${({ theme, size }) => css`
@@ -46,7 +46,7 @@ const IconSizeSize = styled('span')`
   `};
 `;
 
-const IconSizeName = styled(Text)`
+const IconSizeName = styled(Body)`
   ${({ theme }) => css`
     margin-left: ${theme.spacings.kilo};
     color: ${theme.colors.n500};
@@ -58,9 +58,9 @@ const IconSize = ({ size }) => (
     <Wrapper>
       <Box size={size} />
       <div>
-        <Text as="span">{size}</Text>
+        <Body as="span">{size}</Body>
         <IconSizeSize>
-          <IconSizeName size="kilo" as="span">
+          <IconSizeName size="two" as="span">
             {light.iconSizes[size]}
           </IconSizeName>
         </IconSizeSize>

diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js
@@ -24,13 +24,13 @@ import * as iconComponents from '@sumup/icons';
 import { icons } from '@sumup/icons/manifest.json';
 
 import {
-  Heading,
-  Text,
+  Headline,
+  Body,
   InlineElements,
   Label,
   SearchInput,
   Select,
-} from '../../packages/circuit-ui';
+} from '@sumup/circuit-ui';
 
 function group(key, collection) {
   const grouped = groupBy(key, collection);
@@ -157,13 +157,13 @@ const Icons = () => {
       </Filters>
 
       {isEmpty(activeIcons) ? (
-        <Text>No icons found</Text>
+        <Body>No icons found</Body>
       ) : (
         group('category', activeIcons).map(({ category, items }) => (
           <Category key={category}>
-            <Heading as="h3" size="giga">
+            <Headline as="h3" size="three">
               {category}
-            </Heading>
+            </Headline>
             <List>
               {sortBy('name', items).map((icon) => {
                 const id = `${icon.name}-${icon.size}`;

diff --git a/.storybook/components/Image.js b/.storybook/components/Image.js
@@ -19,7 +19,7 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Image as BaseImage } from '../../packages/circuit-ui';
+import { Image as BaseImage } from '@sumup/circuit-ui';
 
 const FULL_WIDTH = 'full-width';
 

diff --git a/.storybook/components/Intro.js b/.storybook/components/Intro.js
@@ -19,9 +19,9 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Text } from '../../packages/circuit-ui';
+import { Body } from '@sumup/circuit-ui';
 
-const StyledText = styled(Text)(
+const StyledText = styled(Body)(
   ({ theme }) => css`
     line-height: 1.66 !important;
     font-size: 20px !important;
@@ -37,14 +37,8 @@ const StyledText = styled(Text)(
 
 const Intro = ({ children, ...props }) => (
   <ThemeProvider theme={light}>
-    <StyledText size="giga" {...props}>
-      {children}
-    </StyledText>
+    <StyledText {...props}>{children}</StyledText>
   </ThemeProvider>
 );
 
-Intro.KILO = 'kilo';
-Intro.MEGA = 'mega';
-Intro.GIGA = 'giga';
-
 export default Intro;
diff --git a/.storybook/components/Link.js b/.storybook/components/Link.js
@@ -4,8 +4,6 @@ import { css } from '@emotion/core';
 
 import { isStoryName, splitStoryName } from '../util/story-helpers';
 
-import { Text } from '../../packages/circuit-ui';
-
 const styles = css`
   font: inherit;
 `;

diff --git a/.storybook/components/MediaQueriesTable.js b/.storybook/components/MediaQueriesTable.js
@@ -17,7 +17,7 @@ import React from 'react';
 import { withTheme, ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Table } from '../../packages/circuit-ui';
+import { Table } from '@sumup/circuit-ui';
 
 const HEADERS = ['Breakpoint name', 'Query'];
 

diff --git a/.storybook/components/Spacing.js b/.storybook/components/Spacing.js
@@ -20,7 +20,7 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Text } from '../../packages/circuit-ui';
+import { Body } from '@sumup/circuit-ui';
 
 const Box = styled('div')`
   ${({ theme, spacingName }) => css`
@@ -46,7 +46,7 @@ const SpacingSize = styled('span')`
   `};
 `;
 
-const SpacingName = styled(Text)`
+const SpacingName = styled(Body)`
   ${({ theme }) => css`
     margin-left: ${theme.spacings.kilo};
     color: ${theme.colors.n500};
@@ -58,9 +58,9 @@ const Spacing = ({ spacingName }) => (
     <Wrapper>
       <Box spacingName={spacingName} />
       <div>
-        <Text as="span">{spacingName}</Text>
+        <Body as="span">{spacingName}</Body>
         <SpacingSize>
-          <SpacingName size="kilo" as="span">
+          <SpacingName size="two" as="span">
             {light.spacings[spacingName]}
           </SpacingName>
         </SpacingSize>

diff --git a/.storybook/components/Statuses.js b/.storybook/components/Statuses.js
@@ -21,7 +21,7 @@ import { ThemeProvider } from 'emotion-theming';
 import { css } from '@emotion/core';
 import { light } from '@sumup/design-tokens';
 
-import { Badge, Text } from '../../packages/circuit-ui';
+import { Badge, Body } from '@sumup/circuit-ui';
 
 const variants = {
   stable: { variant: 'success', label: 'Stable' },
@@ -49,10 +49,10 @@ const Status = ({ variant: status = 'stable' }) => {
 
 Status.Description = ({ children }) => (
   <ThemeProvider theme={light}>
-    <Text size="kilo" as="span" italic>
+    <Body size="two" as="span">
       {' '}
       {children}
-    </Text>
+    </Body>
   </ThemeProvider>
 );
 

diff --git a/.storybook/components/Swatch.js b/.storybook/components/Swatch.js
@@ -20,7 +20,7 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Text, styleHelpers } from '../../packages/circuit-ui';
+import { Body, styleHelpers } from '@sumup/circuit-ui';
 
 const SWATCH_WIDTH = '99px';
 const SWATCH_HEIGHT = '99px';
@@ -52,7 +52,7 @@ const ColorName = styled('div')`
   `};
 `;
 
-const ColorHex = styled(Text)`
+const ColorHex = styled(Body)`
   ${({ theme }) => css`
     color: ${theme.colors.n500};
   `};
@@ -63,10 +63,10 @@ const Swatch = ({ colorName }) => (
     <ColorWrapper>
       <Color colorName={colorName} />
       <ColorName>
-        <Text bold as="p" size="kilo" noMargin>
+        <Body variant="highlight" size="two" noMargin>
           {colorName}
-        </Text>
-        <ColorHex as="p" size="kilo" noMargin>
+        </Body>
+        <ColorHex as="p" size="two" noMargin>
           {light.colors[colorName]}
         </ColorHex>
       </ColorName>

diff --git a/.storybook/components/Teaser.js b/.storybook/components/Teaser.js
@@ -19,7 +19,7 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Heading, Text, Card } from '../../packages/circuit-ui';
+import { Headline, Body, Card } from '@sumup/circuit-ui';
 
 // HACK: This prevents the cards from awkwardly wrapping if one of them
 //       only has one line of text.
@@ -42,9 +42,9 @@ const Wrapper = styled(Card)(
 const Teaser = ({ title, children, ...props }) => (
   <ThemeProvider theme={light}>
     <Wrapper shadow="double">
-      <Heading as="h2" size="giga">
+      <Headline as="h2" size="three">
         {title}
-      </Heading>
+      </Headline>
 
       {children}
     </Wrapper>

diff --git a/.storybook/components/Type.js b/.storybook/components/Type.js
@@ -20,9 +20,9 @@ import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 
-import { Text } from '../../packages/circuit-ui';
+import { Body } from '@sumup/circuit-ui';
 
-const TypePx = styled(Text)`
+const TypePx = styled(Body)`
   ${({ theme: t }) => css`
     color: ${t.colors.n500};
     margin-left: ${t.spacings.mega};
@@ -41,7 +41,7 @@ const Type = ({ size, component, name, fontWeight, ...props }) => {
         children: (
           <Fragment>
             This is {size}
-            <TypePx as="span" size="kilo">
+            <TypePx as="span" size="two">
               {weight ? `${weight}` : `${fontSize}, ${lineHeight}`}
             </TypePx>
           </Fragment>

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -8,7 +8,7 @@ import { Global, css } from '@emotion/core';
 import { light } from '@sumup/design-tokens';
 import { TrackingRoot, TrackingView } from '@sumup/collector';
 
-import { BaseStyles } from '../packages/circuit-ui';
+import { BaseStyles } from '@sumup/circuit-ui';
 import { theme, components } from './util/theme';
 import { sortStories } from './util/story-helpers';
 
@@ -35,7 +35,7 @@ const SORT_ORDER = {
     'Base Components': {},
     'Static CSS': {},
   },
-  Typography: { Heading: {}, SubHeading: {}, Text: {} },
+  Typography: { Headline: {}, SubHeadline: {}, Body: {} },
   Layout: {},
   Forms: {},
   Components: {},