From 3df172cf7bfb6bf4057abf33e42a90e3280d1868 Mon Sep 17 00:00:00 2001 From: Shuta Kumano Date: Sun, 12 May 2024 00:41:23 +0900 Subject: [PATCH 1/3] feat: add transtion props to disable hover transtion --- src/lib/core/Picture/Picture.stories.tsx | 1 + src/lib/core/Picture/index.tsx | 26 +++++++++++++++--------- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/lib/core/Picture/Picture.stories.tsx b/src/lib/core/Picture/Picture.stories.tsx index 272fa90..bcbb952 100644 --- a/src/lib/core/Picture/Picture.stories.tsx +++ b/src/lib/core/Picture/Picture.stories.tsx @@ -11,6 +11,7 @@ const meta = { Photo by @shoota in 2024 ), + transition: false, }, } satisfies Meta diff --git a/src/lib/core/Picture/index.tsx b/src/lib/core/Picture/index.tsx index 22e02b5..c5b4d64 100644 --- a/src/lib/core/Picture/index.tsx +++ b/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 type Props = { image?: ImageProps imageCaption?: ReactNode + transition?: boolean } -export const Picture = ({ image, imageCaption }: Props) => { +export const Picture = ({ image, imageCaption, transition }: Props) => { return ( - + {imageCaption} ) @@ -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}; ` From 58f53133190d1893021cea8f42001b81863503fa Mon Sep 17 00:00:00 2001 From: Shuta Kumano Date: Sun, 12 May 2024 00:41:42 +0900 Subject: [PATCH 2/3] feat: improve component --- src/lib/core/Card/index.tsx | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/lib/core/Card/index.tsx b/src/lib/core/Card/index.tsx index bb59e39..0443b55 100644 --- a/src/lib/core/Card/index.tsx +++ b/src/lib/core/Card/index.tsx @@ -4,7 +4,7 @@ import { colors } from "../../theme/color" import { Picture } from "../Picture" type Props = { - title: string + title?: string description?: ReactNode onClick?: () => void } & ComponentProps @@ -12,23 +12,29 @@ type Props = { export const Card = ({ title, description, + onClick, image, imageCaption, - onClick, + transition, children, }: PropsWithChildren) => { return ( - + -

{title}

-
{description}
- - -
- {children} -
+ {title &&

{title}

} + {description &&
{description}
} + {children && ( + +
+ {children} +
+ )}
From 05ee19072985e1c49300704a472748685e781bef Mon Sep 17 00:00:00 2001 From: Shuta Kumano Date: Sun, 12 May 2024 00:42:14 +0900 Subject: [PATCH 3/3] feat: strict props to use card as Hero component --- src/lib/components/Hero/Hero.stories.tsx | 3 --- src/lib/components/Hero/Hero.tsx | 9 ++++----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/lib/components/Hero/Hero.stories.tsx b/src/lib/components/Hero/Hero.stories.tsx index 9a4156f..42e3bff 100644 --- a/src/lib/components/Hero/Hero.stories.tsx +++ b/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 @shoota in 2024 ), - onClick: action("onClick"), }, } satisfies Meta diff --git a/src/lib/components/Hero/Hero.tsx b/src/lib/components/Hero/Hero.tsx index 0d25a61..e28fb16 100644 --- a/src/lib/components/Hero/Hero.tsx +++ b/src/lib/components/Hero/Hero.tsx @@ -1,21 +1,20 @@ import { ComponentProps, PropsWithChildren } from "react" import { Card } from "../../core" -type Props = ComponentProps +type CardProps = ComponentProps + +type Props = Pick export const Hero = ({ title, - description, image, imageCaption, - onClick, }: PropsWithChildren) => { return ( ) }