@dnanpm/styleguide 3.7.1 → 3.8.1

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

@@ -1,114 +1,114 @@
-import type { ChangeEvent } from 'react';
-import React from 'react';
-import type { ReactDatePickerProps } from 'react-datepicker';
-import type { LocaleCode } from '../../types/locale.d';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id: string;
-    /**
-     * Default selected date value
-     */
-    date?: Date;
-    /**
-     * Allows to enable range picker functionality.
-     * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
-     */
-    endDate?: ReactDatePickerProps['endDate'];
-    /**
-     * Input label content
-     */
-    label?: string;
-    /**
-     * Input placeholder content
-     */
-    placeholder?: string;
-    /**
-     * Allows to change formatting of date value in input
-     *
-     * @param {LocaleCode} fi-FI Finnish (Finland)
-     * @param {LocaleCode} en-GB English (United Kingdom)
-     *
-     * @default 'fi-FI'
-     */
-    locale?: LocaleCode;
-    /**
-     * On datetime picker change callback
-     */
-    onChange: ReactDatePickerProps['onChange'];
-    /**
-     * On input change callback
-     */
-    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Minimum selectable date
-     */
-    minDate?: ReactDatePickerProps['minDate'];
-    /**
-     * Maximum selectable date
-     */
-    maxDate?: ReactDatePickerProps['maxDate'];
-    /**
-     * Allows to define time intervals in time picker
-     *
-     * @default 30
-     */
-    timeInterval?: ReactDatePickerProps['timeIntervals'];
-    /**
-     * Text of the error message when input element is in error state
-     */
-    errorMessage?: string;
-    /**
-     * Allows to enable or disable date picker functionality
-     *
-     * @default true
-     */
-    isDatePicker?: boolean;
-    /**
-     * Allows to enable or disable time picker functionality. Ignored when endDate prop is defined
-     *
-     * @default false
-     */
-    isTimePicker?: boolean;
-    /**
-     * Allows to set input element as editable
-     *
-     * @default false
-     */
-    isEditable?: boolean;
-    /**
-     * Allows to clear the selected date
-     */
-    isClearable?: boolean;
-    /**
-     * Allows to disable the component functionality
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Allows to set input element as mandatory
-     *
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * Allows to displays error icon with `theme.color.notification.error` color in the input element and error message underneath the input
-     *
-     * @default false
-     */
-    isInError?: boolean;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName DateTime Picker */
-declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default DateTimePicker;
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+import type { LocaleCode } from '../../types/locale.d';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id: string;
+    /**
+     * Default selected date value
+     */
+    date?: Date;
+    /**
+     * Allows to enable range picker functionality.
+     * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
+     */
+    endDate?: ReactDatePickerProps['endDate'];
+    /**
+     * Input label content
+     */
+    label?: string;
+    /**
+     * Input placeholder content
+     */
+    placeholder?: string;
+    /**
+     * Allows to change formatting of date value in input
+     *
+     * @param {LocaleCode} fi-FI Finnish (Finland)
+     * @param {LocaleCode} en-GB English (United Kingdom)
+     *
+     * @default 'fi-FI'
+     */
+    locale?: LocaleCode;
+    /**
+     * On datetime picker change callback
+     */
+    onChange: ReactDatePickerProps['onChange'];
+    /**
+     * On input change callback
+     */
+    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: ReactDatePickerProps['minDate'];
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: ReactDatePickerProps['maxDate'];
+    /**
+     * Allows to define time intervals in time picker
+     *
+     * @default 30
+     */
+    timeInterval?: ReactDatePickerProps['timeIntervals'];
+    /**
+     * Text of the error message when input element is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to enable or disable date picker functionality
+     *
+     * @default true
+     */
+    isDatePicker?: boolean;
+    /**
+     * Allows to enable or disable time picker functionality. Ignored when endDate prop is defined
+     *
+     * @default false
+     */
+    isTimePicker?: boolean;
+    /**
+     * Allows to set input element as editable
+     *
+     * @default false
+     */
+    isEditable?: boolean;
+    /**
+     * Allows to clear the selected date
+     */
+    isClearable?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Allows to set input element as mandatory
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Allows to displays error icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     *
+     * @default false
+     */
+    isInError?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName DateTime Picker */
+declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default DateTimePicker;

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

