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

package/src/components/Footer/data.ts

@@ -0,0 +1,71 @@
+const currentYear = new Date().getFullYear();
+
+const data = {
+  columns: [
+    {
+      title: "Eshop",
+      links: [
+        { label: "Telefóny", url: "/eshop/telefony" },
+        { label: "Prenos císla", url: "/eshop/prenos-cisla" },
+        { label: "Akciové ponuky v e-shope", url: "/eshop/akciove-ponuky" },
+        { label: "Sledovanie objednávky", url: "/eshop/sledovanie-objednavky" },
+        { label: "Ponuka Love", url: "/eshop/ponuka-love" },
+        { label: "Pevny internet", url: "/eshop/pevny-internet" },
+        { label: "Orange TV", url: "/eshop/orange-tv" },
+        { label: "Predajná brozúra", url: "/eshop/predajna-brozura" },
+      ],
+    },
+    {
+      title: "Služby",
+      links: [
+        { label: "Porovnanie paušálov", url: "/sluzby/porovnanie-pausalov" },
+        { label: "Mobilný internet", url: "/sluzby/mobilny-internet" },
+        { label: "Pevný internet", url: "/sluzby/pevny-internet" },
+        { label: "Televízia", url: "/sluzby/televizia" },
+        { label: "Prima Voľba", url: "/sluzby/prima-volba" },
+        { label: "Roaming", url: "/sluzby/roaming" },
+        { label: "Ostatné doplnkové služby", url: "/sluzby/doplnkove-sluzby" },
+        { label: "Môj Orange", url: "/sluzby/moj-orange" },
+      ],
+    },
+    {
+      title: "Pomoc a podpora",
+      links: [
+        { label: "Cenník", url: "/podpora/cennik" },
+        { label: "Expertlinka", url: "/podpora/expertlinka" },
+        { label: "Dobitie kreditu", url: "/podpora/dobitie-kreditu" },
+        { label: "Reklamácie a riešenie sporov", url: "/podpora/reklamacie" },
+        { label: "Elektronický záručný list", url: "/podpora/zarucny-list" },
+        { label: "Nariadenie GDPR", url: "/podpora/gdpr" },
+        { label: "Telemarketing", url: "/podpora/telemarketing" },
+        { label: "Mapa pokrytia", url: "/podpora/mapa-pokrytia" },
+      ],
+    },
+    {
+      title: "O nás",
+      links: [
+        { label: "Kariéra", url: "/sluzby/kariera" },
+        { label: "Tlačové správy", url: "/sluzby/tlacove-spravy" },
+        { label: "Predajne", url: "/sluzby/predajne" },
+        { label: "Spoločenská zodpovednosť", url: "/sluzby/zodpovednost" },
+        { label: "Bez nástrah online", url: "/sluzby/bez-nastrah-online" },
+        { label: "Nadácia Orange", url: "/sluzby/nadacia-orange" },
+        { label: "Orange pre developerov", url: "/sluzby/pre-developerov" },
+        { label: "Informácie pre stavebníkov", url: "/sluzby/pre-stavebnikov" },
+      ],
+    },
+  ],
+  bottomLinks: [
+    { label: "Kontakt", url: "/kontakt" },
+    { label: "Nastavenia cookies", url: "/nastavenia-cookies" },
+    { label: "Správa osobných údajov", url: "/sprava-osobnych-udajov" },
+    { label: "Všeobecné podmienky", url: "/vseobecne-podmienky" },
+    {
+      label: "Informácie pre koncových užívateľov",
+      url: "/informacie-pre-uzivatelov",
+    },
+  ],
+  copyright: `© 1997 - ${currentYear} Orange`,
+};
+
+export default data;

