feat: mui typography changes

config/typography.js

@@ -42,6 +42,14 @@ const fontSize = {
   '5xl': pxToRem(32),
   '6xl': pxToRem(36),
   '7xl': pxToRem(41),
+
+  // MUI Specific
+  h6: pxToRem(20),
+  h5: pxToRem(24),
+  h4: pxToRem(34),
+  h3: pxToRem(48),
+  h2: pxToRem(60),
+  h1: pxToRem(96),
 };
 
 const fontWeight = {

index.js

@@ -12,6 +12,7 @@ const fluidBasePlugin = require('./plugins/base');
 const bodyTextComponentsPlugin = require('./plugins/components/body-text');
 const captionTextComponentsPlugin = require('./plugins/components/caption-text');
 const headingTextComponentsPlugin = require('./plugins/components/heading-text');
+const MuiTypographyComponentsPlugin = require('./plugins/components/mui-typography');
 const buttonComponentsPlugin = require('./plugins/components/buttons');
 const bannerComponentsPlugin = require('./plugins/components/banners');
 
@@ -71,6 +72,7 @@ module.exports = {
     headingTextComponentsPlugin,
     buttonComponentsPlugin,
     bannerComponentsPlugin,
+    MuiTypographyComponentsPlugin,
   ],
 
   // Export constants used in configuration to enable extension

plugins/components/mui-typography.js

@@ -0,0 +1,67 @@
+'use strict';
+
+module.exports = function MuiTypographyComponentsPlugin({ addComponents, theme }) {
+  addComponents({
+    h1: {
+      fontSize: theme('fontSize.h1'),
+      letterSpacing: theme('letterSpacing.2xs'),
+      lineHeight: '120%',
+    },
+    h2: {
+      fontSize: theme('fontSize.h2'),
+      letterSpacing: theme('letterSpacing.2xs'),
+      lineHeight: '120%',
+    },
+    h3: {
+      fontSize: theme('fontSize.h3'),
+      letterSpacing: theme('letterSpacing.xs'),
+      lineHeight: '120%',
+    },
+    h4: {
+      fontSize: theme('fontSize.h4'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: '120%',
+    },
+    h5: {
+      fontSize: theme('fontSize.h5'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: '120%',
+    },
+    h6: {
+      fontSize: theme('fontSize.h6'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: '120%',
+    },
+    '.subtitle1': {
+      fontSize: theme('fontSize.base'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: theme('lineHeight.base'),
+    },
+    '.subtitle2': {
+      fontSize: theme('fontSize.xs'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: theme('lineHeight.xs'),
+    },
+    '.body1': {
+      fontSize: theme('fontSize.base'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: theme('lineHeight.base'),
+    },
+    '.body2': {
+      fontSize: theme('fontSize.sm'),
+      letterSpacing: theme('letterSpacing.base'),
+      lineHeight: theme('lineHeight.sm'),
+    },
+    '.caption': {
+      fontSize: theme('fontSize.xs'),
+      letterSpacing: theme('letterSpacing.md'),
+      lineHeight: theme('lineHeight.2xs'),
+    },
+    '.overline': {
+      fontSize: theme('fontSize.xs'),
+      textTransform: 'uppercase',
+      letterSpacing: theme('letterSpacing.md'),
+      lineHeight: theme('lineHeight.xs'),
+    },
+  });
+};

stories/Components/Text/MuiText.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { LoremIpsum } from 'lorem-ipsum';
+import random from '../../_utils/random';
+
+const lorem = new LoremIpsum({
+  random,
+  wordsPerSentence: {
+    min: 5,
+    max: 8,
+  },
+});
+
+function makeStory(htmlClass) {
+  return <p className={htmlClass}>{lorem.generateWords(3)}</p>;
+}
+
+export default {
+  title: 'Components/Text/MUI',
+};
+
+export const h1 = () => {
+  return <h1>{lorem.generateWords(3)}</h1>;
+};
+export const h2 = () => {
+  return <h2>{lorem.generateWords(3)}</h2>;
+};
+export const h3 = () => {
+  return <h3>{lorem.generateWords(3)}</h3>;
+};
+export const h4 = () => {
+  return <h4>{lorem.generateWords(3)}</h4>;
+};
+export const h5 = () => {
+  return <h5>{lorem.generateWords(3)}</h5>;
+};
+export const h6 = () => {
+  return <h6>{lorem.generateWords(3)}</h6>;
+};
+
+export const subtitle1 = () => makeStory('subtitle1');
+export const subtitle2 = () => makeStory('subtitle2');
+export const body2 = () => makeStory('body2');
+export const body1 = () => makeStory('body1');
+export const caption = () => makeStory('caption');
+export const overline = () => makeStory('overline');