@@ -18,46 +18,46 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/**
- * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
- * Contains only used and functionality wise necessary properties
- */
-const localeData = {
-    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
-    'fi-FI': {
-        code: 'fi',
-        formatLong: {
-            date: () => 'eeee d. MMMM y',
-            time: () => 'HH.mm',
-        },
-        localize: {
-            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
-            month: (i) => [
-                'Tammikuu',
-                'Helmikuu',
-                'Maaliskuu',
-                'Huhtikuu',
-                'Toukokuu',
-                'Kesäkuu',
-                'Heinäkuu',
-                'Elokuu',
-                'Syyskuu',
-                'Lokakuu',
-                'Marraskuu',
-                'Joulukuu',
-            ][i],
-            timeCaption: 'Aika',
-        },
-        options: {
-            weekStartsOn: 1,
-            firstWeekContainsDate: 4,
-        },
-    },
-    // Use react-datepicker default language
-    'en-GB': undefined,
-};
-const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
-// TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
+/**
+ * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
+ * Contains only used and functionality wise necessary properties
+ */
+const localeData = {
+    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
+    'fi-FI': {
+        code: 'fi',
+        formatLong: {
+            date: () => 'eeee d. MMMM y',
+            time: () => 'HH.mm',
+        },
+        localize: {
+            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
+            month: (i) => [
+                'Tammikuu',
+                'Helmikuu',
+                'Maaliskuu',
+                'Huhtikuu',
+                'Toukokuu',
+                'Kesäkuu',
+                'Heinäkuu',
+                'Elokuu',
+                'Syyskuu',
+                'Lokakuu',
+                'Marraskuu',
+                'Joulukuu',
+            ][i],
+            timeCaption: 'Aika',
+        },
+        options: {
+            weekStartsOn: 1,
+            firstWeekContainsDate: 4,
+        },
+    },
+    // Use react-datepicker default language
+    'en-GB': undefined,
+};
+const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+// TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
 const Wrapper = styled__default["default"].div `
     position: relative;
 
@@ -220,7 +220,7 @@ const Wrapper = styled__default["default"].div `
             }
         }
     }
-`;
+`;
 const MonthSelector = styled__default["default"].div `
     display: flex;
     align-items: center;
@@ -229,64 +229,64 @@ const MonthSelector = styled__default["default"].div `
     span.dnasg-icon > svg {
         fill: ${theme["default"].color.text.gray};
     }
-`;
+`;
 const CurrentMonth = styled__default["default"].div `
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
     font-weight: ${theme["default"].fontWeight.bold};
-`;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
-    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
-    React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
-        month: 'long',
-        year: 'numeric',
-    }))),
-    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
-/** @visibleName DateTime Picker */
-const DateTimePicker = (_a) => {
-    var _b;
-    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
-    const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
-    const handleOnInputFocus = () => {
-        setShowReactDatePicker(true);
-    };
-    const handleOnInputChange = (_, e) => {
-        if (props.onInputChange) {
-            props.onInputChange(e);
-        }
-    };
-    const handleOnKeyDown = (e) => {
-        if (!props.isEditable &&
-            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
-            props.onChange(null, e);
-        }
-    };
-    const handleClearable = (e) => {
-        props.onChange(null, e);
-    };
-    const handleOnReactDatePickerChange = (date, e) => {
-        setShowReactDatePicker(false);
-        props.onChange(date, e);
-    };
-    const handleOnReactDatePickerClickOutside = () => {
-        setShowReactDatePicker(false);
-    };
-    const formatInputValue = [startDate, props.endDate]
-        .filter(Boolean)
-        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
-        dateStyle: 'medium',
-    })), (props.endDate === undefined &&
-        isTimePicker && {
-        timeStyle: 'short',
-    }))))
-        .join(' - ');
-    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
-    return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
-            // Used to format the date/time in internal ReactDatePicker input
-            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
-            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
+    React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+        month: 'long',
+        year: 'numeric',
+    }))),
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
+/** @visibleName DateTime Picker */
+const DateTimePicker = (_a) => {
+    var _b;
+    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+    const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
+    const handleOnInputFocus = () => {
+        setShowReactDatePicker(true);
+    };
+    const handleOnInputChange = (_, e) => {
+        if (props.onInputChange) {
+            props.onInputChange(e);
+        }
+    };
+    const handleOnKeyDown = (e) => {
+        if (!props.isEditable &&
+            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
+            props.onChange(null, e);
+        }
+    };
+    const handleClearable = (e) => {
+        props.onChange(null, e);
+    };
+    const handleOnReactDatePickerChange = (date, e) => {
+        setShowReactDatePicker(false);
+        props.onChange(date, e);
+    };
+    const handleOnReactDatePickerClickOutside = () => {
+        setShowReactDatePicker(false);
+    };
+    const formatInputValue = [startDate, props.endDate]
+        .filter(Boolean)
+        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
+        dateStyle: 'medium',
+    })), (props.endDate === undefined &&
+        isTimePicker && {
+        timeStyle: 'short',
+    }))))
+        .join(' - ');
+    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
+    return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
+        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+            // Used to format the date/time in internal ReactDatePicker input
+            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
+            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
 };
 
 exports["default"] = DateTimePicker;

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

