fix: bring back fill support for icons

kouprlabs · Jan 10, 2025 · 8915102 · 8915102
1 parent 5dcab5a
commit 8915102
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 87 deletions.
diff --git a/.github/workflows/check-on-pr.yml b/.github/workflows/check-on-pr.yml
@@ -35,7 +35,7 @@ jobs:
       pull-requests: read
       checks: write
 
-  build-storybook:
+  storybook-build:
     runs-on: ubuntu-latest
     needs: build
     steps:
@@ -54,7 +54,7 @@ jobs:
         run: bun run build
 
       - name: Build Storybook
-        run: bun run build-storybook
+        run: bun run storybook:build
     permissions:
       contents: read
       pull-requests: read
@@ -64,7 +64,7 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - build
-      - build-storybook
+      - storybook-build
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v4

diff --git a/.parcelrc b/.parcelrc
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ bun run storybook
 Build Storybook:
 
 ```shell
-bun run build-storybook
+bun run storybook:build
 ```
 
 ## Licensing

diff --git a/package.json b/package.json
@@ -16,8 +16,10 @@
     "tsc": "tsc",
     "format": "prettier --write .",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "clean": "rimraf ./dist",
     "storybook": "rollup -c && bun ./scripts/post-build.ts && storybook dev -p 6006 --ci",
