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

package/src/components/Controls/tests/Controls.test.js

@@ -0,0 +1,479 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { Controls } from "../Controls";
+
+describe("Controls Component", () => {
+  // Test basic rendering with required props
+  describe("Basic Rendering", () => {
+    it("should render a button element with correct icon", () => {
+      // Test that the component renders as a button with the specified icon
+      render(<Controls icon="close" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveClass("controls");
+    });
+
+    it("should render with default styling classes", () => {
+      // Test that default CSS classes are applied correctly
+      render(<Controls icon="menu" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("controls");
+      expect(button).not.toHaveClass("controls--inverse");
+    });
+
+    it("should render with custom className", () => {
+      // Test that custom CSS classes can be added
+      render(<Controls icon="search" className="custom-class" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("controls");
+      expect(button).toHaveClass("custom-class");
+    });
+
+    it('should have type="button" by default', () => {
+      // Test that the button has type="button" by default
+      render(<Controls icon="close" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "button");
+    });
+  });
+
+  // Test colorScheme prop
+  describe("ColorScheme Prop", () => {
+    it('should apply dark styling when colorScheme is "dark"', () => {
+      render(<Controls icon="close" colorScheme="dark" />);
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("controls");
+      expect(button).toHaveClass("is-dark");
+    });
+    it('should apply light styling when colorScheme is "light"', () => {
+      render(<Controls icon="menu" colorScheme="light" />);
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("controls");
+      expect(button).toHaveClass("is-light");
+    });
+    it("should not apply dark or light styling when colorScheme is undefined", () => {
+      render(<Controls icon="search" />);
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("controls");
+      expect(button).not.toHaveClass("is-dark");
+      expect(button).not.toHaveClass("is-light");
+    });
+  });
+
+  // Test different icon types
+  describe("Icon Types", () => {
+    it("should render with close icon", () => {
+      // Test rendering with close icon
+      render(<Controls icon="close" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with menu icon", () => {
+      // Test rendering with menu icon
+      render(<Controls icon="menu" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with search icon", () => {
+      // Test rendering with search icon
+      render(<Controls icon="search" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with chevron-down icon", () => {
+      // Test rendering with chevron-down icon
+      render(<Controls icon="chevron-down" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with chevron-up icon", () => {
+      // Test rendering with chevron-up icon
+      render(<Controls icon="chevron-up" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with chevron-left icon", () => {
+      // Test rendering with chevron-left icon
+      render(<Controls icon="chevron-left" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with chevron-right icon", () => {
+      // Test rendering with chevron-right icon
+      render(<Controls icon="chevron-right" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  // Test button functionality
+  describe("Button Functionality", () => {
+    it("should be clickable and trigger onClick handler", () => {
+      // Test that the button can be clicked and triggers the onClick handler
+      const handleClick = jest.fn();
+      render(<Controls icon="close" onClick={handleClick} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should be focusable", () => {
+      // Test that the button can receive focus
+      render(<Controls icon="menu" />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      expect(button).toHaveFocus();
+    });
+
+    it("should be keyboard accessible", async () => {
+      // Test that the button responds to keyboard events
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+      render(<Controls icon="search" onClick={handleClick} />);
+
+      const button = screen.getByRole("button");
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should support Enter key press", async () => {
+      // Test that Enter key triggers the onClick handler
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+      render(<Controls icon="close" onClick={handleClick} />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+      await user.keyboard("{Enter}");
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should support Space key press", async () => {
+      // Test that Space key triggers the onClick handler
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+      render(<Controls icon="menu" onClick={handleClick} />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+      await user.keyboard(" ");
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Test disabled state
+  describe("Disabled State", () => {
+    it("should be disabled when isDisabled prop is true", () => {
+      // Test that the button is disabled when isDisabled prop is true
+      render(<Controls icon="close" isDisabled />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+
+    it("should not be disabled when isDisabled prop is false", () => {
+      // Test that the button is not disabled when isDisabled prop is false
+      render(<Controls icon="menu" isDisabled={false} />);
+
+      const button = screen.getByRole("button");
+      expect(button).not.toBeDisabled();
+    });
+
+    it("should not trigger onClick when disabled", () => {
+      // Test that onClick is not triggered when button is disabled
+      const handleClick = jest.fn();
+      render(<Controls icon="search" isDisabled onClick={handleClick} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it("should have aria-disabled attribute when disabled", () => {
+      // Test that disabled button has aria-disabled attribute
+      render(<Controls icon="close" isDisabled />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should not have aria-disabled attribute when not disabled", () => {
+      // Test that non-disabled button does not have aria-disabled attribute
+      render(<Controls icon="menu" isDisabled={false} />);
+
+      const button = screen.getByRole("button");
+      expect(button).not.toHaveAttribute("aria-disabled");
+    });
+  });
+
+  // Test ref functionality
+  describe("Ref Functionality", () => {
+    it("should support elemRef prop", () => {
+      // Test that elemRef prop works correctly
+      const elemRef = React.createRef();
+      render(<Controls icon="close" elemRef={elemRef} />);
+
+      const button = screen.getByRole("button");
+      expect(elemRef.current).toBe(button);
+    });
+
+    it("should support forwardRef", () => {
+      // Test that forwardRef works correctly
+      const ref = React.createRef();
+      render(<Controls icon="menu" ref={ref} />);
+
+      const button = screen.getByRole("button");
+      expect(ref.current).toBe(button);
+    });
+
+    it("should prioritize elemRef over forwardRef", () => {
+      // Test that elemRef takes priority over forwardRef
+      const elemRef = React.createRef();
+      const forwardRef = React.createRef();
+      render(<Controls icon="search" elemRef={elemRef} ref={forwardRef} />);
+
+      const button = screen.getByRole("button");
+      expect(elemRef.current).toBe(button);
+      expect(forwardRef.current).toBeNull();
+    });
+  });
+
+  // Test accessibility
+  describe("Accessibility", () => {
+    it("should have proper ARIA attributes", () => {
+      // Test that the button has proper ARIA attributes
+      render(<Controls icon="close" aria-label="Close dialog" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-label", "Close dialog");
+    });
+
+    it("should support aria-describedby", () => {
+      // Test that the button supports aria-describedby attribute
+      render(<Controls icon="menu" aria-describedby="menu-description" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-describedby", "menu-description");
+    });
+
+    it("should support aria-expanded for toggle controls", () => {
+      // Test that the button supports aria-expanded for toggle functionality
+      render(<Controls icon="chevron-down" aria-expanded="false" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("should support aria-pressed for toggle controls", () => {
+      // Test that the button supports aria-pressed for toggle functionality
+      render(<Controls icon="star" aria-pressed="false" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-pressed", "false");
+    });
+
+    it("should support aria-controls for controlling other elements", () => {
+      // Test that the button supports aria-controls for controlling other elements
+      render(<Controls icon="menu" aria-controls="navigation-menu" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-controls", "navigation-menu");
+    });
+  });
+
+  // Test different button types
+  describe("Button Types", () => {
+    it("should support submit type", () => {
+      // Test that the button can be rendered as submit type
+      render(<Controls icon="check" type="submit" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "submit");
+    });
+
+    it("should support reset type", () => {
+      // Test that the button can be rendered as reset type
+      render(<Controls icon="refresh" type="reset" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "reset");
+    });
+  });
+
+  // Test form integration
+  describe("Form Integration", () => {
+    it("should work within a form context", () => {
+      // Test that the button works properly within a form
+      const handleSubmit = jest.fn((e) => e.preventDefault());
+
+      render(
+        <form onSubmit={handleSubmit}>
+          <Controls icon="check" type="submit" />
+        </form>,
+      );
+
+      const button = screen.getByRole("button");
+      fireEvent.submit(button.closest("form"));
+
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it("should support form attribute", () => {
+      // Test that the button supports form attribute
+      render(<Controls icon="submit" form="my-form" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("form", "my-form");
+    });
+  });
+
+  // Test event handling
+  describe("Event Handling", () => {
+    it("should handle onFocus event", () => {
+      // Test that the button handles onFocus event
+      const handleFocus = jest.fn();
+      render(<Controls icon="close" onFocus={handleFocus} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.focus(button);
+
+      expect(handleFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle onBlur event", () => {
+      // Test that the button handles onBlur event
+      const handleBlur = jest.fn();
+      render(<Controls icon="menu" onBlur={handleBlur} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.blur(button);
+
+      expect(handleBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle onMouseEnter event", () => {
+      // Test that the button handles onMouseEnter event
+      const handleMouseEnter = jest.fn();
+      render(<Controls icon="search" onMouseEnter={handleMouseEnter} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.mouseEnter(button);
+
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle onMouseLeave event", () => {
+      // Test that the button handles onMouseLeave event
+      const handleMouseLeave = jest.fn();
+      render(<Controls icon="close" onMouseLeave={handleMouseLeave} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.mouseLeave(button);
+
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle onKeyDown event", () => {
+      // Test that the button handles onKeyDown event
+      const handleKeyDown = jest.fn();
+      render(<Controls icon="menu" onKeyDown={handleKeyDown} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.keyDown(button, { key: "Tab" });
+
+      expect(handleKeyDown).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Test edge cases
+  describe("Edge Cases", () => {
+    it("should handle empty icon name gracefully", () => {
+      // Test that the component handles empty icon name gracefully
+      render(<Controls icon="" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should handle very long icon names", () => {
+      // Test that the component handles very long icon names
+      const longIconName = "a".repeat(100);
+      render(<Controls icon={longIconName} />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should handle special characters in icon names", () => {
+      // Test that the component handles special characters in icon names
+      render(<Controls icon="icon-with-special-chars-@#$%" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should handle multiple className values", () => {
+      // Test that the component handles multiple className values
+      render(<Controls icon="close" className="class1 class2 class3" />);
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("controls");
+      expect(button).toHaveClass("class1");
+      expect(button).toHaveClass("class2");
+      expect(button).toHaveClass("class3");
+    });
+
+    it("should handle all HTML button attributes", () => {
+      // Test that the component handles all HTML button attributes
+      render(
+        <Controls
+          icon="close"
+          name="test-button"
+          value="test-value"
+          autoFocus
+          data-testid="test-controls"
+        />,
+      );
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("name", "test-button");
+      expect(button).toHaveAttribute("value", "test-value");
+      expect(button).toHaveAttribute("data-testid", "test-controls");
+    });
+  });
+
+  // Test component display name
+  describe("Component Metadata", () => {
+    it("should have correct display name", () => {
+      // Test that the component has the correct display name
+      expect(Controls.displayName).toBe("Controls");
+    });
+  });
+});

package/src/components/Cover/Cover.mdx

@@ -0,0 +1,87 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+import Cover from './Cover';
+
+# Cover
+
+Image overlaid with content.
+
+<Preview>
+  <Cover bgSrc="https://placehold.co/800x300">
+    <h2>Heading</h2>
+  </Cover>
+</Preview>
+
+## Responsive srcset
+
+You can image sources by breakpoints. This is a best practice for designing for
+mobile devices. Making sure small devices get small images. We don't want to
+use more bandwidth if not necessary
+
+<Preview>
+  <Cover
+    bgSrc={{
+      default: 'https://placehold.co/800x300',
+      lg: 'https://placehold.co/2560x1000',
+      md: 'https://placehold.co/1200x500',
+    }}
+  >
+    <h2>Heading</h2>
+  </Cover>
+</Preview>
+
+## Sizes
+
+We have 3 different sizes of overlay. You can choose which one fits your usecase best.
+
+<Preview>
+  <Cover size="small" bgSrc="https://placehold.co/800x300">
+    <h2>Small</h2>
+  </Cover>
+  <hr />
+  <Cover size="medium" bgSrc="https://placehold.co/800x300">
+    <h2>Medium</h2>
+  </Cover>
+  <hr />
+  <Cover size="large" bgSrc="https://placehold.co/800x300">
+    <h2>Large</h2>
+  </Cover>
+  <hr />
+  <Cover
+    size="small"
+    bgSrc="https://placehold.co/800x300?text=800x300+small+without+content"
+  />
+  <hr />
+  <Cover
+    size="medium"
+    bgSrc="https://placehold.co/800x300?text=800x300+medium+without+content"
+  />
+  <hr />
+  <Cover
+    size="large"
+    bgSrc="https://placehold.co/800x300?text=800x300+large+without+content"
+  />
+</Preview>
+
+## Background position
+
+If you need specific area of the background image to be always visible you can
+"stick it" to that position.
+
+<Preview>
+  <Cover size="small" bgSrc="https://placehold.co/800x300">
+    <h2>Center (default)</h2>
+  </Cover>
+  <hr />
+  <Cover size="small" bgPosition="top" bgSrc="https://placehold.co/800x300">
+    <h2>Top</h2>
+  </Cover>
+  <hr />
+  <Cover size="small" bgPosition="bottom" bgSrc="https://placehold.co/800x300">
+    <h2>Bottom</h2>
+  </Cover>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Cover />" component={Cover} />

package/src/components/Cover/Cover.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { Image } from '../Image';
+
+interface CoverProps {
+  /** Background image source. URL string or an object of breakpoint: url pairs
+   * 
+   * ```
+{
+  default: string, // default image to load (fallback)
+  xxxl: string, // different image for each breakpoint (optional). while these are mobile first breakpoints, they MUST be ordered from largest to smallest 
+  xxl: string,
+  xl: string,
+  lg: string,
+  md: string,
+  sm: string,
+  xs: string,
+}
+  * ```
+  */
+  bgSrc: string | {
+    default: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    xxxl?: string;
+  };
+  /** Set vertical position of image */
+  bgPosition?: 'top' | 'center' | 'bottom';
+  /** Applies custom classNames to overlay content */
+  contentClass?: string;
+  /** Cover size */
+  size?: 'small' | 'medium' | 'large';
+  /** Additional className for the cover container */
+  className?: string;
+  /** Children content */
+  children?: React.ReactNode;
+  /** Additional props passed to Image component */
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'cover';
+
+const Cover: React.FC<CoverProps> = ({
+  className,
+  children,
+  contentClass,
+  bgPosition = 'center',
+  bgSrc,
+  size,
+  ...other
+}) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${size}`]: size,
+    },
+    className
+  );
+
+  const contentClasses = cx(`${CLASS_ROOT}__content`, contentClass);
+
+  const bgImgClassName = cx(`${CLASS_ROOT}__image`, {
+    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== 'center',
+  });
+
+  return (
+    <div className={classes}>
+      {children && <div className={contentClasses}>{children}</div>}
+      <Image src={bgSrc} className={bgImgClassName} alt="" {...other} />
+    </div>
+  );
+};
+
+Cover.displayName = 'Cover';
+
+export { Cover };

package/src/components/Cover/index.ts

@@ -0,0 +1,5 @@
+import { Cover } from './Cover';
+
+import './styles/style.scss';
+
+export { Cover };