@dnanpm/styleguide 3.4.0 → 3.5.0

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

@@ -41,6 +41,14 @@ interface Props {
      * 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
      *
@@ -69,6 +77,10 @@ interface Props {
      * @default false
      */
     isEditable?: boolean;
+    /**
+     * Allows to clear the selected date
+     */
+    isClearable?: boolean;
     /**
      * Allows to disable the component functionality
      *

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

@@ -57,6 +57,7 @@ const localeData = {
     '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;
 
@@ -67,7 +68,7 @@ const Wrapper = styled__default["default"].div `
         border-radius: ${theme["default"].radius.default};
         border: 1px solid ${theme["default"].color.line.L03};
         background-color: ${theme["default"].color.background.white.default};
-        z-index: 1;
+        z-index: 2;
 
         .react-datepicker__aria-live {
             display: none;
@@ -135,7 +136,17 @@ const Wrapper = styled__default["default"].div `
                 color: ${theme["default"].color.text.pink};
                 font-weight: ${theme["default"].fontWeight.bold};
             }
-
+            &.react-datepicker__day--disabled {
+                color: ${theme["default"].color.text.gray + theme["default"].color.transparency.T40};
+                font-weight: ${theme["default"].fontWeight.book};
+                &:hover {
+                    cursor: default;
+                    color: ${theme["default"].color.text.gray + theme["default"].color.transparency.T40};
+                    font-weight: ${theme["default"].fontWeight.book};
+                    background-color: transparent;
+                    border: 1px solid transparent;
+                }
+            }
             &.react-datepicker__day--in-selecting-range {
                 color: ${theme["default"].color.text.white};
                 font-weight: ${theme["default"].fontWeight.bold};
@@ -271,8 +282,8 @@ const DateTimePicker = (_a) => {
         .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: handleClearable, 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, 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], 
+        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 }))));

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

@@ -42,6 +42,7 @@ interface Props {
      */
     'data-testid'?: string;
 }
+/** @visibleName Notification */
 declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Notification;

package/build/cjs/components/Notification/Notification.js

@@ -7,7 +7,6 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
-var styledUtils = require('../../utils/styledUtils.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
@@ -24,26 +23,34 @@ const iconsMap = {
 };
 const NotificationWrapper = styled__default["default"].div `
     display: flex;
-    align-items: center;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    gap: 1rem;
     line-height: ${theme["default"].lineHeight.default};
     color: ${theme["default"].color.text.black};
     background-color: ${theme["default"].color.background.white.default};
     border-radius: ${theme["default"].radius.s};
     border: 2px solid ${({ $type }) => theme["default"].color.notification[$type]};
 `;
+const IconWrapper = styled__default["default"].div `
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    background-color: ${({ $type }) => theme["default"].color.notification[$type]};
+`;
 const ContentWrapper = styled__default["default"].span `
-    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+    margin: auto 0;
+    padding: 0.5rem 0;
+    width: 100%;
 `;
 const ButtonCloseStyled = styled__default["default"](ButtonClose["default"]) `
     position: static;
-    margin: 0 0 0 auto;
+    margin: auto 0.5rem;
 `;
+/** @visibleName Notification */
 const Notification = (_a) => {
     var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     return !props.dismissed ? (React__default["default"].createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "2rem", color: theme["default"].color.notification[type] }),
+        React__default["default"].createElement(IconWrapper, { "$type": type },
+            React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "2rem", color: theme["default"].color.default.white })),
         React__default["default"].createElement(ContentWrapper, null, props.children),
         props.closeButton && (React__default["default"].createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
             React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: "currentColor" }))))) : null;

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

@@ -1,5 +1,6 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
 import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
 interface Props {
     /**
      * Unique ID for the input element
@@ -67,6 +68,19 @@ interface Props {
      * @default 3
      */
     height?: number;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
+     */
+    status?: InputStatus;
+    /**
+     * Text of the error message when textarea is in error state
+     */
+    errorMessage?: string;
     /**
      * Allows to pass a custom className
      */

package/build/cjs/components/Textarea/Textarea.js

@@ -57,6 +57,10 @@ const Message = styled["default"].div `
     color: ${theme["default"].color.text.gray};
     margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
+const ErrorMessage = styled["default"](Message) `
+    font-weight: ${theme["default"].fontWeight.medium};
+    color: ${theme["default"].color.notification.error};
+`;
 const Textarea = (_a) => {
     var { height = 3, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["height", 'data-testid']);
     const inputRef = React.useRef(null);
@@ -77,9 +81,10 @@ const Textarea = (_a) => {
         }
     };
     return (React__default["default"].createElement(FieldContainer, { className: props.className },
-        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
+        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default["default"].createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+        props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports["default"] = Textarea;

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

@@ -41,6 +41,14 @@ interface Props {
      * 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
      *
@@ -69,6 +77,10 @@ interface Props {
      * @default false
      */
     isEditable?: boolean;
+    /**
+     * Allows to clear the selected date
+     */
+    isClearable?: boolean;
     /**
      * Allows to disable the component functionality
      *

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

@@ -47,6 +47,7 @@ const localeData = {
     '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.div `
     position: relative;
 
@@ -57,7 +58,7 @@ const Wrapper = styled__default.div `
         border-radius: ${theme.radius.default};
         border: 1px solid ${theme.color.line.L03};
         background-color: ${theme.color.background.white.default};
-        z-index: 1;
+        z-index: 2;
 
         .react-datepicker__aria-live {
             display: none;
@@ -125,7 +126,17 @@ const Wrapper = styled__default.div `
                 color: ${theme.color.text.pink};
                 font-weight: ${theme.fontWeight.bold};
             }
-
+            &.react-datepicker__day--disabled {
+                color: ${theme.color.text.gray + theme.color.transparency.T40};
+                font-weight: ${theme.fontWeight.book};
+                &:hover {
+                    cursor: default;
+                    color: ${theme.color.text.gray + theme.color.transparency.T40};
+                    font-weight: ${theme.fontWeight.book};
+                    background-color: transparent;
+                    border: 1px solid transparent;
+                }
+            }
             &.react-datepicker__day--in-selecting-range {
                 color: ${theme.color.text.white};
                 font-weight: ${theme.fontWeight.bold};
@@ -261,8 +272,8 @@ const DateTimePicker = (_a) => {
         .join(' - ');
     const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
     return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { 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: handleClearable, 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.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, 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], 
+        React__default.createElement(Input, { 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.createElement(ReactDatePicker, { 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 }))));

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

@@ -42,6 +42,7 @@ interface Props {
      */
     'data-testid'?: string;
 }
+/** @visibleName Notification */
 declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Notification;

package/build/es/components/Notification/Notification.js

@@ -3,7 +3,6 @@ import { Close, Info, Check, Warning, Error } from '@dnanpm/icons';
 import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
-import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
@@ -15,26 +14,34 @@ const iconsMap = {
 };
 const NotificationWrapper = styled__default.div `
     display: flex;
-    align-items: center;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 1)}
-        ${getMultipliedSize(theme.base.baseHeight, 2)};
+    gap: 1rem;
     line-height: ${theme.lineHeight.default};
     color: ${theme.color.text.black};
     background-color: ${theme.color.background.white.default};
     border-radius: ${theme.radius.s};
     border: 2px solid ${({ $type }) => theme.color.notification[$type]};
 `;
+const IconWrapper = styled__default.div `
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    background-color: ${({ $type }) => theme.color.notification[$type]};
+`;
 const ContentWrapper = styled__default.span `
-    margin: 0 ${getMultipliedSize(theme.base.baseHeight, 1.5)};
+    margin: auto 0;
+    padding: 0.5rem 0;
+    width: 100%;
 `;
 const ButtonCloseStyled = styled__default(ButtonClose) `
     position: static;
-    margin: 0 0 0 auto;
+    margin: auto 0.5rem;
 `;
+/** @visibleName Notification */
 const Notification = (_a) => {
     var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     return !props.dismissed ? (React__default.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] }),
+        React__default.createElement(IconWrapper, { "$type": type },
+            React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.default.white })),
         React__default.createElement(ContentWrapper, null, props.children),
         props.closeButton && (React__default.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
             React__default.createElement(Icon, { icon: Close, color: "currentColor" }))))) : null;

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

@@ -1,5 +1,6 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
 import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
 interface Props {
     /**
      * Unique ID for the input element
@@ -67,6 +68,19 @@ interface Props {
      * @default 3
      */
     height?: number;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
+     */
+    status?: InputStatus;
+    /**
+     * Text of the error message when textarea is in error state
+     */
+    errorMessage?: string;
     /**
      * Allows to pass a custom className
      */

package/build/es/components/Textarea/Textarea.js

@@ -49,6 +49,10 @@ const Message = styled.div `
     color: ${theme.color.text.gray};
     margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
+const ErrorMessage = styled(Message) `
+    font-weight: ${theme.fontWeight.medium};
+    color: ${theme.color.notification.error};
+`;
 const Textarea = (_a) => {
     var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
     const inputRef = useRef(null);
@@ -69,9 +73,10 @@ const Textarea = (_a) => {
         }
     };
     return (React__default.createElement(FieldContainer, { className: props.className },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Textarea as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "3.4.0",
+    "version": "3.5.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",