@thecb/components 5.6.0 → 5.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.6.0",
+  "version": "5.6.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/index.js

@@ -5,7 +5,7 @@ export { default as BoxWithShadow } from "./box-with-shadow";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";
 export { default as ButtonWithLink } from "./button-with-link";
-export { default as cardRegistry } from "./card";
+export { default as cardRegistry } from "./welcome-card";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
 export { default as CountryDropdown } from "./country-dropdown";

package/src/components/atoms/layouts/Sidebar.js

@@ -29,7 +29,7 @@ const Sidebar = ({
     <SidebarInnerWrapper
       childGap={childGap}
       width={width}
-      sidebarOnRight={sidebarOnRight}
+      $sidebarOnRight={sidebarOnRight}
       contentMinWidth={contentMinWidth}
       fullHeight={fullHeight}
       minHeight={minHeight}

package/src/components/atoms/layouts/Sidebar.styled.js

@@ -26,8 +26,8 @@ export const SidebarInnerWrapper = styled(
     ${({ minHeight }) => (minHeight ? `margin-top: 0; margin-bottom: 0;` : ``)}
   }
 
-  ${({ sidebarOnRight, contentMinWidth, childGap }) =>
-    sidebarOnRight
+  ${({ $sidebarOnRight, contentMinWidth, childGap }) =>
+    $sidebarOnRight
       ? `> :first-child {
       flex-basis: 0;
       flex-grow: 999;

package/src/components/atoms/processing-fee/ProcessingFee.js

@@ -4,7 +4,7 @@ import { fallbackValues } from "./ProcessingFee.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import Box from "../layouts/Box";
 import Alert from "../alert";
-import { displayCurrency } from "../../../util/general";
+import { displayCurrency, formatPercent } from "../../../util/general";
 const ProcessingFee = ({
   feeValue = 0,
   feeName = "",
@@ -23,7 +23,7 @@ const ProcessingFee = ({
       text={`There is a processing fee of ${
         feeType === "FLAT"
           ? `${displayCurrency(feeValue)}`
-          : `${feeValue * 100}%`
+          : `${formatPercent(feeValue * 100)}%`
       } ${ifElse(
         isNil,
         always(""),

package/src/components/atoms/{card → welcome-card}/Card.js

@@ -105,7 +105,10 @@ const Card = ({
                 </Box>
               </Cover>
             </Box>
-            <Box padding="0.5rem 1rem 1rem">
+            <Box
+              padding="0.5rem 1rem 1rem"
+              extraStyles={`display: flex; justify-content: center;`}
+            >
               <ButtonWithAction
                 variant="smallPrimary"
                 text={buttonText}

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -50,6 +50,7 @@ const WorkflowTile = ({
           minWidth={"100%"}
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}
+          linkExtraStyles={`justify-content: center;`}
         />
       </Box>
     </Stack>

package/src/util/general.js

@@ -10,6 +10,8 @@ export const displayCurrency = cents =>
 
 export const convertCentsToMoneyInt = n => (n / 100).toFixed(0);
 
+export const formatPercent = decimal => Number.parseFloat(decimal).toFixed(2);
+
 const createUniqueId = () =>
   "_" +
   Math.random()