@thecb/components 2.2.0

package/src/components/templates/center-single/CenterSingle.js

@@ -0,0 +1,61 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover } from "../../atoms/layouts";
+
+const CenterSingle = ({
+  header,
+  footer,
+  subHeader,
+  hideMobileSubHeader = true,
+  maxContentWidth = "36.75rem",
+  fullWidthMobile = true,
+  centeredMobileContent = false,
+  content,
+  themeValues
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
+      <Cover
+        minHeight="100vh"
+        centerOverride={isMobile && !centeredMobileContent}
+      >
+        {header ? header : <Box padding="0" />}
+        <Box
+          padding="0"
+          minWidth="100%"
+          extraStyles={`z-index: 1;`}
+          role="main"
+        >
+          {subHeader && !(isMobile && hideMobileSubHeader) ? (
+            subHeader
+          ) : (
+            <Fragment />
+          )}
+          <Center
+            maxWidth={isMobile && fullWidthMobile ? "100%" : maxContentWidth}
+            intrinsic={!isMobile}
+          >
+            {centeredMobileContent ? (
+              <Cover minHeight="100%" singleChild>
+                {content}
+              </Cover>
+            ) : (
+              <Box padding="0">{content}</Box>
+            )}
+          </Center>
+        </Box>
+        {footer ? footer : <Box padding="0" />}
+      </Cover>
+    </Box>
+  );
+};
+
+export default withWindowResize(
+  themeComponent(CenterSingle, "Global", fallbackValues)
+);

package/src/components/templates/center-single/index.js

@@ -0,0 +1,3 @@
+import CenterSingle from "./CenterSingle";
+
+export default CenterSingle;

package/src/components/templates/center-stack/CenterStack.js

@@ -0,0 +1,49 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover, Stack } from "../../atoms/layouts";
+
+const CenterStack = ({
+  header,
+  footer,
+  subHeader,
+  hideMobileSubHeader = true,
+  contentSpacing = "1rem",
+  maxContentWidth = "36.75rem",
+  fullWidthMobile = true,
+  content,
+  themeValues
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
+      <Cover minHeight="100vh">
+        {header ? header : <Box padding="0" />}
+        <Box padding="0" minWidth="100%" role="main">
+          {subHeader && !(isMobile && hideMobileSubHeader) ? (
+            subHeader
+          ) : (
+            <Fragment />
+          )}
+          <Center
+            maxWidth={isMobile && fullWidthMobile ? "100%" : maxContentWidth}
+            intrinsic={!isMobile}
+          >
+            <Cover minHeight="100%" singleChild>
+              <Stack childGap={contentSpacing}>{content}</Stack>
+            </Cover>
+          </Center>
+        </Box>
+        {footer ? footer : <Box padding="0" />}
+      </Cover>
+    </Box>
+  );
+};
+
+export default withWindowResize(
+  themeComponent(CenterStack, "Global", fallbackValues)
+);

package/src/components/templates/center-stack/index.js

@@ -0,0 +1,3 @@
+import CenterStack from "./CenterStack";
+
+export default CenterStack;

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

@@ -0,0 +1,49 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover } from "../../atoms/layouts";
+
+const CenterSingle = ({
+  header,
+  footer,
+  subHeader,
+  hideMobileSubHeader = false,
+  content,
+  themeValues,
+  maxWidth = "75rem",
+  gutters = "2rem"
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
+      <Cover minHeight="100vh" childGap="0" fillCenter>
+        {header ? header : <Box padding="0" />}
+        <Box
+          padding="0"
+          minWidth="100%"
+          minHeight="100%"
+          extraStyles={`z-index: 1;`}
+          role="main"
+        >
+          {subHeader && !(isMobile && hideMobileSubHeader) ? (
+            subHeader
+          ) : (
+            <Fragment />
+          )}
+          <Center maxWidth={maxWidth} gutters={gutters}>
+            {content}
+          </Center>
+        </Box>
+        {footer ? footer : <Box padding="0" />}
+      </Cover>
+    </Box>
+  );
+};
+
+export default withWindowResize(
+  themeComponent(CenterSingle, "Global", fallbackValues)
+);

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

@@ -0,0 +1,3 @@
+import DefaultPageTemplate from "./DefaultPageTemplate";
+
+export default DefaultPageTemplate;

package/src/components/templates/index.js

@@ -0,0 +1,5 @@
+export { default as CenterSingle } from "./center-single";
+export { default as CenterStack } from "./center-stack";
+export { default as DefaultPageTemplate } from "./default-page-template";
+export { default as SidebarSingleContent } from "./sidebar-single-content";
+export { default as SidebarStackContent } from "./sidebar-stack-content";

