From 154b9348d6c8fc57cb8e05ee05b03b596a676f82 Mon Sep 17 00:00:00 2001 From: keitakn Date: Mon, 19 Aug 2024 00:09:25 +0900 Subject: [PATCH] =?UTF-8?q?:art:=20#303=20=E3=81=84=E3=81=8F=E3=81=A4?= =?UTF-8?q?=E3=81=8B=E3=81=AE=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=82=92?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/IconButton.stories.tsx | 51 +++++++++++++ src/app/_components/IconButton.tsx | 83 ++++++++++++++++++++-- 2 files changed, 130 insertions(+), 4 deletions(-) diff --git a/src/app/_components/IconButton.stories.tsx b/src/app/_components/IconButton.stories.tsx index dd219c4..f35dca6 100644 --- a/src/app/_components/IconButton.stories.tsx +++ b/src/app/_components/IconButton.stories.tsx @@ -32,3 +32,54 @@ export const WithGithubIconPressed: Story = { isPressed: true, }, }; + +export const WithRepeatIcon: Story = { + args: { + type: 'button', + displayText: 'ランダムコピー', + showRepeatIcon: true, + }, +}; + +export const WithRepeatIconPressed: Story = { + args: { + type: 'button', + displayText: 'ランダムコピー', + showRepeatIcon: true, + isPressed: true, + }, +}; + +export const WithRandomIcon: Story = { + args: { + type: 'button', + displayText: 'ねこリフレッシュ', + showRandomIcon: true, + }, +}; + +export const WithRandomIconPressed: Story = { + args: { + type: 'button', + displayText: 'ねこリフレッシュ', + showRandomIcon: true, + isPressed: true, + }, +}; + +export const WithCatIcon: Story = { + args: { + type: 'button', + displayText: 'ねこ新着順', + showCatIcon: true, + }, +}; + +export const WithCatIconPressed: Story = { + args: { + type: 'button', + displayText: 'ねこ新着順', + showCatIcon: true, + isPressed: true, + }, +}; diff --git a/src/app/_components/IconButton.tsx b/src/app/_components/IconButton.tsx index 6ec559d..1d7f4b0 100644 --- a/src/app/_components/IconButton.tsx +++ b/src/app/_components/IconButton.tsx @@ -1,10 +1,80 @@ import type { ComponentProps, JSX } from 'react'; import { Button, Text } from 'react-aria-components'; -import { FaGithub } from 'react-icons/fa'; + +const GithubIcon = () => { + return ( + + + + ); +}; + +const RepeatIcon = () => { + return ( + + + + ); +}; + +const RandomIcon = () => { + return ( + + + + ); +}; + +const CatIcon = () => { + return ( + + + + ); +}; type Props = ComponentProps<'button'> & { displayText: string; showGithubIcon?: boolean; + showRepeatIcon?: boolean; + showRandomIcon?: boolean; + showCatIcon?: boolean; isPressed?: boolean; }; @@ -12,6 +82,9 @@ export const IconButton = ({ type, displayText, showGithubIcon, + showRepeatIcon, + showRandomIcon, + showCatIcon, isPressed, }: Props): JSX.Element => { const baseClasses = @@ -26,10 +99,12 @@ export const IconButton = ({ type={type} className={`${baseClasses} ${stateClasses} ${focusClasses}`} isDisabled={isPressed} + aria-pressed={isPressed} > - {showGithubIcon != null && ( - - )} + {showGithubIcon != null && } + {showRepeatIcon != null && } + {showRandomIcon != null && } + {showCatIcon != null && } {displayText} );