chore(new-components): new componens from branding

Author: 0tuedon

src/components/button/Button.stories.tsx

@@ -31,3 +31,14 @@ Disabled.args = {
   label: "Disabled Button",
   disabled: true,
 };
+export const PillButton = Template.bind({});
+PillButton.args = {
+  label: "Learn",
+  variant:"navigation",
+};
+
+export const Rebrand = Template.bind({});
+Rebrand.args = {
+  label: "Clear Filters",
+  variant:"rebrand",
+};

src/components/button/Button.tsx

@@ -4,9 +4,10 @@ import React from "react";
 export interface ButtonProps {
   label: string;
   onClick?: () => void;
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "navigation" | "rebrand";
   size?: "small" | "medium" | "large";
   disabled?: boolean;
+  className?:string;
 }
 
 export const Button: React.FC<ButtonProps> = ({
@@ -15,11 +16,17 @@ export const Button: React.FC<ButtonProps> = ({
   variant = "primary",
   size = "medium",
   disabled = false,
+  className:customClass,
 }) => {
-  const baseStyles = "font-bold py-2 px-4 rounded";
+  const baseStyles = "font-bold";
   const variantStyles = {
-    primary: "bg-blue-500 hover:bg-blue-700 text-white",
-    secondary: "bg-gray-300 hover:bg-gray-400 text-gray-800",
+    primary: "bg-blue-500 hover:bg-blue-700 py-2 px-4 text-white",
+    secondary: "bg-gray-300 hover:bg-gray-400 py-2 px-4 text-gray-800",
+    navigation: `border-brand-gray-100/60 rounded-lg bg-transparent border py-1 px-2 text-brand-gray-100/60
+    hover:bg-brand-gray-200/20 active:bg-brand-gray-100/60 active:text-brand-gray-400 active:border-0
+    `,
+    rebrand:"bg-brand-orange-100 text-brand-light-100 px-2 py-2.5 rounded-lg font-bold hover:bg-brand-dark-100 w-full",
+    custom:`${customClass}`
   };
   const sizeStyles = {
     small: "text-sm",
@@ -40,3 +47,4 @@ export const Button: React.FC<ButtonProps> = ({
     </button>
   );
 };
+

src/components/button/Leaves.stories.tsx

@@ -0,0 +1,32 @@
+// src/components/Button/Button.stories.tsx
+
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { LeavesProps, Leaf } from "./Leaves";
+
+export default {
+  title: "Components/Leaves",
+  component: Leaf,
+  argTypes: {
+    variant: {
+      control: { type: "select", options: [1,2,3] },
+    },
+    selected: {
+      control: "boolean",
+    },
+    onClick: { action: "clicked" },
+  },
+} as Meta;
+
+const Template: StoryFn<LeavesProps> = (args) => <Leaf {...args} />;
+
+export const OneLeaf = Template.bind({});
+OneLeaf.args = {
+  leavesCount:1,
+};
+
+export const TwoLeaf = Template.bind({});
+TwoLeaf.args = {
+  leavesCount:1,
+  selected:true
+};

src/components/button/Leaves.tsx

@@ -0,0 +1,27 @@
+// src/components/Button/Leaves.tsx
+
+import LeafIcon from "../../icons/LeafIcon";
+import React from "react";
+
+export interface LeavesProps {
+  onClick?: () => void;
+  disabled?: boolean;
+  withBorder?: boolean;
+  leavesCount: number;
+  selected?: boolean;
+}
+
+export const Leaf: React.FC<LeavesProps> = ({ leavesCount = 1, selected=false }) => {
+  const baseStyles = `rounded-md border border-brand-green w-max py-1 px-2 flex gap-1 hover:bg-brand-green/30 active:bg-brand-green active:text-white`
+  const allStyles =  `
+  ${baseStyles}
+  ${selected ? "bg-brand-green text-white": " text-brand-green"}
+  `.trim();
+
+  return <div className={allStyles} role="button" tabIndex={0}>
+    {Array.from({length:leavesCount}).map((_,i)=>
+        <LeafIcon key={i} />
+    )}
+  </div>;
+};
+

src/components/button/index.tsx

@@ -1 +1,2 @@
 export * from "./Button";
+export * from "./Leaves";

src/components/card/BDPCard.tsx

@@ -0,0 +1,27 @@
+// src/components/card/BDPCard.tsx
+
+import React from "react";
+export interface CardProps {
+  difficulty?: "easy" | "medium" | "hard";
+  byBDP?: boolean;
+  onClick: ()=> void;
+  link:string;
+}
+
+export const BDPCard: React.FC<CardProps> = ({
+  difficulty="easy",
+  onClick,
+  link
+}) => {
+  const baseStyles = "min-h";
+
+  const className = `
+  ${baseStyles}
+  `.trim();
+
+  return (
+    <a href={link} className={className} onClick={onClick}>
+     
+    </a>
+  );
+};

src/components/select/useSelectNavigate.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { isInViewport } from "../../utils/navigation";
 
-type ChekboxNavigateProps = {
+type CheckboxNavigateProps = {
   checkboxContainer: React.MutableRefObject<HTMLDivElement> | null;
   searchEl: React.MutableRefObject<HTMLInputElement> | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,7 +12,7 @@ const useCheckboxNavigate = ({
   checkboxContainer,
   searchEl,
   options,
-}: ChekboxNavigateProps) => {
+}: CheckboxNavigateProps) => {
   const checkboxNavIndex = useRef<number>(null);
 
   const [currentNavigateCheckbox, setcurrentNavigateCheckbox] = useState("");

src/icons/LeafIcon.tsx

@@ -30,6 +30,24 @@ module.exports = {
           },
           otherLight: "var(--other-light-text)",
         },
+        brand:{
+          light:{
+            100:"#F6F0E6",
+          },
+          orange:{
+            100:"#EB5234",
+          },
+          gray:{
+            100:"#201E1E",
+            200:"#F6F0E6",
+            300:"#A9A49B",
+            400:"#F6F0E6",
+          },
+          green:"#0E9158",
+          dark:{
+            100:"#201E1E"
+          }
+        }
       },
     },
   },