package/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -0,0 +1,60 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover, Sidebar } from "../../atoms/layouts";
+
+const SidebarSingleContent = ({
+  header,
+  footer,
+  subHeader,
+  hideMobileSubHeader = true,
+  sidebarWrapperPadding = "0",
+  sidebarWrapperMaxWidth = "auto",
+  sidebarContent,
+  mainContent,
+  sidebarOnRight = false,
+  sidebarTargetWidth = "10rem",
+  sidebarContentGap = "1rem",
+  mainContentMinWidth = "50%",
+  sidebarVerticalCenter = false,
+  themeValues
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
+      <Cover minHeight="100vh" centerOverride={!sidebarVerticalCenter}>
+        {header ? header : <Box padding="0" />}
+        <Box padding="0" minWidth="100%" role="main">
+          {subHeader && !(isMobile && hideMobileSubHeader) ? (
+            subHeader
+          ) : (
+            <Fragment />
+          )}
+          <Box padding={sidebarWrapperPadding}>
+            <Center maxWidth={sidebarWrapperMaxWidth}>
+              <Sidebar
+                width={sidebarTargetWidth}
+                childGap={sidebarContentGap}
+                onRight={sidebarOnRight}
+                contentMinWidth={mainContentMinWidth}
+              >
+                {sidebarOnRight ? <Fragment /> : sidebarContent}
+                {mainContent}
+                {sidebarOnRight ? sidebarContent : <Fragment />}
+              </Sidebar>
+            </Center>
+          </Box>
+        </Box>
+        {footer ? footer : <Box padding="0" />}
+      </Cover>
+    </Box>
+  );
+};
+
+export default withWindowResize(
+  themeComponent(SidebarSingleContent, "Global", fallbackValues)
+);

package/src/components/templates/sidebar-single-content/index.js

