@xaypay/tui 0.0.61 → 0.0.63

package/src/components/toaster/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Toast } from './Toast';
+
+import styles from './toaster.module.css';
+
+let toastify;
+
+const removeToast = (ref, position) => {
+  const parent = document.getElementById(styles[position]);
+  const node = ReactDOM.findDOMNode(ref.current);
+  const removeElem = node.parentNode;
+  parent.removeChild(removeElem);
+
+  if (!parent.hasChildNodes()) {
+    toastify.removeChild(parent);
+  }
+};
+
+export const createToast = ({
+  type,
+  title,
+  timer,
+  position,
+  description,
+}) => {
+  let toastParentBlock;
+
+  const toastBlock = document.createElement('div');
+  toastBlock.style.position = 'relative';
+  toastBlock.style.flexShrink = 0;
+  toastBlock.style.width = '440px';
+  toastBlock.style.height = '83px';
+  toastBlock.style.marginBottom = '20px';
+  const newElem = React.createElement(Toast, {
+    type,
+    timer,
+    title,
+    position,
+    removeToast,
+    description
+  });
+  ReactDOM.render(newElem, toastBlock);
+
+  if (!toastify) {
+    toastify = document.getElementById('toastify');
+  }
+
+  if (!document.getElementById(styles[position])) {
+    toastParentBlock = document.createElement('div');
+    toastParentBlock.style.position = 'fixed';
+    toastParentBlock.style.display = 'flex';
+    toastParentBlock.style.zIndex = 99999;
+    toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
+    toastParentBlock.setAttribute('id', styles[position]);
+    toastParentBlock.appendChild(toastBlock);
+    toastify.appendChild(toastParentBlock);
+  } else {
+    document.getElementById(styles[position]).appendChild(toastBlock);
+  }
+};
+
+export const Toaster = () => {
+  const handleToasterClick = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div onClick={handleToasterClick} id='toastify'></div>
+  )
+};

package/src/components/toaster/toaster.module.css

