Merge pull request #825 from securityscorecard/Mnau-mnau@UXD-1245

feat(Heading): change H1 fontweight & remove H0
securityscorecard · Oct 3, 2023 · 143cf97 · 143cf97
2 parents c2f8beb + 633a9d8
commit 143cf97
Show file tree

Hide file tree

Showing 12 changed files with 12 additions and 43 deletions.
diff --git a/.storybook/image-snapshots/expected/components_typography_Heading_Heading H0.png b/.storybook/image-snapshots/expected/components_typography_Heading_Heading H0.png
diff --git a/...ook/image-snapshots/expected/components_typography_Heading_Heading H1 as H3.png b/...ook/image-snapshots/expected/components_typography_Heading_Heading H1 as H3.png
diff --git a/...s/expected/components_typography_Heading_Heading H1 with customized margins.png b/...s/expected/components_typography_Heading_Heading H1 with customized margins.png
diff --git a/.storybook/image-snapshots/expected/components_typography_Heading_Heading H1.png b/.storybook/image-snapshots/expected/components_typography_Heading_Heading H1.png
diff --git a/.storybook/image-snapshots/expected/components_typography_Text_Dark Mode.png b/.storybook/image-snapshots/expected/components_typography_Text_Dark Mode.png
diff --git a/src/components/typographyLegacy/Heading/Heading.enums.ts b/src/components/typographyLegacy/Heading/Heading.enums.ts
@@ -1,5 +1,4 @@
 export const HeadingSizes = {
-  h0: 'h0',
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',

diff --git a/src/components/typographyLegacy/Heading/Heading.stories.tsx b/src/components/typographyLegacy/Heading/Heading.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 
-import Heading, { H0, H1, H2, H3, H4, H5 } from './Heading';
+import Heading, { H1, H2, H3, H4, H5 } from './Heading';
 import { HeadingProps } from './Heading.types';
 import { HeadingSizes, HeadingVariants } from './Heading.enums';
 import { generateControl } from '../../../utils/tests/storybook';
@@ -37,14 +37,6 @@ Playground.parameters = {
   screenshot: { skip: true },
 };
 
-export const H0Story: Story = () => (
-  <>
-    <H0>Heading H0</H0>
-    <H0 variant={HeadingVariants.secondary}>Heading H0 - secondary</H0>
-  </>
-);
-H0Story.storyName = 'Heading H0';
-
 export const H1Story: Story = () => (
   <>
     <H1>Heading H1</H1>

diff --git a/src/components/typographyLegacy/Heading/Heading.tsx b/src/components/typographyLegacy/Heading/Heading.tsx
@@ -39,15 +39,11 @@ const HeadingBase = css<HeadingProps>`
   ${({ variant }) => variants[variant]};
 `;
 
-const HeadingH0 = styled.h1`
-  ${HeadingBase};
-  font-size: ${getFontSize('h0')};
-  line-height: normal;
-`;
 const HeadingH1 = styled.h1`
   ${HeadingBase};
   font-size: ${getFontSize('h1')};
   line-height: ${getLineHeight('xxl')};
+  font-weight: ${getFontWeight('bold')};
 `;
 const HeadingH2 = styled.h2`
   ${HeadingBase};
@@ -73,7 +69,6 @@ const HeadingH5 = styled.h5`
 `;
 
 const headingSizes = {
-  h0: HeadingH0,
   h1: HeadingH1,
   h2: HeadingH2,
   h3: HeadingH3,
@@ -108,18 +103,6 @@ Heading.propTypes = {
 
 export default Heading;
 
-export const H0: React.FC<
-  Omit<React.ComponentProps<typeof Heading>, 'size'>
-> = ({ children, ...props }) => (
-  <Heading size={HeadingSizes.h0} {...props}>
-    {children}
-  </Heading>
-);
-
-H0.propTypes = {
-  variant: PropTypes.oneOf(Object.values(HeadingVariants)),
-};
-
 export const H1: React.FC<
   Omit<React.ComponentProps<typeof Heading>, 'size'>
 > = ({ children, ...props }) => (

diff --git a/src/components/typographyLegacy/Heading/index.ts b/src/components/typographyLegacy/Heading/index.ts
@@ -1,3 +1,3 @@
 export * as HeadingEnums from './Heading.enums';
-export { default as Heading, H0, H1, H2, H3, H4, H5 } from './Heading';
+export { default as Heading, H1, H2, H3, H4, H5 } from './Heading';
 export * from './Heading.types';
diff --git a/src/theme/typography.stories.mdx b/src/theme/typography.stories.mdx
@@ -95,16 +95,9 @@ and is bundled within this package.
 
 ## Font sizes
 
-### Hedings
+### Headings
 
 <FontPalette>
-  <FontItem
-    title="theme.typography.size.h0"
-    subtitle="Document header and other special cases"
-    sampleText="Heading H0"
-    fontSize={theme.typography.size.h0}
-    fontWeight={theme.typography.weight.medium}
-  />
   <FontItem
     title="theme.typography.size.h1"
     subtitle="Page-level headers"
@@ -137,6 +130,14 @@ and is bundled within this package.
     fontWeight={theme.typography.weight.medium}
     lineHeight={theme.typography.lineHeight.lg}
   />
+  <FontItem
+    title="theme.typography.size.h5"
+    subtitle="Block headers"
+    sampleText="Heading H5"
+    fontSize={theme.typography.size.h5}
+    fontWeight={theme.typography.weight.medium}
+    lineHeight={theme.typography.lineHeight.mdPlus}
+  />
 </FontPalette>
 
 ### Body text

diff --git a/src/theme/typography.ts b/src/theme/typography.ts
@@ -17,7 +17,6 @@ const family: Family = {
 };
 
 const size: Size = {
-  h0: pxToRem(BASE_FONT_SIZE * 2), // 32px
   h1: pxToRem(BASE_FONT_SIZE * 2), // 32px
   h2: pxToRem(BASE_FONT_SIZE * 1.75), // 28px
   h3: pxToRem(BASE_FONT_SIZE * 1.5), // 24px
@@ -46,10 +45,6 @@ const lineHeight: LineHeight = {
 
 const margin: Margin = {
   heading: {
-    h0: {
-      top: pxToRem(BASE_LINE_HEIGHT * 6), // 120px
-      bottom: pxToRem(BASE_LINE_HEIGHT * 3), // 60px
-    },
     h1: {
       top: pxToRem(BASE_LINE_HEIGHT * 5), // 100px
       bottom: pxToRem(BASE_LINE_HEIGHT * 2.5), // 50px

diff --git a/src/theme/typography.types.ts b/src/theme/typography.types.ts
@@ -6,7 +6,6 @@ export interface Family {
 }
 
 export interface Size {
-  h0: string;
   h1: string;
   h2: string;
   h3: string;