@thecb/components 5.6.6 → 5.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.6.6",
+  "version": "5.6.10",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -85,6 +85,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.3.0"
+    "redux-freeform": "^5.4.0"
   }
 }

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

@@ -92,7 +92,8 @@ const Dropdown = ({
   themeValues,
   maxHeight,
   widthFitOptions = false,
-  disabled
+  disabled,
+  hasTitles = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -113,6 +114,9 @@ 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;
@@ -210,6 +214,7 @@ const Dropdown = ({
       background-color: #f7f7f7;
       pointer-events: none;`
       }
+      title={hasTitles ? getSelection() : null}
     >
       <Box
         as="button"
@@ -253,9 +258,7 @@ const Dropdown = ({
             pointer-events: none;`
               }
             >
-              {value
-                ? options.find(option => option.value === value)?.text
-                : placeholder}
+              {getSelection()}
             </Text>
           )}
           <IconWrapper open={isOpen}>
@@ -287,6 +290,7 @@ 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-select/FormSelect.js

@@ -18,7 +18,8 @@ const FormSelect = ({
   dropdownMaxHeight,
   disabledValues,
   disabled,
-  themeValues
+  themeValues,
+  hasTitles = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -59,6 +60,7 @@ 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,10 +1,13 @@
 import React, { Fragment } from "react";
 import { BoxWrapper } from "./Box.styled";
-import { safeChildren } from "../../../util/general";
+import { safeChildren, screenReaderOnlyStyle } 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 = ({
@@ -37,6 +40,7 @@ const Box = ({
   theme,
   hiddenStyles,
   extraStyles,
+  srOnly = false,
   dataQa,
   children,
   ...rest
@@ -63,7 +67,9 @@ const Box = ({
     onClick={onClick}
     hiddenStyles={hiddenStyles}
     onKeyDown={onKeyDown}
-    extraStyles={extraStyles}
+    extraStyles={
+      srOnly ? `${screenReaderOnlyStyle}${extraStyles}` : extraStyles
+    }
     theme={theme}
     textAlign={textAlign}
     data-qa={dataQa}

package/src/components/molecules/index.js

@@ -33,3 +33,4 @@ 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/periscope-dashboard-iframe/PeriscopeDashBoardIframe.stories.js

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,9 @@
+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

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

package/src/util/general.js

@@ -79,3 +79,20 @@ 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;
+`;