Skip to content
Snippets Groups Projects
Commit 09d7bdec authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

chore(sb): remove storybook examples

parent cc3006bc
No related branches found
No related tags found
2 merge requests!783V3.0.0,!665chore(sb): remove storybook examples
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 457 deletions
src/stories/Button.stories.ts deleted 100644 → 0
+ 0
− 51
View file @ cc3006bc
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',
},
};
src/stories/Header.stories.ts deleted 100644 → 0
+ 0
− 37
View file @ cc3006bc
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 = {};
src/stories/Page.stories.ts deleted 100644 → 0
+ 0
− 46
View file @ cc3006bc
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);
},
};
src/stories/User.ts deleted 100644 → 0
+ 0
− 2
View file @ cc3006bc
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface User {}
src/stories/button.component.ts deleted 100644 → 0
+ 0
− 54
View file @ cc3006bc
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];
}
}
src/stories/button.css deleted 100644 → 0
+ 0
− 30
View file @ cc3006bc
.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;
}
src/stories/header.component.ts deleted 100644 → 0
+ 0
− 61
View file @ cc3006bc
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>();
}
src/stories/header.css deleted 100644 → 0
+ 0
− 32
View file @ cc3006bc
.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;
}
src/stories/page.component.ts deleted 100644 → 0
+ 0
− 75
View file @ cc3006bc
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' };
}
}
src/stories/page.css deleted 100644 → 0
+ 0
− 69
View file @ cc3006bc
.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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment