@thecb/components 3.0.0 → 3.1.1

package/package.json

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

package/src/components/atoms/breadcrumb/Breadcrumb.js

@@ -24,12 +24,10 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 to={linkDestination}
                 active={isActive.toString()}
                 color={themeValues.color}
-                activeStyles={themeValues.activeColor}
                 fontSize={themeValues.fontSize}
                 lineheight={themeValues.lineHeight}
                 fontWeight={themeValues.fontWeight}
                 margin={themeValues.margin}
-                hoverStyles={themeValues.hover}
                 extraStyles={`
                           text-transform: uppercase;
                           &:first-child {

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -88,12 +88,18 @@ const ButtonWithAction = ({
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
     color: ${themeValues.hoverColor};
+    text-decoration: ${
+      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+    };
   `;
   const activeStyles = `
     outline: none;
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
     color: ${themeValues.activeColor};
+    text-decoration: ${
+      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+    };
   `;
   const disabledStyles = `
     background-clor: #6E727E;
@@ -114,7 +120,6 @@ const ButtonWithAction = ({
       background={themeValues.backgroundColor}
       border={themeValues.border}
       hoverStyles={hoverStyles}
-      focusStyles={hoverStyles}
       activeStyles={activeStyles}
       disabledStyles={disabledStyles}
       as="button"

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

@@ -23,7 +23,6 @@ const Box = ({
   border,
   textAlign,
   hoverStyles,
-  focusStyles,
   activeStyles,
   disabledStyles,
   variant,
@@ -57,7 +56,6 @@ const Box = ({
     borderWidthOverride={borderWidthOverride}
     border={border}
     hoverStyles={hoverStyles}
-    focusStyles={focusStyles}
     activeStyles={activeStyles}
     disabledStyles={disabledStyles}
     variant={variant}

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

@@ -13,7 +13,6 @@ import styled, { css } from "styled-components";
 export const BoxWrapper = styled(
   ({
     activeStyles,
-    focusStyles,
     hoverStyles,
     disabledStyles,
     extraStyles,
@@ -48,7 +47,7 @@ export const BoxWrapper = styled(
   border: ${({ border }) => border};
   text-align: ${({ textAlign }) => textAlign};
 
-  &:hover {
+  &:hover, &:focus {
     ${({ hoverStyles, as }) =>
       css`
         ${hoverStyles}
@@ -63,21 +62,6 @@ export const BoxWrapper = styled(
       `}
   }
 
-  &:focus {
-    ${({ focusStyles, as }) =>
-      css`
-        ${focusStyles}
-        ${as === "button"
-          ? `> * > span {
-          ${focusStyles}
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }`
-          : ``}
-      `}
-  }
-
   &:active {
     ${({ activeStyles, as }) =>
       css`

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

@@ -21,7 +21,8 @@ export const MotionWrapper = styled(motion.div)`
   text-align: ${({ textAlign }) => textAlign};
   margin: ${({ margin }) => margin};
 
-  &:hover {
+  &:hover,
+  &:focus {
     ${({ hoverStyles }) => hoverStyles};
   }
 
@@ -29,10 +30,6 @@ export const MotionWrapper = styled(motion.div)`
     ${({ activeStyles }) => activeStyles};
   }
 
-  &:focus {
-    ${({ focusStyles }) => focusStyles};
-  }
-
   &:disabled {
     ${({ disabledStyles }) => disabledStyles};
   }

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

@@ -4,7 +4,7 @@ import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { CONGRESS_BLUE, SCIENCE_BLUE } from "../../../constants/colors";
+import { CONGRESS_BLUE } from "../../../constants/colors";
 import { safeChildren } from "../../../util/general";
 
 const ExternalLink = ({
@@ -14,7 +14,6 @@ const ExternalLink = ({
   size = "1rem",
   lineHeight = "1.5rem",
   weight = FONT_WEIGHT_REGULAR,
-  hoverColor = SCIENCE_BLUE,
   extraStyles = ``,
   variant = "primary",
   tabIndex = "0",
@@ -36,7 +35,8 @@ const ExternalLink = ({
       size={size}
       lineheight={lineHeight}
       weight={weight}
-      hovercolor={hoverColor}
+      hovercolor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
       fontFamily={themeValues.fontFamily}
       tabIndex={tabIndex}
       extrastyles={extraStyles}

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

@@ -8,7 +8,7 @@ import styled from "styled-components";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, extraStyles, ...props }) => <a {...props} />
+  ({ hoverColor, activeColor, extraStyles, ...props }) => <a {...props} />
 )`
   display: flex;
   font-size: ${({ size }) => size};
@@ -17,8 +17,15 @@ export const StyledExternalLink = styled(
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: ${({ hovercolor }) => hovercolor};
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: underline;
+    color: ${({ activeColor }) => activeColor};
   }
 
   ${({ extrastyles }) => extrastyles}

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

@@ -9,14 +9,12 @@ const InternalLink = ({
   to = "",
   color,
   children,
-  activeStyles,
   active,
   fontSize,
   lineheight,
   fontWeight,
   variant = "primary",
   margin,
-  hoverStyles,
   tabIndex = "0",
   extraStyles = ``
 }) => {
@@ -33,13 +31,13 @@ const InternalLink = ({
       to={to}
       color={color}
       lineheight={lineheight}
-      activeStyles={activeStyles}
       active={active}
       fontWeight={fontWeight}
       fontSize={fontSize}
       fontFamily={themeValues.fontFamily}
       margin={margin}
-      hoverStyles={hoverStyles}
+      hoverColor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
       tabIndex={tabIndex}
       extrastyles={extraStyles}
     >

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

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 /*
@@ -9,30 +9,28 @@ import { Link } from "react-router-dom";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverStyles, activeStyles, active, ...props }) => <Link {...props} />
+  ({ hoverColor, activeColor, active, ...props }) => <Link {...props} />
 )`
   display: flex;
-  color: ${({ color }) => color};
+  color: ${({ color, active, activeColor }) =>
+    active === true ? activeColor : color};
   font-weight: ${({ fontWeight }) => fontWeight};
   line-height: ${({ lineheight }) => lineheight};
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  text-decoration: ${({ active }) => (active === true ? "underline" : "none")};
 
-  &:hover {
-    ${({ hoverStyles }) =>
-      css`
-        ${hoverStyles}
-      `}
+  &:hover,
+  &:focus {
+    color: ${({ hovercolor }) => hovercolor};
+    text-decoration: underline;
   }
 
-  ${({ activeStyles, active }) =>
-    active === "true" &&
-    css`
-      ${activeStyles}
-      cursor: default;
-      pointer-events: none;
-    `}
+  &:active {
+    text-decoration: underline;
+    color: ${({ activeColor }) => activeColor};
+  }
 
   ${({ extrastyles }) => extrastyles}
 `;

package/src/components/atoms/link/Link.theme.js

@@ -3,6 +3,12 @@ const fontFamily = {
   secondary: "Open Sans"
 };
 
+const hoverColor = "#116285";
+
+const activeColor = "#0E506D";
+
 export const fallbackValues = {
-  fontFamily
+  fontFamily,
+  hoverColor,
+  activeColor
 };

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

@@ -6,7 +6,7 @@ import { Box, Switcher, Center, Cluster } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { IconAdd } from "../../../deprecated/icons";
-import { STORM_GREY } from "../../../constants/colors";
+import { STORM_GREY, GRECIAN_GREY } from "../../../constants/colors";
 import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import withWindowSize from "../../withWindowSize";
@@ -72,6 +72,7 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
+      hoverStyles={`background-color: ${GRECIAN_GREY};`}
     >
       <PlaceholderContentWrapper
         isLink={isLink}

package/src/components/atoms/text/Text.js

@@ -12,7 +12,6 @@ const Text = ({
   color = FIREFLY_GREY,
   extraStyles = ``,
   hoverStyles,
-  focusStyles,
   onClick,
   dataQa,
   children,
@@ -25,7 +24,6 @@ const Text = ({
     fontFamily={themeValues.fontFamily}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
-    focusStyles={focusStyles}
     onClick={onClick}
     data-qa={dataQa}
     {...rest}

package/src/components/atoms/text/Text.styled.js

@@ -8,20 +8,14 @@ export const TextSpan = styled.span`
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
 
-  &:hover {
+  &:hover,
+  &:focus {
     ${({ hoverStyles }) =>
       css`
         ${hoverStyles}
       `}
   }
 
-  &:focus {
-    ${({ focusStyles }) =>
-      css`
-        ${focusStyles}
-      `}
-  }
-
   ${({ disabled, disabledStyles }) =>
     disabled &&
     css`

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -159,7 +159,7 @@ const ToggleSwitch = ({
       extraStyles={
         labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
       }
-      focusStyles={`outline: ${themeValues.onBackground} auto 5px`}
+      hoverStyles={`outline: ${themeValues.onBackground} auto 5px`}
     >
       <Center>
         <Cluster justify="stretch" align="center">

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -27,7 +27,6 @@ const AccountAndRoutingModal = ({
         color={themeValues.linkColor}
         weight={themeValues.fontWeight}
         hoverStyles={themeValues.modalLinkHoverFocus}
-        focusStyles={themeValues.modalLinkHoverFocus}
         extraStyles={`cursor: pointer;`}
         tabIndex="0"
         onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -63,7 +63,7 @@ const CollapsibleSection = ({
       padding="0"
       tabIndex="0"
       onKeyDown={handleKeyDown}
-      focusStyles={themeValues.focusStyles}
+      hoverStyles={themeValues.focusStyles}
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >

package/src/components/molecules/radio-section/RadioSection.js

@@ -103,7 +103,7 @@ const RadioSection = ({
               onKeyDown={e => handleKeyDown(section.id, e)}
               onFocus={() => setFocused(section.id)}
               onBlur={() => setFocused(null)}
-              focusStyles={themeValues.focusStyles}
+              hoverStyles={themeValues.focusStyles}
               animate={openSection === section.id ? "open" : "closed"}
               initial={initiallyOpen ? "open" : "closed"}
               key={`item-${section.id}`}

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -34,11 +34,16 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          hoverStyles={
-            active
-              ? `> * {background-color: ${themeValues.activeTabHover};}`
-              : `> * {background-color: rgba(8, 27, 43, 0.05);}`
-          }
+          extraStyles={`&:hover, &:focus { 
+            ${
+              active
+                ? `> * {
+                background-color: ${themeValues.activeTabHover};
+              }`
+                : `> * { 
+                background-color: rgba(8, 27, 43, 0.05);
+              }`
+            }}`}
         >
           <Box
             padding={isMobile ? "6px 4px" : "18px 16px"}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -24,7 +24,6 @@ const TermsAndConditionsModal = ({
         color={themeValues.linkColor}
         weight={themeValues.fontWeight}
         hoverStyles={themeValues.modalLinkHoverFocus}
-        focusStyles={themeValues.modalLinkHoverFocus}
         extraStyles={`cursor: pointer;`}
         tabIndex="0"
         onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/.github/workflows/publish-update.yml

@@ -1,73 +0,0 @@
-name: Publish and Update
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-
-    steps: 
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        ref: master
-
-    - name: Set up Node.js
-      uses: actions/setup-node@v1.2.0
-      with:
-        node-version: '10.x'
-
-    - name: Install dependencies
-      run: yarn install --silent
-
-    - name: Compile build
-      run: yarn build --silent
-
-    - name: Commit changes
-      uses: EndBug/add-and-commit@v2.1.0
-      with:
-        author_name: CB Feeps
-        author_email: feeps@thecitybase.com
-        message: "[auto] Update dist"
-        path: dist
-        pattern: "*.*"
-        force: true
-        ref: deploy
-      env:
-        GITHUB_TOKEN: ${{ secrets.REPO_ACCESS_TOKEN }}
-
-  publish:
-    name: Publish to NPM Registry
-    runs-on: ubuntu-latest
-    needs: build
-    
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        ref: deploy
-   
-    - name: Set up Node.js for NPM
-      if: steps.check.outputs.changed == 'true'
-      uses: actions/setup-node@v1.2.0
-      with:
-        node-version: '10.x'
-        registry-url: 'https://registry.npmjs.org'
-        scope: '@thecb'
-
-    - name: Install dependencies
-      if: steps.check.outputs.changed == 'true'
-      run: yarn install
-      
-    - name: Create build
-      if: steps.check.outputs.changed == 'true'
-      run: yarn build
-    
-    - name: Publish package to NPM
-      if: steps.check.outputs.changed == 'true'
-      run: yarn publish
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}