feat(type): added new styles (#2555)

* feat(type): added new styles * feat(type): removed zombie Co-authored-by: Abbey Hart <[email protected]>
carbon-design-system · Sep 29, 2021 · 138f055 · 138f055 · vercel · Sep 29, 2021
1 parent b9a62ba
commit 138f055
Showing 1 changed file with 56 additions and 14 deletions.
diff --git a/src/components/TypesetStyle/TypesetStyle.js b/src/components/TypesetStyle/TypesetStyle.js
@@ -26,6 +26,16 @@ const typeScale = {
       'letter-spacing': 0.32,
     },
   },
+  'caption-02': {
+    sm: {
+      step: 1,
+      font: 'IBM Plex Sans',
+      'font-weight': '400',
+      'font-size': 0.875,
+      'line-height': 1.125,
+      'letter-spacing': 0.16,
+    },
+  },
   'label-01': {
     sm: {
       step: 1,
@@ -36,6 +46,16 @@ const typeScale = {
       'letter-spacing': 0.32,
     },
   },
+  'label-02': {
+    sm: {
+      step: 1,
+      font: 'IBM Plex Sans',
+      'font-weight': '400',
+      'font-size': 0.875,
+      'line-height': 1.125,
+      'letter-spacing': 0.16,
+    },
+  },
   'helper-text-01': {
     sm: {
       step: 1,
@@ -46,6 +66,16 @@ const typeScale = {
       'letter-spacing': 0.32,
     },
   },
+  'helper-text-02': {
+    sm: {
+      step: 1,
+      font: 'IBM Plex Sans',
+      'font-weight': '400',
+      'font-size': 0.875,
+      'line-height': 1.125,
+      'letter-spacing': 0.16,
+    },
+  },
 
   'body-short-01': {
     sm: {
@@ -678,12 +708,30 @@ const typeSets = {
       key: 'caption-01',
       name: 'caption-01',
     },
+    {
+      description:
+        'This is for captions or legal content in a layout — not for body copy.',
+      key: 'caption-02',
+      name: 'caption-02',
+    },
     {
       description:
         'This is for explanatory helper text that appears below a field title within a component.',
       key: 'helper-text-01',
       name: 'helper-text-01',
     },
+    {
+      description:
+        'This is for explanatory helper text that appears below a field title within a component.',
+      key: 'helper-text-02',
+      name: 'helper-text-02',
+    },
+    {
+      description:
+        'This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy.',
+      key: 'label-02',
+      name: 'label-02',
+    },
   ],
   supportingStyles: [
     {
@@ -855,11 +903,11 @@ const breakpoints = {
   max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
 };
 
-const nextLargerBreakpointPx = viewportWidth =>
+const nextLargerBreakpointPx = (viewportWidth) =>
   values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
 
-const indexOfCurrentBreakpoint = viewportWidth =>
-  findLastIndex(values(breakpoints), width => viewportWidth >= width);
+const indexOfCurrentBreakpoint = (viewportWidth) =>
+  findLastIndex(values(breakpoints), (width) => viewportWidth >= width);
 
 const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
   if (viewportWidth === currentBreakpoint) return true;
@@ -917,16 +965,16 @@ class TypesetStyle extends React.Component {
     });
   }
 
-  toggleBreakpoint = e => {
+  toggleBreakpoint = (e) => {
     this.setState({ simulatedScreenWidth: Number(e.target.value) });
   };
 
-  toggleSet = value => {
+  toggleSet = (value) => {
     this.setState({ tab: value });
   };
 
   getButtons = () =>
-    Object.keys(breakpoints).map(breakpointName => (
+    Object.keys(breakpoints).map((breakpointName) => (
       <button
         className={`${prefix}--typeset-style-button ${prefix}--type-body-long-01 ${
           isWithinBreakpoint(
@@ -948,14 +996,8 @@ class TypesetStyle extends React.Component {
     ));
 
   render() {
-    const {
-      navBar,
-      banner,
-      secondary,
-      top,
-      breakpointControls,
-      typesets,
-    } = this.props;
+    const { navBar, banner, secondary, top, breakpointControls, typesets } =
+      this.props;
 
     const typesetStyleStickyClassnames = classnames(
       [`${prefix}--typeset-style-controls-sticky`],