@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/BlockAction/tests/BlockAction.conformance.test.js

@@ -0,0 +1,117 @@
+// TODO: Uncomment the tests below when the components are ready for conformance testing.
+// import { render } from "@testing-library/react";
+// import { axe } from "jest-axe";
+
+// import { Bar, BarItem } from "../../Bar";
+// import { Button } from "../../Button";
+// import { Card, CardSection } from "../../Card";
+// import { Icon } from "../../Icon";
+// import { Link } from "../../Link";
+// import List, { ListItem } from "../../List";
+// import BlockAction, {
+//   BlockActionControl,
+//   BlockActionIndicator,
+//   BlockActionOverride,
+// } from "../";
+
+// const listItems = [
+//   {
+//     title: "Sem Mattis Aenean",
+//     description: "Donec id elit non mi porta gravida at eget metus.",
+//   },
+//   {
+//     title: "Malesuada Fusce Fringilla Nibh",
+//     description: "Nullam quis risus eget urna mollis ornare vel eu leo.",
+//   },
+//   {
+//     title: "Euismod Fermentum Risus",
+//     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+//   },
+// ];
+
+// const listExample = (
+//   <>
+//     <List>
+//       {listItems.map((item) => (
+//         <BlockAction key={item.title}>
+//           <ListItem>
+//             <Bar>
+//               <BarItem isFilling>
+//                 <BlockActionControl>
+//                   {}
+//                   <a href="#" className="list__control">
+//                     {item.title}
+//                   </a>
+//                 </BlockActionControl>
+//               </BarItem>
+//               <BarItem isFilling>
+//                 <p>{item.description}</p>
+//               </BarItem>
+//               <BarItem>
+//                 <BlockActionOverride>
+//                   <Button href="#" size="small">
+//                     Override
+//                   </Button>
+//                 </BlockActionOverride>
+//               </BarItem>
+//               <BarItem>
+//                 <BlockActionIndicator>
+//                   <Icon name="chevron-right" size="medium" />
+//                 </BlockActionIndicator>
+//               </BarItem>
+//             </Bar>
+//           </ListItem>
+//         </BlockAction>
+//       ))}
+//     </List>
+//   </>
+// );
+
+// const cardExample = (
+//   <BlockAction>
+//     <Card hasBorder>
+//       <CardSection>
+//         <h2>
+//           <Bar tag="span">
+//             <BarItem tag="span" isFilling>
+//               <BlockActionControl>
+//                 <Link href="#">Control anchor</Link>
+//               </BlockActionControl>
+//             </BarItem>
+//             <BarItem tag="span">
+//               <BlockActionIndicator>
+//                 <Icon name="chevron-right" size="medium" />
+//               </BlockActionIndicator>
+//             </BarItem>
+//           </Bar>
+//         </h2>
+//         <p>Aenean lacinia bibendum nulla sed consectetur.</p>
+//         <BlockActionOverride>
+//           <Button>Override button</Button>
+//         </BlockActionOverride>
+//       </CardSection>
+//     </Card>
+//   </BlockAction>
+// );
+
+// it("listExample is valid html", () => {
+//   const { container } = render(listExample);
+//   expect(container).toHTMLValidate();
+// });
+
+// it("listExample is accessible", async () => {
+//   const { container } = render(listExample);
+//   expect(await axe(container)).toHaveNoViolations();
+// });
+
+// it("cardExample is valid html", () => {
+//   const { container } = render(cardExample);
+//   expect(container).toHTMLValidate();
+// });
+
+// it("cardExample is accessible", async () => {
+//   const { container } = render(cardExample);
+//   expect(await axe(container)).toHaveNoViolations();
+// });
+
+it("should render without crashing", () => {});

package/src/components/BlockAction/tests/BlockAction.unit.test.js

@@ -0,0 +1,44 @@
+import { render } from "@testing-library/react";
+
+import { BlockAction } from "../BlockAction";
+
+describe("rendering BlockAction", () => {
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { container } = render(
+        <BlockAction>
+          <p>test</p>
+        </BlockAction>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+    });
+    it("BlockAction passes props to child", () => {
+      const { getByTestId } = render(
+        <BlockAction data-testid="test-id">
+          <p>test</p>
+        </BlockAction>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("P");
+    });
+    it("BlockAction passes class block-action", () => {
+      const { container } = render(
+        <BlockAction>
+          <p>test</p>
+        </BlockAction>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("p")).toHaveClass("block-action");
+    });
+    it("BlockAction passes data-block-action attribute", () => {
+      const { container } = render(
+        <BlockAction>
+          <p>test</p>
+        </BlockAction>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(
+        container.querySelector("p").getAttribute("data-block-action"),
+      ).toBe("true");
+    });
+  });
+});

package/src/components/BlockAction/tests/BlockActionControl.unit.test.js

