@thecb/components 5.6.9 → 5.7.0-beta.1

package/dist/cb-components.umd.js

@@ -1,81 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
-  (global = global || self, factory(global['cb-components'] = {}, global.React, global.styled));
-}(this, (function (exports, React, styled) { 'use strict';
-
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
-
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
-
-  /*
-  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.
-  */
-  var PEWTER_GREY = "#DFE1E4";
-  var MARINER_BLUE = "#2E75D2";
-
-  function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
-
-    _templateObject2 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var defaultTheme = {
-    theme: {
-      accentColor: MARINER_BLUE,
-      inactiveColor: PEWTER_GREY
-    }
-  };
-  var RadioButtonBorder = styled.div(_templateObject(), function (_ref) {
-    var isSelected = _ref.isSelected,
-        theme = _ref.theme;
-    return isSelected ? theme.accentColor : theme.inactiveColor;
-  });
-  RadioButtonBorder.defaultProps = defaultTheme;
-  var RadioButtonCenter = styled.div(_templateObject2(), function (_ref2) {
-    var theme = _ref2.theme;
-    return theme.accentColor;
-  });
-  RadioButtonCenter.defaultProps = defaultTheme;
-
-  var RadioButton = function RadioButton(_ref3) {
-    var isSelected = _ref3.isSelected,
-        name = _ref3.name;
-    return React.createElement(RadioButtonBorder, {
-      isSelected: isSelected,
-      name: name
-    }, isSelected && React.createElement(RadioButtonCenter, null));
-  };
-
-  exports.RadioButton = RadioButton;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));

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;