✨ feat: isLargeプロパティを追加

uyupun · Dec 28, 2023 · a746b83 · a746b83
1 parent ab6c59b
commit a746b83
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/components/base/TextLink/index.stories.tsx b/src/components/base/TextLink/index.stories.tsx
@@ -24,6 +24,12 @@ export const TextLink: Story = {
           target=&quot;_blank&quot; TextLink
         </BaseTextLink>
       </dd>
+      <dt style={{ color: 'white' }}>isLarge=&quot;true&quot;</dt>
+      <dd style={{ marginBottom: '16px' }}>
+        <BaseTextLink href={pagesPath.$url()} isLarge={true}>
+          isLarge=&quot;true&quot; TextLink
+        </BaseTextLink>
+      </dd>
     </dl>
   ),
 };
diff --git a/src/components/base/TextLink/index.tsx b/src/components/base/TextLink/index.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import NextLink, { type LinkProps } from 'next/link';
 
 import { getSafeLinkRel } from '@/utils/getSafeLinkRel';
@@ -16,6 +17,10 @@ type BaseProps = {
    * <TextLink href={pagesPath.$url()}>link text</TextLink>
    */
   href: LinkProps['href'];
+  /**
+   * 文字サイズを大きくするかどうか
+   */
+  isLarge?: boolean;
   /**
    * リンクのコンテンツ
    */
@@ -24,11 +29,11 @@ type BaseProps = {
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>;
 
-const TextLink: FC<Props> = ({ href, children, rel, target, ...props }) => {
+const TextLink: FC<Props> = ({ href, isLarge = false, children, rel, target, ...props }) => {
   return (
     <NextLink
       {...props}
-      className={styles.link}
+      className={clsx(styles.link, isLarge && styles.large)}
       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
@@ -29,6 +29,14 @@ const styles = {
       textDecoration: 'underline',
     },
   ]),
+  large: sprinkles({
+    fontSize: {
+      mobile: 24,
+      desktop: 36,
+    },
+    fontWeight: 'bold',
+    lineHeight: 1.3,
+  }),
 };
 
 export { styles };