@purpurds/content-block 5.9.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-content-block_1c7ua_1{display:flex;flex-direction:column;align-items:flex-start;gap:var(--purpur-spacing-400)}@media (min-width: 1024px){._purpur-content-block_1c7ua_1{align-items:center;flex-direction:row;gap:var(--purpur-spacing-300)}._purpur-content-block_1c7ua_1:nth-child(2n){flex-direction:row-reverse}}@media (min-width: 1024px){._purpur-content-block_1c7ua_1 ._purpur-content-block__section_1c7ua_18{width:50%}}._purpur-content-block_1c7ua_1 ._purpur-content-block__image-wrapper_1c7ua_22{width:100%}._purpur-content-block_1c7ua_1 ._purpur-content-block__video-wrapper_1c7ua_25 video,._purpur-content-block_1c7ua_1 ._purpur-content-block__image-wrapper_1c7ua_22 img{border-radius:var(--purpur-border-radius-md)}@media (min-width: 600px){._purpur-content-block_1c7ua_1 ._purpur-content-block__video-wrapper_1c7ua_25 video,._purpur-content-block_1c7ua_1 ._purpur-content-block__image-wrapper_1c7ua_22 img{border-radius:var(--purpur-border-radius-lg)}}._purpur-content-block_1c7ua_1 ._purpur-content-block__content-wrapper_1c7ua_35{display:flex;flex-direction:column;gap:var(--purpur-spacing-150)}._purpur-content-block_1c7ua_1 ._purpur-content-block__badge_1c7ua_40{width:fit-content}._purpur-content-block_1c7ua_1 ._purpur-content-block__content_1c7ua_35{max-width:40rem}._purpur-content-block_1c7ua_1 ._purpur-content-block__usp-list_1c7ua_46{margin:0;padding:0;list-style:none}._purpur-content-block_1c7ua_1 ._purpur-content-block__usp-list-item_1c7ua_51{display:flex;align-items:center;justify-content:left}._purpur-content-block_1c7ua_1 ._purpur-content-block__usp-list-item_1c7ua_51:not(:last-child){margin-bottom:var(--purpur-spacing-100)}._purpur-content-block_1c7ua_1 ._purpur-content-block__usp-list-item-icon_1c7ua_59{margin-right:var(--purpur-spacing-50)}._purpur-content-block_1c7ua_1 ._purpur-content-block__links_1c7ua_62{margin-top:var(--purpur-spacing-250);display:flex;flex-direction:column;gap:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-content-block_1c7ua_1 ._purpur-content-block__links_1c7ua_62{flex-direction:row}}._purpur-content-block--negative_1c7ua_73 ._purpur-content-block__text-spacing_1c7ua_73 p{color:var(--purpur-color-text-default-negative)}._purpur-content-block--negative_1c7ua_73 ._purpur-content-block__usp-list-item-icon_1c7ua_59 svg{fill:var(--purpur-color-text-default-negative)}._purpur-content-block-group_1g4rh_1{display:flex;flex-direction:column;gap:var(--purpur-spacing-1200);padding:var(--purpur-spacing-600) 0}@media (min-width: 600px){._purpur-content-block-group_1g4rh_1{gap:var(--purpur-spacing-1600);padding:var(--purpur-spacing-800) 0}}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@purpurds/content-block",
+  "version": "5.9.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/content-block.cjs.js",
+  "types": "./dist/content-block.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/content-block.cjs.js",
+      "types": "./dist/content-block.d.ts",
+      "default": "./dist/content-block.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/content-block.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/badge": "5.11.2",
+    "@purpurds/grid": "5.11.2",
+    "@purpurds/cta-link": "5.11.2",
+    "@purpurds/icon": "5.11.2",
+    "@purpurds/heading": "5.11.2",
+    "@purpurds/paragraph": "5.11.2",
+    "@purpurds/tokens": "5.11.2"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "^8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
+    "vitest": "~1.5.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/content-block-group.module.scss

@@ -0,0 +1,13 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-content-block-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-1200);
+  padding: var(--purpur-spacing-600) 0;
+
+  @media (min-width: $purpur-breakpoint-md) {
+    gap: var(--purpur-spacing-1600);
+    padding: var(--purpur-spacing-800) 0;
+  }
+}