@@ -0,0 +1,3 @@
+import SidebarSingleContent from "./SidebarSingleContent";
+
+export default SidebarSingleContent;

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -0,0 +1,81 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover, Sidebar, Stack } from "../../atoms/layouts";
+
+const SidebarStackContent = ({
+  header,
+  footer,
+  subHeader,
+  hideMobileSubHeader = true,
+  sidebarWrapperPadding = "0",
+  sidebarWrapperMaxWidth = "auto",
+  sidebarContent,
+  mainContent,
+  sidebarOnRight = false,
+  sidebarTargetWidth = "10rem",
+  sidebarContentGap = "1rem",
+  contentStackGap = "1rem",
+  mainContentMinWidth = "50%",
+  sidebarVerticalCenter = false,
+  themeValues
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+
+  return (
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      key="page-bg"
+    >
+      <Cover
+        minHeight="100vh"
+        centerOverride={!sidebarVerticalCenter}
+        key="page-cover"
+      >
+        {header ? header : <Box padding="0" key="header-box" />}
+        <Box padding="0" minWidth="100%" key="content-box" role="main">
+          {subHeader && !(isMobile && hideMobileSubHeader) ? (
+            subHeader
+          ) : (
+            <Fragment />
+          )}
+          <Box padding={sidebarWrapperPadding} key="content-wrapper">
+            <Center maxWidth={sidebarWrapperMaxWidth} key="content-center">
+              <Sidebar
+                width={sidebarTargetWidth}
+                childGap={sidebarContentGap}
+                onRight={sidebarOnRight}
+                contentMinWidth={mainContentMinWidth}
+                key="content-sidebar"
+              >
+                {sidebarOnRight ? (
+                  <Fragment key="sidebar-fragment" />
+                ) : (
+                  sidebarContent
+                )}
+                <Stack key="content-stack" childGap={contentStackGap}>
+                  {mainContent}
+                </Stack>
+                {sidebarOnRight ? (
+                  sidebarContent
+                ) : (
+                  <Fragment key="sidebar-fragment" />
+                )}
+              </Sidebar>
+            </Center>
+          </Box>
+        </Box>
+        {footer ? footer : <Box padding="0" key="footer-box" />}
+      </Cover>
+    </Box>
+  );
+};
+
+export default withWindowResize(
+  themeComponent(SidebarStackContent, "Global", fallbackValues)
+);

package/src/components/templates/sidebar-stack-content/index.js

@@ -0,0 +1,3 @@
+import SidebarStackContent from "./SidebarStackContent";
+
+export default SidebarStackContent;

package/src/components/templates/templates.theme.js

@@ -0,0 +1,5 @@
+const pageBackground = "#F6F6F9";
+
+export const fallbackValues = {
+  pageBackground
+};

package/src/components/withWindowSize.js

@@ -0,0 +1,50 @@
+import React, { useState, useLayoutEffect, useRef } from "react";
+import { ThemeProvider } from "styled-components";
+
+const MOBILE_WIDTH = 768;
+
+const throttle = (delay, fn) => {
+  let lastCall = 0;
+  return (...args) => {
+    const now = new Date().getTime();
+    if (now - lastCall < delay) {
+      return;
+    }
+    lastCall = now;
+    return fn(...args);
+  };
+};
+
+const withWindowSize = Child => ({ ...props }) => {
+  const [state, setState] = useState({
+    isMobile: window.innerWidth < MOBILE_WIDTH,
+    mobileWidth: MOBILE_WIDTH,
+    supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
+  });
+  const isMobileRef = useRef(state.isMobile);
+  const onResize = throttle(25, () => {
+    const width = window.innerWidth;
+    const newMobileState = width <= MOBILE_WIDTH;
+    if (newMobileState !== isMobileRef.current) {
+      isMobileRef.current = newMobileState;
+      setState({
+        isMobile: width <= MOBILE_WIDTH,
+        mobileWidth: MOBILE_WIDTH,
+        supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
+      });
+    }
+  });
+  useLayoutEffect(() => {
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  return (
+    <ThemeProvider theme={state}>
+      <Child {...props} />
+    </ThemeProvider>
+  );
+};
+
+export default withWindowSize;

package/src/constants/colors.js

@@ -0,0 +1,178 @@
+/*
+Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
+
+Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
+to the one generated by name-that-color.
+*/
+
+const TRANSPARENT = "transparent";
+// WHITE
+const WHITE = "#FFFFFF";
+const SOLITUDE_WHITE = "#EBEDF1";
+const SEASHELL_WHITE = "#F1F1F1";
+const ALABASTER_WHITE = "#F7F7F7";
+const AQUA_HAZE_WHITE = "#F7F9FA";
+const BLEACH_WHITE = "#FEF4d7";
+const CATSKILL_WHITE = "#EAF2F6";
+// GREY
+const ATHENS_GREY = "#F6F6F9";
+const ALTO_GREY = "#d1d1d1";
+const SILVER_GREY = "#cdcdcd";
+const PEWTER_GREY = "#DFE1E4";
+const ASH_GREY = "#979797";
+const IRON_GREY = "#d5d8dc";
+const GHOST_GREY = "#CACED8";
+const DUSTY_GREY = "#9B9B9B";
+const REGENT_GREY = "#959EA7";
+const STORM_GREY = "#6E727E";
+const TROUT_GREY = "#515660";
+const MINESHAFT_GREY = "#333333";
+const SOOT_GREY = "#999999";
+const FIREFLY_GREY = "#091325";
+const BRIGHT_GREY = "#3B414D";
+const CHARADE_GREY = "#292A33";
+const GRECIAN_GREY = "#E5E7EC";
+const BLACK_SQUEEZE = "#EAF2F7";
+const GREY_CHATEAU = "#959CA8";
+// BLUE
+const CLOUDBURST_BLUE = "#26395c";
+const ZODIAC_BLUE = "#14284b";
+const CONGRESS_BLUE = "#005095";
+const SCIENCE_BLUE = "#0074D9";
+const MARINER_BLUE = "#2E75D2";
+const CURIOUS_BLUE = "#27A9E1";
+const SELAGO_BLUE = "#F2F8FD";
+const ONAHAU_BLUE = "#D1ECFF";
+const PICKLED_BLUE = "#2C3E50";
+const CERULEAN_BLUE = "#0D8DC4";
+const FOAM_BLUE = "#EFF4FD";
+const CELLO_BLUE = "#214566";
+const BOSTON_BLUE = "#357fb8";
+const INFO_BLUE = "#E4F4FD";
+const HOVER_LIGHT_BLUE = "#EFFAFF";
+const MATISSE_BLUE = "#15749D";
+// GREEN
+const FOREST_GREEN = "#19b03F";
+const MEADOW_GREEN = "#16C98D";
+const POLAR_GREEN = "#DCF7EE";
+const ICE_GREEN = "#A4F6DF";
+const HAZE_GREEN = "#05A670";
+const EMERALD_GREEN = "#47B872";
+const HINT_GREEN = "#E8FFEF";
+const SEA_GREEN = "#317D4F";
+// YELLOW
+const SELECTIVE_YELLOW = "#F8B700";
+const MUSTARD_YELLOW = "#FFD459";
+// ORANGE
+const CARROT_ORANGE = "#ED9620";
+const ZEST_ORANGE = "#F47820";
+const APRICOT_ORANGE = "#FFE8D8";
+// RED
+const RED = "#FF0000";
+const CRIMSON_RED = "#ED1C24";
+const THUNDERBIRD_RED = "#C3191F";
+const RAZZMATAZZ_RED = "#ED125F";
+const FANTASY_RED = "#FCF4F4";
+const COSMOS_RED = "#FFD0D3";
+const BLUSH_RED = "#FFF0F5";
+
+// Second level color constants
+const ERROR_COLOR = RAZZMATAZZ_RED;
+
+// These colors are sequestered so that the alert component can reference them // by type of alert
+const ALERT_COLORS = {
+  warn: {
+    background: APRICOT_ORANGE,
+    border: ZEST_ORANGE,
+    iconBackground: MUSTARD_YELLOW,
+    iconFill: CARROT_ORANGE
+  },
+  info: {
+    background: INFO_BLUE,
+    border: CURIOUS_BLUE,
+    iconBackground: ONAHAU_BLUE,
+    iconFill: CONGRESS_BLUE
+  },
+  error: {
+    background: BLUSH_RED,
+    border: RAZZMATAZZ_RED,
+    iconBackground: COSMOS_RED,
+    iconFill: THUNDERBIRD_RED
+  },
+  success: {
+    background: HINT_GREEN,
+    border: EMERALD_GREEN,
+    iconBackground: ICE_GREEN,
+    iconFill: HAZE_GREEN
+  },
+  text: ZODIAC_BLUE,
+  link: SCIENCE_BLUE
+};
+
+export {
+  TRANSPARENT,
+  WHITE,
+  SOLITUDE_WHITE,
+  SEASHELL_WHITE,
+  ALABASTER_WHITE,
+  AQUA_HAZE_WHITE,
+  BLEACH_WHITE,
+  CATSKILL_WHITE,
+  ATHENS_GREY,
+  ALTO_GREY,
+  SILVER_GREY,
+  PEWTER_GREY,
+  ASH_GREY,
+  IRON_GREY,
+  GHOST_GREY,
+  DUSTY_GREY,
+  REGENT_GREY,
+  STORM_GREY,
+  TROUT_GREY,
+  MINESHAFT_GREY,
+  FIREFLY_GREY,
+  SOOT_GREY,
+  BRIGHT_GREY,
+  CHARADE_GREY,
+  GRECIAN_GREY,
+  BLACK_SQUEEZE,
+  GREY_CHATEAU,
+  CLOUDBURST_BLUE,
+  INFO_BLUE,
+  ZODIAC_BLUE,
+  CONGRESS_BLUE,
+  SCIENCE_BLUE,
+  MARINER_BLUE,
+  CURIOUS_BLUE,
+  SELAGO_BLUE,
+  ONAHAU_BLUE,
+  PICKLED_BLUE,
+  CERULEAN_BLUE,
+  FOAM_BLUE,
+  CELLO_BLUE,
+  BOSTON_BLUE,
+  HOVER_LIGHT_BLUE,
+  MATISSE_BLUE,
+  FOREST_GREEN,
+  MEADOW_GREEN,
+  POLAR_GREEN,
+  ICE_GREEN,
+  HAZE_GREEN,
+  EMERALD_GREEN,
+  HINT_GREEN,
+  SEA_GREEN,
+  SELECTIVE_YELLOW,
+  MUSTARD_YELLOW,
+  CARROT_ORANGE,
+  ZEST_ORANGE,
+  APRICOT_ORANGE,
+  RED,
+  CRIMSON_RED,
+  THUNDERBIRD_RED,
+  RAZZMATAZZ_RED,
+  FANTASY_RED,
+  COSMOS_RED,
+  BLUSH_RED,
+  ALERT_COLORS,
+  ERROR_COLOR
+};

package/src/constants/regex_constants.js

@@ -0,0 +1 @@
+export const URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;

package/src/constants/style_constants.js

@@ -0,0 +1,21 @@
+/* These are constants used by nav frontend components */
+
+const HEADER_HEIGHT = "104px";
+const FOOTER_HEIGHT = "100px";
+const SPACER_HEIGHT = "65px";
+const JUMBO_HEIGHT = "300px";
+const COMPACT_JUMBO_HEIGHT = "65px";
+const FONT_WEIGHT_REGULAR = "400";
+const FONT_WEIGHT_BOLD = "700";
+const FONT_WEIGHT_SEMIBOLD = "600";
+
+export {
+  HEADER_HEIGHT,
+  FOOTER_HEIGHT,
+  SPACER_HEIGHT,
+  JUMBO_HEIGHT,
+  COMPACT_JUMBO_HEIGHT,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD
+};