Skip to content

Commit 3aced3c

Browse files
committed
Add Storybook stories for icons
This will add Storybook stories for the error, success, and warning icons, as well as for the generic `Codicon` component. To show the available icons for the `Codicon` component, a static JSON list is generated from the contents of a CSV file included as part of the `@vscode/codicons` npm package. The command to regenerate the file is included in the story.
1 parent 92bbf3a commit 3aced3c

5 files changed

Lines changed: 493 additions & 0 deletions

File tree

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
import { ComponentStory, ComponentMeta } from '@storybook/react';
4+
5+
import { CodePaths, Codicon as CodiconComponent } from '../../../view/common';
6+
7+
// To regenerate the icons, use the following command from the `extensions/ql-vscode` directory:
8+
// jq -R '[inputs | [splits(", *")] as $row | $row[0]]' < node_modules/@vscode/codicons/dist/codicon.csv > src/stories/common/icon/vscode-icons.json
9+
import icons from './vscode-icons.json';
10+
11+
export default {
12+
title: 'Icon/Codicon',
13+
component: CodiconComponent,
14+
argTypes: {
15+
name: {
16+
control: 'select',
17+
options: icons,
18+
},
19+
},
20+
} as ComponentMeta<typeof CodePaths>;
21+
22+
const Template: ComponentStory<typeof CodiconComponent> = (args) => (
23+
<CodiconComponent {...args} />
24+
);
25+
26+
export const Codicon = Template.bind({});
27+
Codicon.args = {
28+
name: 'account',
29+
label: 'Account'
30+
};
31+
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
3+
import { ComponentStory, ComponentMeta } from '@storybook/react';
4+
5+
import { CodePaths, ErrorIcon as ErrorIconComponent } from '../../../view/common';
6+
7+
export default {
8+
title: 'Icon/Error Icon',
9+
component: ErrorIconComponent,
10+
} as ComponentMeta<typeof CodePaths>;
11+
12+
const Template: ComponentStory<typeof ErrorIconComponent> = (args) => (
13+
<ErrorIconComponent {...args} />
14+
);
15+
16+
export const ErrorIcon = Template.bind({});
17+
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
import { ComponentStory, ComponentMeta } from '@storybook/react';
4+
5+
import { CodePaths, SuccessIcon as SuccessIconComponent } from '../../../view/common';
6+
7+
export default {
8+
title: 'Icon/Success Icon',
9+
component: SuccessIconComponent,
10+
} as ComponentMeta<typeof CodePaths>;
11+
12+
const Template: ComponentStory<typeof SuccessIconComponent> = (args) => (
13+
<SuccessIconComponent {...args} />
14+
);
15+
16+
export const SuccessIcon = Template.bind({});
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
import { ComponentStory, ComponentMeta } from '@storybook/react';
4+
5+
import { CodePaths, WarningIcon as WarningIconComponent } from '../../../view/common';
6+
7+
export default {
8+
title: 'Icon/Warning Icon',
9+
component: WarningIconComponent,
10+
} as ComponentMeta<typeof CodePaths>;
11+
12+
const Template: ComponentStory<typeof WarningIconComponent> = (args) => (
13+
<WarningIconComponent {...args} />
14+
);
15+
16+
export const WarningIcon = Template.bind({});

0 commit comments

Comments
 (0)