@bcgov-sso/common-react-components 1.7.0 → 1.15.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

@@ -3892,14 +3892,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 +3937,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 +3972,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() {
@@ -8353,7 +8351,7 @@ const styles$1 = {
         },
         secondary: {
             button: `
-        border: 3px solid #1a4dff;
+        box-shadow: 0px 0px 0px 3px #1a4dff inset;
         color: #1a4dff;
         background-color: #ffffff;
 
@@ -8383,25 +8381,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 +8444,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 +8636,12 @@ const styles = {
     variant: {
         danger: {
             container: `
-        background-color: #FEE8E6;
+        background-color: #EAC2C1;
       `,
         },
         success: {
             container: `
-        background-color: #E5F9E6;
+        background-color: #C4D8CF;
       `,
         },
     },