@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

package/build/lib/style.js

@@ -1,2 +1,3 @@
-!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t();else if("function"===typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"===typeof exports?exports:e)[r]=n[r]}}(this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=265)}({265:function(e,t,n){}})}));
-//# sourceMappingURL=style.js.map
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "1.11.0",
+  "version": "2.0.0-alpha.0",
   "private": false,
   "engines": {
     "node": ">=18.x"
@@ -13,144 +13,64 @@
     "src/assets/"
   ],
   "main": "build/components/index.js",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build && npx rollup -c",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare": "husky"
+  },
   "dependencies": {
-    "@cloudfour/transition-hidden-element": "^2.0.2",
-    "@lighting-beetle/glider-js": "^1.8.2",
-    "@mdx-js/react": "^1.6.22",
-    "@orangesk/accessible-autocomplete": "^3.1.2",
-    "@popperjs/core": "^2.11.8",
-    "a11y-dialog": "^7.5.3",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.3.4",
+    "@types/mdx": "^2.0.13",
     "classnames": "^2.5.1",
     "diff2html": "^3.4.51",
-    "dompurify": "^3.2.5",
-    "html-react-parser": "^3.0.4",
-    "lorem-ipsum": "^2.0.8",
+    "next": "15.3.4",
     "normalize.css": "^8.0.1",
-    "nouislider": "^15.8.1",
-    "patch-package": "8.0.0",
-    "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "replace-diacritics": "^1.0.1",
-    "resize-observer": "^1.0.4",
-    "sass": "^1.86.3",
-    "tabbable": "^6.2.0",
-    "wcag-contrast": "^3.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "wnumb": "^1.2.0"
   },
-  "scripts": {
-    "start": "lighter-react-scripts --openssl-legacy-provider start",
-    "build": "lighter-react-scripts --openssl-legacy-provider build",
-    "lint": "npm-run-all lint:* --parallel",
-    "lint:js": "eslint --fix 'src/**/*.js'",
-    "lint:scss": "stylelint --fix 'src/**/*.scss'",
-    "format": "npm-run-all format:*",
-    "format:js": "prettier 'src/**/*.js' --write --loglevel warn",
-    "prepublishOnly": "npm run build",
-    "test": "node src/tests/test.js --selectProjects unit conformance",
-    "postinstall": "patch-package",
-    "unpatch-packages": "patch-package --reverse",
-    "patch-packages": "patch-package --",
-    "generate-diffs": "zx src/migration/generate-diffs.mjs; npm run format:js",
-    "prepare": "husky install"
-  },
   "devDependencies": {
-    "@lighting-beetle/eslint-config-lighter": "^3.0.0",
-    "@lighting-beetle/lighter-react-scripts": "^4.0.1",
-    "@lighting-beetle/lighter-styleguide": "^5.1.2",
-    "@lighting-beetle/stylelint-config-lighter": "^2.0.0",
-    "@testing-library/dom": "^10.4.0",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/eslintrc": "3.3.1",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.3.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.6.1",
-    "@vercel/edge": "^1.2.1",
-    "babel-preset-react-app": "^10.1.0",
-    "daypickr": "^0.2.6",
-    "diffable-html": "6.0.1",
-    "html-validate": "^9.5.2",
-    "husky": "9.1.7",
-    "jest-axe": "^10.0.0",
+    "@types/node": "^20",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "babel-jest": "^29.7.0",
+    "eslint": "latest",
+    "eslint-config-next": "^15.3.4",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "fs-extra": "^11.3.0",
+    "glob": "^11.0.3",
+    "html-validate": "^7.18.1",
+    "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "15.5.0",
-    "npm-run-all": "^4.1.5",
+    "jest-image-snapshot": "^6.5.1",
+    "lint-staged": "^15.5.2",
     "prettier": "^3.5.3",
-    "pretty": "^2.0.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "stylelint": "^13.13.1",
-    "zx": "8.5.2"
-  },
-  "overrides": {
-    "jest": "^28",
-    "babel-jest": "^28"
-  },
-  "browserslist": [
-    "> 3% in SK",
-    "not IE 11",
-    "not dead"
-  ],
-  "stylelint": {
-    "extends": "@lighting-beetle/stylelint-config-lighter",
-    "rules": {
-      "order/order": [
-        [
-          "custom-properties",
-          "declarations"
-        ],
-        {
-          "disableFix": true
-        }
-      ],
-      "at-rule-no-unknown": null,
-      "scss/at-rule-no-unknown": [
-        true,
-        {
-          "ignoreAtRules": [
-            "use",
-            "forward"
-          ]
-        }
-      ],
-      "selector-pseudo-class-no-unknown": [
-        true,
-        {
-          "ignorePseudoClasses": [
-            "export"
-          ]
-        }
-      ],
-      "property-no-unknown": [
-        true,
-        {
-          "ignoreSelectors": [
-            ":export"
-          ]
-        }
-      ]
-    }
-  },
-  "eslintConfig": {
-    "extends": "@lighting-beetle/lighter"
-  },
-  "eslintIgnore": [
-    "registerServiceWorker.js"
-  ],
-  "prettier": {
-    "trailingComma": "es5",
-    "arrowParens": "avoid",
-    "singleQuote": true,
-    "endOfLine": "auto"
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,json}": [
-      "prettier --write --loglevel warn",
-      "eslint --fix",
-      "git add"
-    ],
-    "src/**/*.{scss, css}": [
-      "stylelint --fix",
-      "git add"
-    ]
-  },
-  "legacy-peer-deps": "true"
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.89.2",
+    "typescript": "5.8.3"
+  }
 }

package/src/components/Badge/Badge.test.js

@@ -1,49 +1,45 @@
-/**
- * @jest-environment jsdom
- */
+import React from "react";
+import { render } from "@testing-library/react";
 
-import React from 'react';
-import { render } from '@testing-library/react';
+import Badge from ".";
 
-import Badge from '.';
-
-describe('rendering', () => {
-  describe('initial state', () => {
-    it('has default className badge', () => {
+describe("rendering", () => {
+  describe("initial state", () => {
+    it("has default className badge", () => {
       const { getByText } = render(<Badge>Badge</Badge>);
-      expect(getByText('Badge')).toHaveClass('badge');
+      expect(getByText("Badge")).toHaveClass("badge");
     });
   });
 
-  describe('passed props', () => {
-    it('renders children', () => {
+  describe("passed props", () => {
+    it("renders children", () => {
       const { getByText } = render(<Badge>Badge</Badge>);
-      expect(getByText('Badge')).toBeInTheDocument();
+      expect(getByText("Badge")).toBeInTheDocument();
     });
 
-    it('renders children as node', () => {
+    it("renders children as node", () => {
       const { getByTestId } = render(
         <Badge>
           <span data-testid="child">Children</span>
         </Badge>
       );
-      expect(getByTestId('child')).toBeInTheDocument();
+      expect(getByTestId("child")).toBeInTheDocument();
     });
 
-    ['black', 'orange', 'success', 'info', 'warning', 'danger'].map(color => {
+    ["black", "orange", "success", "info", "warning", "danger"].map((color) => {
       it(`has badge--${color} class when ${color}`, () => {
         const { getByText } = render(
           <Badge color={color} key={color}>
             Badge
           </Badge>
         );
-        expect(getByText('Badge')).toHaveClass(`badge--${color}`);
+        expect(getByText("Badge")).toHaveClass(`badge--${color}`);
       });
     });
 
-    it('passes other props', () => {
+    it("passes other props", () => {
       const { getByTestId } = render(<Badge data-testid="test">Badge</Badge>);
-      expect(getByTestId('test')).toBeInTheDocument();
+      expect(getByTestId("test")).toBeInTheDocument();
     });
   });
 });

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import cx from "classnames";
+
+export const colors = [
+  "black",
+  "orange",
+  "success",
+  "info",
+  "warning",
+  "danger",
+] as const;
+
+export type BadgeColor = (typeof colors)[number];
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Badge background color. Text color is adjusted automatically. */
+  color?: BadgeColor;
+  isRound?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const CLASS_ROOT = "badge";
+
+const Badge: React.FC<BadgeProps> = ({
+  color,
+  isRound,
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className, {
+    [`badge--${color}`]: color,
+    [`badge--round`]: isRound,
+  });
+  return (
+    <span className={classes} {...other}>
+      {children}
+    </span>
+  );
+};
+
+Badge.displayName = "Badge";
+
+export default Badge;

package/src/components/Badge/index.ts

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

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

@@ -1,6 +1,6 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
 
 $badge: (
   padding: convert.to-rem(1.7px) space.get(small),
@@ -17,35 +17,35 @@ $round: (
 );
 
 $colors: (
-  'default': (
+  "default": (
     background-color: color.$gray-400,
     color: color.$black,
   ),
-  'orange': (
+  "orange": (
     background-color: color.$orange,
     color: color.$black,
   ),
-  'white': (
+  "white": (
     background-color: color.$white,
     color: color.$black,
   ),
-  'black': (
+  "black": (
     background-color: color.$black,
     color: color.$white,
   ),
-  'success': (
+  "success": (
     background-color: color.$success,
     color: color.$black,
   ),
-  'danger': (
+  "danger": (
     background-color: color.$danger,
     color: color.$white,
   ),
-  'info': (
+  "info": (
     background-color: color.$info,
     color: color.$black,
   ),
-  'warning': (
+  "warning": (
     background-color: color.$warning,
     color: color.$black,
   ),

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

@@ -1,8 +1,8 @@
 @use "sass:map";
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
-@use './config';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "./config";
 
 @mixin base($config: config.$badge) {
   display: inline;
@@ -15,6 +15,6 @@
   @include generate.css-map(map.get(config.$colors, $color));
 }
 
-@mixin round($config: config.$round){
+@mixin round($config: config.$round) {
   @include generate.css-map($config);
 }

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

@@ -1,6 +1,6 @@
-@use '../../../styles/tools/generate';
-@use './config';
-@use './mixins';
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
 
 .badge {
   @include mixins.base();
@@ -15,4 +15,3 @@
     }
   }
 }
-

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

@@ -1,54 +1,50 @@
-/**
- * @jest-environment jsdom
- */
+import React from "react";
+import { render } from "@testing-library/react";
 
-import React from 'react';
-import { render } from '@testing-library/react';
+import Badge from "../Badge";
 
-import Badge from '../Badge';
-
-describe('rendering', () => {
-  describe('initial state', () => {
-    it('has default className badge', () => {
+describe("rendering", () => {
+  describe("initial state", () => {
+    it("has default className badge", () => {
       const { getByText } = render(<Badge>Badge</Badge>);
-      expect(getByText('Badge')).toHaveClass('badge');
+      expect(getByText("Badge")).toHaveClass("badge");
     });
   });
 
-  describe('passed props', () => {
-    it('renders children', () => {
+  describe("passed props", () => {
+    it("renders children", () => {
       const { getByText } = render(<Badge>Badge</Badge>);
-      expect(getByText('Badge')).toBeInTheDocument();
+      expect(getByText("Badge")).toBeInTheDocument();
     });
 
-    it('renders children as node', () => {
+    it("renders children as node", () => {
       const { getByTestId } = render(
         <Badge>
           <span data-testid="child">Children</span>
         </Badge>
       );
-      expect(getByTestId('child')).toBeInTheDocument();
+      expect(getByTestId("child")).toBeInTheDocument();
     });
 
-    ['black', 'orange', 'success', 'info', 'warning', 'danger'].map(color => {
+    ["black", "orange", "success", "info", "warning", "danger"].map((color) => {
       it(`has badge--${color} class when ${color}`, () => {
         const { getByText } = render(
           <Badge color={color} key={color}>
             Badge
           </Badge>
         );
-        expect(getByText('Badge')).toHaveClass(`badge--${color}`);
+        expect(getByText("Badge")).toHaveClass(`badge--${color}`);
       });
     });
 
-    it('has class badge--round when isRound is set to true', () => {
+    it("has class badge--round when isRound is set to true", () => {
       const { getByText } = render(<Badge isRound={true}>Badge</Badge>);
-      expect(getByText('Badge')).toHaveClass('badge--round');
+      expect(getByText("Badge")).toHaveClass("badge--round");
     });
 
-    it('passes other props', () => {
+    it("passes other props", () => {
       const { getByTestId } = render(<Badge data-testid="test">Badge</Badge>);
-      expect(getByTestId('test')).toBeInTheDocument();
+      expect(getByTestId("test")).toBeInTheDocument();
     });
   });
 });

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

@@ -1,11 +1,11 @@
-@use '../../../styles/tools/generate';
-@use 'config' as *;
-@use 'mixins' as *;
-
-@include headings-base($headings, 'h$, .h$', $heading-base);
-@include headings($headings, 'h$, .h$');
-@include headings-base($displays, '.display-$', $display-base);
-@include headings($displays, '.display-$');
+@use "../../../styles/tools/generate";
+@use "config" as *;
+@use "mixins" as *;
+
+@include headings-base($headings, "h$, .h$", $heading-base);
+@include headings($headings, "h$, .h$");
+@include headings-base($displays, ".display-$", $display-base);
+@include headings($displays, ".display-$");
 @include body-text($body-text);
 @include readability();
 
@@ -22,7 +22,7 @@ ul {
 ol,
 ul {
   @each $name, $value in $list-spacing {
-    &#{generate.variant-name($name, '.list-')} {
+    &#{generate.variant-name($name, ".list-")} {
       @include list-spacing($name);
     }
   }

package/src/components/index.ts

@@ -0,0 +1,7 @@
+import "../styles/before-components.scss";
+
+import Badge from "./Badge";
+
+import "../styles/after-components.scss";
+
+export { Badge };

package/src/components/static.ts

@@ -0,0 +1 @@
+import "../scripts/index.js";