From 12ce74c722814f6b82f042a611efdfab57a8b127 Mon Sep 17 00:00:00 2001 From: Mykola Ptushchuk Date: Mon, 28 Oct 2024 16:35:25 +0200 Subject: [PATCH 1/2] Icons updates --- src/components/Icon/Icon.stories.scss | 146 ++++++++++++++++++++++++++ src/components/Icon/Icon.stories.tsx | 91 ++++++++++++++-- src/components/Icon/Icon.tsx | 139 ++++++++++++++++++++++-- 3 files changed, 358 insertions(+), 18 deletions(-) diff --git a/src/components/Icon/Icon.stories.scss b/src/components/Icon/Icon.stories.scss index 106b10553..fc3fffb48 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 5612f62fc..a1ff2ad63 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -1,7 +1,13 @@ import React from "react"; import { Meta, StoryObj } from "@storybook/react"; -import Icon, { ICONS } from "./Icon"; +import Icon, { + ICONS, + STANDART_ICONS, + ADDITIONAL_ICONS, + SOCIAL_ICONS, + STATUS_ICONS, +} from "./Icon"; import "./Icon.stories.scss"; @@ -16,15 +22,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 Standart: Story = { + name: "Standart", + argTypes: { + name: { + options: Object.keys(STANDART_ICONS), + control: { type: "select" }, + }, + }, + args: { + name: STANDART_ICONS.plus, + }, }; /** @@ -39,6 +58,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: STANDART_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 081f3d207..19959d9bb 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -4,38 +4,155 @@ import React from "react"; import type { ClassName, PropsWithSpread, ValueOf } from "types"; -export const ICONS = { +export const STANDART_ICONS = { anchor: "anchor", - chevronDown: "chevron-down", - chevronUp: "chevron-up", + "chevron-down": "chevron-down", + "chevron-left": "chevron-left", + "chevron-right": "chevron-right", + "chevron-up": "chevron-up", close: "close", code: "code", collapse: "collapse", copy: "copy", delete: "delete", drag: "drag", - error: "error", + "error-grey": "error-grey", expand: "expand", - externalLink: "external-link", + "external-link": "external-link", help: "help", - information: "information", + hide: "hide", menu: "menu", minus: "minus", plus: "plus", search: "search", share: "share", + show: "show", spinner: "spinner", - success: "success", + "success-grey": "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", + "priority-critical": "priority-critical", + "priority-high": "priority-high", + "priority-low": "priority-low", + "priority-medium": "priority-medium", + "priority-negligible": "priority-negligible", + "priority-unknown": "priority-unknown", + "add-canvas": "add-canvas", + "add-logical-volume": "add-logical-volume", + "add-partition": "add-partition", + "back-to-top": "back-to-top", + "begin-downloading": "begin-downloading", + bundle: "bundle", + canvas: "canvas", + "change-version": "change-version", + comments: "comments", + "conflict-grey": "conflict-grey", + "conflict-resolution-grey": "conflict-resolution-grey", + "conflict-resolution": "conflict-resolution", + conflict: "conflict", + connected: "connected", + containers: "containers", + "copy-to-clipboard": "copy-to-clipboard", + desktop: "desktop", + disconnect: "disconnect", + edit: "edit", + export: "export", + exposed: "exposed", + filter: "filter", + fork: "fork", + "get-link": "get-link", + "halfscreen-bar": "halfscreen-bar", + "highlight-off": "highlight-off", + "highlight-on": "highlight-on", + home: "home", + import: "import", + "in-progress": "in-progress", + "inspector-debug": "inspector-debug", + "loading-steps": "loading-steps", + "lock-locked-active": "lock-locked-active", + "lock-locked": "lock-locked", + "lock-unlock": "lock-unlock", + "maximise-bar": "maximise-bar", + "minimise-bar": "minimise-bar", + "mount-2": "mount-2", + mount: "mount", + "open-terminal": "open-terminal", + pause: "pause", + plans: "plans", + play: "play", + pods: "pods", + "power-error": "power-error", + "power-off": "power-off", + "power-on": "power-on", + profile: "profile", + restart: "restart", + revisions: "revisions", + security: "security", + settings: "settings", + "sort-both": "sort-both", + "sort-down": "sort-down", + "sort-up": "sort-up", + starred: "starred", + "status-failed-small": "status-failed-small", + "status-in-progress-small": "status-in-progress-small", + "status-in-progress": "status-in-progress", + "status-queued-small": "status-queued-small", + "status-queued": "status-queued", + "status-succeeded-small": "status-succeeded-small", + "status-waiting-small": "status-waiting-small", + "status-waiting": "status-waiting", + status: "status", + stop: "stop", + "submit-bug": "submit-bug", + "switcher-dashboard": "switcher-dashboard", + "switcher-environments": "switcher-environments", + switcher: "switcher", + tag: "tag", + "task-outstanding": "task-outstanding", + "timed-out-grey": "timed-out-grey", + "timed-out": "timed-out", + topic: "topic", + "unit-pending": "unit-pending", + "unit-running": "unit-running", + unmount: "unmount", + unstarred: "unstarred", + "user-group": "user-group", + "video-play": "video-play", + "warning-grey": "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 = { + ...STANDART_ICONS, + ...STATUS_ICONS, + ...ADDITIONAL_ICONS, + ...SOCIAL_ICONS, } as const; export type Props = PropsWithSpread< From a266d119e73007602df59c0aab4ead85461a3d30 Mon Sep 17 00:00:00 2001 From: Mykola Ptushchuk Date: Wed, 30 Oct 2024 13:44:10 +0200 Subject: [PATCH 2/2] Change icons name to camelCase, standard typo fix --- src/components/Icon/Icon.stories.tsx | 24 ++--- src/components/Icon/Icon.tsx | 128 +++++++++++++-------------- 2 files changed, 78 insertions(+), 74 deletions(-) diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index a1ff2ad63..bd6f12ec0 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"; import Icon, { ICONS, - STANDART_ICONS, + STANDARD_ICONS, ADDITIONAL_ICONS, SOCIAL_ICONS, STATUS_ICONS, @@ -11,8 +11,12 @@ import Icon, { import "./Icon.stories.scss"; +const Template = ({ name }: { name: keyof typeof ICONS }) => ( + +); + const meta: Meta = { - component: Icon, + component: Template, tags: ["autodocs"], }; @@ -33,16 +37,16 @@ export const Base: Story = { }, }; -export const Standart: Story = { - name: "Standart", +export const Standard: Story = { + name: "Standard", argTypes: { name: { - options: Object.keys(STANDART_ICONS), + options: Object.keys(STANDARD_ICONS), control: { type: "select" }, }, }, args: { - name: STANDART_ICONS.plus, + name: STANDARD_ICONS.plus, }, }; @@ -88,7 +92,7 @@ export const Additional: Story = { }; const allIcons = { - Standard: STANDART_ICONS, + Standard: STANDARD_ICONS, Additional: ADDITIONAL_ICONS, Social: SOCIAL_ICONS, Status: STATUS_ICONS, @@ -101,19 +105,19 @@ export const AllIcons: Story = { render: () => ( <> {Object.entries(allIcons).map(([name, icons]) => ( - <> +

{name}

{Object.keys(icons).map((icon) => (

- + {icon}

))}
- +
))} ), diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 19959d9bb..60b98be94 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -4,21 +4,21 @@ import React from "react"; import type { ClassName, PropsWithSpread, ValueOf } from "types"; -export const STANDART_ICONS = { +export const STANDARD_ICONS = { anchor: "anchor", - "chevron-down": "chevron-down", - "chevron-left": "chevron-left", - "chevron-right": "chevron-right", - "chevron-up": "chevron-up", + chevronDown: "chevron-down", + chevronLeft: "chevron-left", + chevronRight: "chevron-right", + chevronUp: "chevron-up", close: "close", code: "code", collapse: "collapse", copy: "copy", delete: "delete", drag: "drag", - "error-grey": "error-grey", + errorGrey: "error-grey", expand: "expand", - "external-link": "external-link", + externalLink: "external-link", help: "help", hide: "hide", menu: "menu", @@ -28,7 +28,7 @@ export const STANDART_ICONS = { share: "share", show: "show", spinner: "spinner", - "success-grey": "success-grey", + successGrey: "success-grey", user: "user", } as const; @@ -47,28 +47,28 @@ export const ADDITIONAL_ICONS = { machines: "machines", pin: "pin", units: "units", - "priority-critical": "priority-critical", - "priority-high": "priority-high", - "priority-low": "priority-low", - "priority-medium": "priority-medium", - "priority-negligible": "priority-negligible", - "priority-unknown": "priority-unknown", - "add-canvas": "add-canvas", - "add-logical-volume": "add-logical-volume", - "add-partition": "add-partition", - "back-to-top": "back-to-top", - "begin-downloading": "begin-downloading", + 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", - "change-version": "change-version", + changeVersion: "change-version", comments: "comments", - "conflict-grey": "conflict-grey", - "conflict-resolution-grey": "conflict-resolution-grey", - "conflict-resolution": "conflict-resolution", + conflictGrey: "conflict-grey", + conflictResolutionGrey: "conflict-resolution-grey", + conflictResolution: "conflict-resolution", conflict: "conflict", connected: "connected", containers: "containers", - "copy-to-clipboard": "copy-to-clipboard", + copyToClipboard: "copy-to-clipboard", desktop: "desktop", disconnect: "disconnect", edit: "edit", @@ -76,65 +76,65 @@ export const ADDITIONAL_ICONS = { exposed: "exposed", filter: "filter", fork: "fork", - "get-link": "get-link", - "halfscreen-bar": "halfscreen-bar", - "highlight-off": "highlight-off", - "highlight-on": "highlight-on", + getLink: "get-link", + halfscreenBar: "halfscreen-bar", + highlightOff: "highlight-off", + highlightOn: "highlight-on", home: "home", import: "import", - "in-progress": "in-progress", - "inspector-debug": "inspector-debug", - "loading-steps": "loading-steps", - "lock-locked-active": "lock-locked-active", - "lock-locked": "lock-locked", - "lock-unlock": "lock-unlock", - "maximise-bar": "maximise-bar", - "minimise-bar": "minimise-bar", - "mount-2": "mount-2", + 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", - "open-terminal": "open-terminal", + openTerminal: "open-terminal", pause: "pause", plans: "plans", play: "play", pods: "pods", - "power-error": "power-error", - "power-off": "power-off", - "power-on": "power-on", + powerError: "power-error", + powerOff: "power-off", + powerOn: "power-on", profile: "profile", restart: "restart", revisions: "revisions", security: "security", settings: "settings", - "sort-both": "sort-both", - "sort-down": "sort-down", - "sort-up": "sort-up", + sortBoth: "sort-both", + sortDown: "sort-down", + sortUp: "sort-up", starred: "starred", - "status-failed-small": "status-failed-small", - "status-in-progress-small": "status-in-progress-small", - "status-in-progress": "status-in-progress", - "status-queued-small": "status-queued-small", - "status-queued": "status-queued", - "status-succeeded-small": "status-succeeded-small", - "status-waiting-small": "status-waiting-small", - "status-waiting": "status-waiting", + 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", - "submit-bug": "submit-bug", - "switcher-dashboard": "switcher-dashboard", - "switcher-environments": "switcher-environments", + submitBug: "submit-bug", + switcherDashboard: "switcher-dashboard", + switcherEnvironments: "switcher-environments", switcher: "switcher", tag: "tag", - "task-outstanding": "task-outstanding", - "timed-out-grey": "timed-out-grey", - "timed-out": "timed-out", + taskOutstanding: "task-outstanding", + timedOutGrey: "timed-out-grey", + timedOut: "timed-out", topic: "topic", - "unit-pending": "unit-pending", - "unit-running": "unit-running", + unitPending: "unit-pending", + unitRunning: "unit-running", unmount: "unmount", unstarred: "unstarred", - "user-group": "user-group", - "video-play": "video-play", - "warning-grey": "warning-grey", + userGroup: "user-group", + videoPlay: "video-play", + warningGrey: "warning-grey", } as const; export const SOCIAL_ICONS = { @@ -149,7 +149,7 @@ export const SOCIAL_ICONS = { } as const; export const ICONS = { - ...STANDART_ICONS, + ...STANDARD_ICONS, ...STATUS_ICONS, ...ADDITIONAL_ICONS, ...SOCIAL_ICONS,