ihk24/gfi-ihk-2024/stories/components/teaser/Teaser.stories.js

import {createTeaser} from "./TeaserComponent";

export default {
  title: 'Components/Teaser',
  args: {
    type: 'regular',
    kicker: 'Fachkräfte',
    headline: 'Anteil der Frauen im Bereich Engineering steigt',
    copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita, no sea takimata sanctus est.',
    imageSrc: './dummy/placeholder-3-2.svg',
    copyright: '@ shutterstock.com',
    showReadingTime: false,
    link: '#',
    imageSize: 'large',
    chartTitle: 'Chart-Titel des Teasers',
    linkType: null,
  },
  argTypes: {
    type: {
      name: 'Teaser-Typ',
      control: 'select',
      options: ['regular', 'hero', 'text', 'fullwidth', 'chart', 'picto', 'pictoHero'],
    },
    link: {
      name: 'Link',
    },
    imageSrc: {
      name: 'Bild-Url',
    },
    copyright: {
      name: 'Copyright-Text',
    },
    kicker: {
      name: 'Dachzeile',
    },
    headline: {
      name: 'Überschrift',
    },
    copy: {
      name: 'Kurztext',
    },
    showReadingTime: {
      name: 'Lesezeit anzeigen',
    },
    imageSize: {
      name: 'Bildgröße',
      control: 'select',
      options: ['large', 'medium', 'small'],
    },
    chartTitle: {
      name: 'Chart Titel',
    },
    linkType: {
      name: 'Link Typ',
      control: 'select',
      options: ['extern', 'download', 'intranet', 'extranet'],
    }
  }
}

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

export const RegularTeaser = Template.bind({});
RegularTeaser.args = {
  type: 'regular',
};

export const HeroTeaser = Template.bind({});
HeroTeaser.args = {
  type: 'hero',
};

export const TextTeaser = Template.bind({});
TextTeaser.args = {
  type: 'text',
};

export const ChartTeaser = Template.bind({});
ChartTeaser.args = {
  type: 'chart',
  imageSrc: null,
};

export const PictoTeaser = Template.bind({});
PictoTeaser.args = {
  type: 'picto',
  picto: 'pictogram-bueroklammer',
};

export const PictoTeaserWithText = Template.bind({});
PictoTeaserWithText.args = {
  type: 'picto',
  picto: 'pictogram-bueroklammer',
  pictoText: true
};

export const PictoHeroTeaser = Template.bind({});
PictoHeroTeaser.args = {
  type: 'pictoHero',
  picto: 'pictogram-bueroklammer',
};

export const PictoHeroTeaserWithText = Template.bind({});
PictoHeroTeaserWithText.args = {
  type: 'pictoHero',
  picto: 'pictogram-bueroklammer',
  pictoText: true
};

export const ExternalTeaser = Template.bind({});
ExternalTeaser.args = {
  linkType: 'extern',
};

export const FullwidthTeaserLarge = Template.bind({});
FullwidthTeaserLarge.args = {
  type: 'fullwidth',
  showReadingTime: true,
  imageSize: 'large',
};

export const FullwidthTeaserMedium = Template.bind({});
FullwidthTeaserMedium.args = {
  type: 'fullwidth',
  showReadingTime: true,
  imageSize: 'medium',
};

export const FullwidthTeaserSmall = Template.bind({});
FullwidthTeaserSmall.args = {
  type: 'fullwidth',
  showReadingTime: true,
  imageSize: 'small',
};