diff --git a/apps/ui-e2e/src/component/breadcrumbs.component.cy.ts b/apps/ui-e2e/src/component/breadcrumbs.component.cy.ts index 8838a78f1..41d708a1c 100644 --- a/apps/ui-e2e/src/component/breadcrumbs.component.cy.ts +++ b/apps/ui-e2e/src/component/breadcrumbs.component.cy.ts @@ -7,7 +7,7 @@ describe('BreadcrumbsComponent', () => { cy.loadStory('Angular Breadcrumbs', 'Default') .get('cvi-ng-breadcrumbs') .shouldExist('cvi-ng-track') - .shouldNotExist('cvi-ng-icon') + .shouldNotBeVisible('cvi-ng-icon') .shouldHaveClasses('ul', 'cvi-breadcrumbs__items') .shouldHaveClasses('li', 'cvi-breadcrumbs__item') .shouldHaveClasses('a', 'cvi-breadcrumbs__item-link'); diff --git a/apps/ui-e2e/src/component/datepicker.component.cy.ts b/apps/ui-e2e/src/component/datepicker.component.cy.ts index 3af33fd9a..5e847f0d6 100644 --- a/apps/ui-e2e/src/component/datepicker.component.cy.ts +++ b/apps/ui-e2e/src/component/datepicker.component.cy.ts @@ -5,7 +5,7 @@ describe('DatepickerComponent', () => { it('renders default story', () => { cy.loadStory('Angular Form Datepicker', 'Default') - .shouldHaveClasses('cvi-ng-datepicker', 'cvi-textfield') + .shouldHaveClasses('cvi-ng-datepicker', 'cvi-datepicker') .shouldHaveClasses('input', 'cvi-datepicker__input-field') .changeArg('htmlId', 'Qwerty123') .shouldHaveAttributes('input', [ @@ -21,8 +21,8 @@ describe('DatepickerComponent', () => { .changeArg('disabled', true); cy.shouldHaveClasses('cvi-ng-datepicker', [ - 'cvi-textfield', - 'cvi-datepicker__input-container--is-disabled', + 'cvi-datepicker', + 'cvi-datepicker--is-disabled', ]) .shouldHaveAttributes('input', [{ name: 'id', value: 'Qwerty123' }]) .and('be.disabled'); @@ -30,7 +30,7 @@ describe('DatepickerComponent', () => { cy.get('cvi-ng-datepicker') .changeArg('disabled', false) .shouldNotHaveClasses('cvi-ng-datepicker', [ - 'cvi-datepicker__input-container--is-disabled', + 'cvi-datepicker--is-disabled', ]); }); @@ -38,7 +38,7 @@ describe('DatepickerComponent', () => { cy.loadStory('Angular Form Datepicker', 'Default') .get('cvi-ng-datepicker') .click() - .shouldHaveClasses('cvi-ng-datepicker-calendar div', [ + .shouldHaveClasses('cvi-ng-datepicker-calendar > div', [ 'cvi-datepicker__calendar', ]) .get('button.cvi-datepicker__calendar-button') @@ -55,7 +55,7 @@ describe('DatepickerComponent', () => { .should('have.value', '') .type('28.02.2023') .click() - .shouldHaveClasses('cvi-ng-datepicker-calendar div', [ + .shouldHaveClasses('cvi-ng-datepicker-calendar > div', [ 'cvi-datepicker__calendar', ]) .get('button.cvi-datepicker__calendar-button') diff --git a/apps/ui-e2e/src/component/radio-group.component.cy.ts b/apps/ui-e2e/src/component/radio-group.component.cy.ts index dd299a71e..1d6a44c43 100644 --- a/apps/ui-e2e/src/component/radio-group.component.cy.ts +++ b/apps/ui-e2e/src/component/radio-group.component.cy.ts @@ -18,7 +18,7 @@ describe('RadioGroupComponent', () => { }); it('Renders option radio buttons group and clicks first button', () => { - cy.loadStory('Angular Form Radio Button Group', 'Option Button') + cy.loadStory('Angular Form Radio Button Group', 'With Option Buttons') .runRadioGroupCommonTest('regular') .get('[data-cy="option_1"]') .within(() => { @@ -39,7 +39,10 @@ describe('RadioGroupComponent', () => { }); it('Renders option button compact and clicks first button', () => { - cy.loadStory('Angular Form Radio Button Group', 'Option Button Compact') + cy.loadStory( + 'Angular Form Radio Button Group', + 'With Compact Option Buttons' + ) .runRadioGroupCommonTest('compact') .get('[data-cy="option_1"]') .within(() => { diff --git a/apps/ui-e2e/src/component/steps.component.cy.ts b/apps/ui-e2e/src/component/steps.component.cy.ts index 4c3d9f226..4e8241f7c 100644 --- a/apps/ui-e2e/src/component/steps.component.cy.ts +++ b/apps/ui-e2e/src/component/steps.component.cy.ts @@ -36,18 +36,10 @@ describe('StepsComponent', () => { ]); }); - it('Renders mobile steps and clicks on the first step', () => { - cy.loadStory('Angular Steps Steps', 'Mobile').setDevice('mobile'); - - cy.shouldExist('[data-cy="steps-description"]'); - - cy.runStepsCommonTest(); - }); - it('Renders steps with observable titles and clicks on the first step', () => { - cy.loadStory( - 'Angular Steps Steps', - 'With Observable Titles' - ).runStepsCommonTest(); + cy.loadStory('Angular Steps Steps', 'With Observable Titles'); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(1500); + cy.runStepsCommonTest(); }); }); diff --git a/libs/ng-diagrams/src/lib/hierarchical-box-diagram/hierarchical-box-diagram.component.stories.ts b/libs/ng-diagrams/src/lib/hierarchical-box-diagram/hierarchical-box-diagram.component.stories.ts index 36d286daf..7333bf7e4 100644 --- a/libs/ng-diagrams/src/lib/hierarchical-box-diagram/hierarchical-box-diagram.component.stories.ts +++ b/libs/ng-diagrams/src/lib/hierarchical-box-diagram/hierarchical-box-diagram.component.stories.ts @@ -1,15 +1,10 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import { HierarchicalBoxDiagramComponent } from './hierarchical-box-diagram.component'; import notes from './hierarchical-box-diagram.component.html.md'; export default { title: 'Angular Diagrams/Hierarchical Box Diagram', component: HierarchicalBoxDiagramComponent, - decorators: [ - moduleMetadata({ - imports: [], - }), - ], parameters: { notes, layout: 'fullscreen', @@ -32,80 +27,75 @@ export default { }, } as Meta; -const Template: Story = ( - args: HierarchicalBoxDiagramComponent -) => ({ - props: args, -}); - -export const Default = Template.bind({}); -Default.args = { - boxes: [ - { - ...baseBoxStyles('#F0F0F2', 'solid', '#D73E3E'), - id: '1', - href: 'https://example.com/1', - label: '

Health concern

', - targets: ['2', '7'], - }, - ...defaultBoxes([ +export const Default = { + args: { + boxes: [ { - id: '2', - href: 'https://example.com/2', - label: 'I have a minor health issue', - targets: ['3', '4', '5'], + ...baseBoxStyles('#F0F0F2', 'solid', '#D73E3E'), + id: '1', + href: 'https://example.com/1', + label: '

Health concern

', + targets: ['2', '7'], }, - { id: '3', href: 'https://example.com/3', label: 'Pharmacy' }, - { id: '4', href: 'https://example.com/4', label: 'Helpline 1220' }, + ...defaultBoxes([ + { + id: '2', + href: 'https://example.com/2', + label: 'I have a minor health issue', + targets: ['3', '4', '5'], + }, + { id: '3', href: 'https://example.com/3', label: 'Pharmacy' }, + { id: '4', href: 'https://example.com/4', label: 'Helpline 1220' }, + { + id: '5', + href: 'https://example.com/5', + label: 'Family doctor', + targets: ['6', '9'], + }, + ]), { - id: '5', - href: 'https://example.com/5', - label: 'Family doctor', - targets: ['6', '9'], + ...dottedBoxStyles('#B9D2E5', '#3B85BD'), + id: '6', + href: 'https://example.com/6', + label: 'Specialist doctor', + targets: ['9'], }, - ]), - { - ...dottedBoxStyles('#B9D2E5', '#3B85BD'), - id: '6', - href: 'https://example.com/6', - label: 'Specialist doctor', - targets: ['9'], - }, - { - ...baseBoxStyles('#CECFD8'), - id: '9', - href: 'https://example.com/9', - label: 'Conclusions/Referrals', - targets: ['10', '11'], - }, - { - ...dottedBoxStyles('#ECF4EF', '#399E43'), - id: '10', - href: 'https://example.com/10', - label: 'Treatment at home', - }, - { - ...baseBoxStyles('#FBEDED'), - id: '7', - href: 'https://example.com/7', - label: 'I have an acute health issue and need emergency care', - targets: ['8'], - }, - { - ...baseBoxStyles('#FCEEEE'), - id: '8', - href: 'https://example.com/8', - label: 'Call 112 or go to ER', - targets: ['11'], - }, - { - ...dottedBoxStyles('#FCEEEE', '#D73E3E'), - id: '11', - href: 'https://example.com/11', - label: 'Hospitalization', - targets: ['9'], - }, - ], + { + ...baseBoxStyles('#CECFD8'), + id: '9', + href: 'https://example.com/9', + label: 'Conclusions/Referrals', + targets: ['10', '11'], + }, + { + ...dottedBoxStyles('#ECF4EF', '#399E43'), + id: '10', + href: 'https://example.com/10', + label: 'Treatment at home', + }, + { + ...baseBoxStyles('#FBEDED'), + id: '7', + href: 'https://example.com/7', + label: 'I have an acute health issue and need emergency care', + targets: ['8'], + }, + { + ...baseBoxStyles('#FCEEEE'), + id: '8', + href: 'https://example.com/8', + label: 'Call 112 or go to ER', + targets: ['11'], + }, + { + ...dottedBoxStyles('#FCEEEE', '#D73E3E'), + id: '11', + href: 'https://example.com/11', + label: 'Hospitalization', + targets: ['9'], + }, + ], + }, }; function baseBoxStyles( diff --git a/libs/storybook/src/lib/stories/icons/list.stories.mdx b/libs/storybook/src/lib/stories/icons/list.stories.mdx index 65b1198df..73f7428af 100644 --- a/libs/storybook/src/lib/stories/icons/list.stories.mdx +++ b/libs/storybook/src/lib/stories/icons/list.stories.mdx @@ -1,42 +1,8 @@ import {Meta, Story} from '@storybook/addon-docs'; -import { storybookIconsNames } from '../../../../../ui/src/lib/icons/storybook-icons'; +import * as IconsListStories from './list.stories.ts'; - - -export const Template = (args) => ({ - props: { - ...args, - icons: storybookIconsNames, - filteredIcons: storybookIconsNames, - filterIcons: (query, icons) => { - return query ? icons.filter(iconName => iconName.includes(query)) : icons; - } - }, - template: ` - - - - - - - ` -}); + Switch to *Canvas* tab for a full-screen view. - - { Template.bind({}) } - + diff --git a/libs/storybook/src/lib/stories/icons/list.stories.ts b/libs/storybook/src/lib/stories/icons/list.stories.ts new file mode 100644 index 000000000..5248d602a --- /dev/null +++ b/libs/storybook/src/lib/stories/icons/list.stories.ts @@ -0,0 +1,49 @@ +import { Meta } from '@storybook/angular'; +// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries +import { storybookIconsNames } from '../../../../../ui/src/lib/icons/storybook-icons'; + +export default { + title: 'Icons/Available Icons', + parameters: { + layout: 'padded', + axe: { + skip: true, + }, + chromatic: { disableSnapshot: true }, + backgrounds: { + default: 'Darkgray', + }, + }, + argTypes: { + fill: { + name: 'Icon color', + control: { type: 'color' }, + }, + }, + args: { + fill: 'red', + }, +} as Meta; + +export const Default = { + render: (args: any) => ({ + props: { + ...args, + icons: storybookIconsNames, + filteredIcons: storybookIconsNames, + filterIcons: (query: string, icons: string[]) => { + return query + ? icons.filter((iconName) => iconName.includes(query)) + : icons; + }, + }, + template: ` + + + + + + + `, + }), +}; diff --git a/libs/styles/src/lib/scss/components/_datepicker.scss b/libs/styles/src/lib/scss/components/_datepicker.scss index bef9e8eda..3689b4e0d 100644 --- a/libs/styles/src/lib/scss/components/_datepicker.scss +++ b/libs/styles/src/lib/scss/components/_datepicker.scss @@ -4,47 +4,45 @@ --comment: 'A datepicker'; @at-root { - #{$base}__input { - &-container { - background-color: get-color(white); - border: 1px solid var(--cvi-form-input-border-color); - border-radius: map.get($cvi-radii, s); - display: flex; - align-items: center; - width: 125px; - height: var(--cvi-form-inline-input-height); + #{$base}__input-container { + border: 1px solid var(--cvi-form-input-border-color); + border-radius: map.get($cvi-radii, s); + display: flex; + align-items: center; + width: 125px; + height: var(--cvi-form-inline-input-height); + background-color: get-color(white); - &--focused { - border-color: transparent; - outline: var(--cvi-border-focus); - } + &--focused { + border-color: transparent; + outline: var(--cvi-border-focus); + } - &--is-disabled & { - background-color: get-color(black-coral-0); - border-color: get-color(black-coral-5); - } + #{$base}--is-disabled & { + background-color: get-color(black-coral-0); + border-color: get-color(black-coral-5); } + } - &-field { - font-size: get-font-size(100); - border-radius: map.get($cvi-radii, s); - padding: 8px; - width: 96px; + #{$base}__input-field { + font-size: get-font-size(100); + border-radius: map.get($cvi-radii, s); + padding: 8px; + width: 96px; - &:focus { - outline: none; - } + &:focus { + outline: none; } + } - &-icon-wrapper { - fill: get-color(black-coral-10); - display: block; - padding-top: 6px; - } + #{$base}__input-icon-wrapper { + fill: get-color(black-coral-10); + display: block; + padding-top: 6px; + } - &-icon { - width: 18px; - } + #{$base}__input-icon { + width: 18px; } #{$base}__calendar { diff --git a/libs/ui/src/lib/accordion/accordion.component.stories.ts b/libs/ui/src/lib/accordion/accordion.component.stories.ts index 41c1921a9..68630ce2c 100644 --- a/libs/ui/src/lib/accordion/accordion.component.stories.ts +++ b/libs/ui/src/lib/accordion/accordion.component.stories.ts @@ -1,8 +1,7 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import { concatMap, delay, from, of } from 'rxjs'; import notes from './accordion.component.md'; import { AccordionComponent } from './accordion.component'; -import { UiModule } from '../ui.module'; export default { title: 'Angular/Accordion', @@ -22,107 +21,98 @@ export default { ], ]).pipe(concatMap((item) => of(item).pipe(delay(500)))), }, - decorators: [ - moduleMetadata({ - imports: [UiModule], - }), - ], } as Meta; -const Template: Story = (args: AccordionComponent) => ({ - props: args, - /* template */ - template: ` - - - -

Some content here. Yes! In your face, Gandhi! I'll get my kit! And I'd do it again! And perhaps a third time! But that would be it. What are you hacking off? Is it my torso?! 'It is!' My precious torso! OK, if everyone's finished being stupid.

- - - - - Qua qua - - - - - Howdy! - - - - - One helluva content - - - - -

{{elem.content}}

- - - - `, -}); - -export const Default = Template.bind({}); -Default.args = {}; +export const Default = { + render: (args: AccordionComponent) => ({ + props: args, + /* template */ + template: ` + + + +

Some content here. Yes! In your face, Gandhi! I'll get my kit! And I'd do it again! And perhaps a third time! But that would be it. What are you hacking off? Is it my torso?! 'It is!' My precious torso! OK, if everyone's finished being stupid.

+ + + + + Qua qua + + + + + Howdy! + + + + + One helluva content + + + + +

{{elem.content}}

+ + + + `, + }), +}; -export const Mobile = Template.bind({}); -Mobile.parameters = { - layout: 'fullscreen', - backgrounds: { - default: 'light', - }, - viewport: { - defaultViewport: 'iphone12mini', +export const Mobile = { + ...Default, + parameters: { + layout: 'fullscreen', + viewport: { + defaultViewport: 'iphone12mini', + }, }, }; -const TemplateHTMLInTitle: Story = (args) => ({ - props: args, - /* template */ - template: ` - - - -

Custom title with custom HTML and a flag

- - - - - - - - - -

Some content here. Yes! In your face, Gandhi! I'll get my kit! And I'd do it again! And perhaps a third time! But that would be it. What are you hacking off? Is it my torso?! 'It is!' My precious torso! OK, if everyone's finished being stupid.

- - - - `, -}); - -export const WithHTMLInTitle = TemplateHTMLInTitle.bind({}); -WithHTMLInTitle.args = {}; - -const TemplateCustomHeader: Story = (args) => ({ - props: args, - /* template */ - template: ` - - - -

Custom header with custom HTML and a button

- - - -

Some content here. Yes! In your face, Gandhi! I'll get my kit! And I'd do it again! And perhaps a third time! But that would be it. What are you hacking off? Is it my torso?! 'It is!' My precious torso! OK, if everyone's finished being stupid.

- - - - `, -}); +export const WithHTMLInTitle = { + render: (args: AccordionComponent) => ({ + props: args, + /* template */ + template: ` + + + +

Custom title with custom HTML and a flag

+ + + + + + + + + +

Some content here. Yes! In your face, Gandhi! I'll get my kit! And I'd do it again! And perhaps a third time! But that would be it. What are you hacking off? Is it my torso?! 'It is!' My precious torso! OK, if everyone's finished being stupid.

+ + + + `, + }), +}; -export const WithCustomHeader = TemplateCustomHeader.bind({}); -WithCustomHeader.args = {}; +export const WithCustomHeader = { + render: (args: AccordionComponent) => ({ + props: args, + /* template */ + template: ` + + + +

Custom header with custom HTML and a button

+ + + +

Some content here. Yes! In your face, Gandhi! I'll get my kit! And I'd do it again! And perhaps a third time! But that would be it. What are you hacking off? Is it my torso?! 'It is!' My precious torso! OK, if everyone's finished being stupid.

+ + + + `, + }), +}; diff --git a/libs/ui/src/lib/accordion/accordion.html.stories.ts b/libs/ui/src/lib/accordion/accordion.html.stories.ts index 1956c0607..9d43bb99c 100644 --- a/libs/ui/src/lib/accordion/accordion.html.stories.ts +++ b/libs/ui/src/lib/accordion/accordion.html.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import notes from './accordion.html.md'; export default { @@ -9,90 +9,87 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - /* template */ - template: ` -
-
    -
  • -
    - -
    -
    -
    -

    An accordion

    +export const Default = { + render: () => ({ + /* template */ + template: ` +
    +
      +
    • +
      +
      -
    -
    • -
  • -
    - -
    -
    -
    - Viimati muudetud 23.12.2023 | Teksti koostas Justiitsministeerium +
    +
    +

    An accordion

    +
    -
    -

    An accordion

    +
    • +
  • +
    +
    -
- -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • +
  • +
    +
    - -
    • - - - `, -}); - -export const Default = Template.bind({}); -Default.args = {}; + + +
  • +
    + +
    + +
    • + + + `, + }), +}; -export const Mobile = Template.bind({}); -Mobile.parameters = { - layout: 'fullscreen', - backgrounds: { - default: 'light', - }, - viewport: { - defaultViewport: 'iphone12mini', +export const Mobile = { + ...Default, + parameters: { + layout: 'fullscreen', + viewport: { + defaultViewport: 'iphone12mini', + }, }, }; diff --git a/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.stories.ts b/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.stories.ts index 8d80f39f3..b573f3fe4 100644 --- a/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.stories.ts +++ b/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import notes from './breadcrumbs.component.md'; import { BreadcrumbsComponent } from './breadcrumbs.component'; @@ -17,51 +17,24 @@ export default { href: '/abiellumine/abielu-solmimine/avalduse-esitamine', }, ], + iconName: 'arrow_a_left', }, } as Meta; -const Template: Story = (args: BreadcrumbsComponent) => ({ - props: args, - /* template */ - template: ` - - `, -}); +export const Default = {}; -export const Default = Template.bind({}); -Default.args = {}; - -const TemplateWithIcon: Story = ( - args: BreadcrumbsComponent -) => ({ - props: args, - /* template */ - template: ` - - - `, -}); - -export const Mobile = TemplateWithIcon.bind({}); -Mobile.args = { - iconName: 'arrow_a_left', -}; -Mobile.parameters = { - viewport: { - defaultViewport: 'iphone12mini', +export const Mobile = { + ...Default, + parameters: { + viewport: { + defaultViewport: 'iphone12mini', + }, }, }; -export const MobileSkipLastBreadcrumb = TemplateWithIcon.bind({}); -MobileSkipLastBreadcrumb.args = { - iconName: 'arrow_a_left', - skipLastBreadcrumbMobile: true, -}; -MobileSkipLastBreadcrumb.parameters = { - viewport: { - defaultViewport: 'iphone12mini', +export const MobileSkipLastBreadcrumb = { + ...Mobile, + args: { + skipLastBreadcrumbMobile: true, }, }; diff --git a/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.ts b/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.ts index 123401674..829e75232 100644 --- a/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.ts +++ b/libs/ui/src/lib/breadcrumbs/breadcrumbs.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, + HostBinding, Input, Output, } from '@angular/core'; @@ -16,6 +17,7 @@ export class BreadcrumbsComponent { @Input() breadcrumbs!: { title: string; href: string | undefined }[]; /** Name of an icon in front of breadcrumb */ + // TODO: the icon is always the same (arrow_a_left), the prop should be removed @Input() iconName: CviIconName | null = null; @Input() skipLastBreadcrumbMobile = false; diff --git a/libs/ui/src/lib/breadcrumbs/breadcrumbs.html.stories.ts b/libs/ui/src/lib/breadcrumbs/breadcrumbs.html.stories.ts index e13299bd1..713ead42d 100644 --- a/libs/ui/src/lib/breadcrumbs/breadcrumbs.html.stories.ts +++ b/libs/ui/src/lib/breadcrumbs/breadcrumbs.html.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import notes from './breadcrumbs.html.md'; export default { @@ -9,39 +9,34 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - /* template */ - template: ` -
    -
    - - - - - - +export const Default = { + render: () => ({ + /* template */ + template: ` +
    +
    + + + + + + +
    -
    - `, -}); - -export const Default = Template.bind({}); + `, + }), +}; -export const Mobile = Template.bind({}); -Mobile.parameters = { - viewport: { - defaultViewport: 'iphone12mini', +export const Mobile = { + ...Default, + parameters: { + viewport: { + defaultViewport: 'iphone12mini', + }, }, }; diff --git a/libs/ui/src/lib/button/button.component.stories.ts b/libs/ui/src/lib/button/button.component.stories.ts index d116145e6..747c800d5 100644 --- a/libs/ui/src/lib/button/button.component.stories.ts +++ b/libs/ui/src/lib/button/button.component.stories.ts @@ -1,16 +1,20 @@ -import { Story, Meta, componentWrapperDecorator } from '@storybook/angular'; +import { Meta, componentWrapperDecorator } from '@storybook/angular'; import notes from './button.component.md'; import { ButtonComponent } from './button.component'; import { storybookIconsNames } from '../icons/storybook-icons'; +const wrapperDecorators = [ + componentWrapperDecorator(ButtonComponent, ({ args }) => { + return args; + }), +]; + export default { title: 'Angular/Button', component: ButtonComponent, parameters: { notes }, argTypes: { appearance: { - name: 'Appearance', - options: ['primary', 'secondary', 'text'], control: { type: 'inline-radio' }, }, iconName: { @@ -29,129 +33,118 @@ export default { svgClass: { control: false }, args: { content: 'Button label', - appearance: 'primary', - disabled: false, }, } as Meta; -const Template: Story = (args: ButtonComponent) => ({ - props: args, - /* template */ - template: ` - {{ content }} - `, -}); - -export const Default = Template.bind({}); -Default.args = {}; - -export const Secondary = Template.bind({}); -Secondary.args = { - appearance: 'secondary', +export const Default = { + render: (args: ButtonComponent) => ({ + props: args, + template: `{{ content }}`, + }), + decorators: wrapperDecorators, }; -export const Small = Template.bind({}); -Small.args = { - size: 's', +export const Secondary = { + ...Default, + args: { + appearance: 'secondary', + }, }; -export const Text = Template.bind({}); -Text.args = { - appearance: 'text', +export const Small = { + ...Default, + args: { + size: 's', + }, }; -export const WithIcon = Template.bind({}); -WithIcon.args = { - iconName: 'add', - iconPosition: 'after', +export const Text = { + ...Default, + args: { + appearance: 'text', + }, }; -export const WithIconSmall = Template.bind({}); -WithIconSmall.args = { - size: 's', - iconName: 'add', - iconPosition: 'after', +export const WithIcon = { + ...Default, + args: { + iconName: 'add', + iconPosition: 'after', + }, }; -export const WithIconBefore = Template.bind({}); -WithIconBefore.args = { - iconName: 'add', - iconPosition: 'before', +export const WithIconSmall = { + ...Default, + args: { + size: 's', + iconName: 'add', + iconPosition: 'after', + }, }; -const TemplateWithCustomColor: Story = ( - args: ButtonComponent -) => ({ - props: args, - styles: [ - `:host { - --cvi-button-color: var(--cvi-color-jasper-10); - --cvi-button-color--hover: var(--cvi-color-jasper-12); - }`, - ], - /* template */ - template: ` - - {{ content }} - - `, -}); - -export const WithCustomColor = TemplateWithCustomColor.bind({}); - -const TemplateTextWithoutUnderline: Story = ( - args: ButtonComponent -) => ({ - props: args, - styles: [ - `:host { - --cvi-button--text-decoration: none; - }`, - ], - /* template */ - template: ` - - {{ content }} - - `, -}); +export const WithIconBefore = { + ...Default, + args: { + iconName: 'add', + iconPosition: 'before', + }, +}; -export const TextWithoutUnderline = TemplateTextWithoutUnderline.bind({}); -TextWithoutUnderline.args = { - appearance: 'text', +export const WithCustomColor = { + render: (args: ButtonComponent) => ({ + props: args, + styles: [ + `:host { + --cvi-button-color: var(--cvi-color-jasper-10); + --cvi-button-color--hover: var(--cvi-color-jasper-12); + }`, + ], + template: `{{ content }}`, + }), + decorators: wrapperDecorators, }; -TextWithoutUnderline.decorators = [ - componentWrapperDecorator((story) => { - return ` + +export const TextWithoutUnderline = { + render: (args: ButtonComponent) => ({ + props: { + ...args, + appearance: 'text', + }, + styles: [ + `:host { + --cvi-button--text-decoration: none; + }`, + ], + template: `{{ content }}`, + }), + decorators: [ + ...wrapperDecorators, + componentWrapperDecorator((story) => { + return ` Apply --cvi-button--text-decoration: none CSS variable on the component host or its ancestor to remove the underline. ${story} `; - }), -]; - -const TemplateWithCustomIconStyle: Story = ( - args: ButtonComponent -) => ({ - props: args, - styles: [ - ` - ::ng-deep .svg-class { - fill: red; - } - `, + }), ], - /* template */ - template: ` - - {{ content }} - - `, -}); +}; -export const WithCustomIconStyle = TemplateWithCustomIconStyle.bind({}); -WithCustomIconStyle.args = { - iconName: 'add', - iconPosition: 'after', +export const WithCustomIconStyle = { + ...Default, + render: (args: ButtonComponent) => ({ + props: args, + styles: [ + `::ng-deep .svg-class { + fill: red; + }`, + ], + template: `{{ content }}`, + }), + args: { + iconName: 'add', + iconPosition: 'after', + svgClass: 'svg-class', + }, + decorators: wrapperDecorators, }; diff --git a/libs/ui/src/lib/button/button.html.stories.ts b/libs/ui/src/lib/button/button.html.stories.ts index d2cfad363..198c9bdfd 100644 --- a/libs/ui/src/lib/button/button.html.stories.ts +++ b/libs/ui/src/lib/button/button.html.stories.ts @@ -1,4 +1,4 @@ -import { Meta, Story, componentWrapperDecorator } from '@storybook/angular'; +import { Meta, componentWrapperDecorator } from '@storybook/angular'; import notes from './button.html.md'; import { ButtonAppearance, ButtonSize } from './button'; @@ -20,7 +20,7 @@ export default { }, size: { name: 'Size', - options: [ButtonSize.S, ButtonSize.M], + options: [ButtonSize.M, ButtonSize.S], control: { type: 'inline-radio' }, }, }, @@ -32,78 +32,76 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - /* template */ - template: ` -
    - -
    - `, -}); - -export const Default = Template.bind({}); -Default.args = {}; - -export const Secondary = Template.bind({}); -Secondary.args = { - appearance: ButtonAppearance.SECONDARY, +export const Default = { + render: (args: unknown) => ({ + props: args, + /* template */ + template: ` +
    + +
    + `, + }), }; -export const Small = Template.bind({}); -Small.args = { - size: ButtonSize.S, +export const Secondary = { + ...Default, + args: { + appearance: ButtonAppearance.SECONDARY, + }, }; -export const Text = Template.bind({}); -Text.args = { - appearance: ButtonAppearance.TEXT, +export const Small = { + ...Default, + args: { + size: ButtonSize.S, + }, }; -const TemplateWithCustomColor: Story = (args) => ({ - props: args, - styles: [ - `:host { - --cvi-button-color: var(--cvi-color-jasper-10); - --cvi-button-color--hover: var(--cvi-color-jasper-12); - }`, - ], - /* template */ - template: ` -
    - -
    - `, -}); +export const Text = { + ...Default, + args: { + appearance: ButtonAppearance.TEXT, + }, +}; -export const WithCustomColor = TemplateWithCustomColor.bind({}); +export const WithCustomColor = { + render: (args: unknown) => ({ + props: args, + /* template */ + template: ` +
    + +
    + `, + }), +}; -const TemplateTextWithoutUnderline: Story = (args) => ({ - props: args, - styles: [ - `:host { - --cvi-button--text-decoration: none; - }`, +export const TextWithoutUnderline = { + args: { + appearance: ButtonAppearance.TEXT, + }, + render: (args: unknown) => ({ + props: args, + styles: [ + `:host { + --cvi-button--text-decoration: none; + }`, + ], + template: ` +
    + +
    + `, + }), + decorators: [ + componentWrapperDecorator((story) => { + return ` + + Define --cvi-button--text-decoration: none CSS variable on the element or its ancestor to remove the underline. + + ${story} + `; + }), ], - /* template */ - template: ` -
    - -
    - `, -}); - -export const TextWithoutUnderline = TemplateTextWithoutUnderline.bind({}); -TextWithoutUnderline.args = { - appearance: ButtonAppearance.TEXT, }; -TextWithoutUnderline.decorators = [ - componentWrapperDecorator((story) => { - return ` - - Define --cvi-button--text-decoration: none CSS variable on the element or its ancestor to remove the underline. - - ${story} - `; - }), -]; diff --git a/libs/ui/src/lib/circle/circle.component.stories.ts b/libs/ui/src/lib/circle/circle.component.stories.ts index 06e43c6c2..e736070bb 100644 --- a/libs/ui/src/lib/circle/circle.component.stories.ts +++ b/libs/ui/src/lib/circle/circle.component.stories.ts @@ -1,9 +1,15 @@ -import { Meta, Story } from '@storybook/angular'; +import { Meta, componentWrapperDecorator } from '@storybook/angular'; import { concatMap, delay, from, of } from 'rxjs'; import { CircleComponent } from './circle.component'; import notes from './circle.component.md'; import { storybookIconsNames } from '../icons/storybook-icons'; +const wrapperDecorators = [ + componentWrapperDecorator(CircleComponent, ({ args }) => { + return args; + }), +]; + export default { title: 'Angular/Circle', component: CircleComponent, @@ -36,6 +42,12 @@ export default { name: 'Progress', control: { type: 'range', min: 0, max: 100, step: 1 }, }, + content: { + name: 'Content', + table: { + category: 'Playground', + }, + }, }, args: { theme: 'dark', @@ -43,82 +55,75 @@ export default { size: 's', iconName: undefined, progressPercentage: undefined, + content: '4', }, } as Meta; -const Template: Story = (args: CircleComponent) => ({ - props: { - ...args, - }, - template: ` - 4 - `, -}); - -export const Default = Template.bind({}); +export const Default = { + render: (args: CircleComponent) => ({ + props: args, + template: `{{ content }}`, + }), + decorators: wrapperDecorators, +}; -export const WithLightTheme = Template.bind({}); -WithLightTheme.parameters = { - backgrounds: { - default: 'Dark', +export const WithLightTheme = { + ...Default, + parameters: { + backgrounds: { + default: 'Dark', + }, + }, + args: { + theme: 'light', }, }; -WithLightTheme.args = { - theme: 'light', + +export const WithIcon = { + ...Default, + args: { + iconName: 'close', + }, }; -export const WithIcon = Template.bind({}); -WithIcon.args = { - iconName: 'close', +export const WithProgress = { + render: (args: CircleComponent) => ({ + props: { + ...args, + progress$: from([20, 40, 60, 80, 100]).pipe( + concatMap((item) => of(item).pipe(delay(800))) + ), + }, + template: ` + + {{ progress }} + + `, + }), }; -const TemplateProgress: Story = (args: CircleComponent) => ({ - props: { - ...args, - progress$: from([20, 40, 60, 80, 100]).pipe( - concatMap((item) => of(item).pipe(delay(800))) - ), - }, - template: ` - +export const WithCustomBorderColor = { + render: (args: CircleComponent) => ({ + props: args, + template: ` {{ progress }} - - `, -}); -export const WithProgress = TemplateProgress.bind({}); - -const CustomBorderTemplate: Story = ( - args: CircleComponent -) => ({ - props: { - ...args, + [progressPercentage]="progressPercentage" + style="--cvi-circle-border-color: --cvi-color-sea-green-10" + >4 + `, + }), + args: { + theme: 'light', + severity: 'success', }, - template: ` - 4 - `, -}); - -export const WithCustomBorderColor = CustomBorderTemplate.bind({}); -WithCustomBorderColor.args = { - theme: 'light', - severity: 'success', }; diff --git a/libs/ui/src/lib/circle/circle.html.stories.ts b/libs/ui/src/lib/circle/circle.html.stories.ts index 41363832d..10f322eb5 100644 --- a/libs/ui/src/lib/circle/circle.html.stories.ts +++ b/libs/ui/src/lib/circle/circle.html.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import notes from './circle.html.md'; export default { @@ -21,45 +21,45 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - template: ` - {{ content }} - `, -}); - -export const Default = Template.bind({}); - -const TemplateWithIcon: Story = (args) => ({ - props: args, - template: ` - - - - - - `, -}); - -export const WithIcon = TemplateWithIcon.bind({}); - -const TemplateWithSeverity: Story = (args) => ({ - props: args, - template: ` - {{ content }} - `, -}); +export const Default: StoryObj = { + render: (args: any) => ({ + props: args, + template: ` + {{ content }} + `, + }), +}; -export const WithSeverity = TemplateWithSeverity.bind({}); -WithSeverity.parameters = { - backgrounds: { default: 'Gray' }, +export const WithIcon: StoryObj = { + render: (args: any) => ({ + props: args, + template: ` + + + + + + `, + }), }; -const TemplateWithProgress: Story = (args) => ({ - props: args, - template: ` - {{ content }} - `, -}); +export const WithSeverity: StoryObj = { + render: (args: any) => ({ + props: args, + template: ` + {{ content }} + `, + }), + parameters: { + backgrounds: { default: 'Gray' }, + }, +}; -export const WithProgress = TemplateWithProgress.bind({}); +export const WithProgress: StoryObj = { + render: (args: any) => ({ + props: args, + template: ` + {{ content }} + `, + }), +}; diff --git a/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts b/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts index 400650bf3..8eda368d0 100644 --- a/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts +++ b/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts @@ -1,61 +1,60 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import { ConfirmationModalComponent } from './confirmation-modal.component'; export default { title: 'Angular/Modal/Confirmation modal', component: ConfirmationModalComponent, + argTypes: { + content: { + name: 'Open', + control: { + type: 'boolean', + }, + table: { + category: 'Playground', + }, + }, + }, args: { modalTitle: 'Attention!!', confirmButtonText: 'Confirm', cancelButtonText: 'Cancel', + open: false, }, } as Meta; -const Template: Story = ( - args: ConfirmationModalComponent -) => ({ - props: args, - template: ` - - -

    Are you sure about changes?

    -

    All will be lost!!!

    -     -     - Open modal - `, -}); - -export const Default = Template.bind({}); +export const Default = { + render: (args: ConfirmationModalComponent) => ({ + props: args, + /* template */ + template: ` + + +

    Are you sure about changes?

    +

    All will be lost!!!

    +     +     + Open modal + `, + }), +}; -export const Mobile = Template.bind({}); -Mobile.parameters = { - viewport: { - defaultViewport: 'iphone12mini', +export const ModalOpen = { + ...Default, + args: { + open: true, }, }; -const TemplateModalOpen: Story = ( - args: ConfirmationModalComponent -) => ({ - props: args, - template: ` - - -

    Are you sure about changes?

    -

    All will be lost!!!

    -     -     - Open modal - `, -}); - -export const ModalOpen = TemplateModalOpen.bind({}); +export const Mobile = { + ...Default, + parameters: { + viewport: { + defaultViewport: 'iphone12mini', + }, + }, +}; diff --git a/libs/ui/src/lib/content-container/content-container.component.stories.ts b/libs/ui/src/lib/content-container/content-container.component.stories.ts index 8fc02beec..2e5994e84 100644 --- a/libs/ui/src/lib/content-container/content-container.component.stories.ts +++ b/libs/ui/src/lib/content-container/content-container.component.stories.ts @@ -1,7 +1,13 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta, componentWrapperDecorator } from '@storybook/angular'; import notes from './content-container.component.md'; import { ContentContainerComponent } from './content-container.component'; +const wrapperDecorators = [ + componentWrapperDecorator(ContentContainerComponent, ({ args }) => { + return args; + }), +]; + export default { title: 'Angular/Content container', parameters: { notes, layout: 'padded' }, @@ -19,13 +25,10 @@ export default { }, } as Meta; -const Template: Story = ( - args: ContentContainerComponent -) => ({ - props: args, - template: ` - {{ content }} - `, -}); - -export const Default = Template.bind({}); +export const Default = { + render: (args: ContentContainerComponent) => ({ + props: args, + template: `{{ content }}`, + }), + decorators: wrapperDecorators, +}; diff --git a/libs/ui/src/lib/content-container/content-container.html.stories.ts b/libs/ui/src/lib/content-container/content-container.html.stories.ts index 4889a7ec9..88d93dc1c 100644 --- a/libs/ui/src/lib/content-container/content-container.html.stories.ts +++ b/libs/ui/src/lib/content-container/content-container.html.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import notes from './content-container.html.md'; export default { @@ -22,15 +22,14 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - /* template */ - template: ` -
    - {{ content }} -
    - `, -}); - -export const Default = Template.bind({}); -Default.args = {}; +export const Default = { + render: (args: unknown) => ({ + props: args, + /* template */ + template: ` +
    + {{ content }} +
    + `, + }), +}; diff --git a/libs/ui/src/lib/content-panel/content-panel.component.stories.ts b/libs/ui/src/lib/content-panel/content-panel.component.stories.ts index e7a602a29..b08444357 100644 --- a/libs/ui/src/lib/content-panel/content-panel.component.stories.ts +++ b/libs/ui/src/lib/content-panel/content-panel.component.stories.ts @@ -1,7 +1,13 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta, componentWrapperDecorator } from '@storybook/angular'; import notes from './content-panel.component.md'; import { ContentPanelComponent } from './content-panel.component'; +const wrapperDecorators = [ + componentWrapperDecorator(ContentPanelComponent, ({ args }) => { + return args; + }), +]; + export default { title: 'Angular/Content panel', parameters: { notes, layout: 'padded' }, @@ -20,18 +26,17 @@ export default { }, } as Meta; -const Template: Story = ( - args: ContentPanelComponent -) => ({ - props: args, - template: ` - {{ content }} - `, -}); - -export const Default = Template.bind({}); +export const Default = { + render: (args: ContentPanelComponent) => ({ + props: args, + template: `{{ content }}`, + }), + decorators: wrapperDecorators, +}; -export const WithNoTitle = Template.bind({}); -WithNoTitle.args = { - title: '', +export const WithNoTitle = { + ...Default, + args: { + title: '', + }, }; diff --git a/libs/ui/src/lib/content-panel/content-panel.html.stories.ts b/libs/ui/src/lib/content-panel/content-panel.html.stories.ts index b9d09027d..253f7ea2a 100644 --- a/libs/ui/src/lib/content-panel/content-panel.html.stories.ts +++ b/libs/ui/src/lib/content-panel/content-panel.html.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import notes from './content-panel.html.md'; export default { @@ -23,15 +23,15 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - /* template */ - template: ` -
    -

    {{ title }}

    - {{ content }} -
    - `, -}); - -export const Default = Template.bind({}); +export const Default = { + render: (args: unknown) => ({ + props: args, + /* template */ + template: ` +
    +

    {{ title }}

    + {{ content }} +
    + `, + }), +}; diff --git a/libs/ui/src/lib/datepicker/datepicker.component.stories.ts b/libs/ui/src/lib/datepicker/datepicker.component.stories.ts index 0dce6f44f..4692d69f1 100644 --- a/libs/ui/src/lib/datepicker/datepicker.component.stories.ts +++ b/libs/ui/src/lib/datepicker/datepicker.component.stories.ts @@ -1,6 +1,5 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { UiModule } from '../ui.module'; import notes from './datepicker.component.md'; import { DatepickerComponent } from './datepicker.component'; @@ -8,7 +7,7 @@ export default { title: 'Angular/Form/Datepicker', decorators: [ moduleMetadata({ - imports: [UiModule, ReactiveFormsModule], + imports: [ReactiveFormsModule], }), ], parameters: { notes }, @@ -19,21 +18,40 @@ export default { }, } as Meta; -const Template: Story = (args: DatepickerComponent) => ({ - props: args, - template: ` - - - `, -}); +export const Default = { + render: (args: DatepickerComponent) => ({ + props: args, + /* template */ + template: ` + + `, + }), +}; + +export const WithCustomPlaceholder = { + ...Default, + args: { + placeholder: 'dd.mm.yyyy', + }, +}; + +export const WithDisabled = { + ...Default, + args: { + disabled: true, + }, +}; -export const Default = Template.bind({}); -Default.storyName = 'Default'; -Default.args = {}; +export const OnNonWhiteBackground = { + ...Default, + parameters: { + backgrounds: { + default: 'Gray', + }, + }, +}; -const FormTemplate: Story = ( +const FormTemplate: StoryFn = ( args: DatepickerComponent ) => { const form = new FormGroup({ @@ -58,34 +76,19 @@ const FormTemplate: Story = ( /* template */ template: `
    - - - + + +
    Inserted value: {{selectedValue()}}
    `, }; }; -export const WithFormGroup = FormTemplate.bind({}); - -export const WithCustomPlaceholder = Template.bind({}); -WithCustomPlaceholder.args = { - placeholder: 'dd.mm.yyyy', -}; - -export const OnNonWhiteBackground = Template.bind({}); -OnNonWhiteBackground.parameters = { - backgrounds: { - default: 'Gray', - }, -}; -export const WithDisabled = Template.bind({}); -WithDisabled.args = { - disabled: true, +export const WithFormGroup = { + render: FormTemplate, }; diff --git a/libs/ui/src/lib/datepicker/datepicker.component.ts b/libs/ui/src/lib/datepicker/datepicker.component.ts index ba4276114..b9a8f7f96 100644 --- a/libs/ui/src/lib/datepicker/datepicker.component.ts +++ b/libs/ui/src/lib/datepicker/datepicker.component.ts @@ -102,9 +102,7 @@ export class DatepickerComponent implements ControlValueAccessor { @HostBinding('class') get getHostClasses(): string { const baseClass = 'cvi-datepicker'; - return `cvi-textfield${ - this.disabled ? ` ${baseClass}__input-container--is-disabled` : '' - }`; + return `${baseClass}${this.disabled ? ` ${baseClass}--is-disabled` : ''}`; } constructor( diff --git a/libs/ui/src/lib/datepicker/datepicker.html.stories.ts b/libs/ui/src/lib/datepicker/datepicker.html.stories.ts index 2d1cd7658..a33e9a13c 100644 --- a/libs/ui/src/lib/datepicker/datepicker.html.stories.ts +++ b/libs/ui/src/lib/datepicker/datepicker.html.stories.ts @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/angular'; +import { Meta } from '@storybook/angular'; import notes from './datepicker.html.md'; export default { @@ -9,164 +9,164 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ - props: args, - /* template */ - template: ` -
    -
    - - Nõutud kuupäeva formaat: dd.MM.yyyy - -
    - -
    -
    -
    06.06.2023
    -
    -