Merge pull request #171 from mondaycom/feature/hadas/toast-link

Feature/hadas/toast link
mondaycom · Jul 21, 2021 · 39f2a53 · 39f2a53
2 parents 7bd534f + 355a516
commit 39f2a53
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.58",
+  "version": "0.3.59",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx
@@ -80,6 +80,7 @@ const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children,
         {action && <div className="monday-style-toast-action">{action}</div>}
         {closeable && (
           <Button
+            className="monday-style-toast_close-button"
             onClick={handleClose}
             size={Button.sizes.SMALL}
             kind={Button.kinds.TERTIARY}

diff --git a/src/components/Toast/Toast.scss b/src/components/Toast/Toast.scss
@@ -15,7 +15,7 @@
   padding: $spacing-small;
   align-items: center;
   display: flex;
-  min-width: 390px;
+  min-width: 200px;
   border-radius: $border-radius-small;
 
   &-icon {
@@ -25,6 +25,7 @@
   }
 
   &-content {
+    display: inline-flex;
     line-height: 22px;
     font-size: 14px;
     flex-grow: 1;
@@ -34,8 +35,11 @@
   }
 
   &-action {
-    padding-right: $spacing-small;
-    margin-left: $spacing-large;
+    margin-left: $spacing-medium;
+    display: flex;
+    &_button, &_link {
+      margin-left: $spacing-small;
+    }
   }
 
   &--type {
@@ -66,6 +70,10 @@
       animation-name: toast-pop-out;
     }
   }
+
+  &_close-button {
+    margin-left: $spacing-small;
+  }
 }
 
 @keyframes toast-pop-in {

diff --git a/src/components/Toast/ToastButton/ToastButton.jsx b/src/components/Toast/ToastButton/ToastButton.jsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react";
+import cx from "classnames";
+import Button from "../../Button/Button";
+
+const ToastButton = ({ className, ...buttonProps }) => {
+  return (
+    <Button
+      {...buttonProps}
+      className={cx("monday-style-toast-action_button", className)}
+      size={Button.sizes.SMALL}
+      color={Button.colors.ON_PRIMARY_COLOR}
+    />
+  );
+};
+
+// eslint-disable-next-line no-unused-vars
+const { size: _sizePropsType, ...buttonPropsTypes } = Button.propTypes;
+ToastButton.propTypes = {
+  ...buttonPropsTypes
+};
+
+// eslint-disable-next-line no-unused-vars
+const { size: _sizeDefaultProp, ...linkDefaultPropTypes } = Button.defaultProps;
+ToastButton.defaultProps = {
+  ...linkDefaultPropTypes,
+  size: Button.sizes.SMALL,
+  kind: Button.kinds.SECONDARY,
+  marginLeft: false,
+  isDarkBackground: false
+};
+
+export default ToastButton;
diff --git a/src/components/Toast/ToastLink/ToastLink.jsx b/src/components/Toast/ToastLink/ToastLink.jsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react";
+import cx from "classnames";
+import Link from "../../Link/Link";
+import "./ToastLink.scss";
+
+const ToastLink = ({ className, ...linkProps }) => {
+  const classNames = cx("monday-style-toast-action_link", className);
+  return <Link {...linkProps} componentClassName={classNames} />;
+};
+
+// eslint-disable-next-line no-unused-vars
+const { componentClassName: _componentClassNamePropsType, ...linkPropsTypes } = Link.propTypes;
+ToastLink.propTypes = {
+  ...linkPropsTypes
+};
+
+// eslint-disable-next-line no-unused-vars
+const { componentClassName: _componentClassNameDefaultProp, ...linkDefaultPropTypes } = Link.defaultProps;
+ToastLink.defaultProps = {
+  ...linkDefaultPropTypes
+};
+
+export default ToastLink;
diff --git a/src/components/Toast/ToastLink/ToastLink.scss b/src/components/Toast/ToastLink/ToastLink.scss
@@ -0,0 +1,9 @@
+@import "../../../styles/global-css-settings.scss";
+@import "../../../styles/themes.scss";
+
+.monday-style-toast-action_link {
+  @include theme-prop(color, text-color-on-primary);
+  text-decoration: underline;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
diff --git a/src/components/Toast/__stories__/toast.stories.js b/src/components/Toast/__stories__/toast.stories.js
@@ -5,6 +5,8 @@ import Button from "../../Button/Button";
 import Icon from "../../Icon/Icon";
 import Send from "../../Icon/Icons/components/Send";
 import { StoryStateColumn, StoryStateRow } from "../../storybook-helpers";
+import ToastButton from "../ToastButton/ToastButton";
+import ToastLink from "../ToastLink/ToastLink";
 
 export const Sandbox = () => {
   const sendIconElement = (
@@ -27,35 +29,84 @@ export const Sandbox = () => {
     hideIcon: boolean("hideIcon", false)
   };
   const [toastOpen, setToastOpen] = useState(false);
+  const [toastOpenButton, setToastOpenButton] = useState(false);
+  const [toastOpenLink, setToastOpenLink] = useState(false);
+  const [toastOpenLinkButton, setToastOpenLinkButton] = useState(false);
+
   const toggleToast = () => setToastOpen(open => !open);
   const closeToast = () => setToastOpen(false);
+  const toggleToastButton = () => setToastOpenButton(open => !open);
+  const closeToastButton = () => setToastOpenButton(false);
+  const toggleToastLink = () => setToastOpenLink(open => !open);
+  const closeToastLink = () => setToastOpenLink(false);
+  const toggleToastLinkButton = () => setToastOpenLinkButton(open => !open);
+  const closeToastLinkButton = () => setToastOpenLinkButton(false);
   let icon = knobs.icon;
   if (knobs.icon === "send") {
     icon = sendIconElement;
   }
   return (
     <section>
-      <StoryStateRow>
-        <StoryStateColumn>
-          <Button onClick={() => toggleToast()}>Toggle Toast!</Button>
-          <Toast
-            open={toastOpen}
-            onClose={() => closeToast()}
-            action={
-              <Button size={Button.sizes.SMALL} kind={Button.kinds.SECONDARY} color={Button.colors.ON_PRIMARY_COLOR}>
-                Undo 5
-              </Button>
-            }
-            type={knobs.type}
-            icon={icon}
-            closeable={knobs.closeable}
-            autoHideDuration={knobs.autoHideDuration}
-            hideIcon={knobs.hideIcon}
-          >
-            Something Happened
-          </Toast>
-        </StoryStateColumn>
-      </StoryStateRow>
+      <StoryStateColumn>
+        <Button onClick={() => toggleToast()}>Toggle Toast!</Button>
+        <Toast
+          open={toastOpen}
+          onClose={() => closeToast()}
+          type={knobs.type}
+          icon={icon}
+          closeable={knobs.closeable}
+          autoHideDuration={knobs.autoHideDuration}
+          hideIcon={knobs.hideIcon}
+        >
+          Something Happened
+        </Toast>
+      </StoryStateColumn>
+      <StoryStateColumn>
+        <Button onClick={() => toggleToastButton()}>Toggle toast with button!</Button>
+        <Toast
+          open={toastOpenButton}
+          onClose={() => closeToastButton()}
+          action={<ToastButton>Undo 5</ToastButton>}
+          type={knobs.type}
+          icon={icon}
+          closeable={knobs.closeable}
+          autoHideDuration={knobs.autoHideDuration}
+          hideIcon={knobs.hideIcon}
+        >
+          Something Happened
+        </Toast>
+      </StoryStateColumn>
+      <StoryStateColumn>
+        <Button onClick={() => toggleToastLink()}>Toggle Toast with link!</Button>
+        <Toast
+          open={toastOpenLink}
+          onClose={() => closeToastLink()}
+          type={knobs.type}
+          icon={icon}
+          closeable={knobs.closeable}
+          autoHideDuration={knobs.autoHideDuration}
+          hideIcon={knobs.hideIcon}
+        >
+          Something Happened
+          <ToastLink text="Lorem ipsum" href="https://monday.com" />
+        </Toast>
+      </StoryStateColumn>
+      <StoryStateColumn>
+        <Button onClick={() => toggleToastLinkButton()}>Toggle Toast with link and button!</Button>
+        <Toast
+          open={toastOpenLinkButton}
+          onClose={() => closeToastLinkButton()}
+          action={<ToastButton>Undo 5</ToastButton>}
+          type={knobs.type}
+          icon={icon}
+          closeable={knobs.closeable}
+          autoHideDuration={knobs.autoHideDuration}
+          hideIcon={knobs.hideIcon}
+        >
+          Something Happened
+          <ToastLink text="Lorem ipsum" href="https://monday.com" />
+        </Toast>
+      </StoryStateColumn>
     </section>
   );
 };

diff --git a/src/components/index.js b/src/components/index.js
@@ -30,6 +30,8 @@ export { default as Checkbox } from "./Checkbox/Checkbox";
 export { default as DialogContentContainer } from "./DialogContentContainer/DialogContentContainer";
 export { default as Dropdown } from "./Dropdown/Dropdown";
 export { default as Toast } from "./Toast/Toast";
+export { default as ToastButton } from "./Toast/ToastButton/ToastButton";
+export { default as ToastLink } from "./Toast/ToastLink/ToastLink";
 export { default as Banner } from "./Banner/Banner";
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup";
 

diff --git a/src/published-components.js b/src/published-components.js
@@ -41,6 +41,8 @@ const publishedComponents = {
   Search: "/src/components/Search/Search.jsx",
   TextField: "/src/components/TextField/TextField.jsx",
   Toast: "/src/components/Toast/Toast.jsx",
+  ToastButton: "/src/components/Toast/ToastButton/ToastButton.jsx",
+  ToastLink: "/src/components/Toast/ToastLink/ToastLink.jsx",
   Tooltip: "/src/components/Tooltip/Tooltip.jsx",
   Button: "/src/components/Button/Button.jsx",
   Loader: "/src/components/Loader/Loader.jsx",