Merge pull request #252 from marketgoo/development

published version 2.2.0
marketgoo · Sep 7, 2023 · c5cc16a · c5cc16a
2 parents 8404701 + 218f751
commit c5cc16a
Show file tree

Hide file tree

Showing 8 changed files with 372 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.2.0] - 2023-09-07
+### Added
+- New component `Toast`.
+
 ## [2.0.1] - 2023-08-22
 ### Fixed
 - Downgrade the `@phosphor-icons/react` version to `2.0.9` because `2.0.10` is not compatible with ES Modules.
@@ -681,6 +685,7 @@ Added `Edit` to `Icon` component
 [#233]: https://github.com/marketgoo/Ola/issues/233
 [#238]: https://github.com/marketgoo/Ola/issues/238
 
+[2.2.0]: https://github.com/marketgoo/Ola/compare/v2.0.1...v2.2.0
 [2.0.1]: https://github.com/marketgoo/Ola/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/marketgoo/Ola/compare/v1.0.0...v2.0.0
 [1.0.0]: https://github.com/marketgoo/Ola/compare/v0.16.1...v1.0.0

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marketgoo/ola",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Design System by marketgoo",
   "main": "dist/index.js",
   "styles": "dist/index.css",
@@ -81,4 +81,4 @@
     "dialog-polyfill": "^0.5.3",
     "react-hook-form": "^7.21.0"
   }
-}
+}
diff --git a/src/Toast/__snapshots__/test.js.snap b/src/Toast/__snapshots__/test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default Toast 1`] = `
+<div
+  className="ola_toast is-neutral"
+  style={
+    Object {
+      "--bottom": "unset",
+      "--left": "unset",
+      "--right": "24px",
+      "--top": "24px",
+    }
+  }
+>
+  <div
+    className="ola_toast-container"
+  >
+    <div
+      className="ola_toast-icon"
+    >
+      <svg
+        fill="currentColor"
+        height={24}
+        viewBox="0 0 256 256"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="ola_toast-content"
+    >
+      <div
+        className="ola_toast-title ola-font-1-bold"
+      >
+        This is the title
+      </div>
+    </div>
+    <div
+      className="ola_toast-close"
+    >
+      <button
+        className="ola_button_icon is-dark"
+        disabled={false}
+        size="small"
+        style={
+          Object {
+            "--base-color": "var(--color-neutral-900)",
+            "--busy-color": "var(--color-neutral-600)",
+            "--disabled-color": "var(--color-neutral-300)",
+            "--shadow-focus": "var(--shadow-focus-neutral)",
+          }
+        }
+      >
+        <svg
+          className="ola_icon is-medium"
+          fillRule="evenodd"
+          height="28"
+          viewBox="0 0 28 28"
+          width="28"
+        >
+          <path
+            d="M22.92 4c.296 0 .55.105.762.314.212.21.318.462.318.758s-.106.55-.318.762l-8.17 8.174 8.17 8.166c.212.212.318.464.318.754 0 .296-.106.549-.318.758-.212.21-.466.314-.762.314s-.547-.103-.753-.31l-8.171-8.166-8.163 8.166c-.206.207-.46.31-.761.31a1.04 1.04 0 0 1-.758-.31A1.02 1.02 0 0 1 4 22.936c0-.301.103-.555.31-.762l8.17-8.166-8.17-8.174A1.026 1.026 0 0 1 4 5.08c0-.296.105-.55.314-.762.21-.212.462-.318.758-.318.295 0 .55.106.761.318l8.163 8.174 8.17-8.174A1.03 1.03 0 0 1 22.92 4z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/Toast/index.js b/src/Toast/index.js
@@ -0,0 +1,105 @@
+import React from 'react'
+import { default as PT } from 'prop-types'
+import cx from 'classnames'
+import ButtonIcon from '../ButtonIcon'
+import { CheckCircle, Question, XCircle, Warning } from '@phosphor-icons/react'
+
+const Toast = ({
+  title,
+  variant,
+  className,
+  icon,
+  onClose,
+  isClosable,
+  children,
+  top,
+  right,
+  left,
+  bottom,
+}) => {
+  let iconElement = icon
+  if (!iconElement) {
+    const icons = {
+      positive: CheckCircle,
+      negative: XCircle,
+      neutral: Question,
+      warning: Warning,
+    }
+    const DefaultIcon = icons[variant]
+
+    iconElement = <DefaultIcon size={24} weight="fill" />
+  }
+
+  const styles = cx(
+    'ola_toast',
+    `is-${variant}`,
+    className
+  )
+  return (
+    <div className={styles} style={{
+      '--top': top,
+      '--right': right,
+      '--left': left,
+      '--bottom': bottom
+    }}>
+      <div className='ola_toast-container'>
+        <div className='ola_toast-icon'>
+          {iconElement}
+        </div>
+        <div className='ola_toast-content'>
+          {title && <div className="ola_toast-title ola-font-1-bold">{title}</div>}
+          {children && <div className="ola_toast-description">{children}</div>}
+        </div>
+        {isClosable && <div className='ola_toast-close'><ButtonIcon
+          icon="close"
+          size="small"
+          variant="dark"
+          onClick={onClose}
+        /></div>}
+      </div>
+    </div>
+  )
+}
+
+
+Toast.defaultProps = {
+  variant: 'neutral',
+  top: '24px',
+  right: '24px',
+  left: 'unset',
+  bottom: 'unset',
+  isClosable: true
+}
+
+Toast.propTypes = {
+  title: PT.string,
+  children: PT.oneOfType([
+    PT.string,
+    PT.node,
+    PT.arrayOf(PT.node)
+  ]),
+  /** Name of the icon in this lib (see Ola Icon), or a svg direcly **(preferred a Phosphor Icon)** */
+  icon: PT.oneOfType([
+    PT.string,
+    PT.shape({
+      type: PT.oneOf(['svg']),
+    }),
+    PT.node,
+    PT.arrayOf(PT.node)
+  ]),
+  /** Toast variant */
+  variant: PT.oneOf(['warning', 'positive', 'negative', 'neutral']),
+  /** Extra className */
+  className: PT.string,
+  /** closable */
+  isClosable: PT.bool,
+  /** Close event */
+  onClose: PT.func,
+  /** Positions */
+  top: PT.string,
+  bottom: PT.string,
+  left: PT.string,
+  right: PT.string,
+}
+
+export default Toast
diff --git a/src/Toast/stories.js b/src/Toast/stories.js
@@ -0,0 +1,68 @@
+import React from 'react'
+import Toast from './'
+import Button from '../Button'
+import { MegaphoneSimple } from '@phosphor-icons/react'
+
+
+export default {
+  title: 'Toast',
+  component: Toast,
+  args: {
+    title: 'This is a Toast 🎉',
+  },
+}
+
+export const Positive = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast>
+)
+Positive.args = {
+  variant: 'positive'
+}
+
+
+export const Negative = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast>
+)
+Negative.args = {
+  variant: 'negative'
+}
+
+
+export const Warning = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast>
+)
+Warning.args = {
+  variant: 'warning'
+}
+
+
+export const Neutral = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast >
+)
+
+export const CustomIcon = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+    <Button variant="link">Click me</Button>
+  </Toast >
+)
+CustomIcon.args = {
+  icon: <MegaphoneSimple size={24} weight="fill" />,
+}
+
+export const NoTitle = (args) => (
+  <Toast {...args} variant="neutral" >
+    <p style={{ marginTop: '0' }}>You can include some info message here! </p>
+  </Toast >
+)
+NoTitle.args = {
+  title: null
+}
diff --git a/src/Toast/style.css b/src/Toast/style.css
@@ -0,0 +1,55 @@
+.ola_toast {
+  --background-color: var(--color-neutral-100);
+  --border-color: var(--color-neutral-500);
+  --icon-color: var(--color-neutral-900);
+  position: absolute;
+  top: var(--top);
+  right: var(--right);
+  left: var(--left);
+  bottom: var(--bottom);
+  border-radius: var(--radius-s);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-color);
+  max-width: 620px;
+  width: fit-content;
+  box-shadow: 0px 2px 6px 0.2px rgba(0, 0, 0, 0.2);
+  & .ola_toast-container {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: var(--size-2);
+  }
+  & .ola_toast-content {
+    margin-right: var(--size-4);
+  }
+  & .ola_toast-icon svg {
+    fill: var(--icon-color);
+  }
+  &.is-positive {
+    --background-color: var(--color-positive-100);
+    --border-color: var(--color-positive-500);
+    --icon-color: var(--color-positive-500);
+  }
+
+  &.is-negative {
+    --background-color: var(--color-negative-100);
+    --border-color: var(--color-negative-500);
+    --icon-color: var(--color-negative-500);
+  }
+  &.is-warning {
+    --background-color: var(--color-warning-100);
+    --border-color: var(--color-warning-500);
+    --icon-color: var(--color-warning-500);
+  }
+
+  & .ola_toast-close {
+    position: absolute;
+    right: var(--size-1);
+    top: var(--size-1);
+    margin-left: var(--size-1);
+  }
+  & .ola_toast-icon {
+    margin-right: var(--size-1);
+  }
+}
diff --git a/src/Toast/test.js b/src/Toast/test.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Toast from './'
+import renderer from 'react-test-renderer'
+
+it('Default Toast', () => {
+  const tree = renderer.create(<Toast variant="neutral" title="This is the title" />).toJSON()
+  expect(tree).toMatchSnapshot()
+})