From a7089a6e419fb14833230c195e76d51986b75df8 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 29 Jun 2023 07:09:28 -0700
Subject: [PATCH] Add docs for VuiIcon.

---
 src/docs/pages.tsx               |  3 ++-
 src/docs/pages/icon/Colors.tsx   | 20 ++++++++++++++++++++
 src/docs/pages/icon/Sizes.tsx    | 20 ++++++++++++++++++++
 src/docs/pages/icon/index.tsx    | 20 ++++++++++++++++++++
 src/lib/components/icon/Icon.tsx |  9 +++------
 src/lib/components/icon/types.ts | 13 +++++++++++++
 src/lib/components/index.ts      |  3 +++
 7 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 src/docs/pages/icon/Colors.tsx
 create mode 100644 src/docs/pages/icon/Sizes.tsx
 create mode 100644 src/docs/pages/icon/index.tsx
 create mode 100644 src/lib/components/icon/types.ts

diff --git a/src/docs/pages.tsx b/src/docs/pages.tsx
index 2a678ac..d46f826 100644
--- a/src/docs/pages.tsx
+++ b/src/docs/pages.tsx
@@ -1,6 +1,7 @@
 // Components
 import { button } from "./pages/button";
 import { drawer } from "./pages/drawer";
+import { icon } from "./pages/icon";
 import { menu } from "./pages/menu";
 import { modal } from "./pages/modal";
 import { optionsList } from "./pages/optionsList";
@@ -18,7 +19,7 @@ type Example = { name?: string; component: React.ReactNode; source: string };
 export const sections: Section[] = [
   {
     name: "Components",
-    pages: [button, drawer, menu, modal, optionsList, popover, searchInput, setting]
+    pages: [button, drawer, icon, menu, modal, optionsList, popover, searchInput, setting]
   },
   {
     name: "Utils",
diff --git a/src/docs/pages/icon/Colors.tsx b/src/docs/pages/icon/Colors.tsx
new file mode 100644
index 0000000..9049dd9
--- /dev/null
+++ b/src/docs/pages/icon/Colors.tsx
@@ -0,0 +1,20 @@
+import { BiStar } from "react-icons/bi";
+import { ICON_COLOR, VuiFlexContainer, VuiFlexItem, VuiIcon, VuiText } from "../../../lib";
+
+export const Colors = () => {
+  return (
+    <VuiFlexContainer>
+      {ICON_COLOR.map((color) => (
+        <VuiFlexItem grow={false} key={color}>
+          <VuiText>
+            <p>Color {color}</p>
+          </VuiText>
+
+          <VuiIcon color={color} size="m">
+            <BiStar />
+          </VuiIcon>
+        </VuiFlexItem>
+      ))}
+    </VuiFlexContainer>
+  );
+};
diff --git a/src/docs/pages/icon/Sizes.tsx b/src/docs/pages/icon/Sizes.tsx
new file mode 100644
index 0000000..d57a607
--- /dev/null
+++ b/src/docs/pages/icon/Sizes.tsx
@@ -0,0 +1,20 @@
+import { BiStar } from "react-icons/bi";
+import { ICON_SIZE, VuiFlexContainer, VuiFlexItem, VuiIcon, VuiText } from "../../../lib";
+
+export const Sizes = () => {
+  return (
+    <VuiFlexContainer>
+      {ICON_SIZE.map((size) => (
+        <VuiFlexItem grow={false} key={size}>
+          <VuiText>
+            <p>Size {size}</p>
+          </VuiText>
+
+          <VuiIcon size={size}>
+            <BiStar />
+          </VuiIcon>
+        </VuiFlexItem>
+      ))}
+    </VuiFlexContainer>
+  );
+};
diff --git a/src/docs/pages/icon/index.tsx b/src/docs/pages/icon/index.tsx
new file mode 100644
index 0000000..55f6ede
--- /dev/null
+++ b/src/docs/pages/icon/index.tsx
@@ -0,0 +1,20 @@
+import { Sizes } from "./Sizes";
+import { Colors } from "./Colors";
+
+const SizesSource = require("!!raw-loader!./Sizes");
+const ColorsSource = require("!!raw-loader!./Colors");
+
+export const icon = {
+  name: "Icon",
+  path: "/icon",
+  examples: [
+    {
+      component: <Sizes />,
+      source: SizesSource.default.toString()
+    },
+    {
+      component: <Colors />,
+      source: ColorsSource.default.toString()
+    }
+  ]
+};
diff --git a/src/lib/components/icon/Icon.tsx b/src/lib/components/icon/Icon.tsx
index 84748b8..83c2de9 100644
--- a/src/lib/components/icon/Icon.tsx
+++ b/src/lib/components/icon/Icon.tsx
@@ -1,10 +1,7 @@
 import classNames from "classnames";
 import { ReactNode, cloneElement } from "react";
 import { IconContext } from "react-icons";
-
-const COLOR = ["inherit", "accent", "primary", "success", "warning", "danger", "subdued", "normal", "empty"] as const;
-
-const SIZE = ["s", "m", "l", "xl", "xxl"] as const;
+import { ICON_COLOR, ICON_SIZE } from "./types";
 
 const sizeToValueMap = {
   s: "16",
@@ -16,9 +13,9 @@ const sizeToValueMap = {
 
 type Props = {
   children: ReactNode;
-  color?: (typeof COLOR)[number];
+  color?: (typeof ICON_COLOR)[number];
   className?: string;
-  size?: (typeof SIZE)[number];
+  size?: (typeof ICON_SIZE)[number];
 };
 
 export const VuiIcon = ({ children, size = "m", color = "inherit", className }: Props) => {
diff --git a/src/lib/components/icon/types.ts b/src/lib/components/icon/types.ts
new file mode 100644
index 0000000..b1dde9a
--- /dev/null
+++ b/src/lib/components/icon/types.ts
@@ -0,0 +1,13 @@
+export const ICON_COLOR = [
+  "inherit",
+  "accent",
+  "primary",
+  "success",
+  "warning",
+  "danger",
+  "subdued",
+  "normal",
+  "empty"
+] as const;
+
+export const ICON_SIZE = ["s", "m", "l", "xl", "xxl"] as const;
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 0d1ea04..b4010ea 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -16,6 +16,7 @@ import { VuiFlexItem } from "./flex/FlexItem";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
 import { VuiIcon } from "./icon/Icon";
+import { ICON_COLOR, ICON_SIZE } from "./icon/types";
 import { VuiLabel, VuiSelect } from "./form";
 import { VuiLink, VuiLinkInternal } from "./link/Link";
 import { VuiMenu } from "./menu/Menu";
@@ -46,6 +47,8 @@ export type { ButtonColor, TabSize };
 export {
   BUTTON_COLOR,
   BUTTON_SIZE,
+  ICON_COLOR,
+  ICON_SIZE,
   TAB_SIZE,
   VuiAppContent,
   VuiAppHeader,