ihk24/storybook/stories/components/magazine-header/MagazineHeader.stories.js

import {createMagazineHeader} from "./MagazineHeaderComponent";

export default {
  title: 'Components/Magazine Header',
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    size: {
      name: 'Höhe',
      control: {type: 'select'},
      options: ['regular', 'narrow'],
      defaultValue: 'regular',
    },
    logo: {
      name: 'Logo',
      control: 'text',
      defaultValue: './logos/wirtschaftsdialoge.svg',
    },
    title: {
      name: 'Titel (Textform, wenn Logo nicht angegeben ist)',
      control: 'text',
      defaultValue: 'Wirtschaftsdialoge',
    },
    smalltext: {
      name: 'Kleiner Titel (Textform, wenn Logo nicht angegeben ist)',
      control: 'text',
      defaultValue: 'IHK Musterstadt Wahl 2024',
    },
  }
}

const Template = ({...args}) => {
  return createMagazineHeader({...args});
};

export const MagazineHeader = Template.bind({});
MagazineHeader.args = {};

export const SmallMagazineHeader = Template.bind({});
SmallMagazineHeader.args = {
  size: 'narrow',
};

export const TextMagazineHeader = Template.bind({});
TextMagazineHeader.args = {
  title: 'Wirtschaftsdialoge',
  logo: null,
};

export const TwoLinesMagazineHeader = Template.bind({});
TwoLinesMagazineHeader.args = {
  title: 'Eine starke Entscheidung',
  smalltext: 'IHK Musterstadt Wahl 2024',
  logo: './logos/magazine-header-flag.png',
  backgroundColor: '#003366'
};