@orangesk/orange-design-system 2.0.0-beta.6 → 2.0.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "private": false,
   "engines": {
     "node": ">=18.x"
@@ -34,7 +34,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.3",
+    "@next/mdx": "^15.5.4",
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -44,9 +44,9 @@
     "diff2html": "^3.4.52",
     "dompurify": "^3.2.7",
     "html-react-parser": "^5.2.6",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
-    "next": "15.5.3",
+    "next": "15.5.4",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "pretty": "^2.0.0",

package/src/assets/icons/article.svg

@@ -1,7 +1,7 @@
 <svg width="80" height="80" viewBox="0 0 80 80" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M55.1469 22.6034C56.5877 22.6034 57.7543 23.7749 57.7543 25.2157C57.7537 26.6558 56.5872 27.8231 55.1469 27.8231L37.7543 27.8231C36.3146 27.8224 35.1476 26.6554 35.1469 25.2157C35.1469 23.7754 36.3142 22.6041 37.7543 22.6034L55.1469 22.6034Z" fill="black"/>
-  <path d="M55.1469 34.774C56.5877 34.774 57.7543 35.9456 57.7543 37.3863C57.7537 38.8265 56.5872 39.9937 55.1469 39.9937L37.7543 39.9937C36.3146 39.993 35.1476 38.826 35.1469 37.3863C35.1469 35.946 36.3142 34.7747 37.7543 34.774L55.1469 34.774Z" fill="black"/>
-  <path d="M55.1469 46.9497C56.5877 46.9497 57.7543 48.1212 57.7543 49.562C57.7537 51.0021 56.5872 52.1694 55.1469 52.1694H37.7543C36.3146 52.1687 35.1476 51.0017 35.1469 49.562C35.1469 48.1217 36.3142 46.9504 37.7543 46.9497L55.1469 46.9497Z" fill="black"/>
-  <path d="M69.9268 60.8679C69.9261 65.6699 66.0325 69.5642 61.2305 69.5642H15.3613C11.9101 69.5633 9.07156 66.9393 8.73047 63.5779L8.69629 62.8992V29.5349H22.9736V8.69507H69.9268V60.8679ZM28.1885 60.8679L28.1445 61.7566C28.0515 62.6713 27.8104 63.5408 27.4561 64.3494H61.2305C63.1511 64.3494 64.7113 62.7884 64.7119 60.8679V13.9148H28.1885V60.8679ZM14.2773 60.8679C14.2785 62.7875 15.8343 64.3437 17.7539 64.3445H19.4922C21.4125 64.3445 22.9676 62.788 22.9688 60.8679V34.7839H14.2773V60.8679Z" fill="black"/>
+  <path d="M55.1469 22.6034C56.5877 22.6034 57.7543 23.7749 57.7543 25.2157C57.7537 26.6558 56.5872 27.8231 55.1469 27.8231L37.7543 27.8231C36.3146 27.8224 35.1476 26.6554 35.1469 25.2157C35.1469 23.7754 36.3142 22.6041 37.7543 22.6034L55.1469 22.6034Z" fill="currentColor"/>
+  <path d="M55.1469 34.774C56.5877 34.774 57.7543 35.9456 57.7543 37.3863C57.7537 38.8265 56.5872 39.9937 55.1469 39.9937L37.7543 39.9937C36.3146 39.993 35.1476 38.826 35.1469 37.3863C35.1469 35.946 36.3142 34.7747 37.7543 34.774L55.1469 34.774Z" fill="currentColor"/>
+  <path d="M55.1469 46.9497C56.5877 46.9497 57.7543 48.1212 57.7543 49.562C57.7537 51.0021 56.5872 52.1694 55.1469 52.1694H37.7543C36.3146 52.1687 35.1476 51.0017 35.1469 49.562C35.1469 48.1217 36.3142 46.9504 37.7543 46.9497L55.1469 46.9497Z" fill="currentColor"/>
+  <path d="M69.9268 60.8679C69.9261 65.6699 66.0325 69.5642 61.2305 69.5642H15.3613C11.9101 69.5633 9.07156 66.9393 8.73047 63.5779L8.69629 62.8992V29.5349H22.9736V8.69507H69.9268V60.8679ZM28.1885 60.8679L28.1445 61.7566C28.0515 62.6713 27.8104 63.5408 27.4561 64.3494H61.2305C63.1511 64.3494 64.7113 62.7884 64.7119 60.8679V13.9148H28.1885V60.8679ZM14.2773 60.8679C14.2785 62.7875 15.8343 64.3437 17.7539 64.3445H19.4922C21.4125 64.3445 22.9676 62.788 22.9688 60.8679V34.7839H14.2773V60.8679Z" fill="currentColor"/>
 </svg>

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

@@ -1,8 +1,8 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tools/convert";
 
 $spacing: (
-  default: space.get('small') 0,
-  large: space.get('medium') 0,
+  default: convert.to-rem(15px) 0,
+  large: convert.to-rem(20px) 0,
 );
 
-$enclosed-spacing: space.get('medium');
+$enclosed-spacing: convert.to-rem(20px);

package/src/components/Accordion/styles/mixins.scss

@@ -20,10 +20,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border-top: 1px solid var(--color-border-strong);
+  border-bottom: 1px solid var(--color-border-strong);
 
   &:last-child {
-    border-bottom: 1px solid var(--color-border-strong);
+    border-bottom: 0px;
   }
 
   ul {

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import cx from "classnames";
 import { Grid, GridCol } from "../Grid";
 import { Link } from "../Link";
+import { Container } from "../Container";
 import { useStatic } from "../../utils/hooks";
 import AnchorNavigationStatic from "./AnchorNavigation.static";
 
@@ -41,33 +42,29 @@ const AnchorNavigation = ({
 
   return (
     <div className={classes} ref={anchorNavRef}>
-      <div className={`${CLASS_ROOT}__content`}>
-        <Grid
-          className={`list-unstyled list-inline horizontal-scroll mb-none ${CLASS_ROOT}__content-left`}
-        >
-          {items.map((item) => (
-            <GridCol
-              id={item.href.replace("#", "")}
-              size={"auto"}
-              key={item.href}
-              className="pr-none pl-none"
-            >
-              <Link
-                href={item.href}
-                colorScheme={colorScheme}
-                className={cx(`${CLASS_ROOT}__item`, {
-                  "is-active": item.isActive,
-                })}
-              >
-                {item.label}
-              </Link>
-            </GridCol>
-          ))}
-        </Grid>
-        {children && (
-          <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
-        )}
-      </div>
+      <Container>
+        <div className={`${CLASS_ROOT}__content`}>
+          <Grid
+            className={`list-unstyled list-inline horizontal-scroll mb-none ${CLASS_ROOT}__content-left`}
+          >
+            {items.map((item) => (
+              <GridCol size={"auto"} key={item.href}>
+                <Link
+                  href={item.href}
+                  className={cx(`${CLASS_ROOT}__item`, {
+                    "is-active": item.isActive,
+                  })}
+                >
+                  {item.label}
+                </Link>
+              </GridCol>
+            ))}
+          </Grid>
+          {children && (
+            <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
+          )}
+        </div>
+      </Container>
     </div>
   );
 };

package/src/components/AnchorNavigation/styles/mixins.scss

@@ -11,7 +11,7 @@
   top: 0;
   z-index: 100;
   background-color: var(--color-background-primary) !important;
-  padding: space.get("large") 0;
+  border-bottom: 1px solid var(--color-border-subtle);
 
   // Štýly pre Grid s horizontal-scroll
   .horizontal-scroll {
@@ -67,16 +67,8 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: 0 convert.to-rem(70px);
-
-  @include breakpoint.get("xl", "down") {
-    padding: 0 convert.to-rem(42px);
-  }
 
   @include breakpoint.get("xs", "down") {
-    padding: 0 convert.to-rem(10px);
-    border-bottom: none;
     overflow: hidden;
     flex-direction: column;
   }
@@ -84,7 +76,6 @@
 
 @mixin anchor-navigation-content-left() {
   @include breakpoint.get("xs", "down") {
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
   }
 }
@@ -119,7 +110,6 @@
       display: none;
     }
     padding: space.get("small") 0;
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
     justify-content: space-between;
   }

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

@@ -6,7 +6,7 @@ $card-base: (
   background-color: var(--color-surface-primary),
   margin-bottom: space.get(),
   border-radius: convert.to-rem(10px),
-  border: 1px solid var(--color-border-subtle),
+  border: 1px solid var(--color-border-strong),
   overflow: hidden,
 );
 

package/src/components/Expander/Expander.tsx

@@ -26,8 +26,8 @@ interface ExpanderProps {
   className?: string;
   /** Child elements */
   children?: React.ReactNode;
-  /** Additional HTML attributes */
-  [key: string]: any;
+  /** Expander takes full width of its container */
+  isFullWidth?: boolean;
 }
 
 export const Expander: React.FC<ExpanderProps> = (props) => {
@@ -39,6 +39,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     renderSummary,
     renderSummaryOpened,
     colorScheme,
+    isFullWidth,
     ...other
   } = props;
   const [expanderRef] = useStatic(ExpanderStatic);
@@ -46,6 +47,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
   const classes = cx(
     CLASS_ROOT,
     {
+      [`${CLASS_ROOT}--fullwidth`]: isFullWidth,
       "is-dark": colorScheme === "dark",
       "is-light": colorScheme === "light",
     },

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

@@ -41,6 +41,13 @@
       display: none;
     }
 
+    &--fullwidth {
+      .expander__summary {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+
     &[open] {
       svg[data-summary-icon] {
         transform: rotate(180deg) !important;

package/src/components/Pill/Pill.tsx

@@ -3,17 +3,22 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
+export const pillColors = ["white", "gray", "transparent"] as const;
+export type PillColor = (typeof pillColors)[number];
+
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
   className?: string;
   children?: ReactNode;
-  colorScheme?: "dark" | "light" | "transparent";
+  color?: PillColor;
   size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
+  colorScheme?: "light" | "dark";
 }
 
 const Pill: React.FC<PillProps> = ({
   className,
   children,
   size,
+  color,
   colorScheme,
   ...other
 }) => (
@@ -21,9 +26,9 @@ const Pill: React.FC<PillProps> = ({
     className={cx(
       CLASS_ROOT,
       {
-        "is-dark": colorScheme === "dark",
+        [`${CLASS_ROOT}--${color}`]: color, // Only apply modifier if color is specified
         "is-light": colorScheme === "light",
-        "is-transparent": colorScheme === "transparent",
+        "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
       className,

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

@@ -1,10 +1,11 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
+@use "sass:map";
 
 $base: (
-  background-color: var(--color-surface-contrast),
-  color: var(--color-text-inverse),
   font-weight: bold,
+  background-color: map.get(color.$colors-dark, border-subtle),
+  color: color.$white,
 );
 
 $sizes: (
@@ -20,3 +21,18 @@ $sizes: (
     xxlarge: convert.to-rem(64px),
   ),
 );
+
+$colors: (
+  "white": (
+    background-color: color.$white,
+    color: color.$black,
+  ),
+  "gray": (
+    background-color: var(--color-surface-subtle),
+    color: var(--color-text-default),
+  ),
+  "transparent": (
+    background-color: rgba(#ffffff, 0.5),
+    color: var(--color-text-default),
+  ),
+);

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

@@ -1,15 +1,19 @@
 @use "../../../styles/tools/generate";
 @use "./config";
 @use "./mixins";
+@use "sass:map";
 
 @layer components {
   .pill {
     @include mixins.base();
     @include mixins.sizes();
 
-    &.is-transparent {
-      color: var(--color-text-default);
-      background-color: rgba(#ffffff, 0.5);
+    @each $colorName, $colorProps in config.$colors {
+      &--#{$colorName} {
+        @each $property, $value in $colorProps {
+          #{$property}: $value;
+        }
+      }
     }
   }
 }

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

@@ -18,15 +18,19 @@ const example = (
       Max 3 digits please. <Pill>123</Pill>
     </p>
     <p>
-      <Pill colorScheme="transparent">T</Pill>
-      <Pill colorScheme="dark">D</Pill>
-      <Pill colorScheme="light">L</Pill>
+      <Pill color="transparent">T</Pill>
+      <Pill color="black">D</Pill>
+      <Pill color="white">L</Pill>
     </p>
     <p>
       <Pill size="small">S</Pill>
       <Pill size="medium">M</Pill>
       <Pill size="large">L</Pill>
     </p>
+    <p>
+      <Pill colorScheme="light">Light</Pill>
+      <Pill colorScheme="dark">Dark</Pill>
+    </p>
   </>
 );
 

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

@@ -35,25 +35,54 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("pill--large");
     });
 
-    it("has colorScheme class when colorScheme prop is set", () => {
+    it("has default black styling without modifier", () => {
+      const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
+      expect(getByTestId("test-id")).toHaveClass("pill");
+      expect(getByTestId("test-id")).not.toHaveClass("pill--black");
+    });
+
+    it("has white class when color is white", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="transparent" data-testid="test-id">
+        <Pill color="white" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-transparent");
+      expect(getByTestId("test-id")).toHaveClass("pill--white");
     });
 
-    it("has dark colorScheme class when colorScheme is dark", () => {
+    it("has gray class when color is gray", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="dark" data-testid="test-id">
+        <Pill color="gray" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
+      expect(getByTestId("test-id")).toHaveClass("pill--gray");
     });
 
-    it("has light colorScheme class when colorScheme is light", () => {
+    it("has transparent class when color is transparent", () => {
+      const { getByTestId } = render(
+        <Pill color="transparent" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("pill--transparent");
+    });
+
+    it("supports all available colors", () => {
+      const colors = ["white", "gray", "transparent"];
+
+      colors.forEach((color) => {
+        const { getByTestId } = render(
+          <Pill color={color} data-testid={`test-${color}`}>
+            {color}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${color}`)).toHaveClass(`pill--${color}`);
+      });
+    });
+
+    it("has is-light class when colorScheme is light", () => {
       const { getByTestId } = render(
         <Pill colorScheme="light" data-testid="test-id">
           pill
@@ -62,6 +91,15 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("is-light");
     });
 
+    it("has is-dark class when colorScheme is dark", () => {
+      const { getByTestId } = render(
+        <Pill colorScheme="dark" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+
     it("passes other props", () => {
       const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
       expect(getByTestId("test")).toBeInTheDocument();

package/src/components/index.ts

@@ -1,5 +1,6 @@
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
+import { AnchorNavigation } from "./AnchorNavigation";
 import { Tag, TagButton } from "./Tag";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
@@ -94,6 +95,7 @@ export {
   Accordion,
   AccordionItem,
   Alert,
+  AnchorNavigation,
   Autocomplete,
   Bar,
   BarBreak,