@dnanpm/styleguide 3.3.1 → 3.5.0

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 };

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

@@ -1,50 +1,50 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
-type ChipVariant = 'outlined' | 'filled';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Allows to change the color styling of component, depending on the passed type
-     *
-     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
-     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
-     * @param {ChipType} success Uses `theme.color.notification.success` color for styling
-     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
-     * @param {ChipType} error Uses `theme.color.notification.error` color for styling
-     *
-     * @default 'default'
-     */
-    type?: ChipType;
-    /**
-     * Allows to change the appearance styling of component, depending on passed variant
-     *
-     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
-     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
-     *
-     * @default 'outlined'
-     */
-    variant?: ChipVariant;
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * On component click callback
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Chip;
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
+type ChipVariant = 'outlined' | 'filled';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the color styling of component, depending on the passed type
+     *
+     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
+     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
+     * @param {ChipType} success Uses `theme.color.notification.success` color for styling
+     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
+     * @param {ChipType} error Uses `theme.color.notification.error` color for styling
+     *
+     * @default 'default'
+     */
+    type?: ChipType;
+    /**
+     * Allows to change the appearance styling of component, depending on passed variant
+     *
+     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
+     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
+     *
+     * @default 'outlined'
+     */
+    variant?: ChipVariant;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * On component click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Chip;

package/build/es/components/Chip/Chip.js

@@ -4,13 +4,13 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const getStyling = ({ $type, $variant, }) => {
-    const stylingColor = $type === 'default' ? theme.color.line.L01 : theme.color.notification[$type];
-    const border = `border: 2px solid ${stylingColor};`;
-    const background = `background-color: ${$variant === 'outlined' ? theme.color.background.white.default : stylingColor};`;
-    const color = `color: ${$variant === 'outlined' ? theme.color.text.black : theme.color.text.white};`;
-    return `${border}${background}${color}`;
-};
+const getStyling = ({ $type, $variant, }) => {
+    const stylingColor = $type === 'default' ? theme.color.line.L01 : theme.color.notification[$type];
+    const border = `border: 2px solid ${stylingColor};`;
+    const background = `background-color: ${$variant === 'outlined' ? theme.color.background.white.default : stylingColor};`;
+    const color = `color: ${$variant === 'outlined' ? theme.color.text.black : theme.color.text.white};`;
+    return `${border}${background}${color}`;
+};
 const Element = styled__default.div `
     display: inline-block;
     border-radius: ${theme.radius.pill};
@@ -22,10 +22,10 @@ const Element = styled__default.div `
     ${({ onClick }) => onClick && `cursor: pointer`};
 
     ${({ $type, $variant }) => getStyling({ $type, $variant })}
-`;
-const Chip = (_a) => {
-    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "variant", 'data-testid']);
-    return (React__default.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Chip = (_a) => {
+    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "variant", 'data-testid']);
+    return (React__default.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { Chip as default };

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

@@ -1,102 +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;
-    /**
-     * 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 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;