feat: add transition props in Picture, and restricted use on Hero

src/lib/components/Hero/Hero.stories.tsx

@@ -1,4 +1,3 @@
-import { action } from "@storybook/addon-actions"
 import type { Meta, StoryObj } from "@storybook/react"
 import { Hero } from "./Hero"
 
@@ -7,14 +6,12 @@ const meta = {
   component: Hero,
   args: {
     title: "Hello Everyone, I'm a cat.",
-    description: "I'm a cat, and I'm here to say hello to you.",
     image: { src: "/image/example.jpg" },
     imageCaption: (
       <>
         Photo by <a>@shoota</a> in 2024
       </>
     ),
-    onClick: action("onClick"),
   },
 } satisfies Meta<typeof Hero>
 

src/lib/components/Hero/Hero.tsx

@@ -1,21 +1,20 @@
 import { ComponentProps, PropsWithChildren } from "react"
 import { Card } from "../../core"
 
-type Props = ComponentProps<typeof Card>
+type CardProps = ComponentProps<typeof Card>
+
+type Props = Pick<CardProps, "image" | "imageCaption" | "title">
 export const Hero = ({
   title,
-  description,
   image,
   imageCaption,
-  onClick,
 }: PropsWithChildren<Props>) => {
   return (
     <Card
       title={title}
-      description={description}
       image={image}
       imageCaption={imageCaption}
-      onClick={onClick}
+      transition={false}
     />
   )
 }

src/lib/core/Card/index.tsx

@@ -4,31 +4,37 @@ import { colors } from "../../theme/color"
 import { Picture } from "../Picture"
 
 type Props = {
-  title: string
+  title?: string
   description?: ReactNode
   onClick?: () => void
 } & ComponentProps<typeof Picture>
 
 export const Card = ({
   title,
   description,
+  onClick,
   image,
   imageCaption,
-  onClick,
+  transition,
   children,
 }: PropsWithChildren<Props>) => {
   return (
     <BasicCard onClick={onClick} isClickable={!!onClick}>
       <Container>
-        <Picture image={image} imageCaption={imageCaption} />
+        <Picture
+          image={image}
+          imageCaption={imageCaption}
+          transition={transition}
+        />
         <ContentContainer>
-          <h1>{title}</h1>
-          <div>{description}</div>
-
-          <Content>
-            <hr />
-            {children}
-          </Content>
+          {title && <h1>{title}</h1>}
+          {description && <div>{description}</div>}
+          {children && (
+            <Content>
+              <hr />
+              {children}
+            </Content>
+          )}
         </ContentContainer>
       </Container>
     </BasicCard>

src/lib/core/Picture/Picture.stories.tsx

@@ -11,6 +11,7 @@ const meta = {
         Photo by <a>@shoota</a> in 2024
       </>
     ),
+    transition: false,
   },
 } satisfies Meta<typeof Picture>
 

src/lib/core/Picture/index.tsx

@@ -1,17 +1,19 @@
 import styled from "@emotion/styled"
 import { ImgHTMLAttributes, ReactNode } from "react"
 import { colors, colorsRGB } from "../../theme/color"
+import { css } from "@emotion/react"
 
 type ImageProps = ImgHTMLAttributes<HTMLImageElement>
 
 type Props = {
   image?: ImageProps
   imageCaption?: ReactNode
+  transition?: boolean
 }
-export const Picture = ({ image, imageCaption }: Props) => {
+export const Picture = ({ image, imageCaption, transition }: Props) => {
   return (
     <PictureContainer>
-      <Image {...image} />
+      <Image {...image} transition={transition} />
       <PictureCaption>{imageCaption}</PictureCaption>
     </PictureContainer>
   )
@@ -40,7 +42,17 @@ const PictureCaption = styled.figcaption`
   background-color: rgb(${colorsRGB.dark}, 0.6);
 `
 
-const Image = styled.img<{ src?: string }>`
+const imageTransition = css`
+  :hover,
+  :focus {
+    opacity: 1;
+    filter: grayscale(0.6);
+    transition:
+      opacity 1.2s,
+      filter 1s 0.4s;
+  }
+`
+const Image = styled.img<{ src?: string; transition?: boolean }>`
   box-sizing: content-box;
   display: block;
   vertical-align: top;
@@ -61,11 +73,5 @@ const Image = styled.img<{ src?: string }>`
   transition: opacity 0.6s;
   ${({ src }) => !!src && `background-image: url(${src})`};
 
-  :hover {
-    opacity: 1;
-    filter: grayscale(0.6);
-    transition:
-      opacity 1.2s,
-      filter 1s 0.4s;
-  }
+  ${({ transition }) => transition && imageTransition};
 `