@thecb/components 10.2.0 → 10.2.1-beta.0

package/package.json

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

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

@@ -34,14 +34,15 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 extraStyles={`
                           text-transform: uppercase;
                           ${isActive.toString() === "true" &&
-                            `pointer-events: none;
-                             color: ${themeValues.activeBreadcrumbColor};
+                            `color: ${themeValues.activeBreadcrumbColor};
+                             pointer-events: none;
+                             text-decoration: none;
                             `}
                           &:first-child {
                             margin-left: 0;
                           }
                           &:active {
-                            color: ${themeValues.activeColor}; 
+                            color: ${themeValues.activeColor};
                           }`}
               >
                 {linkText}

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

@@ -1,5 +1,8 @@
 // import theme from "styled-theming";
-import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { MATISSE_BLUE, STORM_GREY } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
 
 /*
   For now I'm using string values, eventually shared components library will have its own constants file
@@ -13,7 +16,7 @@ const fontSize = "0.875rem";
 const lineHeight = "1.25rem";
 const fontWeight = "400";
 const margin = "0.5rem";
-const hover = `text-decoration: none;`;
+const hover = `text-decoration: ${LINK_TEXT_DECORATION};`;
 
 export const fallbackValues = {
   color,

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

@@ -57,7 +57,7 @@ const Spinner = ({ color, isMobile }) => (
 
   Note: the children prop is only used if contentOverride is set to true, in which case
   the text prop is ignored.
-  
+
 */
 
 const ButtonWithAction = forwardRef(
@@ -95,9 +95,6 @@ const ButtonWithAction = forwardRef(
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
     color: ${themeValues.hoverColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
     cursor: pointer;
   `;
     const activeStyles = `
@@ -105,9 +102,6 @@ const ButtonWithAction = forwardRef(
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
     color: ${themeValues.activeColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
   `;
     const disabledStyles = `
     background-color: #6D717E;
@@ -154,6 +148,7 @@ const ButtonWithAction = forwardRef(
                 weight={themeValues.fontWeight}
                 variant={themeValues.fontSizeVariant}
                 color={themeValues.color}
+                textDecoration={themeValues.textDecoration}
                 textWrap={textWrap}
                 extraStyles={textExtraStyles}
               >

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

@@ -1,4 +1,6 @@
-import {
+import { colors, styleConstants } from "../../../constants";
+
+const {
   WHITE,
   TRANSPARENT,
   SAPPHIRE_BLUE,
@@ -6,7 +8,9 @@ import {
   MATISSE_BLUE,
   RASPBERRY,
   ERROR_COLOR
-} from "../../../constants/colors";
+} = colors;
+
+const { LINK_TEXT_DECORATION } = styleConstants;
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -98,6 +102,21 @@ const minWidth = {
   whitePrimary: "130px"
 };
 
+const textDecoration = {
+  primary: "none",
+  secondary: "none",
+  back: "none",
+  smallPrimary: "none",
+  smallSecondary: "none",
+  smallGhost: LINK_TEXT_DECORATION,
+  ghost: LINK_TEXT_DECORATION,
+  tertiary: "none",
+  danger: "none",
+  dangerSecondary: "none",
+  whiteSecondary: "none",
+  whitePrimary: "none"
+};
+
 const backgroundColor = {
   primary: MATISSE_BLUE,
   secondary: TRANSPARENT,
@@ -225,6 +244,7 @@ export const fallbackValues = {
   fontWeight,
   height,
   minWidth,
+  textDecoration,
   backgroundColor,
   border,
   hoverBackgroundColor,

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -9,8 +9,8 @@ const ButtonWithLink = ({
   url = "/",
   disabled = false,
   fileLink = false,
-  extraStyles,
-  linkExtraStyles,
+  extraStyles = "",
+  linkExtraStyles = "",
   newTab = false,
   dataQa,
   ...otherProps

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

@@ -1,6 +1,10 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { ROYAL_BLUE } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -18,10 +22,10 @@ export const StyledExternalLink = styled(
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: underline;
   }
 
   &:focus {
@@ -30,7 +34,6 @@ export const StyledExternalLink = styled(
   }
 
   &:active {
-    text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
   }
 

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

@@ -1,7 +1,11 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { ROYAL_BLUE } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -24,10 +28,10 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: underline;
   }
 
   &:focus {
@@ -36,7 +40,6 @@ export const StyledInternalLink = styled(
   }
 
   &:active {
-    text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
   }
 

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

@@ -10,6 +10,7 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
+  textDecoration = "none",
   textWrap = true,
   extraStyles = ``,
   hoverStyles,
@@ -26,6 +27,7 @@ const Text = ({
     weight={weight}
     color={color}
     fontFamily={themeValues.fontFamily}
+    textDecoration={textDecoration}
     as={as}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}

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

@@ -8,6 +8,7 @@ export const TextSpan = styled.span`
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
+  text-decoration: ${textDecoration => textDecoration};
   white-space: ${({ $textWrap }) => ($textWrap ? "initial" : "nowrap")};
 
   &:hover {

package/src/components/molecules/pagination/Pagination.js

@@ -94,6 +94,7 @@ export const getPagesPanel = (page, pagesCount) => {
 
 const Pagination = ({
   activeBorderWidth = "3px",
+  ariaLabel,
   arrowColor,
   borderRadius = "3px",
   buttonHeight = "44px",
@@ -107,7 +108,6 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
-  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -115,12 +115,6 @@ const Pagination = ({
   const extraStyles = `
     min-width: ${buttonWidth}; min-height: 100%; padding: 0;
     border-radius: ${borderRadius};
-    &:hover, &:focus {
-      text-decoration: none;
-      > * > span {
-        text-decoration: none;
-      }
-    }
     > * > span {
       color: ${numberColor ?? themeValues.numberColor}
     }

package/src/components/molecules/pagination/Pagination.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { number, text } from "@storybook/addon-knobs";
+import Pagination from "./Pagination";
+import page from "../../../../.storybook/page";
+
+export const pagination = () => (
+  <Pagination
+    activeBorderWidth={text("activeBorderWidth", "3px", "props")}
+    ariaLabel={text("ariaLabel", "Aria Label", "props")}
+    arrowColor={text("arrowColor", "#FFFFFF", "props")}
+    borderRadius={text("borderRadius", "3px", "props")}
+    buttonHeight={text("buttonHeight", "44px", "props")}
+    buttonWidth={text("buttonWidth", "44px", "props")}
+    childGap={text("childGap", "24px", "props")}
+    currentPage={number("currentPage", 2)}
+    fontSize={text("fontSize", "17px", "props")}
+    fontWeight={text("fontWeight", "900", "props")}
+    numberColor={text("numberColor", "#15749D", "props")}
+    pageCount={number("pageCount", 3)}
+    pageNext={() => {}}
+    pagePrevious={() => {}}
+    setCurrentPage={() => {}}
+    // themeValues
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/Pagination",
+  Component: Pagination
+});
+
+export default story;

package/src/components/molecules/pagination/Pagination.theme.js

@@ -1,8 +1,7 @@
 import {
   WHITE,
   MATISSE_BLUE,
-  ALABASTER_WHITE,
-  STORM_GREY
+  ALABASTER_WHITE
 } from "../../../constants/colors";
 
 const arrowColor = WHITE;

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

@@ -36,7 +36,6 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
           to={route}
           key={`${route}-${index}`}
           extraStyles={`&:hover {
-            text-decoration: none; 
             ${
               active
                 ? `> * {

package/src/constants/index.d.ts

@@ -1,3 +1,4 @@
 import * as colors from "./colors";
+import * as styleConstants from "./style_constants";
 
-export { colors };
+export { colors, styleConstants };

package/src/constants/index.js

@@ -1,4 +1,13 @@
-import * as colors from "./colors";
-import * as fontWeights from "./style_constants";
+export * as colors from "./colors";
+export * as general from "./general";
+export * as regexConstants from "./regex_constants";
+export * as styleConstants from "./style_constants";
 
-export { colors, fontWeights };
+/**
+ * This export is named "fontWeights" and referenced as such in much existing code.
+ * Navigate Frontend is one example that uses this particular export. However, new
+ * usage of style constants should reference the `styleConstants` export instead.
+ *
+ * @deprecated
+ */
+export * as fontWeights from "./style_constants";

package/src/constants/style_constants.d.ts

@@ -0,0 +1,11 @@
+type StyleDeclaration = string;
+
+export const HEADER_HEIGHT: StyleDeclaration;
+export const FOOTER_HEIGHT: StyleDeclaration;
+export const SPACER_HEIGHT: StyleDeclaration;
+export const JUMBO_HEIGHT: StyleDeclaration;
+export const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
+export const FONT_WEIGHT_REGULAR: StyleDeclaration;
+export const FONT_WEIGHT_BOLD: StyleDeclaration;
+export const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
+export const LINK_TEXT_DECORATION: StyleDeclaration;

package/src/constants/style_constants.js

@@ -8,6 +8,7 @@ const COMPACT_JUMBO_HEIGHT = "65px";
 const FONT_WEIGHT_REGULAR = "400";
 const FONT_WEIGHT_BOLD = "700";
 const FONT_WEIGHT_SEMIBOLD = "600";
+const LINK_TEXT_DECORATION = "underline solid 1px";
 
 export {
   HEADER_HEIGHT,
@@ -17,5 +18,6 @@ export {
   COMPACT_JUMBO_HEIGHT,
   FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION
 };