matcha-components 1.0.6 → 1.0.7

package/src/lib/matcha-expansion/expansion.mdx

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./expansion.stories";
+
+<Meta title="Atoms / Expansion / Documentação" />
+
+# Expansion
+
+> _expansion_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Expansion overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.ExpansionOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+
+                <mat-accordion>
+                    <mat-expansion-panel hideToggle>
+                        <mat-expansion-panel-header>
+                        <mat-panel-title>
+                            This is the expansion title
+                        </mat-panel-title>
+                        <mat-panel-description>
+                            This is a summary of the content
+                        </mat-panel-description>
+                        </mat-expansion-panel-header>
+                        <p>This is the primary content of the panel.</p>
+                    </mat-expansion-panel>
+                    <mat-expansion-panel (opened)="panelOpenState = true"
+                                        (closed)="panelOpenState = false">
+                        <mat-expansion-panel-header>
+                        <mat-panel-title>
+                            Self aware panel
+                        </mat-panel-title>
+                        <mat-panel-description>
+                            Currently I am {{panelOpenState ? 'open' : 'closed'}}
+                        </mat-panel-description>
+                        </mat-expansion-panel-header>
+                        <p>I'm visible because I am open</p>
+                    </mat-expansion-panel>
+                </mat-accordion>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatExpansionModule} from '@angular/material/expansion';`
+
+[Official documentation](https://https://material.angular.io/components/expansion/overview)
+
+<br />

package/src/lib/matcha-expansion/expansion.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaExpansionDirective } from './expansion.directive';
+
+@NgModule({
+    declarations: [MatchaExpansionDirective],
+    imports: [CommonModule],
+    exports: [MatchaExpansionDirective],
+})
+export class MatchaExpansionModule {}

package/src/lib/matcha-expansion/expansion.stories.ts

@@ -0,0 +1,67 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MatExpansionModule } from '@angular/material/expansion';
+
+import { expansionArgtypes } from './expansion.argtypes';
+import { MatchaExpansionDirective } from './expansion.directive';
+
+export default {
+    title: 'Atoms / Expansion',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatExpansionModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaExpansionDirective],
+        }),
+    ],
+    args: {},
+    argTypes: expansionArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const panelOpenState = false;
+export const ExpansionOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <mat-accordion>
+            <mat-expansion-panel hideToggle>
+                <mat-expansion-panel-header>
+                <mat-panel-title>
+                    This is the expansion title
+                </mat-panel-title>
+                <mat-panel-description>
+                    This is a summary of the content
+                </mat-panel-description>
+                </mat-expansion-panel-header>
+                <p>This is the primary content of the panel.</p>
+            </mat-expansion-panel>
+            <mat-expansion-panel (opened)="panelOpenState = true"
+                                (closed)="panelOpenState = false">
+                <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Self aware panel
+                </mat-panel-title>
+                <mat-panel-description>
+                    Currently I am {{panelOpenState ? 'open' : 'closed'}}
+                </mat-panel-description>
+                </mat-expansion-panel-header>
+                <p>I'm visible because I am open</p>
+            </mat-expansion-panel>
+        </mat-accordion>
+        `,
+    }),
+    name: ' Expansion Overview',
+};

package/src/lib/matcha-forms/form-field-argtype.ts

@@ -0,0 +1,60 @@
+export const formFieldArgtypes = {
+    appearance: {
+        description: 'The form field appearance style',
+        control: 'select',
+        defaultValue: 'standard',
+        table: {
+            defaultValue: { summary: 'outline' },
+        },
+        options: ['outline'],
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+    floatLabel: {
+        description: 'Whether the label should always float, never float or float as the user types',
+        control: 'select',
+        defaultValue: 'auto',
+        table: {
+            defaultValue: { summary: 'auto' },
+        },
+        options: ['always', 'never', 'auto'],
+    },
+    hideRequiredMarker: {
+        description: 'Whether the required marker should be hidden',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+    hintLabel: {
+        description: 'Text for the form field hint',
+        defaultValue: '',
+        table: {
+            type: { summary: 'text' },
+            defaultValue: { summary: '' },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+    alignHint: {
+        description: 'Whether to align the hint label at the start or end of the line',
+        control: 'select',
+        defaultValue: 'start',
+        table: {
+            defaultValue: { summary: 'start' },
+        },
+        options: ['start', 'end'],
+    },
+};

package/src/lib/matcha-forms/form-field.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matchaFormField]',
+})
+export class MatchaFormFieldDirective {
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-form-field');
+    }
+}

package/src/lib/matcha-forms/form-field.mdx

