feat(ButtonPrimary): sentiment variants

kripod · Jul 12, 2024 · 78239dc · 78239dc
1 parent 0aafd6e
commit 78239dc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -39,3 +39,12 @@ export const Sizes = {
     </Stack>
   ),
 } satisfies Story;
+
+export const Sentiments = {
+  render: () => (
+    <Stack>
+      <ButtonPrimary sentiment="neutral">Neutral</ButtonPrimary>
+      <ButtonPrimary sentiment="danger">Danger</ButtonPrimary>
+    </Stack>
+  ),
+} satisfies Story;
diff --git a/src/components/ButtonPrimary.tsx b/src/components/ButtonPrimary.tsx
@@ -5,10 +5,16 @@ import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonPrimaryProps extends ButtonProps {
   size?: "sm" | "md" | "lg";
+  sentiment?: "neutral" | "danger";
 }
 
 export const ButtonPrimary = forwardRef(function ButtonPrimary(
-  { size = "md", className, ...props }: ButtonPrimaryProps,
+  {
+    size = "md",
+    sentiment = "neutral",
+    className,
+    ...props
+  }: ButtonPrimaryProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   return (
@@ -17,7 +23,11 @@ export const ButtonPrimary = forwardRef(function ButtonPrimary(
       size={size}
       className={clsx(
         className,
-        "bg-ui-primary-600 font-medium text-ui-primary-50 active:bg-ui-primary-700",
+        "font-medium",
+        sentiment === "neutral" &&
+          "bg-ui-primary-600 text-ui-primary-50 active:bg-ui-primary-700",
+        sentiment === "danger" &&
+          "bg-ui-danger-600 text-ui-danger-50 active:bg-ui-danger-700",
       )}
       {...props}
     />