@thecb/components 7.1.2-beta.1 → 7.1.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.1.2-beta.1",
+  "version": "7.1.3-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/PaymentMethodAddIcon.js

@@ -12,9 +12,9 @@ const PaymentMethodAddIcon = ({ themeValues }) => {
       viewBox="0 0 100 100"
     >
       <defs>
-        <path id="path-1" d="M0 0H103V100H0z"></path>
+        <path id="path-1-payment-method-add" d="M0 0H103V100H0z"></path>
         <path
-          id="path-3"
+          id="path-3-payment-method-add"
           d="M16.624999 11.3749994L11.3749994 11.3749994 11.3749994 16.624999 9.62499952 16.624999 9.62499952 11.3749994 4.37499993 11.3749994 4.37499993 9.62499952 9.62499952 9.62499952 9.62499952 4.37499993 11.3749994 4.37499993 11.3749994 9.62499952 16.624999 9.62499952z"
         ></path>
       </defs>
@@ -26,10 +26,10 @@ const PaymentMethodAddIcon = ({ themeValues }) => {
         transform="translate(-1)"
       >
         <g>
-          <mask id="mask-2" fill={themeValues.primaryColor}>
-            <use xlinkHref="#path-1"></use>
+          <mask id="mask-2-payment-method-add" fill={themeValues.primaryColor}>
+            <use xlinkHref="#path-1-payment-method-add"></use>
           </mask>
-          <g mask="url(#mask-2)">
+          <g mask="url(#mask-2-payment-method-add)">
             <g transform="translate(11.33 11)">
               <path
                 fill={themeValues.primaryColor}
@@ -52,11 +52,14 @@ const PaymentMethodAddIcon = ({ themeValues }) => {
             fill={themeValues.subIconColor}
           ></circle>
           <g transform="translate(2.8 2.8)">
-            <mask id="mask-4" fill="#fff">
-              <use xlinkHref="#path-3"></use>
+            <mask id="mask-4-payment-method-add" fill="#fff">
+              <use xlinkHref="#path-3-payment-method-add"></use>
             </mask>
-            <use fill="#000" xlinkHref="#path-3"></use>
-            <g fill={themeValues.primaryColor} mask="url(#mask-4)">
+            <use fill="#000" xlinkHref="#path-3-payment-method-add"></use>
+            <g
+              fill={themeValues.primaryColor}
+              mask="url(#mask-4-payment-method-add)"
+            >
               <g>
                 <path d="M0 0H21V21H0z"></path>
               </g>

package/src/components/atoms/link/ExternalLink.d.ts

@@ -15,4 +15,5 @@ export interface ExternalLinkProps {
 }
 
 export const ExternalLink: React.FC<Expand<ExternalLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement> &
+  React.Ref<HTMLLinkElement>>;

package/src/components/atoms/link/ExternalLink.js

@@ -6,19 +6,22 @@ import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
 
-const ExternalLink = ({
-  href = "",
-  newTab = false,
-  size = "1rem",
-  lineHeight = "1.5rem",
-  weight = FONT_WEIGHT_REGULAR,
-  extraStyles = ``,
-  variant = "primary",
-  tabIndex = "0",
-  dataQa,
-  ariaLabel,
-  children
-}) => {
+const ExternalLink = (
+  {
+    href = "",
+    newTab = false,
+    size = "1rem",
+    lineHeight = "1.5rem",
+    weight = FONT_WEIGHT_REGULAR,
+    extraStyles = ``,
+    variant = "primary",
+    tabIndex = "0",
+    dataQa,
+    ariaLabel,
+    children
+  },
+  ref
+) => {
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
     themeContext,
@@ -43,6 +46,7 @@ const ExternalLink = ({
       rel={newTab ? "noopener" : ""}
       data-qa={dataQa}
       aria-label={ariaLabel}
+      ref={ref}
     >
       {safeChildren(children, <span />)}
     </StyledExternalLink>

package/src/components/atoms/link/InternalLink.d.ts

@@ -16,4 +16,5 @@ export interface InternalLinkProps {
 }
 
 export const InternalLink: React.FC<Expand<InternalLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement> &
+  React.Ref<HTMLLinkElement>>;

package/src/components/atoms/link/InternalLink.js

@@ -5,20 +5,23 @@ import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
 
-const InternalLink = ({
-  to = "",
-  color,
-  children,
-  active,
-  fontSize,
-  lineheight,
-  fontWeight,
-  variant = "primary",
-  margin,
-  tabIndex = "0",
-  dataQa,
-  extraStyles = ``
-}) => {
+const InternalLink = (
+  {
+    to = "",
+    color,
+    children,
+    active,
+    fontSize,
+    lineheight,
+    fontWeight,
+    variant = "primary",
+    margin,
+    tabIndex = "0",
+    dataQa,
+    extraStyles = ``
+  },
+  ref
+) => {
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
     themeContext,
@@ -42,6 +45,7 @@ const InternalLink = ({
       tabIndex={tabIndex}
       extrastyles={extraStyles}
       data-qa={dataQa}
+      ref={ref}
     >
       {safeChildren(children, <span />)}
     </StyledInternalLink>

package/src/components/atoms/placeholder/Placeholder.js

@@ -10,9 +10,27 @@ import {
   GRECIAN_GREY,
   CHARADE_GREY
 } from "../../../constants/colors";
-import { AccountsAddIcon, PropertiesAddIcon, IconAdd } from "../icons";
+import {
+  AccountsAddIcon,
+  PropertiesAddIcon,
+  IconAdd,
+  PaymentMethodAddIcon
+} from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
+const getLargeIcon = iconName => {
+  switch (iconName) {
+    case "accounts":
+      return <AccountsAddIcon />;
+    case "properties":
+      return <PropertiesAddIcon />;
+    case "payments":
+      return <PaymentMethodAddIcon />;
+    default:
+      return <AccountsAddIcon />;
+  }
+};
+
 const PlaceholderContentWrapper = ({
   isLink,
   action,
@@ -109,11 +127,7 @@ const Placeholder = ({
               >
                 {variant === "large" ? (
                   <Center intrinsic>
-                    {largeIcon === "accounts" ? (
-                      <AccountsAddIcon />
-                    ) : (
-                      <PropertiesAddIcon />
-                    )}
+                    {getLargeIcon(largeIcon)}
                     <Text
                       variant="pS"
                       color={themeValues.color}

package/dist/.storybook/page.d.ts

@@ -1,13 +0,0 @@
-declare function _default({ title, Component, height, reducer, containerMax, containerMin }: {
-    title: any;
-    Component: any;
-    height: any;
-    reducer?: (() => void) | undefined;
-    containerMax?: string | undefined;
-    containerMin?: string | undefined;
-}): {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};
-export default _default;

package/dist/.storybook/page.js

@@ -1,41 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "styled-components";
-import { select, radios, text } from "@storybook/addon-knobs";
-import { Provider } from 'react-redux';
-import { createStore } from "redux";
-import { BrowserRouter as Router } from "react-router-dom";
-import { createBrowserHistory } from "history";
-import ResizingContainer from "../src/components/atoms/layouts/examples/ResizingContainer";
-import { SFTheme, APCTheme } from "./themes";
-var themesLabel = "Theme";
-var themes = {
-    SF: SFTheme,
-    APC: APCTheme,
-    None: {},
-};
-var defaultValue = SFTheme;
-var groupId = "Theme";
-var animateLabel = "Animate";
-var animateOptions = {
-    play: "play",
-    pause: "pause"
-};
-var animateDefaultValue = "pause";
-var animateGroupID = "Container";
-var themeDecorator = function (storyFn) { return (React.createElement(ThemeProvider, { theme: select(themesLabel, themes, defaultValue, groupId) }, storyFn())); };
-export default (function (_a) {
-    var title = _a.title, Component = _a.Component, height = _a.height, _b = _a.reducer, reducer = _b === void 0 ? function () { } : _b, _c = _a.containerMax, containerMax = _c === void 0 ? "40rem" : _c, _d = _a.containerMin, containerMin = _d === void 0 ? "20rem" : _d;
-    var history = createBrowserHistory();
-    var store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
-    return {
-        title: title,
-        component: Component,
-        decorators: [
-            themeDecorator,
-            function (storyFn) { return (React.createElement(Router, { history: history },
-                React.createElement(Provider, { store: store },
-                    React.createElement("div", { style: { height: "max-content", display: "flex", justifyContent: "center", flexDirection: "column" } },
-                        React.createElement(ResizingContainer, { height: height, animate: radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID), containerMax: text("Container Max", containerMax, animateGroupID), containerMin: text("Container Min", containerMin, animateGroupID) }, storyFn()))))); }
-        ]
-    };
-});

package/dist/.storybook/themes/apc.theme.d.ts

@@ -1,79 +0,0 @@
-export namespace APCTheme {
-    namespace values {
-        namespace Button {
-            namespace active {
-                const primary: string;
-                const secondary: string;
-                const smallPrimary: string;
-                const smallSecondary: string;
-            }
-            namespace backgroundColor {
-                const primary_1: string;
-                export { primary_1 as primary };
-                const secondary_1: string;
-                export { secondary_1 as secondary };
-                const smallPrimary_1: string;
-                export { smallPrimary_1 as smallPrimary };
-                const smallSecondary_1: string;
-                export { smallSecondary_1 as smallSecondary };
-            }
-            namespace border {
-                const primary_2: string;
-                export { primary_2 as primary };
-                const secondary_2: string;
-                export { secondary_2 as secondary };
-                const smallPrimary_2: string;
-                export { smallPrimary_2 as smallPrimary };
-                const smallSecondary_2: string;
-                export { smallSecondary_2 as smallSecondary };
-            }
-            namespace color {
-                const primary_3: string;
-                export { primary_3 as primary };
-                const secondary_3: string;
-                export { secondary_3 as secondary };
-                const smallPrimary_3: string;
-                export { smallPrimary_3 as smallPrimary };
-                const smallSecondary_3: string;
-                export { smallSecondary_3 as smallSecondary };
-            }
-            namespace focus {
-                const primary_4: string;
-                export { primary_4 as primary };
-                const secondary_4: string;
-                export { secondary_4 as secondary };
-                const smallPrimary_4: string;
-                export { smallPrimary_4 as smallPrimary };
-                const smallSecondary_4: string;
-                export { smallSecondary_4 as smallSecondary };
-            }
-            namespace hover {
-                const primary_5: string;
-                export { primary_5 as primary };
-                const secondary_5: string;
-                export { secondary_5 as secondary };
-                const smallPrimary_5: string;
-                export { smallPrimary_5 as smallPrimary };
-                const smallSecondary_5: string;
-                export { smallSecondary_5 as smallSecondary };
-            }
-        }
-        namespace Footer {
-            const backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
-        }
-        namespace Header {
-            const backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-        }
-        namespace HighlightTabRow {
-            const backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
-        }
-        const linkColor: string;
-        const logo: string;
-        const primaryColor: string;
-        const secondaryColor: string;
-        const textColor: string;
-    }
-}

package/dist/.storybook/themes/apc.theme.js

@@ -1 +0,0 @@
-export var APCTheme = { values: { "Button": { "active": { "primary": "background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100;", "secondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000", "smallPrimary": "background-color: #C8171E; border: 2px solid #C8171E;  box-shadow: 0 0 10px #E30100", "smallSecondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000" }, "backgroundColor": { "primary": "#EC1C24", "secondary": "#F6F6F9", "smallPrimary": "#EC1C24", "smallSecondary": "#F6F6F9" }, "border": { "primary": "2px solid #EC1C24;", "secondary": "2px solid #EC1C24;", "smallPrimary": "2px solid %#EC1C24;", "smallSecondary": "2px solid #EC1C24;" }, "color": { "primary": "#F6F6F9", "secondary": "#EC1C24", "smallPrimary": "#F6F6F9", "smallSecondary": "#EC1C24" }, "focus": { "primary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "secondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;", "smallPrimary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "smallSecondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;" }, "hover": { "primary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "secondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;", "smallPrimary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "smallSecondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;" } }, "Footer": { "backgroundColor": "#56575B" }, "Header": { "backgroundColor": "#FFFFFF" }, "HighlightTabRow": { "backgroundColor": "#215B9E" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/.storybook/themes/index.d.ts

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/index.js

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/sf.theme.d.ts

@@ -1,231 +0,0 @@
-export namespace SFTheme {
-    namespace values {
-        export namespace AmountCallout {
-            const color: string;
-        }
-        export namespace Breadcrumb {
-            const color_1: string;
-            export { color_1 as color };
-        }
-        export namespace Button {
-            export namespace active {
-                const danger: string;
-                const ghost: string;
-                const primary: string;
-                const secondary: string;
-                const smallGhost: string;
-                const smallPrimary: string;
-                const smallSecondary: string;
-            }
-            export namespace backgroundColor {
-                const danger_1: string;
-                export { danger_1 as danger };
-                const ghost_1: string;
-                export { ghost_1 as ghost };
-                const primary_1: string;
-                export { primary_1 as primary };
-                const secondary_1: string;
-                export { secondary_1 as secondary };
-                const smallGhost_1: string;
-                export { smallGhost_1 as smallGhost };
-                const smallPrimary_1: string;
-                export { smallPrimary_1 as smallPrimary };
-                const smallSecondary_1: string;
-                export { smallSecondary_1 as smallSecondary };
-            }
-            export namespace border {
-                const danger_2: string;
-                export { danger_2 as danger };
-                const ghost_2: string;
-                export { ghost_2 as ghost };
-                const primary_2: string;
-                export { primary_2 as primary };
-                const secondary_2: string;
-                export { secondary_2 as secondary };
-                const smallGhost_2: string;
-                export { smallGhost_2 as smallGhost };
-                const smallPrimary_2: string;
-                export { smallPrimary_2 as smallPrimary };
-                const smallSecondary_2: string;
-                export { smallSecondary_2 as smallSecondary };
-            }
-            export namespace color_2 {
-                const danger_3: string;
-                export { danger_3 as danger };
-                const ghost_3: string;
-                export { ghost_3 as ghost };
-                const primary_3: string;
-                export { primary_3 as primary };
-                const secondary_3: string;
-                export { secondary_3 as secondary };
-                const smallGhost_3: string;
-                export { smallGhost_3 as smallGhost };
-                const smallPrimary_3: string;
-                export { smallPrimary_3 as smallPrimary };
-                const smallSecondary_3: string;
-                export { smallSecondary_3 as smallSecondary };
-            }
-            export { color_2 as color };
-            export namespace disabled {
-                const danger_4: string;
-                export { danger_4 as danger };
-                const ghost_4: string;
-                export { ghost_4 as ghost };
-                const primary_4: string;
-                export { primary_4 as primary };
-                const secondary_4: string;
-                export { secondary_4 as secondary };
-                const smallGhost_4: string;
-                export { smallGhost_4 as smallGhost };
-                const smallPrimary_4: string;
-                export { smallPrimary_4 as smallPrimary };
-                const smallSecondary_4: string;
-                export { smallSecondary_4 as smallSecondary };
-            }
-            export namespace focus {
-                const danger_5: string;
-                export { danger_5 as danger };
-                const ghost_5: string;
-                export { ghost_5 as ghost };
-                const primary_5: string;
-                export { primary_5 as primary };
-                const secondary_5: string;
-                export { secondary_5 as secondary };
-                const smallGhost_5: string;
-                export { smallGhost_5 as smallGhost };
-                const smallPrimary_5: string;
-                export { smallPrimary_5 as smallPrimary };
-                const smallSecondary_5: string;
-                export { smallSecondary_5 as smallSecondary };
-            }
-            export namespace hover {
-                const danger_6: string;
-                export { danger_6 as danger };
-                const ghost_6: string;
-                export { ghost_6 as ghost };
-                const primary_6: string;
-                export { primary_6 as primary };
-                const secondary_6: string;
-                export { secondary_6 as secondary };
-                const smallGhost_6: string;
-                export { smallGhost_6 as smallGhost };
-                const smallPrimary_6: string;
-                export { smallPrimary_6 as smallPrimary };
-                const smallSecondary_6: string;
-                export { smallSecondary_6 as smallSecondary };
-            }
-        }
-        export namespace Checkbox {
-            namespace boxShadow {
-                const _default: string;
-                export { _default as default };
-            }
-            namespace checkedStyles {
-                const _default_1: string;
-                export { _default_1 as default };
-            }
-        }
-        export namespace Dropdown {
-            const hoverColor: string;
-            const selectedColor: string;
-        }
-        export namespace Footer {
-            const backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
-            export const logoHeight: string;
-            export const subfooterColor: string;
-        }
-        export namespace FormInput {
-            namespace hoverFocusStyles {
-                const _default_2: string;
-                export { _default_2 as default };
-            }
-            namespace linkColor {
-                const _default_3: string;
-                export { _default_3 as default };
-            }
-        }
-        export namespace Global {
-            const baseFontSize: string;
-            const baseMobileFontSize: string;
-            const pageBackground: string;
-        }
-        export namespace Header {
-            const backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-        }
-        export namespace Icons {
-            namespace accentColor {
-                const error: string;
-                const info: string;
-                const success: string;
-            }
-            namespace primaryColor {
-                const error_1: string;
-                export { error_1 as error };
-                const info_1: string;
-                export { info_1 as info };
-                const success_1: string;
-                export { success_1 as success };
-            }
-            namespace singleIconColor {
-                export const darkMode: string;
-                const primary_7: string;
-                export { primary_7 as primary };
-                const secondary_7: string;
-                export { secondary_7 as secondary };
-            }
-            namespace subIconColor {
-                const error_2: string;
-                export { error_2 as error };
-                const info_2: string;
-                export { info_2 as info };
-                const success_2: string;
-                export { success_2 as success };
-            }
-        }
-        export namespace ModalLink {
-            const linkColor_1: string;
-            export { linkColor_1 as linkColor };
-        }
-        export namespace NavMenu {
-            const backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
-        }
-        export namespace ProfileTab {
-            const activeTabAccent: string;
-            const activeTabBackground: string;
-            const activeTabHover: string;
-        }
-        export namespace RadioButton {
-            const activeColor: string;
-        }
-        export namespace Spinner {
-            const color_3: string;
-            export { color_3 as color };
-        }
-        export namespace ToggleSwitch {
-            const onBackground: string;
-        }
-        export namespace Workflow {
-            const accentColor_1: string;
-            export { accentColor_1 as accentColor };
-            export const fontFamily: string;
-            const linkColor_2: string;
-            export { linkColor_2 as linkColor };
-            export const primaryButtonColor: string;
-            export const secondaryButtonColor: string;
-            export const textColor: string;
-            export const workflowFooterColor: string;
-            export const workflowHeaderColor: string;
-        }
-        const linkColor_3: string;
-        export { linkColor_3 as linkColor };
-        export const logo: string;
-        const primaryColor_1: string;
-        export { primaryColor_1 as primaryColor };
-        export const secondaryColor: string;
-        const textColor_1: string;
-        export { textColor_1 as textColor };
-    }
-}

package/dist/.storybook/themes/sf.theme.js

@@ -1 +0,0 @@
-export var SFTheme = { values: { "AmountCallout": { "color": "#347BB2" }, "Breadcrumb": { "color": "#347BB2" }, "Button": { "active": { "danger": "background-color: #870000; border: 2px solid #870000; box-shadow: 0 0 10px #ED125F;", "ghost": "background-color: $(transparent)s; color: #001952; box-shadow: none;", "primary": "background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2", "secondary": "background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;", "smallGhost": "background-color: $(transparent)s; color: #001952; box-shadow: none;", "smallPrimary": "background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2;", "smallSecondary": "background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;" }, "backgroundColor": { "danger": "#ED125F", "ghost": "transparent", "primary": "#347BB2", "secondary": "transparent", "smallGhost": "transparent", "smallPrimary": "#347BB2", "smallSecondary": "transparent" }, "border": { "danger": "2px solid #ED125F;", "ghost": "none", "primary": "2px solid #347BB2;", "secondary": "2px solid #347BB2;", "smallGhost": "none", "smallPrimary": "2px solid #347BB2;", "smallSecondary": "2px solid #347BB2;" }, "color": { "danger": "#FFFFFF", "ghost": "#347BB2", "primary": "#FFFFFF", "secondary": "#347BB2", "smallGhost": "#347BB2", "smallPrimary": "#FFFFFF", "smallSecondary": "#347BB2" }, "disabled": { "danger": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "ghost": "color: #6E727E; border: none", "primary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "secondary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "smallGhost": "color: #6E727E; border: none;", "smallPrimary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "smallSecondary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }" }, "focus": { "danger": "outline: none; background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F", "ghost": "outline: none; box-shadow: none; color: #024C85;", "primary": "outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "secondary": "outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;", "smallGhost": "outline: none; box-shadow: none; color: #024C85;", "smallPrimary": "outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "smallSecondary": "outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;" }, "hover": { "danger": "background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F;", "ghost": "cursor: pointer; color: #024C85;", "primary": "cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "secondary": "cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;", "smallGhost": "cursor: pointer; color: #024C85;", "smallPrimary": "cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "smallSecondary": "cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;" } }, "Checkbox": { "boxShadow": { "default": "0 0 0 3px #D8E5F2;" }, "checkedStyles": { "default": "background: #347BB2; border: 1px solid #347BB2;" } }, "Dropdown": { "hoverColor": "#EFFAFF", "selectedColor": "#347BB2" }, "Footer": { "backgroundColor": "#182848", "logoHeight": "52px", "subfooterColor": "#347BB2" }, "FormInput": { "hoverFocusStyles": { "default": "outline: none; text-decoration: underline; color: #024C85;" }, "linkColor": { "default": "#347BB2" } }, "Global": { "baseFontSize": "16px", "baseMobileFontSize": "14px", "pageBackground": "#F6F6F9" }, "Header": { "backgroundColor": "#347BB2" }, "Icons": { "accentColor": { "error": "#3B414D", "info": "#3B414D", "success": "#3B414D" }, "primaryColor": { "error": "#FFFFFF", "info": "#FFFFFF", "success": "#FFFFFF" }, "singleIconColor": { "darkMode": "#FFFFFF", "primary": "#347BB2", "secondary": "#3B414D" }, "subIconColor": { "error": "#ED125F", "info": "#347BB2", "success": "#317D4F" } }, "ModalLink": { "linkColor": "#347BB2" }, "NavMenu": { "backgroundColor": "#347BB2" }, "ProfileTab": { "activeTabAccent": "#347BB2", "activeTabBackground": "#FFFFFF", "activeTabHover": "#D8E5F2" }, "RadioButton": { "activeColor": "#347BB2" }, "Spinner": { "color": "#347BB2" }, "ToggleSwitch": { "onBackground": "#347BB2" }, "Workflow": { "accentColor": "#214566", "fontFamily": "Open Sans, sans-serif", "linkColor": "#214566", "primaryButtonColor": "#347BB2", "secondaryButtonColor": "#347BB2", "textColor": "#091325", "workflowFooterColor": "#182848", "workflowHeaderColor": "#347BB2" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/button-with-link/ButtonWithLinkProps.js

@@ -1 +0,0 @@
-;

package/dist/src/components/atoms/add-obligation/AddObligation.d.ts

@@ -1,5 +0,0 @@
-declare const _default: ({ variant, ...props }: {
-    [x: string]: any;
-    variant?: any;
-}) => any;
-export default _default;

package/dist/src/components/atoms/add-obligation/AddObligation.js

@@ -1,21 +0,0 @@
-import React from "react";
-import ButtonWithAction from "../button-with-action";
-import { Box, Center, Cluster, Cover } from "../layouts";
-import { IconAdd } from "../icons";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { fallbackValues } from "./AddObligation.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { ROYAL_BLUE } from "../../../constants/colors";
-var AddObligation = function (_a) {
-    var text = _a.text, action = _a.action, themeValues = _a.themeValues, extraStyles = _a.extraStyles, textExtraStyles = _a.textExtraStyles;
-    var hoverStyles = "\n  &:hover {\n    .fill { fill: ".concat(themeValues.hoverColor, "; }\n    .stroke { stroke: ").concat(themeValues.hoverColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.hoverColor, "; }\n    span { color: ").concat(themeValues.hoverColor, "; }\n  }");
-    var activeStyles = "\n   &:active {\n     .fill { fill: ".concat(themeValues.activeColor, "; }\n     .stroke { stroke: ").concat(themeValues.activeColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.activeColor, "; }\n    span { color: ").concat(themeValues.activeColor, "; }\n    }");
-    var defaultStyles = "\n      min-height: 0;\n      .fill { fill: ".concat(themeValues.color, "; }\n      .stroke { stroke: ").concat(themeValues.color, "; }\n      &:focus {\n        outline: 3px solid ").concat(ROYAL_BLUE, ";\n        outline-offset: 2px;\n      }\n     ");
-    return (React.createElement(Box, { className: "button", padding: "0", hoverStyles: hoverStyles, activeStyles: activeStyles, extraStyles: defaultStyles, onClick: action, tabIndex: "0" },
-        React.createElement(Cover, { singleChild: true, minHeight: "100%" },
-            React.createElement(Cluster, { justify: "center", align: "center", minHeight: "100%" },
-                React.createElement(IconAdd, null),
-                React.createElement(Center, { intrinsic: true },
-                    React.createElement(ButtonWithAction, { action: action, text: text, variant: "smallGhost", extraStyles: "min-height: 0; ".concat(extraStyles), textExtraStyles: "padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ".concat(FONT_WEIGHT_SEMIBOLD, "; ").concat(textExtraStyles), tabIndex: "-1" }))))));
-};
-export default themeComponent(AddObligation, "AddObligation", fallbackValues);

package/dist/src/components/atoms/add-obligation/AddObligation.stories.d.ts

@@ -1,7 +0,0 @@
-export function addObligation(): JSX.Element;
-export default story;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};