+ {(props.typeSet || []).map(type => {
+ const indexOfClosestLargerBreakpoint = Math.max(
+ 0,
+ values(breakpoints).findIndex(
+ width => props.simulatedScreenWidth <= width
+ )
+ );
+
+ const currentBreakpointPx = values(breakpoints)[
+ indexOfClosestLargerBreakpoint
+ ];
+
+ const currentBreakpointName = findKey(
+ breakpoints,
+ val => val === currentBreakpointPx
+ );
+ const getCurrentCompoundStylesForBreakpoint = breakpointName => {
+ const typeKeys = Object.keys(breakpoints);
+ const typeStylesUntilCurrentBreakpoint = [];
+ // eslint-disable-next-line no-restricted-syntax
+ for (const item of typeKeys) {
+ typeStylesUntilCurrentBreakpoint.push(
+ props.typeScale[type.key][item]
+ );
+ if (item === breakpointName) break;
+ }
+ return Object.assign(
+ {},
+ defaultTypeValues,
+ ...typeStylesUntilCurrentBreakpoint
+ );
+ };
+
+ const currentBreakpointSpecs = getCurrentCompoundStylesForBreakpoint(
+ currentBreakpointName
+ );
+
+ const calculateFluidTypeSize = attribute =>
+ currentBreakpointSpecs[attribute] * baseFontSize;
+
+ const calculateFluidLineHeight = attribute =>
+ currentBreakpointSpecs[attribute] * baseFontSize;
+
+ const displayWeight = (weight, style) => {
+ if (style === 'italic') {
+ return `${weight} / Italic`;
+ }
+ switch (weight) {
+ case '300':
+ return '300 / Light';
+ case '400':
+ return '400 / Regular';
+ case '600':
+ return '600 / Semi-Bold';
+ default:
+ return weight;
+ }
+ };
+
+ const specs = {
+ fontWeight: currentBreakpointSpecs['font-weight'],
+ fontSize: `${calculateFluidTypeSize('font-size')}px`,
+ fontStyle: currentBreakpointSpecs['font-style'],
+ lineHeight: `${calculateFluidLineHeight('line-height')}px`,
+ letterSpacing: currentBreakpointSpecs['letter-spacing'],
+ };
+ const displaySpecs = {
+ step: currentBreakpointSpecs.step,
+ font: currentBreakpointSpecs.font,
+ style: currentBreakpointSpecs['font-style'],
+ fontWeight: displayWeight(
+ currentBreakpointSpecs['font-weight'],
+ currentBreakpointSpecs['font-style']
+ ),
+ fontSize: `${`${calculateFluidTypeSize('font-size')}px` +
+ ' / '}${currentBreakpointSpecs['font-size']
+ .toString()
+ .replace('0.', '.')}rem`,
+ // eslint-disable-next-line no-useless-concat
+ lineHeight: `${`${calculateFluidLineHeight('line-height')}px` + ` / `}${
+ currentBreakpointSpecs['line-height']
+ }rem`,
+ letterSpacing: currentBreakpointSpecs['letter-spacing']
+ .toString()
+ .replace('0.', '.'),
+ warning: currentBreakpointSpecs.warning,
+ };
+
+ const versionClassName = type.version
+ ? `${prefix}--type-${type.version}`
+ : '';
+
+ const versionClassNames = classnames(
+ `${prefix}--type-${type.key}`,
+ versionClassName
+ );
+
+ return (
+
+
+
+
+ {type.description}
+
+
+
+
+ {type.name}
+
+ Type: {displaySpecs.font}
+
+ Size: {displaySpecs.fontSize}
+
+ Line-height: {displaySpecs.lineHeight}
+
+ Weight:{' '}
+
+ {displaySpecs.fontWeight}
+
+
+ Letter-spacing: {displaySpecs.letterSpacing}px
+ {displaySpecs.warning != null ? (
+
+
+
+ warning:{' '}
+
+ {displaySpecs.warning}
+
+
+ ) : (
+
+ )}
+
+ ${type.name}
+
+
+
+
+
+ );
+ })}
+
+
+ {breakpointControls && (
+ <>
+
+
+
+
+ Breakpoints
+
+
+ {this.getButtons()}
+
+
+
+
+ Screen width
+
+
+
+
+
+
+ {typesets
+ .replace(', ', ',')
+ .split(',')
+ .map(typeset => (
+ <>
+
+ {typeset.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase()}
+
+
+
+ ))}
+
+