@popsure/dirty-swan 0.26.10 → 0.26.11

package/src/lib/components/input/index.stories.mdx

@@ -0,0 +1,62 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import Input from '.';
+
+<Meta title="JSX/Inputs/Input" />
+
+## Input
+
+The default input component is used to gather informations from the user.
+
+You are looking at the JSX definition of the Input component, if you want you can use the [css alternative](?path=/story/css-components-input--page)
+
+<Preview>
+  <>
+    <h1 className="p-h1">Without placeholder</h1>
+    <h4 className="p-h4 mt24">Empty</h4>
+    <Input className="wmx5 mt8" />
+    <h4 className="p-h4 mt24">Filled</h4>
+    <Input className="wmx5 mt8" value="Lorem ipsum" />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Input className="wmx5 mt8" value="Lorem ipsum" disabled={true} />
+    <h4 className="p-h4 mt24">Error</h4>
+    <Input
+      className="wmx5 mt8"
+      value="Lorem ipsum"
+      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    />
+    <h1 className="p-h1 mt32">With placeholder</h1>
+    <h4 className="p-h4 mt24">Empty</h4>
+    <Input className="wmx5 mt8" placeholder="Email" />
+    <h4 className="p-h4 mt24">Filled</h4>
+    <Input
+      className="wmx5 mt8"
+      value="jane.doe@feather-insurance.com"
+      placeholder="Email"
+    />
+    <h4 className="p-h4 mt24">Error</h4>
+    <Input
+      className="wmx5 mt8"
+      value="jane.doe@feather-insurance.com"
+      placeholder="Email"
+      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    />
+    <h1 className="p-h1 mt32">With prefix</h1>
+    <h4 className="p-h4 mt24">Empty</h4>
+    <Input className="wmx5 mt8" prefix="€" />
+    <h4 className="p-h4 mt24">Filled</h4>
+    <Input className="wmx5 mt8" value="100" prefix="€" />
+    <h4 className="p-h4 mt24">Empty with placeholder</h4>
+    <Input className="wmx5 mt8" placeholder="amount" prefix="€" />
+    <h4 className="p-h4 mt24">Filled with placeholder</h4>
+    <Input className="wmx5 mt8" placeholder="amount" value="100" prefix="€" />
+    <h4 className="p-h4 mt24">Error</h4>
+    <Input
+      className="wmx5 mt8"
+      placeholder="amount"
+      value="100"
+      prefix="€"
+      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac hendrerit justo. Nunc nibh ex, vulputate ac leo id, feugiat rhoncus purus."
+    />
+  </>
+</Preview>

package/src/lib/components/input/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import styles from './style.module.scss';
+
+// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.
+export type InputProps = {
+  error?: string;
+  prefix?: string;
+} & Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
+  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>>;
+
+export default React.forwardRef(
+  (
+    { className, placeholder, prefix, error, ...props }: InputProps,
+    ref?: React.ForwardedRef<HTMLInputElement>
+  ) => (
+    <div className={`${styles.container} ${className ?? ''}`}>
+      <input
+        data-testid="ds-input-input"
+        type="text"
+        ref={ref}
+        className={`${error ? 'p-input--error' : 'p-input'} ${
+          placeholder && placeholder?.length > 0
+            ? styles.input
+            : styles['input--no-placeholder']
+        } ${prefix ? styles['input--with-prefix'] : ''}`}
+        placeholder=" "
+        {...props}
+      />
+      {prefix && (
+        <span
+          className={`${styles.prefix} ${
+            error ? styles['prefix--with-error'] : ''
+          }`}
+        >
+          {prefix}
+        </span>
+      )}
+      <span
+        className={`${styles.placeholder} ${
+          prefix ? styles['placeholder--with-prefix'] : ''
+        } ${error ? styles['placeholder--with-error'] : ''}`}
+      >
+        {placeholder}
+      </span>
+      {error && (
+        <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>{error}</p>
+      )}
+    </div>
+  )
+);

package/src/lib/components/input/style.module.scss

@@ -0,0 +1,94 @@
+.container {
+  position: relative;
+}
+
+.prefix {
+  position: absolute;
+
+  left: 16px;
+  top: 50%;
+
+  transform: translateY(-50%);
+
+  color: var(--ds-grey-300);
+
+  transition: 0.3s top;
+
+  &--with-error {
+    color: var(--ds-red-500);
+  }
+}
+
+.input:not(:placeholder-shown) ~ .placeholder,
+.input:focus ~ .placeholder {
+  top: 7px;
+  left: 16px;
+
+  transform: translateY(0);
+
+  font-size: 10px;
+  line-height: 12px;
+
+  opacity: 1;
+}
+
+.input:focus ~ .placeholder {
+  color: var(--ds-primary-500);
+
+  &--with-error {
+    color: var(--ds-red-500);
+  }
+}
+
+.input:focus ~ .prefix {
+  color: var(--ds-primary-500);
+
+  &--with-error {
+    color: var(--ds-red-500);
+  }
+}
+
+.input:not(:placeholder-shown) ~ .prefix,
+.input:focus ~ .prefix {
+  top: 28px;
+}
+
+.input {
+  box-sizing: border-box;
+  padding-top: 9px;
+
+  font-family: inherit;
+
+  &--no-placeholder {
+    padding-top: 0px;
+  }
+
+  &--with-prefix {
+    padding-left: 32px !important;
+  }
+}
+
+.placeholder {
+  position: absolute;
+  pointer-events: none;
+
+  left: 16px;
+  top: 50%;
+
+  transform: translateY(-50%);
+  transition: 0.3s ease all;
+
+  color: var(--ds-grey-300);
+
+  &--with-prefix {
+    left: 32px;
+  }
+
+  &--with-error {
+    color: var(--ds-red-500);
+  }
+}
+
+.error {
+  margin-top: 4px;
+}