package/src/content-block-group.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ContentBlock } from "./content-block";
+import { ContentBlockGroup } from "./content-block-group";
+
+expect.extend(matchers);
+
+const mockData = {
+  title: "Title goes here lorem ipsum",
+  usp: ["List item 1", "List item 2"],
+  imgUrl: "https://www.telia.se/images",
+  imgAltText: "test image",
+  ctas: [
+    {
+      href: "/test",
+      text: "CTA link 1",
+    },
+    {
+      href: "/test2",
+      text: "CTA link 2",
+    },
+  ],
+  content: "Test text content",
+  videoUrl: "https://www.telia.se/video.mp4",
+  videoPosterImgUrl: "https://www.telia.se/image.png",
+};
+
+const setup = () =>
+  render(
+    <ContentBlockGroup>
+      <ContentBlock title={mockData.title} usp={mockData.usp} ctas={mockData.ctas}>
+        {mockData.content}
+      </ContentBlock>
+      <ContentBlock title="test" headingTag="h1" usp={mockData.usp} ctas={mockData.ctas}>
+        {mockData.content}
+      </ContentBlock>
+    </ContentBlockGroup>
+  );
+
+describe("ContentBlockGroup", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  it("should render both content blocks and its titles", () => {
+    setup();
+
+    expect(screen.getByRole("heading", { level: 2, name: mockData.title }));
+    expect(screen.getByRole("heading", { level: 1, name: "test" }));
+  });
+});

package/src/content-block-group.tsx

