@testgorilla/tgo-ui 2.10.1 → 2.10.2

package/projects/tgo-canopy-ui/components/button/button.component.stories.ts

@@ -1,455 +0,0 @@
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { IconComponentModule } from '../../components/icon/icon.component.module';
-import { ButtonComponent } from './button.component';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { BadgeComponentModule } from '../badge/badge.component.module';
-import { transformTheme } from '../../utils/transform-theme';
-
-export default {
-  title: 'Button',
-  component: ButtonComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [MatButtonModule, IconComponentModule, MatProgressSpinnerModule, MatTooltipModule, BadgeComponentModule],
-      declarations: [ButtonComponent],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      label: 'Button',
-      variant: 'primary',
-      applicationTheme: _theme,
-      ...args,
-      iconName: 'Book',
-    },
-  };
-};
-
-export const Basic = Template.bind({});
-
-Basic.parameters = {
-  controls: {
-    exclude: [],
-  },
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const ButtonOnlyLabel: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-    .colum { align-items: center; justify-content: center; display: flex; }
-    .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px }
-    .dark { background-color: black }
-  `,
-      ],
-      template: `
-    <div class="row">
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="primary" label="Primary"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="secondary" label="Secondary"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="ghost" label="Ghost"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" iconName="Book" variant="destructive" label="Destructive"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="tertiary" label="Tertiary"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="tab" label="Tab"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="text" label="Text"></ui-button></div>
-  </div>`,
-    };
-  },
-} as Story;
-
-ButtonOnlyLabel.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const ButtonAsLink: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <div>
-        <p>Big size</p>
-        Sample sentance with <ui-button applicationTheme="${_theme}" variant="link" urlTarget="_blank" href="https://www.testgorilla.com/" label="Large"></ui-button> link</div>
-        <hr>
-        <div>
-        <p>Medium size</p>
-        Sample sentance with <ui-button applicationTheme="${_theme}" size="medium" variant="link" urlTarget="_blank" href="https://www.testgorilla.com/" label="Medium"></ui-button> link
-        <hr>
-        <p>Small size</p>
-        Sample sentance with <ui-button applicationTheme="${_theme}" size="small" variant="link" urlTarget="_blank" href="https://www.testgorilla.com/" label="Small"></ui-button> link
-        <hr>
-      </div>`,
-    };
-  },
-} as Story;
-ButtonAsLink.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const Disabled: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-    .colum { align-items: center; justify-content: center; display: flex; }
-    .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px }
-    h4 { margin: 16px 0 }
-    .dark { background-color: black }
-  `,
-      ],
-      template: `<div class="row"><div class="colum"><ui-button applicationTheme="${_theme}" variant="primary" [disabled]="true" label="Primary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="secondary" [disabled]="true" label="Secondary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="ghost" [disabled]="true" label="Ghost"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="destructive" iconName="Book" [disabled]="true" label="Destructive"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tertiary" [disabled]="true" label="Tertiary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tab" [disabled]="true" label="Tab"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="text" [disabled]="true" label="Text"></ui-button></div></div>
-  <h4>Only icon</h4>
-  <div class="row">
-  <div class="colum"> <ui-button applicationTheme="${_theme}" variant="primary" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="secondary" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="ghost" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="destructive" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tertiary" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tab" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="text" [disabled]="true" [justIcon]="true" iconName="Test"></ui-button></div></div>`,
-    };
-  },
-} as Story;
-Disabled.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const LabelIconLeft: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-      .colum { align-items: center; justify-content: center; display: flex; }
-      .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px }
-      .dark { background-color: black }
-    `,
-      ],
-      template: `<div class="row"><div class="colum"><ui-button applicationTheme="${_theme}" variant="primary" iconName="Book" iconPosition="left" label="Primary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="secondary" iconName="Book" iconPosition="left" label="Secondary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="ghost" iconName="Book" iconPosition="left" label="Ghost"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="destructive" iconName="Book" iconPosition="left" label="Destructive"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tertiary" iconName="Book" iconPosition="left" label="Tertiary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tab" iconName="Book" iconPosition="left" label="Tab"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="text" iconName="Book" iconPosition="left" label="Text"></ui-button></div></div>`,
-    };
-  },
-} as Story;
-
-LabelIconLeft.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const LabelIconRight: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-  .colum { align-items: center; justify-content: center; display: flex; }
-  .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px }
-  .dark { background-color: black }
-  `,
-      ],
-      template: `<div class="row"><div class="colum"><ui-button applicationTheme="${_theme}" variant="primary" iconName="Close" iconPosition="right" label="Primary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="secondary" iconName="Close" iconPosition="right" label="Secondary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="ghost" iconName="Close" iconPosition="right" label="Ghost"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="destructive" iconName="Close" iconPosition="right" label="Destructive"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tertiary" iconName="Close" iconPosition="right" label="Tertiary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="tab" iconName="Close" iconPosition="right" label="Tab"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" variant="text" iconName="Close" iconPosition="right" label="Text"></ui-button></div></div>`,
-    };
-  },
-} as Story;
-
-LabelIconRight.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const OnlyIcon: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-  .colum { align-items: center; justify-content: center; display: flex; }
-  .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px}
-  .dark { background-color: black }
-  `,
-      ],
-      template: `<div class="row"><div class="colum">
-  <ui-button variant="primary" [justIcon]="true" applicationTheme="${_theme}" iconName="Book"></ui-button></div>
-  <div class="colum"><ui-button variant="secondary" applicationTheme="${_theme}" [justIcon]="true" iconName="Book"></ui-button></div>
-  <div class="colum"><ui-button variant="ghost" applicationTheme="${_theme}" [justIcon]="true" iconName="Book"></ui-button></div>
-  <div class="colum"><ui-button variant="destructive" applicationTheme="${_theme}" [justIcon]="true" iconName="Book"></ui-button></div>
-  <div class="colum"><ui-button variant="tertiary" applicationTheme="${_theme}" [justIcon]="true" iconName="Book"></ui-button></div>
-  <div class="colum"><ui-button variant="tab" applicationTheme="${_theme}" [justIcon]="true" iconName="Book"></ui-button></div>
-  <div class="colum"><ui-button variant="text" applicationTheme="${_theme}" [justIcon]="true" iconName="Book"></ui-button></div></div>`,
-    };
-  },
-} as Story;
-OnlyIcon.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const Loading: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-      .colum { align-items: center; justify-content: center; display: flex; }
-      .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
-      `,
-      ],
-      template: `<div class="row"><div class="colum">
-      <ui-button applicationTheme="${_theme}" variant="primary" [loading]="true"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="secondary" [loading]="true"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="ghost" [loading]="true"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="destructive" iconName="Test" [loading]="true"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="tertiary" [loading]="true"></ui-button></div>
-      <div class="colum"><ui-button applicationTheme="${_theme}" variant="text" [loading]="true"></ui-button></div></div>`,
-    };
-  },
-} as Story;
-Loading.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const Small: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-      .colum { align-items: center; justify-content: center; display: flex; }
-      .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
-      .dark { background-color: black; padding: 30px; }
-      `,
-      ],
-      template: `<div class="row"><div class="colum">
-      <ui-button variant="primary" size="small" applicationTheme=${_theme} [loading]="true"></ui-button></div>
-      <div class="colum"><ui-button size="small" applicationTheme=${_theme} variant="secondary" label="Secondary" iconName="Add" [justIcon]="true"></ui-button></div>
-      <div class="colum"><ui-button size="small" applicationTheme=${_theme} variant="ghost" iconName="Close" iconPosition="right" label="Ghost"></ui-button></div>
-      <div class="colum"><ui-button size="small" applicationTheme=${_theme} variant="destructive" iconName="Devices" iconPosition="left" label="Destructive"></ui-button></div>
-      <div class="colum"><ui-button size="small" applicationTheme=${_theme} variant="tertiary" label="Tertiary"></ui-button></div>
-      <div class="colum"><ui-button size="small" applicationTheme=${_theme} variant="tab" label="Tab"></ui-button></div>
-      <div class="colum"><ui-button size="small" applicationTheme=${_theme} variant="text" label="Text"></ui-button></div></div>`,
-    };
-  },
-} as Story;
-Small.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const FullWidth: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-      .row { display:block }
-      .row ui-button { margin-bottom: 10px; display: block; }
-      .row ui-button:last-child { margin-bottom: 0;}
-      `,
-      ],
-      template: `<div class="row">
-      <ui-button variant="primary" applicationTheme=${_theme} [fullWidth]="true" label="Primary"></ui-button>
-      <ui-button variant="secondary" applicationTheme=${_theme} [fullWidth]="true" iconName="Devices" iconPosition="right" label="Secondary"></ui-button>
-      <ui-button variant="ghost" applicationTheme=${_theme} [fullWidth]="true" iconName="Close" iconPosition="left" label="Ghost"></ui-button></div>`,
-    };
-  },
-} as Story;
-
-FullWidth.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const MenuTrigger: Story = () => ({
-  styles: [
-    `
-  .colum { align-items: center; justify-content: center; display: flex; }
-  .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
-  `,
-  ],
-  template: `<div class="row">
-  <div class="colum"><ui-button variant="menuTrigger" [justIcon]="true" iconName="Settings"></ui-button></div>
-  <div class="colum"><ui-button variant="menuTrigger" [justIcon]="true" iconName="Menu-ellipsis"></ui-button></div>
-  <div class="colum"><ui-button variant="menuTrigger" [justIcon]="true" iconName="Folder"></ui-button></div>
-  <div class="colum"><ui-button variant="menuTrigger" [justIcon]="true" iconName="Plus"></ui-button></div></div>`,
-});
-
-MenuTrigger.parameters = {
-  docs: {
-    description: {
-      story: 'This style is meant to be only for button element that triggers `overflow-menu`',
-    },
-  },
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const MenuCell: Story = () => ({
-  styles: [
-    `
-  .colum { align-items: center; justify-content: center; display: flex; }
-  .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
-  `,
-  ],
-  template: `<div class="row">
-  <div class="colum"><ui-button variant="menuCell" iconPosition="left" iconName="Copy" label="Copy"></ui-button></div>
-  <div class="colum"><ui-button variant="menuCell" iconPosition="left" iconName="Edit" label="Edit"></ui-button></div>
-  <div class="colum"><ui-button variant="menuCell" iconPosition="left" iconName="Delete" label="Delete"></ui-button></div></div>`,
-});
-
-MenuCell.parameters = {
-  docs: {
-    description: {
-      story: 'This style is meant to be only for menu items in `overflow-menu` component',
-    },
-  },
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const IconButton: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-
-    return {
-      styles: ['div { margin-bottom: 16px }'],
-      template: `
-    <div>
-      <h4>Enabled: </h4>
-      <ui-button applicationTheme="${_theme}" variant="icon-button" tooltip="Icon Button Tooltip" iconName="Settings"></ui-button>
-    </div>
-    <div>
-      <h4>Disabled: </h4>
-      <ui-button applicationTheme="${_theme}" variant="icon-button" tooltip="Icon Button Tooltip" iconName="Settings" disabled="true"></ui-button>
-    </div>
-  `,
-    };
-  },
-} as Story;
-IconButton.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-9883&mode=design&t=c2pEymTeiu5SHFCn-0',
-  },
-};
-
-export const PremiumButton: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-    .colum { align-items: center; justify-content: center; display: flex; }
-    .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px }
-    .dark { background-color: black }
-  `,
-      ],
-      template: `<div class="row"><div class="colum"><ui-button applicationTheme="${_theme}" isPremium="true" variant="primary" label="Primary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" isPremium="true" variant="secondary" label="Secondary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" isPremium="true" variant="ghost" label="Ghost"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" isPremium="true" iconName="Test" variant="destructive" label="Destructive"></ui-button></div>
-  `,
-    };
-  },
-} as Story;
-
-PremiumButton.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13102-11811&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export const BadgeButton: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-    .colum { align-items: center; justify-content: center; display: flex; }
-    .row {  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; padding: 30px }
-    .dark { background-color: black }
-  `,
-      ],
-      template: `<div class="row"><div class="colum"><ui-button applicationTheme="${_theme}" [buttonBadgeConfig]='{"badgeType": "primary", "badgeLabel": "Primary"}' variant="primary" label="Primary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" [buttonBadgeConfig]='{"badgeType": "primary", "badgeLabel": "Primary"}' variant="secondary" label="Secondary"></ui-button></div>
-  <div class="colum"><ui-button applicationTheme="${_theme}" [buttonBadgeConfig]='{"badgeType": "notification", "badgeNotificationAmount": "9"}' variant="ghost" label="Ghost"></ui-button></div>
-  `,
-    };
-  },
-} as Story;
-
-BadgeButton.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13875-73165&mode=design&t=SN4RvfQBfsRqQOr7-4',
-  },
-};