@dnanpm/styleguide 3.9.2 → 3.9.3

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

@@ -17,6 +17,12 @@ interface Props {
      * @default 1.2 In Mobile view
      */
     visibleItems?: number;
+    /**
+     * Allows to display a slide counter
+     *
+     * @default false
+     */
+    hasCounter?: boolean;
     /**
      * Allows to define carousel title
      */

package/build/cjs/components/Carousel/Carousel.js

@@ -134,6 +134,12 @@ const FooterButton = styled.default.div `
     grid-column: footerButton;
     text-align: right;
 `;
+const Counter = styled.default.span `
+    margin-top: 0.5rem;
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.medium};
+    margin-right: 1rem;
+`;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
@@ -298,6 +304,10 @@ const Carousel = (_a) => {
         React__default.default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
             props.title && React__default.default.createElement(Title, null, props.title),
             React__default.default.createElement(Navigation, null,
+                props.hasCounter && (React__default.default.createElement(Counter, null,
+                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    "/",
+                    slideScreensCount)),
                 React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
                 React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
         React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },

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

@@ -12,8 +12,6 @@ var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../ButtonClose/ButtonClose.js');
-var Floater = require('../Floater/Floater.js');
-var Icon = require('../Icon/Icon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -52,10 +50,10 @@ const StyledReactModal = styled.default(ReactModal__default.default) `
     position: fixed;
     top: 0;
     ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
-    width: 100vw;
+    width: ${({ size }) => sizeMap[size]};
     height: 100dvh;
-    max-width: 100vw;
     max-height: 100%;
+    max-width: calc(100vw - ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)});
     transform: translateX(${({ side }) => side === 'left' && '-'}100%);
     animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
 
@@ -63,9 +61,10 @@ const StyledReactModal = styled.default(ReactModal__default.default) `
         animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
     }
 
-    ${({ size }) => styledUtils.media.sm `
-        width: ${sizeMap[size]};
-    `};
+    @media (max-width: ${sizeMap.small}) {
+        max-width: 100vw;
+        width: 100vw;
+    }
 `;
 const StyledReactModalOverlay = styled.default.div `
     display: flex;
@@ -113,13 +112,16 @@ const StyledReactModalContent = styled.default.div `
 const StyledBox = styled.default(Box.default) `
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     border-radius: 0;
     height: 100%;
-    overflow-y: auto;
     position: relative;
-    padding: 0;
-    border: 0 none;
+    border: 0;
+`;
+const ContentContainer = styled.default.div `
+    flex: 1 1 auto;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
 `;
 const Header = styled.default.div `
     display: flex;
@@ -139,6 +141,7 @@ const Header = styled.default.div `
 `;
 const Title = styled.default.h2 `
     font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M)};
+    line-height: ${({ size }) => (size === 'small' ? theme.default.lineHeight.h2S : theme.default.lineHeight.h2M)};
     color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
 const Subtitle = styled.default.p `
@@ -147,7 +150,7 @@ const Subtitle = styled.default.p `
 `;
 const CloseButton = styled.default(ButtonClose.default) `
     margin: 0;
-    padding: 0.625rem;
+    padding: 0.5rem;
     border-radius: 0 0 0 ${theme.default.radius.default};
     background-color: ${({ variant }) => variant === 'light'
     ? theme.default.color.background.sand.E01
@@ -163,7 +166,6 @@ const Footer = styled.default.div `
     width: 100%;
     border-top: 1px solid ${theme.default.color.line.L04};
     background-color: ${theme.default.color.background.white.default};
-
     ${common.default({ elevation: 'high', shadow: '1 0 0 0' })};
 `;
 const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.default.createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
@@ -176,18 +178,17 @@ const Drawer = (_a) => {
     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, side: side },
-            React__default.default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
-                React__default.default.createElement("div", null,
-                    React__default.default.createElement(Floater.default, null, closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
-                        React__default.default.createElement(Icon.default, { icon: icons.Close, color: variant === 'light'
-                                ? theme.default.color.default.plum
-                                : theme.default.color.default.white })))),
+            React__default.default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
+                React__default.default.createElement(ContentContainer, null,
                     React__default.default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.default.createElement(Title, { size: size, variant: variant }, props.title),
                         props.subtitle && (React__default.default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default.default.createElement(icons.Close, { color: variant === 'light'
+                                ? theme.default.color.default.plum
+                                : theme.default.color.default.white }))),
                     React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
-                props.footer && (React__default.default.createElement(Floater.default, { position: "bottom" },
-                    React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+                props.footer && (React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.default.createElement(GlobalStyle, null)));
 };
 

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

