(Prism.languages.c = Prism.languages.extend('clike', { comment: { pattern: /\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/, greedy: !0, }, string: { pattern: /"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/, greedy: !0 }, 'class-name': { pattern: /(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/, lookbehind: !0, }, keyword: /\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/, function: /\b[a-z_]\w*(?=\s*\()/i, number: /(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i, operator: />>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/, })), Prism.languages.insertBefore('c', 'string', { char: { pattern: /'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/, greedy: !0 }, }), Prism.languages.insertBefore('c', 'string', { macro: { pattern: /(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im, lookbehind: !0, greedy: !0, alias: 'property', inside: { string: [ { pattern: /^(#\s*include\s*)<[^>]+>/, lookbehind: !0 }, Prism.languages.c.string, ], char: Prism.languages.c.char, comment: Prism.languages.c.comment, 'macro-name': [ { pattern: /(^#\s*define\s+)\w+\b(?!\()/i, lookbehind: !0 }, { pattern: /(^#\s*define\s+)\w+\b(?=\()/i, lookbehind: !0, alias: 'function', }, ], directive: { pattern: /^(#\s*)[a-z]+/, lookbehind: !0, alias: 'keyword', }, 'directive-hash': /^#/, punctuation: /##|\\(?=[\r\n])/, expression: { pattern: /\S[\s\S]*/, inside: Prism.languages.c }, }, }, }), Prism.languages.insertBefore('c', 'function', { constant: /\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/, }), delete Prism.languages.c.boolean; ut type='hidden' name='id' value='34e216546151eaf8a0a3cbb0bc8b65dae4c63bf2'/>
path: root/src/components/organisms/images/gallery.stories.tsx
blob: 6fc278f1dc157cec38daac11f6c249a81b3fbe04 (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

import ResponsiveImage from '@components/molecules/images/responsive-image';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import Gallery from './gallery';

/**
 * Gallery - Storybook Meta
 */
export default {
  title: 'Organisms/Images/Gallery',
  component: Gallery,
  argTypes: {
    children: {
      control: {
        type: null,
      },
      description: 'Two or more ResponsiveImage component.',
      type: {
        name: 'function',
        required: true,
      },
    },
    columns: {
      control: {
        type: 'number',
        min: 2,
        max: 4,
      },
      description: 'The columns count.',
      type: {
        name: 'number',
        required: true,
      },
    },
  },
} as ComponentMeta<typeof Gallery>;

const image = {
  alt: 'Modi provident omnis',
  height: 480,
  src: 'http://placeimg.com/640/480/fashion',
  width: 640,
};

const Template: ComponentStory<typeof Gallery> = (args) => (
  <Gallery {...args}>
    <ResponsiveImage {...image} />
    <ResponsiveImage {...image} />
    <ResponsiveImage {...image} />
    <ResponsiveImage {...image} />
  </Gallery>
);

/**
 * Gallery Stories - Two columns
 */
export const TwoColumns = Template.bind({});
TwoColumns.args = {
  columns: 2,
};

/**
 * Gallery Stories - Three columns
 */
export const ThreeColumns = Template.bind({});
ThreeColumns.args = {
  columns: 3,
};

/**
 * Gallery Stories - Four columns
 */
export const FourColumns = Template.bind({});
FourColumns.args = {
  columns: 4,
};