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

package/src/components/IconList/tests/Item.unit.test.js

@@ -0,0 +1,143 @@
+import { render } from "@testing-library/react";
+
+// Mock Tooltip komponent
+jest.mock("../../Tooltip", () => ({
+  InfoTooltip: ({ children, placement, className = "", ...props }) => (
+    <span
+      className={`tooltip ${className}`.trim()}
+      data-tooltip-placement={placement}
+      {...props}
+    >
+      <svg className="bold" />
+      {children}
+    </span>
+  ),
+}));
+
+import { Item } from "../Item";
+
+describe("rendering Item", () => {
+  describe("initial state", () => {
+    it("child div has default class icon-list__content", () => {
+      const { container } = render(
+        <>
+          <div id="root">
+            <Item icon="test-name">test</Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      expect(container.querySelector("li").querySelector("div")).toHaveClass(
+        "icon-list__content",
+      );
+    });
+    it("icon has additional class icon-list__icon", () => {
+      const { container } = render(
+        <>
+          <div id="root">
+            <Item icon="test-name">test</Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      expect(container.querySelector("svg")).toHaveClass("icon-list__icon");
+    });
+    it("icon has additional class icon--medium", () => {
+      const { container } = render(
+        <>
+          <div id="root">
+            <Item icon="test-name">test</Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      expect(container.querySelector("svg")).toHaveClass("icon--medium");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(
+        <>
+          <div id="root">
+            <Item data-testid="test-id" id="test" icon="test-name">
+              test
+            </Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("passes other props", () => {
+      const { getByTestId } = render(
+        <>
+          <div id="root">
+            <Item data-testid="test-id" icon="test-name">
+              test
+            </Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      expect(getByTestId("test-id")).toBeInTheDocument();
+    });
+    it("use element has /sprite.svg#test-name xlinkhref when icon prop is set to test-name", () => {
+      const { container } = render(
+        <>
+          <div id="root">
+            <Item icon="test-name">test</Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      const use = container.querySelector("use");
+      expect(use.getAttribute("xlink:href")).toEqual("/sprite.svg#test-name");
+    });
+    it("tooltip prop is rendered", () => {
+      const { getByText } = render(
+        <>
+          <div id="root">
+            <Item tooltip={<p>test-tooltip</p>} icon="test-name">
+              test
+            </Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      expect(getByText("test-tooltip")).toBeInTheDocument();
+    });
+    it("svg element with class bold is rendered inside InfoTooltip component", () => {
+      const { container } = render(
+        <>
+          <div id="root">
+            <Item tooltip={<p>test-tooltip</p>} icon="test-name">
+              test
+            </Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      const svg = container.querySelectorAll("svg");
+      expect(svg.length).toBe(2);
+      expect(svg[1]).toHaveClass("bold");
+    });
+    it('span element with class "tooltip" rendered inside InfoTooltip component has property data-tooltip-placement="right"', () => {
+      const { container } = render(
+        <>
+          <div id="root">
+            <Item tooltip="test-tooltip" icon="test-name">
+              test
+            </Item>
+          </div>
+          <div id="root-tooltips" />
+        </>,
+      );
+      const tooltipElement = container.querySelector(".tooltip");
+      expect(tooltipElement).toBeInTheDocument();
+      expect(tooltipElement.getAttribute("data-tooltip-placement")).toBe(
+        "right",
+      );
+    });
+  });
+});

package/src/components/Link/styles/style.scss

@@ -2,26 +2,26 @@
 
 @layer components {
   a:not(
-      .link,
-      .btn,
-      .mm-link,
-      .list__control,
-      .tab-list__tab,
-      .stepbar__link,
-      .osk-breadcrumbs__link,
-      .skip-link,
-      .dropdown__item,
-      .carousel-promotions__slide,
-      .osk-footer a,
-      .mm-header a
-    ),
+    .link,
+    .btn,
+    .mm-link,
+    .list__control,
+    .tab-list__tab,
+    .stepbar__link,
+    .osk-breadcrumbs__link,
+    .skip-link,
+    .dropdown__item,
+    .carousel-promotions__slide,
+    .osk-footer a,
+    .mm-header a
+  ),
   .link {
     @include mixins.base();
     @include mixins.base-inherit();
 
     &:hover {
       color: var(--color-fill-tertiary);
-      text-decoration: none;
+      text-decoration: underline;
     }
     &:focus {
       outline: 2px solid var(--color-border-contrast);

package/src/components/Pagination/styles/mixins.scss

@@ -38,6 +38,6 @@
 
 @mixin link-active() {
   color: var(--color-text-inverse);
-  background-color: var(--color-background-contrast);
-  border-color: var(--color-border-contrast);
+  background-color: var(--color-surface-tertiary);
+  border-color: var(--color-border-accent);
 }

package/src/components/Preview/CodeExample.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useRef, ReactNode } from "react";
+
+import unescape from "unescape-html";
+import reactElementToJSXString from "react-element-to-jsx-string";
+import { renderToStaticMarkup } from "react-dom/server";
+import pretty from "pretty";
+
+import Code from "../Code/";
+import { Button } from "../Button";
+
+import cx from "classnames";
+
+interface CodeExampleProps {
+  codeJSXOptions?: Record<string, any>;
+  codeTypes?: string[];
+  children?: ReactNode;
+  [key: string]: any;
+}
+
+interface CodeExampleState {
+  codePreviewType: string;
+  copyButtonText: string;
+  copyButtonClass: string;
+}
+
+/**
+ * Remove props that are undefined or null
+ * Don't show React.Fragment in code example
+ */
+const cleanUpCode = (markup: any): any => {
+  const markupProps = markup.props || {};
+
+  return Object.keys(markupProps).reduce((acc: any, curr: string) => {
+    const currProp = markupProps[curr];
+
+    let newProp;
+    // clean up child code
+    if (curr === "children" && typeof currProp !== "string") {
+      newProp = React.Children.map(currProp, (child: any) => {
+        // hide fragments if containing just strings
+        const isFragmentString =
+          child.type === React.Fragment &&
+          child.props &&
+          typeof child.props.children === "string";
+
+        return isFragmentString
+          ? child.props.children
+          : {
+              ...child,
+              props: cleanUpCode(child),
+            };
+      });
+    }
+
+    // hide undefined or null props
+    const isNotDefined = [undefined, null].indexOf(currProp) !== -1;
+    return {
+      ...acc,
+      ...(isNotDefined
+        ? {}
+        : {
+            [curr]: newProp || currProp,
+          }),
+    };
+  }, {});
+};
+
+const getJSXAsStringFromMarkup = (
+  markup: any,
+  options?: Record<string, any>,
+): string => {
+  const { cleanProps, filterProps = [], ...otherOptions } = options || {};
+
+  const reactElementToJSXStringOptions = {
+    showDefaultProps: false,
+    showFunctions: true,
+    functionValue: (fn: any) => fn.name,
+    displayName: (ReactElement: any) => {
+      // Try to get display name from various sources
+      if (ReactElement.props && ReactElement.props.mdxType) {
+        return ReactElement.props.mdxType;
+      }
+      if (ReactElement.type && ReactElement.type.displayName) {
+        return ReactElement.type.displayName;
+      }
+      if (ReactElement.type && ReactElement.type.name) {
+        return ReactElement.type.name;
+      }
+      if (typeof ReactElement.type === "string") {
+        return ReactElement.type;
+      }
+      // Fallback to type name or 'Component'
+      return (
+        ReactElement.type?.displayName || ReactElement.type?.name || "Component"
+      );
+    },
+    filterProps: ["mdxType", "originalType", ...filterProps],
+    ...otherOptions,
+  };
+
+  if (cleanProps) {
+    markup = {
+      ...markup,
+      props: cleanUpCode(markup),
+    };
+  }
+
+  // valid element can be passed to reactElementToJSXString directly
+  if (React.isValidElement(markup)) {
+    return reactElementToJSXString(markup, reactElementToJSXStringOptions);
+  }
+
+  // if it's array, we need to pass elemenets one by one
+  if (Array.isArray(markup)) {
+    return markup
+      .map((markupItem: any) =>
+        reactElementToJSXString(markupItem, reactElementToJSXStringOptions),
+      )
+      .join("\n");
+  }
+
+  // if it's pure text, return it
+  if (typeof markup === "string") {
+    return markup;
+  }
+
+  return "";
+};
+
+const CodeExample: React.FC<CodeExampleProps> = ({
+  children,
+  codeJSXOptions,
+  codeTypes = ["jsx", "html"],
+  ...other
+}) => {
+  const [codePreviewType, setCodePreviewType] = useState<string>(
+    (codeTypes && codeTypes[0]) || "jsx",
+  );
+  const [copyButtonText, setCopyButtonText] =
+    useState<string>("Copy to clipboard");
+  const [copyButtonClass, setCopyButtonClass] = useState<string>("");
+
+  const codeBlockRef = useRef<HTMLDivElement>(null);
+
+  const handleCodePreviewTypeToggle = (e: React.MouseEvent, type: string) => {
+    setCodePreviewType(type);
+  };
+
+  const handleCopyCode = (
+    e: React.MouseEvent,
+    element: HTMLDivElement | null,
+  ) => {
+    if (!element) return;
+
+    const selection = window.getSelection();
+    const range = document.createRange();
+
+    range.selectNodeContents(element);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    let newText = "Copied!";
+    let newClass = "success";
+
+    try {
+      document.execCommand("copy");
+    } catch (e) {
+      newText = "Error! Press Ctrl + C";
+      newClass = "error";
+    }
+
+    const originalText = copyButtonText;
+    const originalClass = copyButtonClass;
+
+    setCopyButtonText(newText);
+    setCopyButtonClass(newClass);
+
+    setTimeout(() => {
+      setCopyButtonText(originalText);
+      setCopyButtonClass(originalClass);
+    }, 1200);
+  };
+
+  let codeToShow: string;
+  switch (codePreviewType) {
+    case "html":
+      codeToShow =
+        typeof children === "string"
+          ? unescape(children)
+          : unescape(
+              pretty(renderToStaticMarkup(children as React.ReactElement), {
+                ocd: true,
+              }),
+            );
+      break;
+    case "jsx":
+      codeToShow = getJSXAsStringFromMarkup(children, codeJSXOptions);
+      break;
+    default:
+      codeToShow = "";
+  }
+
+  return (
+    <div className="wrapper" {...other}>
+      {codeTypes.map((codeType) => (
+        <Button
+          key={codeType}
+          role="button"
+          onClick={(e) => handleCodePreviewTypeToggle(e, codeType)}
+          data-testid="code-type-toggle"
+          className={cx("codeTypeToggle", {
+            isActive: codePreviewType === codeType,
+          })}
+        >
+          {codeType.toUpperCase()}
+        </Button>
+      ))}
+      <Button
+        className={cx("copyButton", copyButtonClass)}
+        onClick={(e) => handleCopyCode(e, codeBlockRef.current)}
+      >
+        {copyButtonText}
+      </Button>
+      <Code
+        inline={false}
+        ref={codeBlockRef}
+        data-testid={codePreviewType}
+        language={codePreviewType === "html" ? "markup" : codePreviewType}
+      >
+        {codeToShow}
+      </Code>
+    </div>
+  );
+};
+
+CodeExample.displayName = "CodeExample";
+
+export default CodeExample;

package/src/components/Preview/Interact/ButtonShowPropsGroup.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import cx from "classnames";
+
+import { Button } from "../../Button";
+
+interface ButtonShowPropsGroupProps {
+  id: string;
+  componentName: string;
+  deepness: number;
+  onClick: (e: React.MouseEvent) => void;
+  isVisible: boolean;
+}
+
+const ButtonShowPropsGroup: React.FC<ButtonShowPropsGroupProps> = ({
+  id,
+  componentName,
+  deepness,
+  onClick,
+  isVisible,
+}) => {
+  return (
+    <Button onClick={onClick} className="button">
+      <span className="text">
+        {componentName}{" "}
+        <span
+          className={cx("triangle", {
+            up: isVisible,
+            down: !isVisible,
+          })}
+        >
+          ▾
+        </span>
+      </span>
+    </Button>
+  );
+};
+
+export default ButtonShowPropsGroup;