@bcgov-sso/common-react-components 1.7.0 → 1.15.0

package/dist/cjs/types/components/Accordion/Accordion.d.ts

@@ -2,8 +2,9 @@
 declare function Accordionpanel({ title, allOpen, setAllOpen, children }: any): JSX.Element;
 interface Props {
     children: any;
+    open?: boolean;
 }
-declare function Accordion({ children }: Props): JSX.Element;
+declare function Accordion({ children, open }: Props): JSX.Element;
 declare namespace Accordion {
     var Panel: typeof Accordionpanel;
 }

package/dist/esm/index.js

@@ -3884,14 +3884,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] = useState(null);
+function Accordion({ children, open = false }) {
+    const [allOpen, setAllOpen] = useState(open);
     console.log(LANDING_HEADER_FONT);
     const handleClose = () => {
         setAllOpen(false);
@@ -3927,31 +3929,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.createElement("div", null,
-        React.createElement(TitleContainer, { variant: variant },
-            React.createElement(Circle, { variant: variant, circleDiameter: circleDiameter, circleMargin: circleMargin }, number),
-            React.createElement("h2", null,
-                title,
-                "\u00A0")),
-        React.createElement(ContentContainer, null,
-            showLine ? React.createElement(Line, { circleDiameter: circleDiameter }) : React.createElement("span", null),
-            React.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.createElement(Grid, { numberedSectionWidth: numberedSectionWidth, numberedSectionHeight: numberedSectionHeight },
+        React.createElement(Circle, { variant: variant, circleDiameter: circleDiameter, circleMargin: circleMargin }, number),
+        React.createElement(Title, { variant: variant },
+            title,
+            "\u00A0"),
+        showLine ? React.createElement(Line, { circleDiameter: circleDiameter }) : React.createElement("span", null),
+        React.createElement("div", null, children)));
 }
 
 var Button$2 = {};
@@ -3965,8 +3964,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() {
@@ -8345,7 +8343,7 @@ const styles$1 = {
         },
         secondary: {
             button: `
-        border: 3px solid #1a4dff;
+        box-shadow: 0px 0px 0px 3px #1a4dff inset;
         color: #1a4dff;
         background-color: #ffffff;
 
@@ -8375,25 +8373,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) {
@@ -8449,8 +8436,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;
@@ -8642,12 +8628,12 @@ const styles = {
     variant: {
         danger: {
             container: `
-        background-color: #FEE8E6;
+        background-color: #EAC2C1;
       `,
         },
         success: {
             container: `
-        background-color: #E5F9E6;
+        background-color: #C4D8CF;
       `,
         },
     },