@@ -0,0 +1,188 @@
+#top-left {
+  top: 1em;
+  left: 0;
+}
+
+#top-right {
+  top: 1em;
+  right: 0
+}
+
+#top-center {
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+#bottom-left {
+  left: 0;
+  bottom: 1em;
+}
+
+#bottom-right {
+  right: 0;
+  bottom: 1em;
+}
+
+#bottom-center {
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.top-left {
+  top: 1em;
+  left: 0;
+}
+
+.top-right {
+  top: 1em;
+  right: 0
+}
+
+.top-center {
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.bottom-left {
+  left: 0;
+  bottom: 1em;
+}
+
+.bottom-right {
+  right: 0;
+  bottom: 1em;
+}
+
+.bottom-center {
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.notify-block {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.bounce-in-right {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+.bounce-out-right {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@keyframes bounceInRight {
+  from {
+    opacity: 0;
+    right: -100%;
+  }
+
+  60% {
+    opacity: 1;
+    right: 40px;
+  }
+
+  75% {
+    right: 0px;
+  }
+
+  90% {
+    right: 30px;
+  }
+
+  to {
+    right: 20px;
+  }
+}
+
+@keyframes bounceOutRight {
+  from {
+    opacity: 1;
+    right: 20px;
+  }
+  
+  60% {
+    opacity: 1;
+    right: 60px;
+  }
+
+  to {
+    opacity: 0;
+    right: -100%;
+  }
+}
+
+.bounce-in-left {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+.bounce-out-left {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@keyframes bounceInLeft {
+  from {
+    opacity: 0;
+    left: -100%;
+  }
+
+  60% {
+    opacity: 1;
+    left: 40px;
+  }
+
+  75% {
+    left: 0px;
+  }
+
+  90% {
+    left: 30px;
+  }
+
+  to {
+    left: 20px;
+  }
+}
+
+@keyframes bounceOutLeft {
+  from {
+    opacity: 1;
+    left: 20px;
+  }
+
+  60% {
+    opacity: 1;
+    left: 60px;
+  }
+
+  to {
+    opacity: 0;
+    left: -100%;
+  }
+}

package/src/components/toaster/toaster.stories.js

@@ -0,0 +1,296 @@
+import React from 'react';
+import { Toaster, createToast } from './index';
+import { Button } from './../button';
+
+export default {
+  component: Toaster,
+  title: 'Components/Toaster',
+};
+
+const Template = (args) => {
+  const handleAddToaster = (type, timer, title, position, description) => {
+    createToast({
+      type,
+      timer,
+      title,
+      position,
+      description
+    });
+  };
+
+  return (
+    <div
+      style={{
+        height: 'calc(100vh - 100px)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          marginBottom: '30px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success top left"
+          backgroundColor='#10a574'
+          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success top right"
+          backgroundColor='#10a574'
+          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success top center"
+          backgroundColor='#10a574'
+          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success bottom left"
+          backgroundColor='#10a574'
+          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success bottom right"
+          backgroundColor='#10a574'
+          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success bottom center"
+          backgroundColor='#10a574'
+          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          marginBottom: '30px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info top left"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info top right"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info top center"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info bottom left"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info bottom right"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info bottom center"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          marginBottom: '30px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning top left"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning top right"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning top center"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning bottom left"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning bottom right"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning bottom center"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          marginBottom: '30px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error top left"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error top right"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error top center"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error bottom left"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error bottom right"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error bottom center"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+        />
+      </div>
+
+      <Toaster />
+    </div>
+  )
+};
+
+export const Default = Template.bind({});

package/src/index.js

@@ -5,6 +5,7 @@ export * from './components/input';
 export * from './components/radio';
 export * from './components/button';
 export * from './components/select';
+export * from './components/toaster';
 export * from './components/tooltip';
 export * from './components/captcha';
 export * from './components/stepper';
@@ -13,4 +14,4 @@ export * from './components/icon/Icon';
 export * from './components/typography';
 export * from './components/pagination';
 export * from './components/autocomplate';
-export * from './components/selectCheckbox';
+export * from './components/selectCheckbox';

package/src/stories/configuration.stories.mdx

@@ -365,3 +365,19 @@ import StackAlt from './assets/stackalt.svg';
     optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
 }
 ```
+
+### Toaster
+
+#### toaster props are not global, you should set directly
+##### all properties are required except description
+```
+{
+  createToast({
+    type,        ---> one of this strings ['info', 'warn', 'error', 'success']
+    timer,       ---> timer must be a number, for example 5000, is a 5 seconds
+    title,       ---> title is a string for toast title
+    description  ---> description is a string for toast description
+    position     ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
+  });
+}
+```

package/src/stories/usage.stories.mdx

@@ -9,7 +9,10 @@ import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
 import buttonImage from './static/button-usage.png';
+import selectImage from './static/select-usage.png';
 import inputTooltipImage from './static/input-tooltip-usage.png';
+import toasterImage from './static/toaster-container-usage.png';
+import toastImage from './static/toaster-usage.png'
 
 <Meta title="Intro/Usage" />
 
@@ -129,4 +132,16 @@ import inputTooltipImage from './static/input-tooltip-usage.png';
 
 ### Input / Tooltip
 
-<img src={inputTooltipImage} alt="button image" />
+<img src={inputTooltipImage} alt="input tooltip image" />
+
+### Select
+
+<img src={selectImage} alt="select image" />
+
+### Toaster
+
+#### Toaster container usage
+<img src={toasterImage} alt="toaster image" />
+
+#### createToast function usage
+<img src={toastImage} alt="toaster image" />

package/src/components/icon/LikeFilled.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgLikeFilled = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 23 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path opacity={0.87} d="M-1-1h24v24H-1z" />
-      <path
-        d="M12.12 1.06 6.58 6.6c-.37.37-.58.88-.58 1.41V18c0 1.1.9 2 2 2h9c.8 0 1.52-.48 1.84-1.21l3.26-7.61C22.94 9.2 21.49 7 19.34 7h-5.65l.95-4.58c.1-.5-.05-1.01-.41-1.37-.59-.58-1.53-.58-2.11.01ZM2 20c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2s-2 .9-2 2v8c0 1.1.9 2 2 2Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgLikeFilled;

package/src/components/icon/LikeOutline.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgLikeOutline = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 22 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path opacity={0.87} d="M-1-1h24v24H-1z" />
-      <path
-        d="M20 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 0 6.59 6.59C6.22 6.95 6 7.45 6 8v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2Zm0 4-3 7H8V8l4.34-4.34L11.23 9H20v2ZM0 8h4v12H0V8Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgLikeOutline;