@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/cjs/components/Drawer/Drawer.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ReactModal = require('react-modal');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Box = require('../Box/Box.js');
+var ButtonClose = require('../Button/ButtonClose.js');
+var Icon = require('../Icon/Icon.js');
+var hlX = require('../Icons/hlX.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
+
+const sizeMap = {
+    small: '375px',
+    medium: '768px',
+    large: '1080px',
+};
+const GlobalStyle = styled.createGlobalStyle `
+    body.ReactModal__Body--open {
+        overflow: hidden;
+    }
+`;
+const StyledReactModal = styled["default"](ReactModal__default["default"]) `
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100vw;
+    height: 100dvh;
+    max-width: 100vw;
+    max-height: 100%;
+    transform: translateX(100%);
+    animation: slideIn 0.5s forwards;
+
+    &.ReactModal__Content--before-close {
+        animation: slideOut 0.3s forwards;
+    }
+
+    @keyframes slideIn {
+        100% {
+            transform: translateX(0%);
+        }
+    }
+
+    @keyframes slideOut {
+        0% {
+            transform: translateX(0%);
+        }
+
+        100% {
+            transform: translateX(100%);
+        }
+    }
+
+    ${({ size }) => styledUtils.media.sm `
+        width: ${sizeMap[size]};
+    `};
+`;
+const StyledOverlay = styled["default"].div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+    animation: fadeIn 0.2s ease-in-out;
+
+    &.ReactModal__Overlay--before-close {
+        animation: fadeOut 0.2s ease-in-out;
+        animation-delay: 0.1s;
+    }
+
+    @keyframes fadeIn {
+        0% {
+            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
+        }
+
+        100% {
+            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+        }
+    }
+
+    @keyframes fadeOut {
+        0% {
+            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+        }
+
+        100% {
+            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
+        }
+    }
+`;
+const StyledBox = styled["default"](Box["default"]) `
+    border-radius: 0;
+    height: 100%;
+    overflow-y: auto;
+`;
+const StyledContent = styled["default"].div `
+    &:focus {
+        outline: none;
+    }
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalContent = (_a, children) => {
+    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default["default"].createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+};
+const Drawer = (_a) => {
+    var { appElement = '#__next', size = 'medium', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "closeButton", "isClosable", 'data-testid']);
+    ReactModal__default["default"].setAppElement(appElement);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
+            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
+                props.children,
+                closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
+                    React__default["default"].createElement(Icon["default"], { icon: hlX["default"] }))))),
+        React__default["default"].createElement(GlobalStyle, null)));
+};
+
+exports["default"] = Drawer;

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

@@ -1,15 +1,36 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
-    message: string;
     /**
-     * @deprecated Use type `Icon` from Icon component
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Icon shown in the component
+     *
+     * @default `hlInfo`
+     */
+    icon?: IconProps['icon'];
+    /**
+     * Size of icon in the component
+     *
+     * @default '2rem'
      */
-    icon?: IconProps['icon'] | string;
     iconSize?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
 }
 /** @visibleName Empty State */
-declare const EmptyState: ({ message, icon, iconSize, "data-testid": dataTestId, }: Props) => JSX.Element;
+declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default EmptyState;

package/build/cjs/components/EmptyState/EmptyState.js

@@ -2,49 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
-require('tslib');
 var hlInfo = require('../Icons/hlInfo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const InfoContainer = styled['default'].div `
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    background: ${theme['default'].color.grayBg};
-    width: 100%;
-    height: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 14)};
-    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2)}
-        ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1)} ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1)};
-
-    span.dnasg-icon > svg {
-        margin-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2)};
-    }
-
-    ${styledUtils.media.md `
-        padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2.5)};
-    `}
+const ContentWrapper = styled["default"].div `
+    display: grid;
+    grid-gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    justify-items: center;
+    line-height: ${theme["default"].lineHeight.default};
 `;
 /** @visibleName Empty State */
