@dnanpm/styleguide 3.12.0 → 3.12.1

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -260,6 +260,10 @@ const CurrentMonth = styledComponents.styled.div `
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
 `;
+/**
+ * TODO: Replace the VisuallyHiddenStatus styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHiddenStatus = styledComponents.styled.div `
     position: absolute;
     left: -9999px;

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -26,6 +26,10 @@ const NotificationBadgeElement = styledComponents.styled.div `
     background-color: ${theme.default.color.notification.error};
     border-radius: ${theme.default.radius.circle};
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styledComponents.styled.span `
     position: absolute;
     width: 1px;

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -139,6 +139,10 @@ const DropdownList = styledComponents.styled(CoreULStyles) `
 
     ${common.default({ elevation: 'low' })}
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styledComponents.styled.span `
     position: absolute;
     width: 1px;

package/build/cjs/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type ThemeInterface } from '../../themes/theme';
+interface Props {
+    /**
+     * Unique ID for the skeleton
+     */
+    id?: string;
+    /**
+     * Background color of the skeleton
+     *
+     * @param {string} sand Uses theme.color.background.sand.E01
+     * @param {string} white Uses white background (#FFFFFF)
+     *
+     * @default 'sand'
+     */
+    backgroundColor?: 'sand' | 'white';
+    /**
+     * Opacity level of the skeleton
+     *
+     * @param {number} 100 100% opacity
+     * @param {number} 50 50% opacity
+     * @param {number} 25 25% opacity
+     *
+     * @default 100
+     */
+    opacity?: 100 | 50 | 25;
+    /**
+     * Allows to pass in custom radius value from theme
+     */
+    borderRadius?: keyof ThemeInterface['radius'];
+    /**
+     * Width of the skeleton
+     *
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height of the skeleton
+     *
+     * @default '6.25rem'
+     */
+    height?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * If used inside a carousel, pass the slide index (starting from 1)
+     */
+    carouselIndex?: number;
+    /**
+     * Screen reader label describing the use of the skeleton,
+     * e.g., "Loading content" or "Loading image."
+     */
+    ariaLabel?: string;
+}
+declare const Skeleton: ({ backgroundColor, opacity, width, height, borderRadius, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Skeleton;

package/build/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styledComponents = require('styled-components');
+var theme = require('../../themes/theme.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const shimmer = styledComponents.keyframes `
+    100% {
+        transform: translateX(100%);
+    }
+`;
+const sandRgba = '248, 244, 241';
+const whiteRgba = '255, 255, 255';
+const getAnimationDelay = (carouselIndex) => {
+    switch (carouselIndex) {
+        case 1:
+            return '0s';
+        case 2:
+            return '0.6s';
+        case 3:
+            return '1.2s';
+        case 4:
+            return '1.9s';
+        case 5:
+            return '2.5s';
+        default:
+            return '0s';
+    }
+};
+const getBackgroundColor = (backgroundColor) => `linear-gradient(90deg,rgba(${backgroundColor}, 0) 0%,rgba(${backgroundColor}, 0.8) 50%,rgba(${backgroundColor}, 0) 100%)`;
+const SkeletonWrapper = styledComponents.styled.div `
+    position: relative;
+    overflow: hidden;
+    background-color: ${({ $backgroundColor }) => $backgroundColor === 'sand'
+    ? theme.default.color.background.sand.E01
+    : theme.default.color.background.white.default};
+    opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${({ $borderRadius }) => theme.default.radius[$borderRadius || 's']};
+
+    &::after {
+        position: absolute;
+        inset: 0;
+        transform: translateX(-100%);
+        background: ${({ $backgroundColor }) => getBackgroundColor($backgroundColor === 'sand' ? whiteRgba : sandRgba)};
+
+        animation: ${shimmer} 1.5s infinite;
+        content: '';
+    }
+
+    @media (min-width: 600px) {
+        &::after {
+            animation: ${shimmer} 2.5s infinite;
+            animation-delay: ${({ $carouselIndex }) => getAnimationDelay($carouselIndex)};
+        }
+    }
+`;
+const Skeleton = (_a) => {
+    var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        props.ariaLabel && (React__default.default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
+        React__default.default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+};
+
+exports.default = Skeleton;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -64,7 +64,7 @@ const StyledReactTooltip = styledComponents.styled(reactTooltip.Tooltip) `
 
     border: 1px solid ${theme.default.color.line.L02};
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
-    text-align: center;
+    text-align: left;
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
     width: max-content;

package/build/cjs/components/index.d.ts

@@ -46,6 +46,7 @@ export { default as ReadMore } from './ReadMore/ReadMore';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
+export { default as Skeleton } from './Skeleton/Skeleton';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab } from './Tab/Tab';
 export { default as Tabs } from './Tabs/Tabs';

package/build/cjs/index.js

@@ -156,6 +156,7 @@ var ReadMore = require('./components/ReadMore/ReadMore.js');
 var Search = require('./components/Search/Search.js');
 var SecondaryNavigation = require('./components/SecondaryNavigation/SecondaryNavigation.js');
 var Selectbox = require('./components/Selectbox/Selectbox.js');
+var Skeleton = require('./components/Skeleton/Skeleton.js');
 var Switch = require('./components/Switch/Switch.js');
 var Tab = require('./components/Tab/Tab.js');
 var Tabs = require('./components/Tabs/Tabs.js');
@@ -328,6 +329,7 @@ exports.ReadMore = ReadMore.default;
 exports.Search = Search.default;
 exports.SecondaryNavigation = SecondaryNavigation.default;
 exports.Selectbox = Selectbox.default;
+exports.Skeleton = Skeleton.default;
 exports.Switch = Switch.default;
 exports.Tab = Tab.default;
 exports.Tabs = Tabs.default;

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -251,6 +251,10 @@ const CurrentMonth = styled.div `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
 `;
+/**
+ * TODO: Replace the VisuallyHiddenStatus styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHiddenStatus = styled.div `
     position: absolute;
     left: -9999px;

package/build/es/components/NotificationBadge/NotificationBadge.js

@@ -18,6 +18,10 @@ const NotificationBadgeElement = styled.div `
     background-color: ${theme.color.notification.error};
     border-radius: ${theme.radius.circle};
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styled.span `
     position: absolute;
     width: 1px;

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -131,6 +131,10 @@ const DropdownList = styled(CoreULStyles) `
 
     ${getElevationShadow({ elevation: 'low' })}
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styled.span `
     position: absolute;
     width: 1px;

package/build/es/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type ThemeInterface } from '../../themes/theme';
+interface Props {
+    /**
+     * Unique ID for the skeleton
+     */
+    id?: string;
+    /**
+     * Background color of the skeleton
+     *
+     * @param {string} sand Uses theme.color.background.sand.E01
+     * @param {string} white Uses white background (#FFFFFF)
+     *
+     * @default 'sand'
+     */
+    backgroundColor?: 'sand' | 'white';
+    /**
+     * Opacity level of the skeleton
+     *
+     * @param {number} 100 100% opacity
+     * @param {number} 50 50% opacity
+     * @param {number} 25 25% opacity
+     *
+     * @default 100
+     */
+    opacity?: 100 | 50 | 25;
+    /**
+     * Allows to pass in custom radius value from theme
+     */
+    borderRadius?: keyof ThemeInterface['radius'];
+    /**
+     * Width of the skeleton
+     *
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height of the skeleton
+     *
+     * @default '6.25rem'
+     */
+    height?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * If used inside a carousel, pass the slide index (starting from 1)
+     */
+    carouselIndex?: number;
+    /**
+     * Screen reader label describing the use of the skeleton,
+     * e.g., "Loading content" or "Loading image."
+     */
+    ariaLabel?: string;
+}
+declare const Skeleton: ({ backgroundColor, opacity, width, height, borderRadius, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Skeleton;

package/build/es/components/Skeleton/Skeleton.js

@@ -0,0 +1,65 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import { keyframes, styled } from 'styled-components';
+import theme from '../../themes/theme.js';
+
+const shimmer = keyframes `
+    100% {
+        transform: translateX(100%);
+    }
+`;
+const sandRgba = '248, 244, 241';
+const whiteRgba = '255, 255, 255';
+const getAnimationDelay = (carouselIndex) => {
+    switch (carouselIndex) {
+        case 1:
+            return '0s';
+        case 2:
+            return '0.6s';
+        case 3:
+            return '1.2s';
+        case 4:
+            return '1.9s';
+        case 5:
+            return '2.5s';
+        default:
+            return '0s';
+    }
+};
+const getBackgroundColor = (backgroundColor) => `linear-gradient(90deg,rgba(${backgroundColor}, 0) 0%,rgba(${backgroundColor}, 0.8) 50%,rgba(${backgroundColor}, 0) 100%)`;
+const SkeletonWrapper = styled.div `
+    position: relative;
+    overflow: hidden;
+    background-color: ${({ $backgroundColor }) => $backgroundColor === 'sand'
+    ? theme.color.background.sand.E01
+    : theme.color.background.white.default};
+    opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${({ $borderRadius }) => theme.radius[$borderRadius || 's']};
+
+    &::after {
+        position: absolute;
+        inset: 0;
+        transform: translateX(-100%);
+        background: ${({ $backgroundColor }) => getBackgroundColor($backgroundColor === 'sand' ? whiteRgba : sandRgba)};
+
+        animation: ${shimmer} 1.5s infinite;
+        content: '';
+    }
+
+    @media (min-width: 600px) {
+        &::after {
+            animation: ${shimmer} 2.5s infinite;
+            animation-delay: ${({ $carouselIndex }) => getAnimationDelay($carouselIndex)};
+        }
+    }
+`;
+const Skeleton = (_a) => {
+    var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = __rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
+    return (React__default.createElement(React__default.Fragment, null,
+        props.ariaLabel && (React__default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
+        React__default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+};
+
+export { Skeleton as default };

package/build/es/components/Tooltip/Tooltip.js

@@ -56,7 +56,7 @@ const StyledReactTooltip = styled(Tooltip$1) `
 
     border: 1px solid ${theme.color.line.L02};
     padding: ${getMultipliedSize(theme.base.baseWidth, 1.5)};
-    text-align: center;
+    text-align: left;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     width: max-content;

package/build/es/components/index.d.ts

@@ -46,6 +46,7 @@ export { default as ReadMore } from './ReadMore/ReadMore';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
+export { default as Skeleton } from './Skeleton/Skeleton';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab } from './Tab/Tab';
 export { default as Tabs } from './Tabs/Tabs';

package/build/es/index.js

@@ -154,6 +154,7 @@ export { default as ReadMore } from './components/ReadMore/ReadMore.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SecondaryNavigation } from './components/SecondaryNavigation/SecondaryNavigation.js';
 export { default as Selectbox } from './components/Selectbox/Selectbox.js';
+export { default as Skeleton } from './components/Skeleton/Skeleton.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as Tab } from './components/Tab/Tab.js';
 export { default as Tabs } from './components/Tabs/Tabs.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.12.0",
+    "version": "v3.12.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -49,14 +49,14 @@
         "@babel/preset-typescript": "^7.27.1",
         "@dnanpm/icons": "^2.0.9",
         "@rollup/plugin-commonjs": "^28.0.3",
-        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^30.0.0",
         "@types/node": "^17.0.45",
-        "@types/ramda": "^0.27.36",
+        "@types/ramda": "^0.31.1",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.1",
         "@types/react-modal": "^3.13.1",
@@ -71,7 +71,7 @@
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "2.32.0",
-        "eslint-plugin-jsdoc": "^60.4.0",
+        "eslint-plugin-jsdoc": "^61.1.4",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.37.4",
@@ -98,8 +98,8 @@
         "webpack": "^5.99.8"
     },
     "dependencies": {
-        "ramda": "^0.27.1",
-        "react-datepicker": "8.7.0",
+        "ramda": "^0.32.0",
+        "react-datepicker": "8.8.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",