Feature/card

public/icons/electricity-outline.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+export const ElectricityOutline = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 16 16" {...props}>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.88419 9.08333H6.35011C6.53051 9.08333 6.69936 9.17054 6.80193 9.31652C6.90478 9.4625 6.92815 9.64883 6.86518 9.81512L5.90488 12.3374L10.81 8.54167H9.1001C8.89935 8.54167 8.71428 8.43415 8.61803 8.26054C8.52123 8.08748 8.52838 7.87596 8.6359 7.70913L11.948 2.58333H6.71256L3.88419 9.08333ZM4.70011 14.5C4.58626 14.5 4.47214 14.4653 4.37506 14.3955C4.17624 14.2519 4.09841 13.9957 4.18504 13.7682L5.55646 10.1667H3.05011C2.86531 10.1667 2.69261 10.0751 2.59086 9.92319C2.48911 9.77125 2.47151 9.57896 2.54466 9.41158L5.84466 1.82825C5.93101 1.62919 6.13011 1.5 6.35011 1.5H12.9501C13.1506 1.5 13.3356 1.60752 13.4322 1.78113C13.5287 1.95419 13.5218 2.16571 13.414 2.33254L10.1019 7.45833H12.4001C12.6344 7.45833 12.8431 7.60485 12.9198 7.82288C12.9966 8.04117 12.9242 8.28329 12.7397 8.42602L5.03973 14.3844C4.94046 14.4613 4.82001 14.5 4.70011 14.5Z"
+    />
+  </svg>
+);

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";

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<CardType> = {
+  argTypes: {
+    supply: {
+      options: ["gas", "electricity"],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    supply: "gas",
+  },
+};
+
+export default meta;
+type Story = StoryObj<CardType>;
+
+export const Template: Story = {
+  render: (args) => {
+    const isGasSupply = args.supply === "gas";
+    const supplyText = isGasSupply ? "Gas" : "Luce";
+    const supplyIcon = isGasSupply ? (
+      <GasOutline className="fill-black h-xs w-xs" />
+    ) : (
+      <ElectricityOutline className="fill-black h-xs w-xs" />
+    );
+
+    return (
+      <Card.Root {...args}>
+        <div className="flex w-full justify-end">
+          <Badge variant="error" className="mb-base">
+            A rischio sospensione
+          </Badge>
+        </div>
+        <Card.Header>
+          <div className="flex items-center gap-xxs">
+            {supplyIcon}
+            <Text size="sm" weight="medium">
+              {supplyText}
+            </Text>
+          </div>
+          <Text size="xs" weight="light">
+            Piazza Risorgimento 3, Amandola (FM)
+          </Text>
+        </Card.Header>
+        <Card.Content>
+          <div className="flex gap-2xs py-xxs pr-xs">
+            <Alert className="fill-black h-xs w-xs" />
+            <Text size="xs" weight="regular">
+              Dobbiamo chiederti di compilare un modulo. Entra per scaricarlo.
+            </Text>
+          </div>
+          <Text size="xs" weight="light" className="pb-base">
+            Per questa fornitura pagherai
+          </Text>
+          <Text size="xs" weight="medium" className="line-through leading-none">
+            65,46 €
+          </Text>
+          <div className="flex items-top gap-base  mb-[-4px]">
+            <Title as="h1" className="leading-none mt-[-5px]">
+              57
+            </Title>
+            <div>
+              <Title as="h4" className="leading-none">
+                ,99 €
+              </Title>
+              <Text size="xs" weight="light" className="leading-none">
+                al mese,
+              </Text>
+              <Text size="xs" weight="light" className="leading-none">
+                per 12 mesi.
+              </Text>
+            </div>
+          </div>
+        </Card.Content>
+        <Card.Footer>
+          <Cta className="pt-xs">Monitora e gestisci</Cta>
+        </Card.Footer>
+      </Card.Root>
+    );
+  },
+};

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<HTMLDivElement, CardProps>(
+  ({ supply, className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={classNames(cardStyles({ supply }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={classNames(cardHeaderStyles({}), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = "CardHeader";
+
+const CardContent = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={classNames(cardContentStyles({}), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={classNames(cardFooterStyles({}), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardContent, CardFooter };

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;

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 };

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<typeof cardStyles>;

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";

src/components/title/title.stories.tsx

@@ -17,6 +17,6 @@ const meta: Meta<typeof Title> = {
 export default meta;
 type Story = StoryObj<typeof Title>;
 
-export const Primary: Story = {
+export const Template: Story = {
   render: (args) => <Title {...args}>Heading</Title>,
 };