From b52bbc37099f7c11721838d3091b311e2b930f3e Mon Sep 17 00:00:00 2001 From: Cassandra Tam Date: Mon, 2 Sep 2024 16:54:02 +1000 Subject: [PATCH] docs(Icon): add list of default icon set --- .../Icon/v3/_docs/Icon--api-specification.mdx | 10 +- .../Icon/v3/_docs/Icon.stories.tsx | 82 ++++++++++- .../__illustrations__/Icon/v3/constants.ts | 132 +++++++++++++++++- .../src/__illustrations__/Icon/v3/types.ts | 7 +- 4 files changed, 226 insertions(+), 5 deletions(-) diff --git a/packages/components/src/__illustrations__/Icon/v3/_docs/Icon--api-specification.mdx b/packages/components/src/__illustrations__/Icon/v3/_docs/Icon--api-specification.mdx index 58b63b1dae2..6e7e5425cdc 100644 --- a/packages/components/src/__illustrations__/Icon/v3/_docs/Icon--api-specification.mdx +++ b/packages/components/src/__illustrations__/Icon/v3/_docs/Icon--api-specification.mdx @@ -1,4 +1,4 @@ -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" @@ -6,7 +6,7 @@ import * as IconStories from "./Icon.stories" # Icon API Specification (v3) -Updated August 28, 2024 +Updated September 2, 2024 + +## Default icon set + +Tip: Click on the icon you want for a quick copy! + + diff --git a/packages/components/src/__illustrations__/Icon/v3/_docs/Icon.stories.tsx b/packages/components/src/__illustrations__/Icon/v3/_docs/Icon.stories.tsx index 6883485d724..ecc09bc426b 100644 --- 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 + ? `` + : `` + navigator.clipboard.writeText(snippet) + + setCopied(true) + setTimeout(() => setCopied(false), 1000) + } + + return ( +
  • + +
    • + ) +} + +export const DefaultIconSet: Story = { + render: () => { + const [isFilled, setIsFilled] = useState(false) + + return ( +
    + setIsFilled(!isFilled)} + /> +
      + {iconDefaultSet.map(iconName => ( + + ))} +
    +
    + ) + }, +} diff --git a/packages/components/src/__illustrations__/Icon/v3/constants.ts b/packages/components/src/__illustrations__/Icon/v3/constants.ts index 569e55c0fcf..8ef5b5a4b5f 100644 --- a/packages/components/src/__illustrations__/Icon/v3/constants.ts +++ b/packages/components/src/__illustrations__/Icon/v3/constants.ts @@ -1,4 +1,4 @@ -import { IconNames } from "./types" +import type { IconNames } from "./types" /* eslint-disable camelcase */ export const handledRtlIcons = { @@ -6,3 +6,133 @@ export const handledRtlIcons = { format_list_numbered: "format_list_numbered_rtl", } satisfies Partial> /* 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 index b576954b519..bcd476c504f 100644 --- 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"