@thecb/components 6.3.1-beta.8 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.3.1-beta.8",
+  "version": "7.0.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/index.js

@@ -43,3 +43,4 @@ export { default as ToggleSwitch } from "./toggle-switch";
 export { default as TypeaheadInput } from "./typeahead-input";
 export { default as Card } from "./card";
 export { default as NavTabs } from "./nav-tabs";
+export { default as LoadingLine } from "./loading-line";

package/src/components/atoms/loading-line/LoadingLine.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { LoadingPill } from "./LoadingPill.styled";
+
+const LoadingLine = ({
+  minWidth,
+  maxWidth,
+  exactWidth = null,
+  height = "16px",
+  margin = "0px"
+}) => (
+  <LoadingPill
+    margin={margin}
+    height={height}
+    width={
+      exactWidth ||
+      Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth
+    }
+  />
+);
+
+export default LoadingLine;

package/src/components/atoms/loading-line/LoadingLine.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import page from "../../../../.storybook/page";
+import LoadingLine from "../../atoms/loading-line";
+
+const numberOfRows = 10;
+const rowWidths = [50, 100, 50, 100, 50];
+
+export const loadingLine = () => (
+  <table>
+    {[...Array(numberOfRows)].map(r => (
+      <tr>
+        {rowWidths.map(rw => (
+          <td>
+            <LoadingLine exactWidth={rw} />
+          </td>
+        ))}
+      </tr>
+    ))}
+  </table>
+);
+
+loadingLine.storyName = "Loading Line";
+
+const story = page({
+  title: "Components|Atoms/LoadingLine",
+  Component: LoadingLine
+});
+export default story;

package/src/components/atoms/loading-line/LoadingPill.styled.js

@@ -0,0 +1,32 @@
+import styled, { keyframes } from "styled-components";
+import { colors } from "../../../constants";
+
+const shineFrames = keyframes`{
+  0 {
+    background-position: 0 0;
+  }
+  20% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}`;
+
+export const LoadingPill = styled.div`
+  width: ${({ width }) => width}px;
+  background-color: ${colors.SEASHELL_WHITE};
+  margin: ${({ margin }) => margin};
+  height: ${({ height }) => height};
+  border-radius: 16px;
+  background-image: linear-gradient(
+    135deg,
+    ${colors.SEASHELL_WHITE} 0%,
+    ${colors.ALABASTER_WHITE} 40%,
+    ${colors.SEASHELL_WHITE} 60%,
+    ${colors.SEASHELL_WHITE} 100%
+  );
+  background-size: 400%;
+  animation: ${shineFrames} 2s infinite ease-in-out;
+  animation-direction: reverse;
+`;

package/src/components/atoms/loading-line/index.js

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

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -103,10 +103,10 @@ const ToggleSwitch = ({
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "2px",
+      right: "1px",
       top: "2px",
       bottom: "2px",
-      left: "24px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
@@ -162,7 +162,7 @@ const ToggleSwitch = ({
       }
     >
       <Center>
-        <Cluster justify="stretch" align="center">
+        <Cluster justify="stretch" align="center" overflow="visible">
           <Cover minHeight="100%" singleChild>
             <Box
               minWidth="100%"

package/src/components/molecules/footer-with-subfooter/FooterWithSubfooter.js

@@ -26,7 +26,7 @@ const FooterWithSubfooter = ({
       <NavFooter
         backgroundColor={themeValues.subfooterBackgroundColor}
         footerMinHeight="45px"
-        footerPadding="0 1rem"
+        footerPadding="0 16px"
         aria-label="subfooter"
         leftContent={leftSubfooterContent}
         rightContent={rightSubfooterContent}

package/src/components/molecules/index.d.ts

@@ -1,2 +1 @@
-export * from "./collapsible-section";
 export * from "./footer-with-subfooter";

package/src/components/molecules/popover/Popover.js

@@ -43,7 +43,7 @@ const Popover = ({
     }
   };
 
-  const triggerRef = useOutsideClickHook(() => handleTogglePopover(false));
+  const triggerRef = useOutsideClick(() => handleTogglePopover(false));
 
   return (
     <Box padding="0" extraStyles={`position: relative; ${extraStyles}`}>

package/src/components/molecules/collapsible-section/index.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface CollapsibleSectionProps {
-  isOpen: boolean;
-  toggleSection?: () => void;
-  isMobile?: boolean;
-  supportsTouch?: boolean;
-  title?: string;
-  customPadding?: string;
-  initiallyOpen?: boolean;
-  openHeight?: string;
-  customTitle?: boolean;
-  stackTitle?: boolean;
-  stackTitleContent?: JSX.Element;
-  sectionGap?: string;
-  name?: string;
-  index?: number;
-}
-
-export const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/editable-table/index.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface EditableTableProps {
-  title?: any;
-  renderItem?: (items: any) => JSX.Element;
-  items: any;
-  isMobile?: boolean;
-}
-
-export const EditableTable: React.FC<Expand<EditableTableProps> &
-  React.HTMLAttributes<HTMLElement>>;
-
-export interface TableListItemProps {
-  borderTopItem?: boolean;
-  canEdit?: boolean;
-  canRemove?: boolean;
-  isMobile?: boolean;
-  title?: any;
-  value?: any;
-}
-
-export const TableListItem: React.FC<Expand<TableListItemProps> &
-  React.HTMLAttributes<HTMLElement>>;