-    "build-storybook": "rollup -c && bun ./scripts/post-build.ts && storybook build"
+    "storybook:build": "rollup -c && bun ./scripts/post-build.ts && storybook build",
+    "storybook:clean": "rimraf ./storybook-static"
   },
   "dependencies": {
     "@chakra-ui/react": "2.10.3",

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -280,8 +280,8 @@ type WrapperProps = {
 const Wrapper = ({ className, filled, children, ...props }: WrapperProps) => (
   <span
     className={cx(
-      'koupr-material-symbols-rounded',
-      { 'koupr-material-symbols-rounded__filled': filled },
+      { 'koupr-material-symbols-rounded': !filled },
+      { 'koupr-material-symbols-rounded-filled': filled },
       className,
     )}
     style={{ fontSize: props.style?.fontSize ?? '16px' }}

diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,7 @@
 //
 // Use of this software is governed by the MIT License
 // included in the file LICENSE in the root of this repository.
-import '@fontsource-variable/material-symbols-rounded'
+import '@fontsource-variable/material-symbols-rounded/full.css'
 import '@fontsource-variable/unbounded'
 import '@fontsource/ibm-plex-sans'
 import './styles.css'

diff --git a/src/stories/components/icon.stories.tsx b/src/stories/components/icon.stories.tsx
@@ -86,79 +86,87 @@ export default meta
 type Story = StoryObj
 
 export const Default: Story = {
-  render: () => (
+  args: {
+    filled: false,
+  },
+  argTypes: {
+    filled: {
+      control: 'boolean',
+    },
+  },
+  render: (args) => (
     <div className={cx('flex', 'flex-wrap', 'gap-1.5', 'w-[400px]')}>
-      <IconPlayArrow />
-      <IconUpload />
-      <IconAdminPanelSettings />
-      <IconDatabase />
-      <IconRemoveOperator />
-      <IconNotifications />
-      <IconMoreVert />
-      <IconLogout />
-      <IconChevronLeft />
-      <IconChevronRight />
-      <IconChevronDown />
-      <IconChevronUp />
-      <IconAdd />
-      <IconEdit />
-      <IconGroup />
-      <IconDownload />
-      <IconArrowTopRight />
-      <IconFileCopy />
-      <IconDelete />
-      <IconSend />
-      <IconPersonAdd />
-      <IconPerson />
-      <IconCheck />
-      <IconLibraryAddCheck />
-      <IconSelectCheckBox />
-      <IconCheckBoxOutlineBlank />
-      <IconCheckCircle />
-      <IconError />
-      <IconWarning />
-      <IconInvitations />
-      <IconWorkspaces />
-      <IconFlag />
-      <IconClose />
-      <IconSchedule />
-      <IconClearAll />
-      <IconOpenInNew />
-      <IconInfo />
-      <IconSearch />
-      <IconRefresh />
-      <IconSync />
-      <IconGridView />
-      <IconArrowUpward />
-      <IconArrowDownward />
-      <IconExpandMore />
-      <IconList />
-      <IconHourglass />
-      <IconKeyboardArrowLeft />
-      <IconKeyboardArrowRight />
-      <IconKeyboardDoubleArrowRight />
-      <IconKeyboardDoubleArrowLeft />
-      <IconFirstPage />
-      <IconLastPage />
-      <IconHistory />
-      <IconModeHeat />
-      <IconSecurity />
-      <IconVisibility />
-      <IconTune />
-      <IconHome />
-      <IconStacks />
-      <IconCloudUpload />
-      <IconBolt />
-      <IconChat />
-      <IconFavorite />
-      <IconWhatshot />
-      <IconSwapVerticalCircle />
-      <IconFrontHand />
-      <IconHandshake />
-      <IconRemoveModerator />
-      <IconShield />
-      <IconThumbUp />
-      <IconThumbDown />
+      <IconPlayArrow {...args} />
+      <IconUpload {...args} />
+      <IconAdminPanelSettings {...args} />
+      <IconDatabase {...args} />
+      <IconRemoveOperator {...args} />
+      <IconNotifications {...args} />
+      <IconMoreVert {...args} />
+      <IconLogout {...args} />
+      <IconChevronLeft {...args} />
+      <IconChevronRight {...args} />
+      <IconChevronDown {...args} />
+      <IconChevronUp {...args} />
+      <IconAdd {...args} />
+      <IconEdit {...args} />
+      <IconGroup {...args} />
+      <IconDownload {...args} />
+      <IconArrowTopRight {...args} />
+      <IconFileCopy {...args} />
+      <IconDelete {...args} />
+      <IconSend {...args} />
+      <IconPersonAdd {...args} />
+      <IconPerson {...args} />
+      <IconCheck {...args} />
+      <IconLibraryAddCheck {...args} />
+      <IconSelectCheckBox {...args} />
+      <IconCheckBoxOutlineBlank {...args} />
+      <IconCheckCircle {...args} />
+      <IconError {...args} />
+      <IconWarning {...args} />
+      <IconInvitations {...args} />
+      <IconWorkspaces {...args} />
+      <IconFlag {...args} />
+      <IconClose {...args} />
+      <IconSchedule {...args} />
+      <IconClearAll {...args} />
+      <IconOpenInNew {...args} />
+      <IconInfo {...args} />
+      <IconSearch {...args} />
+      <IconRefresh {...args} />
+      <IconSync {...args} />
+      <IconGridView {...args} />
+      <IconArrowUpward {...args} />
+      <IconArrowDownward {...args} />
+      <IconExpandMore {...args} />
+      <IconList {...args} />
+      <IconHourglass {...args} />
+      <IconKeyboardArrowLeft {...args} />
+      <IconKeyboardArrowRight {...args} />
+      <IconKeyboardDoubleArrowRight {...args} />
+      <IconKeyboardDoubleArrowLeft {...args} />
+      <IconFirstPage {...args} />
+      <IconLastPage {...args} />
+      <IconHistory {...args} />
+      <IconModeHeat {...args} />
+      <IconSecurity {...args} />
+      <IconVisibility {...args} />
+      <IconTune {...args} />
+      <IconHome {...args} />
+      <IconStacks {...args} />
+      <IconCloudUpload {...args} />
+      <IconBolt {...args} />
+      <IconChat {...args} />
+      <IconFavorite {...args} />
+      <IconWhatshot {...args} />
+      <IconSwapVerticalCircle {...args} />
+      <IconFrontHand {...args} />
+      <IconHandshake {...args} />
+      <IconRemoveModerator {...args} />
+      <IconShield {...args} />
+      <IconThumbUp {...args} />
+      <IconThumbDown {...args} />
     </div>
   ),
 }
diff --git a/src/stories/components/logo.stories.tsx b/src/stories/components/logo.stories.tsx
@@ -18,4 +18,14 @@ export const Default: Story = {
     type: 'voltaserve',
     size: 'sm',
   },
+  argTypes: {
+    type: {
+      options: ['voltaserve', 'koupr'],
+      control: 'select',
+    },
+    size: {
+      options: ['sm', 'md'],
+      control: 'select',
+    },
+  },
 }
diff --git a/src/styles.css b/src/styles.css
@@ -18,7 +18,7 @@
     'opsz' 24;
 }
 
-.koupr-material-symbols-rounded__filled {
+.koupr-material-symbols-rounded-filled {
   font-family: 'Material Symbols Rounded Variable';
   font-variation-settings:
     'FILL' 1,