Merge branch 'empty-states' into 'main'

make icons great again

See merge request !40

.eslintrc.cjs

@@ -42,6 +42,7 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "import/namespace": ["error", { allowComputed: true }],
   },
   settings: {
     "import/parsers": {

README.md

@@ -68,11 +68,16 @@ This is the current workflow:
 
 Download or copy the SVG code from Figma. Save it into `src/assets/icons/your-file-name.svg`.
 In the file, change the stroke color to `currentColor`. This is to enable dynamic stroke colors.
-Add an entry to the `intex.ts` where you import the svg file, since this allows the bundler to pick-up the file correctly.
-Add `"your-file-name"` to `iconNameOptions` array and the `iconMap` dict of `Icon.tsx`. Then, you can use your icon like this:
+Add an _export_ entry to the `src/assets/icons/index.ts`:
 
 ```tsx
-<Icon name="your-file-name" color="secondary" />
+export { default as YourFileName } from "./your-file-name.svg";
+```
+
+Then, you can use your icon like this (note the casing):
+
+```tsx
+<Icon name="YourFileName" color="secondary" />
 ```
 
 ### Classnames

src/assets/icons/index.ts

-import AttentionCircle from "./attention-circle.svg";
-import CheckmarkCircle from "./checkmark-circle.svg";
-import Checkmark from "./checkmark.svg";
-import CrossCircle from "./cross-circle.svg";
-import Cross from "./cross.svg";
-import Datepicker from "./datepicker.svg";
-import Download from "./download.svg";
-import Dropdown from "./dropdown.svg";
-import Edit from "./edit.svg";
-import Expand from "./expand.svg";
-import Eye from "./eye.svg";
-import InfoCircle from "./info-circle.svg";
-import Layer from "./layer.svg";
-import Magnifier from "./magnifier.svg";
-import Minus from "./minus.svg";
-import Next from "./next.svg";
-import Plus from "./plus.svg";
-import Previous from "./previous.svg";
-import Up from "./up.svg";
+export { default as AttentionCircle } from "./attention-circle.svg";
 
-export default {
-  AttentionCircle,
-  CheckmarkCircle,
-  Checkmark,
-  CrossCircle,
-  Cross,
-  Datepicker,
-  Download,
-  Dropdown,
-  Edit,
-  Expand,
-  Eye,
-  InfoCircle,
-  Layer,
-  Magnifier,
-  Minus,
-  Next,
-  Plus,
-  Previous,
-  Up,
-};
+export { default as CheckmarkCircle } from "./checkmark-circle.svg";
+export { default as Checkmark } from "./checkmark.svg";
+export { default as CrossCircle } from "./cross-circle.svg";
+export { default as Cross } from "./cross.svg";
+export { default as Datepicker } from "./datepicker.svg";
+export { default as Download } from "./download.svg";
+export { default as Dropdown } from "./dropdown.svg";
+export { default as Edit } from "./edit.svg";
+export { default as Expand } from "./expand.svg";
+export { default as Eye } from "./eye.svg";
+export { default as InfoCircle } from "./info-circle.svg";
+export { default as Layer } from "./layer.svg";
+export { default as Magnifier } from "./magnifier.svg";
+export { default as Minus } from "./minus.svg";
+export { default as Next } from "./next.svg";
+export { default as Plus } from "./plus.svg";
+export { default as Previous } from "./previous.svg";
+export { default as Up } from "./up.svg";

src/components/Alert.tsx

@@ -20,10 +20,10 @@ type AlertProps = {
  */
 const Alert = ({ title, message, alertType = "primary" }: AlertProps) => {
   const icon = {
-    primary: "info-circle",
-    warning: "attention-circle",
-    positive: "checkmark-circle",
-    negative: "cross-circle",
+    primary: "InfoCircle",
+    warning: "AttentionCircle",
+    positive: "CheckmarkCircle",
+    negative: "CrossCircle",
   };
   const baseClass =
     "flex flex-row items-start py-[13px] px-[15px] rounded-[8px] w-min border-l-8 border-y-0 border-r-0 bg-baseWhite dark:bg-mediumGrey shadow-2xl";
@@ -40,7 +40,7 @@ const Alert = ({ title, message, alertType = "primary" }: AlertProps) => {
         <Typography text={message} variant="paragraph" />
       </div>
       {/* if used more often than below and in Modal, consider making it a CloseIcon */}
-      <Icon name="cross" color="body" customClass="cursor-pointer" />
+      <Icon name="Cross" color="body" customClass="cursor-pointer" />
     </div>
   );
 };

src/components/Breadcrumb.tsx

@@ -17,7 +17,7 @@ const Breadcrumb = ({ items }: BreadcrumbProps) => {
       itemsBeforeCollapse={1}
       itemsAfterCollapse={2}
       separator={
-        <Icon name="next" color="body" customClass="w-[7px] h-[7px]" />
+        <Icon name="Next" color="body" customClass="w-[7px] h-[7px]" />
       }
       itemClasses={{
         item: clsx(

src/components/Checkbox.tsx

@@ -30,7 +30,7 @@ const Checkbox = ({
       isDisabled={isDisabled}
       isSelected={isSelected}
       onValueChange={setIsSelected}
-      icon={isSelected ? <Icon name="checkmark" color="body" /> : <></>}
+      icon={isSelected ? <Icon name="Checkmark" color="body" /> : <></>}
       // This seems to be the only way to enable customization of background and border color
       // that's why the color "default" is set to "transparent" in tailwind.config.js
       color="default"

src/components/DateInput.tsx

@@ -77,7 +77,7 @@ const DateInput = ({
             labelCustomColor={labelCustomColor}
             endContent={
               <Icon
-                name="datepicker"
+                name="Datepicker"
                 // Note: textColor("body") has a different grey, hence the below is used
                 customClass="text-grey dark:text-baseWhite"
               />
@@ -106,7 +106,7 @@ const DateInput = ({
   }: PaginationProps) => (
     <div className="flex flex-row justify-between items-center px-2 h-[30px] border-b-1 border-grey">
       <button onClick={onClickPrev} className="w-[16px] h-[16px]">
-        <Icon name="previous" color="body" />
+        <Icon name="Previous" color="body" />
       </button>
       <Typography
         text={text}
@@ -115,7 +115,7 @@ const DateInput = ({
         customClass={textColor("body")}
       />
       <button onClick={onClickNext} className="w-[16px] h-[16px]">
-        <Icon name="next" color="body" />
+        <Icon name="Next" color="body" />
       </button>
     </div>
   );

src/components/Dropdown.tsx

@@ -58,7 +58,7 @@ const Dropdown = ({
         variant: "bordered",
         isRequired: isRequired,
       }} // use the same props as BaseInput
-      selectorIcon={<Icon name="dropdown" />}
+      selectorIcon={<Icon name="Dropdown" />}
       isClearable={false} // so the "cross" button does not show
       classNames={{
         selectorButton: clsx(

src/components/Icon.tsx

 import { ReactSVG } from "react-svg";
 import { clsx } from "clsx";
-import Icons from "src/assets/icons";
+import * as Icons from "src/assets/icons";
 import { TextColorType } from "./utils/colors.ts";
 import { textColor } from "./utils/classes.ts";
 
-export const iconNameOptions = [
-  "attention-circle",
-  "checkmark",
-  "checkmark-circle",
-  "cross",
-  "cross-circle",
-  "datepicker",
-  "download",
-  "dropdown",
-  "edit",
-  "expand",
-  "eye",
-  "info-circle",
-  "layer",
-  "magnifier",
-  "minus",
-  "next",
-  "plus",
-  "previous",
-  "up",
-] as const; // for storybook dropdown
-
-export type IconName = (typeof iconNameOptions)[number]; // for storybook dropdown
-
-const iconMap = {
-  "attention-circle": Icons.AttentionCircle,
-  checkmark: Icons.Checkmark,
-  "checkmark-circle": Icons.CheckmarkCircle,
-  cross: Icons.Cross,
-  "cross-circle": Icons.CrossCircle,
-  datepicker: Icons.Datepicker,
-  download: Icons.Download,
-  dropdown: Icons.Dropdown,
-  expand: Icons.Expand,
-  edit: Icons.Edit,
-  eye: Icons.Eye,
-  "info-circle": Icons.InfoCircle,
-  layer: Icons.Layer,
-  magnifier: Icons.Magnifier,
-  minus: Icons.Minus,
-  next: Icons.Next,
-  plus: Icons.Plus,
-  previous: Icons.Previous,
-  up: Icons.Up,
-};
+export type IconName = keyof typeof Icons;
+export const iconNameOptions = Object.keys(Icons) as IconName[]; // for storybook dropdown
 
 type IconProps = {
   name: IconName;
@@ -64,7 +21,7 @@ type IconProps = {
  * @param customClass: string | undefined
  */
 const Icon = ({ name, color = null, customClass = "" }: IconProps) => {
-  const src = iconMap[name];
+  const src = Icons[name];
 
   if (!color && !customClass) {
     return <ReactSVG src={src} style={{ color: "currentColor" }} />;

src/components/Menu.tsx

@@ -90,7 +90,7 @@ export const ActionMenu = ({ label, items, onAction }: MenuProps) => {
       onAction={onAction}
       menuTrigger={
         <NextButton
-          startContent={<Icon name="dropdown" />}
+          startContent={<Icon name="Dropdown" />}
           className={buttonBaseClass} // same as Button component (src/components/Button.tsx)
           type="button"
           color="primary"
@@ -133,7 +133,7 @@ export const ProfileMenu = ({ label, items, onAction }: MenuProps) => {
               />
             }
           />
-          <Icon name="dropdown" color="primary" />
+          <Icon name="Dropdown" color="primary" />
         </div>
       }
     />

src/components/Modal.tsx

@@ -36,7 +36,7 @@ const Modal = ({
 }: ModalProps) => {
   const closeButton = (
     <button>
-      <Icon name="cross" />
+      <Icon name="Cross" />
     </button>
   );
   return (

src/stories/Button.stories.tsx

@@ -29,7 +29,7 @@ export const IconButton: StoryObj = {
   args: {
     label: "Download",
     color: "primary",
-    icon: "download",
+    icon: "Download",
   },
   argTypes: {
     icon: { control: "select", options: iconNameOptions },

src/stories/Icon.stories.ts

 import { Meta, StoryObj } from "@storybook/react";
-import Icon from "src/components/Icon.tsx";
+import Icon, { iconNameOptions } from "src/components/Icon.tsx";
 import { textColorOptions } from "src/components/utils/colors.ts";
 
 /** Icons are visual symbols used to represent ideas, objects, or actions. Icons can also be used in buttons. They communicate messages at a glance, afford interactivity, and draw attention to important information. */
@@ -7,6 +7,7 @@ const meta = {
   title: "Components/Icon",
   component: Icon,
   argTypes: {
+    name: { control: "select", options: iconNameOptions },
     color: { control: "select", options: textColorOptions },
   },
 } satisfies Meta;
@@ -15,7 +16,7 @@ export default meta;
 
 export const SimpleIcon: StoryObj = {
   args: {
-    name: "attention-circle",
+    name: "AttentionCircle",
     color: "body",
     customClass: "w-[16px] h-[16px]",
   },

src/stories/Menu.stories.tsx

@@ -14,9 +14,9 @@ const meta = {
 export default meta;
 
 const items = [
-  { key: "expand", itemName: "Expand", iconName: "expand" },
-  { key: "add", itemName: "Add", iconName: "plus" },
-  { key: "remove", itemName: "Remove", iconName: "cross", danger: true },
+  { key: "expand", itemName: "Expand", iconName: "Expand" },
+  { key: "add", itemName: "Add", iconName: "Plus" },
+  { key: "remove", itemName: "Remove", iconName: "Cross", danger: true },
 ];
 
 export const ActionMenuWithoutIcons = () => {