diff --git a/public/icons/electricity-outline.tsx b/public/icons/electricity-outline.tsx new file mode 100644 index 0000000..0bf3626 --- /dev/null +++ b/public/icons/electricity-outline.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const ElectricityOutline = (props: SVGProps) => ( + + + +); diff --git a/public/icons/index.ts b/public/icons/index.ts index e8ab54f..62e50fb 100644 --- a/public/icons/index.ts +++ b/public/icons/index.ts @@ -1,3 +1,4 @@ export { Alert } from "./alert"; export { ArrowRight } from "./arrow-right"; +export { ElectricityOutline } from "./electricity-outline"; export { GasOutline } from "./gas-outline"; diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx new file mode 100644 index 0000000..872eb26 --- /dev/null +++ b/src/components/card/card.stories.tsx @@ -0,0 +1,93 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import Card from "."; +import { Alert, ElectricityOutline, GasOutline } from "../../../public/icons"; +import { Badge } from "../badge/badge"; +import { Cta } from "../cta"; +import { Text } from "../text"; +import { Title } from "../title"; + +type CardType = typeof Card.Root & + typeof Card.Header & + typeof Card.Content & + typeof Card.Footer; + +const meta: Meta = { + argTypes: { + supply: { + options: ["gas", "electricity"], + control: { type: "select" }, + }, + }, + args: { + supply: "gas", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Template: Story = { + render: (args) => { + const isGasSupply = args.supply === "gas"; + const supplyText = isGasSupply ? "Gas" : "Luce"; + const supplyIcon = isGasSupply ? ( + + ) : ( + + ); + + return ( + +
+ + A rischio sospensione + +
+ +
+ {supplyIcon} + + {supplyText} + +
+ + Piazza Risorgimento 3, Amandola (FM) + + + +
+ + + Dobbiamo chiederti di compilare un modulo. Entra per scaricarlo. + +
+ + Per questa fornitura pagherai + + + 65,46 € + +
+ + 57 + +
+ + ,99 € + + + al mese, + + + per 12 mesi. + +
+
+ + + Monitora e gestisci + + + ); + }, +}; diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx new file mode 100644 index 0000000..5d77cc7 --- /dev/null +++ b/src/components/card/card.tsx @@ -0,0 +1,75 @@ +import classNames from "classnames"; +import { forwardRef } from "react"; +import { CardProps } from "./types"; +import { + cardContentStyles, + cardFooterStyles, + cardHeaderStyles, + cardStyles, +} from "./styles"; + +const Card = forwardRef( + ({ supply, className, children, ...rest }, ref) => { + return ( +
+ {children} +
+ ); + } +); + +Card.displayName = "Card"; + +const CardHeader = forwardRef( + ({ className, children, ...rest }, ref) => { + return ( +
+ {children} +
+ ); + } +); + +CardHeader.displayName = "CardHeader"; + +const CardContent = forwardRef( + ({ className, children, ...rest }, ref) => { + return ( +
+ {children} +
+ ); + } +); + +CardContent.displayName = "CardContent"; + +const CardFooter = forwardRef( + ({ className, children, ...rest }, ref) => { + return ( +
+ {children} +
+ ); + } +); + +CardFooter.displayName = "CardFooter"; + +export { Card, CardHeader, CardContent, CardFooter }; diff --git a/src/components/card/index.ts b/src/components/card/index.ts new file mode 100644 index 0000000..c968961 --- /dev/null +++ b/src/components/card/index.ts @@ -0,0 +1,12 @@ +import { Card, CardHeader, CardContent, CardFooter } from "./card"; + +const CardObject = { + Root: Card, + Header: CardHeader, + Content: CardContent, + Footer: CardFooter, +}; + +export { Card, CardHeader, CardContent, CardFooter }; + +export default CardObject; diff --git a/src/components/card/styles.ts b/src/components/card/styles.ts new file mode 100644 index 0000000..3b01dd0 --- /dev/null +++ b/src/components/card/styles.ts @@ -0,0 +1,15 @@ +import { cva } from "class-variance-authority"; + +const cardStyles = cva("w-[280px] h-[280px] pl-xs", { + variants: { + supply: { + gas: "bg-cyan", + electricity: "bg-yellow", + }, + }, +}); +const cardHeaderStyles = cva("border-b b-black pb-base"); +const cardContentStyles = cva("pb-2xs"); +const cardFooterStyles = cva("border-t b-black pr-xxs"); + +export { cardStyles, cardHeaderStyles, cardContentStyles, cardFooterStyles }; diff --git a/src/components/card/types.ts b/src/components/card/types.ts new file mode 100644 index 0000000..19b5dfb --- /dev/null +++ b/src/components/card/types.ts @@ -0,0 +1,6 @@ +import { VariantProps } from "class-variance-authority"; +import { cardStyles } from "./styles"; +import { ComponentPropsWithoutRef } from "react"; + +export type CardProps = ComponentPropsWithoutRef<"div"> & + VariantProps; diff --git a/src/components/cta/cta.tsx b/src/components/cta/cta.tsx index 561f367..b3e3847 100644 --- a/src/components/cta/cta.tsx +++ b/src/components/cta/cta.tsx @@ -1,7 +1,7 @@ import classNames from "classnames"; import { forwardRef } from "react"; -import { ArrowRight } from "../../../public/icons/arrow-right"; +import { ArrowRight } from "../../../public/icons"; import { Text } from "../text"; import { ctaStyles } from "./styles"; import { CtaProps } from "./types"; diff --git a/src/components/title/title.stories.tsx b/src/components/title/title.stories.tsx index 00761a5..806e3c6 100644 --- a/src/components/title/title.stories.tsx +++ b/src/components/title/title.stories.tsx @@ -17,6 +17,6 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Primary: Story = { +export const Template: Story = { render: (args) => Heading, };