package/src/lib/components/modal/bottomModal/img/close.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="#26262E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M6 6L18 18" stroke="#26262E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/modal/bottomModal/index.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useCallback } from 'react';
+
+import { Props } from '..';
+import styles from './style.module.scss';
+
+import imageClose from './img/close.svg';
+import useOnClose from '../hooks/useOnClose';
+
+export default ({
+  title,
+  isOpen,
+  children,
+  onClose,
+  className = '',
+  dismissible = true,
+}: Props) => {
+  const [containerXOffset, setContainerXOffset] = useState(0);
+  const { isClosing, handleContainerClick, handleOnClose } = useOnClose(
+    onClose,
+    isOpen,
+    dismissible
+  );
+
+  const containerRef = useCallback((node: HTMLDivElement) => {
+    if (node !== null) {
+      setContainerXOffset(
+        Math.max(
+          window.innerHeight * 0.1,
+          window.innerHeight - node.getBoundingClientRect().height
+        )
+      );
+    }
+  }, []);
+
+  if (!isOpen) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={isClosing ? styles['overlay--close'] : styles.overlay}
+      onClick={handleOnClose}
+    >
+      <div
+        className={`${
+          isClosing ? styles['container--close'] : styles.container
+        } ${className}`}
+        ref={containerRef}
+        style={{ top: `${containerXOffset}px` }}
+        onClick={handleContainerClick}
+      >
+        <div className={styles.header}>
+          <div className={`p-h4 ${styles.title}`}>{title}</div>
+          {dismissible && (
+            <button
+              type="button"
+              className={styles.close}
+              onClick={handleOnClose}
+            >
+              <img src={imageClose} alt="Close" />
+            </button>
+          )}
+        </div>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/lib/components/modal/bottomModal/style.module.scss

@@ -0,0 +1,104 @@
+@keyframes fade-in {
+  0% {
+    background-color: rgba($color: #000000, $alpha: 0);
+  }
+  100% {
+    background-color: rgba($color: #000000, $alpha: 0.3);
+  }
+}
+
+@keyframes fade-out {
+  from {
+    background-color: rgba($color: #000000, $alpha: 0.3);
+  }
+  to {
+    background-color: rgba($color: #000000, $alpha: 0);
+  }
+}
+
+@keyframes appear-in {
+  0% {
+    transform: translateY(100%);
+  }
+  10% {
+  }
+  80% {
+    transform: translateY(-2%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes disappear-out {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+.close {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.overlay {
+  position: fixed;
+
+  z-index: 100;
+
+  overflow: auto;
+
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  animation: fade-in 0.3s both;
+
+  &--close {
+    @extend .overlay;
+    animation-delay: 0.1s;
+    animation: fade-out 0.3s both;
+  }
+}
+
+.container {
+  position: relative;
+
+  background-color: white;
+
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+
+  width: 100%;
+
+  animation-name: appear-in;
+  animation-duration: 0.4s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+
+  top: 0;
+
+  &--close {
+    @extend .container;
+    animation-name: disappear-out;
+    animation-duration: 0.4s;
+    animation-delay: 0s;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+}
+
+.header {
+  height: 60px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 0 16px;
+}

package/src/lib/components/modal/bottomOrRegularModal/index.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Props, RegularModal } from '..';
+import BottomModal from '../bottomModal';
+
+import styles from './style.module.scss';
+
+export default ({ isOpen, ...props }: Props) => {
+  const mobileRef = useRef<HTMLDivElement>(null);
+  const [visibleSize, setVisibleSize] = useState<'desktop' | 'mobile'>(
+    'desktop'
+  );
+
+  const handleResize = () => {
+    setVisibleSize(
+      mobileRef.current !== null &&
+        window.getComputedStyle(mobileRef.current).display !== 'none'
+        ? 'mobile'
+        : 'desktop'
+    );
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      <div className={styles.mobile} ref={mobileRef}>
+        {visibleSize === 'mobile' && <BottomModal {...props} isOpen={isOpen} />}
+      </div>
+      {visibleSize === 'desktop' && (
+        <div className={styles.desktop}>
+          <RegularModal {...props} isOpen={isOpen} />
+        </div>
+      )}
+    </>
+  );
+};

package/src/lib/components/modal/bottomOrRegularModal/style.module.scss

@@ -0,0 +1,16 @@
+@use "../../../scss/public/grid" as *;
+
+.mobile {
+  @include p-size-tablet {
+    display: none;
+  }
+  @include p-size-mobile {
+    display: block !important;
+  }
+}
+
+.desktop {
+  @include p-size-mobile {
+    display: none;
+  }
+}

package/src/lib/components/modal/hooks/useOnClose.ts

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+
+const useOnClose = (
+  onClose: () => void,
+  isOpen: boolean,
+  dismissable: boolean
+) => {
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleEscKey);
+
+    return () => {
+      window.removeEventListener('keydown', handleEscKey);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? 'hidden' : 'auto';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [isOpen]);
+
+  const handleOnClose = () => {
+    if (!dismissable) return null;
+
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+      setIsClosing(false);
+    }, 300);
+  };
+
+  const handleEscKey = (e: KeyboardEvent) => {
+    if (e.code !== 'Escape') return;
+
+    handleOnClose();
+  };
+
+  const handleContainerClick = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    e.stopPropagation();
+  };
+
+  return { isClosing, handleContainerClick, handleOnClose };
+};
+
+export default useOnClose;