diff --git a/src/components/Icon/Icon.stories.scss b/src/components/Icon/Icon.stories.scss index 106b1055..fc3fffb4 100644 --- a/src/components/Icon/Icon.stories.scss +++ b/src/components/Icon/Icon.stories.scss @@ -2,7 +2,153 @@ @include vf-b-placeholders; @include vf-p-icons-common; +@include vf-p-icon-add-canvas; +@include vf-p-icon-add-logical-volume; +@include vf-p-icon-add-partition; +@include vf-p-icon-applications; +@include vf-p-icon-archive; +@include vf-p-icon-arrow-bottom-left; +@include vf-p-icon-arrow-bottom-right; +@include vf-p-icon-arrow-down; +@include vf-p-icon-arrow-left; +@include vf-p-icon-arrow-right; +@include vf-p-icon-arrow-top-left; +@include vf-p-icon-arrow-top-right; +@include vf-p-icon-arrow-up; +@include vf-p-icon-back-to-top; +@include vf-p-icon-begin-downloading; +@include vf-p-icon-blueprint; +@include vf-p-icon-book; +@include vf-p-icon-bundle; +@include vf-p-icon-canvas; +@include vf-p-icon-certificate; +@include vf-p-icon-certification; +@include vf-p-icon-change-version; +@include vf-p-icon-cluster-host; +@include vf-p-icon-comments; +@include vf-p-icon-conflict-grey; +@include vf-p-icon-conflict-resolution-grey; +@include vf-p-icon-conflict-resolution; +@include vf-p-icon-conflict; +@include vf-p-icon-connected; +@include vf-p-icon-contact; @include vf-p-icon-containers; +@include vf-p-icon-contextual-menu; +@include vf-p-icon-controllers; +@include vf-p-icon-copy-to-clipboard; +@include vf-p-icon-cursor; +@include vf-p-icon-desktop; +@include vf-p-icon-disconnect; +@include vf-p-icon-edit; +@include vf-p-icon-error-grey; +@include vf-p-icon-export; +@include vf-p-icon-exposed; +@include vf-p-icon-file-blank; +@include vf-p-icon-file; +@include vf-p-icon-filter; +@include vf-p-icon-folder; +@include vf-p-icon-fork; +@include vf-p-icon-fullscreen; +@include vf-p-icon-get-link; +@include vf-p-icon-gift; +@include vf-p-icon-halfscreen-bar; +@include vf-p-icon-hide; +@include vf-p-icon-highlight-off; +@include vf-p-icon-highlight-on; +@include vf-p-icon-home; +@include vf-p-icon-image; +@include vf-p-icon-import; +@include vf-p-icon-in-progress; +@include vf-p-icon-inspector-debug; +@include vf-p-icon-iso; +@include vf-p-icon-loading-steps; +@include vf-p-icon-location; +@include vf-p-icon-lock-locked-active; +@include vf-p-icon-lock-locked; +@include vf-p-icon-lock-unlock; +@include vf-p-icon-log-out; +@include vf-p-icon-machines; +@include vf-p-icon-map; +@include vf-p-icon-maximise-bar; +@include vf-p-icon-minimise-bar; +@include vf-p-icon-models; +@include vf-p-icon-mount-2; +@include vf-p-icon-mount; +@include vf-p-icon-notifications; +@include vf-p-icon-open-terminal; +@include vf-p-icon-pause; +@include vf-p-icon-pin; +@include vf-p-icon-plans; +@include vf-p-icon-play; +@include vf-p-icon-pods; +@include vf-p-icon-power-error; +@include vf-p-icon-power-off; +@include vf-p-icon-power-on; +@include vf-p-icon-priority-critical; +@include vf-p-icon-priority-high; +@include vf-p-icon-priority-low; +@include vf-p-icon-priority-medium; +@include vf-p-icon-priority-negligible; +@include vf-p-icon-priority-unknown; +@include vf-p-icon-private-key; +@include vf-p-icon-profile; +@include vf-p-icon-profiles; +@include vf-p-icon-repository; +@include vf-p-icon-restart; +@include vf-p-icon-revisions; +@include vf-p-icon-security-error; +@include vf-p-icon-security-tick; +@include vf-p-icon-security-warning; +@include vf-p-icon-security; +@include vf-p-icon-select-add; +@include vf-p-icon-select-remove; +@include vf-p-icon-select; +@include vf-p-icon-settings; +@include vf-p-icon-show; +@include vf-p-icon-single-host; +@include vf-p-icon-snapshot; +@include vf-p-icon-snooze; +@include vf-p-icon-sort-both; +@include vf-p-icon-sort-down; +@include vf-p-icon-sort-up; +@include vf-p-icon-starred; +@include vf-p-icon-statistics; +@include vf-p-icon-status-failed-small; +@include vf-p-icon-status-in-progress-small; +@include vf-p-icon-status-in-progress; +@include vf-p-icon-status-queued-small; +@include vf-p-icon-status-queued; +@include vf-p-icon-status-succeeded-small; +@include vf-p-icon-status-waiting-small; +@include vf-p-icon-status-waiting; +@include vf-p-icon-status; +@include vf-p-icon-stop; +@include vf-p-icon-submit-bug; +@include vf-p-icon-success-grey; +@include vf-p-icon-switcher-dashboard; +@include vf-p-icon-switcher-environments; +@include vf-p-icon-switcher; +@include vf-p-icon-tag; +@include vf-p-icon-task-outstanding; +@include vf-p-icon-thumbs-down; +@include vf-p-icon-thumbs-up; +@include vf-p-icon-tidy; +@include vf-p-icon-timed-out-grey; +@include vf-p-icon-timed-out; +@include vf-p-icon-toggle-side-nav; +@include vf-p-icon-topic; +@include vf-p-icon-turn-off-notification; +@include vf-p-icon-unit-pending; +@include vf-p-icon-unit-running; +@include vf-p-icon-units; +@include vf-p-icon-unmount; +@include vf-p-icon-unstarred; +@include vf-p-icon-upload; +@include vf-p-icon-usb; +@include vf-p-icon-user-group; +@include vf-p-icon-video-play; +@include vf-p-icon-warning-grey; +@include vf-p-icon-website; .p-icon--custom { @extend %icon; diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 5612f62f..bd6f12ec 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -1,12 +1,22 @@ import React from "react"; import { Meta, StoryObj } from "@storybook/react"; -import Icon, { ICONS } from "./Icon"; +import Icon, { + ICONS, + STANDARD_ICONS, + ADDITIONAL_ICONS, + SOCIAL_ICONS, + STATUS_ICONS, +} from "./Icon"; import "./Icon.stories.scss"; +const Template = ({ name }: { name: keyof typeof ICONS }) => ( + +); + const meta: Meta = { - component: Icon, + component: Template, tags: ["autodocs"], }; @@ -16,15 +26,28 @@ type Story = StoryObj; export const Base: Story = { name: "Base", - + argTypes: { + name: { + options: Object.keys(ICONS), + control: { type: "select" }, + }, + }, args: { - name: "facebook", + name: ICONS.facebook, }, }; -export const Default: Story = { - render: () => , - name: "Default", +export const Standard: Story = { + name: "Standard", + argTypes: { + name: { + options: Object.keys(STANDARD_ICONS), + control: { type: "select" }, + }, + }, + args: { + name: STANDARD_ICONS.plus, + }, }; /** @@ -39,6 +62,64 @@ export const Custom: Story = { * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention. */ export const Social: Story = { - render: () => , name: "Social", + argTypes: { + name: { + options: Object.keys(SOCIAL_ICONS), + control: { type: "select" }, + }, + }, + args: { + name: SOCIAL_ICONS.facebook, + }, +}; + +/** + * Outside of the standard set, additional icons are available for use, and need to be individually imported as `@include vf-p-icon-{name};`. + * To use additional icons that provide the name of the additional icon following the `.p-icon--{name}` convention. + */ +export const Additional: Story = { + name: "Additional", + argTypes: { + name: { + options: Object.keys(ADDITIONAL_ICONS), + control: { type: "select" }, + }, + }, + args: { + name: ADDITIONAL_ICONS.applications, + }, +}; + +const allIcons = { + Standard: STANDARD_ICONS, + Additional: ADDITIONAL_ICONS, + Social: SOCIAL_ICONS, + Status: STATUS_ICONS, +}; + +/** + * Here are provided all the icons that can be used following the `.p-icon--{name}` convention. + */ +export const AllIcons: Story = { + render: () => ( + <> + {Object.entries(allIcons).map(([name, icons]) => ( + + {name} + + {Object.keys(icons).map((icon) => ( + + + + {icon} + + + ))} + + + ))} + > + ), + name: "All icons", }; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 081f3d20..60b98be9 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -4,9 +4,11 @@ import React from "react"; import type { ClassName, PropsWithSpread, ValueOf } from "types"; -export const ICONS = { +export const STANDARD_ICONS = { anchor: "anchor", chevronDown: "chevron-down", + chevronLeft: "chevron-left", + chevronRight: "chevron-right", chevronUp: "chevron-up", close: "close", code: "code", @@ -14,28 +16,143 @@ export const ICONS = { copy: "copy", delete: "delete", drag: "drag", - error: "error", + errorGrey: "error-grey", expand: "expand", externalLink: "external-link", help: "help", - information: "information", + hide: "hide", menu: "menu", minus: "minus", plus: "plus", search: "search", share: "share", + show: "show", spinner: "spinner", - success: "success", + successGrey: "success-grey", user: "user", +} as const; + +export const STATUS_ICONS = { + error: "error", + information: "information", + success: "success", warning: "warning", +} as const; + +export const ADDITIONAL_ICONS = { + applications: "applications", + controllers: "controllers", + fullscreen: "fullscreen", + models: "models", + machines: "machines", + pin: "pin", + units: "units", + priorityCritical: "priority-critical", + priorityHigh: "priority-high", + priorityLow: "priority-low", + priorityMedium: "priority-medium", + priorityNegligible: "priority-negligible", + priorityUnknown: "priority-unknown", + addCanvas: "add-canvas", + addLogicalVolume: "add-logical-volume", + addPartition: "add-partition", + backToTop: "back-to-top", + beginDownloading: "begin-downloading", + bundle: "bundle", + canvas: "canvas", + changeVersion: "change-version", + comments: "comments", + conflictGrey: "conflict-grey", + conflictResolutionGrey: "conflict-resolution-grey", + conflictResolution: "conflict-resolution", + conflict: "conflict", + connected: "connected", + containers: "containers", + copyToClipboard: "copy-to-clipboard", + desktop: "desktop", + disconnect: "disconnect", + edit: "edit", + export: "export", + exposed: "exposed", + filter: "filter", + fork: "fork", + getLink: "get-link", + halfscreenBar: "halfscreen-bar", + highlightOff: "highlight-off", + highlightOn: "highlight-on", + home: "home", + import: "import", + inProgress: "in-progress", + inspectorDebug: "inspector-debug", + loadingSteps: "loading-steps", + lockLockedActive: "lock-locked-active", + lockLocked: "lock-locked", + lockUnlock: "lock-unlock", + maximiseBar: "maximise-bar", + minimiseBar: "minimise-bar", + mount2: "mount-2", + mount: "mount", + openTerminal: "open-terminal", + pause: "pause", + plans: "plans", + play: "play", + pods: "pods", + powerError: "power-error", + powerOff: "power-off", + powerOn: "power-on", + profile: "profile", + restart: "restart", + revisions: "revisions", + security: "security", + settings: "settings", + sortBoth: "sort-both", + sortDown: "sort-down", + sortUp: "sort-up", + starred: "starred", + statusFailedSmall: "status-failed-small", + statusInProgressSmall: "status-in-progress-small", + statusInProgress: "status-in-progress", + statusQueuedSmall: "status-queued-small", + statusQueued: "status-queued", + statusSucceededSmall: "status-succeeded-small", + statusWaitingSmall: "status-waiting-small", + statusWaiting: "status-waiting", + status: "status", + stop: "stop", + submitBug: "submit-bug", + switcherDashboard: "switcher-dashboard", + switcherEnvironments: "switcher-environments", + switcher: "switcher", + tag: "tag", + taskOutstanding: "task-outstanding", + timedOutGrey: "timed-out-grey", + timedOut: "timed-out", + topic: "topic", + unitPending: "unit-pending", + unitRunning: "unit-running", + unmount: "unmount", + unstarred: "unstarred", + userGroup: "user-group", + videoPlay: "video-play", + warningGrey: "warning-grey", +} as const; + +export const SOCIAL_ICONS = { + email: "email", facebook: "facebook", - twitter: "twitter", + github: "github", instagram: "instagram", linkedin: "linkedin", - youtube: "youtube", - github: "github", rss: "rss", - email: "email", + twitter: "twitter", + youtube: "youtube", +} as const; + +export const ICONS = { + ...STANDARD_ICONS, + ...STATUS_ICONS, + ...ADDITIONAL_ICONS, + ...SOCIAL_ICONS, } as const; export type Props = PropsWithSpread<
+ + {icon} +