@norges-domstoler/dds-components 5.1.0 → 5.2.0-beta.2

package/dist/components/Stepper/Step.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import { useStepperContext } from './Stepper.context.js';
+import { stepperTokens } from './Stepper.tokens.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+
+var toStepState = function toStepState(active, completed) {
+  return active ? completed ? 'activeCompleted' : 'activeIncomplete' : completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+};
+
+var stepNumber = stepperTokens.stepNumber,
+    connector = stepperTokens.connector,
+    stepButton = stepperTokens.stepButton;
+var stepSize = '40px';
+var StepWrapper = styled.li.withConfig({
+  displayName: "Step__StepWrapper",
+  componentId: "sc-5n6xpp-0"
+})(["flex:1;position:relative;display:flex;justify-content:center;:not(:last-child):after{content:'';display:block;border-top:1px solid ", ";position:absolute;width:100%;left:50%;top:calc(", " / 2);}"], connector.color, stepSize);
+var StepContentWrapper = styled.div.withConfig({
+  displayName: "Step__StepContentWrapper",
+  componentId: "sc-5n6xpp-1"
+})(["background:none;border:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;transition:", ";:focus-visible{", "}", ""], focusVisibleTransitionValue, focusVisible, function (_ref) {
+  var clickable = _ref.clickable;
+  return clickable && css(["cursor:pointer;"]);
+});
+var StepNumber = styled.div.withConfig({
+  displayName: "Step__StepNumber",
+  componentId: "sc-5n6xpp-2"
+})(["border-radius:50%;border:1px solid;padding:5px;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;", ""], stepSize, stepSize, function (_ref2) {
+  var state = _ref2.state;
+
+  switch (state) {
+    case 'activeIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.active.borderColor, stepNumber.active.color, stepNumber.active.backgroundColor);
+
+    case 'activeCompleted':
+    case 'inactiveCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.completed.borderColor, stepNumber.completed.color, stepNumber.completed.backgroundColor);
+
+    case 'inactiveIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.inactive.borderColor, stepNumber.inactive.color, stepNumber.inactive.backgroundColor);
+  }
+});
+var StepCompletedCheck = styled.div.withConfig({
+  displayName: "Step__StepCompletedCheck",
+  componentId: "sc-5n6xpp-3"
+})(["border:solid ", ";border-width:0 2px 2px 0;transform:rotate(45deg);width:27.5%;height:55%;margin-top:-2px;"], stepNumber.completed.color);
+var StepText = styled.div.withConfig({
+  displayName: "Step__StepText",
+  componentId: "sc-5n6xpp-4"
+})(["font-family:", ";font-size:", ";margin-top:", ";", ""], stepButton.fontFamily, stepButton.fontSize, stepButton.marginTop, function (_ref3) {
+  var state = _ref3.state,
+      clickable = _ref3.clickable;
+
+  switch (state) {
+    case 'activeCompleted':
+    case 'activeIncomplete':
+      return css(["color:", ";text-decoration ", ";"], stepButton.active.color, clickable ? stepButton.active.textDecoration : 'none');
+
+    case 'inactiveCompleted':
+      return css(["color:", ";text-decoration ", ";"], stepButton.completed.color, clickable ? stepButton.completed.textDecoration : 'none');
+
+    case 'inactiveIncomplete':
+      return css(["color:", ";text-decoration ", ";"], stepButton.inactive.color, clickable ? stepButton.inactive.textDecoration : 'none');
+  }
+});
+
+var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed) {
+  return "".concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
+};
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+
+
+var Step = function Step(props) {
+  var _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index,
+      _props$completed = props.completed,
+      completed = _props$completed === void 0 ? false : _props$completed,
+      children = props.children;
+
+  var _useStepperContext = useStepperContext(),
+      activeStep = _useStepperContext.activeStep;
+
+  var active = activeStep === index;
+  var styleProps = {
+    state: toStepState(active, completed),
+    clickable: props.onClick !== undefined
+  };
+  return jsx(StepWrapper, Object.assign({
+    "aria-current": active ? 'step' : undefined
+  }, {
+    children: jsxs(StepContentWrapper, Object.assign({}, styleProps, {
+      as: props.onClick ? 'button' : 'div',
+      onClick: props.onClick ? function () {
+        return props.onClick(index);
+      } : undefined
+    }, {
+      children: [jsx(StepNumber, Object.assign({}, styleProps, {
+        children: completed ? jsx(StepCompletedCheck, {}) : index + 1
+      })), jsxs(StepText, Object.assign({}, styleProps, {
+        children: [jsx(VisuallyHidden, Object.assign({
+          as: "span"
+        }, {
+          children: getVisuallyHiddenText(active, completed)
+        })), children]
+      }))]
+    }))
+  }));
+};
+
+export { Step };

package/dist/components/Stepper/Stepper.context.d.ts

