Skip to content

Adding dialog stories #718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aidamag merged 3 commits into from
Feb 25, 2022
Merged

Adding dialog stories #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d695902
adding dialog stories
Jialecl Feb 22, 2022
3f7fe7f
adding default padding as small
Jialecl Feb 23, 2022
16a4405
updating titles
Jialecl Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
</tr>
<tr>
<td>padding: string | object</td>
<td></td>
<td>'small'</td>
<td>
Size of the padding to be applied to the component ('xxsmall' | 'xsmall' |
'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an
Expand Down
22 changes: 11 additions & 11 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ import {
} from "@angular/cdk/coercion";
import { BackgroundProviderService } from "../background-provider/service/background-provider.service";

type Space = {
xxsmall: "6px";
xsmall: "16px";
small: "24px";
medium: "36px";
large: "48px";
xlarge: "64px";
xxlarge: "100px";
};
type Space =
| "xxsmall"
| "xsmall"
| "small"
| "medium"
| "large"
| "xlarge"
| "xxlarge";
;

type Padding = {
top?: Space;
Expand Down Expand Up @@ -68,7 +68,7 @@ export class DxcDialogComponent {
* object with 'top', 'bottom', 'left' and 'right' to
* specify different padding sizes.
*/
@Input() padding: Space | Padding;
@Input() padding: Space | Padding = "small";

/**
* Value of the tabindex given to the close button.
Expand Down Expand Up @@ -101,7 +101,7 @@ export class DxcDialogComponent {
defaultInputs = new BehaviorSubject<any>({
overlay: true,
isCloseVisible: true,
padding: null,
padding: "small",
tabIndexValue: 0,
});

Expand Down
21 changes: 21 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/default-dialog.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<sb-example-container>
<sb-title title="Default dialog" [level]="2"></sb-title>
<dxc-dialog
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>

20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-large-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with large padding" [level]="2"></sb-title>
<dxc-dialog padding="large"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-medium-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with medium padding" [level]="2"></sb-title>
<dxc-dialog padding="medium"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-small-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with small padding" [level]="2"></sb-title>
<dxc-dialog padding="small"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-without-close.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog without close" [level]="2"></sb-title>
<dxc-dialog [isCloseVisible]="false"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-without-overlay.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog without overlay" [level]="2"></sb-title>
<dxc-dialog [overlay]="false"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-xlarge-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with xlarge padding" [level]="2"></sb-title>
<dxc-dialog padding="xlarge"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-xsmall-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with xsmall padding" [level]="2"></sb-title>
<dxc-dialog padding="xsmall"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-xxlarge-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with xxlarge padding" [level]="2"></sb-title>
<dxc-dialog padding="xxlarge"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
20 changes: 20 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dialog-xxsmall-padding.stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<sb-example-container>
<sb-title title="Dialog with xxsmall padding" [level]="2"></sb-title>
<dxc-dialog padding="xxsmall"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
luctus porttitor. Donec massa magna, placerat sit amet felis eget,
venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat
quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut
risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le,
risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam
nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada
urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus
euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien,
ultricies fringilla tellus id, condimentum blandit justo. Praesent quis
nunc dignissim, pharetra neque molestie, molestie lectus.
</p></dxc-dialog
>
</sb-example-container>
92 changes: 92 additions & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-dialog/storybook/dxc-dialog.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { ThemeModule } from "../../theme";
import { DxcDialogComponent } from "../dxc-dialog.component";
import { DxcDialogModule } from "../dxc-dialog.module";
import { moduleMetadata, Meta, Story } from "@storybook/angular";
import { ComponentsModule } from "../../../../.storybook/components/components.module";

export default {
title: "Dialog",
decorators: [
moduleMetadata({
imports: [
DxcDialogModule,
ComponentsModule,
ThemeModule,
],
}),
],
} as Meta;

const Default: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./default-dialog.stories.html",
props: args,
});

const WithoutOverlay: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-without-overlay.stories.html",
props: args,
});

const WithoutClose: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-without-close.stories.html",
props: args,
});

const XxsmallPadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-xxsmall-padding.stories.html",
props: args,
});

const XsmallPadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-xsmall-padding.stories.html",
props: args,
});

const SmallPadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-small-padding.stories.html",
props: args,
});

const MediumPadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-medium-padding.stories.html",
props: args,
});

const LargePadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-large-padding.stories.html",
props: args,
});

const XlargePadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-xlarge-padding.stories.html",
props: args,
});

const XxlargePadding: Story = (args) => ({
component: DxcDialogComponent,
templateUrl: "./dialog-xxlarge-padding.stories.html",
props: args,
});

export const Chromatic = Default.bind({});
export const DialogWithoutOverlay = WithoutOverlay.bind({});
export const DialogWithoutClose = WithoutClose.bind({});
export const DialogWithXxsmallPadding = XxsmallPadding.bind({});
export const DialogWithXsmallPadding = XsmallPadding.bind({});
export const DialogWithSmallPadding = SmallPadding.bind({});
export const DialogWithMediumPadding = MediumPadding.bind({});
export const DialogWithLargePadding = LargePadding.bind({});
export const DialogWithXlargePadding = XlargePadding.bind({});
export const DialogWithXxlargePadding = XxlargePadding.bind({});

Chromatic.parameters = {
};