fix(site): standardize headers for Admin Settings page #16911
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { docs } from "utils/docs"; | ||
| import { | ||
| SettingsHeader, | ||
| SettingsHeaderDescription, | ||
| SettingsHeaderDocsLink, | ||
| SettingsHeaderTitle, | ||
| } from "./SettingsHeader"; | ||
|
|
||
| const meta: Meta<typeof SettingsHeader> = { | ||
| title: "components/SettingsHeader", | ||
| component: SettingsHeader, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof SettingsHeader>; | ||
|
|
||
| export const PrimaryHeaderOnly: Story = { | ||
| args: { | ||
| children: <SettingsHeaderTitle>This is a header</SettingsHeaderTitle>, | ||
| }, | ||
| }; | ||
|
|
||
| export const PrimaryHeaderWithDescription: Story = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <SettingsHeaderTitle>Another primary header</SettingsHeaderTitle> | ||
| <SettingsHeaderDescription> | ||
| This description can be any ReactNode. This provides more options for | ||
| composition. | ||
| </SettingsHeaderDescription> | ||
| </> | ||
| ), | ||
| }, | ||
| }; | ||
|
|
||
| export const PrimaryHeaderWithDescriptionAndDocsLink: Story = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <SettingsHeaderTitle>Another primary header</SettingsHeaderTitle> | ||
| <SettingsHeaderDescription> | ||
| This description can be any ReactNode. This provides more options for | ||
| composition. | ||
| </SettingsHeaderDescription> | ||
| </> | ||
| ), | ||
| actions: <SettingsHeaderDocsLink href={docs("/admin/external-auth")} />, | ||
| }, | ||
| }; | ||
|
|
||
| export const SecondaryHeaderWithDescription: Story = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <SettingsHeaderTitle level="h6" hierarchy="secondary"> | ||
| This is a secondary header. | ||
| </SettingsHeaderTitle> | ||
| <SettingsHeaderDescription> | ||
| The header's styling is completely independent of its semantics. Both | ||
| can be adjusted independently to help avoid invalid HTML. | ||
| </SettingsHeaderDescription> | ||
| </> | ||
| ), | ||
| }, | ||
| }; | ||
|
|
||
| export const SecondaryHeaderWithDescriptionAndDocsLink: Story = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <SettingsHeaderTitle level="h3" hierarchy="secondary"> | ||
| Another secondary header | ||
| </SettingsHeaderTitle> | ||
| <SettingsHeaderDescription> | ||
| Nothing to add, really. | ||
| </SettingsHeaderDescription> | ||
| </> | ||
| ), | ||
| actions: <SettingsHeaderDocsLink href={docs("/admin/external-auth")} />, | ||
| }, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,107 @@ | ||
| import { type VariantProps, cva } from "class-variance-authority"; | ||
| import { Button } from "components/Button/Button"; | ||
| import { SquareArrowOutUpRightIcon } from "lucide-react"; | ||
| import type { FC, PropsWithChildren, ReactNode } from "react"; | ||
| import { cn } from "utils/cn"; | ||
|
|
||
| type SettingsHeaderProps = Readonly< | ||
| PropsWithChildren<{ | ||
| actions?: ReactNode; | ||
| className?: string; | ||
| }> | ||
| >; | ||
| export const SettingsHeader: FC<SettingsHeaderProps> = ({ | ||
| children, | ||
| actions, | ||
| className, | ||
| }) => { | ||
| return ( | ||
| <hgroup className="flex flex-col justify-between items-start gap-2 pb-6 sm:flex-row"> | ||
| {/* | ||
| * The text-sm class is only meant to adjust the font size of | ||
| * SettingsDescription, but we need to apply it here. That way, | ||
| * text-sm combines with the max-w-prose class and makes sure | ||
| * we have a predictable max width for the header + description by | ||
| * default. | ||
| */} | ||
| <div className={cn("text-sm max-w-prose", className)}>{children}</div> | ||
| {actions} | ||
| </hgroup> | ||
| ); | ||
| }; | ||
|
|
||
| type SettingsHeaderDocsLinkProps = Readonly< | ||
| PropsWithChildren<{ href: string }> | ||
| >; | ||
| export const SettingsHeaderDocsLink: FC<SettingsHeaderDocsLinkProps> = ({ | ||
| href, | ||
| children = "Read the docs", | ||
| }) => { | ||
| return ( | ||
|
There was a problem hiding this comment. This was a big accessibility/HTML validity issue. We were using this component multiple times on the same page, but only one There was a problem hiding this comment. This is why I decoupled the |
||
| <Button asChild variant="outline"> | ||
| <a href={href} target="_blank" rel="noreferrer"> | ||
| <SquareArrowOutUpRightIcon /> | ||
| {children} | ||
| <span className="sr-only"> (link opens in new tab)</span> | ||
| </a> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| const titleVariants = cva("m-0 pb-1 flex items-center gap-2 leading-tight", { | ||
| variants: { | ||
| hierarchy: { | ||
| primary: "text-3xl font-bold", | ||
| secondary: "text-2xl font-medium", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| hierarchy: "primary", | ||
| }, | ||
| }); | ||
| type SettingsHeaderTitleProps = Readonly< | ||
| PropsWithChildren< | ||
| VariantProps<typeof titleVariants> & { | ||
| level?: `h${1 | 2 | 3 | 4 | 5 | 6}`; | ||
| tooltip?: ReactNode; | ||
| className?: string; | ||
| } | ||
| > | ||
| >; | ||
| export const SettingsHeaderTitle: FC<SettingsHeaderTitleProps> = ({ | ||
| children, | ||
| tooltip, | ||
| className, | ||
| level = "h1", | ||
| hierarchy = "primary", | ||
| }) => { | ||
| // Explicitly not using Radix's Slot component, because we don't want to | ||
| // allow any arbitrary element to be composed into this. We specifically | ||
| // only want to allow the six HTML headers. Anything else will likely result | ||
| // in invalid markup | ||
| const Title = level; | ||
|
Comment on lines
+78
to
+81
There was a problem hiding this comment. Added a comment to call out why the code isn't using |
||
| return ( | ||
| <div className="flex flex-row gap-2 items-center"> | ||
| <Title className={cn(titleVariants({ hierarchy }), className)}> | ||
| {children} | ||
| </Title> | ||
| {tooltip} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| type SettingsHeaderDescriptionProps = Readonly< | ||
| PropsWithChildren<{ | ||
| className?: string; | ||
| }> | ||
| >; | ||
| export const SettingsHeaderDescription: FC<SettingsHeaderDescriptionProps> = ({ | ||
| children, | ||
| className, | ||
| }) => { | ||
| return ( | ||
| <p className={cn("m-0 text-content-secondary leading-relaxed", className)}> | ||
| {children} | ||
| </p> | ||
| ); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we add a storybook for it covering the new variants?