@@ -0,0 +1,6 @@
+declare type StepperContextType = {
+    activeStep: number;
+};
+export declare const StepperContext: import("react").Context<StepperContextType>;
+export declare const useStepperContext: () => StepperContextType;
+export {};

package/dist/components/Stepper/Stepper.context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+var StepperContext = /*#__PURE__*/createContext({
+  activeStep: 0
+});
+var useStepperContext = function useStepperContext() {
+  return useContext(StepperContext);
+};
+
+export { StepperContext, useStepperContext };

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<{
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    /** Indeksen til det aktive steget. */
+    activeStep?: number | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,66 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import { StepperContext } from './Stepper.context.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var StepsWrapper = styled.ol.withConfig({
+  displayName: "Stepper__StepsWrapper",
+  componentId: "sc-4w2c73-0"
+})(["display:flex;margin:0;padding:0;"]);
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+
+var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a;
+
+  var id = props.id,
+      _props$activeStep = props.activeStep,
+      activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
+      children = props.children,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+  var _useState = useState(activeStep),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisActiveStep = _useState2[0],
+      setActiveStep = _useState2[1];
+
+  useEffect(function () {
+    if (activeStep !== undefined && activeStep != thisActiveStep) {
+      setActiveStep(activeStep);
+    }
+  }, [activeStep, thisActiveStep]);
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref
+  });
+  var steps = (_a = Children.map(children, function (step, index) {
+    if (! /*#__PURE__*/isValidElement(step)) {
+      return false;
+    }
+
+    return /*#__PURE__*/cloneElement(step, Object.assign(Object.assign({}, step.props), {
+      index: index
+    }));
+  })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+  return jsx(StepperContext.Provider, Object.assign({
+    value: {
+      activeStep: thisActiveStep
+    }
+  }, {
+    children: jsx("div", Object.assign({
+      role: "group",
+      "aria-label": "progress"
+    }, containerProps, {
+      children: jsx(StepsWrapper, {
+        children: steps
+      })
+    }))
+  }));
+});
+
+export { Stepper };

package/dist/components/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        activeStep?: number | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const NonClickable: () => JSX.Element;

package/dist/components/Stepper/Stepper.tokens.d.ts

@@ -0,0 +1,39 @@
+export declare const stepperTokens: {
+    connector: {
+        color: string;
+    };
+    stepNumber: {
+        active: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        completed: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        inactive: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    stepButton: {
+        marginTop: string;
+        fontFamily: string;
+        fontSize: string;
+        active: {
+            color: string;
+            textDecoration: string;
+        };
+        completed: {
+            color: string;
+            textDecoration: string;
+        };
+        inactive: {
+            color: string;
+            textDecoration: string;
+        };
+    };
+};

package/dist/components/Stepper/Stepper.tokens.js

@@ -0,0 +1,49 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    font = ddsBaseTokens.font;
+var connector = {
+  color: colors.DdsColorInteractiveBase
+};
+var stepNumber = {
+  active: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase
+  },
+  completed: {
+    borderColor: colors.DdsColorSuccessLighter,
+    color: colors.DdsColorNeutralsGray9,
+    backgroundColor: colors.DdsColorSuccessLighter
+  },
+  inactive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorNeutralsWhite
+  }
+};
+var stepButton = {
+  marginTop: spacing.SizesDdsSpacingLayoutX1,
+  fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
+  fontSize: font.DdsFontSupportingStyleLabel01FontSize,
+  active: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'none'
+  },
+  completed: {
+    color: colors.DdsColorInteractiveBase,
+    textDecoration: 'underline'
+  },
+  inactive: {
+    color: colors.DdsColorInteractiveBase,
+    textDecoration: 'underline'
+  }
+};
+var stepperTokens = {
+  connector: connector,
+  stepNumber: stepNumber,
+  stepButton: stepButton
+};
+
+export { stepperTokens };

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './Step';

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -6,7 +6,7 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 var Wrapper = styled.span.withConfig({
   displayName: "VisuallyHidden__Wrapper",
   componentId: "sc-ciubxt-0"
-})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+})(["position:absolute;width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0px;"]);
 var VisuallyHidden = function VisuallyHidden(props) {
   var children = props.children,
       id = props.id,

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -4,5 +4,5 @@ declare type SvgChevronProps = {
     height?: Property.Height<string>;
     width?: Property.Width<string>;
 };
-export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
+export declare const AnimatedChevronUpDown: ({ isUp, height, width, }: SvgChevronProps) => JSX.Element;
 export {};

package/dist/hooks/useRoveFocus.d.ts

@@ -1,3 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, KeyboardEvent } from 'react';
 import { Direction } from '../types';
+export declare const isKeyboardEvent: (e: Event | KeyboardEvent<Element>) => e is KeyboardEvent<Element>;
 export declare function useRoveFocus(size: number | undefined, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];

