docs(Icon): add list of default icon set

cultureamp · Sep 2, 2024 · b52bbc3 · b52bbc3
1 parent 819b30c
commit b52bbc3
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 5 deletions.
diff --git a/...ages/components/src/__illustrations__/Icon/v3/_docs/Icon--api-specification.mdx b/...ages/components/src/__illustrations__/Icon/v3/_docs/Icon--api-specification.mdx
@@ -1,12 +1,12 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
+import { Canvas, Meta, Controls, Story } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as IconStories from "./Icon.stories"
 
 <Meta title="Illustrations/Icon/Icon (v3)/API Specification" />
 
 # Icon API Specification (v3)
 
-Updated August 28, 2024
+Updated September 2, 2024
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__illustrations__/Icon/v3"
@@ -84,3 +84,9 @@ override the CSS variable `--icon-optical-size` (eg. in Tailwind - `[--icon-opti
 
 <Canvas of={IconStories.OpticalSize} />
 <Controls of={IconStories.OpticalSize} />
+
+## Default icon set
+
+Tip: Click on the icon you want for a quick copy!
+
+<Story of={IconStories.DefaultIconSet} />
diff --git a/packages/components/src/__illustrations__/Icon/v3/_docs/Icon.stories.tsx b/packages/components/src/__illustrations__/Icon/v3/_docs/Icon.stories.tsx
@@ -1,7 +1,12 @@
-import React from "react"
+import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import classnames from "classnames"
+import { Text } from "~components/Text"
+import { ToggleSwitchField } from "~components/ToggleSwitch"
 import { Button } from "~components/__actions__/v3"
+import { Tag } from "~components/__future__/Tag"
 import { StickerSheet } from "~storybook/components/StickerSheet"
+import { iconDefaultSet } from "../constants"
 import { Icon } from "../index"
 
 const meta = {
@@ -145,3 +150,78 @@ export const PresentationalIcon: Story = {
   ),
   args: { isPresentational: true },
 }
+
+const IconSetButton = ({
+  iconName,
+  isFilled,
+}: {
+  iconName: string
+  isFilled: boolean
+}): JSX.Element => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = (): void => {
+    const snippet = isFilled
+      ? `<Icon name="${iconName}" isPresentational isFilled />`
+      : `<Icon name="${iconName}" isPresentational />`
+    navigator.clipboard.writeText(snippet)
+
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1000)
+  }
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={classnames(
+          "flex flex-col justify-center items-center gap-16",
+          "cursor-pointer h-full w-full p-16 rounded",
+          "bg-gray-100 hover:bg-gray-200"
+        )}
+      >
+        {copied ? (
+          <Tag color="green" classNameOverride="border-1 border-green-500">
+            Copied!
+          </Tag>
+        ) : (
+          <>
+            <Icon name={iconName} isPresentational isFilled={isFilled} />
+            <Text variant="small" tag="span">
+              {iconName}
+            </Text>
+          </>
+        )}
+      </button>
+    </li>
+  )
+}
+
+export const DefaultIconSet: Story = {
+  render: () => {
+    const [isFilled, setIsFilled] = useState(false)
+
+    return (
+      <div className="flex flex-col gap-8">
+        <ToggleSwitchField
+          labelText="Filled"
+          toggledStatus={isFilled ? "on" : "off"}
+          onToggle={() => setIsFilled(!isFilled)}
+        />
+        <ul
+          className="grid list-none gap-16 m-0 p-0"
+          style={{ gridTemplateColumns: "repeat(auto-fit, minmax(11em, 1fr))" }}
+        >
+          {iconDefaultSet.map(iconName => (
+            <IconSetButton
+              key={iconName}
+              iconName={iconName}
+              isFilled={isFilled}
+            />
+          ))}
+        </ul>
+      </div>
+    )
+  },
+}
diff --git a/packages/components/src/__illustrations__/Icon/v3/constants.ts b/packages/components/src/__illustrations__/Icon/v3/constants.ts
@@ -1,8 +1,138 @@
-import { IconNames } from "./types"
+import type { IconNames } from "./types"
 
 /* eslint-disable camelcase */
 export const handledRtlIcons = {
   checklist: "checklist_rtl",
   format_list_numbered: "format_list_numbered_rtl",
 } satisfies Partial<Record<IconNames, IconNames>>
 /* eslint-enable camelcase */
+
+export const iconDefaultSet = [
+  "add",
+  "add_a_photo",
+  "add_comment",
+  "add_link",
+  "arrow_back",
+  "arrow_downward",
+  "arrow_drop_down",
+  "arrow_drop_up",
+  "arrow_forward",
+  "arrow_upward",
+  "assignment",
+  "assignment_add",
+  "assignment_ind",
+  "assignment_returned",
+  "assignment_turned_in",
+  "auto_awesome",
+  "backup",
+  "bar_chart",
+  "bookmark",
+  "brush",
+  "build",
+  "cached",
+  "cancel",
+  "chat_apps_script",
+  "chat_error",
+  "chat_paste_go",
+  "check",
+  "check_circle",
+  "chevron_left",
+  "chevron_right",
+  "close",
+  "close_fullscreen",
+  "cloud_download",
+  "comment_bank",
+  "content_copy",
+  "dashboard",
+  "date_range",
+  "delete",
+  "domain",
+  "draft",
+  "drag_indicator",
+  "edit",
+  "error",
+  "event",
+  "favorite",
+  "find_in_page",
+  "flag",
+  "flash_on",
+  "format_bold",
+  "format_indent_decrease",
+  "format_indent_increase",
+  "format_italic",
+  "format_list_bulleted",
+  "format_list_numbered",
+  "format_underlined",
+  "forum",
+  "forward",
+  "front_hand",
+  "grade",
+  "groups",
+  "help",
+  "history",
+  "home",
+  "horizontal_rule",
+  "info",
+  "key",
+  "keyboard_arrow_down",
+  "keyboard_arrow_up",
+  "keyboard_tab",
+  "label",
+  "lan",
+  "lightbulb",
+  "link_off",
+  "local_fire_department",
+  "lock",
+  "logout",
+  "mail",
+  "menu",
+  "mms",
+  "more_horiz",
+  "more_vert",
+  "north_east",
+  "note_alt",
+  "notifications_active",
+  "open_in_full",
+  "open_in_new",
+  "pause",
+  "percent",
+  "playlist_add_check",
+  "potted_plant",
+  "power",
+  "power_settings_new",
+  "print",
+  "privacy_tip",
+  "psychology_alt",
+  "radio_button_checked",
+  "radio_button_unchecked",
+  "rate_review",
+  "redo",
+  "reduce_capacity",
+  "refresh",
+  "remove",
+  "reviews",
+  "schedule",
+  "school",
+  "search",
+  "send",
+  "sentiment_dissatisfied",
+  "sentiment_neutral",
+  "sentiment_satisfied",
+  "sentiment_very_satisfied",
+  "settings",
+  "skip_next",
+  "skip_previous",
+  "sms",
+  "south_east",
+  "star",
+  "support",
+  "thumb_down",
+  "thumb_up",
+  "today",
+  "translate",
+  "tune",
+  "user_attributes",
+  "visibility_off",
+  "warning",
+  "zoom_in",
+] satisfies IconNames[]
diff --git a/packages/components/src/__illustrations__/Icon/v3/types.ts b/packages/components/src/__illustrations__/Icon/v3/types.ts
@@ -3,4 +3,9 @@ import iconsMetadata from "./material-symbols-metadata.json"
 // Icon names are from https://github.com/marella/material-symbols/blob/main/metadata/versions.json
 // Update `material-symbols-metadata.json` for new icons.
 // Last updated: 28 Aug 2024
-export type IconNames = keyof typeof iconsMetadata
+type MaterialIconNames = keyof typeof iconsMetadata
+
+// `auto_awesome` is not listed as part of Material Symbols, however is
+// available in Material Icons, which appears to still work.
+// https://fonts.google.com/icons?icon.query=auto+awesome&icon.set=Material+Icons&icon.size=20&icon.color=%23000000&selected=Material+Icons+Outlined:auto_awesome:
+export type IconNames = MaterialIconNames | "auto_awesome"