From 15d77b3dd16ee17f4368696b4593955542eb2dad Mon Sep 17 00:00:00 2001 From: Mykola Ptushchuk Date: Wed, 30 Oct 2024 13:44:10 +0200 Subject: [PATCH] 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 a1ff2ad6..bd6f12ec 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 19959d9b..60b98be9 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,