🐛 fix: 文字サイズを変更するためのプロパティを修正

uyupun · Dec 29, 2023 · a07d526 · a07d526
1 parent d04e302
commit a07d526
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/src/components/base/TextLink/index.stories.tsx b/src/components/base/TextLink/index.stories.tsx
@@ -24,10 +24,10 @@ export const TextLink: Story = {
           target=&quot;_blank&quot; TextLink
         </BaseTextLink>
       </dd>
-      <dt style={{ color: 'white' }}>isLarge=&quot;true&quot;</dt>
+      <dt style={{ color: 'white' }}>size=&quot;lg&quot;</dt>
       <dd style={{ marginBottom: '16px' }}>
-        <BaseTextLink href={pagesPath.$url()} isLarge={true}>
-          isLarge=&quot;true&quot; TextLink
+        <BaseTextLink href={pagesPath.$url()} size={'lg'}>
+          size=&quot;lg&quot; TextLink
         </BaseTextLink>
       </dd>
     </dl>

diff --git a/src/components/base/TextLink/index.tsx b/src/components/base/TextLink/index.tsx
@@ -1,9 +1,8 @@
-import clsx from 'clsx';
 import NextLink, { type LinkProps } from 'next/link';
 
 import { getSafeLinkRel } from '@/utils/getSafeLinkRel';
 
-import { styles } from './styles.css';
+import { styles, type Size } from './styles.css';
 
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 
@@ -18,9 +17,9 @@ type BaseProps = {
    */
   href: LinkProps['href'];
   /**
-   * 文字サイズを大きくするかどうか
+   * 文字のサイズ
    */
-  isLarge?: boolean;
+  size?: Size;
   /**
    * リンクのコンテンツ
    */
@@ -29,11 +28,11 @@ type BaseProps = {
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>;
 
-const TextLink: FC<Props> = ({ href, isLarge = false, children, rel, target, ...props }) => {
+const TextLink: FC<Props> = ({ href, size = 'md', children, rel, target, ...props }) => {
   return (
     <NextLink
       {...props}
-      className={clsx(styles.link, isLarge && styles.large)}
+      className={styles({ size })}
       href={href}
       rel={getSafeLinkRel(rel, target)}
       target={target}

diff --git a/src/components/base/TextLink/styles.css.ts b/src/components/base/TextLink/styles.css.ts
@@ -1,15 +1,29 @@
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '@/styles/sprinkles.css';
 
-const styles = {
-  link: style([
+type Size = 'md' | 'lg';
+
+const size: { [Key in Size]: string } = {
+  md: sprinkles({
+    fontSize: {
+      mobile: 14,
+      desktop: 16,
+    },
+  }),
+  lg: sprinkles({
+    fontSize: {
+      mobile: 24,
+      desktop: 36,
+    },
+  }),
+};
+
+const styles = recipe({
+  base: style([
     sprinkles({
       display: 'inline-block',
-      fontSize: {
-        mobile: 14,
-        desktop: 16,
-      },
       lineHeight: 1,
       color: 'white',
       outlineWidth: {
@@ -29,14 +43,9 @@ const styles = {
       textDecoration: 'underline',
     },
   ]),
-  large: sprinkles({
-    fontSize: {
-      mobile: 24,
-      desktop: 36,
-    },
-    fontWeight: 'bold',
-    lineHeight: 1.3,
-  }),
-};
+  variants: {
+    size,
+  },
+});
 
-export { styles };
+export { styles, type Size };