-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Intro page and basic example for all components
- Loading branch information
Showing
10 changed files
with
691 additions
and
28 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
:host { | ||
display: block; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
35
projects/layout-components/src/stories/content-block.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: {}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}, | ||
}; |