@navikt/ds-react 4.1.1 → 4.1.3

package/cjs/skeleton/Skeleton.js

@@ -40,6 +40,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+/**
+ * Simple skeleton loader
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/skeleton)
+ * @see 🏷️ {@link SkeletonProps}
+ * @example
+ * ```jsx
+ * <Skeleton variant="circle" height="5rem" width="5rem" />
+ * ```
+ */
 exports.Skeleton = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, height, width, style, variant = "text" } = _a, rest = __rest(_a, ["className", "children", "height", "width", "style", "variant"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-skeleton", className, `navds-skeleton--${variant}`, {

package/cjs/timeline/period/NonClickablePeriod.js

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const period_1 = require("../utils/period");
 const clsx_1 = __importDefault(require("clsx"));
 const NonClickablePeriod = ({ start, end, status, cropped, direction, left, width, icon, statusLabel, restProps, periodRef, }) => {
-    return (react_1.default.createElement("div", Object.assign({ ref: periodRef }, restProps, { className: (0, clsx_1.default)((0, period_1.getConditionalClasses)(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.classname), style: {
+    return (react_1.default.createElement("div", Object.assign({ ref: periodRef }, restProps, { className: (0, clsx_1.default)((0, period_1.getConditionalClasses)(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.className), style: {
             width: `${width}%`,
             [direction]: `${left}%`,
         } }),

package/esm/skeleton/Skeleton.d.ts

@@ -14,5 +14,14 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     width?: number | string;
 }
+/**
+ * Simple skeleton loader
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/skeleton)
+ * @see 🏷️ {@link SkeletonProps}
+ * @example
+ * ```jsx
+ * <Skeleton variant="circle" height="5rem" width="5rem" />
+ * ```
+ */
 export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
 export default Skeleton;

package/esm/skeleton/Skeleton.js

@@ -11,6 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
+/**
+ * Simple skeleton loader
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/skeleton)
+ * @see 🏷️ {@link SkeletonProps}
+ * @example
+ * ```jsx
+ * <Skeleton variant="circle" height="5rem" width="5rem" />
+ * ```
+ */
 export const Skeleton = forwardRef((_a, ref) => {
     var { className, children, height, width, style, variant = "text" } = _a, rest = __rest(_a, ["className", "children", "height", "width", "style", "variant"]);
     return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-skeleton", className, `navds-skeleton--${variant}`, {

package/esm/skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAkBtB,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAAwE,EACxE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,OAAW,EAAN,IAAI,cAAtE,gEAAwE,CAAF;IAGtE,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,SAAS,EACT,mBAAmB,OAAO,EAAE,EAC5B;YACE,8BAA8B,EAAE,OAAO,CAAC,QAAQ,CAAC;YACjD,2BAA2B,EAAE,CAAC,MAAM;YACpC,0BAA0B,EAAE,CAAC,KAAK;SACnC,CACF,EACD,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,6BAG/B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAkBtB;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAAwE,EACxE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,OAAW,EAAN,IAAI,cAAtE,gEAAwE,CAAF;IAGtE,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,SAAS,EACT,mBAAmB,OAAO,EAAE,EAC5B;YACE,8BAA8B,EAAE,OAAO,CAAC,QAAQ,CAAC;YACjD,2BAA2B,EAAE,CAAC,MAAM;YACpC,0BAA0B,EAAE,CAAC,KAAK;SACnC,CACF,EACD,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,6BAG/B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/timeline/period/NonClickablePeriod.js

@@ -2,7 +2,7 @@ import React from "react";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import cl from "clsx";
 const NonClickablePeriod = ({ start, end, status, cropped, direction, left, width, icon, statusLabel, restProps, periodRef, }) => {
-    return (React.createElement("div", Object.assign({ ref: periodRef }, restProps, { className: cl(getConditionalClasses(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.classname), style: {
+    return (React.createElement("div", Object.assign({ ref: periodRef }, restProps, { className: cl(getConditionalClasses(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.className), style: {
             width: `${width}%`,
             [direction]: `${left}%`,
         } }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.1.1",
+    "@navikt/aksel-icons": "^4.1.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/skeleton/Skeleton.tsx

@@ -17,6 +17,15 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   width?: number | string;
 }
 
+/**
+ * Simple skeleton loader
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/skeleton)
+ * @see 🏷️ {@link SkeletonProps}
+ * @example
+ * ```jsx
+ * <Skeleton variant="circle" height="5rem" width="5rem" />
+ * ```
+ */
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
   (
     { className, children, height, width, style, variant = "text", ...rest },

package/src/timeline/period/NonClickablePeriod.tsx

@@ -26,7 +26,7 @@ const NonClickablePeriod = ({
       {...restProps}
       className={cl(
         getConditionalClasses(cropped, direction, status),
-        restProps?.classname
+        restProps?.className
       )}
       style={{
         width: `${width}%`,