feat(card): bdp card addition

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,14 @@
+import React from "react";
+import { Pangolins } from "../../icons";
+
+interface IByBDPBadge {
+  className?: string;
+}
+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

@@ -34,11 +34,11 @@ Disabled.args = {
 export const PillButton = Template.bind({});
 PillButton.args = {
   label: "Learn",
-  variant:"navigation",
+  variant: "navigation",
 };
 
 export const Rebrand = Template.bind({});
 Rebrand.args = {
   label: "Clear Filters",
-  variant:"rebrand",
+  variant: "rebrand",
 };

src/components/badge/index.tsx

@@ -7,7 +7,7 @@ export interface ButtonProps {
   variant?: "primary" | "secondary" | "navigation" | "rebrand";
   size?: "small" | "medium" | "large";
   disabled?: boolean;
-  className?:string;
+  className?: string;
 }
 
 export const Button: React.FC<ButtonProps> = ({
@@ -16,7 +16,7 @@ export const Button: React.FC<ButtonProps> = ({
   variant = "primary",
   size = "medium",
   disabled = false,
-  className:customClass,
+  className: customClass,
 }) => {
   const baseStyles = "font-bold";
   const variantStyles = {
@@ -25,8 +25,9 @@ export const Button: React.FC<ButtonProps> = ({
     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}`
+    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",
@@ -47,4 +48,3 @@ export const Button: React.FC<ButtonProps> = ({
     </button>
   );
 };
-

src/components/button/Button.stories.tsx

@@ -9,7 +9,7 @@ export default {
   component: Leaf,
   argTypes: {
     variant: {
-      control: { type: "select", options: [1,2,3] },
+      control: { type: "select", options: [1, 2, 3] },
     },
     selected: {
       control: "boolean",
@@ -22,11 +22,11 @@ const Template: StoryFn<LeavesProps> = (args) => <Leaf {...args} />;
 
 export const OneLeaf = Template.bind({});
 OneLeaf.args = {
-  leavesCount:1,
+  leavesCount: 1,
 };
 
 export const TwoLeaf = Template.bind({});
 TwoLeaf.args = {
-  leavesCount:1,
-  selected:true
+  leavesCount: 1,
+  selected: true,
 };

src/components/button/Button.tsx

@@ -4,24 +4,45 @@ import LeafIcon from "../../icons/LeafIcon";
 import React from "react";
 
 export interface LeavesProps {
+  leavesCount: number;
   onClick?: () => void;
   disabled?: boolean;
   withBorder?: boolean;
-  leavesCount: number;
   selected?: boolean;
+  showLeftOvers?: 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 =  `
+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"}
+  ${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();
 
-  return <div className={allStyles} role="button" tabIndex={0}>
-    {Array.from({length:leavesCount}).map((_,i)=>
-        <LeafIcon key={i} />
-    )}
-  </div>;
-};
+  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>
+  );
+};