@@ -0,0 +1,20 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import LinkTo from "@storybook/addon-links/react";
+
+import linkImage from "../../../assets/open_in_new.png";
+import * as ComponentStories from "./form-field.stories";
+
+<Meta title="Atoms / Forms / Documentação" />
+
+# Form field
+
+> _mat-form-field_ is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.
+
+<br />
+
+## Installation
+
+`import {MatFormFieldModule} from '@angular/material/form-field';`
+
+[Official documentation](https://material.angular.io/components/form-field/overview)

package/src/lib/matcha-forms/{matcha-form-field.stories.ts → form-field.stories.ts}

@@ -1,61 +1,53 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { formFieldArgtypes } from './matcha-form-field-argtype';
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+import { formFieldArgtypes } from './form-field-argtype';
+import { MatchaFormFieldDirective } from './form-field.directive';
 import { MatSelectModule } from '@angular/material/select';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import {
-    FormControl,
-    FormsModule,
-    ReactiveFormsModule,
-    Validators,
-} from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
 export default {
-    title: 'Atoms / Form field',
-    // tags: ['autodocs'],
+    title: 'Atoms / Forms',
     decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
         moduleMetadata({
-            imports: [
-                BrowserAnimationsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatSelectModule,
-                MatIconModule,
-                MatButtonModule,
-                ReactiveFormsModule,
-                FormsModule,
-            ],
+            imports: [BrowserAnimationsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatIconModule, MatButtonModule, ReactiveFormsModule, FormsModule],
+            declarations: [MatchaFormFieldDirective],
         }),
     ],
+    args: {
+        appearance: 'outline',
+        color: 'accent',
+    },
+    argTypes: formFieldArgtypes,
     parameters: {
         actions: { argTypesRegex: '^on.*' },
-        controls: {
-            expanded: true,
-        },
+        controls: { expanded: true },
     },
-    argTypes: formFieldArgtypes,
 } as Meta;
 
 export const WithBasicUsage: StoryObj = {
     render: (args) => ({
         props: args,
         template: `
+            <mat-form-field matchaFormField id="email" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+                <mat-label>email</mat-label>
+                <input type="text" matInput>
+            </mat-form-field>
 
-    <mat-form-field id="email" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>email</mat-label>
-          <input type="text" matInput>
-      </mat-form-field>
-
-      <mat-form-field id="password" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input type="text" matInput>
-      </mat-form-field>
-    `,
+            <mat-form-field matchaFormField id="password" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+                <mat-label>Password</mat-label>
+                <input type="text" matInput>
+            </mat-form-field>
+        `,
     }),
     // Added an example of how to use the play function
     // For more information, see https://storybook.js.org/docs/angular/writing-tests/interaction-testing
@@ -65,17 +57,10 @@ export const WithBasicUsage: StoryObj = {
 
         // 👇 Simulate interactions with the component
         await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-        await userEvent.type(
-            canvas.getByTestId('password'),
-            'a-random-password'
-        );
+        await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
         await userEvent.click(canvas.getByRole('button'));
         // 👇 Assert DOM structure
-        await expect(
-            canvas.getByText(
-                'Everything is perfect. Your account is ready and we should probably get you started!'
-            )
-        );
+        await expect(canvas.getByText('Everything is perfect. Your account is ready and we should probably get you started!'));
     },
     name: 'basic usage',
     parameters: {
@@ -87,13 +72,16 @@ export const WithBasicUsage: StoryObj = {
 
 export const WithStateFilled: StoryObj = {
     render: (args) => ({
-        props: args,
+        props: {
+            args,
+            appearance: 'outline',
+        },
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input type="text" matInput [ngModel]="'admin'">
-      </mat-form-field>
-    `,
+            <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+                <mat-label>Password</mat-label>
+                <input type="text" matInput [ngModel]="'admin'">
+            </mat-form-field>
+        `,
     }),
     name: 'with state (filled)',
     parameters: {
@@ -110,7 +98,7 @@ export const WithStateDisabled: StoryObj = {
             appearance: 'outline',
         },
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Password</mat-label>
           <input type="text" matInput disabled>
       </mat-form-field>
@@ -131,7 +119,7 @@ export const WithStateFocused: StoryObj = {
             appearance: 'outline',
         },
         template: `
-      <mat-form-field class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Password 1</mat-label>
           <input type="text" matInput [ngModel]="'admin'">
       </mat-form-field>
@@ -152,7 +140,7 @@ export const WithStateHover: StoryObj = {
             appearance: 'outline',
         },
         template: `
-      <mat-form-field class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Password</mat-label>
           <input type="text" matInput>
       </mat-form-field>
@@ -176,7 +164,7 @@ export const WithAppearanceOutline: StoryObj = {
             appearance: 'outline',
         },
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Password</mat-label>
           <input type="text" matInput>
       </mat-form-field>
@@ -194,7 +182,7 @@ export const WithStartHint: StoryObj = {
     render: (args) => ({
         props: args,
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Password</mat-label>
           <input type="text" matInput>
           <mat-hint align="start">at least 8 characters</mat-hint>
@@ -208,7 +196,7 @@ export const WithEndHint: StoryObj = {
     render: (args) => ({
         props: args,
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Contributions</mat-label>
           <mat-select>
               <mat-option>Components</mat-option>
@@ -225,7 +213,7 @@ export const WithDoubleHints: StoryObj = {
     render: (args) => ({
         props: args,
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Username</mat-label>
           <input type="text" matInput #input [attr.maxlength]="10">
           <mat-hint align="start">Max 10 characters</mat-hint>
@@ -243,7 +231,7 @@ export const WithPrefix: StoryObj = {
             hide: true,
         },
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Password</mat-label>
           <input matInput [type]="hide ? 'password' : 'text'">
           <span class="i-matcha-action_key"></span>
@@ -265,14 +253,22 @@ export const WithSuffix: StoryObj = {
             hide: true,
         },
         template: `
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input matInput [type]="hide ? 'password' : 'text'">
-          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
-          <span class="{{hide ? 'i-matcha-visibility-on' : 'i-matcha-visibility-off'}}"></span>
-          </button>
-      </mat-form-field>
-    `,
+        <div class="d-flex-column max-w-600 gap-16">
+            <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+                <mat-label>Password</mat-label>
+                <input matInput [type]="hide ? 'password' : 'text'">
+                <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+                <span class="{{hide ? 'i-matcha-visibility-on' : 'i-matcha-visibility-off'}}"></span>
+                </button>
+            </mat-form-field>
+
+            <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+                <mat-label>Name</mat-label>
+                <input matInput #suffix_hint maxlength="50">
+                <span matSuffix class="small pr-8">{{ suffix_hint.value?.length || 0}}/50</span>
+            </mat-form-field>
+        </div>
+        `,
     }),
     name: 'with suffix',
     parameters: {
@@ -303,7 +299,7 @@ export const WithPrefixAndSuffix: StoryObj = {
           -moz-appearance: textfield;
       }
       </style>
-      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
           <mat-label>Amount</mat-label>
           <input matInput type="number" class="example-right-align" placeholder="0">
           <span matPrefix>$&nbsp;</span>
@@ -329,7 +325,7 @@ export const WithErrorMessage: StoryObj = {
             control: control,
         },
         template: `
-        <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+        <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
             <mat-label>Password</mat-label>
             <input type="text" matInput [formControl]="control">
             <mat-error *ngIf="control.hasError('required')">This field is required</mat-error>

package/src/lib/matcha-forms/forms.module.ts

@@ -1,19 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaFormInputTextDirective } from './matcha-form-input-text.directive';
-import { MatchaFormFieldAppearanceDirective } from './matcha-form-field-appearance.directive';
+import { MatchaFormFieldDirective } from './form-field.directive';
 
 @NgModule({
-    declarations: [
-        MatchaFormInputTextDirective,
-        MatchaFormFieldAppearanceDirective
-    ],
-    imports: [
-        CommonModule
-    ],
-    exports: [
-        MatchaFormInputTextDirective,
-        MatchaFormFieldAppearanceDirective
-    ]
+    declarations: [MatchaFormFieldDirective],
+    imports: [CommonModule],
+    exports: [MatchaFormFieldDirective],
 })
-export class MatchaFormsModule { }
+export class MatchaFormsModule {}

package/src/lib/matcha-headers/headers.argtype.ts

@@ -0,0 +1,14 @@
+export const headersArgtypes = {
+    bulletColor: {
+        description: 'The color theme for the bullet of the title.',
+        control: 'select',
+        defaultValue: 'surface',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', null],
+    },
+    label: {
+        control: 'text',
+    },
+};

package/src/lib/matcha-headers/headers.mdx

@@ -0,0 +1,94 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./headers.stories";
+
+<Meta title="Atoms / Headers / Documentação" />
+
+# Title
+
+> _title_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Headers overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.HeadersOverview}/>
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="d-flex-center-center gap-16">
+                    <matcha-headline bulletColor="accent">Headline Example</matcha-headline>
+                    <matcha-subhead bulletColor="accent">Subhead Example</matcha-subhead>
+                    <matcha-title bulletColor="accent">Title Example</matcha-title>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Headline overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.HeadlineOverview}/>
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="d-flex-center-center">
+                    <matcha-headline bulletColor="accent">Headline Example</matcha-headline>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Subhead overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SubheadOverview}/>
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="d-flex-center-center">
+                    <matcha-subhead bulletColor="accent">Subhead Example</matcha-subhead>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Title overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.TitleOverview}/>
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="d-flex-center-center">
+                    <matcha-title bulletColor="accent">Title Example</matcha-title>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>

package/src/lib/matcha-headers/headers.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTitleComponent } from './title/title.component';
+import { MatchaHeadlineComponent } from './headine/headline.component';
+import { MatchaSubheadComponent } from './subhead/subhead.component';
+
+@NgModule({
+    declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
+    imports: [CommonModule],
+    exports: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
+})
+export class MatchaHeadersModule {}