[CL-41] Typography directive (#3741)

libs/components/src/typography/typography.stories.ts

@@ -0,0 +1,70 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { TypographyDirective } from "./typography.directive";
+
+export default {
+  title: "Component Library/Typography",
+  component: TypographyDirective,
+  args: {
+    bitTypography: "body1",
+  },
+} as Meta;
+
+const Template: Story = (args) => ({
+  props: args,
+  template: `<span [bitTypography]="bitTypography" class="tw-text-main">{{text}}</span>`,
+});
+
+export const H1 = Template.bind({});
+H1.args = {
+  bitTypography: "h1",
+  text: "h1. Page Title",
+};
+
+export const H2 = Template.bind({});
+H2.args = {
+  bitTypography: "h2",
+  text: "h2. Page Section",
+};
+
+export const H3 = Template.bind({});
+H3.args = {
+  bitTypography: "h3",
+  text: "h3. Page Section",
+};
+
+export const H4 = Template.bind({});
+H4.args = {
+  bitTypography: "h4",
+  text: "h4. Page Section",
+};
+
+export const H5 = Template.bind({});
+H5.args = {
+  bitTypography: "h5",
+  text: "h5. Page Section",
+};
+
+export const H6 = Template.bind({});
+H6.args = {
+  bitTypography: "h6",
+  text: "h6. Page Section",
+};
+
+export const Body1 = Template.bind({});
+Body1.args = {
+  bitTypography: "body1",
+  text: "Body 1",
+};
+
+export const Body2 = Template.bind({});
+Body2.args = {
+  bitTypography: "body2",
+  text: "Body 2",
+};
+
+export const Helper = Template.bind({});
+Helper.args = {
+  bitTypography: "helper",
+  text: "Helper Text",
+};