✨ feat: Badgeコンポーネントにlabelプロパティを追加

uyupun · Dec 9, 2023 · ecc215f · ecc215f
1 parent 9fcfe4c
commit ecc215f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 28 deletions.
diff --git a/src/components/base/Badge/index.stories.tsx b/src/components/base/Badge/index.stories.tsx
@@ -12,13 +12,13 @@ type Story = StoryObj<typeof BaseBadge>;
 export const Badge: Story = {
   render: () => (
     <dl>
-      <dt style={{ marginBottom: '8px' }}>color=&quot;expo&quot;</dt>
+      <dt style={{ marginBottom: '8px' }}>label=&quot;Expo&quot;</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseBadge color="expo">Expo</BaseBadge>
+        <BaseBadge label="Expo"></BaseBadge>
       </dd>
-      <dt style={{ marginBottom: '8px' }}>color=&quot;fastApi&quot;</dt>
+      <dt style={{ marginBottom: '8px' }}>label=&quot;FastApi&quot;</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseBadge color="fastApi">FastAPI</BaseBadge>
+        <BaseBadge label="FastApi"></BaseBadge>
       </dd>
     </dl>
   ),

diff --git a/src/components/base/Badge/index.tsx b/src/components/base/Badge/index.tsx
@@ -1,24 +1,21 @@
-import { styles, type BadgeColor } from './styles.css';
+import { styles } from './styles.css';
 
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import type { Technology } from '@/styles/themes.css';
+import type { ComponentPropsWithoutRef, FC } from 'react';
 
 type BaseProps = {
   /**
-   * バッジのカラー
+   * バッジのラベル
    */
-  color: BadgeColor;
-  /**
-   * バッジのコンテンツ
-   */
-  children: ReactNode;
+  label: Technology;
 };
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>;
 
-const Badge: FC<Props> = ({ color, children, ...props }) => {
+const Badge: FC<Props> = ({ label, ...props }) => {
   return (
-    <span {...props} className={styles({ color })}>
-      {children}
+    <span {...props} className={styles({ label })}>
+      {label}
     </span>
   );
 };

diff --git a/src/components/base/Badge/styles.css.ts b/src/components/base/Badge/styles.css.ts
@@ -2,22 +2,16 @@ import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/themes.css';
+import { vars, type Technology } from '@/styles/themes.css';
 
-const badgeColor = {
-  expo: '#000000',
-  fastApi: '#009485',
-} as const;
-export type BadgeColor = keyof typeof badgeColor;
-
-const color: { [Key in BadgeColor]: string } = {
-  expo: style({
+const label: { [Key in Technology]: string } = {
+  Expo: style({
     color: vars.colors.white,
-    backgroundColor: badgeColor.expo,
+    backgroundColor: vars.technologyColors.Expo,
   }),
-  fastApi: style({
+  FastApi: style({
     color: vars.colors.white,
-    backgroundColor: badgeColor.fastApi,
+    backgroundColor: vars.technologyColors.FastApi,
   }),
 };
 
@@ -41,7 +35,7 @@ const styles = recipe({
     },
   ]),
   variants: {
-    color,
+    label,
   },
 });