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

package/src/components/Forms/Group/Group.mdx

@@ -0,0 +1,146 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../../styleguide/';
+import TextInput from '../../Forms/TextInput';
+import Autocomplete from '../../Forms/Autocomplete';
+import Button from '../../Button';
+import Group from './';
+
+# Seach Icon
+
+Add search icon to element using `.input--search-icon`. Icon is visible when element is not focused and doesn't have value.
+It's required to set empty placeholder. Usage with placeholder is described in [the example below](#search-icon-with-placeholder). Does not apply for radios and checkboxes.
+
+<Preview>
+  <Autocomplete
+    id="search-autocomplete"
+    options={[
+      '',
+      'apple',
+      'apricot',
+      'banana',
+      'blueberry',
+      'fig',
+      'lime',
+      'lemon',
+      'mango',
+      'orange',
+      'raspberry',
+      'watermelon',
+    ]}
+    autocompleteConfig={{
+      customInputClassName: 'input--search-icon',
+    }}
+    placeholder=""
+  />
+  <br />
+  <TextInput
+    id="search-1"
+    htmlType="text"
+    className="input--search-icon"
+    placeholder=""
+  />
+  <br />
+  <TextInput
+    id="search-2"
+    htmlType="text"
+    defaultValue="has value"
+    placeholder=""
+    className="input--search-icon"
+  />
+</Preview>
+
+## Search icon with placeholder
+
+When using displaying search icon on input with placeholder, it's required to set the `.input--search-icon-with-placeholder` class on the input element.
+Does not apply for radios and checkboxes.
+
+### Usage with Autocomplete
+
+<Preview>
+  <Autocomplete
+    id="search-autocomplete"
+    options={[
+      '',
+      'apple',
+      'apricot',
+      'banana',
+      'blueberry',
+      'fig',
+      'lime',
+      'lemon',
+      'mango',
+      'orange',
+      'raspberry',
+      'watermelon',
+    ]}
+    data-autocomplete-config={JSON.stringify({
+      customInputClassName: 'input--search-icon-with-placeholder',
+      placeholder: "Select fruit"
+    })}
+    placeholder=""
+  />
+</Preview>
+
+### Usage with TextInput
+
+Regular input
+
+<Preview>
+  <TextInput
+    id="search-1"
+    htmlType="text"
+    className="input--search-icon-with-placeholder"
+    placeholder="Search"
+  />
+</Preview>
+
+Large input
+<Preview>
+  <TextInput
+    id="search-1"
+    htmlType="text"
+    className="input--search-icon-with-placeholder text-input--large"
+    placeholder="Search"
+  />
+</Preview>
+
+# Control Group
+
+Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes.
+
+## Example
+
+<Preview>
+  <Group
+    prefix="€"
+    suffix="per piece"
+    control={{ type: 'text', id: 'group-1' }}
+  />
+</Preview>
+
+### Variants
+
+#### With Button
+
+<Preview>
+  <Group
+    suffix={<Button type="primary">Ok</Button>}
+    control={{ type: 'text', id: 'group-2' }}
+  />
+</Preview>
+
+#### Size
+
+<Preview>
+  <Group
+    size="large"
+    prefix="€"
+    suffix={['kg', <Button>Send</Button>]}
+    control={{ type: 'text', size: 'large', id: 'group-3' }}
+  />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Group />" component={Group} />

