From 2a6d5bd711eae58401dbaf383d5dced0a899f90c Mon Sep 17 00:00:00 2001 From: Jake Albaugh Date: Sat, 1 Jun 2024 17:28:44 -0500 Subject: [PATCH] updated alerts --- src/ui/Alert/Alert.stories.tsx | 33 ++++++++++++++--------- src/ui/Alert/Alert.tsx | 14 +++++----- src/ui/Alert/alert.css | 49 +++++++++------------------------- src/ui/Button/Button.tsx | 15 ++++++----- 4 files changed, 48 insertions(+), 63 deletions(-) diff --git a/src/ui/Alert/Alert.stories.tsx b/src/ui/Alert/Alert.stories.tsx index 1c678f7..19653f5 100644 --- a/src/ui/Alert/Alert.stories.tsx +++ b/src/ui/Alert/Alert.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { ComponentProps } from "react"; import { Alert, AlertActions, AlertBody, AlertTitle } from "ui/Alert/Alert"; import { Button, ButtonGroup } from "ui/Button/Button"; @@ -8,23 +9,29 @@ const meta: Meta = { parameters: { layout: "centered" }, }; export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { isDismissible: true }, - argTypes: {}, - render: (args) => { +export const Default: StoryObj< + Omit, "scheme"> & { + "[type]": "message" | "alert"; + } +> = { + args: { isDismissible: true, "[type]": "message" }, + argTypes: { + "[type]": { control: { type: "select" }, options: ["message", "alert"] }, + }, + render: ({ "[type]": _type, ...args }) => { + const scheme = _type === "message" ? "default" : "danger"; return ( - + Alert Title Hello there! This is a message - - - - - + {_type === "message" && ( + + + + + + )} ); }, diff --git a/src/ui/Alert/Alert.tsx b/src/ui/Alert/Alert.tsx index bf7e227..035f068 100644 --- a/src/ui/Alert/Alert.tsx +++ b/src/ui/Alert/Alert.tsx @@ -36,11 +36,15 @@ export function Alert({
{children}
{isDismissible && (scheme === "danger" ? ( - + ) : ( - + ))} @@ -51,11 +55,7 @@ export function Alert({ export type AlertTitleProps = TextStrongProps; export function AlertTitle({ className, ...props }: AlertTitleProps) { const classNames = clsx(className, "alert-title"); - return ( - - - - ); + return ; } export type AlertBodyProps = TextProps; export function AlertBody({ className, ...props }: AlertBodyProps) { diff --git a/src/ui/Alert/alert.css b/src/ui/Alert/alert.css index ff64cd4..1144789 100644 --- a/src/ui/Alert/alert.css +++ b/src/ui/Alert/alert.css @@ -1,14 +1,15 @@ .alert { - --border-radius: var(--sds-size-radius-xs); + --border-radius: var(--sds-size-radius-sm); align-items: center; background-color: var(--alert-background-color); border-radius: var(--border-radius); + box-shadow: inset 0 0 0 var(--sds-responsive-border-width) + var(--alert-border-color); color: var(--alert-color); display: grid; grid-template-areas: "icon content" "icon content" "icon content"; grid-template-columns: min-content 1fr; justify-content: center; - line-height: 1; padding: var(--sds-size-padding-lg) var(--sds-size-padding-xl) var(--sds-size-padding-lg) var(--sds-size-padding-lg); position: relative; @@ -25,7 +26,7 @@ > .alert-content { grid-area: content; > .alert-title + .alert-body { - margin-top: var(--sds-size-gap-cs); + margin-top: var(--sds-size-gap-xs); } > .alert-title { font: var(--sds-font-body-strong); @@ -45,42 +46,16 @@ top: var(--sds-size-padding-sm); } } -.alert-variant-secondary { - box-shadow: inset 0 0 0 var(--sds-responsive-border-width) - var(--alert-border-color); -} .alert-scheme-default { - --alert-color: var(--sds-color-text-brand-onbrand); - --alert-icon: var(--sds-color-icon-brand-onbrand); - --alert-background-color: var(--sds-color-bg-brand-default); - - &[data-hovered], - &:has(.alert-remove-button[data-hovered]) { - --alert-background-color: var(--sds-color-bg-brand-hover); - } - - &.alert-variant-secondary { - --alert-color: var(--sds-color-text-brand-onbrand-secondary); - --alert-icon: var(--sds-color-icon-brand-onbrand-secondary); - --alert-background-color: var(--sds-color-bg-brand-secondary); - --alert-border-color: var(--sds-color-border-brand-secondary); - } + --alert-color: var(--sds-color-text-brand-default); + --alert-icon: var(--sds-color-icon-brand-default); + --alert-border-color: var(--sds-color-border-brand-default); + --alert-background-color: var(--sds-color-bg-brand-tertiary); } .alert-scheme-danger { - --alert-color: var(--sds-color-text-danger-ondanger); - --alert-icon: var(--sds-color-icon-danger-ondanger); - --alert-background-color: var(--sds-color-bg-danger-default); - - &[data-hovered], - &:has(.alert-remove-button[data-hovered]) { - --alert-background-color: var(--sds-color-bg-danger-hover); - } - - &.alert-variant-secondary { - --alert-color: var(--sds-color-text-danger-ondanger-secondary); - --alert-icon: var(--sds-color-icon-danger-ondanger-secondary); - --alert-background-color: var(--sds-color-bg-danger-secondary); - --alert-border-color: var(--sds-color-border-danger-secondary); - } + --alert-color: var(--sds-color-text-danger-tertiary); + --alert-icon: var(--sds-color-icon-danger-tertiary); + --alert-border-color: var(--sds-color-border-danger-default); + --alert-background-color: var(--sds-color-bg-danger-tertiary); } diff --git a/src/ui/Button/Button.tsx b/src/ui/Button/Button.tsx index 0ec90cb..a0c87af 100644 --- a/src/ui/Button/Button.tsx +++ b/src/ui/Button/Button.tsx @@ -16,16 +16,19 @@ export const Button = React.forwardRef(function Button( ); }); -export type DestructiveButtonProps = Omit< - ButtonBaseProps, - "scheme" | "variant" ->; +export type DestructiveButtonProps = Omit; export const DestructiveButton = React.forwardRef(function Button( - { className, ...props }: DestructiveButtonProps, + { className, variant = "default", ...props }: DestructiveButtonProps, ref: React.ForwardedRef, ) { return ( - + ); });