web/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import CodeRateCard from '.'

const meta: Meta<typeof CodeRateCard> = {
  title: 'Components/RateCard/Code',
  component: CodeRateCard,
  decorators: [
    (Story) => (
      <div style={{ maxWidth: '400px' }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    rateTitle: { control: 'text' },
    paymentTerm: { control: 'text' },
    rate: { control: 'object' },
    approximateRate: { control: 'object' },
    rateTermDetails: { contorlr: 'object' },
  },
}

export default meta

type Story = StoryObj<typeof CodeRateCard>

export const Default: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'Campaign ∙ Breakfast excluded',
    rate: {
      label: "Valentine's Special",
      price: '1989',
      unit: 'EUR/night',
    },
    approximateRate: {
      price: '1989',
      label: 'Approx.',
      unit: 'EUR',
    },
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const Voucher: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'VOG ∙ Breakfast included',
    rate: {
      label: 'Promotional name here',
      price: '1',
      unit: 'VOUCHER',
    },
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const CorporateCheck: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'VOG ∙ Breakfast included',
    rate: {
      label: 'Promotional name here',
      price: '2cc + 800',
      unit: 'SEK',
    },
    approximateRate: {
      price: '76',
      label: 'Approx.',
      unit: 'EUR',
    },
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const DNumberDefault: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'D0043148 ∙ Breakfast included',
    rate: {
      label: 'Helsinki Partners Oy',
      price: '1989',
      unit: 'EUR/NIGHT',
    },
    approximateRate: {
      price: '76',
      label: 'Approx.',
      unit: 'EUR',
    },
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const DNumberHighlightedRate: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'D0043148 ∙ Breakfast included',
    rate: {
      label: 'Helsinki Partners Oy',
      price: '198',
      unit: 'EUR/NIGHT',
    },
    approximateRate: {
      price: '76',
      label: 'Approx.',
      unit: 'EUR',
    },
    isHighlightedRate: true,
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const LNumberDefault: Story = {
  args: {
    rateTitle: 'NON-REFUNDABLE',
    paymentTerm: 'PAY NOW',
    bannerText: 'L0043148 ∙ Breakfast included',
    rate: {
      label: 'Nordic Team Travel',
      price: '198',
      unit: 'EUR/NIGHT',
    },
    approximateRate: {
      price: '76',
      label: 'Approx.',
      unit: 'EUR',
    },
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const LNumberStrikethrough: Story = {
  args: {
    rateTitle: 'NON-REFUNDABLE',
    paymentTerm: 'PAY NOW',
    bannerText: 'L0043148 ∙ Breakfast included',
    rate: {
      label: 'Nordic Team Travel',
      price: '198',
      unit: 'EUR/NIGHT',
    },
    comparisonRate: {
      price: '249',
      unit: 'EUR/NIGHT',
    },
    approximateRate: {
      price: '230/218',
      label: 'Approx.',
      unit: 'EUR',
    },
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}