Merge pull request #345 from uyupun/fix/305_image-link

ImageLinkコンポーネントのデザインを修正
uyupun · Jan 1, 2024 · f44ddc6 · f44ddc6
2 parents c1daa02 + 278164c
commit f44ddc6
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 57 deletions.
diff --git a/src/components/common/ImageLink/index.stories.tsx b/src/components/common/ImageLink/index.stories.tsx
@@ -54,7 +54,7 @@ const height: ComponentProps<typeof Image>['height'] = {
 export const ImageLink: Story = {
   render: () => (
     <dl>
-      <dt>Default</dt>
+      <dt style={{ color: 'white' }}>Default</dt>
       <dd style={{ marginBottom: '16px' }}>
         <CommonImageLink
           height={height}
@@ -67,7 +67,9 @@ export const ImageLink: Story = {
           ゼウスくん
         </CommonImageLink>
       </dd>
-      <dt>target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;</dt>
+      <dt style={{ color: 'white' }}>
+        target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;
+      </dt>
       <dd style={{ marginBottom: '16px' }}>
         <CommonImageLink
           height={height}
@@ -82,7 +84,7 @@ export const ImageLink: Story = {
           ゼウスくん
         </CommonImageLink>
       </dd>
-      <dt>Complex children</dt>
+      <dt style={{ color: 'white' }}>Complex children</dt>
       <dd style={{ marginBottom: '16px' }}>
         <CommonImageLink
           height={height}

diff --git a/src/components/common/ImageLink/index.tsx b/src/components/common/ImageLink/index.tsx
@@ -50,7 +50,9 @@ const ImageLink: FC<Props> = ({ href, target, rel, text, children, ...rest }) =>
         refs: https://www.w3.org/WAI/tutorials/images/functional
               https://dequeuniversity.com/rules/axe/4.4/image-redundant-alt
       */}
-      <Image {...rest} alt="" />
+      <div className={styles.imageWrapper}>
+        <Image {...rest} alt="" />
+      </div>
       <div className={styles.hoverContainer}>{children}</div>
       <div className={styles.linkText}>{text}</div>
     </NextLink>

diff --git a/src/components/common/ImageLink/styles.css.ts b/src/components/common/ImageLink/styles.css.ts
@@ -11,12 +11,14 @@ const imageLink = style([
       desktop: 20,
     },
     color: 'white',
-    outlineColor: {
-      focusVisible: 'lightBlue',
+    outlineWidth: {
+      focusVisible: 1,
+    },
+    outlineStyle: {
+      focusVisible: 'solid',
     },
-    opacity: {
-      focusVisible: 0.8,
-      hover: 0.8,
+    outlineColor: {
+      focusVisible: 'white',
     },
     cursor: {
       default: 'pointer',
@@ -27,57 +29,67 @@ const imageLink = style([
   },
 ]);
 
-const styles = {
-  imageLink,
-  hoverContainer: style([
-    sprinkles({
-      position: 'absolute',
-      display: {
-        mobile: 'none',
-        desktop: 'inline-flex',
-      },
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'hoverBlue',
-      padding: 1,
-    }),
-    {
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      opacity: 0,
-      transition: 'opacity 300ms',
-      selectors: {
-        [`${imageLink}:focus-visible &`]: {
-          opacity: 1,
-        },
-        [`${imageLink}:hover &`]: {
-          opacity: 1,
-        },
-      },
+const imageWrapper = sprinkles({
+  backgroundColor: 'white',
+});
+
+const hoverContainer = style([
+  sprinkles({
+    position: 'absolute',
+    display: {
+      mobile: 'none',
+      desktop: 'inline-flex',
     },
-  ]),
-  linkText: style([
-    sprinkles({
-      display: {
-        mobile: 'inline-flex',
-        desktop: 'none',
-      },
-      justifyContent: 'center',
-      fontSize: {
-        mobile: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'hoverBlue',
+    padding: 1,
+  }),
+  {
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    opacity: 0,
+    transition: 'opacity 300ms',
+    selectors: {
+      [`${imageLink}:focus-visible &`]: {
+        opacity: 1,
       },
-      color: 'lightBlue',
-      marginTop: {
-        mobile: 1,
+      [`${imageLink}:hover &`]: {
+        opacity: 1,
       },
-    }),
-    {
-      width: '100%',
-      textDecoration: 'underline',
     },
-  ]),
+  },
+]);
+
+const linkText = style([
+  sprinkles({
+    display: {
+      mobile: 'inline-flex',
+      desktop: 'none',
+    },
+    justifyContent: 'center',
+    fontSize: {
+      mobile: 18,
+    },
+    lineHeight: 1,
+    color: 'white',
+    marginTop: {
+      mobile: 1,
+    },
+  }),
+  {
+    width: '100%',
+    textDecoration: 'underline',
+  },
+]);
+
+const styles = {
+  imageLink,
+  imageWrapper,
+  hoverContainer,
+  linkText,
 };
 
 export { styles };
diff --git a/src/styles/themes.css.ts b/src/styles/themes.css.ts
@@ -9,7 +9,7 @@ export const colors = {
   darkGray: '#656565',
   blue: '#1E1ADE',
   lightBlue: '#0080FF',
-  hoverBlue: 'rgba(30, 26, 222, 0.8)',
+  hoverBlue: 'rgba(11, 96, 223, 0.8)',
   indigo: '#0054A6',
   purple: '#B01CF6',
   red: '#FF4747',