dang-1738 / add the new Typography classes (#352)

CHANGELOG.md

@@ -1,7 +1,15 @@
 # CHANGELOG
 
+## v2.0.0-beta.2
+
+### Features
+
+Adds the new Typography classes
+
 ## v2.0.0-beta.1
 
+### Features
+
 Adds new `invalid` event listener to the TextInput component
 
 ## v2.0.0-beta.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"
@@ -64,7 +64,7 @@
     "sass-loader": "^10.1.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "tailwind-plugin-lob": "^1.0.0",
+    "tailwind-plugin-lob": "^1.0.1",
     "tailwindcss": "^3.0.24",
     "typescript": "~3.9.3",
     "vite": "^3.1.4",
@@ -86,4 +86,4 @@
     "type": "git",
     "url": "https://github.com/lob/ui-components"
   }
-}
+}

src/theme/TypographyClasses/TypographyClasses.mdx

@@ -0,0 +1,15 @@
+import {
+  Preview,
+  Story,
+  ArgsTable,
+  PRIMARY_STORY,
+} from "@storybook/addon-docs";
+import TypographyClasses from "./TypographyClasses.vue";
+
+# Typography Classes
+
+Our font Typography classes are configured in the shared Lob Tailwind config found in the [tailwind-plugin-lob repo](https://github.com/lob/tailwind-plugin-lob).
+
+The classes are added to the theme with the use of the `addComponents` plugin.
+
+Please refer to [Tailwind's documentation](https://tailwindcss.com/docs/plugins) for more info on plugins.

src/theme/TypographyClasses/TypographyClasses.stories.js

@@ -0,0 +1,19 @@
+import TypographyClasses from './TypographyClasses.vue';
+import mdx from './TypographyClasses.mdx';
+
+export default {
+  title: 'Theme (Dev Only)/Typography Classes',
+  component: TypographyClasses,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+const Template = () => ({
+  components: { TypographyClasses },
+  template: '<TypographyClasses/>'
+});
+
+export const Primary = Template.bind({});

src/theme/TypographyClasses/TypographyClasses.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div
+      v-for="typeClass in typeClasses"
+      :key="typeClass"
+      class="mb-6"
+    >
+      <p :class="`${typeClass}`">
+        {{ typeClass }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+const typeClasses = ['type-display-1', 'type-display-2',
+  'type-header-1', 'type-header-2', 'type-header-3', 'type-header-4',
+  'type-xl-300', 'type-xl-400', 'type-xl-500', 'type-xl-600', 'type-xl-700', 'type-xl-800',
+  'type-large-300', 'type-large-400', 'type-large-500', 'type-large-600', 'type-large-700', 'type-large-800',
+  'type-base-300', 'type-base-400', 'type-base-500', 'type-base-600', 'type-base-700', 'type-base-800',
+  'type-small-300', 'type-small-400', 'type-small-500', 'type-small-600', 'type-small-700', 'type-small-800',
+  'type-xs-300', 'type-xs-400', 'type-xs-500', 'type-xs-600', 'type-xs-700', 'type-xs-800'];
+
+export default {
+  name: 'Theme',
+  data () {
+    return {
+      typeClasses
+    };
+  }
+};
+</script>