chore: migrate type component

gatsby-config.js

@@ -15,9 +15,5 @@ module.exports = {
         },
       },
     },
-    {
-      resolve: 'gatsby-plugin-compile-es6-packages',
-      options: { modules: ['@carbon/addons-website'] },
-    },
   ],
 };

package.json

@@ -12,6 +12,7 @@
     "format": "prettier --write 'src/**/*.{js,json,css,scss,md,mdx,yaml}'"
   },
   "dependencies": {
+    "@carbon/elements": "^10.4.0",
     "@carbon/icons-react": "^10.4.1",
     "@reach/router": "^1.2.1",
     "carbon-components": "^10.4.1",
@@ -21,6 +22,7 @@
     "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "gatsby-theme-carbon": "^1.6.2",
     "html-loader": "^0.5.5",
+    "lodash": "^4.17.15",
     "markdown-it": "^9.0.1",
     "markdown-loader": "^5.0.0",
     "prismjs": "^1.17.1",

src/components/TypesetStyle/InputRange.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+
+const InputRange = ({ step, min, max, value, onChange }) => (
+  <input
+    type="range"
+    step={step || 1}
+    min={min}
+    max={max}
+    value={value}
+    onChange={onChange}
+    style={{ '--track-width': `${((value - min) / (max - min)) * 100}%` }}
+    className={`${prefix}--input-range`}
+  />
+);
+
+InputRange.propTypes = {
+  // input step
+  step: PropTypes.number,
+
+  // input min
+  min: PropTypes.number.isRequired,
+
+  // input max
+  max: PropTypes.number.isRequired,
+
+  // input value
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  // onChange function
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputRange;

src/components/TypesetStyle/StickyContainer.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { settings } from 'carbon-components';
+import classnames from 'classnames';
+
+const { prefix } = settings;
+
+const StickyContainer = ({
+  children,
+  banner,
+  navBar,
+  secondary,
+  top,
+  className,
+}) => {
+  const stickyClass = classnames(`${prefix}--sticky-container`, className, {
+    [`${prefix}--sticky-container-banner`]: banner,
+    [`${prefix}--sticky-container-visible`]: navBar,
+    [`${prefix}--sticky-container-hidden`]: !navBar,
+    [`${prefix}--sticky-container-secondary`]: secondary,
+    [`${prefix}--sticky-container-secondary-visible`]: navBar && secondary,
+    [`${prefix}--sticky-container-secondary-hidden`]: !navBar && secondary,
+  });
+
+  return (
+    <div className={stickyClass} style={{ top: top || null }}>
+      {children}
+    </div>
+  );
+};
+
+StickyContainer.propTypes = {
+  // if site has banner at top ( ex. go to v1)
+  banner: PropTypes.bool,
+
+  // if page navBar is showing / hiding, toggle this on/off
+  navBar: PropTypes.bool,
+
+  // for items that are on pages that already have a sticky item
+  secondary: PropTypes.bool,
+
+  // if custom top is necessary, must include units - (rem, px)
+  top: PropTypes.string,
+};
+
+export default StickyContainer;

src/components/TypesetStyle/TypesetExample.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import { settings } from 'carbon-components';
+import classnames from 'classnames';
+import { findKey, values } from 'lodash';
+import {
+  baseFontSize,
+  breakpoints as carbonBreakpoints,
+} from '@carbon/elements';
+import { CodeSnippet } from 'carbon-components-react';
+
+const { prefix } = settings;
+
+const breakpoints = {
+  sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
+  md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
+  lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
+  xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
+  max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
+};
+
+const defaultTypeValues = {
+  'letter-spacing': 0,
+};
+
+const TypesetExample = props => (
+  <div className={`${prefix}--typeset-example-container`}>
+    {(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 (
+        <div
+          key={`${props.name}${type.key}${type.version}`}
+          style={{ padding: 0 }}
+          className={`${prefix}--typeset-example`}>
+          <div className={`${prefix}--typeset-example-row ${prefix}--row`}>
+            <div
+              className={`${prefix}--typeset-example-description ${prefix}--col-md-5`}>
+              <p className={versionClassNames} style={specs}>
+                {type.description}
+              </p>
+            </div>
+            <div
+              className={`${prefix}--typeset-example-specs ${prefix}--col-md-3 ${prefix}--padding`}>
+              <span className={`${prefix}--type-body-short-01`}>
+                <span className={`${prefix}--type-semibold`}>{type.name} </span>
+                <br />
+                Type: {displaySpecs.font}
+                <br />
+                Size: {displaySpecs.fontSize}
+                <br />
+                Line-height: {displaySpecs.lineHeight}
+                <br />
+                Weight:{' '}
+                <span style={{ textTransform: 'capitalize' }}>
+                  {displaySpecs.fontWeight}
+                </span>
+                <br />
+                Letter-spacing: {displaySpecs.letterSpacing}px
+                {displaySpecs.warning != null ? (
+                  <span>
+                    <br />
+                    <span className={`${prefix}--type-semibold`}>
+                      warning:{' '}
+                    </span>
+                    {displaySpecs.warning}
+                    <br />
+                  </span>
+                ) : (
+                  <br />
+                )}
+                <div className={`${prefix}--typeset-example-code-style`}>
+                  <CodeSnippet type="inline">${type.name}</CodeSnippet>
+                </div>
+              </span>
+            </div>
+          </div>
+        </div>
+      );
+    })}
+  </div>
+);
+
+export default TypesetExample;