feat: New Card for BDP (#46)

* chore(new-components): new componens from branding

* feat(card): bdp card addition

* chore:initial commit

* --amend

Author: 0tuedon

.npmignore

@@ -0,0 +1 @@
+assets/images

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
+  staticDirs: ['../src/assets/images'],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-webpack5-compiler-swc",

src/assets/images/good-first-issues.png

@@ -0,0 +1,11 @@
+import React from "react";
+import { Pangolins } from "../../icons";
+
+export const ByBDPBadge = () => {
+  return (
+    <div className="shadow-by-bdp text-brand-dark-100 border border-[#A9A49B] w-fit flex gap-1 p-1 rounded-md items-center bg-[#F6F0E6]">
+      <Pangolins />
+      <span className="font-quicksand font-bold text-[11px] ">By BDP</span>
+    </div>
+  );
+};

src/assets/images/whitepaper.png

@@ -0,0 +1 @@
+export * from "./ByBdp";

src/components/badge/ByBdp.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/badge/index.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,18 @@ 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",

src/components/button/Button.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/Button.tsx

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