From 699b1be06a2c387047ee6ee36ec9a818296cd4f9 Mon Sep 17 00:00:00 2001 From: VINEETH ASOK KUMAR Date: Tue, 26 Sep 2023 12:40:42 +0200 Subject: [PATCH 1/3] Add Option to have a click event for the primary button --- .../CardPrimary/CardPrimary.test.tsx | 38 +++++++++++++++++++ src/components/CardPrimary/CardPrimary.tsx | 15 ++++++-- 2 files changed, 49 insertions(+), 4 deletions(-) diff --git a/src/components/CardPrimary/CardPrimary.test.tsx b/src/components/CardPrimary/CardPrimary.test.tsx index c2d94688..7ec34021 100644 --- a/src/components/CardPrimary/CardPrimary.test.tsx +++ b/src/components/CardPrimary/CardPrimary.test.tsx @@ -31,5 +31,43 @@ describe("CardPrimary Component", () => { expect(screen.getByText(description)).toBeDefined(); }); + it("should render button when the infoUrl is provided", () => { + const description = "This is the card description"; + const { queryByRole } = renderCard({ + icon: "warning", + title: "", + description, + infoUrl: "test", + infoText: "test", + }); + + expect(queryByRole("button")).not.toBeNull(); + }); + it("should not render button when the infoUrl is provided and length is 0", () => { + const description = "This is the card description"; + const { queryByRole } = renderCard({ + icon: "warning", + title: "", + description, + infoUrl: "", + infoText: "", + }); + + expect(queryByRole("button")).toBeNull(); + }); + + it("should render button when onButtonClick is provided", () => { + const description = "This is the card description"; + const { queryByRole } = renderCard({ + icon: "warning", + title: "", + description, + onButtonClick: () => null, + infoText: "test1", + }); + + screen.debug(); + expect(queryByRole("button")).not.toBeNull(); + }); }); }); diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx index b7469aaf..85512a89 100644 --- a/src/components/CardPrimary/CardPrimary.tsx +++ b/src/components/CardPrimary/CardPrimary.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { Button, Icon, Spacer, IconName } from "@/components"; import { Title } from "@/components/Typography/Title/Title"; import { Text } from "@/components/Typography/Text/Text"; -import { ReactNode } from "react"; +import { MouseEvent, MouseEventHandler, ReactNode } from "react"; export interface CardPrimaryProps { title: string; @@ -13,6 +13,7 @@ export interface CardPrimaryProps { infoUrl?: string; infoText?: string; size?: "sm" | "md"; + onButtonClick?: MouseEventHandler; } const Wrapper = styled.div<{ @@ -109,19 +110,25 @@ export const CardPrimary = ({ infoText, size, disabled = false, + onButtonClick, + ...props }: CardPrimaryProps) => { - const handleClick = () => { - if (infoUrl) { + const handleClick = (e: MouseEvent) => { + if (typeof onButtonClick === "function") { + onButtonClick(e); + } + if (infoUrl && infoUrl.length > 0) { window.open(infoUrl, "_blank"); } }; - const Component = !infoUrl || infoUrl.length === 0 ? "div" : Button; + const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div"; return (
Date: Tue, 26 Sep 2023 12:56:13 +0200 Subject: [PATCH 2/3] Add wrapper props to types --- src/components/CardPrimary/CardPrimary.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx index 85512a89..63583dce 100644 --- a/src/components/CardPrimary/CardPrimary.tsx +++ b/src/components/CardPrimary/CardPrimary.tsx @@ -2,9 +2,9 @@ import styled from "styled-components"; import { Button, Icon, Spacer, IconName } from "@/components"; import { Title } from "@/components/Typography/Title/Title"; import { Text } from "@/components/Typography/Text/Text"; -import { MouseEvent, MouseEventHandler, ReactNode } from "react"; +import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from "react"; -export interface CardPrimaryProps { +export interface CardPrimaryProps extends HTMLAttributes { title: string; icon: IconName; hasShadow?: boolean; From b45a9cfec33c255537472ef1aea153e3b95db1b7 Mon Sep 17 00:00:00 2001 From: VINEETH ASOK KUMAR Date: Tue, 26 Sep 2023 12:59:43 +0200 Subject: [PATCH 3/3] Add panel to components --- src/components/Panel/Panel.tsx | 40 +++++++++++++++++++--------------- src/components/index.ts | 1 + src/components/types.ts | 1 + 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index db62999b..38f2bb57 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -1,37 +1,43 @@ +import { HTMLAttributes } from "react"; import styled from "styled-components"; -export type panelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl"; -export type panelColor = "default" | "muted" | "transparent"; +export type PanelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl"; +export type PanelColor = "default" | "muted" | "transparent"; -export interface panelProps { +export interface PanelProps extends HTMLAttributes { hasBorder?: boolean; hasShadow?: boolean; - color?: panelColor; - padding?: panelPadding; + color?: PanelColor; + padding?: PanelPadding; children?: React.ReactNode; } -export const Panel = ({ hasBorder, hasShadow, color, padding, children }: panelProps) => ( +export const Panel = ({ hasBorder, hasShadow, color, padding, children }: PanelProps) => ( {children} ); -const Wrapper = styled.div` - background-color: ${({ color = "default", theme }) => - theme.click.panel.color.background[color]}; +const Wrapper = styled.div<{ + $hasBorder?: boolean; + $hasShadow?: boolean; + $color?: PanelColor; + $padding?: PanelPadding; +}>` + background-color: ${({ $color = "default", theme }) => + theme.click.panel.color.background[$color]}; border-radius: ${({ theme }) => theme.click.panel.radii.all}; - padding: ${({ padding = "md", theme }) => theme.click.panel.space.y[padding]}; - border: ${({ hasBorder, theme }) => - hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"}; - box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")}; + padding: ${({ $padding = "md", theme }) => theme.click.panel.space.y[$padding]}; + border: ${({ $hasBorder, theme }) => + $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"}; + box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : "none")}; display: flex; `; diff --git a/src/components/index.ts b/src/components/index.ts index fffaa458..dfb7afbd 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -25,6 +25,7 @@ export { Logo } from "./Logos/Logo"; export { NumberField } from "./Input/NumberField"; export { PasswordField } from "./Input/PasswordField"; export { Popover } from "./Popover/Popover"; +export { Panel } from "./Panel/Panel"; export { RadioGroup } from "./RadioGroup/RadioGroup"; export { SearchField } from "./Input/SearchField"; export { Select } from "./Select/SingleSelect"; diff --git a/src/components/types.ts b/src/components/types.ts index 5a27acd6..5b863f95 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -30,6 +30,7 @@ export type { Menu, SplitButtonProps } from "./SplitButton/SplitButton"; export type { ToastProps } from "./Toast/Toast"; export type { SelectOptionListItem } from "./Select/common/types"; export type { MultiSelectProps } from "./Select/MultiSelect"; +export type { PanelProps } from "./Panel/Panel"; export type States = "default" | "active" | "disabled" | "error" | "hover"; export type HorizontalDirection = "start" | "end";