Merge pull request #1182 from openameba/refactor/spindle-icon-imports

refactor(spindle-ui): replace icon index imports with direct imports
openameba · Jan 9, 2025 · ed81d9c · ed81d9c
2 parents 6dc2057 + 7decf61
commit ed81d9c
Show file tree

Hide file tree

Showing 24 changed files with 398 additions and 377 deletions.
diff --git a/packages/spindle-ui/src/Button/Button.stories.mdx b/packages/spindle-ui/src/Button/Button.stories.mdx
@@ -1,7 +1,10 @@
 import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { Button } from './Button';
-import { PlusBold, Link, FileAdd, ChevronDownBold } from '../Icon';
+import PlusBold from '../Icon/PlusBold';
+import Link from '../Icon/Link';
+import FileAdd from '../Icon/FileAdd';
+import ChevronDownBold from '../Icon/ChevronDownBold';
 
 # Button
 

diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { actions } from '@storybook/addon-actions';
 
 import { Button } from '../Button';
-import { AllFill } from '../Icon';
+import AllFill from '../Icon/AllFill';
 import { DropdownMenu } from './DropdownMenu';
 
 export function Text() {

diff --git a/packages/spindle-ui/src/Form/Checkbox.tsx b/packages/spindle-ui/src/Form/Checkbox.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { CheckBold } from '../Icon';
+import CheckBold from '../Icon/CheckBold';
 
 interface Props
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {

diff --git a/packages/spindle-ui/src/Form/DropDown.tsx b/packages/spindle-ui/src/Form/DropDown.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 
-import { ChevronDownBold } from '../Icon';
+import ChevronDownBold from '../Icon/ChevronDownBold';
 
 interface Props
   extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'className'> {

diff --git a/packages/spindle-ui/src/Form/InlineDropDown.tsx b/packages/spindle-ui/src/Form/InlineDropDown.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 
-import { ChevronDownBold } from '../Icon';
+import ChevronDownBold from '../Icon/ChevronDownBold';
 
 type Size = 'medium' | 'small';
 

diff --git a/packages/spindle-ui/src/Form/InvalidMessage.tsx b/packages/spindle-ui/src/Form/InvalidMessage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ExclamationmarkCircleFill } from '../Icon';
+import ExclamationmarkCircleFill from '../Icon/ExclamationmarkCircleFill';
 
 interface Props
   extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'className'> {

diff --git a/packages/spindle-ui/src/Form/Radio.tsx b/packages/spindle-ui/src/Form/Radio.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { CheckBold } from '../Icon';
+import CheckBold from '../Icon/CheckBold';
 
 interface Props
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {

diff --git a/packages/spindle-ui/src/IconButton/IconButton.stories.mdx b/packages/spindle-ui/src/IconButton/IconButton.stories.mdx
@@ -1,7 +1,7 @@
 import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { IconButton } from './IconButton';
-import { PlusBold } from '../Icon';
+import PlusBold from '../Icon/PlusBold';
 
 # IconButton
 <Description>

diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.figma.tsx b/packages/spindle-ui/src/InlineNotification/InlineNotification.figma.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { InlineNotification } from './InlineNotification';
 import figma from '@figma/code-connect';
-import { CrossBold, Information } from 'src/Icon';
+import CrossBold from 'src/Icon/CrossBold';
+import Information from 'src/Icon/Information';
 
 figma.connect(
   InlineNotification,

diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.example.tsx b/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.example.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '../Button/Button';
-import { Information } from '../Icon';
+import Information from '../Icon/Information';
 import { InlineNotification } from './InlineNotification';
 
 export function VisiblePropsSample() {

diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.mdx b/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.mdx
@@ -1,7 +1,11 @@
 import { useState } from 'react'
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { InlineNotification } from './InlineNotification';
-import { Information, CheckCircleFill, Openblank, ExclamationmarkCircleFill, CrossBold } from '../Icon';
+import Information from '../Icon/Information';
+import CheckCircleFill from '../Icon/CheckCircleFill';
+import Openblank from '../Icon/Openblank';
+import ExclamationmarkCircleFill from '../Icon/ExclamationmarkCircleFill';
+import CrossBold from '../Icon/CrossBold';
 import {
   VisiblePropsSample
 } from './InlineNotification.stories.example';

diff --git a/packages/spindle-ui/src/LinkButton/LinkButton.stories.mdx b/packages/spindle-ui/src/LinkButton/LinkButton.stories.mdx
@@ -1,7 +1,14 @@
 import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { LinkButton } from './LinkButton';
-import { PlusBold, ArrowRightBold, OpenblankFill, Link, GraphBar, Present, PencilAdd, ChevronDownBold } from '../Icon';
+import PlusBold from '../Icon/PlusBold';
+import ArrowRightBold from '../Icon/ArrowRightBold';
+import OpenblankFill from '../Icon/OpenblankFill';
+import Link from '../Icon/Link';
+import GraphBar from '../Icon/GraphBar';
+import Present from '../Icon/Present';
+import PencilAdd from '../Icon/PencilAdd';
+import ChevronDownBold from '../Icon/ChevronDownBold';
 
 # LinkButton
 

diff --git a/packages/spindle-ui/src/List/MoreLink.tsx b/packages/spindle-ui/src/List/MoreLink.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { ChevronRightBold } from '../Icon';
+import ChevronRightBold from '../Icon/ChevronRightBold';
 
 interface Props
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {

diff --git a/packages/spindle-ui/src/Modal/AppealModal.tsx b/packages/spindle-ui/src/Modal/AppealModal.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { ButtonGroup as Group } from '../ButtonGroup';
-import { CrossBold } from '../Icon';
+import CrossBold from '../Icon/CrossBold';
 import { IconButton } from '../IconButton';
 import { SubtleButton } from '../SubtleButton';
 

diff --git a/packages/spindle-ui/src/Modal/SemiModal.tsx b/packages/spindle-ui/src/Modal/SemiModal.tsx
@@ -7,7 +7,7 @@ import React, {
   useState,
 } from 'react';
 import mergeRefs from 'react-merge-refs';
-import { CrossBold } from '../Icon';
+import CrossBold from '../Icon/CrossBold';
 import { IconButton } from '../IconButton';
 
 type Size = 'large' | 'medium' | 'small';

diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.figma.tsx b/packages/spindle-ui/src/SnackBar/SnackBar.figma.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { SnackBar } from './SnackBar';
 import figma from '@figma/code-connect';
-import {
-  CheckCircleFill,
-  ExclamationmarkCircleFill,
-  Information,
-} from 'src/Icon';
+import CheckCircleFill from 'src/Icon/CheckCircleFill';
+import ExclamationmarkCircleFill from 'src/Icon/ExclamationmarkCircleFill';
+import Information from 'src/Icon/Information';
 
 figma.connect(
   SnackBar,

diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.stories.mdx b/packages/spindle-ui/src/SnackBar/SnackBar.stories.mdx
@@ -3,7 +3,11 @@ import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { SnackBar } from './SnackBar';
 import { Button } from '../Button';
-import { Information, CheckCircleFill, Openblank, ExclamationmarkCircleFill } from '../Icon';
+import Information from '../Icon/Information';
+import CheckCircleFill from '../Icon/CheckCircleFill';
+import Openblank from '../Icon/Openblank';
+import ExclamationmarkCircleFill from '../Icon/ExclamationmarkCircleFill';
+
 
 export const usePoliteAnnouncer = (message) => {
   const announcer = useRef(null);

diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.tsx b/packages/spindle-ui/src/SnackBar/SnackBar.tsx
@@ -11,7 +11,7 @@ import React, {
   useMemo,
 } from 'react';
 import { useStackNotificationComponent } from '../StackNotificationManager';
-import { CrossBold } from '../Icon';
+import CrossBold from '../Icon/CrossBold';
 import { IconButton } from '../IconButton';
 import { TextLink as SpindleTextLink } from '../TextLink/TextLink';
 import { TextButton as SpindleTextButton } from '../TextButton/TextButton';

diff --git a/...ages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.example.tsx b/...ages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.example.tsx
@@ -6,7 +6,7 @@ import {
   StackPosition,
 } from './StackNotificationManager';
 import { Button } from '../Button';
-import { Information } from '../Icon';
+import Information from '../Icon/Information';
 import { useRepeatedStackItem } from './hooks';
 
 const usePoliteAnnouncer = (active: boolean, message: string) => {

diff --git a/packages/spindle-ui/src/TextButton/TextButton.stories.mdx b/packages/spindle-ui/src/TextButton/TextButton.stories.mdx
@@ -1,7 +1,9 @@
 import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { TextButton } from './TextButton';
-import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
+import ChevronRightBold from '../Icon/ChevronRightBold';
+import CameraFill from '../Icon/CameraFill';
+import PencilAdd from '../Icon/PencilAdd';
 
 # TextButton
 

diff --git a/packages/spindle-ui/src/TextLink/TextLink.stories.mdx b/packages/spindle-ui/src/TextLink/TextLink.stories.mdx
@@ -1,7 +1,9 @@
 import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { TextLink } from './TextLink';
-import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
+import ChevronRightBold from '../Icon/ChevronRightBold';
+import CameraFill from '../Icon/CameraFill';
+import PencilAdd from '../Icon/PencilAdd';
 
 # TextLink
 

diff --git a/packages/spindle-ui/src/Toast/Toast.stories.mdx b/packages/spindle-ui/src/Toast/Toast.stories.mdx
@@ -3,7 +3,9 @@ import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { actions } from '@storybook/addon-actions';
 import { Toast } from './Toast';
 import { Button } from '../Button';
-import { Information, CheckCircleFill, ExclamationmarkCircleFill } from '../Icon';
+import Information from '../Icon/Information';
+import CheckCircleFill from '../Icon/CheckCircleFill';
+import ExclamationmarkCircleFill from '../Icon/ExclamationmarkCircleFill';
 
 export const usePoliteAnnouncer = (message) => {
   const announcer = useRef(null);

diff --git a/packages/spindle-ui/src/Toast/Toast.tsx b/packages/spindle-ui/src/Toast/Toast.tsx
@@ -3,7 +3,7 @@ import {
   ManagedStack,
   useStackNotificationComponent,
 } from '../StackNotificationManager';
-import { CrossBold } from '../Icon';
+import CrossBold from '../Icon/CrossBold';
 import { IconButton } from '../IconButton';
 import { StackNotificationComponentProps } from '../StackNotificationManager/StackNotificationManager';