@bcgov-sso/common-react-components 1.6.0 → 1.17.0

package/README.md

@@ -6,12 +6,11 @@ See the github pages link for a storybook instance of components.
 ## Workflow
 
 **Storybook**: This repository has branched-based deployments for the storybook instance. To update
-storybook, merge in a feature branch to the `dev` branch.
+storybook, merge in a feature branch to the `main` branch.
 
-**NPM**: Components will be published to NPM when creating a new release. To release the components
-on the dev branch:
+**NPM**: Components will be published to NPM when creating a new release. To release the components:
 
-1. Merge `dev` into `main`. This will automatically bump the package version based on the commits and generate a tag for the release.
+1. Merge your feature branch into `main`. This will automatically bump the package version based on the commits and generate a tag for the release.
 2. Create a new [release](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository) using the generated tag.
 
 ## Adding Components

package/dist/cjs/index.js

@@ -2662,6 +2662,8 @@ var ReactPropTypesSecret$3 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$3;
 
+var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -2674,7 +2676,7 @@ var printWarning$1 = function() {};
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret$2 = ReactPropTypesSecret_1;
   var loggedTypeFailures = {};
-  var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
+  var has$1 = has$2;
 
   printWarning$1 = function(text) {
     var message = 'Warning: ' + text;
@@ -2686,7 +2688,7 @@ if (process.env.NODE_ENV !== 'production') {
       // This error was thrown as a convenience so that you can use this stack
       // to find the callsite that caused this warning to fire.
       throw new Error(message);
-    } catch (x) {}
+    } catch (x) { /**/ }
   };
 }
 
@@ -2715,7 +2717,8 @@ function checkPropTypes$1(typeSpecs, values, location, componentName, getStack)
           if (typeof typeSpecs[typeSpecName] !== 'function') {
             var err = Error(
               (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
+              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
             );
             err.name = 'Invariant Violation';
             throw err;
@@ -2774,9 +2777,9 @@ var ReactIs$1 = reactIs$1.exports;
 var assign = objectAssign;
 
 var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+var has = has$2;
 var checkPropTypes = checkPropTypes_1;
 
-var has = Function.call.bind(Object.prototype.hasOwnProperty);
 var printWarning = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2877,6 +2880,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
   // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
   var ReactPropTypes = {
     array: createPrimitiveTypeChecker('array'),
+    bigint: createPrimitiveTypeChecker('bigint'),
     bool: createPrimitiveTypeChecker('boolean'),
     func: createPrimitiveTypeChecker('function'),
     number: createPrimitiveTypeChecker('number'),
@@ -2922,8 +2926,9 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
    * is prohibitively expensive if they are created too often, such as what
    * happens in oneOfType() for any type before the one that matched.
    */
-  function PropTypeError(message) {
+  function PropTypeError(message, data) {
     this.message = message;
+    this.data = data && typeof data === 'object' ? data: {};
     this.stack = '';
   }
   // Make `instanceof Error` still work for returned errors.
@@ -2958,7 +2963,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
           ) {
             printWarning(
               'You are manually calling a React.PropTypes validation ' +
-              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
+              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
               'and will throw in the standalone `prop-types` package. ' +
               'You may be seeing this warning due to a third-party PropTypes ' +
               'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
@@ -2997,7 +3002,10 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         // 'of type `object`'.
         var preciseType = getPreciseType(propValue);
 
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+        return new PropTypeError(
+          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+          {expectedType: expectedType}
+        );
       }
       return null;
     }
@@ -3141,14 +3149,19 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     }
 
     function validate(props, propName, componentName, location, propFullName) {
+      var expectedTypes = [];
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
         var checker = arrayOfTypeCheckers[i];
-        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1) == null) {
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1);
+        if (checkerResult == null) {
           return null;
         }
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+          expectedTypes.push(checkerResult.data.expectedType);
+        }
       }
-
-      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
     }
     return createChainableTypeChecker(validate);
   }
@@ -3163,6 +3176,13 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     return createChainableTypeChecker(validate);
   }
 
+  function invalidValidatorError(componentName, location, propFullName, key, type) {
+    return new PropTypeError(
+      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+    );
+  }
+
   function createShapeTypeChecker(shapeTypes) {
     function validate(props, propName, componentName, location, propFullName) {
       var propValue = props[propName];
@@ -3172,8 +3192,8 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
       }
       for (var key in shapeTypes) {
         var checker = shapeTypes[key];
-        if (!checker) {
-          continue;
+        if (typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
         }
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
         if (error) {
@@ -3192,16 +3212,18 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
       if (propType !== 'object') {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
       }
-      // We need to check all keys in case some are required but missing from
-      // props.
+      // We need to check all keys in case some are required but missing from props.
       var allKeys = assign({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
+        if (has(shapeTypes, key) && typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
         if (!checker) {
           return new PropTypeError(
             'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
             '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
-            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
+            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
           );
         }
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
@@ -3386,6 +3408,7 @@ var factoryWithThrowingShims = function() {
   // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
   var ReactPropTypes = {
     array: shim,
+    bigint: shim,
     bool: shim,
     func: shim,
     number: shim,
@@ -3892,14 +3915,16 @@ const ActionsContainer = styled.div `
   color: ${SECONDARY_BLUE};
   & span {
     cursor: pointer;
+    text-decoration: underline;
   }
 `;
 const Divider = styled.span `
   border-right: 1px solid black;
-  margin: 0 9px;
+  height: 1em;
+  margin: auto 0.5em;
 `;
-function Accordion({ children }) {
-    const [allOpen, setAllOpen] = React.useState(null);
+function Accordion({ children, open = false }) {
+    const [allOpen, setAllOpen] = React.useState(open);
     console.log(LANDING_HEADER_FONT);
     const handleClose = () => {
         setAllOpen(false);
@@ -3935,31 +3960,28 @@ const Line = styled.div `
   border-left: 1px solid #bcbcbc;
   margin-left: calc(${(props) => props.circleDiameter} / 2);
 `;
-const ContentContainer = styled.div `
-  display: grid;
-  grid-template-columns: 50px 1fr;
+const Title = styled.h2 `
+  margin: auto 0;
+  color: ${(props) => (props.variant === 'primary' ? 'black' : '#777777')};
+  font-size: ${(props) => (props.variant === 'primary' ? '22px' : '18px')};
 `;
-const TitleContainer = styled.div `
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-
-  & h2 {
-    margin: 0;
-    color: ${(props) => (props.variant === 'primary' ? 'black' : '#777777')};
-    font-size: ${(props) => (props.variant === 'primary' ? '22px' : '18px')};
-  }
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: ${(props) => props.numberedSectionWidth} 1fr;
+  grid-template-rows: ${(props) => props.numberedSectionHeight} 1fr;
 `;
-function NumberedContents({ number, title, children, showLine = true, circleDiameter = '40px', circleMargin = '10px', variant = 'primary', }) {
-    return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement(TitleContainer, { variant: variant },
-            React__default["default"].createElement(Circle, { variant: variant, circleDiameter: circleDiameter, circleMargin: circleMargin }, number),
-            React__default["default"].createElement("h2", null,
-                title,
-                "\u00A0")),
-        React__default["default"].createElement(ContentContainer, null,
-            showLine ? React__default["default"].createElement(Line, { circleDiameter: circleDiameter }) : React__default["default"].createElement("span", null),
-            React__default["default"].createElement("div", null, children))));
+function NumberedContents({ number, title, children, showLine = true, circleDiameter = '40px', circleMargin = '5px', variant = 'primary', }) {
+    const circleDiameterInt = Number(circleDiameter.slice(0, -2));
+    const circleMarginInt = Number(circleMargin.slice(0, -2));
+    const numberedSectionWidth = `${circleDiameterInt + circleMarginInt * 2}px`;
+    const numberedSectionHeight = `${circleDiameterInt + circleMarginInt * 2}px`;
+    return (React__default["default"].createElement(Grid, { numberedSectionWidth: numberedSectionWidth, numberedSectionHeight: numberedSectionHeight },
+        React__default["default"].createElement(Circle, { variant: variant, circleDiameter: circleDiameter, circleMargin: circleMargin }, number),
+        React__default["default"].createElement(Title, { variant: variant },
+            title,
+            "\u00A0"),
+        showLine ? React__default["default"].createElement(Line, { circleDiameter: circleDiameter }) : React__default["default"].createElement("span", null),
+        React__default["default"].createElement("div", null, children)));
 }
 
 var Button$2 = {};
@@ -3973,8 +3995,7 @@ function _interopRequireDefault(obj) {
   };
 }
 
-module.exports = _interopRequireDefault;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
 }(interopRequireDefault));
 
 function _extends() {
@@ -8349,14 +8370,61 @@ const styles$1 = {
             button: `
         background-color: #1a4dff;
         color: #e8edff;
+      `,
+        },
+        plainText: {
+            button: `
+        background-color: unset;
+        color: #0139ff;
       `,
         },
         secondary: {
             button: `
-        border: 3px solid #1a4dff;
+        box-shadow: 0px 0px 0px 3px #1a4dff inset;
         color: #1a4dff;
         background-color: #ffffff;
 
+      `,
+        },
+        bcPrimary: {
+            button: `
+        background-color: #003366;
+        box-shadow: 0px 0px 0px 2px #003366 inset !important;
+        color: #fff;
+        border-radius: 0.222em;
+        &:hover {
+          text-decoration: underline;
+          opacity: 0.80;
+        }
+        &:focus {
+          outline: 4px solid #3B99FC;
+          outline-offset: 1px;
+        }
+        &:active {
+          opacity: 1;
+        }
+        &:disabled {
+          background-color: #003366;
+          box-shadow: 0px 0px 0px 2px #fff inset !important;
+          color: #fff;
+          cursor: not-allowed;
+          opacity: 0.3;
+          &:hover {
+            text-decoration: none;
+          }
+        }
+      `,
+        },
+        bcSecondary: {
+            button: `
+        background-color: #b2b2b2;
+        border-radius: 0.222em;
+        color: white;
+        box-shadow: none !important;
+
+        &:hover {
+          background-color: #b2b2b2;
+        }
       `,
         },
     },
@@ -8383,25 +8451,14 @@ var _typeof = {exports: {}};
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    module.exports = _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
-  } else {
-    module.exports = _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
-  }
-
-  return _typeof(obj);
+  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
 }
 
-module.exports = _typeof;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
 }(_typeof));
 
 (function (module) {
@@ -8457,8 +8514,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
   return newObj;
 }
 
-module.exports = _interopRequireWildcard;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+module.exports = _interopRequireWildcard, module.exports.__esModule = true, module.exports["default"] = module.exports;
 }(interopRequireWildcard));
 
 var _interopRequireDefault = interopRequireDefault.exports;
@@ -8650,12 +8706,12 @@ const styles = {
     variant: {
         danger: {
             container: `
-        background-color: #FEE8E6;
+        background-color: #EAC2C1;
       `,
         },
         success: {
             container: `
-        background-color: #E5F9E6;
+        background-color: #C4D8CF;
       `,
         },
     },
@@ -8692,6 +8748,7 @@ const Alert = (props) => (React__default["default"].createElement(DefaultAlert,
     props.variant === 'success' && SuccessIcon,
     props.variant === 'danger' && DangerIcon,
     props.children,
+    props.content,
     React__default["default"].createElement(DefaultAlert.Close, null, "X")));
 
 exports.Accordion = Accordion;