Changes
7 changed files (+142/-89)
-
-
@@ -0,0 +1,26 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import type { Meta, StoryObj } from "@storybook/react"; import * as HelpDialog from "./HelpDialog.ts"; export default { component: HelpDialog.Root, args: { children: ( <> <HelpDialog.Trigger>なにかの説明</HelpDialog.Trigger> <HelpDialog.Content> <HelpDialog.Title>なにかの説明</HelpDialog.Title> <HelpDialog.Description>メインな説明</HelpDialog.Description> <HelpDialog.Paragraph>お供な説明</HelpDialog.Paragraph> </HelpDialog.Content> </> ), }, } satisfies Meta<(typeof HelpDialog)["Root"]>; type Story = StoryObj<(typeof HelpDialog)["Root"]>; export const Defaults: Story = {};
-
-
-
@@ -0,0 +1,17 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Dialog } from "@radix-ui/themes"; export * from "./HelpDialog/Content.tsx"; export * from "./HelpDialog/Trigger.tsx"; export * from "./HelpDialog/Paragraph.tsx"; export const Root = Dialog.Root; export type RootProps = Dialog.RootProps; export const Title = Dialog.Title; export type TitleProps = Dialog.TitleProps; export const Description = Dialog.Description; export type DescriptionProps = Dialog.DescriptionProps;
-
-
-
@@ -0,0 +1,20 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Button, Dialog, Flex } from "@radix-ui/themes"; import { type FC } from "react"; export type ContentProps = Dialog.ContentProps; export const Content: FC<ContentProps> = ({ children, ...rest }) => { return ( <Dialog.Content {...rest}> {children} <Flex mt="5" align="center" justify="end"> <Dialog.Close> <Button>閉じる</Button> </Dialog.Close> </Flex> </Dialog.Content> ); };
-
-
-
@@ -0,0 +1,14 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Text, type TextProps } from "@radix-ui/themes"; import { type FC } from "react"; export type ParagraphProps = Omit< Extract<TextProps, { as: "p" }>, "as" | "asChild" | "mt" >; export const Paragraph: FC<ParagraphProps> = (props) => { return <Text {...props} as="p" mt="2" />; };
-
-
-
@@ -0,0 +1,26 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { QuestionMarkCircledIcon } from "@radix-ui/react-icons"; import { IconButton, Dialog, Tooltip, VisuallyHidden } from "@radix-ui/themes"; import { type FC, type ReactNode } from "react"; export interface TriggerProps extends Omit<Dialog.TriggerProps, "children"> { /** * ツールチップやスクリーンリーダー向けに表示されるテキスト。 */ children: ReactNode; } export const Trigger: FC<TriggerProps> = ({ children, ...rest }) => { return ( <Tooltip content={children} delayDuration={700}> <Dialog.Trigger {...rest}> <IconButton variant="ghost" size="1" color="gray"> <QuestionMarkCircledIcon /> <VisuallyHidden>{children}</VisuallyHidden> </IconButton> </Dialog.Trigger> </Tooltip> ); };
-
-
-
@@ -1,21 +1,12 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { CardStackPlusIcon, QuestionMarkCircledIcon } from "@radix-ui/react-icons"; import { Badge, Box, Button, Code, DataList, Dialog, Flex, IconButton, Text, VisuallyHidden, } from "@radix-ui/themes"; import { CardStackPlusIcon } from "@radix-ui/react-icons"; import { Badge, Box, Code, DataList, Flex } from "@radix-ui/themes"; import { type Leave } from "@yamori/proto/yamori/work_record/v1/leave_pb.js"; import { type FC, type ReactNode } from "react"; import * as HelpDialog from "../../../components/HelpDialog.ts"; export interface ListItemProps { leaveDefinition: Leave;
-
@@ -36,73 +27,52 @@ <DataList.Label>年次有給休暇付与の出勤率計算時の扱い</DataList.Label><DataList.Value> <Flex mt="1" align="center" gap="1"> {leaveDefinition.isWorkerDeemedToBeWorked ? ( <Dialog.Root> <HelpDialog.Root> <Badge color="grass"> <CardStackPlusIcon /> 出勤扱い </Badge> <Dialog.Trigger> <IconButton variant="ghost" color="gray"> <QuestionMarkCircledIcon /> <VisuallyHidden>出勤扱い休暇休業の説明</VisuallyHidden> </IconButton> </Dialog.Trigger> <Dialog.Content> <Dialog.Title>出勤扱いの休暇・休業</Dialog.Title> <Dialog.Description> <HelpDialog.Trigger>出勤扱い休暇休業の説明</HelpDialog.Trigger> <HelpDialog.Content> <HelpDialog.Title>出勤扱いの休暇・休業</HelpDialog.Title> <HelpDialog.Description> 年次有給休暇を付与する際の出勤率計算時、この休暇・休業を行った日は出勤したものとして扱います。 </Dialog.Description> </HelpDialog.Description> <Text as="p" mt="3"> <HelpDialog.Paragraph> 79 日出勤した所定労働日 100 日の労働者が {leaveDefinition.displayName ? `「${leaveDefinition.displayName}」` : "この休暇・休業"} を行った場合、その時点での出勤率は{" "} <Code>80出勤日 / 100所定労働日 = 80%</Code> となります。 </Text> <Flex mt="5" align="center" justify="end"> <Dialog.Close> <Button>閉じる</Button> </Dialog.Close> </Flex> </Dialog.Content> </Dialog.Root> </HelpDialog.Paragraph> </HelpDialog.Content> </HelpDialog.Root> ) : ( <Dialog.Root> <HelpDialog.Root> <Badge color="gray">出勤率計上なし</Badge> <Dialog.Trigger> <IconButton variant="ghost" color="gray"> <QuestionMarkCircledIcon /> <VisuallyHidden>出勤率計上なしの休暇休業の説明</VisuallyHidden> </IconButton> </Dialog.Trigger> <Dialog.Content> <Dialog.Title>出勤率計上なしの休暇・休業</Dialog.Title> <Dialog.Description> <HelpDialog.Trigger>出勤率計上なしの休暇休業の説明</HelpDialog.Trigger> <HelpDialog.Content> <HelpDialog.Title>出勤率計上なしの休暇・休業</HelpDialog.Title> <HelpDialog.Description> 年次有給休暇を付与する際の出勤率計算時、この休暇・休業を行った日は欠勤と同様に扱います。 </Dialog.Description> </HelpDialog.Description> <Text as="p" mt="3"> <HelpDialog.Paragraph> 79 日出勤した所定労働日 100 日の労働者が {leaveDefinition.displayName ? `「${leaveDefinition.displayName}」` : "この休暇・休業"} を行った場合、その時点での出勤率は{" "} <Code>79出勤日 / 100所定労働日 = 79%</Code> となります。 </Text> </HelpDialog.Paragraph> <Text as="p" mt="3" size="2" color="gray"> <HelpDialog.Paragraph size="2" color="gray"> このバッジは{pageTitle}以外では表示されません。 </Text> <Flex mt="5" align="center" justify="end"> <Dialog.Close> <Button>閉じる</Button> </Dialog.Close> </Flex> </Dialog.Content> </Dialog.Root> </HelpDialog.Paragraph> </HelpDialog.Content> </HelpDialog.Root> )} </Flex> </DataList.Value>
-
-
-
@@ -3,17 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0-onlyimport "../../../polyfill.ts"; import { QuestionMarkCircledIcon } from "@radix-ui/react-icons"; import { Button, Dialog, Flex, IconButton, Separator, Spinner, Text, VisuallyHidden, } from "@radix-ui/themes"; import { Button, Flex, Separator, Spinner, Text } from "@radix-ui/themes"; import { GetRequestSchema } from "@yamori/proto/yamori/workspace/v1/get_request_pb.js"; import { GetResponseSchema } from "@yamori/proto/yamori/workspace/v1/get_response_pb.js"; import {
-
@@ -24,6 +14,7 @@ import { type FC, Fragment } from "react";import * as Empty from "../../../components/Empty.ts"; import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts"; import * as HelpDialog from "../../../components/HelpDialog.ts"; import { useMethodQuery } from "../../../contexts/Service.tsx"; import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";
-
@@ -130,44 +121,33 @@ }export const Page: FC<PageProps> = ({ workspace }) => { return ( <Dialog.Root> <HelpDialog.Root> <Layout workspace={workspace} title={ <Flex as="span" align="center" gap="2"> <Title /> <Dialog.Trigger> <IconButton variant="ghost" color="gray"> <QuestionMarkCircledIcon /> <VisuallyHidden>このページの説明</VisuallyHidden> </IconButton> </Dialog.Trigger> <HelpDialog.Trigger>このページの説明</HelpDialog.Trigger> </Flex> } > <Body workspace={workspace} /> </Layout> <Dialog.Content> <Dialog.Title> <HelpDialog.Content> <HelpDialog.Title> <Title /> </Dialog.Title> </HelpDialog.Title> <Dialog.Description> <HelpDialog.Description> このワークスペース内で利用可能な休暇と休業の一覧です。 </Dialog.Description> </HelpDialog.Description> <Text as="p" mt="3"> <HelpDialog.Paragraph> 労働者の勤怠記録をつける際は、この一覧にある項目から選ぶことができます。 労働者やグループの設定ページで「休暇休業の絞り込み」が設定されている場合は、絞り込まれた項目の中からのみ選ぶことができます。 </Text> <Flex mt="5" align="center" justify="end"> <Dialog.Close> <Button>閉じる</Button> </Dialog.Close> </Flex> </Dialog.Content> </Dialog.Root> </HelpDialog.Paragraph> </HelpDialog.Content> </HelpDialog.Root> ); };
-