@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/es/components/Button/ButtonRound.js

@@ -16,14 +16,14 @@ const ButtonElement = styled__default(ButtonPrimary) `
     vertical-align: middle;
     justify-content: center;
     align-items: center;
-`;
-/**
- * @visibleName Button Round
- * @deprecated Use `ButtonArrow` component
- */
-const ButtonRound = (_a) => {
-    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
+`;
+/**
+ * @visibleName Button Round
+ * @deprecated Use `ButtonArrow` component
+ */
+const ButtonRound = (_a) => {
+    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
+    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
 };
 
 export { ButtonRound as default };

package/build/es/components/Button/ButtonSecondary.d.ts

@@ -1,5 +1,5 @@
-import Button from './Button';
-/** @visibleName Button Secondary */
-declare const ButtonSecondary: typeof Button;
-/** @component */
-export default ButtonSecondary;
+import Button from './Button';
+/** @visibleName Button Secondary */
+declare const ButtonSecondary: typeof Button;
+/** @component */
+export default ButtonSecondary;

package/build/es/components/Button/ButtonSecondary.js

@@ -2,7 +2,7 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import Button, { shade } from './Button.js';
 
-/** @visibleName Button Secondary */
+/** @visibleName Button Secondary */
 const ButtonSecondary = styled__default(Button) `
     color: ${theme.color.text.plum};
     background-color: ${theme.color.background.sand.E02};
@@ -32,7 +32,7 @@ const ButtonSecondary = styled__default(Button) `
         background-clip: padding-box;
     }
 
-    ${({ loading }) => loading &&
+    ${({ loading }) => loading &&
     `
         &:focus {
             border-color: ${theme.color.line.L02};

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

@@ -0,0 +1,44 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Carousel
+     */
+    children: ReactNode;
+    /**
+     * Allows to set the number of visible items at the same time.
+     * Use decimals to enable "peek" functionality on the edge of Carousel
+     *
+     * @default 1 In Desktop view
+     * @default 1.2 In Mobile view
+     */
+    visibleItems?: number;
+    /**
+     * Allows to define carousel title
+     */
+    title?: string;
+    /**
+     * Allows to define text for carousel footer button
+     */
+    footerButton?: string;
+    /**
+     * On Footer Button click callback
+     */
+    onFooterButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Carousel */
+declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Carousel;

package/build/es/components/Carousel/Carousel.js

@@ -0,0 +1,305 @@
+import { __rest } from 'tslib';
+import { ArrowRight } from '@dnanpm/icons';
+import React__default, { useRef, useState, Children, useMemo, useEffect } from 'react';
+import useWindowSize from '../../hooks/useWindowSize.js';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonArrow from '../Button/ButtonArrow.js';
+import ButtonIcon from '../Button/ButtonIcon.js';
+
+const CarouselWrapper = styled.div ``;
+const Header = styled.div `
+    display: flex;
+    justify-content: space-between;
+    gap: 1.25rem;
+    margin-bottom: 1.25rem;
+`;
+const Title = styled.h2 `
+    margin: 0;
+`;
+const Navigation = styled.div `
+    display: inline-flex;
+    margin-left: auto;
+    gap: 0.625rem;
+`;
+const Content = styled.div `
+    position: relative;
+    overflow: hidden;
+    touch-action: pan-y;
+`;
+const SlidesWrapper = styled.div `
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    gap: ${({ gap }) => gap}rem;
+    transition-property: transform;
+    transform: translate3d(0px, 0, 0);
+    transition-duration: 0ms;
+    transition-delay: 0ms;
+    user-select: none;
+`;
+const SlideItem = styled.div `
+    display: block;
+    position: relative;
+    flex-shrink: 0;
+    flex-basis: calc(
+        ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
+    );
+`;
+const Footer = styled.div `
+    ${media.md `
+        display: grid;
+        grid-template-columns: [whitespace] 1fr [pagination] auto [footerButton] 1fr;
+        gap: 2rem;
+        margin: ${getMultipliedSize(theme.base.baseHeight, 2)} 0;
+        align-items: center;
+    `};
+`;
+const Pagination = styled.div `
+    display: none;
+
+    ${media.md `
+        display: flex;
+        grid-column: pagination;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem 1rem;
+        width: 100%;
+    `};
+`;
+const PaginationItem = styled.button `
+    display: inline-block;
+    cursor: pointer;
+    width: 2rem;
+    height: 1rem;
+    border-radius: ${theme.radius.pill};
+    border: 2px solid ${theme.color.line.L01};
+    background-color: ${theme.color.background.white.default};
+    transition: all 0.2s ease-in-out;
+
+    ${({ isActive }) => isActive &&
+    `
+        width: 3rem;
+        border-color: ${theme.color.default.pink};
+        background-color: ${theme.color.background.pink.default};
+    `}
+
+    &:focus {
+        border: 2px solid ${theme.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        outline: none;
+    }
+
+    &:hover {
+        border-color: ${theme.color.default.pink};
+    }
+`;
+const Scrollbar = styled.div `
+    width: 100%;
+    height: ${getMultipliedSize(theme.base.baseHeight, 0.6)};
+    margin: 1rem 0;
+    border-radius: ${theme.radius.pill};
+    background-color: ${theme.color.background.sand.E02};
+    user-select: none;
+    touch-action: pan-y;
+
+    ${media.md `
+        display: none;
+    `};
+`;
+const Knob = styled.div `
+    position: relative;
+    top: 0;
+    left: 0;
+    width: calc(100% / ${({ knobSize }) => knobSize});
+    height: 100%;
+    border-radius: ${theme.radius.pill};
+    background-color: ${theme.color.background.pink.default};
+    transform: translate3d(0px, 0, 0);
+    transition-duration: 0ms;
+    transition-delay: 0ms;
+    user-select: none;
+`;
+const FooterButton = styled.div `
+    grid-column: footerButton;
+    text-align: right;
+`;
+/** @visibleName Carousel */
+const Carousel = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    const slidesWrapperRef = useRef(null);
+    const scrollbarRef = useRef(null);
+    const knobRef = useRef(null);
+    const { isMobile } = useWindowSize(theme.breakpoints.md);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
+    const slidesWrapperGapSizePx = 20;
+    const slideScreensCount = Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
+        ? (visibleItems - 1) / visibleItems
+        : Math.floor(visibleItems) / visibleItems;
+    const itemWidthCorrection = itemWidthCorrectionRatio * slidesWrapperGapSizePx;
+    const data = useMemo(() => ({
+        startX: 0,
+        startTime: 0,
+        startTransform: 0,
+        currentTransform: 0,
+        knobStartTransform: 0,
+        knobCurrentTransform: 0,
+        direction: 0,
+        itemWidth: 0,
+        lastItemX: 0,
+        scrollWidth: 0,
+        scrollbarNavigation: false,
+        scrollbarToSlidesRatio: 1,
+    }), []);
+    const getElementTransform = (element) => {
+        const matrix = new DOMMatrix(window.getComputedStyle(element).transform);
+        return matrix.m41 || 0;
+    };
+    const setElementTransform = (element, transform, delay) => {
+        if (element.current) {
+            element.current.style.setProperty('transition-duration', `${delay !== null && delay !== void 0 ? delay : 300}ms`);
+            element.current.style.setProperty('transform', `translate3d(${Number.isNaN(transform) ? 0 : transform}px, 0px, 0px)`);
+        }
+    };
+    const handleSetCurrentIndex = (index) => {
+        if (index === currentIndex) {
+            setElementTransform(slidesWrapperRef, data.startTransform);
+            setElementTransform(knobRef, data.knobStartTransform);
+        }
+        else if (index < 0) {
+            setCurrentIndex(0);
+            setElementTransform(slidesWrapperRef, 0);
+        }
+        else if (index > slideScreensCount - 1) {
+            setCurrentIndex(slideScreensCount - 1);
+            setElementTransform(slidesWrapperRef, data.startTransform);
+        }
+        else {
+            setCurrentIndex(index);
+        }
+    };
+    const handleNavigationButtonPreviousClick = () => {
+        handleSetCurrentIndex(currentIndex - 1);
+    };
+    const handleNavigationButtonNextClick = () => {
+        handleSetCurrentIndex(currentIndex + 1);
+    };
+    const handlePaginationItemClick = (e) => {
+        if (e.currentTarget.parentElement) {
+            handleSetCurrentIndex([...e.currentTarget.parentElement.children].indexOf(e.currentTarget));
+        }
+    };
+    const handlePointerMove = (e) => {
+        const diff = e.pageX - data.startX;
+        if (Math.abs(diff) < 5) {
+            return;
+        }
+        data.currentTransform =
+            diff * (data.scrollbarNavigation ? data.scrollbarToSlidesRatio * -1 : 1) +
+                data.startTransform;
+        data.knobCurrentTransform =
+            diff / (data.scrollbarNavigation ? 1 : data.scrollbarToSlidesRatio * -1) +
+                data.knobStartTransform;
+        data.direction = Math.sign(diff) * (data.scrollbarNavigation ? 1 : -1);
+        if (currentIndex <= 0) {
+            if (data.currentTransform > 0) {
+                data.currentTransform = -1 + Math.pow((data.startTransform + diff), 0.85);
+            }
+        }
+        else if (currentIndex + Math.ceil(visibleItems) >= Children.count(props.children)) {
+            if (data.currentTransform < -data.lastItemX) {
+                data.currentTransform =
+                    -data.lastItemX + 1 - Math.pow((-data.lastItemX - data.startTransform - diff), 0.85);
+            }
+        }
+        if (data.knobCurrentTransform < 0) {
+            data.knobCurrentTransform = 0;
+        }
+        if (data.knobCurrentTransform > data.lastItemX / data.scrollbarToSlidesRatio) {
+            data.knobCurrentTransform = data.lastItemX / data.scrollbarToSlidesRatio;
+        }
+        setElementTransform(slidesWrapperRef, data.currentTransform, 0);
+        setElementTransform(knobRef, data.knobCurrentTransform, 0);
+    };
+    const handlePointerUp = (e) => {
+        const endTime = Date.now();
+        if (endTime - data.startTime > 300) {
+            const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
+            if (swipeRatio >= 0.5) {
+                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio));
+            }
+            else {
+                handleSetCurrentIndex(currentIndex);
+            }
+        }
+        else {
+            handleSetCurrentIndex(currentIndex + data.direction);
+        }
+        if (data.scrollbarNavigation && data.direction === 0) {
+            if (knobRef.current) {
+                handleSetCurrentIndex(currentIndex +
+                    Math.round((e.pageX -
+                        knobRef.current.getBoundingClientRect().x -
+                        knobRef.current.offsetWidth / 2) /
+                        knobRef.current.offsetWidth));
+            }
+        }
+        document.removeEventListener('pointermove', handlePointerMove);
+        document.removeEventListener('pointerup', handlePointerUp);
+    };
+    const handleSlidesPointerDown = (e) => {
+        if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
+            data.startX = e.pageX;
+            data.startTime = Date.now();
+            data.startTransform = getElementTransform(slidesWrapperRef.current);
+            data.scrollbarNavigation = Boolean(e.currentTarget === scrollbarRef.current);
+            data.knobStartTransform = getElementTransform(knobRef.current);
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+        }
+    };
+    const handleScrollbarPointerDown = (e) => {
+        handleSlidesPointerDown(e);
+    };
+    useEffect(() => {
+        if (slidesWrapperRef.current && scrollbarRef.current) {
+            const isRest = Children.count(props.children) - (currentIndex + visibleItems) < 0;
+            data.itemWidth =
+                slidesWrapperRef.current.offsetWidth / visibleItems - itemWidthCorrection;
+            data.scrollWidth = slidesWrapperRef.current.scrollWidth;
+            data.lastItemX =
+                (data.itemWidth + slidesWrapperGapSizePx) *
+                    (Children.count(props.children) - visibleItems) -
+                    (isRest ? slidesWrapperGapSizePx * (Math.ceil(visibleItems) - visibleItems) : 0);
+            data.scrollbarToSlidesRatio =
+                data.lastItemX /
+                    (scrollbarRef.current.offsetWidth -
+                        scrollbarRef.current.offsetWidth / slideScreensCount);
+            const slidesTransform = data.itemWidth * currentIndex +
+                slidesWrapperGapSizePx * currentIndex -
+                (isRest ? data.itemWidth * (visibleItems % 1) + slidesWrapperGapSizePx : 0);
+            setElementTransform(slidesWrapperRef, -slidesTransform);
+            setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
+        }
+    }, [currentIndex, data, itemWidthCorrection, props.children, slideScreensCount, visibleItems]);
+    return (React__default.createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
+            props.title && React__default.createElement(Title, null, props.title),
+            React__default.createElement(Navigation, null,
+                React__default.createElement(ButtonArrow, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
+                React__default.createElement(ButtonArrow, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children) }))),
+        React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
+            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
+        React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
+            React__default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
+                React__default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
+            props.footerButton && (React__default.createElement(FooterButton, null,
+                React__default.createElement(ButtonIcon, { icon: ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
+};
+
+export { Carousel as default };

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

@@ -1,58 +1,58 @@
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * Name of the input element
-     */
-    name?: string;
-    /**
-     * Text of the label shown next to checkbox
-     */
-    label: string;
-    /**
-     * Default value of input element
-     *
-     * @default undefined
-     */
-    value?: boolean;
-    /**
-     * On checkbox change callback
-     */
-    onChange?: (value: boolean) => void;
-    /**
-     * Allows to disable the checkbox
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows to set checkbox as mandatory
-     *
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Allows to set checkbox to error state
-     *
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * Text of the error message when checkbox is in error state
-     */
-    errorMessage?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Checkbox;
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Text of the label shown next to checkbox
+     */
+    label: string;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: boolean;
+    /**
+     * On checkbox change callback
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Allows to disable the checkbox
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set checkbox as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Allows to set checkbox to error state
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text of the error message when checkbox is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Checkbox;

package/build/es/components/Checkbox/Checkbox.js

@@ -5,19 +5,19 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 
-// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
-const SVGIconData = () => {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
-        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
-        `</svg>`;
-    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
-};
+// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
+const SVGIconData = () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
+        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
+        `</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+};
 const Container = styled.div `
     display: flex;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
+`;
 const Input = styled(CheckboxAndRadioInputCore) `
     position: relative;
     top: ${getDividedSize(theme.base.baseWidth, 5)};
@@ -29,31 +29,31 @@ const Input = styled(CheckboxAndRadioInputCore) `
             background-image: url('${SVGIconData}');
         }
     }
-`;
+`;
 const Mandatory = styled.span `
     color: ${theme.color.default.pink};
     margin-left: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
+`;
 const ErrorMessage = styled.div `
     font-size: ${theme.fontSize.s};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.notification.error};
     margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const Checkbox = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const handleChange = () => {
-        if (props.onChange && !props.disabled) {
-            props.onChange(!props.value);
-        }
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Container, null,
-            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-            React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-                props.label,
-                props.required && React__default.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+`;
+const Checkbox = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    const handleChange = () => {
+        if (props.onChange && !props.disabled) {
+            props.onChange(!props.value);
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Container, null,
+            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+                props.label,
+                props.required && React__default.createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Checkbox as default };