@@ -0,0 +1,47 @@
+import React, { Children, DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import c from "classnames/bind";
+
+import { ContentBlockProps } from "./content-block";
+import styles from "./content-block-group.module.scss";
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-content-block-group";
+
+export type ContentBlockGroupProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  children: ReactNode;
+  negative?: boolean;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export const ContentBlockGroup = ({
+  children,
+  className,
+  negative,
+  ["data-testid"]: dataTestId,
+  ...props
+}: ContentBlockGroupProps) => {
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}--negative`]: negative,
+    },
+  ]);
+
+  const renderChildren = () =>
+    Children.map(children, (child) => {
+      if (React.isValidElement<ContentBlockProps>(child)) {
+        return React.cloneElement(child, { negative });
+      }
+      return child;
+    });
+
+  return (
+    <div className={classes} data-testid={dataTestId} {...props}>
+      {renderChildren()}
+    </div>
+  );
+};
+
+ContentBlockGroup.displayName = "ContentBlockGroup";

package/src/content-block.module.scss

@@ -0,0 +1,93 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-content-block {
+  $root: &;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--purpur-spacing-400);
+
+  @media (min-width: $purpur-breakpoint-lg) {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--purpur-spacing-300);
+
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  #{$root}__section {
+    @media (min-width: $purpur-breakpoint-lg) {
+      width: 50%;
+    }
+  }
+
+  #{$root}__image-wrapper {
+    width: 100%;
+  }
+
+  #{$root}__video-wrapper video,
+  #{$root}__image-wrapper img {
+    border-radius: var(--purpur-border-radius-md);
+
+    @media (min-width: $purpur-breakpoint-md) {
+      border-radius: var(--purpur-border-radius-lg);
+    }
+  }
+
+  #{$root}__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-150);
+  }
+
+  #{$root}__badge {
+    width: fit-content;
+  }
+
+  #{$root}__content {
+    max-width: 40rem;
+  }
+
+  #{$root}__usp-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  #{$root}__usp-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    &:not(:last-child) {
+      margin-bottom: var(--purpur-spacing-100);
+    }
+  }
+
+  #{$root}__usp-list-item-icon {
+    margin-right: var(--purpur-spacing-50);
+  }
+
+  #{$root}__links {
+    margin-top: var(--purpur-spacing-250);
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-200);
+
+    @media (min-width: $purpur-breakpoint-md) {
+      flex-direction: row;
+    }
+  }
+
+  &--negative {
+    #{$root}__text-spacing p {
+      color: var(--purpur-color-text-default-negative);
+    }
+
+    #{$root}__usp-list-item-icon svg {
+      fill: var(--purpur-color-text-default-negative);
+    }
+  }
+}

package/src/content-block.stories.tsx

@@ -0,0 +1,219 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+
+import React from "react";
+import { HeadingTag, TitleVariant } from "@purpurds/heading";
+import { Paragraph } from "@purpurds/paragraph";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/cta-link/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/badge/styles";
+import "@purpurds/icon/styles";
+import { ContentBlock } from "./content-block";
+import { ContentBlockGroup as ContentBlockGroupComponent } from "./content-block-group";
+
+const mockData = [
+  {
+    id: "1",
+    content:
+      "Body text lorem ipsum dolor sit amet consectetur. At velit mi ultricies in orci est condimentum. Et venenatis fringilla vel dictum. Diam mattis ut hac dui lacus.",
+    title: "Title goes here lorem ipsum",
+    tagline: "Badge label",
+    usp: ["List item 1", "List item 2", "List item 3"],
+    imgUrl:
+      "https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg",
+    altText: "Familjens unga ser på tv tillsammans mysig stämning men spännande.",
+    callToAction: [
+      {
+        href: "/test",
+        text: "CTA link text",
+      },
+      {
+        href: "/test2",
+        text: "CTA link text",
+      },
+    ],
+  },
+  {
+    id: "2",
+    content:
+      "Body text lorem ipsum dolor sit amet consectetur. At velit mi ultricies in orci est condimentum. Et venenatis fringilla vel dictum. Diam mattis ut hac dui lacus.",
+    title: "Title goes here lorem ipsum",
+    tagline: undefined,
+    imgUrl:
+      "https://www.telia.se/images/i15skfqwpurk/6QB5jxWQfeES4NN279kSYY/604e28cbc2fffb5e77bb0f978ec689d4/Telia_Company_071.jpg",
+    altText: "Manager i rutig kavaj skriver på laptop med whiteboard i bakgrunden.",
+    callToAction: [],
+  },
+  {
+    id: "3",
+    content:
+      "Body text lorem ipsum dolor sit amet consectetur. At velit mi ultricies in orci est condimentum. Et venenatis fringilla vel dictum. Diam mattis ut hac dui lacus.",
+    title: "Title goes here lorem ipsum",
+    tagline: undefined,
+    videoUrl:
+      "https://www.telia.se/videos/i15skfqwpurk/1HSDMQWf6TwfcCgtHCbi5w/f57ba932da3c3587cd1af11697ac265a/TSC_MobilVaxel_16x9_K2-2.mp4",
+    videoPosterImgUrl:
+      "https://www.telia.se/images/i15skfqwpurk/5p8TxmyWh57hZzgSoKxPmp/7177d8e471a4bef04c2526483fb84372/Telia_Smart_Connect_Video_Poster_Image.png",
+    callToAction: [],
+  },
+];
+
+const meta = {
+  title: "Components/ContentBlock",
+  component: ContentBlock,
+  parameters: {
+    design: [
+      {
+        name: "ContentBlock",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=33776-10598&t=iXwBPd5zGeNrD5Ou-0",
+      },
+    ],
+  },
+  argTypes: {
+    headingTag: {
+      control: "select",
+      options: Object.values(HeadingTag),
+      table: {
+        type: {
+          summary: Object.values(HeadingTag)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+    headingVariant: {
+      control: "select",
+      options: Object.values(TitleVariant),
+      table: {
+        type: {
+          summary: Object.values(TitleVariant)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof ContentBlock>;
+
+export default meta;
+type Story = StoryObj<typeof ContentBlock>;
+
+export const Showcase: Story = {
+  args: {
+    negative: false,
+    ctas: mockData[0].callToAction,
+    title: mockData[0].title,
+    children: mockData[0].content,
+    image: (
+      <img
+        style={{
+          width: "100%",
+          objectFit: "cover",
+        }}
+        src={mockData[0].imgUrl}
+        alt={mockData[0].altText || ""}
+      />
+    ),
+    tagline: mockData[0].tagline,
+    usp: mockData[0].usp,
+  },
+  render: ({ children, ...args }) => (
+    <div
+      style={{
+        padding: "var(--purpur-spacing-250)",
+        background: args.negative ? "var(--purpur-color-purple-900)" : "transparent",
+      }}
+    >
+      <ContentBlock {...args}>
+        <Paragraph negative={args.negative} variant="paragraph-100">
+          {children}
+        </Paragraph>
+      </ContentBlock>
+    </div>
+  ),
+};
+
+export const VideoContent: Story = {
+  args: {
+    negative: false,
+    ctas: mockData[0].callToAction,
+    title: mockData[0].title,
+    children: mockData[0].content,
+    video: (
+      <video
+        style={{ width: "100%" }}
+        controls
+        src={mockData[2].videoUrl}
+        poster={mockData[2].videoPosterImgUrl}
+      />
+    ),
+    tagline: mockData[0].tagline,
+    usp: mockData[0].usp,
+  },
+  render: ({ children, ...args }) => (
+    <div
+      style={{
+        padding: "var(--purpur-spacing-250)",
+        background: args.negative ? "var(--purpur-color-purple-900)" : "transparent",
+      }}
+    >
+      <ContentBlock {...args}>
+        <Paragraph negative={args.negative} variant="paragraph-100">
+          {children}
+        </Paragraph>
+      </ContentBlock>
+    </div>
+  ),
+};
+
+export const ContentBlockGroup: Story = {
+  render: ({ negative }) => (
+    <div
+      style={{
+        padding: "var(--purpur-spacing-250)",
+        background: negative ? "var(--purpur-color-purple-900)" : "transparent",
+      }}
+    >
+      <ContentBlockGroupComponent negative={negative}>
+        {mockData.map((item) => (
+          <ContentBlock
+            key={item.id}
+            negative={negative}
+            ctas={item.callToAction}
+            title={item.title}
+            tagline={item.tagline}
+            usp={item.usp}
+            image={
+              item.imgUrl ? (
+                <img
+                  style={{
+                    width: "100%",
+                    objectFit: "cover",
+                  }}
+                  src={item.imgUrl}
+                  alt={item.altText}
+                />
+              ) : undefined
+            }
+            video={
+              item.videoUrl ? (
+                <video
+                  style={{ width: "100%" }}
+                  controls
+                  src={item.videoUrl}
+                  poster={item.videoPosterImgUrl}
+                />
+              ) : undefined
+            }
+          >
+            <Paragraph negative={negative} variant="paragraph-100">
+              {item.content}
+            </Paragraph>
+          </ContentBlock>
+        ))}
+      </ContentBlockGroupComponent>
+    </div>
+  ),
+};

package/src/content-block.test.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable jsx-a11y/media-has-caption, react/jsx-wrap-multilines */
+
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ContentBlock } from "./content-block";
+
+expect.extend(matchers);
+
+const mockData = {
+  title: "Title goes here lorem ipsum",
+  usp: ["List item 1", "List item 2"],
+  imgUrl: "https://www.telia.se/images",
+  imgAltText: "test image",
+  ctas: [
+    {
+      href: "/test",
+      text: "CTA link 1",
+    },
+    {
+      href: "/test2",
+      text: "CTA link 2",
+    },
+  ],
+  content: "Test text content",
+  videoUrl: "https://www.telia.se/video.mp4",
+  videoPosterImgUrl: "https://www.telia.se/image.png",
+};
+
+const setup = () =>
+  render(
+    <ContentBlock
+      title={mockData.title}
+      usp={mockData.usp}
+      image={
+        <img
+          style={{
+            width: "100%",
+            objectFit: "cover",
+          }}
+          src={mockData.imgUrl}
+          alt={mockData.imgAltText}
+        />
+      }
+      ctas={mockData.ctas}
+    >
+      {mockData.content}
+    </ContentBlock>
+  );
+
+describe("ContentBlock", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  it("should render title", () => {
+    setup();
+
+    expect(screen.getByRole("heading", { level: 2, name: mockData.title }));
+  });
+
+  it("should render usp list", () => {
+    setup();
+
+    expect(screen.getByRole("list")).toBeInTheDocument();
+
+    const listItems = screen.getAllByRole("listitem");
+    expect(listItems).toHaveLength(mockData.usp.length);
+
+    listItems.forEach((item, index) => {
+      expect(item).toHaveTextContent(mockData.usp[index]);
+    });
+  });
+
+  it("should render ctas", () => {
+    setup();
+
+    mockData.ctas.forEach((cta) => {
+      const link = screen.getByRole("link", { name: cta.text });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute("href", cta.href);
+    });
+  });
+
+  it("should render richText content", () => {
+    setup();
+
+    screen.getByText(mockData.content);
+  });
+
+  it("should render image", () => {
+    setup();
+
+    const img = screen.getByAltText(mockData.imgAltText);
+    expect(img).toBeInTheDocument();
+
+    expect(img).toHaveAttribute("src", mockData.imgUrl);
+  });
+
+  it("should render video", () => {
+    render(
+      <ContentBlock
+        title={mockData.title}
+        usp={mockData.usp}
+        ctas={mockData.ctas}
+        video={
+          <video
+            data-testid="content-block-video"
+            controls
+            src={mockData.videoUrl}
+            poster={mockData.videoPosterImgUrl}
+          />
+        }
+        data-testid="content-block"
+      >
+        {mockData.content}
+      </ContentBlock>
+    );
+
+    const img = screen.queryByAltText(mockData.imgAltText);
+    // img should not exist when video is presented
+    expect(img).not.toBeInTheDocument();
+
+    const video = screen.getByTestId("content-block-video");
+    expect(video).toBeInTheDocument();
+
+    expect(video).toHaveAttribute("src", mockData.videoUrl);
+
+    expect(video).toHaveAttribute("poster", mockData.videoPosterImgUrl);
+  });
+});