package/dist/hooks/useRoveFocus.js

@@ -1,6 +1,9 @@
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useCallback, useEffect } from 'react';
 
+var isKeyboardEvent = function isKeyboardEvent(e) {
+  return e.key !== undefined;
+};
 function useRoveFocus(size, reset) {
   var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'column';
 
@@ -9,17 +12,17 @@ function useRoveFocus(size, reset) {
       currentFocus = _useState2[0],
       setCurrentFocus = _useState2[1];
 
-  var nextKey = direction === 'row' ? 39 : 40;
-  var previousKey = direction === 'row' ? 37 : 38;
+  var nextKey = direction === 'row' ? 'ArrowRight' : 'ArrowDown';
+  var previousKey = direction === 'row' ? 'ArrowLeft' : 'ArrowUp';
   var handleKeyDown = useCallback(function (e) {
-    if (!size) return;
+    if (!size || !isKeyboardEvent(e)) return;
     if (reset) setCurrentFocus(-1);
 
-    if (e.keyCode === nextKey) {
+    if (e.key === nextKey) {
       // Down arrow
       e.preventDefault();
       setCurrentFocus(currentFocus === size - 1 ? 0 : currentFocus + 1);
-    } else if (e.keyCode === previousKey) {
+    } else if (e.key === previousKey) {
       // Up arrow
       e.preventDefault();
 
@@ -37,4 +40,4 @@ function useRoveFocus(size, reset) {
   return [currentFocus, setCurrentFocus];
 }
 
-export { useRoveFocus };
+export { isKeyboardEvent, useRoveFocus };

package/dist/index.d.ts

@@ -34,3 +34,4 @@ export * from './components/Tag';
 export * from './components/Chip';
 export * from './components/VisuallyHidden';
 export * from './icons/tsx';
+export * from './components/Stepper';

package/dist/index.js

@@ -186,3 +186,5 @@ export { VisibilityOnIcon } from './icons/tsx/visibilityOn.js';
 export { WarningIcon } from './icons/tsx/warning.js';
 export { ZoomInIcon } from './icons/tsx/zoomIn.js';
 export { ZoomOutIcon } from './icons/tsx/zoomOut.js';
+export { Stepper } from './components/Stepper/Stepper.js';
+export { Step } from './components/Stepper/Step.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.1.0",
+  "version": "5.2.0-beta.2",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -20,16 +20,21 @@
   "homepage": "https://design.domstol.no",
   "scripts": {
     "clean": "rm -r dist || :",
-    "test": "jest --no-cache",
-    "test:watch": "jest --no-cache --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
     "storybook": "start-storybook -p 6006 -s ./.storybook/images",
     "build-storybook": "build-storybook -o docs",
     "lint": "eslint --ext=jsx,ts,tsx src",
-    "prettier": "prettier --write '**/*.{ts,tsx}'",
-    "check:types": "tsc --noEmit",
-    "build:clean": "npm run clean && npm run build"
+    "prettier": "prettier --write .",
+    "prettier:check": "prettier --check .",
+    "build:clean": "npm run clean && npm run build",
+    "verify:types": "tsc --noEmit",
+    "verify:lint": "npm run lint",
+    "verify:test": "npm test",
+    "verify:prettier": "npm run prettier:check",
+    "verify": "concurrently 'npm:verify:*'"
   },
   "keywords": [
     "dds",
@@ -42,53 +47,55 @@
     "elsa"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@mdx-js/react": "^2.1.1",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@mdx-js/react": "^2.1.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-node-resolve": "^13.2.0",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
     "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.5.9",
-    "@storybook/theming": "^6.5.9",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^14.1.0",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^17.0.2",
+    "@storybook/react": "^6.5.10",
+    "@storybook/theming": "^6.5.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.7",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
-    "babel-loader": "^8.2.4",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
+    "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
-    "eslint": "^8.13.0",
+    "concurrently": "^7.3.0",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-storybook": "^0.6.1",
-    "jest": "^27.5.1 ",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rollup": "^2.70.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-storybook": "^0.6.4",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.78.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.0.3",
-    "rollup-plugin-sass": "^1.2.12",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3"
+    "rollup-plugin-sass": "^1.2.13",
+    "rollup-plugin-typescript2": "^0.33.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
+    "@norges-domstoler/dds-design-tokens": "^1.3.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
-    "styled-components": "^5",
-    "@norges-domstoler/dds-design-tokens": "^1"
+    "styled-components": "^5"
   },
   "jest": {
     "preset": "ts-jest",
@@ -109,11 +116,11 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@floating-ui/react-dom": "^0.7.2",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@floating-ui/react-dom": "^1.0.0",
     "focus-visible": "^5.2.0",
-    "react-select": "^5.3.0",
+    "react-select": "^5.4.0",
     "tslib": "^2.4.0"
   }
 }