@thecb/components 5.6.9 → 5.7.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.6.9",
+  "version": "5.7.0-beta.1",
   "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/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/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/dist/cb-components.cjs.js

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var styled = _interopDefault(require('styled-components'));
-
-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;