package/src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from "./Footer";

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

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { Footer } from "../Footer";
+
+it("is valid html", () => {
+  const { container } = render(<Footer />);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(<Footer />);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,66 @@
+import { render } from "@testing-library/react";
+import { Footer } from "../Footer";
+import footerData from "../data";
+
+describe("Footer", () => {
+  it("renders without crashing", () => {
+    const { getByRole } = render(<Footer />);
+    // Should render a footer landmark
+    expect(getByRole("contentinfo")).toBeInTheDocument();
+  });
+
+  it("renders logo image", () => {
+    const { getByAltText } = render(<Footer />);
+    expect(getByAltText("logo")).toBeInTheDocument();
+  });
+
+  it("renders all columns and links", () => {
+    const { getByText } = render(<Footer />);
+    footerData.columns.forEach((column) => {
+      expect(getByText(column.title)).toBeInTheDocument();
+      column.links.forEach((link) => {
+        expect(getByText(link.label)).toBeInTheDocument();
+      });
+    });
+  });
+
+  it("renders bottom links", () => {
+    const { getByText } = render(<Footer />);
+    footerData.bottomLinks.forEach((link) => {
+      expect(getByText(link.label)).toBeInTheDocument();
+    });
+  });
+
+  it("renders copyright", () => {
+    const { getByText } = render(<Footer />);
+    expect(getByText(footerData.copyright)).toBeInTheDocument();
+  });
+
+  it("applies inverse class when isInverse is true", () => {
+    const { container } = render(<Footer isInverse />);
+    expect(container.querySelector(".footer--inverse")).toBeInTheDocument();
+  });
+
+  it("accepts custom className", () => {
+    const { container } = render(<Footer className="custom-footer" />);
+    expect(container.querySelector(".custom-footer")).toBeInTheDocument();
+  });
+
+  it("accepts custom data prop", () => {
+    const customData = {
+      columns: [
+        {
+          title: "Custom",
+          links: [{ label: "Link", url: "/custom" }],
+        },
+      ],
+      bottomLinks: [{ label: "Bottom", url: "/bottom" }],
+      copyright: "Custom Copyright",
+    };
+    const { getByText } = render(<Footer data={customData} />);
+    expect(getByText("Custom")).toBeInTheDocument();
+    expect(getByText("Link")).toBeInTheDocument();
+    expect(getByText("Bottom")).toBeInTheDocument();
+    expect(getByText("Custom Copyright")).toBeInTheDocument();
+  });
+});

package/src/components/Forms/Autocomplete/Autocomplete.mdx

@@ -0,0 +1,198 @@
+import {
+  ComponentDocs,
+  DocsTable,
+  md,
+  CodeBlock,
+} from '@lighting-beetle/lighter-styleguide';
+
+import { Preview, DefaultConfigTable } from '../../../styleguide';
+import { useStatic } from '../../../utils/hooks';
+import { objectToString } from '../../../utils/helpers';
+import Field from '../Field';
+
+import AutocompleteStatic, {
+  defaultConfig as defaultConfigAutocomplete,
+  configDocs as configDocsAutocomplete,
+} from './Autocomplete.static';
+import Autocomplete from './Autocomplete';
+
+export const fruit = [
+  '',
+  'apple',
+  'apricot',
+  'banana',
+  'blueberry',
+  'fig',
+  'lime',
+  'lemon',
+  'mango',
+  'orange',
+  'raspberry',
+  'watermelon',
+];
+
+export const RenderOnDiv = props => {
+  const [autocompleteRef] = useStatic(AutocompleteStatic);
+  return (
+    <div
+      data-autocomplete
+      ref={autocompleteRef}
+      data-autocomplete-config={JSON.stringify({
+        id: 'on-a-div',
+        source: fruit,
+      })}
+    />
+  );
+};
+
+# Autocomplete
+
+Adds typeahead nad filtering capability to input.
+
+## Autocomplete Field
+
+Autocomplete Field consists of:
+
+1. [**Label**](/components/forms/captions/label) (mandatory)
+2. [**Tooltip**](/components/forms/captions/tooltip) (optional)
+3. [**Hint**](/components/forms/captions/hint) (optional)
+4. **Autocomplete** control itself
+5. [**Messages**](/components/forms/captions/message) (optional)
+
+<Preview>
+  <Field
+    label="Autocomplete"
+    control={{
+      type: 'autocomplete',
+      options: fruit,
+      'data-autocomplete-config': JSON.stringify({ name: 'input-name' }),
+    }}
+    hint="Start typing to search for fruit"
+    messages={[
+      {
+        type: 'warning',
+        text: 'Warning message',
+      },
+    ]}
+    tooltip="Tooltip info"
+  />
+</Preview>
+
+## Progressive enhancement of a select element
+
+If your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a `<select>` on the server, and use [progressive enhancement](https://github.com/alphagov/accessible-autocomplete#progressive-enhancement).
+
+ODS Autocomplete wrapper javascript automatically uses progressive enhancement when initalized on a select element.
+
+<Preview>
+  <Autocomplete
+    options={[
+      '',
+      'apple',
+      'apricot',
+      'banana',
+      'blueberry',
+      'fig',
+      'lime',
+      'lemon',
+      'mango',
+      'orange',
+      'raspberry',
+      'watermelon',
+    ]}
+  />
+</Preview>
+
+## Rendering an autocomplete on a div
+
+When rendering a select element is not feasible, for example due to fetching search results via an API, Autocomplete can be rendered inside a div.
+
+<Preview>
+  <Field
+    label="Render on a div"
+    control={{
+      id: 'on-a-div',
+      renderControl: props => <RenderOnDiv {...props} />,
+    }}
+  />
+</Preview>
+
+## With search icon
+
+More about usage with search icon can be found in [Addons documentation](/components/forms/addons).
+
+## JS module reference
+
+Autocomplete is backed with [accessible-autocomplete | see docs](https://alphagov.github.io/accessible-autocomplete)
+
+All elements with `data-autocomplete` attribute will be initialised automatically.
+
+Config can be also passed via `data-autocomplete-config` as a JSON string. Please note that, due to security issues, it is not possible to pass any executable code via this attribute. If you need to configure a filtering function, please initialize Autocomplete manually.
+
+## Manual initialization
+
+<CodeBlock language="js">
+  {`
+const cities = ['Bratislava', 'Banská Bystrica', 'Košice', 'Žilina'];
+const myAutocomplete = new window.myApp.Autocomplete(
+  document.getElementById('my-autocomplete'),
+  { // required config
+    // fuction that populates search results
+    source: (query, populateResults) => {
+      // you can filter filter items based on your preference, for example you
+      // can use indexOf() or startsWith() function inside filter, or any different way to filter items
+      const filteredResults = cities.filter(
+        city => city.toLowerCase().indexOf(query.toLowerCase()) !== -1
+      );
+      populateResults(filteredResults);
+    },
+    // This function will be called when you confirm the option, you can for example change page url
+    // argument is object with name attribute
+    onConfirm: (option) => {
+      if(option) {
+        params.delete('q');
+        params.set('q', option.name);
+        window.location.search = params.toString();
+      }
+    },
+    defaultValue: '',
+    templates: {
+      // inputValue is a function that receives one argument, the currently selected suggestion.
+      // It returns the string value to be inserted into the input.
+      // example
+      inputValue: result => result && result.name ,
+      // suggestion is a function that receives one argument, a suggestion to be displayed.
+      // It is used when rendering suggestions, and should return a string, which can contain HTML.
+      // example
+      suggestion: result => result && \`<strong>\${result.name}</strong>\`,
+    }
+  }
+);`}
+</CodeBlock>
+
+## Config
+
+See Accessible autocomplete documentation: https://alphagov.github.io/accessible-autocomplete/
+
+### Default config
+
+<CodeBlock language="js">{objectToString(defaultConfigAutocomplete)}</CodeBlock>
+
+## Methods
+
+Autocomplete has only one method - `init`. The Accessible Autocomplete plugin does not provide any methods for interacting with its instance.
+
+export const methods = [
+  {
+    prop: 'init',
+    type: 'func',
+    description:
+      'Initialize instance. This is called automatically on `new Plugin(el, config)`',
+  },
+];
+
+<DocsTable data={methods} />
+
+## Props
+
+<ComponentDocs component={Autocomplete} />

package/src/components/Forms/Autocomplete/Autocomplete.static.ts

@@ -0,0 +1,90 @@
+import accessibleAutocomplete from "@orangesk/accessible-autocomplete";
+
+export interface AutocompleteConfig {
+  autoselect: boolean;
+  wrapperClassName: string;
+  menuClassName: string;
+  optionClassName: string;
+  customInputClassName: string;
+  displayMenu: string;
+  tAssistiveHint: () => string;
+}
+
+export const defaultConfig: AutocompleteConfig = {
+  autoselect: true,
+  wrapperClassName: "",
+  menuClassName: "",
+  optionClassName: "",
+  customInputClassName: "",
+  displayMenu: "overlay",
+  tAssistiveHint: () =>
+    "Pre prezeranie výsledkov automatického dopĺňania použite šípky nahor a nadol a pre výber konkrétneho výsledku použite tlačidlo Enter. Pri dotykových zariadeniach použite dotyk alebo potiahnutie prstom do strany.",
+};
+
+export default class Autocomplete {
+  private element: HTMLElement;
+  private config: AutocompleteConfig;
+  private instance: any;
+
+  constructor(element: HTMLElement, config?: Partial<AutocompleteConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.onPageshow = this.onPageshow.bind(this);
+    this.instance = null;
+
+    (this.element as any).ODS_Autocomplete = this;
+
+    this.init();
+
+    return this;
+  }
+
+  private init(): void {
+    const configAttr = this.element.getAttribute("data-autocomplete-config");
+    let elementConfig: Partial<AutocompleteConfig> = {};
+    if (configAttr) {
+      try {
+        elementConfig = JSON.parse(configAttr);
+      } catch {
+        // ignore parse error
+      }
+    }
+    this.config = { ...this.config, ...elementConfig };
+
+    if (this.element.tagName === "SELECT") {
+      accessibleAutocomplete.enhanceSelectElement({
+        selectElement: this.element,
+        ...this.config,
+      });
+    } else {
+      accessibleAutocomplete({
+        element: this.element,
+        ...this.config,
+      });
+    }
+
+    window.addEventListener("pageshow", this.onPageshow);
+  }
+
+  private onPageshow(e: PageTransitionEvent): void {
+    if (e.persisted && window) {
+      window.location.reload();
+    }
+  }
+
+  public destroy(): void {
+    window.removeEventListener("pageshow", this.onPageshow);
+    (this.element as any).ODS_Autocomplete = null;
+  }
+
+  public update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  static getInstance(el: HTMLElement): Autocomplete | null {
+    return el && (el as any).ODS_Autocomplete
+      ? (el as any).ODS_Autocomplete
+      : null;
+  }
+}

package/src/components/Forms/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../../utils/hooks";
+import AutocompleteStatic from "./Autocomplete.static";
+import { Select } from "../Select";
+
+const CLASS_ROOT = "autocomplete";
+
+export type AutocompleteOption = string | { title: string; value: string };
+
+export interface AutocompleteProps
+  extends React.HTMLAttributes<HTMLSelectElement> {
+  /** Module config. For more see accessible-autocomplete docs */
+  autocompleteConfig?: Record<string, any>;
+  /** Array of string options */
+  options?: AutocompleteOption[];
+  /** Placeholder text */
+  placeholder?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const Autocomplete: React.FC<AutocompleteProps> = ({
+  className,
+  options = [],
+  autocompleteConfig,
+  placeholder,
+  ...other
+}) => {
+  const [autocompleteRef] = useStatic(
+    AutocompleteStatic as any,
+    autocompleteConfig,
+  );
+
+  return (
+    <Select
+      className={cx(CLASS_ROOT, className)}
+      data-placeholder={placeholder}
+      {...(options.length ? { "data-autocomplete": true } : {})}
+      {...other}
+      elemRef={autocompleteRef}
+    >
+      {options &&
+        options.map((option) => (
+          <option
+            label={
+              typeof option === "string" && option.length === 0
+                ? " "
+                : undefined
+            }
+            value={typeof option === "string" ? option : option.value}
+            key={typeof option === "string" ? option : option.value}
+          >
+            {typeof option === "string" ? option : option.title}
+          </option>
+        ))}
+    </Select>
+  );
+};
+
+Autocomplete.displayName = "Autocomplete";
+
+export { Autocomplete };

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

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

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

@@ -0,0 +1,7 @@
+@use '../../../../styles/tools/convert.scss';
+@use '../../TextInput/styles/config' as textConfig;
+
+$states: textConfig.$states;
+$sizes: textConfig.$sizes;
+
+$menu-height: convert.to-rem(243px);

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

@@ -0,0 +1,78 @@
+@use "../../../../styles/tokens/color";
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/convert";
+@use "./config";
+
+@mixin menu($height: config.$menu-height) {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  float: left;
+  width: 100%;
+  max-height: $height;
+  padding: 0;
+  margin: -2px 0 0;
+  color: color.$black;
+  background-color: color.$white;
+  background-clip: padding-box;
+  border: 2px solid color.$black;
+  overflow-y: auto;
+  border-radius: convert.to-rem(5px);
+
+  &:empty {
+    display: none;
+  }
+}
+
+@mixin menu-visible {
+  display: block;
+}
+
+@mixin menu-hidden {
+  display: none;
+}
+
+@mixin hint {
+  position: absolute;
+}
+
+@mixin option {
+  display: block;
+  position: relative;
+  width: 100%;
+  padding: space.get("small");
+  clear: both;
+  color: color.$black;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  margin-bottom: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1001;
+  }
+
+  &:first-child {
+    border-top-left-radius: 0;
+    background-clip: padding-box;
+    border-top-right-radius: 0;
+  }
+}
+
+@mixin active-option {
+  color: color.$white;
+  background: color.$black;
+}
+
+@mixin wrapper {
+  position: relative;
+  width: 100%;
+  max-width: convert.to-rem(350px);
+}

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

@@ -0,0 +1,66 @@
+@use "./config";
+@use "./mixins";
+@use "../../TextInput/styles/mixins" as textMixins;
+@use "../../styles/config" as commonConfig;
+@use "../../../../styles/tools/generate";
+
+@layer components {
+  .autocomplete {
+    &__hint,
+    &__input,
+    &__option {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    &__wrapper {
+      @include mixins.wrapper();
+    }
+
+    &__input {
+      @include textMixins.base();
+      @include textMixins.states();
+
+      width: 100%;
+      @each $size, $values in config.$sizes {
+        &#{generate.variant-name($size)} {
+          @include textMixins.size($size);
+        }
+      }
+
+      &--focused {
+        @include generate.css-map(commonConfig.$focus);
+
+        box-shadow: none;
+      }
+    }
+
+    &__hint {
+      @include mixins.hint;
+    }
+
+    &__menu {
+      @include mixins.menu;
+
+      &--visible {
+        @include mixins.menu-visible;
+      }
+
+      &--hidden {
+        @include mixins.menu-hidden;
+      }
+    }
+
+    &__option {
+      @include mixins.option;
+
+      &--focused,
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        @include mixins.active-option;
+      }
+    }
+  }
+}