@@ -1,35 +1,35 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Content of Divider component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass a custom margin
-     *
-     * @default '0.625rem 0'
-     */
-    margin?: string;
-    /**
-     * Allows to pass a custom padding
-     *
-     * @default '0'
-     */
-    padding?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Divider;
+import type { ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Divider component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0.625rem 0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '0'
+     */
+    padding?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Divider;

package/build/cjs/components/Divider/Divider.js

@@ -23,10 +23,10 @@ const DividerWrapper = styled__default["default"].div `
     border-style: solid;
     border-color: ${theme["default"].color.line.L03};
     border-width: 1px ${({ children }) => !children && '0 0 0'};
-`;
-const Divider = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Divider = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    return (React__default["default"].createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports["default"] = Divider;

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

@@ -1,51 +1,51 @@
-import type { MouseEvent } from 'react';
-import React from 'react';
-type TypeEmblem = 'default' | 'white';
-type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
-type DnaLogoType = TypeEmblem | TypeLogotype;
-interface Props {
-    /**
-     * There are different types and color options for the DNA Logo, depending on the color of
-     * the background and place where it is used.
-     *
-     * @param {DnaLogoType} default Default
-     * @param {DnaLogoType} white For use on hot pink background
-     * @param {DnaLogoType} logotype-pink For use in smaller spaces
-     * @param {DnaLogoType} logotype-white For use in smaller spaces and on pink background
-     * @param {DnaLogoType} logotype-black For specific uses only (see Brand Styleguide)
-     *
-     * @default 'default'
-     */
-    type?: DnaLogoType;
-    /**
-     * The basic principle is that DNA Logo should be sized in a way in which DNA text is always
-     * clearly visible. Therefore, the minimum size of DNA Logo on digital channels is 32 px.
-     *
-     * This doesn't apply when DNA Logo is used as favicon.
-     *
-     * @default '2rem'
-     */
-    size?: string;
-    /**
-     * On Logo click callback
-     */
-    onClick?: (e: MouseEvent) => void;
-    /**
-     * Minimum protected area of a DNA logo from another element or edge is 1/4 of the height.
-     * When activated, value is calculated automatically from size property.
-     *
-     * Individual text elements, such as slogans, urls, etc., are always placed next to the logo
-     * with a minimum protected area.
-     *
-     * @default false
-     */
-    protectedArea?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName DNA Logo */
-declare const DnaLogo: ({ type, size, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default DnaLogo;
+import type { MouseEvent } from 'react';
+import React from 'react';
+type TypeEmblem = 'default' | 'white';
+type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
+type DnaLogoType = TypeEmblem | TypeLogotype;
+interface Props {
+    /**
+     * There are different types and color options for the DNA Logo, depending on the color of
+     * the background and place where it is used.
+     *
+     * @param {DnaLogoType} default Default
+     * @param {DnaLogoType} white For use on hot pink background
+     * @param {DnaLogoType} logotype-pink For use in smaller spaces
+     * @param {DnaLogoType} logotype-white For use in smaller spaces and on pink background
+     * @param {DnaLogoType} logotype-black For specific uses only (see Brand Styleguide)
+     *
+     * @default 'default'
+     */
+    type?: DnaLogoType;
+    /**
+     * The basic principle is that DNA Logo should be sized in a way in which DNA text is always
+     * clearly visible. Therefore, the minimum size of DNA Logo on digital channels is 32 px.
+     *
+     * This doesn't apply when DNA Logo is used as favicon.
+     *
+     * @default '2rem'
+     */
+    size?: string;
+    /**
+     * On Logo click callback
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * Minimum protected area of a DNA logo from another element or edge is 1/4 of the height.
+     * When activated, value is calculated automatically from size property.
+     *
+     * Individual text elements, such as slogans, urls, etc., are always placed next to the logo
+     * with a minimum protected area.
+     *
+     * @default false
+     */
+    protectedArea?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName DNA Logo */
+declare const DnaLogo: ({ type, size, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default DnaLogo;