-const EmptyState = ({ message, icon = hlInfo['default'], iconSize = '2rem', 'data-testid': dataTestId, }) => {
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const renderIcon = () => {
-        if (typeof icon === 'string') {
-            return React__default['default'].createElement(Icon['default'], { name: icon, size: iconSize, color: theme['default'].color.hotPink });
-        }
-        return React__default['default'].createElement(Icon['default'], { icon: icon, size: iconSize, color: theme['default'].color.hotPink });
-    };
-    return (React__default['default'].createElement(InfoContainer, { "data-testid": dataTestId },
-        renderIcon(),
-        message));
+const EmptyState = (_a) => {
+    var { icon = hlInfo["default"], iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
+    return (React__default["default"].createElement(Box["default"], { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(ContentWrapper, null,
+            React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),
+            React__default["default"].createElement("div", null, props.children))));
 };
 
-exports.default = EmptyState;
+exports["default"] = EmptyState;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+type Position = 'top' | 'bottom';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to set position of Floater component relative to its nearest scrolling ancestor and containing block
+     *
+     * @param {Position} top Component sticks to the top of its nearest scrolling ancestor
+     * @param {Position} bottom Component sticks to the bottom of its nearest scrolling ancestor
+     *
+     * @default top
+     */
+    position?: Position;
+    /**
+     * Allows to pass a custom offset
+     *
+     * @default '0'
+     */
+    offset?: string;
+    /**
+     * Allows to pass a custom z-index CSS property
+     */
+    zIndex?: string;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Floater: ({ position, offset, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Floater;

package/build/cjs/components/Floater/Floater.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const getInset = ({ position, offset }) => {
+    const insetConfig = {
+        top: [offset, 'auto', 'auto'],
+        bottom: ['auto', 'auto', offset],
+    };
+    return `inset: ${insetConfig[position].join(' ')};`;
+};
+const Element = styled__default["default"].div `
+    position: sticky;
+    ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
+    ${({ position, offset }) => getInset({ position, offset })}
+`;
+const Floater = (_a) => {
+    var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "offset", 'data-testid']);
+    return (React__default["default"].createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+exports["default"] = Floater;

package/build/cjs/components/Footer/Components/FooterComponents.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { LangProps } from '../../../types/language.d';
 interface PrincipalProps {
     titles: LangProps;
@@ -13,7 +13,7 @@ interface CategoryArrayProps {
     currentIndex: number;
     category: CategoriesProps;
 }
-declare type CategoryProps = PrincipalProps;
+type CategoryProps = PrincipalProps;
 interface ServicesProps extends PrincipalProps {
     descriptions: LangProps;
 }
@@ -37,7 +37,7 @@ interface LanguageComponentProps {
     languages: LanguageProps[];
 }
 interface GeneralInformationComponentProps {
-    generalInformation: GeneralInformationProps;
+    generalInformation?: GeneralInformationProps;
 }
 interface GeneralInformationProps {
     privacyPolicy: PrincipalProps;
@@ -68,10 +68,10 @@ export declare const mapCorporateSelector: (languagesObject: LanguageSelectorPro
     title: string;
     url: string;
 }[];
-export declare const Services: ({ services }: FooterNavigationProps) => JSX.Element;
-export declare const CategoryDisplay: ({ category, currentIndex }: CategoryArrayProps) => JSX.Element;
-export declare const Categories: ({ categories }: FooterNavigationProps) => JSX.Element;
-export declare const LanguageLinks: ({ languages }: LanguageComponentProps) => JSX.Element;
-export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => JSX.Element;
-export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => JSX.Element;
+export declare const Services: ({ services }: FooterNavigationProps) => React.JSX.Element;
+export declare const CategoryDisplay: ({ category, currentIndex }: CategoryArrayProps) => React.JSX.Element;
+export declare const Categories: ({ categories }: FooterNavigationProps) => React.JSX.Element;
+export declare const LanguageLinks: ({ languages }: LanguageComponentProps) => React.JSX.Element;
+export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element;
+export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => React.JSX.Element;
 export {};