@tds/community-modal - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

__tests__/Modal.spec.jsx

@@ -43,2 +43,12 @@ import React from 'react'
 
+  it('should set default width(570px) when "width" props not provided', () => {
+    const modal = doMount()
+    expect(modal).toHaveProp('width', 570)
+  })
+
+  it('should set width based on "width" size provided', () => {
+    const modal = doMount({ width: 630 })
+    expect(modal).toHaveProp('width', 630)
+  })
+
   it('does not allow custom CSS', () => {
@@ -45,0 +55,0 @@ const modal = doMount({

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [1.3.0](https://github.com/telus/tds-community/compare/@tds/community-modal@1.2.2...@tds/community-modal@1.3.0) (2021-03-18)
+
+
+### Bug Fixes
+
+* **community-modal:** update docs ([7d36e81](https://github.com/telus/tds-community/commit/7d36e81d971d33c4180d24d89dab5eced1f16939))
+
+
+### Features
+
+* **community-modal:** update modal max-width ([4186943](https://github.com/telus/tds-community/commit/41869438f4026e515f6b1bc58ca99644d894e5e9))
+
+
+
+
+
 ## [1.2.2](https://github.com/telus/tds-community/compare/@tds/community-modal@1.2.1...@tds/community-modal@1.2.2) (2021-01-15)
@@ -8,0 +24,0 @@

dist/index.cjs.js

@@ -104,25 +104,30 @@ 'use strict';
 });
-var StyledModal = styled.div(_extends_1({
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-  top: '0%',
-  left: '0%',
-  '> button:first-child': {
-    display: 'flex',
-    alignSelf: 'flex-end',
-    background: 'none',
-    border: 'none',
-    margin: '1rem 0.5rem'
-  }
-}, coreResponsive.media.from('md').css({
-  margin: '0 auto',
-  maxWidth: '570px',
-  height: 'auto',
-  borderRadius: '0.25rem',
-  boxShadow: '0 0 16px 0 rgba(0,0,0,0.2)',
-  zIndex: '2000',
-  backgroundColor: coreColours.colorWhite,
-  top: '29%'
-})));
+var StyledModal = styled.div(function (props) {
+  var width = props.width;
+  return _extends_1({
+    height: '100%',
+    width: '100%',
+    position: 'relative',
+    top: '0%',
+    left: '0%',
+    '> button:first-child': {
+      display: 'flex',
+      alignSelf: 'flex-end',
+      background: 'none',
+      border: 'none',
+      margin: '1rem 0.5rem'
+    }
+  }, coreResponsive.media.from('md').css({
+    margin: '0 auto',
+    maxWidth: '736px',
+    width: "".concat(width, "px"),
+    minWidth: '570px',
+    height: 'auto',
+    borderRadius: '0.25rem',
+    boxShadow: '0 0 16px 0 rgba(0,0,0,0.2)',
+    zIndex: '2000',
+    backgroundColor: coreColours.colorWhite,
+    top: '29%'
+  }));
+});
 var CTAWrapper = styled.div(function (props) {
@@ -207,3 +212,4 @@ if (props && !props.cancelCTAExists) {
       focusElementAfterClose = _ref.focusElementAfterClose,
-      rest = objectWithoutProperties(_ref, ["heading", "confirmCTAText", "cancelCTAText", "bodyText", "isOpen", "onClose", "onConfirm", "focusElementAfterClose"]);
+      width = _ref.width,
+      rest = objectWithoutProperties(_ref, ["heading", "confirmCTAText", "cancelCTAText", "bodyText", "isOpen", "onClose", "onConfirm", "focusElementAfterClose", "width"]);
 
@@ -285,3 +291,4 @@ var ModalOverlayRef = React.useRef(null);
   }), React__default.createElement(StyledModal, {
-    ref: modalRef
+    ref: modalRef,
+    width: width
   }, React__default.createElement(ModalWrapper, null, React__default.createElement(Box, {
@@ -363,3 +370,9 @@ inset: 5
     current: PropTypes.any
-  })]).isRequired
+  })]).isRequired,
+
+  /**
+   * Set the width of `Modal`.
+   * Accepts a numeric value that lies in the range between minWidth(570) - maxWidth(736).
+   */
+  width: PropTypes.number
 };
@@ -369,2 +382,3 @@ Modal.defaultProps = {
   cancelCTAText: '',
+  width: 570,
   onConfirm: null
@@ -371,0 +385,0 @@ };

dist/index.es.js

@@ -96,25 +96,30 @@ import React, { useRef, useEffect } from 'react';
 });
-var StyledModal = styled.div(_extends_1({
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-  top: '0%',
-  left: '0%',
-  '> button:first-child': {
-    display: 'flex',
-    alignSelf: 'flex-end',
-    background: 'none',
-    border: 'none',
-    margin: '1rem 0.5rem'
-  }
-}, media.from('md').css({
-  margin: '0 auto',
-  maxWidth: '570px',
-  height: 'auto',
-  borderRadius: '0.25rem',
-  boxShadow: '0 0 16px 0 rgba(0,0,0,0.2)',
-  zIndex: '2000',
-  backgroundColor: colorWhite,
-  top: '29%'
-})));
+var StyledModal = styled.div(function (props) {
+  var width = props.width;
+  return _extends_1({
+    height: '100%',
+    width: '100%',
+    position: 'relative',
+    top: '0%',
+    left: '0%',
+    '> button:first-child': {
+      display: 'flex',
+      alignSelf: 'flex-end',
+      background: 'none',
+      border: 'none',
+      margin: '1rem 0.5rem'
+    }
+  }, media.from('md').css({
+    margin: '0 auto',
+    maxWidth: '736px',
+    width: "".concat(width, "px"),
+    minWidth: '570px',
+    height: 'auto',
+    borderRadius: '0.25rem',
+    boxShadow: '0 0 16px 0 rgba(0,0,0,0.2)',
+    zIndex: '2000',
+    backgroundColor: colorWhite,
+    top: '29%'
+  }));
+});
 var CTAWrapper = styled.div(function (props) {
@@ -199,3 +204,4 @@ if (props && !props.cancelCTAExists) {
       focusElementAfterClose = _ref.focusElementAfterClose,
-      rest = objectWithoutProperties(_ref, ["heading", "confirmCTAText", "cancelCTAText", "bodyText", "isOpen", "onClose", "onConfirm", "focusElementAfterClose"]);
+      width = _ref.width,
+      rest = objectWithoutProperties(_ref, ["heading", "confirmCTAText", "cancelCTAText", "bodyText", "isOpen", "onClose", "onConfirm", "focusElementAfterClose", "width"]);
 
@@ -277,3 +283,4 @@ var ModalOverlayRef = useRef(null);
   }), React.createElement(StyledModal, {
-    ref: modalRef
+    ref: modalRef,
+    width: width
   }, React.createElement(ModalWrapper, null, React.createElement(Box, {
@@ -355,3 +362,9 @@ inset: 5
     current: PropTypes.any
-  })]).isRequired
+  })]).isRequired,
+
+  /**
+   * Set the width of `Modal`.
+   * Accepts a numeric value that lies in the range between minWidth(570) - maxWidth(736).
+   */
+  width: PropTypes.number
 };
@@ -361,2 +374,3 @@ Modal.defaultProps = {
   cancelCTAText: '',
+  width: 570,
   onConfirm: null
@@ -363,0 +377,0 @@ };

Modal.jsx

@@ -37,2 +37,3 @@ import React, { useRef, useEffect } from 'react'
   focusElementAfterClose,
+  width,
   ...rest
@@ -114,3 +115,3 @@ }) => {
           >
-            <StyledModal ref={modalRef}>
+            <StyledModal ref={modalRef} width={width}>
               <ModalWrapper>
@@ -196,2 +197,8 @@ <Box inset={5}>
     .isRequired,
+
+  /**
+   * Set the width of `Modal`.
+   * Accepts a numeric value that lies in the range between minWidth(570) - maxWidth(736).
+   */
+  width: PropTypes.number,
 }
@@ -202,2 +209,3 @@
   cancelCTAText: '',
+  width: 570,
   onConfirm: null,
@@ -204,0 +212,0 @@ }

package.json

 {
   "name": "@tds/community-modal",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "",
@@ -40,3 +40,3 @@ "main": "index.cjs.js",
   },
-  "gitHead": "6091bea4a0f756eedc122a251497f5ab8ef6d479"
+  "gitHead": "7208b2d4c3de47ad38df2b8faf9dfe4f529f4e7d"
 }

styles.jsx

@@ -26,25 +26,30 @@ import styled from 'styled-components'
 
-export const StyledModal = styled.div({
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-  top: '0%',
-  left: '0%',
-  '> button:first-child': {
-    display: 'flex',
-    alignSelf: 'flex-end',
-    background: 'none',
-    border: 'none',
-    margin: '1rem 0.5rem',
-  },
-  ...media.from('md').css({
-    margin: '0 auto',
-    maxWidth: '570px',
-    height: 'auto',
-    borderRadius: '0.25rem',
-    boxShadow: '0 0 16px 0 rgba(0,0,0,0.2)',
-    zIndex: '2000',
-    backgroundColor: colorWhite,
-    top: '29%',
-  }),
+export const StyledModal = styled.div(props => {
+  const { width } = props
+  return {
+    height: '100%',
+    width: '100%',
+    position: 'relative',
+    top: '0%',
+    left: '0%',
+    '> button:first-child': {
+      display: 'flex',
+      alignSelf: 'flex-end',
+      background: 'none',
+      border: 'none',
+      margin: '1rem 0.5rem',
+    },
+    ...media.from('md').css({
+      margin: '0 auto',
+      maxWidth: '736px',
+      width: `${width}px`,
+      minWidth: '570px',
+      height: 'auto',
+      borderRadius: '0.25rem',
+      boxShadow: '0 0 16px 0 rgba(0,0,0,0.2)',
+      zIndex: '2000',
+      backgroundColor: colorWhite,
+      top: '29%',
+    }),
+  }
 })
@@ -51,0 +56,0 @@

No alert changes

Improved metrics

Total package byte prevSize

122819

0.94%

Lines of code

1085

4.43%

No dependency changes