diff --git a/.prettierrc b/.prettierrc index f2e4c583..6f89f271 100644 --- a/.prettierrc +++ b/.prettierrc @@ -10,5 +10,7 @@ "bracketSpacing": true, "endOfLine": "lf", "singleAttributePerLine": true, - "arrowParens": "avoid" + "arrowParens": "avoid", + "tabWidth": 2, + "useTabs": false } diff --git a/src/components/Card/CardPrimary/CardPrimary.test.tsx b/src/components/Card/CardPrimary/CardPrimary.test.tsx index 2eb8a6d0..a8cd0cfa 100644 --- a/src/components/Card/CardPrimary/CardPrimary.test.tsx +++ b/src/components/Card/CardPrimary/CardPrimary.test.tsx @@ -3,39 +3,38 @@ import { ThemeProvider } from "@/theme"; import { CardPrimary, CardProps } from "././CardPrimary"; describe("CardPrimary Component", () => { - - describe("Primary card", () => { - const renderCard = (props: CardProps) => - render( - - - - ); + describe("Primary card", () => { + const renderCard = (props: CardProps) => + render( + + + + ); - it("should render the title", () => { + it("should render the title", () => { const title = "Test card component"; renderCard({ - title, - image: "warning", - description: "", - infoUrl: "", - infoText: "" - }); + title, + image: "warning", + description: "", + infoUrl: "", + infoText: "", + }); expect(screen.getByText(title)).toBeDefined(); }); - it("should render the description when provided", () => { - const description = "This is the card description"; - renderCard({ - image: "warning", - title: "", - description, - infoUrl: "", - infoText: "" - }); - - expect(screen.getByText(description)).toBeDefined(); - }); - }); -}); \ No newline at end of file + it("should render the description when provided", () => { + const description = "This is the card description"; + renderCard({ + image: "warning", + title: "", + description, + infoUrl: "", + infoText: "", + }); + + expect(screen.getByText(description)).toBeDefined(); + }); + }); +}); diff --git a/src/components/Card/CardPrimary/CardPrimary.tsx b/src/components/Card/CardPrimary/CardPrimary.tsx index ce72112f..c311f9f2 100644 --- a/src/components/Card/CardPrimary/CardPrimary.tsx +++ b/src/components/Card/CardPrimary/CardPrimary.tsx @@ -16,7 +16,7 @@ export interface CardProps { } const Wrapper = styled.div>` - background-color: ${({ theme }) => theme.click.card.primary.color.background.default}; + background-color: ${({ theme }) => theme.click.card.primary.color.background.default}; border-radius: ${({ theme }) => theme.click.card.primary.radii.all}; border: ${({ theme }) => `1px solid ${theme.click.card.primary.color.stroke.default}`}; display: flex; @@ -26,17 +26,21 @@ const Wrapper = styled.div `${theme.click.card.primary.space[size].x} ${theme.click.card.primary.space[size].y}`}; gap: ${({ size = "md", theme }) => theme.click.card.primary.space[size].gap}; - box-shadow: ${({ hasShadow, theme }) => hasShadow ? theme.shadow[1] : "none"}; + box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")}; - &:hover, &:focus { + &:hover, + &:focus { background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover}; cursor: pointer; button { - background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.hover}; + background-color: ${({ theme }) => + theme.click.button.basic.color.primary.background.hover}; border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.hover}; &:active { - background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.active}; - border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.active}; + background-color: ${({ theme }) => + theme.click.button.basic.color.primary.background.active}; + border-color: ${({ theme }) => + theme.click.button.basic.color.primary.stroke.active}; } } } @@ -44,20 +48,25 @@ const Wrapper = styled.div theme.click.card.primary.color.background.disabled}; + background-color: ${({ theme }) => + theme.click.card.primary.color.background.disabled}; color: ${({ theme }) => theme.click.card.primary.color.title.disabled}; border: 1px solid ${({ theme }) => theme.click.card.primary.color.stroke.disabled}; cursor: not-allowed; button { - background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.disabled}; - border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.disabled}; + background-color: ${({ theme }) => + theme.click.button.basic.color.primary.background.disabled}; + border-color: ${({ theme }) => + theme.click.button.basic.color.primary.stroke.disabled}; &:active { - background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.disabled}; - border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.disabled}; + background-color: ${({ theme }) => + theme.click.button.basic.color.primary.background.disabled}; + border-color: ${({ theme }) => + theme.click.button.basic.color.primary.stroke.disabled}; } } - } + } `; const Header = styled.div>` @@ -67,7 +76,10 @@ const Header = styled.div>` gap: ${({ size = "md", theme }) => theme.click.card.primary.space[size].gap}; h3 { - color: ${({ disabled, theme }) => disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default}; + color: ${({ disabled, theme }) => + disabled == true + ? theme.click.global.color.text.muted + : theme.click.global.color.text.default}; } svg { @@ -92,27 +104,30 @@ export const CardPrimary = ({ infoUrl, infoText, size, - disabled = false + disabled = false, }: CardProps) => ( - alert(`We need to implement a routing system so I can go to ${infoUrl}`)}> - -
+ onClick={() => + alert(`We need to implement a routing system so I can go to ${infoUrl}`) + } + > +
- {title} + {title}
{description} - { size == "sm" && - - } + {size == "sm" && } -); \ No newline at end of file +); diff --git a/src/components/Card/CardSecondary/CardSecondary.test.tsx b/src/components/Card/CardSecondary/CardSecondary.test.tsx index 0b3d7e1d..0ccddfce 100644 --- a/src/components/Card/CardSecondary/CardSecondary.test.tsx +++ b/src/components/Card/CardSecondary/CardSecondary.test.tsx @@ -10,44 +10,43 @@ describe("CardSecondary Component", () => { ); - it("should render the title", () => { - const title = "Test card component"; - renderCard({ - title, - image: "warning", - description: "", - infoUrl: "", - infoText: "" - }); + it("should render the title", () => { + const title = "Test card component"; + renderCard({ + title, + image: "warning", + description: "", + infoUrl: "", + infoText: "", + }); + + expect(screen.getAllByText(title).length).toEqual(1); + }); - expect(screen.getAllByText(title).length).toEqual(1); + it("should render the description when provided", () => { + const description = "This is the card description"; + renderCard({ + image: "warning", + title: "", + description, + infoUrl: "", + infoText: "", }); - it("should render the description when provided", () => { - const description = "This is the card description"; - renderCard({ - image: "warning", - title: "", - description, - infoUrl: "", - infoText: "" - }); - - expect(screen.getAllByText(description).length).toEqual(1); - }); + expect(screen.getAllByText(description).length).toEqual(1); + }); - it("should render the badge when hasBadge prop is present", () => { - const badgeText = "I should eat more bananas"; - renderCard({ - image: "warning", - title: "", - description: "", - infoUrl: "", - infoText: "", - badgeText, - }); - - expect(screen.getAllByText(badgeText).length).toEqual(1); - }); + it("should render the badge when hasBadge prop is present", () => { + const badgeText = "I should eat more bananas"; + renderCard({ + image: "warning", + title: "", + description: "", + infoUrl: "", + infoText: "", + badgeText, + }); -}); \ No newline at end of file + expect(screen.getAllByText(badgeText).length).toEqual(1); + }); +}); diff --git a/src/components/Card/CardSecondary/CardSecondary.tsx b/src/components/Card/CardSecondary/CardSecondary.tsx index 27090116..2ec267a2 100644 --- a/src/components/Card/CardSecondary/CardSecondary.tsx +++ b/src/components/Card/CardSecondary/CardSecondary.tsx @@ -29,14 +29,15 @@ export interface CardProps { const Wrapper = styled.div>` background-color: ${({ theme }) => theme.click.card.secondary.color.background.default}; border-radius: ${({ theme }) => theme.click.card.secondary.radii.all}; - border: ${({ theme }) => `1px solid ${theme.click.card.secondary.color.stroke.default}`}; + border: ${({ theme }) => + `1px solid ${theme.click.card.secondary.color.stroke.default}`}; max-width: 420px; min-width: 320px; display: flex; flex-direction: column; padding: ${({ theme }) => theme.click.card.secondary.space.all}; gap: ${({ theme }) => theme.click.card.secondary.space.gap}; - box-shadow: ${({ hasShadow, theme }) => hasShadow ? theme.shadow[1] : "none"}; + box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")}; &:hover, :focus { background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover}; @@ -50,7 +51,8 @@ const Wrapper = styled.div>` &[disabled], &[disabled]:hover, &[disabled]:active { - background-color: ${({ theme }) => theme.click.card.secondary.color.background.disabled}; + background-color: ${({ theme }) => + theme.click.card.secondary.color.background.disabled}; color: ${({ theme }) => theme.click.card.secondary.color.title.disabled}; border: 1px solid ${({ theme }) => theme.click.card.secondary.color.stroke.disabled}; cursor: not-allowed; @@ -58,10 +60,8 @@ const Wrapper = styled.div>` .link, .link-arrow { color: ${({ theme }) => theme.click.card.secondary.color.link.disabled}; } - } - - } - + } +} `; const Header = styled.div` @@ -75,9 +75,12 @@ const HeaderLeft = styled.div>` display: flex; align-items: center; gap: ${({ theme }) => theme.click.card.secondary.space.gap}; - + h3 { - color: ${({ disabled, theme }) => disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default}; + color: ${({ disabled, theme }) => + disabled == true + ? theme.click.global.color.text.muted + : theme.click.global.color.text.default}; } `; @@ -99,7 +102,7 @@ const ArrowContainer = styled(Icon)` color: ${({ theme }) => theme.click.card.secondary.color.link.default}; height: ${({ theme }) => theme.click.image.medium.size.height}; width: ${({ theme }) => theme.click.image.medium.size.width}; -` +`; export const CardSecondary = ({ title, @@ -112,18 +115,27 @@ export const CardSecondary = ({ infoUrl, infoText, }: CardProps) => ( - alert(`We need to implement a routing system so I can go to ${infoUrl}`)}> + + alert(`We need to implement a routing system so I can go to ${infoUrl}`) + } + >
- - {title} + + {title} - { badgeText && ( + {badgeText && ( ) - } + state={disabled == true ? "disabled" : badgeState} + /> + )}
@@ -134,7 +146,8 @@ export const CardSecondary = ({ {infoText} + className="link-arrow" + /> -); \ No newline at end of file +); diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx index 76c60518..b68567eb 100644 --- a/src/components/Panel/Panel.stories.tsx +++ b/src/components/Panel/Panel.stories.tsx @@ -5,13 +5,13 @@ import { Title } from "../Typography/Title/Title"; export default { component: Panel, title: "Display/Panel", - tags: ["panel","autodocs"], + tags: ["panel", "autodocs"], argTypes: { padding: { options: ["none", "xs", "sm", "md", "lg", "xl"], control: { type: "select" }, }, - }, + }, }; export const Playground = { @@ -20,6 +20,17 @@ export const Playground = { padding: "md", hasBorder: true, hasShadow: true, - children:
Example panel title
Panel content
- }, + children: ( +
+ Example panel title +
+ + Panel content + +
+ ), + }, }; diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 61ac0288..db62999b 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -5,36 +5,36 @@ export type panelColor = "default" | "muted" | "transparent"; export interface panelProps { hasBorder?: boolean; - hasShadow?: boolean; - color?: panelColor; + hasShadow?: boolean; + color?: panelColor; padding?: panelPadding; - children?: React.ReactNode; + children?: React.ReactNode; } -export const Panel = ({ - hasBorder, - hasShadow, - color, - padding, - children -}: panelProps) => ( - - - {children} - - +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]}; + 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"}; + border: ${({ hasBorder, theme }) => + hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"}; + box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")}; display: flex; - `; const FlexContainer = styled.div` - display: flex; -` \ No newline at end of file + display: flex; +`;