feat(alert): update skins

abelflopes · Nov 22, 2024 · 97ae604 · 97ae604
1 parent 3aa0bab
commit 97ae604
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 26 deletions.
diff --git a/packages/components/alert/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/alert/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`snapshot Alert renders correctly 1`] = `
 <div
-  className="root neutral"
+  className="root neutral size_m"
 >
   <div
     className="content"

diff --git a/packages/components/alert/src/index.tsx b/packages/components/alert/src/index.tsx
@@ -6,19 +6,48 @@ import { Button } from "@react-ck/button";
 import { Icon } from "@react-ck/icon";
 import { IconClose } from "@react-ck/icon/icons/IconClose";
 
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+type AlertDismissActionRenderer = (
+  props: BaseAlertProps & Required<Pick<BaseAlertProps, "onDismiss">>,
+) => React.ReactNode;
+
+const defaultDismissActionRenderer: AlertDismissActionRenderer = ({ size, onDismiss }) => (
+  <Button
+    size={size === "s" ? "xs" : "s"}
+    skin="secondary"
+    skinVariation="ghost"
+    icon={
+      <Icon>
+        <IconClose />
+      </Icon>
+    }
+    onClick={() => {
+      onDismiss();
+    }}
+  />
+);
+
+export interface BaseAlertProps {
   /** Main title of the alert */
   heading?: string;
   /** Specifies the visual style of the alert  */
   skin?: "neutral" | "primary" | "negative" | "average" | "positive" | "info";
   /** Structural variation of the alert */
   variation?: "default" | "compact";
+  /** Alert size */
+  size?: "s" | "m" | "l";
   /** Close handle, also renders a close icon when defined  */
   onDismiss?: () => void;
   /** Automatically dismiss after a given timeout */
   autoDismiss?: number;
 }
 
+export type { AlertDismissActionRenderer };
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, BaseAlertProps {
+  /** Renderer for dismiss action */
+  renderDismissAcion?: AlertDismissActionRenderer;
+}
+
 /**
  * Alert is a short message that provides contextual feedback in a prominent way.
  * @param props - {@link AlertProps}
@@ -29,10 +58,12 @@ export const Alert = ({
   heading,
   skin = "neutral",
   variation = "default",
+  size = "m",
   onDismiss,
   autoDismiss,
   children,
   className,
+  renderDismissAcion = defaultDismissActionRenderer,
   ...otherProps
 }: Readonly<AlertProps>): React.ReactNode => {
   const timeoutRef = useRef<ReturnType<typeof setTimeout | typeof clearTimeout>>(undefined);
@@ -62,34 +93,23 @@ export const Alert = ({
       className={classNames(
         styles.root,
         styles[skin],
+        styles[`size_${size}`],
         variation !== "default" && styles[variation],
         className,
       )}>
       <div className={styles.content}>
         {heading ? (
-          <Text variation="h4" as="p" skin="bold" margin="none" className={styles.heading}>
+          <Text variation="p" skin="bold" margin="none" className={styles.heading}>
             {heading}
           </Text>
         ) : null}
 
         {children}
       </div>
 
-      {onDismiss ? (
-        <Button
-          size={variation === "compact" ? "xs" : "s"}
-          skin="secondary"
-          skinVariation="ghost"
-          icon={
-            <Icon>
-              <IconClose />
-            </Icon>
-          }
-          onClick={() => {
-            onDismiss();
-          }}
-        />
-      ) : null}
+      {onDismiss
+        ? renderDismissAcion({ heading, skin, variation, size, onDismiss, autoDismiss })
+        : null}
     </div>
   );
 };
diff --git a/packages/components/alert/src/styles/_variables.scss b/packages/components/alert/src/styles/_variables.scss
@@ -2,7 +2,7 @@
 
 $alert-styles: (
   neutral: (
-    background-color: theme.get-color(neutral-light-1-5-solid),
+    background-color: theme.get-color(neutral-light-1-25-solid),
     color: theme.get-color(neutral-dark-4),
   ),
   primary: (
@@ -26,3 +26,18 @@ $alert-styles: (
     color: theme.get-color(status-info-dark),
   ),
 );
+
+$alert-sizes: (
+  l: (
+    padding-y: theme.get-spacing(3),
+    padding-x: theme.get-spacing(2),
+  ),
+  m: (
+    padding-y: theme.get-spacing(2),
+    padding-x: theme.get-spacing(1),
+  ),
+  s: (
+    padding-y: theme.get-spacing(1),
+    padding-x: theme.get-spacing(0.5),
+  ),
+);
diff --git a/packages/components/alert/src/styles/index.module.scss b/packages/components/alert/src/styles/index.module.scss
@@ -8,12 +8,12 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
-  padding: theme.get-spacing(1) theme.get-spacing(2);
-  border: none;
-  border-radius: theme.get-spacing(1);
+  padding: #{scss-utils.get-css-var(alert, padding-x)} #{scss-utils.get-css-var(alert, padding-y)};
+  border: solid 1px theme.get-color(neutral-light-1-5);
+  border-radius: scss-utils.get-css-var(alert, padding-y);
   background-color: scss-utils.get-css-var(alert, background-color);
   color: scss-utils.get-css-var(alert, color);
-  gap: theme.get-spacing(1);
+  gap: scss-utils.get-css-var(alert, padding-x);
 
   .heading {
     color: inherit;
@@ -25,7 +25,6 @@
 }
 
 .compact {
-  padding: theme.get-spacing(0.5) theme.get-spacing(1);
   border-radius: 0;
 
   .content,
@@ -49,3 +48,18 @@
     }
   }
 }
+
+@each $key, $props in variables.$alert-sizes {
+  .size_#{$key} {
+    @include scss-utils.define-css-var(
+      alert,
+      padding-x,
+      scss-utils.map-get-strict($props, padding-x)
+    );
+    @include scss-utils.define-css-var(
+      alert,
+      padding-y,
+      scss-utils.map-get-strict($props, padding-y)
+    );
+  }
+}
diff --git a/packages/docs/stories/src/gneric-alert.stories.tsx b/packages/docs/stories/src/gneric-alert.stories.tsx
@@ -3,7 +3,10 @@ import { type Meta, type StoryObj } from "@storybook/react";
 import { Manager } from "@react-ck/manager";
 import { faker } from "@faker-js/faker";
 import { configureStory } from "@react-ck/story-config";
-import { Alert } from "@react-ck/alert/src";
+import { Alert, type AlertProps } from "@react-ck/alert/src";
+import { generateAllVariations } from "./utils/generate-all-variations";
+import { sentenceCase } from "change-case";
+import { Text } from "@react-ck/text";
 
 type Story = StoryObj<typeof Alert>;
 
@@ -49,5 +52,28 @@ export const compact: Story = {
   args: {
     ...Dismissable.args,
     variation: "compact",
+    size: "s",
   },
 };
+
+export const AllAlertVariations: Story = {
+  decorators: [
+    (): React.ReactElement =>
+      generateAllVariations<AlertProps>(Alert, {
+        skin: ["neutral", "primary", "negative", "average", "positive", "info"],
+        variation: ["default", "compact"],
+        size: ["l", "m", "s"],
+        children: [sentenceCase(faker.lorem.words({ min: 1, max: 2 }))],
+        heading: [sentenceCase(faker.lorem.words({ min: 1, max: 2 })), undefined],
+        onDismiss: [undefined, (): void => undefined],
+        renderDismissAcion: [
+          undefined,
+          ({ onDismiss }): React.ReactNode => (
+            <Text as="button" skin="highlight-primary" onClick={onDismiss}>
+              Close
+            </Text>
+          ),
+        ],
+      }),
+  ],
+};
diff --git a/packages/providers/theme/src/styles/_theme-type.scss b/packages/providers/theme/src/styles/_theme-type.scss
@@ -13,6 +13,7 @@ $theme-type: (
     "neutral-light-2",
     "neutral-light-3",
     "neutral-light-4",
+    "neutral-light-1-25-solid",
     "neutral-light-1-5-solid",
     "neutral-light-2-solid",
     "neutral-light-2-solid",

diff --git a/packages/providers/theme/src/themes/default.ts b/packages/providers/theme/src/themes/default.ts
@@ -16,6 +16,7 @@ export const defaultTheme: Theme = {
     "neutral-light-2": "hsl(230deg 30% 46% / 20%)",
     "neutral-light-3": "hsl(230deg 10% 2% / 25%)",
     "neutral-light-4": "hsl(230deg 5% 1% / 35%)",
+    "neutral-light-1-25-solid": "#F9FAFB",
     "neutral-light-1-5-solid": "hsl(230deg 40% 95%)",
     "neutral-light-2-solid": "hsl(230deg 30% 90%)",
     "neutral-light-3-solid": "hsl(230deg 10% 80%)",
@@ -31,7 +32,7 @@ export const defaultTheme: Theme = {
     "status-average-light": "#FFEDD5",
     "status-average": "#F59E0B",
     "status-average-dark": "#9b5c2c",
-    "status-negative-light": "#FECACA",
+    "status-negative-light": "#FFF0F0",
     "status-negative": "#EF4444",
     "status-negative-dark": "#b71010",
     "status-info-light": "#BFDBFE",

diff --git a/packages/providers/theme/src/types.ts b/packages/providers/theme/src/types.ts
@@ -11,6 +11,7 @@ export interface Theme {
     "neutral-light-2": string;
     "neutral-light-3": string;
     "neutral-light-4": string;
+    "neutral-light-1-25-solid": string;
     "neutral-light-1-5-solid": string;
     "neutral-light-2-solid": string;
     "neutral-light-3-solid": string;