chore(fix): fixed and updated ui requirements for card and tag

Author: 0tuedon

eslint.config.js

@@ -19,6 +19,7 @@ module.exports = [
       ...typescript.configs["recommended"].rules,
       ...react.configs["recommended"].rules,
       "no-console": ["warn", { allow: ["warn", "error"] }],
+      "react/prop-types": "off",
       "@typescript-eslint/no-unused-vars": "warn",
     },
     settings: {

src/components/button/Button.tsx

@@ -40,6 +40,7 @@ export const Button: React.FC<ButtonProps> = ({
     ${variantStyles[variant]}
     ${sizeStyles[size]}
     ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+    ${customClass}
   `.trim();
 
   return (

src/components/card/BDPCard.tsx

@@ -34,7 +34,7 @@ export const BDPCard: React.FC<CardProps> = ({
   byBDP,
 }) => {
   const baseStyles = `border border-brand-stroke-on-base p-2 
-  flex min-h-[290px] w-[374px] rounded-2xl  bg-brand-card-bg`;
+  flex min-h-[290px] w-full md:max-w-[374px] rounded-2xl  bg-brand-card-bg`;
 
   const className = `
   ${baseStyles}
@@ -62,8 +62,8 @@ export const BDPCard: React.FC<CardProps> = ({
     >
       <div className="flex flex-col rounded-xl border border-brand-stroke-on-base w-full min-h-full bg-brand-card-bg">
         <div
-          className={`h-[126px] flex border border-l-0 border-r-0 border-t-0
-             border-brand-stroke-on-base rounded-lg relative flex-col items-center justify-center`}
+          className={`min-h-[126px] flex border border-l-0 border-r-0 border-t-0
+             border-brand-stroke-on-base rounded-lg relative z-0 flex-col items-center justify-center`}
           style={{ backgroundColor: bannerColor }}
         >
           <div>
@@ -80,16 +80,21 @@ export const BDPCard: React.FC<CardProps> = ({
           )}
         </div>
         {/* Footer */}
-        <div className="flex flex-col w-full p-3 gap-2">
-          <div className="w-full flex items-center justify-between">
-            <h6 className="font-montserrat text-lg font-semibold">{title}</h6>
-            <Leaf
-              showLeftOvers
-              leavesCount={convertToLeavesCount(difficulty)}
-            />
+        <div className="flex flex-col w-full h-full p-2 md:p-3 gap-1.5 md:gap-2 justify-between">
+          <div className="flex flex-col gap-1.5 md:gap-2">
+            <div className="w-full flex items-start justify-between">
+              <h6 className="font-montserrat text-base md:text-lg font-semibold">
+                {title}
+              </h6>
+              <Leaf
+                showLeftOvers
+                leavesCount={convertToLeavesCount(difficulty)}
+              />
+            </div>
+            <p className="font-light text-sm md:text-base font-quicksand">
+              {description}
+            </p>
           </div>
-          <p className="font-light font-quicksand">{description}</p>
-
           <div className="flex gap-[9px] flex-wrap">
             {tagList &&
               tagList.map((tag) => (

src/components/pill/Pill.tsx

@@ -102,12 +102,3 @@ export const Pill: React.FC<PillProps> = ({
     </div>
   );
 };
-
-Pill.propTypes = {
-  state: PropTypes.oneOf(["default", "hover", "selected"]),
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  selected: PropTypes.bool,
-  onSelectChange: PropTypes.func,
-};

src/components/tag/Tag.tsx

@@ -79,7 +79,7 @@ export const Tag: React.FC<TagProps> = ({
       ? config.color
       : effectiveState === "hover"
         ? config.lightColor
-        : "white";
+        : "transparent";
   const renderBorderColor = config.color;
 
   return (
@@ -129,13 +129,3 @@ export const Tag: React.FC<TagProps> = ({
     </div>
   );
 };
-
-Tag.propTypes = {
-  type: PropTypes.oneOf(["guide", "seminar", "tool", "interactive"]).isRequired,
-  state: PropTypes.oneOf(["default", "hover", "selected"]),
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  selected: PropTypes.bool,
-  onSelectChange: PropTypes.func,
-};

src/icons/MicIcon.tsx

@@ -21,18 +21,18 @@ const MicIcon = ({
     <path
       d="M19.179 7.79078V12.1985C19.179 15.2414 16.7122 17.7082 13.6693 17.7082C10.6264 17.7082 8.15967 15.2414 8.15967 12.1985V7.79078C8.15967 4.74789 10.6264 2.28113 13.6693 2.28113C16.7122 2.28113 19.179 4.74789 19.179 7.79078Z"
       stroke="currentColor"
-      strokeWidth={1.6529 || pathProps?.strokeWidth}
+      strokeWidth={pathProps?.strokeWidth || 1.6529}
     />
     <path
       d="M19.1793 7.79077H15.8735M19.1793 12.1985H15.8735"
       stroke="currentColor"
-      strokeWidth={1.6529 || pathProps?.strokeWidth}
+      strokeWidth={pathProps?.strokeWidth || 1.6529}
       strokeLinecap="round"
     />
     <path
       d="M22.4849 12.1985C22.4849 17.0671 18.5381 21.0139 13.6695 21.0139M13.6695 21.0139C8.80081 21.0139 4.854 17.0671 4.854 12.1985M13.6695 21.0139V24.3197M13.6695 24.3197H16.9752M13.6695 24.3197H10.3637"
       stroke="currentColor"
-      strokeWidth={1.6529 || pathProps?.strokeWidth}
+      strokeWidth={pathProps?.strokeWidth || 1.6529}
       strokeLinecap="round"
     />
   </svg>

src/icons/stories/icon.stories.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
 import * as Icons from "../../icons";

src/stories/Button.stories.ts

@@ -3,7 +3,7 @@ import { fn } from "@storybook/test";
 import { Button } from "./Button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof Button> = {
   title: "Example/Button",
   component: Button,
   parameters: {

src/stories/Header.stories.ts

@@ -3,7 +3,7 @@ import { fn } from "@storybook/test";
 
 import { Header } from "./Header";
 
-const meta = {
+const meta: Meta<typeof Header> = {
   title: "Example/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs

src/styles/tailwind.css

@@ -42,6 +42,7 @@
     #fafafa 50.33%,
     rgba(250, 250, 250, 0) 100%
   );
+  --brand-orange-100: #eb5234;
 }
 
 html {