New sparkle comp (#1297)

* Adding all necessary for Button Menu

* Adding Select type to Dropdown menu

---------

Co-authored-by: édouard wautier <[email protected]>

sparkle/src/components/Button.tsx

@@ -1,17 +1,19 @@
 import React, { ComponentType, MouseEvent } from "react";
 
+import { ChevronDown, ChevronUpDown } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
 export type ButtonProps = {
-  type?:
+  variant?:
     | "primary"
     | "primaryWarning"
     | "secondary"
     | "secondaryWarning"
     | "tertiary";
+  type?: "button" | "menu" | "select";
   size?: "xs" | "sm" | "md";
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
@@ -34,7 +36,7 @@ const containerClasses = {
   md: "s-px-1",
 };
 
-const typeClasses = {
+const variantClasses = {
   primary: {
     base: "s-text-white s-bg-action-500 s-border-action-600",
     hover: "hover:s-bg-action-400 hover:s-border-action-500",
@@ -97,8 +99,7 @@ const typeClasses = {
   },
   tertiary: {
     base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
-    hover:
-      "hover:s-text-element-700 hover:s-bg-action-50 hover:s-border-action-200",
+    hover: "hover:s-bg-action-50 hover:s-border-action-200",
     active: "active:s-bg-action-100 active:s-border-action-500",
     disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
     dark: {
@@ -117,7 +118,8 @@ const transitionClasses =
   "s-transition-all s-ease-out s-duration-400 hover:s-scale-100 hover:s-drop-shadow-md active:s-scale-95 active:s-drop-shadow-none s-cursor-pointer";
 
 export function Button({
-  type = "primary",
+  variant = "primary",
+  type = "button",
   size = "sm",
   onClick,
   disabled = false,
@@ -131,14 +133,14 @@ export function Button({
     "s-inline-flex s-items-center s-border s-scale-95 s-box-border s-rounded-full s-whitespace-nowrap",
     sizeClasses[size],
     !disabled ? transitionClasses : "",
-    !disabled ? typeClasses[type]?.base : "",
-    !disabled ? typeClasses[type]?.hover : "",
-    !disabled ? typeClasses[type]?.active : "",
-    disabled ? typeClasses[type]?.disabled : "",
-    typeClasses[type]?.dark?.base,
-    typeClasses[type]?.dark?.hover,
-    typeClasses[type]?.dark?.active,
-    typeClasses[type]?.dark.disabled,
+    !disabled ? variantClasses[variant]?.base : "",
+    !disabled ? variantClasses[variant]?.hover : "",
+    !disabled ? variantClasses[variant]?.active : "",
+    disabled ? variantClasses[variant]?.disabled : "",
+    variantClasses[variant]?.dark?.base,
+    variantClasses[variant]?.dark?.hover,
+    variantClasses[variant]?.dark?.active,
+    variantClasses[variant]?.dark.disabled,
     disabled ? "s-cursor-default" : "",
     className
   );
@@ -155,6 +157,20 @@ export function Button({
     >
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
       <div className={finalContainerClasses}>{label}</div>
+      {type === "menu" && (
+        <Icon
+          className="s-opacity-50"
+          visual={ChevronDown}
+          size={size as IconProps["size"]}
+        />
+      )}
+      {type === "select" && (
+        <Icon
+          className="s-opacity-60"
+          visual={ChevronUpDown}
+          size={size as IconProps["size"]}
+        />
+      )}
     </button>
   ) : (
     <Tooltip label={label} position={tooltipPosition}>

sparkle/src/components/DropdownMenu.tsx

@@ -9,7 +9,7 @@ import React, {
   useState,
 } from "react";
 
-import { ChevronDown } from "@sparkle/icons/solid";
+import { ChevronDown, ChevronUpDown } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
@@ -76,6 +76,7 @@ export function DropdownMenu({ children, className = "" }: DropdownMenuProps) {
 
 export interface DropdownButtonProps {
   label?: string;
+  type?: "menu" | "select";
   tooltip?: string;
   tooltipPosition?: TooltipProps["position"];
   icon?: ComponentType;
@@ -86,6 +87,7 @@ export interface DropdownButtonProps {
 
 DropdownMenu.Button = function ({
   label,
+  type = "menu",
   tooltip,
   icon,
   children,
@@ -160,7 +162,7 @@ DropdownMenu.Button = function ({
           >
             <Icon visual={icon} size="sm" className={finalIconClasses} />
             <Icon
-              visual={ChevronDown}
+              visual={type === "select" ? ChevronUpDown : ChevronDown}
               size="xs"
               className={finalChevronClasses}
             />
@@ -180,7 +182,7 @@ DropdownMenu.Button = function ({
           <Icon visual={icon} size="sm" className={finalIconClasses} />
           <span className={finalLabelClasses}>{label}</span>
           <Icon
-            visual={ChevronDown}
+            visual={type === "select" ? ChevronUpDown : ChevronDown}
             size="xs"
             className={finalChevronClasses}
           />

sparkle/src/icons/solid/ChevronUpDown.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgChevronUpDown = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8.5 11 12 7.5l3.5 3.5 2-2L12 3.5 6.5 9l2 2ZM15.5 13 12 16.5 8.5 13l-2 2 5.5 5.5 5.5-5.5-2-2Z"
+    />
+  </svg>
+);
+export default SvgChevronUpDown;

sparkle/src/icons/solid/index.ts

@@ -14,6 +14,7 @@ export { default as ChevronDown } from "./ChevronDown";
 export { default as ChevronLeft } from "./ChevronLeft";
 export { default as ChevronRight } from "./ChevronRight";
 export { default as ChevronUp } from "./ChevronUp";
+export { default as ChevronUpDown } from "./ChevronUpDown";
 export { default as Clipboard } from "./Clipboard";
 export { default as ClipboardCheck } from "./ClipboardCheck";
 export { default as Clock } from "./Clock";

sparkle/src/icons/stroke/ChevronUpDown.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgChevronUpDown = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m9 11 3-3 3 3 1.5-1.5L12 5 7.5 9.5 9 11ZM15 13l-3 3-3-3-1.5 1.5L12 19l4.5-4.5L15 13Z"
+    />
+  </svg>
+);
+export default SvgChevronUpDown;

sparkle/src/icons/stroke/index.ts

@@ -14,6 +14,7 @@ export { default as ChevronDown } from "./ChevronDown";
 export { default as ChevronLeft } from "./ChevronLeft";
 export { default as ChevronRight } from "./ChevronRight";
 export { default as ChevronUp } from "./ChevronUp";
+export { default as ChevronUpDown } from "./ChevronUpDown";
 export { default as Clipboard } from "./Clipboard";
 export { default as ClipboardCheck } from "./ClipboardCheck";
 export { default as Clock } from "./Clock";