diff --git a/src/components/TypesetStyle/TypesetStyle.js b/src/components/TypesetStyle/TypesetStyle.js index d7be94908e4..de23dfe2e88 100644 --- 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) => (