Skip to content

Commit

Permalink
Intro page and basic example for all components
Browse files Browse the repository at this point in the history
  • Loading branch information
Phyele committed May 2, 2024
1 parent a706b71 commit b92b988
Show file tree
Hide file tree
Showing 10 changed files with 691 additions and 28 deletions.
456 changes: 440 additions & 16 deletions projects/layout-components/documentation.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host {
display: block;
}
46 changes: 46 additions & 0 deletions projects/layout-components/src/stories/columns.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import {
argsToTemplate,
moduleMetadata,
type Meta,
type StoryObj,
} from '@storybook/angular';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { ColumnsComponent } from '../lib/columns/columns.component';
import { ColumnComponent } from '../lib/column/column.component';

/**
* The Columns component creates horizontal layouts that don't wrap. Use the Column component to determine the column size. If not specified, Column fits its content.
*/
const meta: Meta<typeof ColumnsComponent> = {
title: 'Components/Columns',
component: ColumnsComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [PlaceholderComponent, ColumnComponent],
}),
],
render: (args) => ({
props: args,
template: `<columns ${argsToTemplate(args)}>
<column width="240px">
<placeholder></placeholder>
</column>
<column>
<placeholder></placeholder>
</column>
<column flexGrow="1">
<placeholder></placeholder>
</column>
</columns>`,
}),
};
export default meta;

type Story = StoryObj<ColumnsComponent>;

export const Basic: Story = {
args: {
gap: '16px',
},
};
35 changes: 35 additions & 0 deletions projects/layout-components/src/stories/content-block.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import {
argsToTemplate,
moduleMetadata,
type Meta,
type StoryObj,
} from '@storybook/angular';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { ContentBlockComponent } from '../lib/content-block/content-block.component';

/**
* The Content Block component limits the maximum width of their children.
*/
const meta: Meta<typeof ContentBlockComponent> = {
title: 'Components/Content Block',
component: ContentBlockComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [PlaceholderComponent],
}),
],
render: (args) => ({
props: args,
template: `<content-block ${argsToTemplate(args)}>
<placeholder></placeholder>
</content-block>`,
}),
};
export default meta;

type Story = StoryObj<ContentBlockComponent>;

export const Basic: Story = {
args: {},
};
41 changes: 41 additions & 0 deletions projects/layout-components/src/stories/inline.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {
argsToTemplate,
moduleMetadata,
type Meta,
type StoryObj,
} from '@storybook/angular';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { InlineComponent } from '../lib/inline/inline.component';

/**
* The Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary.
*/
const meta: Meta<typeof InlineComponent> = {
title: 'Components/Inline',
component: InlineComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [PlaceholderComponent],
}),
],
render: (args) => ({
props: args,
template: `<inline ${argsToTemplate(args)}>
<placeholder width="120px"></placeholder>
<placeholder width="240px"></placeholder>
<placeholder width="160px"></placeholder>
<placeholder width="320px"></placeholder>
<placeholder width="120px"></placeholder>
</inline>`,
}),
};
export default meta;

type Story = StoryObj<InlineComponent>;

export const Basic: Story = {
args: {
gap: '16px',
},
};
37 changes: 37 additions & 0 deletions projects/layout-components/src/stories/inset.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {
argsToTemplate,
moduleMetadata,
type Meta,
type StoryObj,
} from '@storybook/angular';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { InsetComponent } from '../lib/inset/inset.component';

/**
* The Inset component creates a container with padding.
*/
const meta: Meta<typeof InsetComponent> = {
title: 'Components/Inset',
component: InsetComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [PlaceholderComponent],
}),
],
render: (args) => ({
props: args,
template: `<inset ${argsToTemplate(args)}>
<placeholder></placeholder>
</inset>`,
}),
};
export default meta;

type Story = StoryObj<InsetComponent>;

export const Basic: Story = {
args: {
padding: '40px',
},
};
39 changes: 37 additions & 2 deletions projects/layout-components/src/stories/intro.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,43 @@
import { Meta, Canvas } from "@storybook/blocks";
import { Meta, Title, Subtitle, Description, Canvas } from "@storybook/blocks";
import * as InsetStories from "./inset.stories";
import * as StackStories from "./stack.stories";
import * as InlineStories from "./inline.stories";
import * as ColumnsStories from "./columns.stories";
import * as TilesStories from "./tiles.stories";
import * as ContentBlockStories from "./content-block.stories";

<Meta title="Intro" />

Per esempio lo Stack si usa così:
<Title>Layout components</Title>
Layout components are containers that represent the most common spacing and alignment
rules that are usually employed in constructing an interface.

## Inset

<Description of={InsetStories} />
<Canvas of={InsetStories.Basic} />

## Stack

<Description of={StackStories} />
<Canvas of={StackStories.Basic} />

## Inline

<Description of={InlineStories} />
<Canvas of={InlineStories.Basic} />

## Columns & Column

<Description of={ColumnsStories} />
<Canvas of={ColumnsStories.Basic} />

## Tiles

<Description of={TilesStories} />
<Canvas of={TilesStories.Basic} />

## Content Block

<Description of={ContentBlockStories} />
<Canvas of={ContentBlockStories.Basic} />
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ import { Component, HostBinding, Input } from '@angular/core';
standalone: true,
imports: [],
template: `<p>Placeholder</p>`,
styleUrls: ['./placeholder.component.scss']
styleUrls: ['./placeholder.component.scss'],
})
export class PlaceholderComponent {
@HostBinding('style.width') @Input({ required: true }) width: string | undefined;
@HostBinding('style.width') @Input({ required: true }) width:
| string
| undefined;
}
12 changes: 4 additions & 8 deletions projects/layout-components/src/stories/stack.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ import {
type Meta,
type StoryObj,
} from '@storybook/angular';
import { StackComponent } from '../lib/stack/stack.component';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { StackComponent } from '../lib/stack/stack.component';

/**
* The Stack component is used to arrange its children vertically.
*/
const meta: Meta<typeof StackComponent> = {
title: 'Components/Stack',
component: StackComponent,
Expand Down Expand Up @@ -34,10 +37,3 @@ export const Basic: Story = {
gap: '16px',
},
};

export const AlignHorizontal: Story = {
args: {
gap: '16px',
alignItems: 'flex-end',
}
}
44 changes: 44 additions & 0 deletions projects/layout-components/src/stories/tiles.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import {
argsToTemplate,
moduleMetadata,
type Meta,
type StoryObj,
} from '@storybook/angular';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { TilesComponent } from '../lib/tiles/tiles.component';

/**
* The Tiles component is used to create grid-like layouts.
*/
const meta: Meta<typeof TilesComponent> = {
title: 'Components/Tiles',
component: TilesComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [PlaceholderComponent],
}),
],
render: (args) => ({
props: args,
template: `<tiles ${argsToTemplate(args)}>
<placeholder></placeholder>
<placeholder></placeholder>
<placeholder></placeholder>
<placeholder></placeholder>
<placeholder></placeholder>
<placeholder></placeholder>
<placeholder></placeholder>
<placeholder></placeholder>
</tiles>`,
}),
};
export default meta;

type Story = StoryObj<TilesComponent>;

export const Basic: Story = {
args: {
gap: '16px',
},
};

0 comments on commit b92b988

Please sign in to comment.