@thecb/components 5.6.10 → 5.7.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.6.10",
+  "version": "5.7.0-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -38,10 +38,6 @@
     "@storybook/addon-storysource": "^5.3.14",
     "@storybook/addon-viewport": "^5.3.14",
     "@storybook/react": "^5.3.14",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.1.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.0",
@@ -85,6 +81,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.4.0"
+    "redux-freeform": "^5.3.0"
   }
 }

package/src/components/atoms/dropdown/Dropdown.js

@@ -92,8 +92,7 @@ const Dropdown = ({
   themeValues,
   maxHeight,
   widthFitOptions = false,
-  disabled,
-  hasTitles = false
+  disabled
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -114,9 +113,6 @@ const Dropdown = ({
   const optionRefs = useRef([...Array(options.length)].map(() => createRef()));
   const dropdownRef = useRef(null);
 
-  const getSelection = () =>
-    value ? options.find(option => option.value === value)?.text : placeholder;
-
   const onKeyDown = e => {
     const { key, keyCode } = e;
     const focus = document.activeElement;
@@ -214,7 +210,6 @@ const Dropdown = ({
       background-color: #f7f7f7;
       pointer-events: none;`
       }
-      title={hasTitles ? getSelection() : null}
     >
       <Box
         as="button"
@@ -258,7 +253,9 @@ const Dropdown = ({
             pointer-events: none;`
               }
             >
-              {getSelection()}
+              {value
+                ? options.find(option => option.value === value)?.text
+                : placeholder}
             </Text>
           )}
           <IconWrapper open={isOpen}>
@@ -290,7 +287,6 @@ const Dropdown = ({
                 disabled={disabledValues.includes(choice.value)}
                 data-qa={choice.text}
                 themeValues={themeValues}
-                title={hasTitles ? choice.text : null}
               >
                 <Text
                   variant="p"

package/src/components/atoms/form-layouts/FormInput.js

@@ -15,7 +15,7 @@ const InputField = styled.input`
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: ${({ $customHeight }) => ($customHeight ? $customHeight : "48px")};
+  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -47,9 +47,9 @@ const InputField = styled.input`
       background-color: #f7f7f7;
     `}
 
-  ${({ $extraStyles }) =>
+  ${({ extraStyles }) =>
     css`
-      ${$extraStyles}
+      ${extraStyles}
     `}
 `;
 
@@ -63,7 +63,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: ${({ $customHeight }) => ($customHeight ? $customHeight : "48px")};
+  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -199,8 +199,8 @@ const FormInput = ({
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
-            $customHeight={customHeight}
-            $extraStyles={extraStyles}
+            customHeight={customHeight}
+            extraStyles={extraStyles}
             {...props}
           />
         ) : (
@@ -216,8 +216,8 @@ const FormInput = ({
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
-            $customHeight={customHeight}
-            $extraStyles={extraStyles}
+            customHeight={customHeight}
+            extraStyles={extraStyles}
             {...props}
           />
         )}

package/src/components/atoms/form-select/FormSelect.js

@@ -18,8 +18,7 @@ const FormSelect = ({
   dropdownMaxHeight,
   disabledValues,
   disabled,
-  themeValues,
-  hasTitles = false
+  themeValues
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -60,7 +59,6 @@ const FormSelect = ({
       <Dropdown
         aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
-        hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}

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

@@ -1,13 +1,10 @@
 import React, { Fragment } from "react";
 import { BoxWrapper } from "./Box.styled";
-import { safeChildren, screenReaderOnlyStyle } from "../../../util/general";
+import { safeChildren } from "../../../util/general";
 
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
-
-  srOnly prop enables special screen-reader style that is used to position content
-  completely off screen (only for users of screen readers)
 */
 
 const Box = ({
@@ -40,7 +37,6 @@ const Box = ({
   theme,
   hiddenStyles,
   extraStyles,
-  srOnly = false,
   dataQa,
   children,
   ...rest
@@ -67,9 +63,7 @@ const Box = ({
     onClick={onClick}
     hiddenStyles={hiddenStyles}
     onKeyDown={onKeyDown}
-    extraStyles={
-      srOnly ? `${screenReaderOnlyStyle}${extraStyles}` : extraStyles
-    }
+    extraStyles={extraStyles}
     theme={theme}
     textAlign={textAlign}
     data-qa={dataQa}

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

@@ -29,10 +29,10 @@ const Cluster = ({
   <ClusterWrapper
     overflow={overflow}
     {...rest}
-    $justifySelf={justifySelf}
-    $alignSelf={alignSelf}
-    $flexGrow={flexGrow}
-    $extraStyles={extraStyles}
+    justifySelf={justifySelf}
+    alignSelf={alignSelf}
+    flexGrow={flexGrow}
+    extraStyles={extraStyles}
   >
     <ClusterInnerWrapper
       justify={justify}

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

@@ -7,10 +7,10 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 ))`
   overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
   box-sizing: border-box;
-  justify-self: ${({ $justifySelf }) => $justifySelf};
-  align-self: ${({ $alignSelf }) => $alignSelf};
-  flex-grow: ${({ $flexGrow }) => $flexGrow};
-  ${({ $extraStyles }) => $extraStyles};
+  justify-self: ${({ justifySelf }) => justifySelf};
+  align-self: ${({ alignSelf }) => alignSelf};
+  flex-grow: ${({ flexGrow }) => flexGrow};
+  ${({ extraStyles }) => extraStyles};
 `;
 
 export const ClusterInnerWrapper = styled.div`

package/src/components/atoms/nav-footer/NavFooter.stories.js

@@ -23,7 +23,7 @@ export const navFooter = () => (
   <NavFooter
     leftContent={<Left />}
     rightContent={<Right />}
-    $headerHeight={text("headerHeight", "105px", "props")}
+    headerHeight={text("headerHeight", "105px", "props")}
     backgroundColor={select("activeColor", colors, "white", "props")}
     footerPadding={text("footerPadding", "1.5rem 1rem", "props")}
     isMobile={boolean("isMobile", false, "props")}

package/src/components/molecules/index.js

@@ -33,4 +33,3 @@ export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal
 export { default as Timeout } from "./timeout";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
-export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";

package/src/components/molecules/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from "react";
+import React, { useState } from "react";
 import { Stack, Box, Cluster } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Tabs.theme";
@@ -46,9 +46,9 @@ const Tabs = ({
       </Box>
       <Box className="tab-content">
         <Box>
-          {tabsConfig.tabs.map((tab, idx) => {
+          {tabsConfig.tabs.map(tab => {
             if (tab.label !== activeTab) return undefined;
-            return <Fragment key={idx}>{tab.content}</Fragment>;
+            return tab.content;
           })}
         </Box>
       </Box>

package/src/util/general.js

@@ -79,20 +79,3 @@ export const checkDeniedCards = name => {
       return "";
   }
 };
-
-/*
-  An optional style for layout atoms that positions the atom completely off screen
-  This will *not* be visible or accessible to sighted users
-  Use to contain text content or a11y interactive content (skip links when not visible)
-  that is only for users of assistive technologies (screen readers)
-
-  Currently implemented on the Box atom via the srOnly prop
-*/
-export const screenReaderOnlyStyle = `
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-`;

package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashBoardIframe.stories.js

@@ -1,22 +0,0 @@
-import React from "react";
-import PeriscopeDashboardIframe from "./PeriscopeDashboardIframe";
-import page from "../../../../.storybook/page";
-import { boolean } from "@storybook/addon-knobs";
-
-export const periscopeDashboardIframe = () => (
-  <PeriscopeDashboardIframe
-    url={"www.example.com"}
-    requestDashboardUrl={() => {}}
-    periscopeDataPending={boolean("dataPending", true)}
-    periscopeDataSuccess={boolean("dataSuccess", false)}
-    periscopeDataFailure={boolean("dataFailure", false)}
-    periscopeDataRequestSuccess={boolean("requestSuccess", false)}
-    periscopeDataRequestFailure={boolean("requestFailure", false)}
-  />
-);
-
-const story = page({
-  title: "Components|Molecules/PeriscopeDashboardIframe",
-  Component: PeriscopeDashboardIframe
-});
-export default story;

package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.js

@@ -1,124 +0,0 @@
-import React, { useLayoutEffect, useState, useEffect, Fragment } from "react";
-import {
-  BoxWithShadow,
-  Center,
-  Box,
-  PeriscopeFailedIcon,
-  Heading,
-  Paragraph,
-  Cover,
-  Spinner
-} from "../../atoms";
-import { DashboardIframe } from "./PeriscopeDashboardIframe.styled";
-
-/**
- * Component: PeriscopeDashboardIframe
- *
- * Used for rendering Citybase's periscope reporting dashboards in iframes.
- * Receives action props to trigger a request on mount for the iframe's url.
- * Receives a string prop if/when we receive the url result.
- * And receives action props to emit errors from failed iframe loading.
- *
- * The logic and api client methods to handle requests/response,
- * store the url, etc. should be provided from the app consuming this library.
- *
- * If the url request is pending, render a spinner.
- * If the url request failed, render a UI error state.
- **/
-
-const DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
-const PERISCOPE_ORIGIN = "https://app.periscopedata.com";
-const isValidMessage = message =>
-  message.isTrusted &&
-  message.origin === PERISCOPE_ORIGIN &&
-  message.data &&
-  message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
-
-const PeriscopeDashboardIframe = ({
-  url,
-  requestDashboardUrl,
-  periscopeDataPending,
-  periscopeDataSuccess,
-  periscopeDataFailure,
-  periscopeDataRequestSuccess,
-  periscopeDataRequestFailure
-}) => {
-  const [height, setHeight] = useState(0);
-  let time = { timer: null };
-
-  useEffect(() => {
-    time.timer = setTimeout(() => {
-      periscopeDataRequestFailure();
-    }, 10000);
-  }, []);
-
-  const Dashboard = height => url => (
-    <DashboardIframe
-      src={url}
-      width="100%"
-      height={height}
-      data-qa="DashboardIframe"
-      onLoad={() => {
-        let iframe = document.querySelector("iframe");
-        iframe.style.display = "initial";
-      }}
-    />
-  );
-
-  const validatePeriscope = message => {
-    if (isValidMessage(message)) {
-      setHeight(message.data.dashboard_height + 100);
-      clearTimeout(time.timer);
-      periscopeDataRequestSuccess();
-    }
-  };
-
-  useLayoutEffect(() => {
-    window.addEventListener("message", validatePeriscope);
-    requestDashboardUrl();
-    return () => window.removeEventListener("message", validatePeriscope);
-  }, [requestDashboardUrl]);
-
-  return (
-    <Fragment>
-      <BoxWithShadow
-        padding="0"
-        minWidth="100%"
-        minHeight="592px"
-        variant="baseStandard"
-        background="#fff"
-        borderRadius="4px"
-        extraStyles={`display: flex; justify-content: center; align-items: center; flex-direction: column;`}
-      >
-        {periscopeDataPending && !periscopeDataSuccess && (
-          <Cover minHeight="100%" singleChild>
-            <Center intrinsic>
-              <Spinner size="100" />
-            </Center>
-          </Cover>
-        )}
-        {periscopeDataFailure && !periscopeDataSuccess && (
-          <Box padding="64px">
-            <Center intrinsic>
-              <Box padding="0 0 2rem">
-                <PeriscopeFailedIcon />
-              </Box>
-              <Heading variant="h3" weight="700">
-                Something Went Wrong
-              </Heading>
-              <Paragraph variant="p" extraStyles={`text-align: center;`}>
-                There was an issue trying to load the dashboard.
-              </Paragraph>
-              <Paragraph variant="p" extraStyles={`text-align: center;`}>
-                Your organization may not have a dashboard configured.
-              </Paragraph>
-            </Center>
-          </Box>
-        )}
-        {!periscopeDataFailure && url && Dashboard(height)(url)}
-      </BoxWithShadow>
-    </Fragment>
-  );
-};
-
-export default PeriscopeDashboardIframe;

package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.styled.js

@@ -1,9 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { ALTO_GREY } from "../../../constants/colors";
-
-export const DashboardIframe = styled.iframe`
-  border: none;
-  box-shadow: 0 0 5px 0 ${ALTO_GREY};
-  display: none;
-`;

package/src/components/molecules/periscope-dashboard-iframe/index.js

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