491f0cd08a
* Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import classNames from "classnames";
|
|
import * as React from "react";
|
|
|
|
import { UserOnboardingTaskWithResolvedCompletion } from "../../../hooks/useUserOnboardingTasks";
|
|
import AccessibleButton from "../../views/elements/AccessibleButton";
|
|
import Heading from "../../views/typography/Heading";
|
|
|
|
interface Props {
|
|
task: UserOnboardingTaskWithResolvedCompletion;
|
|
completed?: boolean;
|
|
}
|
|
|
|
export function UserOnboardingTask({ task, completed = false }: Props): JSX.Element {
|
|
const title = typeof task.title === "function" ? task.title() : task.title;
|
|
const description = typeof task.description === "function" ? task.description() : task.description;
|
|
|
|
return (
|
|
<li
|
|
data-testid="user-onboarding-task"
|
|
className={classNames("mx_UserOnboardingTask", {
|
|
mx_UserOnboardingTask_completed: completed,
|
|
})}
|
|
>
|
|
<div
|
|
className="mx_UserOnboardingTask_number"
|
|
role="checkbox"
|
|
aria-disabled="true"
|
|
aria-checked={completed}
|
|
aria-labelledby={`mx_UserOnboardingTask_${task.id}`}
|
|
/>
|
|
<div id={`mx_UserOnboardingTask_${task.id}`} className="mx_UserOnboardingTask_content">
|
|
<Heading size="4" className="mx_UserOnboardingTask_title">
|
|
{title}
|
|
</Heading>
|
|
<div className="mx_UserOnboardingTask_description">{description}</div>
|
|
</div>
|
|
{task.action && (!task.action.hideOnComplete || !completed) && (
|
|
<AccessibleButton
|
|
element="a"
|
|
className="mx_UserOnboardingTask_action"
|
|
kind="primary_outline"
|
|
href={task.action.href}
|
|
target="_blank"
|
|
onClick={task.action.onClick ?? null}
|
|
>
|
|
{task.action.label}
|
|
</AccessibleButton>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|