package/src/components/Forms/Group/Group.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+import cx from "classnames";
+
+import { TextInput } from "../TextInput/TextInput";
+import { Select } from "../Select/Select";
+
+import { Item } from "./Item";
+
+const CLASS_ROOT = "control-group";
+
+interface ControlShape {
+  type: "text" | "select";
+  [key: string]: any;
+}
+
+interface GroupProps extends HTMLAttributes<HTMLDivElement> {
+  control: ControlShape;
+  addonPrefix?: ReactNode | ReactNode[];
+  size?: "large";
+  addonSuffix?: ReactNode | ReactNode[];
+  className?: string;
+}
+
+const Group: React.FC<GroupProps> = ({
+  control,
+  addonPrefix,
+  addonSuffix,
+  size,
+  className,
+  ...other
+}) => {
+  const { type, ...controlProps } = control;
+
+  const ControlElement = (props: any) => {
+    switch (type) {
+      case "select":
+        return <Select {...props} />;
+      default:
+        return <TextInput {...props} />;
+    }
+  };
+
+  const renderItems = (items: ReactNode | ReactNode[] | undefined) =>
+    React.Children.map(items, (item) => {
+      if (
+        typeof item === "string" ||
+        (item && typeof (item as any).type === "string")
+      ) {
+        return <Item size={size}>{item}</Item>;
+      } else if (React.isValidElement(item)) {
+        const propsToAdd =
+          item.props && typeof item.props === "object" && "size" in item.props
+            ? {}
+            : { size };
+        return React.cloneElement(item, {
+          ...(item.props || {}),
+          ...propsToAdd,
+        });
+      }
+      return item;
+    });
+
+  return (
+    <div className={cx(CLASS_ROOT, className)} {...other}>
+      {renderItems(addonPrefix)}
+      <ControlElement {...controlProps} size={size} />
+      {renderItems(addonSuffix)}
+    </div>
+  );
+};
+
+Group.displayName = "ControlGroup";
+
+export { Group };

package/src/components/Forms/Group/Item.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "control-group__item";
+
+interface ItemProps extends HTMLAttributes<HTMLDivElement> {
+  size?: "default" | "large";
+  className?: string;
+  children?: ReactNode;
+}
+
+const defaultProps = {
+  size: "default" as const,
+};
+
+const Item: React.FC<ItemProps> = ({
+  size = defaultProps.size,
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className, {
+    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
+  });
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+Item.displayName = "GroupItem";
+
+export { Item };

package/src/components/Forms/Group/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Group } from "./Group";

package/src/components/Forms/Group/styles/config.scss

@@ -0,0 +1,9 @@
+@use "../../../../styles/tokens/color";
+@use "../../TextInput/styles/config" as TextInputConfig;
+
+$item: (
+  border: 2px solid var(--color-surface-moderate),
+  background: var(--color-surface-subtle),
+);
+
+$sizes: TextInputConfig.$sizes;

package/src/components/Forms/Group/styles/mixins.scss

@@ -0,0 +1,50 @@
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
+@use "./config";
+
+@mixin base() {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+
+  > * + * {
+    margin-left: -2px;
+  }
+
+  > *:not([class*="mb-"]) {
+    margin-bottom: 0;
+  }
+
+  > *:focus {
+    z-index: 2;
+  }
+
+  > .btn {
+    z-index: 1;
+  }
+
+  > .btn:not([class*="mr-"]) {
+    margin-right: 0;
+  }
+
+  button,
+  .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+@mixin item($config: config.$item) {
+  @include generate.css-map($config);
+
+  &:first-child {
+    border-top-left-radius: convert.to-rem(5px);
+    border-bottom-left-radius: convert.to-rem(5px);
+  }
+}
+
+@mixin item-size($size, $config: config.$sizes) {
+  @include generate.css-map($config, $size);
+}

package/src/components/Forms/Group/styles/style.scss

@@ -0,0 +1,19 @@
+@use "../../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .control-group {
+    @include mixins.base();
+
+    &__item {
+      @include mixins.item();
+
+      @each $size, $values in config.$sizes {
+        &#{generate.variant-name($size)} {
+          @include mixins.item-size($size);
+        }
+      }
+    }
+  }
+}

package/src/components/Forms/Group/tests/Group.unit.test.js

@@ -0,0 +1,171 @@
+import { render } from "@testing-library/react";
+
+import { Group } from "../Group";
+
+//control is required
+describe("rendering Group", () => {
+  describe("initial state", () => {
+    it("has default class control-group", () => {
+      const { getByTestId } = render(
+        <Group data-testid="test-id" control={{ type: "text", id: "id" }} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("control-group");
+    });
+  });
+  describe("passed props", () => {
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          className="test-class"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("control-group");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("renders Item component (class control-group__item) with text when addonPrefix of type string is set", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          addonPrefix="test"
+        />,
+      );
+      expect(
+        container.getElementsByClassName("control-group__item").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("control-group__item")[0].textContent,
+      ).toBe("test");
+    });
+    it("renders Item component (class control-group__item) with text when addonSuffix of type string is set", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          addonSuffix="test"
+        />,
+      );
+      expect(
+        container.getElementsByClassName("control-group__item").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("control-group__item")[0].textContent,
+      ).toBe("test");
+    });
+    it("renders Item component (class control-group__item) with child element when addonPrefix is set to html element", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          addonPrefix={<p>test</p>}
+        />,
+      );
+      expect(
+        container.getElementsByClassName("control-group__item").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("control-group__item")[0].children[0]
+          .tagName,
+      ).toBe("P");
+      expect(
+        container.getElementsByClassName("control-group__item")[0].children[0]
+          .textContent,
+      ).toBe("test");
+    });
+    it("renders Item component (class control-group__item) with child element when addonSuffix is set to html element", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          addonSuffix={<p>test</p>}
+        />,
+      );
+      expect(
+        container.getElementsByClassName("control-group__item").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("control-group__item")[0].children[0]
+          .tagName,
+      ).toBe("P");
+      expect(
+        container.getElementsByClassName("control-group__item")[0].children[0]
+          .textContent,
+      ).toBe("test");
+    });
+    it("renders TextInput component (text-input class) with id when control type is set to text ", () => {
+      const { container } = render(
+        <Group data-testid="test-id" control={{ type: "text", id: "id" }} />,
+      );
+      expect(container.getElementsByClassName("text-input").length).toBe(1);
+      expect(
+        container.getElementsByClassName("text-input")[0].getAttribute("id"),
+      ).toBe("id");
+    });
+    it("renders Select component (select class) with id when control type is set to text ", () => {
+      const { container } = render(
+        <Group data-testid="test-id" control={{ type: "select" }} />,
+      );
+      expect(container.getElementsByClassName("select").length).toBe(1);
+    });
+    it("addonPrefix Item has class control-group__item--large when size is set to large", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          addonPrefix="test"
+          size="large"
+        />,
+      );
+      expect(
+        container.getElementsByClassName("control-group__item").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("control-group__item")[0],
+      ).toHaveClass("control-group__item--large");
+    });
+    it("addonSuffix Item has class control-group__item--large when size is set to large", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          addonSuffix="test"
+          size="large"
+        />,
+      );
+      expect(
+        container.getElementsByClassName("control-group__item").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("control-group__item")[0],
+      ).toHaveClass("control-group__item--large");
+    });
+    it("TextInput has class text-input--large when size is set to large", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "text", id: "id" }}
+          size="large"
+        />,
+      );
+      expect(container.getElementsByClassName("text-input").length).toBe(1);
+      expect(container.getElementsByClassName("text-input")[0]).toHaveClass(
+        "text-input--large",
+      );
+    });
+    it("Select has class select--large when size is set to large", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "select" }}
+          size="large"
+        />,
+      );
+      expect(container.getElementsByClassName("select").length).toBe(1);
+      expect(container.getElementsByClassName("select")[0]).toHaveClass(
+        "select--large",
+      );
+    });
+  });
+});

package/src/components/Forms/Group/tests/Item.unit.test.js

@@ -0,0 +1,31 @@
+import { render } from "@testing-library/react";
+
+import { Item } from "../Item";
+
+describe("rendering Item", () => {
+  describe("initial state", () => {
+    it("has default class control-group__item", () => {
+      const { getByTestId } = render(<Item data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("control-group__item");
+    });
+  });
+  describe("passed props", () => {
+    it("has additional class when className is set ", () => {
+      const { getByTestId } = render(
+        <Item data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("control-group__item");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("has control-group__item--large class when size is set to large", () => {
+      const { getByTestId } = render(
+        <Item data-testid="test-id" size="large" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("control-group__item--large");
+    });
+    it("renders children", () => {
+      const { getByText } = render(<Item data-testid="test-id">test</Item>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Forms/Hint/Hint.mdx

@@ -0,0 +1,40 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../../styleguide/';
+import Link from '../../Link';
+import Field from '../Field';
+
+
+import Hint from './';
+
+
+# Hint
+
+Provide instructions on how to fill a form field. Unlike a placeholder, hint stays visible even while the user is typing. 
+
+Hints improve experience when the field expects special formatting or can help users fint the required information (e.g. a contract number or SN). Using a properly worded hint can also reduce anxiety when filling in sensitive information.
+
+<Preview>
+  <Hint>Fill the field like this</Hint>
+</Preview>
+
+## Using in Fields
+
+Hint **must** be reffered to using `aria-describedby` attribute on the input element. Without it, screenreader users will not be able to conveniently reach the provided help text.
+
+<Preview>
+  <Field
+    control={{ type: 'text' }}
+    label="Service number"
+    hint="Your service number is shown on the first page of your contract and each invoice."
+  />
+</Preview>
+
+<Preview>
+  <Field
+    control={{ type: 'checkbox' }}
+    label="I understand"
+    hint={<React.Fragment>By checking this, you declare you understand the <Link href="#">important document</Link>.</React.Fragment>}
+  />
+</Preview>
+

package/src/components/Forms/Hint/Hint.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "hint";
+
+export interface HintProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Hint: React.FC<HintProps> = ({ className, children, ...other }) => {
+  return children ? (
+    <p className={cx(CLASS_ROOT, className)} {...other}>
+      {children}
+    </p>
+  ) : null;
+};
+
+Hint.displayName = "Hint";
+
+export { Hint };

package/src/components/Forms/Hint/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Hint } from "./Hint";

package/src/components/Forms/Hint/styles/config.scss

@@ -0,0 +1,5 @@
+@use '../../../../styles/tools/convert';
+
+$base: (
+  font-size: convert.to-rem(14px),
+);

package/src/components/Forms/Hint/styles/mixins.scss

@@ -0,0 +1,6 @@
+@use '../../../../styles/tools/generate';
+@use './config';
+
+@mixin base($config: config.$base) {
+  @include generate.css-map($config);
+}

package/src/components/Forms/Hint/styles/style.scss

@@ -0,0 +1,7 @@
+@use "./mixins";
+
+@layer components {
+  .hint {
+    @include mixins.base();
+  }
+}

package/src/components/Forms/Hint/tests/Hint.unit.test.js

@@ -0,0 +1,35 @@
+import { render } from "@testing-library/react";
+
+import { Hint } from "../Hint";
+
+describe("rendering Hint", () => {
+  describe("initial state", () => {
+    it("doesnt render when children are not set", () => {
+      const { container } = render(<Hint />);
+      expect(container.querySelector("p")).not.toBeInTheDocument();
+    });
+  });
+  describe("passed props", () => {
+    it("is rendered when children are set ", () => {
+      const { container } = render(<Hint>test</Hint>);
+      expect(container.querySelector("p")).toBeInTheDocument();
+    });
+    it("renders children", () => {
+      const { getByText } = render(<Hint data-testid="test-id">test</Hint>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has  class hint", () => {
+      const { getByTestId } = render(<Hint data-testid="test-id">test</Hint>);
+      expect(getByTestId("test-id")).toHaveClass("hint");
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Hint data-testid="test-id" className="test-class">
+          test
+        </Hint>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("hint");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+  });
+});