@@ -0,0 +1,146 @@
+import { render, fireEvent } from "@testing-library/react";
+
+import { BlockActionControl } from "../BlockActionControl";
+import { Context } from "../Context";
+
+describe("rendering BlockActionControl", () => {
+  let isIndicating;
+  const setIsIndicating = jest.fn((val) => (isIndicating = val));
+  let isActive;
+  const setIsActive = jest.fn((val) => (isActive = val));
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { container } = render(
+        <BlockActionControl>
+          <p>test</p>
+        </BlockActionControl>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+    });
+    it("BlockActionControl passes props to child", () => {
+      const { getByTestId } = render(
+        <BlockActionControl data-testid="test-id">
+          <p>test</p>
+        </BlockActionControl>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("P");
+    });
+    it("BlockActionControl passes class block-action__control", () => {
+      const { container } = render(
+        <BlockActionControl>
+          <p>test</p>
+        </BlockActionControl>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("p")).toHaveClass("block-action__control");
+    });
+    it("isActive is set to true after mouseClick if its original value was false", () => {
+      isActive = false;
+      const { container } = render(
+        <Context.Provider
+          value={{
+            setIsActive: setIsActive,
+            isActive: isActive,
+          }}
+        >
+          <BlockActionControl>
+            <p>test</p>
+          </BlockActionControl>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      fireEvent.click(container.querySelector("p"));
+      expect(isActive).toBe(true);
+    });
+    it("isActive is set to false after mouseClick if its original value was true", () => {
+      isActive = true;
+      const { container } = render(
+        <Context.Provider
+          value={{
+            setIsActive: setIsActive,
+            isActive: isActive,
+          }}
+        >
+          <BlockActionControl>
+            <p>test</p>
+          </BlockActionControl>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      fireEvent.click(container.querySelector("p"));
+      expect(isActive).toBe(false);
+    });
+    it("isIndicating is set to true after mounseEnter", () => {
+      isIndicating = false;
+      const { container } = render(
+        <Context.Provider
+          value={{
+            setIsIndicating: setIsIndicating,
+            isIndicating: isIndicating,
+          }}
+        >
+          <BlockActionControl>
+            <p>test</p>
+          </BlockActionControl>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      fireEvent.mouseEnter(container.querySelector("p"));
+      expect(isIndicating).toBe(true);
+    });
+    it("isIndicating is set to true after focus event", () => {
+      isIndicating = false;
+      const { container } = render(
+        <Context.Provider
+          value={{
+            setIsIndicating: setIsIndicating,
+            isIndicating: isIndicating,
+          }}
+        >
+          <BlockActionControl>
+            <p>test</p>
+          </BlockActionControl>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      fireEvent.focus(container.querySelector("p"));
+      expect(isIndicating).toBe(true);
+    });
+    it("isIndicating is set to false after blur event", () => {
+      isIndicating = true;
+      const { container } = render(
+        <Context.Provider
+          value={{
+            setIsIndicating: setIsIndicating,
+            isIndicating: isIndicating,
+          }}
+        >
+          <BlockActionControl>
+            <p>test</p>
+          </BlockActionControl>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      fireEvent.blur(container.querySelector("p"));
+      expect(isIndicating).toBe(false);
+    });
+    it("isIndicating is set to false after mouseLeave", () => {
+      isIndicating = true;
+      const { container } = render(
+        <Context.Provider
+          value={{
+            setIsIndicating: setIsIndicating,
+            isIndicating: isIndicating,
+          }}
+        >
+          <BlockActionControl>
+            <p>test</p>
+          </BlockActionControl>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      fireEvent.mouseLeave(container.querySelector("p"));
+      expect(isIndicating).toBe(false);
+    });
+  });
+});

package/src/components/BlockAction/tests/BlockActionIndicator.unit.test.js

@@ -0,0 +1,68 @@
+import { render } from "@testing-library/react";
+
+import { BlockActionIndicator } from "../BlockActionIndicator";
+import { Context } from "../Context";
+
+describe("rendering BlockActionIndicator", () => {
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { container } = render(
+        <BlockActionIndicator>
+          <p>test</p>
+        </BlockActionIndicator>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+    });
+    it("BlockActionIndicator passes props to child", () => {
+      const { getByTestId } = render(
+        <BlockActionIndicator data-testid="test-id">
+          <p>test</p>
+        </BlockActionIndicator>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("P");
+    });
+    it("BlockActionIndicator passes class block-action__indicator", () => {
+      const { container } = render(
+        <BlockActionIndicator>
+          <p>test</p>
+        </BlockActionIndicator>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("p")).toHaveClass(
+        "block-action__indicator",
+      );
+    });
+    it("BlockActionIndicator passes class is-indicating when isIndicating in provider is true", () => {
+      const { container } = render(
+        <Context.Provider
+          value={{
+            isIndicating: true,
+            isActive: false,
+          }}
+        >
+          <BlockActionIndicator>
+            <p>test</p>
+          </BlockActionIndicator>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("p")).toHaveClass("is-indicating");
+    });
+    it("BlockActionIndicator passes class is-active when isActive in provider is true", () => {
+      const { container } = render(
+        <Context.Provider
+          value={{
+            isActive: true,
+            isIndicating: false,
+          }}
+        >
+          <BlockActionIndicator>
+            <p>test</p>
+          </BlockActionIndicator>
+        </Context.Provider>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("p")).toHaveClass("is-active");
+    });
+  });
+});

package/src/components/BlockAction/tests/CloneElementWithClassName.unit.test.js

@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+
+import { CloneElementWithClassName } from "../CloneElementWithClassName";
+
+describe("rendering CloneElementWithClassName", () => {
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { container } = render(
+        <CloneElementWithClassName>
+          <p>test</p>
+        </CloneElementWithClassName>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+    });
+    it("CloneElementWithClassName passes props to child", () => {
+      const { getByTestId } = render(
+        <CloneElementWithClassName data-testid="test-id">
+          <p>test</p>
+        </CloneElementWithClassName>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("P");
+    });
+    it("CloneElementWithClassName passes class to child when className is set", () => {
+      const { container } = render(
+        <CloneElementWithClassName className="test-class">
+          <p>test</p>
+        </CloneElementWithClassName>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("p")).toHaveClass("test-class");
+    });
+  });
+});

