Merge pull request #1537 from github/koesie10/icons-storybook

Add Storybook stories for icons

Author: koesie10

extensions/ql-vscode/src/stories/common/icon/Codicon.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CodePaths, Codicon as CodiconComponent } from '../../../view/common';
+
+// To regenerate the icons, use the following command from the `extensions/ql-vscode` directory:
+// jq -R '[inputs | [splits(", *")] as $row | $row[0]]' < node_modules/@vscode/codicons/dist/codicon.csv > src/stories/common/icon/vscode-icons.json
+import icons from './vscode-icons.json';
+
+export default {
+  title: 'Icon/Codicon',
+  component: CodiconComponent,
+  argTypes: {
+    name: {
+      control: 'select',
+      options: icons,
+    },
+  },
+} as ComponentMeta<typeof CodePaths>;
+
+const Template: ComponentStory<typeof CodiconComponent> = (args) => (
+  <CodiconComponent {...args} />
+);
+
+export const Codicon = Template.bind({});
+Codicon.args = {
+  name: 'account',
+  label: 'Account'
+};
+

extensions/ql-vscode/src/stories/common/icon/ErrorIcon.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CodePaths, ErrorIcon as ErrorIconComponent } from '../../../view/common';
+
+export default {
+  title: 'Icon/Error Icon',
+  component: ErrorIconComponent,
+} as ComponentMeta<typeof CodePaths>;
+
+const Template: ComponentStory<typeof ErrorIconComponent> = (args) => (
+  <ErrorIconComponent {...args} />
+);
+
+export const ErrorIcon = Template.bind({});
+

extensions/ql-vscode/src/stories/common/icon/SuccessIcon.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CodePaths, SuccessIcon as SuccessIconComponent } from '../../../view/common';
+
+export default {
+  title: 'Icon/Success Icon',
+  component: SuccessIconComponent,
+} as ComponentMeta<typeof CodePaths>;
+
+const Template: ComponentStory<typeof SuccessIconComponent> = (args) => (
+  <SuccessIconComponent {...args} />
+);
+
+export const SuccessIcon = Template.bind({});

extensions/ql-vscode/src/stories/common/icon/WarningIcon.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CodePaths, WarningIcon as WarningIconComponent } from '../../../view/common';
+
+export default {
+  title: 'Icon/Warning Icon',
+  component: WarningIconComponent,
+} as ComponentMeta<typeof CodePaths>;
+
+const Template: ComponentStory<typeof WarningIconComponent> = (args) => (
+  <WarningIconComponent {...args} />
+);
+
+export const WarningIcon = Template.bind({});