diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
deleted file mode 100644
index 8f280fb0c7634b60a3b6b7c28f4ec8b88009c0b4..0000000000000000000000000000000000000000
--- a/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import Button from './button.component';
-
-// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
-const meta: Meta<Button> = {
- title: 'Example/Button',
- component: Button,
- tags: ['autodocs'],
- render: (args: Button) => ({
- props: {
- backgroundColor: null,
- ...args,
- },
- }),
- argTypes: {
- backgroundColor: {
- control: 'color',
- },
- },
-};
-
-export default meta;
-type Story = StoryObj<Button>;
-
-// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
-export const Primary: Story = {
- args: {
- primary: true,
- label: 'Button',
- },
-};
-
-export const Secondary: Story = {
- args: {
- label: 'Button',
- },
-};
-
-export const Large: Story = {
- args: {
- size: 'large',
- label: 'Button',
- },
-};
-
-export const Small: Story = {
- args: {
- size: 'small',
- label: 'Button',
- },
-};
diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts
deleted file mode 100644
index b7dba18630af76d86bb44b65b7aa19c60ca792f2..0000000000000000000000000000000000000000
--- a/src/stories/Header.stories.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { moduleMetadata } from '@storybook/angular';
-import type { Meta, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-
-import Button from './button.component';
-import Header from './header.component';
-
-const meta: Meta<Header> = {
- title: 'Example/Header',
- component: Header,
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/angular/writing-docs/autodocs
- tags: ['autodocs'],
- render: (args) => ({ props: args }),
- decorators: [
- moduleMetadata({
- declarations: [Button],
- imports: [CommonModule],
- }),
- ],
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
- layout: 'fullscreen',
- },
-};
-
-export default meta;
-type Story = StoryObj<Header>;
-
-export const LoggedIn: Story = {
- args: {
- user: {
- name: 'Jane Doe',
- },
- },
-};
-
-export const LoggedOut: Story = {};
diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts
deleted file mode 100644
index e7f3c0e9a3b6f9f7df85515ee6e93ef92f5f111c..0000000000000000000000000000000000000000
--- a/src/stories/Page.stories.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { within, userEvent } from '@storybook/testing-library';
-import { CommonModule } from '@angular/common';
-
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
-
-const meta: Meta<Page> = {
- title: 'Example/Page',
- component: Page,
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
- layout: 'fullscreen',
- },
- decorators: [
- moduleMetadata({
- declarations: [Button, Header],
- imports: [CommonModule],
- }),
- ],
-};
-
-export default meta;
-type Story = StoryObj<Page>;
-
-export const LoggedOut: Story = {
- render: (args: Page) => ({
- props: args,
- }),
-};
-
-// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
-export const LoggedIn: Story = {
- render: (args: Page) => ({
- props: args,
- }),
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
- const loginButton = await canvas.getByRole('button', {
- name: /Log in/i,
- });
- await userEvent.click(loginButton);
- },
-};
diff --git a/src/stories/User.ts b/src/stories/User.ts
deleted file mode 100644
index 2f7fcecb5d7483ea4448ee5f513e636f41e9527b..0000000000000000000000000000000000000000
--- a/src/stories/User.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface User {}
diff --git a/src/stories/button.component.ts b/src/stories/button.component.ts
deleted file mode 100644
index 7fd39f170a2d85dda00fdab3bf7cbb9f68c3f2e9..0000000000000000000000000000000000000000
--- a/src/stories/button.component.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
- selector: 'storybook-button',
- imports: [CommonModule],
- template: ` <button
- type="button"
- [ngClass]="classes"
- [ngStyle]="{ 'background-color': backgroundColor }"
- (click)="onClick.emit($event)"
- >
- {{ label }}
- </button>`,
- styleUrls: ['./button.css'],
-})
-export default class ButtonComponent {
- /**
- * Is this the principal call to action on the page?
- */
- @Input()
- primary = false;
-
- /**
- * What background color to use
- */
- @Input()
- backgroundColor?: string;
-
- /**
- * How large should the button be?
- */
- @Input()
- size: 'small' | 'medium' | 'large' = 'medium';
-
- /**
- * Button contents
- * @required
- */
- @Input()
- label = 'Button';
-
- /**
- * Optional click handler
- */
- @Output()
- onClick = new EventEmitter<Event>();
-
- public get classes(): string[] {
- const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-
- return ['storybook-button', `storybook-button--${this.size}`, mode];
- }
-}
diff --git a/src/stories/button.css b/src/stories/button.css
deleted file mode 100644
index dc91dc76370b78ec277e634f8615b67ca55a5145..0000000000000000000000000000000000000000
--- a/src/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-weight: 700;
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- line-height: 1;
-}
-.storybook-button--primary {
- color: white;
- background-color: #1ea7fd;
-}
-.storybook-button--secondary {
- color: #333;
- background-color: transparent;
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
- font-size: 12px;
- padding: 10px 16px;
-}
-.storybook-button--medium {
- font-size: 14px;
- padding: 11px 20px;
-}
-.storybook-button--large {
- font-size: 16px;
- padding: 12px 24px;
-}
diff --git a/src/stories/header.component.ts b/src/stories/header.component.ts
deleted file mode 100644
index 53c3441e16e2e1f1da71f845e3aacbcdf3d44a7e..0000000000000000000000000000000000000000
--- a/src/stories/header.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import type { User } from './User';
-
-@Component({
- selector: 'storybook-header',
- template: `<header>
- <div class="storybook-header">
- <div>
- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fillRule="evenodd">
- <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
- <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
- <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
- </g>
- </svg>
- <h1>Acme</h1>
- </div>
- <div>
- <div *ngIf="user">
- <span class="welcome">
- Welcome, <b>{{ user.name }}</b
- >!
- </span>
- <storybook-button *ngIf="user" size="small" label="Log out" (onClick)="onLogout.emit($event)" />
- </div>
- <div *ngIf="!user">
- <storybook-button
- *ngIf="!user"
- size="small"
- class="margin-left"
- label="Log in"
- (onClick)="onLogin.emit($event)"
- />
- <storybook-button
- *ngIf="!user"
- primary
- size="small"
- primary="true"
- class="margin-left"
- label="Sign up"
- (onClick)="onCreateAccount.emit($event)"
- />
- </div>
- </div>
- </div>
- </header>`,
- styleUrls: ['./header.css'],
-})
-export default class HeaderComponent {
- @Input()
- user: User | null = null;
-
- @Output()
- onLogin = new EventEmitter<Event>();
-
- @Output()
- onLogout = new EventEmitter<Event>();
-
- @Output()
- onCreateAccount = new EventEmitter<Event>();
-}
diff --git a/src/stories/header.css b/src/stories/header.css
deleted file mode 100644
index d9a70528a3a15f66ba3f044d2df7dfd4ab13ba41..0000000000000000000000000000000000000000
--- a/src/stories/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- padding: 15px 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.storybook-header svg {
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header h1 {
- font-weight: 700;
- font-size: 20px;
- line-height: 1;
- margin: 6px 0 6px 10px;
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header button + button {
- margin-left: 10px;
-}
-
-.storybook-header .welcome {
- color: #333;
- font-size: 14px;
- margin-right: 10px;
-}
diff --git a/src/stories/page.component.ts b/src/stories/page.component.ts
deleted file mode 100644
index 2afc2ceef256d8fa4939e842ca22b48931095b04..0000000000000000000000000000000000000000
--- a/src/stories/page.component.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Component } from '@angular/core';
-import type { User } from './User';
-
-@Component({
- selector: 'storybook-page',
- template: `<article>
- <storybook-header
- [user]="user"
- (onLogout)="doLogout()"
- (onLogin)="doLogin()"
- (onCreateAccount)="doCreateAccount()"
- />
- <section class="storybook-page">
- <h2>Pages in Storybook</h2>
- <p>
- We recommend building UIs with a
- <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
- <strong>component-driven</strong>
- </a>
- process starting with atomic components and ending with pages.
- </p>
- <p>
- Render pages with mock data. This makes it easy to build and review page states without needing to navigate to
- them in your app. Here are some handy patterns for managing page data in Storybook:
- </p>
- <ul>
- <li>
- Use a higher-level connected component. Storybook helps you compose such data from the "args" of child
- component stories
- </li>
- <li>
- Assemble data in the page component from your services. You can mock these services out using Storybook.
- </li>
- </ul>
- <p>
- Get a guided tutorial on component-driven development at
- <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
- Storybook tutorials
- </a>
- . Read more in the
- <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
- .
- </p>
- <div class="tip-wrapper">
- <span class="tip">Tip</span> Adjust the width of the canvas with the
- <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fillRule="evenodd">
- <path
- d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
- id="a"
- fill="#999"
- />
- </g>
- </svg>
- Viewports addon in the toolbar
- </div>
- </section>
- </article>`,
- styleUrls: ['./page.css'],
-})
-export default class PageComponent {
- user: User | null = null;
-
- doLogout(): void {
- this.user = null;
- }
-
- doLogin(): void {
- this.user = { name: 'Jane Doe' };
- }
-
- doCreateAccount(): void {
- this.user = { name: 'Jane Doe' };
- }
-}
diff --git a/src/stories/page.css b/src/stories/page.css
deleted file mode 100644
index 098dad1185004ab518e187af166632b0d90c0ea7..0000000000000000000000000000000000000000
--- a/src/stories/page.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.storybook-page {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 24px;
- padding: 48px 20px;
- margin: 0 auto;
- max-width: 600px;
- color: #333;
-}
-
-.storybook-page h2 {
- font-weight: 700;
- font-size: 32px;
- line-height: 1;
- margin: 0 0 4px;
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-page p {
- margin: 1em 0;
-}
-
-.storybook-page a {
- text-decoration: none;
- color: #1ea7fd;
-}
-
-.storybook-page ul {
- padding-left: 30px;
- margin: 1em 0;
-}
-
-.storybook-page li {
- margin-bottom: 8px;
-}
-
-.storybook-page .tip {
- display: inline-block;
- border-radius: 1em;
- font-size: 11px;
- line-height: 12px;
- font-weight: 700;
- background: #e7fdd8;
- color: #66bf3c;
- padding: 4px 12px;
- margin-right: 10px;
- vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
- font-size: 13px;
- line-height: 20px;
- margin-top: 40px;
- margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
- display: inline-block;
- height: 12px;
- width: 12px;
- margin-right: 4px;
- vertical-align: top;
- margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
- fill: #1ea7fd;
-}