@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

package/src/components/molecules/toast-notification/Toast.stories.js

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import ToastNotification from "./ToastNotification";
+import { fn } from "@storybook/test";
+import { ButtonWithAction } from "../../atoms";
+import { Box, Stack } from "../../atoms/layouts";
+import { ONAHAU_BLUE } from "../../../constants/colors";
+
+export default {
+  title: "Molecules/Toast",
+  component: ToastNotification,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    variant: "success",
+    message: "",
+    toastOpen: false,
+    closeToastNotification: fn(),
+    extraStyles: undefined,
+    minWidth: "112px",
+    maxWidth: "350px",
+    height: "56px",
+    childGap: "1rem",
+    backgroundColor: undefined,
+    role: "status",
+    ariaLive: "polite",
+    screenReaderMessage: undefined,
+    showScreenReaderMessage: true
+  },
+  argTypes: {
+    variant: {
+      description: "Type of toast notification, one of success/error.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    message: {
+      description: "Content of the toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    toastOpen: {
+      description: "Whether the toast is visible",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    closeToastNotification: {
+      description: "Function to run when user closes the toast",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      description: "Additional styles for toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "112px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "350px" }
+      }
+    },
+    height: {
+      description: "Height of toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "56px" }
+      }
+    },
+    childGap: {
+      description: "Gap between toast icon, content, and close button",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "1rem" }
+      }
+    },
+    backgroundColor: {
+      description: "Override for background color",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    role: {
+      description: "aria-role for screen reader message",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "status" }
+      }
+    },
+    ariaLive: {
+      description: "aria-live behavior for screen reader message",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "polite" }
+      }
+    },
+    screenReaderMessage: {
+      description: "Content of message to be read to users of screen readers",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showScreenReaderMessage: {
+      description:
+        "Whether a message for screen reader users should appear when toast is displayed",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    }
+  }
+};
+
+export const SuccessToast = {
+  args: {
+    message: "Account added to profile",
+    screenReaderMessage: "Account added to profile",
+    toastOpen: true
+  }
+};
+
+export const ErrorToast = {
+  args: {
+    variant: "error",
+    message:
+      "Error: payment unsuccessful. Please check your credit card details.",
+    screenReaderMessage:
+      "Payment unsuccessful. Please check your credit card details.",
+    toastOpen: true
+  }
+};
+
+export const CustomToast = {
+  args: {
+    message: "A toast notification can be used for any type of message",
+    screenReaderMessage: "Use toasts for any purpose",
+    backgroundColor: `${ONAHAU_BLUE}`
+  },
+  render: args => {
+    const [toastOpen, setToastOpen] = useState(false);
+
+    return (
+      <Box>
+        <Stack childGap="3rem">
+          <Box>
+            <ButtonWithAction
+              action={() => setToastOpen(!toastOpen)}
+              text="Trigger Toast"
+            />
+          </Box>
+          <Box>
+            <ToastNotification
+              {...args}
+              toastOpen={toastOpen}
+              closeToastNotification={() => setToastOpen(false)}
+            />
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+};

package/src/util/idleTimerUtils.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+
+const useLogoutTimers = ({
+  logoutTimerOn = false,
+  action,
+  timeLeftToLogout,
+  handleSetTimeLeft,
+  initialTimeLeftToLogout = 30
+}) => {
+  let timers = { timer: null, interval: null };
+  let timeLeft = timeLeftToLogout;
+
+  useEffect(() => {
+    if (logoutTimerOn) {
+      timers.timer = window.setTimeout(() => {
+        action();
+        handleSetTimeLeft(initialTimeLeftToLogout);
+      }, initialTimeLeftToLogout * 1000);
+    }
+    return () => clearTimeout(timers.timer);
+  }, [logoutTimerOn]);
+
+  useEffect(() => {
+    if (logoutTimerOn) {
+      timers.interval = window.setInterval(() => {
+        timeLeft--;
+        handleSetTimeLeft(timeLeft);
+      }, 1000);
+    }
+    return () => clearInterval(timers.interval);
+  }, [logoutTimerOn]);
+
+  return timers;
+};
+
+export default useLogoutTimers;

package/src/util/index.js

@@ -4,6 +4,7 @@ import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "../hooks/use-outside-click";
 import useToastNotification from "../hooks/use-toast-notification";
+import useLogoutTimers from "./idleTimerUtils";
 
 export {
   formats,
@@ -11,5 +12,6 @@ export {
   theme,
   useFocusInvalidInput,
   useOutsideClick,
-  useToastNotification
+  useToastNotification,
+  useLogoutTimers
 };

package/src/components/molecules/edit-name-form/EdidNameForm.stories.js

@@ -1,24 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-
-import EditNameForm from "./EditNameForm";
-import page from "../../../../.storybook/page";
-import * as EditNameFormState from "./EditNameForm.state";
-
-const story = page({
-  title: "Components|Molecules/EditNameForm",
-  Component: EditNameForm,
-  reducer: EditNameFormState.reducer,
-  mapStateToProps: EditNameFormState.mapStateToProps,
-  mapDispatchToProps: EditNameFormState.mapDispatchToProps
-});
-export default story;
-
-const ConnectedForm = connect(
-  EditNameFormState.mapStateToProps,
-  EditNameFormState.mapDispatchToProps
-)(EditNameForm);
-export const editNameForm = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
-);

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -1,105 +0,0 @@
-import React, { useEffect } from "react";
-import ToastNotification from "./ToastNotification";
-import page from "../../../../.storybook/page";
-import { useToastNotification } from "../../../hooks";
-import { ToastVariants } from "../../../types/common";
-import { text } from "@storybook/addon-knobs";
-
-const groupId = "props";
-
-export const toastNotificationSuccess = () => {
-  const {
-    isToastOpen,
-    toastVariant,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification();
-
-  useEffect(() => {
-    showToast({
-      message: "Success!",
-      variant: ToastVariants.SUCCESS
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      variant={toastVariant}
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-
-toastNotificationSuccess.storyName = "Success Toast";
-
-export const toastNotificationError = () => {
-  const {
-    isToastOpen,
-    toastVariant,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification();
-
-  useEffect(() => {
-    showToast({
-      message: "An error occurred",
-      variant: ToastVariants.ERROR
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      variant={toastVariant}
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-toastNotificationError.storyName = "Error Toast";
-
-export const toastNotificationNoAutoHide = () => {
-  const {
-    isToastOpen,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification({ timeout: 0 });
-
-  useEffect(() => {
-    showToast({
-      message: "Success!",
-      variant: ToastVariants.SUCCESS
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-
-toastNotificationNoAutoHide.storyName = "No auto-hide";
-
-const story = page({
-  title: "Components|Molecules/ToastNotification",
-  Component: ToastNotification
-});
-
-export default story;