From 8d3032bdb3151a4bc4a7da005ec1ef174a70366d Mon Sep 17 00:00:00 2001 From: 0tuedon <90271995+0tuedon@users.noreply.github.com> Date: Mon, 10 Nov 2025 13:32:07 +0100 Subject: [PATCH] chore(fix): fixed and updated ui requirements for card and tag --- eslint.config.js | 1 + src/components/button/Button.tsx | 1 + src/components/card/BDPCard.tsx | 29 +++++++++++++++++------------ src/components/pill/Pill.tsx | 9 --------- src/components/tag/Tag.tsx | 12 +----------- src/icons/MicIcon.tsx | 6 +++--- src/icons/stories/icon.stories.tsx | 2 ++ src/stories/Button.stories.ts | 2 +- src/stories/Header.stories.ts | 2 +- src/styles/tailwind.css | 1 + tailwind.config.js | 2 +- 11 files changed, 29 insertions(+), 38 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index a076e37..fd646bf 100644 --- a/eslint.config.js +++ b/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: { diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index 3576cf0..fa65f1d 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -40,6 +40,7 @@ export const Button: React.FC = ({ ${variantStyles[variant]} ${sizeStyles[size]} ${disabled ? "opacity-50 cursor-not-allowed" : ""} + ${customClass} `.trim(); return ( diff --git a/src/components/card/BDPCard.tsx b/src/components/card/BDPCard.tsx index 94702ab..cccf551 100644 --- a/src/components/card/BDPCard.tsx +++ b/src/components/card/BDPCard.tsx @@ -34,7 +34,7 @@ export const BDPCard: React.FC = ({ 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 = ({ >
@@ -80,16 +80,21 @@ export const BDPCard: React.FC = ({ )}
{/* Footer */} -
-
-
{title}
- +
+
+
+
+ {title} +
+ +
+

+ {description} +

-

{description}

-
{tagList && tagList.map((tag) => ( diff --git a/src/components/pill/Pill.tsx b/src/components/pill/Pill.tsx index 216c7cb..b2b27da 100644 --- a/src/components/pill/Pill.tsx +++ b/src/components/pill/Pill.tsx @@ -102,12 +102,3 @@ export const Pill: React.FC = ({
); }; - -Pill.propTypes = { - state: PropTypes.oneOf(["default", "hover", "selected"]), - onClick: PropTypes.func, - className: PropTypes.string, - children: PropTypes.node, - selected: PropTypes.bool, - onSelectChange: PropTypes.func, -}; diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index 614eec1..1403b6b 100644 --- a/src/components/tag/Tag.tsx +++ b/src/components/tag/Tag.tsx @@ -79,7 +79,7 @@ export const Tag: React.FC = ({ ? config.color : effectiveState === "hover" ? config.lightColor - : "white"; + : "transparent"; const renderBorderColor = config.color; return ( @@ -129,13 +129,3 @@ export const Tag: React.FC = ({
); }; - -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, -}; diff --git a/src/icons/MicIcon.tsx b/src/icons/MicIcon.tsx index 395660d..fd1bd18 100644 --- a/src/icons/MicIcon.tsx +++ b/src/icons/MicIcon.tsx @@ -21,18 +21,18 @@ const MicIcon = ({ diff --git a/src/icons/stories/icon.stories.tsx b/src/icons/stories/icon.stories.tsx index 446e119..c6087fd 100644 --- a/src/icons/stories/icon.stories.tsx +++ b/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"; diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index dff96cf..96ef4ad 100644 --- a/src/stories/Button.stories.ts +++ b/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 = { title: "Example/Button", component: Button, parameters: { diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts index eb3e277..8a97948 100644 --- a/src/stories/Header.stories.ts +++ b/src/stories/Header.stories.ts @@ -3,7 +3,7 @@ import { fn } from "@storybook/test"; import { Header } from "./Header"; -const meta = { +const meta: Meta = { title: "Example/Header", component: Header, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 9feeae5..11d1391 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -42,6 +42,7 @@ #fafafa 50.33%, rgba(250, 250, 250, 0) 100% ); + --brand-orange-100: #eb5234; } html { diff --git a/tailwind.config.js b/tailwind.config.js index 5eb6c75..aae4e35 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -56,7 +56,7 @@ module.exports = { "stroke-on-base":"#E1DBD0", "card-bg":"#EFE9DE", orange:{ - 100:"#EB5234", + 100:"var(--brand-orange-100)", }, gray:{ 100:"#201E1E",