fix(site): standardize headers for Admin Settings page #16911
refactor: update API design of SettingsHeader
- Loading branch information
commit 50eddd01ef0d45ce21cfdfd0212849dcccbe0727
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 |
|---|---|---|
| @@ -1,79 +1,109 @@ | ||
| import { cva, type VariantProps } 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-row justify-between align-baseline"> | ||
| {/* | ||
| * 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 pb-6", className)}> | ||
| {children} | ||
| </div> | ||
| {actions} | ||
| </hgroup> | ||
| ); | ||
| }; | ||
|
|
||
| type SettingsHeaderDocsLinkProps = Readonly< | ||
| PropsWithChildren<{ href: string }> | ||
| >; | ||
| export const SettingsHeaderDocsLink: FC<SettingsHeaderDocsLinkProps> = ({ | ||
| href, | ||
| children = "Read the docs", | ||
| }) => { | ||
| return ( | ||
| <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 | ||
|
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 |
||
| const Title = level; | ||
| return ( | ||
| <div className="flex flex-row gap-2 align-middle"> | ||
| <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
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.
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?