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

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -0,0 +1,171 @@
+"use client";
+import React from "react";
+import cx from "classnames";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { Image } from "../Image";
+import { Icon } from "../Icon";
+
+export interface DocumentationSidebarItem {
+  label: string;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  items?: DocumentationSidebarItem[];
+}
+
+export interface DocumentationSidebarProps {
+  items: DocumentationSidebarItem[];
+  className?: string;
+  /** Called when user selects a different item */
+  onChangeHref?: (href: string) => void;
+  /** Content to render in the main area */
+  children?: React.ReactNode;
+}
+
+const CLASS_ROOT = "documentation-sidebar";
+
+const SidebarItem: React.FC<{
+  item: DocumentationSidebarItem;
+  pathname: string;
+  level?: number;
+  onSelect: (href: string) => void;
+}> = ({ item, pathname, level = 0, onSelect }) => {
+  const [isExpanded, setIsExpanded] = React.useState(level === 0);
+  const hasChildren = item.items && item.items.length > 0;
+  const isActive = item.href === pathname;
+
+  const handleToggle = () => {
+    if (hasChildren) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  return (
+    <li className={`${CLASS_ROOT}__list-item`}>
+      <div
+        className={cx(`${CLASS_ROOT}__item`, {
+          [`${CLASS_ROOT}__item--has-children`]: hasChildren,
+          [`${CLASS_ROOT}__item--expanded`]: isExpanded,
+        })}
+        style={{ paddingLeft: `${level * 16}px` }}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            className={cx(`${CLASS_ROOT}__dropdown-toggle`, {
+              [`${CLASS_ROOT}__dropdown-toggle--active`]: isActive,
+            })}
+            onClick={handleToggle}
+            aria-expanded={isExpanded}
+          >
+            {item.label}
+            <span className={`${CLASS_ROOT}__dropdown-icon`}>
+              {isExpanded ? "−" : "+"}
+            </span>
+          </button>
+        ) : (
+          <Link
+            prefetch={false}
+            href={item.href || "#"}
+            target={item.target}
+            rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+            className={cx(`${CLASS_ROOT}__link`, {
+              [`${CLASS_ROOT}__link--active`]: isActive,
+            })}
+            onClick={() => item.href && onSelect(item.href)}
+          >
+            {item.label}
+          </Link>
+        )}
+      </div>
+
+      {hasChildren && isExpanded && (
+        <ul className={`${CLASS_ROOT}__sub-list`}>
+          {item.items!.map((subItem, index) => (
+            <SidebarItem
+              key={`${subItem.label}-${index}`}
+              item={subItem}
+              pathname={pathname}
+              level={level + 1}
+              onSelect={onSelect}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
+  props,
+) => {
+  const { items, className, onChangeHref, children } = props;
+
+  const [isMenuOpenOnMobile, setIsMenuOpenOnMobile] = React.useState(false);
+  const pathname = usePathname();
+
+  React.useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsMenuOpenOnMobile(false);
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, []);
+
+  const handleSelect = (href: string) => {
+    onChangeHref?.(href);
+    setIsMenuOpenOnMobile(false);
+  };
+
+  const classes = cx(CLASS_ROOT, className, {
+    [`${CLASS_ROOT}--open`]: isMenuOpenOnMobile,
+  });
+
+  return (
+    <div className={classes}>
+      <button
+        type="button"
+        className={`${CLASS_ROOT}__toggle`}
+        aria-expanded={isMenuOpenOnMobile}
+        aria-controls={`${CLASS_ROOT}__sidebar`}
+        onClick={() => setIsMenuOpenOnMobile((v) => !v)}
+      >
+        <Icon name="menu" />
+      </button>
+
+      <aside
+        id={`${CLASS_ROOT}__sidebar`}
+        className={`${CLASS_ROOT}__sidebar`}
+        aria-label="Sidebar navigation"
+      >
+        <Image src="/logo.svg" alt="logo" />
+
+        <nav className={`${CLASS_ROOT}__nav`}>
+          <ul className={`${CLASS_ROOT}__list`}>
+            {items.map((item, index) => (
+              <SidebarItem
+                key={`${item.label}-${index}`}
+                item={item}
+                pathname={pathname}
+                onSelect={handleSelect}
+              />
+            ))}
+          </ul>
+        </nav>
+      </aside>
+
+      <main className={`${CLASS_ROOT}__content`}>{children}</main>
+
+      {isMenuOpenOnMobile && (
+        <button
+          type="button"
+          aria-label="Close navigation"
+          className={`${CLASS_ROOT}__backdrop`}
+          onClick={() => setIsMenuOpenOnMobile(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+DocumentationSidebar.displayName = "DocumentationSidebar";

package/src/components/DocumentationSidebar/index.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+
+export { DocumentationSidebar } from "./DocumentationSidebar";
+export type { DocumentationSidebarProps, DocumentationSidebarItem } from "./DocumentationSidebar"; 

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

@@ -0,0 +1,230 @@
+@use "sass:map" as sassmap;
+@use "../../../styles/tokens/breakpoint" as breakpoint;
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/color";
+
+.documentation-sidebar {
+  --sidebar-width: 280px;
+
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  gap: 0;
+  min-height: 100vh;
+
+  &__toggle {
+    margin: 0 !important;
+    position: fixed;
+    left: 16px;
+    top: 16px;
+    z-index: 50;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: #fff;
+    border: 1px solid var(--color-border-subtle);
+    display: none;
+    align-items: center;
+    justify-content: center;
+
+    &:focus-visible {
+      outline: 2px solid #005ea5;
+      outline-offset: 2px;
+    }
+  }
+
+  &__toggle-bar {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background: #111;
+    position: relative;
+  }
+  &__toggle-bar + &__toggle-bar {
+    margin-top: 4px;
+  }
+
+  &__sidebar {
+    position: sticky;
+    top: 0;
+    align-self: start;
+    height: 100vh;
+    overflow: auto;
+    background: var(--color-surface-subtle);
+    padding: 16px;
+  }
+
+  &__sidebar-title {
+    font-weight: 700;
+    font-size: 1.1rem;
+    margin-bottom: 16px;
+    color: #333;
+  }
+
+  &__nav {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__sub-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    // Vertical line for expanded dropdowns - positioned based on parent level
+    &::before {
+      content: "";
+      position: absolute;
+      left: 8px;
+      top: 0;
+      bottom: 0;
+      width: 1.5px;
+      background: var(--color-border-subtle);
+    }
+  }
+
+  // Nested sub-lists get additional offset
+  &__sub-list &__sub-list::before {
+    left: 28px; // 8px + 20px
+  }
+
+  &__sub-list &__sub-list &__sub-list::before {
+    left: 48px; // 28px + 20px
+  }
+
+  &__list-item {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__dropdown-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    border-radius: convert.to-rem(5px);
+    color: var(--color-text-default);
+    text-decoration: none;
+    font-size: 0.9rem;
+    cursor: pointer;
+    text-align: left;
+    font-weight: 600;
+
+    &:hover {
+      font-weight: 700;
+    }
+
+    &--active {
+      color: var(--color-text-inverse);
+      background: var(--color-surface-secondary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: 2px;
+    }
+  }
+
+  &__dropdown-icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 1;
+    color: #666;
+  }
+
+  &__link {
+    display: block;
+    padding: 8px 12px;
+    border-radius: convert.to-rem(5px);
+    color: #666;
+    text-decoration: none;
+    font-size: 0.9rem;
+
+    &:hover {
+      color: var(--color-text-default);
+
+      &--active {
+        color: var(--color-text-inverse);
+      }
+    }
+
+    &--active {
+      color: var(--color-text-inverse) !important;
+      background: var(--color-surface-secondary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: 2px;
+    }
+  }
+
+  &__content {
+    padding: 16px;
+    background: #fff;
+    min-height: 100vh;
+    overflow: auto;
+  }
+
+  &__backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    border: 0;
+    margin: 0;
+    padding: 0;
+    z-index: 40;
+    display: none;
+  }
+
+  // Mobile behavior - below lg breakpoint (992px)
+  @include breakpoint.get(lg, downfrom) {
+    grid-template-columns: 1fr;
+
+    &__toggle {
+      display: inline-flex;
+    }
+
+    &__sidebar {
+      position: fixed;
+      z-index: 60;
+      left: 0;
+      top: 0;
+      width: min(86vw, var(--sidebar-width));
+      transform: translateX(-100%);
+      transition: transform 160ms ease-out;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+    }
+
+    &__content {
+      padding-top: 70px !important;
+      min-height: 100vh;
+    }
+
+    &--open &__sidebar {
+      transform: translateX(0%);
+    }
+
+    &--open &__backdrop {
+      display: block;
+    }
+  }
+}

package/src/components/Dropdown/Dropdown.mdx

@@ -0,0 +1,260 @@
+import Dropdown, {
+  DropdownToggleButton,
+  DropdownItem,
+  DropdownDivider,
+} from './index';
+import Grid, { GridCol } from '../Grid';
+import {
+  ComponentDocs,
+  Code,
+  CodeBlock,
+  Note,
+} from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+import Bar, { BarItem } from './../Bar';
+import Button from './../Button';
+import Icon from './../Icon';
+import Table from './../Table';
+import Tooltip, { InfoTooltip } from './';
+import Select from '../Forms/Select/index';
+
+# Dropdown
+
+It's required to use `id` on dropdown a toogle button for it to work. `id` of dropdown should follow pattern `dropdown-<name>`
+and for toggle buttons `id` pattern `btn-<name>` should be used.
+
+<Preview>
+  <Dropdown
+    id="1"
+    hasSpacing={false}
+    button={{
+      iconName: 'menu-arrow',
+      children: 'Dropdown',
+      iconPosition: 'right',
+    }}
+  >
+    <DropdownItem href="#">Laborum laboris amet minim.</DropdownItem>
+    <DropdownItem disabled href="#">
+      Quis adipisicing eu consectetur.
+    </DropdownItem>
+    <DropdownDivider />
+    <DropdownItem href="#">Deserunt id consectetur esse in.</DropdownItem>
+  </Dropdown>
+</Preview>
+
+## Dropdown Interactive
+
+Dropdown menu with Interactive functionality eg. forms, buttons etc. should not close after click inside of dropdown component. This can be achieved with attribute `[data-dropdown-interactive]`.
+
+<Preview>
+  <Dropdown
+    id="2"
+    hasSpacing={false}
+    isInteractive
+    button={{
+      iconName: 'menu-arrow',
+      children: 'Dropdown',
+      iconPosition: 'right',
+    }}
+  >
+    <DropdownItem href="#">Laborum laboris amet minim.</DropdownItem>
+    <DropdownItem disabled href="#">
+      Quis adipisicing eu consectetur.
+    </DropdownItem>
+    <DropdownDivider />
+    <DropdownItem href="#">Deserunt id consectetur esse in.</DropdownItem>
+  </Dropdown>
+</Preview>
+
+## Focus Trap
+
+Prevents user from leaving the Dropdown using keyboard without closing the Dropdown. Can be achieved with attribute `[data-dropdown-focus-trap]`. In this case Dropdown can be
+close by using `Escape` key, but it's also recommended to use close button. Close buttons `id` needs to follow pattern `close-btn-<name>` for it to work.
+
+<Preview>
+  <Dropdown
+    id="3"
+    hasFocusTrap
+    isInteractive
+    button={{
+      iconName: 'menu-arrow',
+      children: 'With focus trap',
+      iconPosition: 'right',
+    }}
+  >
+    <Select id="select-in-dropdown" style={{ width: '100px' }}>
+      <option>Item 1</option>
+      <option>Item 2</option>
+    </Select>
+  </Dropdown>
+</Preview>
+
+## Position
+
+Dropdown can be aligned to left, right or center side of toggle button.
+
+<Preview>
+  <Grid>
+    <GridCol size={{ md: 4 }}>
+      <Dropdown
+        isInteractive
+        id="4"
+        button={{
+          children: 'Aligned to left',
+        }}
+      >
+        <p>Told ya I'm aligned to left...</p>
+      </Dropdown>
+    </GridCol>
+    <GridCol size={{ md: 4 }}>
+      <Dropdown
+        isInteractive
+        id="5"
+        placement="center"
+        button={{
+          children: 'Aligned to center',
+        }}
+      >
+        <p>Told ya I'm aligned to center...</p>
+      </Dropdown>
+    </GridCol>
+    <GridCol size={{ md: 4 }}>
+      <Dropdown
+        isInteractive
+        id="6"
+        placement="right"
+        button={{
+          children: 'Aligned to right',
+        }}
+      >
+        <p>Told ya I'm aligned to right...</p>
+      </Dropdown>
+    </GridCol>
+  </Grid>
+</Preview>
+
+<ComponentDocs title="<Dropdown />" component={Dropdown} />
+<ComponentDocs title="<DropdownItem />" component={DropdownItem} />
+<ComponentDocs
+  title="<DropdownToggleButton />"
+  component={DropdownToggleButton}
+/>
+<ComponentDocs title="<DropdownDivider />" component={DropdownDivider} />
+
+## JS module reference
+
+All elements with `[data-dropdown]` attribute will be initialised automatically.
+
+### Custom initialisation
+
+```js
+const instance = new window.ODS.modules.Dropdown(
+  document.getElementByUd('my-dropdown'),
+  config
+);
+```
+
+#### Config
+
+<Table
+  className="text-small"
+  headers={[
+    {
+      key: 'col1',
+      label: 'Name',
+    },
+    {
+      key: 'col2',
+      label: 'Description.',
+    },
+  ]}
+  rows={[
+    {
+      col1: 'popperOptions - object',
+      col2: (
+        <React.Fragment>
+          <p className="text-small">
+            <a href="https://popper.js.org/popper-documentation.html#defaults">
+              Popper.js
+            </a>{' '}
+            options object.
+          </p>
+          Default:
+          <CodeBlock>
+            {`{
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  modifiers: [
+    {
+      name: 'eventListeners',
+      options: {
+        scroll: false,
+        resize: false,
+      },
+    },
+    {
+      name: 'flip',
+      options: {
+        fallbackPlacements: ['bottom-end', 'bottom-start', 'bottom'],
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [0, -1],
+      },
+    },
+  ],
+  }`}
+          </CodeBlock>
+        </React.Fragment>
+      ),
+    },
+  ]}
+/>
+
+### Methods
+
+<Table
+  className="text-small"
+  headers={[
+    {
+      key: 'col1',
+      label: 'Name',
+    },
+    {
+      key: 'col2',
+      label: 'Description.',
+    },
+  ]}
+  rows={[
+    {
+      col1: 'init',
+      col2: 'Creates a new instance',
+    },
+    {
+      col1: 'destroy',
+      col2: 'Destroy the instance - removes all listeners, destroys Popper.js instance and removes the dialog element',
+    },
+    {
+      col1: 'update',
+      col2: 'Updates Popper.js instance',
+    },
+    {
+      col1: 'handleVisibility',
+      col2: 'Shows / hide the Dropdown dialog',
+    },
+    {
+      col1: 'handleKeyPress',
+      col2: 'Handle key press events',
+    },
+    {
+      col1: 'handleClick',
+      col2: 'Handle click events',
+    },
+    {
+      col1: 'static getInstance(el: element)',
+      col2: 'Get instance of `Dropdown` attached to specific DOM element (usually `[data-dropdown]`).',
+    },
+  ]}
+/>