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

package/src/components/Expander/Expander.mdx

@@ -0,0 +1,153 @@
+import {
+  ComponentDocs,
+  Code,
+  Note,
+  md,
+} from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+import Expander from './index';
+import Icon from '../Icon';
+
+# Expander
+
+The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for.
+
+## Basic Usage
+
+<Preview>
+  <Expander summary="Show details">
+    This is the content that will be hidden until the user clicks the summary
+    text.
+  </Expander>
+</Preview>
+
+## Changing the summary text
+
+Add the `summaryOpened` prop to change the text displayed when the content is visible.
+
+<Preview>
+  <Expander summary="Show details" summaryOpened="Hide details">
+    This is the content that will be hidden until the user clicks the summary
+    text.
+  </Expander>
+</Preview>
+
+## IsInverted
+
+The `isInverted` prop can be used to change the color of the summary text.
+
+<Preview bgTheme="black">
+  <Expander summary="Show details on black background" isInverse>
+    This is the content that will be hidden until the user clicks the summary
+    text. <Icon name="money-box" size="large" color="orange" />{' '}
+    <Icon name="money-box" size="large" color="orange" />{' '}
+    <Icon name="money-box" size="large" color="orange" />
+  </Expander>
+</Preview>
+
+## Custom Icon
+
+Use the `renderSummary` prop to customize the summary icon. Icon is rotating thanks to `data-summary-icon` attribute, which needs to be present on the icon.
+
+<Preview>
+  <Expander
+    summary="Wave them like you just don't care"
+    renderSummary={({ summary }) => (
+      <>
+        <span>{summary}</span>{' '}
+        <Icon name="accessibility-motor" data-summary-icon size="medium" />
+      </>
+    )}
+  >
+    This is the content that will be hidden until the user clicks the summary
+    text.
+  </Expander>
+</Preview>
+
+## Custom Summary text
+
+Use the `renderSummary` and `renderSummaryOpened` props to customize the summary text. Icons does not rotate in this case.
+
+<Preview>
+  <Expander
+    summary="This is the custom summary text"
+    renderSummary={({ summary }) => (
+      <>
+        <p className="h3 mb-none">{summary}</p>{' '}
+        <Icon name="money-box" size="large" color="info" />
+      </>
+    )}
+    summaryOpened="Hide the custom summary text"
+    renderSummaryOpened={({ summaryOpened }) => (
+      <>
+        <p className="h3 mb-none">{summaryOpened}</p>{' '}
+        <Icon name="birthday" size="large" color="danger" />
+      </>
+    )}
+  >
+    This is the content that will be hidden until the user clicks the summary
+    text.
+  </Expander>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Expander />" component={Expander} />
+
+## JS module reference
+
+All elements with `[data-expander]` will be initialised automatically.
+
+### Custom initialization
+
+```javascript
+const myAccordion = new window.ODS.modules.Expander(
+  document.getElementById('my-expander')
+);
+```
+
+### Methods
+
+```js
+const instance = document.querySelector(elementSelector).ODS_Expander;
+instance.method();
+```
+
+<DocsTable
+  data={[
+    {
+      prop: 'init',
+      type: 'func',
+      default: '() => {}',
+      description:
+        'Initialize an instance. Called automatically on `new BlockAction(el, config)`',
+    },
+    {
+      prop: 'destroy',
+      type: 'func',
+      default: '() => {}',
+      description: 'Destroy the instance - removes all listeners',
+    },
+    {
+      prop: 'update',
+      type: 'func',
+      default: '() => {}',
+      description: 'Destroys the instance and calls a fresh init().',
+    },
+    {
+      prop: 'toggle',
+      type: 'func',
+      default: '() => {}',
+      description: 'Toggle the visibility of the content.',
+    },
+  ]}
+/>
+
+## Accessibility
+
+The Expander component uses the `<details>` and `<summary>` HTML elements, which are natively supported by most screen readers. This ensures that the component is accessible to users who rely on assistive technologies.
+
+<Note>
+  Ensure that the `summaryText` prop provides a clear and concise description of
+  the content that will be revealed.
+</Note>

package/src/components/Expander/Expander.static.ts

@@ -0,0 +1,59 @@
+interface HTMLElementWithExpander extends HTMLElement {
+  ODS_Expander?: Expander;
+}
+
+export default class Expander {
+  private element: HTMLElementWithExpander;
+
+  constructor(element: HTMLElementWithExpander) {
+    this.element = element;
+    this.toggle = this.toggle.bind(this);
+    this.element.ODS_Expander = this;
+    this.init();
+  }
+
+  toggle() {
+    console.log('Toggle event triggered');
+    const summary = this.element.querySelector('summary');
+    
+    if (!summary) {
+      return;
+    }
+    
+    const summaryText = summary.getAttribute('data-summary');
+    const summaryOpenedText = summary.getAttribute('data-summary-opened');
+
+    summary.setAttribute(
+      'aria-expanded',
+      summary.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
+    );
+
+    if (summaryOpenedText) {
+      const text =
+        summary.getAttribute('aria-expanded') === 'true'
+          ? summaryOpenedText
+          : summaryText;
+
+      if (text) {
+        summary.setAttribute('aria-label', text);
+      }
+    }
+  }
+
+  init() {
+    this.element.addEventListener('toggle', this.toggle);
+  }
+
+  update() {
+    this.destroy();
+    this.init();
+  }
+
+  destroy() {
+    this.element.removeEventListener('toggle', this.toggle);
+  }
+
+  static getInstance(el: HTMLElementWithExpander | null): Expander | null {
+    return el && el.ODS_Expander ? el.ODS_Expander : null;
+  }
+}

