@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Accordion/Accordion.mdx

@@ -1,240 +0,0 @@
-import { CodeBlock, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { loremIpsum } from 'lorem-ipsum';
-
-import { Preview } from '../../styleguide/';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionIndicator,
-} from '../BlockAction';
-import Grid, { GridCol } from '../Grid';
-import Bar, { BarItem } from '../Bar';
-import Icon from '../Icon';
-import Card, { CardSection } from '../Card';
-
-import { Accordion } from './Accordion';
-import { AccordionItem } from './AccordionItem';
-
-export const AccordionHeader = ({ title, currentId, isActive }) => (
-  <BlockAction>
-    <Bar className="accordion__header">
-      <BarItem isFilling>
-        <Grid vAlign="middle">
-          <GridCol size={{ md: 6 }}>
-            <h3 className="mb-small" hasMdxLink={false}>
-              <BlockActionControl>
-                <button
-                  type="button"
-                  aria-expanded={isActive}
-                  className="accordion__button"
-                  aria-controls={`${currentId}-section`}
-                  id={currentId}
-                  data-accordion-toggle
-                >
-                  <span className="accordion__title">{title}</span>
-                </button>
-              </BlockActionControl>
-            </h3>
-            <p className="mb-none">{loremIpsum({ count: 1 })}</p>
-          </GridCol>
-          <GridCol size={{ md: 6 }}>
-            <p className="mb-none">{loremIpsum({ count: 1 })}</p>
-          </GridCol>
-        </Grid>
-      </BarItem>
-      <BarItem>
-        <BlockActionIndicator>
-          <Icon className="accordion__icon" name="chevron-down" size="medium" />
-        </BlockActionIndicator>
-      </BarItem>
-    </Bar>
-  </BlockAction>
-);
-
-# Accordion
-
-Accordion expands and collapses sections of content.
-
-<Preview>
-  <Accordion>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Custom heading level
-
-Accordion titles are rendered inside a `h3` element, which can be overriden.
-
-<Preview>
-  <Accordion headingLevel={2}>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Size
-
-### Default
-
-<Preview>
-  <Accordion>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-### Large
-
-<Preview>
-  <Accordion size="large">
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Enclosed accordion
-
-Enclosed accordions are usually placed inside a [Card](/components/card)
-and labelled with a heading element in a separate CardSection.
-
-<Preview bgTheme="gray">
-  <Card>
-    <CardSection>
-      <h2>Enclosed accordion</h2>
-    </CardSection>
-    <Accordion isEnclosed>
-      <AccordionItem title={loremIpsum({ count: 1 })}>
-        <p>{loremIpsum({ count: 3 })}</p>
-      </AccordionItem>
-      <AccordionItem title={loremIpsum({ count: 1 })}>
-        <p>{loremIpsum({ count: 3 })}</p>
-      </AccordionItem>
-      <AccordionItem title={loremIpsum({ count: 1 })}>
-        <p>{loremIpsum({ count: 3 })}</p>
-      </AccordionItem>
-    </Accordion>
-  </Card>
-</Preview>
-
-## Disabling last item bottom border
-
- By adding `accordion--last-item-no-bottom-border` class to the accordion, the bottom border of the last accordion item will be removed.
-
-<Preview>
-  <Accordion lastItemNoBottomBorder>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Advanced layout using [Block Action](/components/block-action)
-
-<Preview>
-  <Accordion size="large">
-    <AccordionItem
-      title={loremIpsum({ count: 1 })}
-      renderHeader={(title, currentId, isActive) => (
-        <AccordionHeader
-          title={title}
-          currentId={currentId}
-          isActive={isActive}
-        />
-      )}
-    >
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem
-      title={loremIpsum({ count: 1 })}
-      renderHeader={(title, currentId, isActive) => (
-        <AccordionHeader
-          title={title}
-          currentId={currentId}
-          isActive={isActive}
-        />
-      )}
-    >
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem
-      title={loremIpsum({ count: 1 })}
-      renderHeader={(title, currentId, isActive) => (
-        <AccordionHeader
-          title={title}
-          currentId={currentId}
-          isActive={isActive}
-        />
-      )}
-    >
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Accordion />" component={Accordion} />
-
-<ComponentDocs title="<AccordionItem />" component={AccordionItem} />
-
-## JS module reference
-
-All elements with `[data-accordion]` will be initialised automatically.
-
-### Custom initialization
-
-```javascript
-const myAccordion = new window.ODS.modules.Accordion(
-  document.getElementById('my-accordion'),
-  config
-);
-```
-
-#### Default config
-
-```javascript
-{
-  buttonSelector: '[data-accordion-toggle]', // element for activating/deactivating accordion sections. also enables roving tabindex navigation.
-}
-```
-
-## Accessibility
-
-Accordion is built according to [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/#accordion).
-Current implementation differs in markup from WAI-ARIA Authoring Practices 1.1 recommended markup. We used unoredered list instead of description list. This shoud not have any implications on accessibility or semantics.
-
-Accordion.static.js provides keyboard navigation via roving tabindex.

package/src/components/Alert/Alert.mdx

@@ -1,141 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Button from '../Button';
-import LinkDefault from '../Link';
-import IconList from '../IconList';
-
-import Alert from './';
-
-# Alert
-
-If you need to notify user about something specific, or if you want to explain
-something shortly, this is the element to do it.
-
-## Variants
-
-### Title
-
-<Preview>
-  <Alert title="Toto je jednoduchá správa" />
-</Preview>
-
-### Title and Description
-
-<Preview>
-  <Alert
-    title="Dobre vedieť!"
-    description="Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením."
-  />
-</Preview>
-
-### Title and Buttons
-
-<Preview>
-  <Alert
-    title="Prosím prihláste sa."
-    actionButtons={[<Button>Prihlásiť sa</Button>, <Button>Skryť</Button>]}
-  />
-</Preview>
-
-### Title, Description and Buttons
-
-<Preview>
-  <Alert
-    title="Prihlásiť sa je jednoduché a rozumné"
-    description="Napríklad: Prihlásení používatelia vidia krajšie ceny ako neprihlásení. Zváž to, ak máš u nás už účet. Neoľutuješ."
-    actionButtons={<Button>Prihlásiť sa</Button>}
-  />
-</Preview>
-
-## Types
-
-There are four types of alert messages you can choose from.
-
-- [Info](#info)
-- [Success](#success)
-- [Warning](#warning)
-- [Danger](#danger)
-
-### Info
-
-`info` is default type of alert. It's used for simple, not most important,
-messages for the user if something happend.
-
-<Preview>
-  <Alert title="Toto je jednoduchá správa" />
-</Preview>
-
-### Success
-
-Best feeling is when something went well. You can notify the user about successful
-things with `success` type.
-
-<Preview>
-  <Alert type="success" title="Výborne. Všetko prebehlo rýchlo a hladko" />
-</Preview>
-
-### Warning
-
-If you need to warn user about anything use `warning` type.
-
-<Preview>
-  <Alert type="warning" title="Na toto si daj pozor!" />
-</Preview>
-
-### Danger
-
-If warning is not enought and you need to show error message, use `danger` type.
-
-<Preview>
-  <Alert type="danger" title="Stala sa chyba" />
-</Preview>
-
-## Custom title renderer
-
-Alert spacing is quite strict and works 99% of time. In rare cases, the title requires a little more space to breathe. To achieve that, you can render a custom title using the `renderTitle` prop.
-
-<Preview>
-  <Alert
-    title="Prihlásiť sa je jednoduché a rozumné"
-    renderTitle={props => (
-      <h3 className="alert__title mb-medium">{props.title}</h3>
-    )}
-    description={
-      <IconList
-        className="reset-font-weight"
-        items={[
-          {
-            icon: 'tick',
-            content: 'Bonus na nové zariadenie až do 440 €',
-          },
-          {
-            icon: 'tick',
-            content: 'Bezúročné splátky zariadenia',
-          },
-          {
-            icon: 'tick',
-            content: 'Doručenie zadarmo',
-          },
-        ]}
-      />
-    }
-    actionButtons={<Button>Prihlásiť sa</Button>}
-  />
-</Preview>
-
-## Full width
-
-If you need full width Alert, you can use `isFullWidth` prop. Max width on text remamains the same, because of readability.
-
-<Preview>
-  <Alert
-    isFullWidth
-    title="Dobre vedieť!"
-    description="Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením."
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Alert />" component={Alert} />

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

@@ -1,163 +0,0 @@
-import { render } from "@testing-library/react";
-
-import { AnchorNavigation } from "../AnchorNavigation";
-
-const basicItems = [
-  { label: "Key Features", href: "#features", isActive: true },
-  { label: "Pricing", href: "#pricing" },
-  { label: "Getting Started", href: "#getting-started" },
-  { label: "Contact", href: "#contact" },
-];
-
-const moreItems = [
-  { label: "Overview", href: "#overview", isActive: true },
-  { label: "Features", href: "#features" },
-  { label: "Documentation", href: "#docs" },
-  { label: "API Reference", href: "#api" },
-  { label: "Examples", href: "#examples" },
-  { label: "Support", href: "#support" },
-];
-
-describe("rendering AnchorNavigation", () => {
-  describe("initial state", () => {
-    it("has default class anchor-navigation", () => {
-      const { getByTestId } = render(
-        <AnchorNavigation data-testid="test-id" items={basicItems} />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("anchor-navigation");
-    });
-
-    it("has data-anchor-navigation attribute", () => {
-      const { getByTestId } = render(
-        <AnchorNavigation data-testid="test-id" items={basicItems} />,
-      );
-      expect(getByTestId("test-id")).toHaveAttribute("data-anchor-navigation");
-    });
-
-    it("renders container with anchor-navigation__content class", () => {
-      const { container } = render(<AnchorNavigation items={basicItems} />);
-      expect(
-        container.querySelector(".anchor-navigation__content"),
-      ).toBeInTheDocument();
-    });
-
-    it("renders grid with correct classes", () => {
-      const { container } = render(<AnchorNavigation items={basicItems} />);
-      const grid = container.querySelector(".anchor-navigation__content-left");
-      expect(grid).toBeInTheDocument();
-      expect(grid).toHaveClass("list-inline");
-      expect(grid).toHaveClass("horizontal-scroll");
-      expect(grid).toHaveClass("mb-none");
-    });
-  });
-
-  describe("passed props", () => {
-    it("renders all navigation items", () => {
-      const { getByText } = render(<AnchorNavigation items={basicItems} />);
-
-      expect(getByText("Key Features")).toBeInTheDocument();
-      expect(getByText("Pricing")).toBeInTheDocument();
-      expect(getByText("Getting Started")).toBeInTheDocument();
-      expect(getByText("Contact")).toBeInTheDocument();
-    });
-
-    it("renders navigation items as links with correct href", () => {
-      const { container } = render(<AnchorNavigation items={basicItems} />);
-
-      const featuresLink = container.querySelector('a[href="#features"]');
-      const pricingLink = container.querySelector('a[href="#pricing"]');
-
-      expect(featuresLink).toBeInTheDocument();
-      expect(featuresLink).toHaveTextContent("Key Features");
-      expect(pricingLink).toBeInTheDocument();
-      expect(pricingLink).toHaveTextContent("Pricing");
-    });
-
-    it("applies active class to items with isActive prop", () => {
-      const { container } = render(<AnchorNavigation items={basicItems} />);
-
-      const activeLink = container.querySelector('a[href="#features"]');
-      const inactiveLink = container.querySelector('a[href="#pricing"]');
-
-      expect(activeLink).toHaveClass("is-active");
-      expect(inactiveLink).not.toHaveClass("is-active");
-    });
-
-    it("applies anchor-navigation__item class to all links", () => {
-      const { container } = render(<AnchorNavigation items={basicItems} />);
-
-      const links = container.querySelectorAll(".anchor-navigation__item");
-      expect(links).toHaveLength(basicItems.length);
-    });
-
-    it("renders multiple items correctly", () => {
-      const { getByText } = render(<AnchorNavigation items={moreItems} />);
-
-      expect(getByText("Overview")).toBeInTheDocument();
-      expect(getByText("Features")).toBeInTheDocument();
-      expect(getByText("Documentation")).toBeInTheDocument();
-      expect(getByText("API Reference")).toBeInTheDocument();
-      expect(getByText("Examples")).toBeInTheDocument();
-      expect(getByText("Support")).toBeInTheDocument();
-    });
-
-    it("applies custom className", () => {
-      const { getByTestId } = render(
-        <AnchorNavigation
-          data-testid="test-id"
-          items={basicItems}
-          className="custom-class"
-        />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("anchor-navigation");
-      expect(getByTestId("test-id")).toHaveClass("custom-class");
-    });
-  });
-
-  describe("children content", () => {
-    it("renders children in content-right section when provided", () => {
-      const { container, getByText } = render(
-        <AnchorNavigation items={basicItems}>
-          <div>Additional Content</div>
-        </AnchorNavigation>,
-      );
-
-      const contentRight = container.querySelector(
-        ".anchor-navigation__content-right",
-      );
-      expect(contentRight).toBeInTheDocument();
-      expect(getByText("Additional Content")).toBeInTheDocument();
-    });
-
-    it("does not render content-right section when no children", () => {
-      const { container } = render(<AnchorNavigation items={basicItems} />);
-
-      const contentRight = container.querySelector(
-        ".anchor-navigation__content-right",
-      );
-      expect(contentRight).not.toBeInTheDocument();
-    });
-
-    it("renders complex children content", () => {
-      const { getByText, getByRole } = render(
-        <AnchorNavigation items={basicItems}>
-          <div className="pricing">
-            <div className="bold">2 €</div>
-            <div>No commitment</div>
-          </div>
-          <button>Get Started</button>
-        </AnchorNavigation>,
-      );
-
-      expect(getByText("2 €")).toBeInTheDocument();
-      expect(getByText("No commitment")).toBeInTheDocument();
-      expect(getByRole("button", { name: "Get Started" })).toBeInTheDocument();
-    });
-  });
-
-  describe("displayName", () => {
-    it("has correct displayName", () => {
-      expect(AnchorNavigation.displayName).toBe("AnchorNavigation");
-    });
-  });
-});