@kaizen/components 1.66.1 → 1.67.0

package/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx

@@ -0,0 +1,126 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { CheckboxField } from "~components/Checkbox"
+import { Label } from "~components/Label"
+import { Text } from "~components/Text"
+import { Button as ButtonV2 } from "~components/__actions__/v2"
+import { Button as ButtonV3 } from "~components/__actions__/v3"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { handledRtlIcons, iconDefaultSet } from "../constants"
+import { Icon, IconProps } from "../index"
+
+export default {
+  title: "Illustrations/Icon/Icon (Future)",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      name: "star",
+      isPresentational: true,
+    } satisfies IconProps
+
+    const mirrorInRTL = [
+      "arrow_forward",
+      "arrow_back",
+      ...Object.keys(handledRtlIcons),
+    ] satisfies Array<IconProps["name"]>
+
+    return (
+      <>
+        <StickerSheet heading="Icon" isReversed={isReversed}>
+          <StickerSheet.Header
+            headings={["Outlined", "Filled", "Color"]}
+            hasVerticalHeadings
+          />
+          <StickerSheet.Body>
+            {iconDefaultSet.map(name => (
+              <StickerSheet.Row key={name} rowTitle={name}>
+                <Icon {...defaultProps} name={name} />
+                <Icon {...defaultProps} name={name} isFilled />
+                <Icon {...defaultProps} name={name} className="text-blue-500" />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet heading="shouldMirrorInRTL" isReversed={isReversed}>
+          <StickerSheet.Header
+            headings={[
+              'true; dir=["ltr"]',
+              'true; dir=["rtl"]',
+              'false; dir=["rtl"]',
+            ]}
+            hasVerticalHeadings
+          />
+          <StickerSheet.Body>
+            {mirrorInRTL.map(name => (
+              <StickerSheet.Row key={name} rowTitle={name}>
+                <div dir="ltr" className="text-center">
+                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+                </div>
+                <div dir="rtl" className="text-center">
+                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+                </div>
+                <div dir="rtl" className="text-center">
+                  <Icon {...defaultProps} name={name} />
+                </div>
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet
+          heading="Alignment as children within other components"
+          isReversed={isReversed}
+        >
+          <StickerSheet.Body>
+            <StickerSheet.Row rowTitle="Text">
+              <Text variant="body">
+                Showcase alignment of an icon <Icon {...defaultProps} /> within
+                a sentence
+              </Text>
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Label">
+              <Label>
+                Field label <Icon {...defaultProps} />
+              </Label>
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="CheckboxField">
+              <CheckboxField
+                labelText={
+                  <>
+                    Checkbox label <Icon {...defaultProps} />
+                  </>
+                }
+              />
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Button (v2)">
+              <ButtonV2
+                label="Button label"
+                icon={<Icon {...defaultProps} />}
+              />
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Button (v3)">
+              <ButtonV3>
+                <Icon {...defaultProps} /> Button label
+              </ButtonV3>
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

package/src/__future__/Icon/constants.ts

@@ -0,0 +1,149 @@
+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",
+  "group",
+  "groups",
+  "help",
+  "history",
+  "home",
+  "horizontal_rule",
+  "info",
+  "key",
+  "keyboard_arrow_down",
+  "keyboard_arrow_up",
+  "keyboard_tab",
+  "keyboard_tab_rtl",
+  "label",
+  "lan",
+  "lightbulb",
+  "link_off",
+  "list",
+  "local_fire_department",
+  "lock",
+  "logout",
+  "mail",
+  "manage_accounts",
+  "menu",
+  "mms",
+  "more_horiz",
+  "more_vert",
+  "north_east",
+  "note_alt",
+  "notifications_active",
+  "open_in_full",
+  "open_in_new",
+  "pause",
+  "percent",
+  "person",
+  "person_add",
+  "person_cancel",
+  "person_check",
+  "play_circle",
+  "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",
+  "sensors",
+  "sentiment_dissatisfied",
+  "sentiment_neutral",
+  "sentiment_satisfied",
+  "sentiment_very_satisfied",
+  "settings",
+  "sms",
+  "south_east",
+  "star",
+  "support",
+  "thumb_down",
+  "thumb_up",
+  "today",
+  "translate",
+  "tune",
+  "undo",
+  "user_attributes",
+  "visibility",
+  "visibility_off",
+  "warning",
+  "zoom_in",
+  "zoom_out",
+] satisfies IconNames[]

package/src/__future__/Icon/index.ts

@@ -0,0 +1 @@
+export * from "./Icon"