package/src/components/BodyBanner/BodyBanner.mdx

@@ -0,0 +1,268 @@
+---
+title: BodyBanner
+description: A versatile banner component for displaying content with images and call-to-action buttons
+---
+
+import { BodyBanner } from './BodyBanner';
+import { BodyBannerClientWrapper } from '../../app/components/body-banner/BodyBannerClientWrapper';
+
+# BodyBanner
+
+The BodyBanner component is a flexible banner that displays content with optional images and call-to-action buttons. It supports different sizes, color schemes, and layouts.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `"small" \| "large"` | Yes | - | Size variant of the banner |
+| `colorScheme` | `"light" \| "dark"` | Yes | - | Color scheme for the entire banner |
+| `color` | `"gray" \| "orange"` | No | - | Background color variant |
+| `className` | `string` | No | - | Additional CSS classes |
+| `imageUrl` | `string` | No | - | URL of the banner image |
+| `title` | `string` | No | - | Banner title |
+| `description` | `string` | No | - | Banner description text |
+| `buttonText` | `string` | No | - | Text for the call-to-action button |
+
+## Size Variants
+
+### Small Banner
+
+The small banner displays content in a compact layout with the image positioned above the text content.
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    title="Small Banner Example"
+    description="This is a small banner with compact layout and image positioned above the content."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  title="Small Banner Example"
+  description="This is a small banner with compact layout and image positioned above the content."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Large Banner
+
+The large banner displays content in a two-column layout with the image positioned beside the text content.
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="large"
+    title="Large Banner Example"
+    description="This is a large banner with two-column layout and image positioned beside the content."
+    buttonText="Get Started"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="large"
+  title="Large Banner Example"
+  description="This is a large banner with two-column layout and image positioned beside the content."
+  buttonText="Get Started"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Color Schemes
+
+### Light Color Scheme
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    title="Light Banner"
+    description="This banner uses a light color scheme."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  title="Light Banner"
+  description="This banner uses a light color scheme."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Dark Color Scheme
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="dark"
+    title="Dark Banner"
+    description="This banner uses a dark color scheme."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="dark"
+  title="Dark Banner"
+  description="This banner uses a dark color scheme."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Color Variants
+
+### Gray Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    color="gray"
+    title="Gray Banner"
+    description="This banner has a gray background color."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  color="gray"
+  title="Gray Banner"
+  description="This banner has a gray background color."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Orange Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    color="orange"
+    title="Orange Banner"
+    description="This banner has an orange background color."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  color="orange"
+  title="Orange Banner"
+  description="This banner has an orange background color."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Combined Examples
+
+### Large Dark Banner with Orange Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="large"
+    colorScheme="dark"
+    color="orange"
+    title="Large Dark Orange Banner"
+    description="This is a large banner with dark color scheme and orange background."
+    buttonText="Get Started"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="large"
+  colorScheme="dark"
+  color="orange"
+  title="Large Dark Orange Banner"
+  description="This is a large banner with dark color scheme and orange background."
+  buttonText="Get Started"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Small Light Banner with Gray Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    color="gray"
+    title="Small Light Gray Banner"
+    description="This is a small banner with light color scheme and gray background."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  color="gray"
+  title="Small Light Gray Banner"
+  description="This is a small banner with light color scheme and gray background."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Banner Without Image
+
+You can also use the BodyBanner without an image:
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    title="Banner Without Image"
+    description="This banner doesn't include an image, focusing purely on the text content and call-to-action."
+    buttonText="Learn More"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  title="Banner Without Image"
+  description="This banner doesn't include an image, focusing purely on the text content and call-to-action."
+  buttonText="Learn More"
+/>
+```
+
+## Usage Guidelines
+
+- Use **small** banners for compact content displays or when space is limited
+- Use **large** banners for prominent content that needs more visual impact
+- The **colorScheme** prop is required and determines the overall color scheme (light/dark)
+- Choose **light** color scheme for better readability on light backgrounds
+- Choose **dark** color scheme for better contrast on dark backgrounds
+- The **color** prop provides additional background color options (gray, orange)
+- Always provide meaningful `alt` text for images through the Image component
+- Ensure button text is clear and actionable
+- Consider the content hierarchy when choosing between title and description text