@thecb/components 10.2.4-beta.8 → 10.3.0

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

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

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

@@ -53,6 +53,7 @@ const TermsAndConditionsModal = ({
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
+      textDecoration={themeValues.modalLinkTextDecoration}
       extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
       role="button" // This should always be a "button" since it opens a modal
       className="modal-trigger"

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

@@ -1,6 +1,7 @@
 import {
   FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION
 } from "../../../constants/style_constants";
 
 const backgroundColor = { default: "#ffffff", footer: "#ffffff" };
@@ -22,11 +23,17 @@ const standardInteractionStyles = `
       outline-offset: 2px;
     }
 `;
+
 const modalLinkHoverFocus = {
   default: standardInteractionStyles,
   footer: standardInteractionStyles
 };
 
+const modalLinkTextDecoration = {
+  default: LINK_TEXT_DECORATION,
+  footer: "none"
+};
+
 export const fallbackValues = {
   backgroundColor,
   linkColor,
@@ -34,5 +41,6 @@ export const fallbackValues = {
   fontSize,
   lineHeight,
   fontWeight,
-  modalLinkHoverFocus
+  modalLinkHoverFocus,
+  modalLinkTextDecoration
 };

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -15,7 +15,8 @@ const CenterSingle = ({
   themeValues,
   maxWidth = "75rem",
   gutters = "2rem",
-  fillPageVertical = false
+  fillPageVertical = false,
+  background = COOL_GREY_05
 }) => {
   const themeContext = useContext(ThemeContext);
   const { isMobile } = themeContext;
@@ -24,7 +25,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={background}
       extraStyles="flex-grow: 1;"
     >
       <Cover

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
 };