Skip to content

Commit

Permalink
Icons updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Mykola Ptushchuk committed Oct 28, 2024
1 parent cbb0b91 commit 6ebdfbb
Show file tree
Hide file tree
Showing 3 changed files with 358 additions and 18 deletions.
146 changes: 146 additions & 0 deletions src/components/Icon/Icon.stories.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
91 changes: 84 additions & 7 deletions src/components/Icon/Icon.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -16,15 +22,28 @@ type Story = StoryObj<typeof Icon>;

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: () => <Icon name={ICONS.plus} />,
name: "Default",
export const Standart: Story = {
name: "Standart",
argTypes: {
name: {
options: Object.keys(STANDART_ICONS),
control: { type: "select" },
},
},
args: {
name: STANDART_ICONS.plus,
},
};

/**
Expand All @@ -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: () => <Icon name={ICONS.facebook} />,
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]) => (
<>
<h2>{name}</h2>
<div className="grid-row">
{Object.keys(icons).map((icon) => (
<div key={icon} className="p-card grid-col-2">
<p>
<Icon name={icon} style={{ marginRight: ".5rem" }} />
<span>{icon}</span>
</p>
</div>
))}
</div>
</>
))}
</>
),
name: "All icons",
};
Loading

0 comments on commit 6ebdfbb

Please sign in to comment.