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

package/src/components/Code/oneDarkProTheme.ts

@@ -0,0 +1,70 @@
+const theme = {
+  plain: {
+    color: '#abb2bf',
+    backgroundColor: '#282c34',
+  },
+  styles: [
+    {
+      types: ['constant', 'keyword', 'selector'],
+      style: {
+        color: 'rgb(198, 120, 221)',
+      },
+    },
+    {
+      types: ['operator', 'symbol'],
+      style: {
+        color: 'rgb(86, 182, 194)',
+      },
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: 'rgb(171, 178, 191)',
+      },
+    },
+    {
+      types: ['variable', 'class-name', 'function', 'namespace', 'changed'],
+      style: {
+        color: 'rgb(229, 192, 123)',
+      },
+    },
+    {
+      types: ['char', 'tag', 'deleted'],
+      style: {
+        color: 'rgb(224, 108, 117)',
+      },
+    },
+    {
+      types: ['builtin', 'number'],
+      style: {
+        color: 'rgb(209, 154, 102)',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: '#d19a66',
+      },
+    },
+    {
+      types: ['inserted', 'string'],
+      style: {
+        color: 'rgb(152, 195, 121)',
+      },
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: 'rgb(92, 99, 112)',
+      },
+    },
+    {
+      types: ['attr-value'],
+      style: {
+        color: '#98c379',
+      },
+    },
+  ],
+};
+
+export default theme;

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

@@ -0,0 +1,58 @@
+/* Code component styles */
+.code {
+  font-feature-settings: 'calt' 1;
+  text-rendering: optimizeLegibility;
+}
+
+.code[class*='language-'] {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+}
+
+/* Inline code styles */
+.code--inline {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+/* Punctuation token color */
+.token.punctuation {
+  color: #abb2bf;
+}
+
+/* Code container styles */
+.code-container {
+  &.inline {
+    display: inline;
+  }
+  
+  &.block {
+    display: block;
+  }
+}
+
+/* Inline code element styles */
+.code-inline {
+  display: inline;
+  font-family: monospace;
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.625; /* leading-relaxed */
+  white-space: pre-wrap;
+  max-height: 300px; /* max-h-[300px] */
+}
+
+/* Block code element styles */
+.code-block {
+  display: block;
+  font-family: monospace;
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.625; /* leading-relaxed */
+  white-space: pre-wrap;
+  max-height: 300px; /* max-h-[300px] */
+}
+
+/* Pre element styles for block code */
+.pre-block {
+  overflow: auto;
+  margin: 0;
+  margin-bottom: 1rem; /* mb-4 */
+} 

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

@@ -200,7 +200,6 @@ describe("Container Conformance Tests", () => {
       expect(containerElement).toHaveAttribute("id", "test-id");
       expect(containerElement).toHaveAttribute("data-testid", "test-container");
       expect(containerElement).toHaveAttribute("aria-label", "Test container");
-      expect(containerElement).toHaveStyle("background-color: red");
     });
 
     it("should handle event handlers correctly", () => {

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

@@ -149,15 +149,6 @@ describe("Container Component", () => {
       expect(element).toHaveAttribute("title", "Test container");
     });
 
-    it("should forward style prop", () => {
-      const customStyle = { backgroundColor: "red", color: "white" };
-      const { container } = render(<Container style={customStyle} />);
-      const element = container.firstChild;
-
-      expect(element).toHaveStyle("background-color: red");
-      expect(element).toHaveStyle("color: white");
-    });
-
     it("should forward event handlers", async () => {
       const user = userEvent.setup();
       const handleClick = jest.fn();

package/src/components/Controls/styles/config.scss

@@ -10,15 +10,6 @@ $base: (
 
     font-size: convert.to-rem(18px),
     font-weight: bold,
-
-    transition-duration: 200ms,
-    transition-timing-function: ease-in-out,
-    transition-property: (
-      border-color,
-      background-color,
-      color,
-      outline-color,
-    ),
   ),
   active: (
     transition-property: none,

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/styles/config.scss

@@ -21,8 +21,6 @@ $dropdown-menu-item: (
   default: (
     padding: $space,
     color: var(--color-text-default),
-    transition: #{color 0.2s ease-out 0s,
-    background 0.2s ease-out 0s},
     cursor: pointer,
   ),
   active: (

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

@@ -18,6 +18,7 @@
   background-clip: padding-box;
   border: 2px solid color.$black;
   overflow-y: auto;
+  border-radius: convert.to-rem(5px);
 
   &:empty {
     display: none;