docs(storybook): Icons updates

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;

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 }) => (
+  <Icon name={ICONS[name]} />
+);
+
 const meta: Meta<typeof Icon> = {
-  component: Icon,
+  component: Template,
   tags: ["autodocs"],
 };
 
@@ -16,15 +26,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 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: () => <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: 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]) => (
+        <div key={name}>
+          <h2>{name}</h2>
+          <div className="grid-row">
+            {Object.keys(icons).map((icon) => (
+              <div key={icon} className="p-card grid-col-2">
+                <p>
+                  <Icon name={ICONS[icon]} style={{ marginRight: ".5rem" }} />
+                  <span>{icon}</span>
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </>
+  ),
+  name: "All icons",
 };