@purpurds/promotion-card 3.4.0

package/readme.mdx

@@ -0,0 +1,60 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as PromotionCardStories from "./src/promotion-card.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/PromotionCard" of={PromotionCardStories} />
+
+# PromotionCard
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/purpur/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { PromotionCard } from "@purpurds/purpur";
+
+export const MyComponent = () => {
+  return (
+    <PromotionCard
+      variant="primary"
+      badgeText="Buy now"
+      badgeIcon={<IconOffering size="sm" />}
+      title="Promotion title"
+      hasGradient
+      decorativeImage={
+        <img
+          src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
+          alt="Lorem ipsum dolor sit amet consectetur adipisicing elit"
+        />
+      }
+    >
+      <Paragraph>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi corporis amet
+        exercitationem atque consequuntur.
+      </Paragraph>
+      <Button variant="primary">Ask us</Button>
+    </PromotionCard>
+  );
+};
+```

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/promotion-card.module.scss

@@ -0,0 +1,186 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-promotion-card {
+  $root: &;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: var(--promotion-card-color);
+  box-sizing: border-box;
+
+  &--without-image::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background: var(--promotion-card-background-image) right 50% center;
+    background-size: cover;
+    transform: rotateY(180deg);
+
+    @container promotion-card (min-width: #{$purpur-breakpoint-md}) {
+      background-position: center center;
+    }
+
+    @container promotion-card (min-width: #{$purpur-breakpoint-lg}) {
+      transform: rotateY(0);
+    }
+  }
+
+  &--with-image {
+    display: grid;
+    grid-template-areas: "image" "body";
+    grid-template-rows: auto 1fr;
+    background: var(--promotion-card-background);
+
+    @container promotion-card (min-width: #{$purpur-breakpoint-md}) {
+      grid-template-areas: "body image";
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  &__card-container,
+  &__card {
+    height: 100%;
+  }
+
+  &__card {
+    container: promotion-card / inline-size;
+  }
+
+  &__image-gradient {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0, var(--promotion-card-background), transparent 75%);
+
+    @container promotion-card (min-width: #{$purpur-breakpoint-md}) {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, var(--promotion-card-background), transparent 75%);
+    }
+  }
+
+  &__content {
+    grid-area: body;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+    padding: var(--purpur-spacing-400);
+    box-sizing: border-box;
+
+    &--without-image {
+      @container promotion-card (min-width: #{$purpur-breakpoint-lg}) {
+        padding: var(--purpur-spacing-600);
+
+        #{$root}__main-content {
+          display: flex;
+          gap: var(--purpur-spacing-300);
+        }
+
+        #{$root}__heading {
+          width: 100%;
+        }
+      }
+    }
+
+    &--with-image {
+      @container promotion-card (min-width: #{$purpur-breakpoint-md}) {
+        flex-direction: column;
+        justify-content: center;
+        padding: var(--purpur-spacing-600) var(--purpur-spacing-400);
+      }
+
+      @container promotion-card (min-width: #{$purpur-breakpoint-lg}) {
+        padding: var(--purpur-spacing-1200) var(--purpur-spacing-600);
+      }
+    }
+  }
+
+  &__badge-wrapper {
+    width: 100%;
+    padding-bottom: var(--purpur-spacing-200);
+  }
+
+  &__heading,
+  &__body {
+    width: 100%;
+  }
+
+  &__heading {
+    margin-bottom: var(--purpur-spacing-150);
+    color: var(--promotion-card-color);
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+
+    &,
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    ul,
+    ol {
+      color: var(--promotion-card-color);
+    }
+  }
+
+  &__image-wrapper {
+    grid-area: image;
+
+    &--decorative,
+    &--product {
+
+      picture,
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      img {
+        object-fit: cover;
+      }
+    }
+
+    &--decorative {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 3/2;
+
+      @container promotion-card (min-width: #{$purpur-breakpoint-md}) {
+        aspect-ratio: unset;
+
+        img {
+          height: 100%;
+        }
+      }
+    }
+
+    &--product {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--purpur-spacing-400);
+    }
+  }
+
+  [class*="_purpur-cta-link_"],
+  [class*="_purpur-button_"] {
+    width: 100%;
+
+    @container promotion-card (min-width: #{$purpur-breakpoint-md}) {
+      width: auto;
+    }
+  }
+}

package/src/promotion-card.stories.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable react/jsx-wrap-multilines */
+import React from "react";
+import { CtaLink } from "@purpurds/cta-link";
+import { Grid } from "@purpurds/grid";
+import { IconCheckmark, IconOffering } from "@purpurds/icon";
+import { Paragraph } from "@purpurds/paragraph";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/badge/styles";
+import "@purpurds/card/styles";
+import "@purpurds/cta-link/styles";
+import "@purpurds/grid/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/paragraph/styles";
+import { PromotionCard, PromotionCardVariant, promotionCardVariants } from "./promotion-card";
+
+const meta: Meta<typeof PromotionCard> = {
+  title: "Components/PromotionCard",
+  component: PromotionCard,
+  parameters: {
+    design: [
+      {
+        name: "PromotionCard",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=2942-430&mode=design&t=zoKkl2HAtk3UuKoP-0",
+      },
+    ],
+  },
+  argTypes: {
+    variant: { control: "select", options: promotionCardVariants },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PromotionCard>;
+
+const Children = ({ variant = "primary" }: { variant?: PromotionCardVariant }) => (
+  <>
+    <Paragraph style={{ marginBottom: "var(--purpur-spacing-150)" }}>
+      Lorem ipsum dolor sit amet consectetur. At velit mi ultricies in orci est condimentum. Et
+      venenatis fringilla vel dictum.
+    </Paragraph>
+
+    <ul
+      style={{
+        margin: "0 0 var(--purpur-spacing-400)",
+        padding: 0,
+        listStyle: "none",
+      }}
+    >
+      {[1, 2].map((number) => (
+        <li key={number}>
+          <Paragraph
+            style={{ display: "flex", gap: "var(--purpur-spacing-100)", alignItems: "center" }}
+          >
+            <IconCheckmark size="xs" /> List item {number}
+          </Paragraph>
+        </li>
+      ))}
+    </ul>
+
+    <div style={{ display: "flex", gap: "var(--purpur-spacing-200)", flexWrap: "wrap" }}>
+      <CtaLink variant={variant !== "primary" ? "primary" : "primary-negative"} href="#">
+        Primary CTA link
+      </CtaLink>
+      <CtaLink variant={variant !== "primary" ? "secondary" : "secondary-negative"} href="#">
+        Secondary CTA link
+      </CtaLink>
+    </div>
+  </>
+);
+
+const props = {
+  variant: "primary" as const,
+  badgeText: "Badge title",
+  badgeIcon: <IconOffering size="xs" />,
+  title: "Title goes here lorem ipsum",
+  titleTag: "h2" as const,
+  titleVariant: "title-300" as const,
+};
+
+export const WithDecorativeImage: Story = {
+  args: {
+    ...props,
+    hasGradient: true,
+    decorativeImage: (
+      <img
+        src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
+        alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
+      />
+    ),
+  },
+  render: (args) => {
+    return (
+      <PromotionCard {...args}>
+        <Children variant={args.variant} />
+      </PromotionCard>
+    );
+  },
+};
+
+export const WithProductImage: Story = {
+  args: {
+    ...props,
+    productImage: (
+      <picture
+        style={{
+          maxWidth: 300,
+        }}
+      >
+        <source
+          type="image/webp"
+          srcSet="https://www.telia.se/images/j6b4qnxw7ufu/5E89mxmBBAYshpycYSoPFD/1912f041265530726efb07097f035b91/101023__160_b2ddd755-1bb7-415c-83f8-cbcd4bf7eb0c?fit=scale&w=500&fm=webp&q=99"
+        />
+        <img
+          src="https://www.telia.se/images/j6b4qnxw7ufu/5E89mxmBBAYshpycYSoPFD/1912f041265530726efb07097f035b91/101023__160_b2ddd755-1bb7-415c-83f8-cbcd4bf7eb0c?fit=scale&w=500&fm=webp&q=99"
+          alt="Familjens unga ser på tv tillsammans"
+        />
+      </picture>
+    ),
+  },
+  render: (args) => {
+    return (
+      <PromotionCard {...args}>
+        <Children variant={args.variant} />
+      </PromotionCard>
+    );
+  },
+};
+
+export const CardGroup: Story = {
+  args: {
+    ...props,
+    hasGradient: true,
+    decorativeImage: (
+      <img
+        src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
+        alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
+      />
+    ),
+  },
+
+  render: (args) => {
+    return (
+      <Grid>
+        <Grid.Row colGap>
+          <Grid.Col width={12} widthMd={4}>
+            <PromotionCard {...args}>
+              <Paragraph>
+                Buy mobile telephony, broadband or IT support from Telia receive half the price of
+                Microsoft 365 for six months.
+              </Paragraph>
+            </PromotionCard>
+          </Grid.Col>
+          <Grid.Col width={12} widthMd={4}>
+            <PromotionCard {...args}>
+              <Paragraph>
+                Get our popular broadband and we&apos;ll offer you two months and the initial fee.
+              </Paragraph>
+            </PromotionCard>
+          </Grid.Col>
+          <Grid.Col width={12} widthMd={4}>
+            <PromotionCard {...args}>
+              <Paragraph>
+                Check out all our offers to explore the best we have to offer right now.
+              </Paragraph>
+            </PromotionCard>
+          </Grid.Col>
+        </Grid.Row>
+      </Grid>
+    );
+  },
+};
+
+export const Showcase: Story = {
+  args: {
+    ...props,
+  },
+
+  render: (args) => {
+    return (
+      <PromotionCard {...args}>
+        <Children variant={args.variant} />
+      </PromotionCard>
+    );
+  },
+};

package/src/promotion-card.test.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { PromotionCard } from "./promotion-card";
+
+expect.extend(matchers);
+
+const props = {
+  title: "Promotion card title",
+  "data-testid": "promotion-id",
+} as const;
+
+describe("PromotionCard", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render a PromotionCard", () => {
+    render(
+      <PromotionCard {...props}>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByTestId("promotion-id")).toBeInTheDocument();
+  });
+
+  it("should set default custom properties", () => {
+    render(
+      <PromotionCard {...props}>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByTestId("promotion-id")).toHaveStyle({
+      "--promotion-card-background": "var(--purpur-color-background-tone-on-tone-primary)",
+      "--promotion-card-color": "var(--purpur-color-text-tone-on-tone-primary)",
+    });
+  });
+
+  it("should set custom properties depending on variant", () => {
+    render(
+      <PromotionCard {...props} variant="secondary">
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByTestId("promotion-id")).toHaveStyle({
+      "--promotion-card-background": "var(--purpur-color-background-tone-on-tone-secondary)",
+      "--promotion-card-color": "var(--purpur-color-text-tone-on-tone-secondary)",
+    });
+  });
+
+  it("should render a title", () => {
+    render(
+      <PromotionCard {...props}>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByText(props.title)).toBeInTheDocument();
+  });
+
+  it("should set 'h2' as default tag", () => {
+    render(
+      <PromotionCard {...props}>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByText(props.title).tagName).toEqual("H2");
+  });
+
+  it("should change heading tag depending on 'titleTag' prop", () => {
+    render(
+      <PromotionCard {...props} titleTag="h3">
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByText(props.title).tagName).toEqual("H3");
+  });
+
+  it("should render a badge", () => {
+    render(
+      <PromotionCard {...props} badgeText="Campaign">
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByTestId("badgeWrapper")).toBeInTheDocument();
+  });
+
+  it("should render without badge", () => {
+    render(
+      <PromotionCard {...props}>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.queryByTestId("badgeWrapper")).not.toBeInTheDocument();
+  });
+
+  it("should render with an image and an alt text", () => {
+    render(
+      <PromotionCard
+        {...props}
+        productImage={<img alt="nice placeholder" src="https://via.placeholder.com/150" />}
+      >
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByAltText("nice placeholder")).toBeInTheDocument();
+    expect(screen.getByRole("img")).toBeInTheDocument();
+  });
+
+  it("should render without image", () => {
+    render(
+      <PromotionCard {...props}>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  });
+
+  it("should render with image gradient", () => {
+    render(
+      <PromotionCard
+        {...props}
+        decorativeImage={<img alt="fin placeholder bild" src="https://via.placeholder.com/150" />}
+        hasGradient
+      >
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.getByTestId("promotion-card-gradient")).toBeInTheDocument();
+  });
+
+  it("should render without image gradient if it doesn't have an image", () => {
+    render(
+      <PromotionCard {...props} hasGradient>
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
+  });
+
+  it("should render without image gradient if 'hasGradient' isn't set", () => {
+    render(
+      <PromotionCard
+        {...props}
+        decorativeImage={<img alt="fin placeholder bild" src="https://via.placeholder.com/150" />}
+      >
+        <div />
+      </PromotionCard>
+    );
+
+    expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
+  });
+});