package/src/components/Expander/Expander.tsx

@@ -0,0 +1,99 @@
+import React, { useMemo } from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../utils/hooks";
+import { Icon } from "../Icon";
+
+import ExpanderStatic from "./Expander.static";
+
+const CLASS_ROOT = "expander";
+
+interface ExpanderProps {
+  /** Inverse buttons for dark backgrounds */
+  /** Dark theme */
+  colorScheme?: "light" | "dark";
+  /** Custom summary text renderer. Passes props as function parameter. */
+  renderSummary?: (props: ExpanderProps) => React.ReactNode;
+  /** Custom summary text renderer when details are opened. Passes props as function parameter. */
+  renderSummaryOpened?: (props: ExpanderProps) => React.ReactNode;
+  /** Trigger text */
+  summary?: string;
+  /** Trigger text when details are opened */
+  summaryOpened?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Child elements */
+  children?: React.ReactNode;
+  /** Additional HTML attributes */
+  [key: string]: any;
+}
+
+export const Expander: React.FC<ExpanderProps> = (props) => {
+  const {
+    className,
+    children,
+    summary,
+    summaryOpened,
+    renderSummary,
+    renderSummaryOpened,
+    colorScheme = "light",
+    ...other
+  } = props;
+  const [expanderRef] = useStatic(ExpanderStatic);
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
+    },
+    className,
+  );
+
+  const summaryText = useMemo(
+    () =>
+      renderSummary
+        ? renderSummary(props)
+        : summary && (
+            <>
+              {summary}{" "}
+              <Icon alt="stav" name="chevron-down" data-summary-icon />
+            </>
+          ),
+    [renderSummary, props, summary],
+  );
+
+  const summaryOpenedText = useMemo(
+    () =>
+      renderSummaryOpened
+        ? renderSummaryOpened(props)
+        : summaryOpened && (
+            <>
+              {summaryOpened}{" "}
+              <Icon alt="stav" name="chevron-down" data-summary-icon />
+            </>
+          ),
+    [renderSummaryOpened, props, summaryOpened],
+  );
+
+  return (
+    <details className={classes} data-expander ref={expanderRef} {...other}>
+      <summary
+        aria-expanded="false"
+        aria-label={summary}
+        data-summary={summary}
+        data-summary-opened={summaryOpened}
+      >
+        <div className={`${CLASS_ROOT}__summary`}>{summaryText}</div>
+        {summaryOpenedText && (
+          <div className={`${CLASS_ROOT}__summary--opened`}>
+            {summaryOpenedText}
+          </div>
+        )}
+      </summary>
+      <div>{children}</div>
+    </details>
+  );
+};
+
+Expander.displayName = "Expander";

package/src/components/Expander/index.ts

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

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

