ng-implementation/airwatch/src/app/buttons/main-button/main-button.stories.ts

import type {Meta, StoryObj} from '@storybook/angular';
import {MainButton} from './main-button';

// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<MainButton> = {
  title: 'composants/boutons/MainButton',
  component: MainButton,
  tags: ['autodocs'],
  argTypes: {
    disabled: {control: 'boolean'},
    divider: {control: 'boolean'},
    label: {control: 'text'},
    icon: {control: 'text'},
    inconPosition: {control: 'select', options: ['left', 'right']},
    size: {control: 'select', options: ['', 'large', 'medium', 'small', 'extrasm']},
    kind: {control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'link']},
  },
  parameters: {
    docs: {
      description: {
        component: 'Main button component with various states including hover and focus.' +
          '<br/>This component combines a semantic, a size, and visual guides with icons.' +
          '<br/>We have '

      }
    }
  },
};

export default meta;
type Story = StoryObj<MainButton>;

// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
export const Default: Story = {
  args: {
    label: "Large",
    kind: 'primary',
    size: '',
    disabled: false,
    divider: false,
    icon: "",
    inconPosition: 'right',
  },
};

export const Primary: Story = {
  args: {
    label: 'Primary Button',
    kind: 'primary',
    size: 'medium',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Secondary Button',
    kind: 'secondary',
    size: 'medium',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

export const Ghost: Story = {
  args: {
    label: 'Ghost Button',
    kind: 'ghost',
    size: 'medium',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};


export const GhostHover: Story = {
  args: {
    ...Ghost.args,
    label: 'Ghost Button (Hover)',
  },
  parameters: {
    pseudo: {hover: true},
    docs: {
      description: {
        story: 'Ghost button in hover state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-ghost {
            background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
            color: white !important;
          }
        </style>
        <story />
      `
    })],
  }
};
export const GhostFocus: Story = {
  args: {
    ...Ghost.args,
    label: 'Ghost Button (Focus)',
  },
  parameters: {
    pseudo: {focus: true},
    docs: {
      description: {
        story: 'Ghost button in focus state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-ghost {
            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
            outline-offset: 2px !important;
            background: white !important;
          }
        </style>
        <story />
      `
    })],
  }
};

export const Link: Story = {
  args: {
    label: 'Link Button',
    kind: 'link',
    size: 'medium',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

export const WithIcon: Story = {
  args: {
    label: 'Button with Icon',
    kind: 'primary',
    size: 'medium',
    disabled: false,
    divider: false,
    icon: 'arrow-right-line',
    inconPosition: 'left',
  },
};

export const WithIconRight: Story = {
  args: {
    label: 'Button with Icon Right',
    kind: 'primary',
    size: 'medium',
    disabled: false,
    divider: false,
    icon: 'arrow-right-line',
    inconPosition: 'right',
  },
};

export const WithDivider: Story = {
  args: {
    label: 'Button with Divider',
    kind: 'primary',
    size: 'medium',
    disabled: false,
    divider: true,
    icon: 'arrow-right-line',
    inconPosition: 'right',
  },
};

export const Disabled: Story = {
  args: {
    label: 'Disabled Button',
    kind: 'primary',
    size: 'medium',
    disabled: true,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

export const Large: Story = {
  args: {
    label: 'Large Button',
    kind: 'primary',
    size: 'large',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

export const Small: Story = {
  args: {
    label: 'Small Button',
    kind: 'primary',
    size: 'small',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

export const ExtraSmall: Story = {
  args: {
    label: 'Extra Small Button',
    kind: 'primary',
    size: 'extrasm',
    disabled: false,
    divider: false,
    icon: '',
    inconPosition: 'left',
  },
};

// Hover state stories
export const PrimaryHover: Story = {
  args: {
    ...Primary.args,
    label: 'Primary Button (Hover)',
  },
  parameters: {
    pseudo: {hover: true},
    docs: {
      description: {
        story: 'Primary button in hover state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          .container {
            background: linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%) !important;
          }
        </style>
        <div class="container">

        <story />
</div>
      `
    })],
  }
};

export const SecondaryHover: Story = {
  args: {
    ...Secondary.args,
    label: 'Secondary Button (Hover)',
  },
  parameters: {
    pseudo: {hover: true},
    docs: {
      description: {
        story: 'Secondary button in hover state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-secondary {
            background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
            color: white !important;
          }
        </style>
        <story />
      `
    })],
  }
};


export const LinkHover: Story = {
  args: {
    ...Link.args,
    label: 'Link Button (Hover)',
  },
  parameters: {
    pseudo: {hover: true},
    docs: {
      description: {
        story: 'Link button in hover state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-link {
            background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
            color: white !important;
          }
        </style>
        <story />
      `
    })],
  }
};

// Focus state stories
export const PrimaryFocus: Story = {
  args: {
    ...Primary.args,
    label: 'Primary Button (Focus)',
  },
  parameters: {
    pseudo: {focus: true},
    docs: {
      description: {
        story: 'Primary button in focus state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-primary {
            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
            outline-offset: 2px !important;
          }
        </style>
        <story />
      `
    })],
  }
};

export const SecondaryFocus: Story = {
  args: {
    ...Secondary.args,
    label: 'Secondary Button (Focus)',
  },
  parameters: {
    pseudo: {focus: true},
    docs: {
      description: {
        story: 'Secondary button in focus state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-secondary {
            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
            outline-offset: 2px !important;
          }
        </style>
        <story />
      `
    })],
  }
};
export const LinkFocus: Story = {
  args: {
    ...Link.args,
    label: 'Link Button (Focus)',
  },
  parameters: {
    pseudo: {focus: true},
    docs: {
      description: {
        story: 'Link button in focus state.'
      }
    },
    decorators: [() => ({
      template: `
        <style>
          button.is-link {
            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
            outline-offset: 2px !important;
          }
        </style>
        <story />
      `
    })],
  }
};