[CL-41] Typography directive (#3741)

libs/components/src/index.ts

@@ -1,10 +1,10 @@
 export * from "./async-actions";
 export * from "./avatar";
-export * from "./badge";
 export * from "./badge-list";
+export * from "./badge";
 export * from "./banner";
-export * from "./button";
 export * from "./breadcrumbs";
+export * from "./button";
 export * from "./callout";
 export * from "./checkbox";
 export * from "./color-password";
@@ -16,8 +16,9 @@ export * from "./link";
 export * from "./menu";
 export * from "./multi-select";
 export * from "./navigation";
+export * from "./radio-button";
 export * from "./table";
 export * from "./tabs";
 export * from "./toggle-group";
-export * from "./radio-button";
+export * from "./typography";
 export * from "./utils/i18n-mock.service";

libs/components/src/stories/typography.stories.mdx

@@ -0,0 +1,59 @@
+import { Meta, Story, Source } from "@storybook/addon-docs";
+
+<Meta title="Documentation/Typography" />
+
+# Typography
+
+<Story id="component-library-typography--h-1" />
+
+```html
+<h1 bitTypography="h1">H1</h1>
+```
+
+<Story id="component-library-typography--h-2" />
+
+```html
+<h2 bitTypography="h2">H2</h2>
+```
+
+<Story id="component-library-typography--h-3" />
+
+```html
+<h3 bitTypography="h3">H3</h3>
+```
+
+<Story id="component-library-typography--h-4" />
+
+```html
+<h4 bitTypography="h4">H4</h4>
+```
+
+<Story id="component-library-typography--h-5" />
+
+```html
+<h5 bitTypography="h5">H5</h5>
+```
+
+<Story id="component-library-typography--h-6" />
+
+```html
+<h6 bitTypography="h6">H6</h6>
+```
+
+<Story id="component-library-typography--body-1" />
+
+```html
+<p bitTypography="body1">Body 1</p>
+```
+
+<Story id="component-library-typography--body-2" />
+
+```html
+<p bitTypography="body2">Body 2</h1>
+```
+
+<Story id="component-library-typography--helper" />
+
+```html
+<p bitTypography="helper">Helper Text</h1>
+```

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