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
115
116
117
118
119
120
121
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Code } from './code';
/**
* Code - Storybook Meta
*/
export default {
title: 'Molecules/Layout/Code',
component: Code,
args: {
filterOutput: false,
outputPattern: '#output#',
},
argTypes: {
'aria-label': {
control: {
type: 'text',
},
description: 'An accessible name for the code sample.',
table: {
category: 'Accessibility',
},
type: {
name: 'string',
required: false,
},
},
children: {
control: {
type: 'text',
},
description: 'The code sample.',
type: {
name: 'string',
required: true,
},
},
filterOutput: {
control: {
type: 'boolean',
},
description: 'Filter the command line output.',
table: {
category: 'Options',
defaultValue: { summary: false },
},
type: {
name: 'boolean',
required: false,
},
},
language: {
control: {
type: 'text',
},
description: 'The code sample language.',
type: {
name: 'string',
required: true,
},
},
plugins: {
description: 'An array of Prism plugins to activate.',
type: {
name: 'object',
required: false,
value: {},
},
},
outputPattern: {
control: {
type: 'text',
},
description: 'The command line output pattern.',
table: {
category: 'Options',
defaultValue: { summary: '#output#' },
},
type: {
name: 'string',
required: false,
},
},
},
} as ComponentMeta<typeof Code>;
const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />;
const javascriptCodeSample = `
const foo = () => {
return 'bar';
}
`;
/**
* Code Stories - Code sample
*/
export const CodeSample = Template.bind({});
CodeSample.args = {
children: javascriptCodeSample,
language: 'javascript',
plugins: ['line-numbers'],
};
const commandLineCode = `
ls -lah
#output#drwxr-x---+ 42 armand armand 4,0K 17 avril 11:15 .
#output#drwxr-xr-x 4 root root 4,0K 30 mai 2021 ..
#output#-rw-r--r-- 1 armand armand 2,0K 21 juil. 2021 .xinitrc
`;
/**
* Code Stories - Command Line
*/
export const CommandLine = Template.bind({});
CommandLine.args = {
children: commandLineCode,
filterOutput: true,
language: 'bash',
plugins: ['command-line'],
};
|
