[CL-41] Typography directive (#3741)

libs/components/src/typography/index.ts

@@ -0,0 +1 @@
+export * from "./typography.module";

libs/components/src/typography/typography.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, HostBinding, Input } from "@angular/core";
+
+type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
+
+const styles: Record<TypographyType, string[]> = {
+  h1: ["tw-text-3xl", "tw-font-semibold", "tw-mb-2"],
+  h2: ["tw-text-2xl", "tw-font-semibold", "tw-mb-2"],
+  h3: ["tw-text-xl", "tw-font-semibold", "tw-mb-2"],
+  h4: ["tw-text-lg", "tw-font-semibold", "tw-mb-2"],
+  h5: ["tw-text-base", "tw-font-semibold", "tw-mb-2"],
+  h6: ["tw-text-sm", "tw-font-semibold", "tw-mb-2"],
+  body1: ["tw-text-base"],
+  body2: ["tw-text-sm"],
+  helper: ["tw-text-xs"],
+};
+
+@Directive({
+  selector: "[bitTypography]",
+})
+export class TypographyDirective {
+  @Input("bitTypography") bitTypography: TypographyType;
+
+  @HostBinding("class") get classList() {
+    return styles[this.bitTypography];
+  }
+}

libs/components/src/typography/typography.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { TypographyDirective } from "./typography.directive";
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [TypographyDirective],
+  declarations: [TypographyDirective],
+})
+export class TypographyModule {}

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",
+};