@@ -0,0 +1,63 @@
+@use "sass:math";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+
+@layer components {
+  .expander {
+    margin-bottom: space.get();
+
+    summary {
+      font-weight: 700;
+      line-height: 1.25;
+      display: flex;
+      align-items: center;
+
+      &::marker {
+        content: "";
+      }
+      // Hide on Safari
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &:hover {
+        cursor: pointer;
+        color: var(--color-text-accent);
+      }
+    }
+
+    &__summary,
+    &__summary--opened {
+      gap: space.get("xsmall");
+    }
+
+    &__summary {
+      display: flex;
+      align-items: center;
+    }
+
+    &__summary--opened {
+      display: none;
+    }
+
+    &[open] {
+      svg[data-summary-icon] {
+        transform: rotate(180deg) !important;
+      }
+
+      summary {
+        margin-bottom: space.get();
+      }
+
+      .expander__summary:has(+ .expander__summary--opened) {
+        display: none;
+      }
+
+      .expander__summary--opened {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Expander } from '../Expander';
+import { Icon } from '../../Icon';
+
+const example = (
+  <>
+    <Expander summary="Show details">Content</Expander>
+
+    <Expander summary="Show details" summaryOpened="Hide details">
+      Content
+    </Expander>
+
+    <Expander summary="Show details" colorScheme="dark">
+      Content
+    </Expander>
+
+    <Expander
+      summary="Custom summary"
+      renderSummary={({ summary }) => (
+        <>
+          <span>{summary}</span>
+          <Icon name="accessibility-motor" data-summary-icon size="medium" />
+        </>
+      )}
+    >
+      Content
+    </Expander>
+
+    <Expander
+      summary="Show details"
+      summaryOpened="Hide details"
+      renderSummaryOpened={({ summaryOpened }) => (
+        <>
+          <span>{summaryOpened}</span>
+          <Icon name="birthday" size="large" color="danger" />
+        </>
+      )}
+    >
+      Content
+    </Expander>
+  </>
+);
+
+it('is valid html', () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      'element-permitted-content': 'off',
+    },
+  });
+});
+
+it('is accessible', async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Expander } from '../Expander';
+import { Icon } from '../../Icon';
+
+describe('Expander', () => {
+  it('renders basic expander with summary text', () => {
+    render(<Expander summary="Show details">Content</Expander>);
+    expect(screen.getByText('Show details')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('changes summary text when opened', () => {
+    render(
+      <Expander summary="Show details" summaryOpened="Hide details">
+        Content
+      </Expander>
+    );
+
+    expect(screen.getByText('Show details')).toBeInTheDocument();
+
+    // Click to open the expander
+    fireEvent.click(screen.getByText('Show details'));
+
+    expect(screen.getByText('Hide details')).toBeInTheDocument();
+  });
+
+  it('supports inverse mode', () => {
+    const { container } = render(
+      <Expander summary="Show details" colorScheme="dark">
+        Content
+      </Expander>
+    );
+
+    expect(container.querySelector('.expander.is-dark')).toBeInTheDocument();
+  });
+
+  it('renders custom summary with renderSummary prop', () => {
+    render(
+      <Expander
+        summary="Custom summary"
+        renderSummary={({ summary }) => (
+          <>
+            <span data-testid="custom-summary">{summary}</span>
+            <Icon name="accessibility-motor" data-summary-icon size="medium" />
+          </>
+        )}
+      >
+        Content
+      </Expander>
+    );
+
+    expect(screen.getByTestId('custom-summary')).toHaveTextContent(
+      'Custom summary'
+    );
+  });
+
+  it('renders custom summary when opened with renderSummaryOpened prop', () => {
+    render(
+      <Expander
+        summary="Show details"
+        summaryOpened="Hide details"
+        renderSummaryOpened={({ summaryOpened }) => (
+          <>
+            <span data-testid="custom-summary-opened">{summaryOpened}</span>
+            <Icon name="birthday" size="large" color="danger" />
+          </>
+        )}
+      >
+        Content
+      </Expander>
+    );
+
+    // Click to open the expander
+    fireEvent.click(screen.getByText('Show details'));
+
+    expect(screen.getByTestId('custom-summary-opened')).toHaveTextContent(
+      'Hide details'
+    );
+  });
+
+  it('toggles content visibility when clicked', () => {
+    const { container } = render(
+      <Expander summary="Show details">
+        <p data-testid="content">Hidden content</p>
+      </Expander>
+    );
+
+    const details = container.querySelector('details');
+    expect(details).not.toHaveAttribute('open');
+
+    // Click to open
+    fireEvent.click(screen.getByText('Show details'));
+    expect(details).toHaveAttribute('open');
+
+    // Click to close
+    fireEvent.click(screen.getByText('Show details'));
+    expect(details).not.toHaveAttribute('open');
+  });
+
+  it('has default class expander', () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details">
+        Content
+      </Expander>
+    );
+    expect(getByTestId('test-id')).toHaveClass('expander');
+  });
+
+  it('has additional class when className is set', () => {
+    const { getByTestId } = render(
+      <Expander
+        data-testid="test-id"
+        className="test-class"
+        summary="Show details"
+      >
+        Content
+      </Expander>
+    );
+    expect(getByTestId('test-id')).toHaveClass('expander');
+    expect(getByTestId('test-id')).toHaveClass('test-class');
+  });
+});

package/src/components/FeatureAccordion/FeatureAccordion.mdx

@@ -0,0 +1,33 @@
+import { Preview } from '../../styleguide/';
+import FeatureAccordion from './FeatureAccordion';
+
+# Feature Accordion
+
+Feature Accordion je kombinovaná komponenta, ktorá prepája accordion s obrázkami. Umožňuje zobrazovanie rôznych obrázkov na základe aktívneho accordion itemu, pričom zabezpečuje, že môže byť vždy otvorený len jeden item.
+
+## Základné použitie
+
+<Preview>
+  <FeatureAccordion />
+</Preview>
+
+## Funkcionality
+
+- **Prepojenie s obrázkami**: Každý accordion item je prepojený s príslušným obrázkom cez jedinečný identifikátor
+- **Jednočasné otvorenie**: Vždy môže byť otvorený len jeden accordion item
+- **Automatické prepínanie**: Kliknutím na accordion item sa automaticky zobrazí príslušný obrázok
+- **Responsive layout**: Komponenta používa Grid systém pre responzívne rozloženie
+
+## Štruktúra dát
+
+Komponenta očakáva pole objektov s nasledovnou štruktúrou:
+
+```typescript
+interface FeatureItem {
+  id: string;          // Jedinečný identifikátor
+  title: string;       // Titulok accordion itemu  
+  content: ReactNode;  // Obsah accordion itemu
+  imageUrl: string;    // URL obrázka
+  imageAlt: string;    // Alt text pre obrázok
+}
+```