@@ -17,6 +17,12 @@ interface Props {
      * @default 1.2 In Mobile view
      */
     visibleItems?: number;
+    /**
+     * Allows to display a slide counter
+     *
+     * @default false
+     */
+    hasCounter?: boolean;
     /**
      * Allows to define carousel title
      */

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

@@ -126,6 +126,12 @@ const FooterButton = styled.div `
     grid-column: footerButton;
     text-align: right;
 `;
+const Counter = styled.span `
+    margin-top: 0.5rem;
+    font-size: ${theme.fontSize.s};
+    font-weight: ${theme.fontWeight.medium};
+    margin-right: 1rem;
+`;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
@@ -290,6 +296,10 @@ const Carousel = (_a) => {
         React__default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
             props.title && React__default.createElement(Title, null, props.title),
             React__default.createElement(Navigation, null,
+                props.hasCounter && (React__default.createElement(Counter, null,
+                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    "/",
+                    slideScreensCount)),
                 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` },

package/build/es/components/Drawer/Drawer.js

@@ -5,11 +5,9 @@ import ReactModal from 'react-modal';
 import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
-import { media } from '../../utils/styledUtils.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import ButtonClose from '../ButtonClose/ButtonClose.js';
-import Floater from '../Floater/Floater.js';
-import Icon from '../Icon/Icon.js';
 
 const sizeMap = {
     small: '375px',
@@ -43,10 +41,10 @@ const StyledReactModal = styled(ReactModal) `
     position: fixed;
     top: 0;
     ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
-    width: 100vw;
+    width: ${({ size }) => sizeMap[size]};
     height: 100dvh;
-    max-width: 100vw;
     max-height: 100%;
+    max-width: calc(100vw - ${getMultipliedSize(theme.base.baseWidth, 4)});
     transform: translateX(${({ side }) => side === 'left' && '-'}100%);
     animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
 
@@ -54,9 +52,10 @@ const StyledReactModal = styled(ReactModal) `
         animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
     }
 
-    ${({ size }) => media.sm `
-        width: ${sizeMap[size]};
-    `};
+    @media (max-width: ${sizeMap.small}) {
+        max-width: 100vw;
+        width: 100vw;
+    }
 `;
 const StyledReactModalOverlay = styled.div `
     display: flex;
@@ -104,13 +103,16 @@ const StyledReactModalContent = styled.div `
 const StyledBox = styled(Box) `
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     border-radius: 0;
     height: 100%;
-    overflow-y: auto;
     position: relative;
-    padding: 0;
-    border: 0 none;
+    border: 0;
+`;
+const ContentContainer = styled.div `
+    flex: 1 1 auto;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
 `;
 const Header = styled.div `
     display: flex;
@@ -130,6 +132,7 @@ const Header = styled.div `
 `;
 const Title = styled.h2 `
     font-size: ${({ size }) => (size === 'small' ? theme.fontSize.h2S : theme.fontSize.h2M)};
+    line-height: ${({ size }) => (size === 'small' ? theme.lineHeight.h2S : theme.lineHeight.h2M)};
     color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
 `;
 const Subtitle = styled.p `
@@ -138,7 +141,7 @@ const Subtitle = styled.p `
 `;
 const CloseButton = styled(ButtonClose) `
     margin: 0;
-    padding: 0.625rem;
+    padding: 0.5rem;
     border-radius: 0 0 0 ${theme.radius.default};
     background-color: ${({ variant }) => variant === 'light'
     ? theme.color.background.sand.E01
@@ -154,7 +157,6 @@ const Footer = styled.div `
     width: 100%;
     border-top: 1px solid ${theme.color.line.L04};
     background-color: ${theme.color.background.white.default};
-
     ${getElevationShadow({ elevation: 'high', shadow: '1 0 0 0' })};
 `;
 const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
@@ -167,18 +169,17 @@ const Drawer = (_a) => {
     ReactModal.setAppElement(appElement);
     return (React__default.createElement(React__default.Fragment, null,
         React__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, side: side },
-            React__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
-                React__default.createElement("div", null,
-                    React__default.createElement(Floater, null, closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
-                        React__default.createElement(Icon, { icon: Close, color: variant === 'light'
-                                ? theme.color.default.plum
-                                : theme.color.default.white })))),
+            React__default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
+                React__default.createElement(ContentContainer, null,
                     React__default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.createElement(Title, { size: size, variant: variant }, props.title),
                         props.subtitle && (React__default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default.createElement(Close, { color: variant === 'light'
+                                ? theme.color.default.plum
+                                : theme.color.default.white }))),
                     React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
-                props.footer && (React__default.createElement(Floater, { position: "bottom" },
-                    React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+                props.footer && (React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.createElement(GlobalStyle, null)));
 };
 

package/package.json

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