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.
This commit is contained in:
Koen Vlaswinkel
@@ -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'
|
||||
};
|
||||
|
||||
@@ -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({});
|
||||
|
||||
@@ -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({});
|
||||
@@ -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({});
|
||||
413
extensions/ql-vscode/src/stories/common/icon/vscode-icons.json
Normal file
413
extensions/ql-vscode/src/stories/common/icon/vscode-icons.json
Normal file
@@ -0,0 +1,413 @@
|
||||
[
|
||||
"account",
|
||||
"activate-breakpoints",
|
||||
"add",
|
||||
"archive",
|
||||
"arrow-both",
|
||||
"arrow-circle-down",
|
||||
"arrow-circle-left",
|
||||
"arrow-circle-right",
|
||||
"arrow-circle-up",
|
||||
"arrow-down",
|
||||
"arrow-left",
|
||||
"arrow-right",
|
||||
"arrow-small-down",
|
||||
"arrow-small-left",
|
||||
"arrow-small-right",
|
||||
"arrow-small-up",
|
||||
"arrow-swap",
|
||||
"arrow-up",
|
||||
"azure-devops",
|
||||
"azure",
|
||||
"beaker-stop",
|
||||
"beaker",
|
||||
"bell-dot",
|
||||
"bell",
|
||||
"blank",
|
||||
"bold",
|
||||
"book",
|
||||
"bookmark",
|
||||
"bracket-dot",
|
||||
"bracket-error",
|
||||
"briefcase",
|
||||
"broadcast",
|
||||
"browser",
|
||||
"bug",
|
||||
"calendar",
|
||||
"call-incoming",
|
||||
"call-outgoing",
|
||||
"case-sensitive",
|
||||
"check-all",
|
||||
"check",
|
||||
"checklist",
|
||||
"chevron-down",
|
||||
"chevron-left",
|
||||
"chevron-right",
|
||||
"chevron-up",
|
||||
"chrome-close",
|
||||
"chrome-maximize",
|
||||
"chrome-minimize",
|
||||
"chrome-restore",
|
||||
"circle-filled",
|
||||
"circle-large-filled",
|
||||
"circle-large-outline",
|
||||
"circle-outline",
|
||||
"circle-slash",
|
||||
"circuit-board",
|
||||
"clear-all",
|
||||
"clippy",
|
||||
"close-all",
|
||||
"close",
|
||||
"cloud-download",
|
||||
"cloud-upload",
|
||||
"cloud",
|
||||
"code",
|
||||
"collapse-all",
|
||||
"color-mode",
|
||||
"combine",
|
||||
"comment-discussion",
|
||||
"comment",
|
||||
"compass-active",
|
||||
"compass-dot",
|
||||
"compass",
|
||||
"copy",
|
||||
"credit-card",
|
||||
"dash",
|
||||
"dashboard",
|
||||
"database",
|
||||
"debug-all",
|
||||
"debug-alt-small",
|
||||
"debug-alt",
|
||||
"debug-breakpoint-conditional-unverified",
|
||||
"debug-breakpoint-conditional",
|
||||
"debug-breakpoint-data-unverified",
|
||||
"debug-breakpoint-data",
|
||||
"debug-breakpoint-function-unverified",
|
||||
"debug-breakpoint-function",
|
||||
"debug-breakpoint-log-unverified",
|
||||
"debug-breakpoint-log",
|
||||
"debug-breakpoint-unsupported",
|
||||
"debug-console",
|
||||
"debug-continue-small",
|
||||
"debug-continue",
|
||||
"debug-coverage",
|
||||
"debug-disconnect",
|
||||
"debug-line-by-line",
|
||||
"debug-pause",
|
||||
"debug-rerun",
|
||||
"debug-restart-frame",
|
||||
"debug-restart",
|
||||
"debug-reverse-continue",
|
||||
"debug-stackframe-active",
|
||||
"debug-stackframe-dot",
|
||||
"debug-stackframe",
|
||||
"debug-start",
|
||||
"debug-step-back",
|
||||
"debug-step-into",
|
||||
"debug-step-out",
|
||||
"debug-step-over",
|
||||
"debug-stop",
|
||||
"debug",
|
||||
"desktop-download",
|
||||
"device-camera-video",
|
||||
"device-camera",
|
||||
"device-mobile",
|
||||
"diff-added",
|
||||
"diff-ignored",
|
||||
"diff-modified",
|
||||
"diff-removed",
|
||||
"diff-renamed",
|
||||
"diff",
|
||||
"discard",
|
||||
"edit",
|
||||
"editor-layout",
|
||||
"ellipsis",
|
||||
"empty-window",
|
||||
"error-small",
|
||||
"error",
|
||||
"exclude",
|
||||
"expand-all",
|
||||
"export",
|
||||
"extensions",
|
||||
"eye-closed",
|
||||
"eye",
|
||||
"feedback",
|
||||
"file-binary",
|
||||
"file-code",
|
||||
"file-media",
|
||||
"file-pdf",
|
||||
"file-submodule",
|
||||
"file-symlink-directory",
|
||||
"file-symlink-file",
|
||||
"file-zip",
|
||||
"file",
|
||||
"files",
|
||||
"filter-filled",
|
||||
"filter",
|
||||
"flame",
|
||||
"fold-down",
|
||||
"fold-up",
|
||||
"fold",
|
||||
"folder-active",
|
||||
"folder-library",
|
||||
"folder-opened",
|
||||
"folder",
|
||||
"gear",
|
||||
"gift",
|
||||
"gist-secret",
|
||||
"git-commit",
|
||||
"git-compare",
|
||||
"git-merge",
|
||||
"git-pull-request-closed",
|
||||
"git-pull-request-create",
|
||||
"git-pull-request-draft",
|
||||
"git-pull-request",
|
||||
"github-action",
|
||||
"github-alt",
|
||||
"github-inverted",
|
||||
"github",
|
||||
"globe",
|
||||
"go-to-file",
|
||||
"grabber",
|
||||
"graph-left",
|
||||
"graph-line",
|
||||
"graph-scatter",
|
||||
"graph",
|
||||
"gripper",
|
||||
"group-by-ref-type",
|
||||
"heart",
|
||||
"history",
|
||||
"home",
|
||||
"horizontal-rule",
|
||||
"hubot",
|
||||
"inbox",
|
||||
"indent",
|
||||
"info",
|
||||
"inspect",
|
||||
"issue-draft",
|
||||
"issue-reopened",
|
||||
"issues",
|
||||
"italic",
|
||||
"jersey",
|
||||
"json",
|
||||
"kebab-vertical",
|
||||
"key",
|
||||
"law",
|
||||
"layers-active",
|
||||
"layers-dot",
|
||||
"layers",
|
||||
"layout-activitybar-left",
|
||||
"layout-activitybar-right",
|
||||
"layout-centered",
|
||||
"layout-menubar",
|
||||
"layout-panel-center",
|
||||
"layout-panel-justify",
|
||||
"layout-panel-left",
|
||||
"layout-panel-off",
|
||||
"layout-panel-right",
|
||||
"layout-panel",
|
||||
"layout-sidebar-left-off",
|
||||
"layout-sidebar-left",
|
||||
"layout-sidebar-right-off",
|
||||
"layout-sidebar-right",
|
||||
"layout-statusbar",
|
||||
"layout",
|
||||
"library",
|
||||
"lightbulb-autofix",
|
||||
"lightbulb",
|
||||
"link-external",
|
||||
"link",
|
||||
"list-filter",
|
||||
"list-flat",
|
||||
"list-ordered",
|
||||
"list-selection",
|
||||
"list-tree",
|
||||
"list-unordered",
|
||||
"live-share",
|
||||
"loading",
|
||||
"location",
|
||||
"lock-small",
|
||||
"lock",
|
||||
"magnet",
|
||||
"mail-read",
|
||||
"mail",
|
||||
"markdown",
|
||||
"megaphone",
|
||||
"mention",
|
||||
"menu",
|
||||
"merge",
|
||||
"milestone",
|
||||
"mirror",
|
||||
"mortar-board",
|
||||
"move",
|
||||
"multiple-windows",
|
||||
"mute",
|
||||
"new-file",
|
||||
"new-folder",
|
||||
"newline",
|
||||
"no-newline",
|
||||
"note",
|
||||
"notebook-template",
|
||||
"notebook",
|
||||
"octoface",
|
||||
"open-preview",
|
||||
"organization",
|
||||
"output",
|
||||
"package",
|
||||
"paintcan",
|
||||
"pass-filled",
|
||||
"pass",
|
||||
"person-add",
|
||||
"person",
|
||||
"pie-chart",
|
||||
"pin",
|
||||
"pinned-dirty",
|
||||
"pinned",
|
||||
"play-circle",
|
||||
"play",
|
||||
"plug",
|
||||
"preserve-case",
|
||||
"preview",
|
||||
"primitive-square",
|
||||
"project",
|
||||
"pulse",
|
||||
"question",
|
||||
"quote",
|
||||
"radio-tower",
|
||||
"reactions",
|
||||
"record-keys",
|
||||
"record-small",
|
||||
"record",
|
||||
"redo",
|
||||
"references",
|
||||
"refresh",
|
||||
"regex",
|
||||
"remote-explorer",
|
||||
"remote",
|
||||
"remove",
|
||||
"replace-all",
|
||||
"replace",
|
||||
"reply",
|
||||
"repo-clone",
|
||||
"repo-force-push",
|
||||
"repo-forked",
|
||||
"repo-pull",
|
||||
"repo-push",
|
||||
"repo",
|
||||
"report",
|
||||
"request-changes",
|
||||
"rocket",
|
||||
"root-folder-opened",
|
||||
"root-folder",
|
||||
"rss",
|
||||
"ruby",
|
||||
"run-above",
|
||||
"run-all",
|
||||
"run-below",
|
||||
"run-errors",
|
||||
"save-all",
|
||||
"save-as",
|
||||
"save",
|
||||
"screen-full",
|
||||
"screen-normal",
|
||||
"search-stop",
|
||||
"search",
|
||||
"server-environment",
|
||||
"server-process",
|
||||
"server",
|
||||
"settings-gear",
|
||||
"settings",
|
||||
"shield",
|
||||
"sign-in",
|
||||
"sign-out",
|
||||
"smiley",
|
||||
"sort-precedence",
|
||||
"source-control",
|
||||
"split-horizontal",
|
||||
"split-vertical",
|
||||
"squirrel",
|
||||
"star-empty",
|
||||
"star-full",
|
||||
"star-half",
|
||||
"stop-circle",
|
||||
"symbol-array",
|
||||
"symbol-boolean",
|
||||
"symbol-class",
|
||||
"symbol-color",
|
||||
"symbol-constant",
|
||||
"symbol-enum-member",
|
||||
"symbol-enum",
|
||||
"symbol-event",
|
||||
"symbol-field",
|
||||
"symbol-file",
|
||||
"symbol-interface",
|
||||
"symbol-key",
|
||||
"symbol-keyword",
|
||||
"symbol-method",
|
||||
"symbol-misc",
|
||||
"symbol-namespace",
|
||||
"symbol-numeric",
|
||||
"symbol-operator",
|
||||
"symbol-parameter",
|
||||
"symbol-property",
|
||||
"symbol-ruler",
|
||||
"symbol-snippet",
|
||||
"symbol-string",
|
||||
"symbol-structure",
|
||||
"symbol-variable",
|
||||
"sync-ignored",
|
||||
"sync",
|
||||
"table",
|
||||
"tag",
|
||||
"target",
|
||||
"tasklist",
|
||||
"telescope",
|
||||
"terminal-bash",
|
||||
"terminal-cmd",
|
||||
"terminal-debian",
|
||||
"terminal-linux",
|
||||
"terminal-powershell",
|
||||
"terminal-tmux",
|
||||
"terminal-ubuntu",
|
||||
"terminal",
|
||||
"text-size",
|
||||
"three-bars",
|
||||
"thumbsdown",
|
||||
"thumbsup",
|
||||
"tools",
|
||||
"trash",
|
||||
"triangle-down",
|
||||
"triangle-left",
|
||||
"triangle-right",
|
||||
"triangle-up",
|
||||
"twitter",
|
||||
"type-hierarchy-sub",
|
||||
"type-hierarchy-super",
|
||||
"type-hierarchy",
|
||||
"unfold",
|
||||
"ungroup-by-ref-type",
|
||||
"unlock",
|
||||
"unmute",
|
||||
"unverified",
|
||||
"variable-group",
|
||||
"verified-filled",
|
||||
"verified",
|
||||
"versions",
|
||||
"vm-active",
|
||||
"vm-connect",
|
||||
"vm-outline",
|
||||
"vm-running",
|
||||
"vm",
|
||||
"wand",
|
||||
"warning",
|
||||
"watch",
|
||||
"whitespace",
|
||||
"whole-word",
|
||||
"window",
|
||||
"word-wrap",
|
||||
"workspace-trusted",
|
||||
"workspace-unknown",
|
||||
"workspace-untrusted",
|
||||
"zoom-in",
|
||||
"zoom-out"
|
||||
]
|
||||
Reference in New Issue
Block a user