aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout/summary.stories.tsx
blob: b33acde3e6f85fe058b4d29cb703fa01a5c00716 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { IntlProvider } from 'react-intl';
import SummaryComponent from './summary';

export default {
  title: 'Organisms/Layout',
  component: SummaryComponent,
  args: {
    titleLevel: 2,
  },
  argTypes: {
    cover: {
      description: 'The cover data.',
      table: {
        category: 'Options',
      },
      type: {
        name: 'object',
        required: false,
        value: {},
      },
    },
    excerpt: {
      control: {
        type: 'text',
      },
      description: 'The page excerpt.',
      type: {
        name: 'string',
        required: true,
      },
    },
    meta: {
      description: 'The page metadata.',
      type: {
        name: 'object',
        required: true,
        value: {},
      },
    },
    title: {
      control: {
        type: 'text',
      },
      description: 'The page title',
      type: {
        name: 'string',
        required: true,
      },
    },
    titleLevel: {
      control: {
        type: 'number',
      },
      description: 'The page title level (hn)',
      table: {
        category: 'Options',
        defaultValue: { summary: 2 },
      },
      type: {
        name: 'number',
        required: false,
      },
    },
    url: {
      control: {
        type: 'text',
      },
      description: 'The page url.',
      type: {
        name: 'string',
        required: true,
      },
    },
  },
} as ComponentMeta<typeof SummaryComponent>;

const Template: ComponentStory<typeof SummaryComponent> = (args) => (
  <IntlProvider locale="en">
    <SummaryComponent {...args} />
  </IntlProvider>
);

const meta = {
  publication: { name: 'Published on:', value: 'April 11th 2022' },
  readingTime: { name: 'Reading time:', value: '5 minutes' },
  categories: {
    name: 'Categories:',
    value: [
      <a key="cat-1" href="#">
        Cat 1
      </a>,
      <a key="cat-2" href="#">
        Cat 2
      </a>,
    ],
  },
  comments: { name: 'Comments:', value: '1 comment' },
};

export const Summary = Template.bind({});
Summary.args = {
  cover: {
    alt: 'A cover',
    height: 480,
    src: 'http://placeimg.com/640/480',
    width: 640,
  },
  excerpt:
    'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.',
  meta,
  title: 'Odio odit necessitatibus',
  url: '#',
};