@popsure/dirty-swan 0.27.5 → 0.27.8-alpha

package/dist/lib/components/markdown/index.d.ts

@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from 'react';
+declare const Markdown: ({ children, customMDComponents, className, openLinksInNewTab, paragraphClassName, }: {
+    children: string;
+    customMDComponents?: Record<string, React.FunctionComponent<any>> | undefined;
+    className?: string | undefined;
+    openLinksInNewTab?: boolean | undefined;
+    paragraphClassName?: string | undefined;
+}) => JSX.Element;
+export default Markdown;

package/dist/lib/components/multiDropzone/index.d.ts

@@ -14,6 +14,7 @@ interface Props {
     uploadedFiles: UploadedFile[];
     uploading: boolean;
     onRemoveFile: (id: string) => void;
+    isCondensed?: boolean;
 }
-declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, }: Props) => JSX.Element;
+declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, isCondensed, }: Props) => JSX.Element;
 export default _default;

package/dist/lib/scss/private/base/style.module.scss

@@ -35,7 +35,7 @@
     & > *:nth-child(2) {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
-      background-color: colors.$ds-grey-300;
+      background-color: colors.$ds-grey-400;
       width: 100%;
     }
   }

package/dist/lib/scss/private/components/_badge.scss

@@ -26,7 +26,7 @@
 
   &--inactive {
     @extend .p-badge;
-    background-color: $ds-grey-300;
+    background-color: $ds-grey-400;
   }
 
   &--danger {

package/dist/lib/scss/private/components/_buttons.scss

@@ -171,7 +171,7 @@
       color: $ds-grey-500;
       background-color: transparent;
 
-      border: 1px dashed $ds-grey-300;
+      border: 1px dashed $ds-grey-400;
 
       &:hover {
         color: $ds-grey-600;
@@ -180,7 +180,7 @@
 
       &[disabled] {
         color: $ds-grey-500;
-        border-color: $ds-grey-300;
+        border-color: $ds-grey-400;
         opacity: 0.5;
       }
 

package/dist/lib/scss/private/components/_input.scss

@@ -14,7 +14,7 @@
   width: 100%;
 
   border-radius: 8px;
-  border: 1px solid $ds-grey-300;
+  border: 1px solid $ds-grey-400;
   background-color: white;
 
   color: $ds-grey-900;
@@ -27,7 +27,7 @@
 
   &:disabled {
     background-color: $ds-grey-300;
-    border-color: $ds-grey-500;
+    border: none;
   }
 
   &:focus {
@@ -81,7 +81,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-grey-300;
+      border: 1px solid $ds-grey-400;
       border-radius: 50%;
 
       background-color: white;
@@ -113,7 +113,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-grey-300;
+      border: 1px solid $ds-grey-400;
       border-radius: 4px;
 
       background-color: white;
@@ -163,7 +163,7 @@
     padding-left: 16px;
 
     border-radius: 8px;
-    border: 1px solid $ds-grey-300;
+    border: 1px solid $ds-grey-400;
     background-color: white;
 
     &:hover {
@@ -201,7 +201,7 @@ input:checked[type='checkbox'] + .p-label--bordered {
   height: 48px;
 
   border-radius: 8px;
-  border: 1px solid $ds-grey-300;
+  border: 1px solid $ds-grey-400;
   background-color: white;
 
   font-family: inherit;

package/dist/lib/scss/public/colors/default.scss

@@ -41,8 +41,9 @@ $ds-pink-900: #700024;
 
 $ds-grey-100: #fafaff;
 $ds-grey-200: #f5f5fa;
-$ds-grey-300: #d2d2d8;
-$ds-grey-500: #b4b4ba;
+$ds-grey-300: #ededf2;
+$ds-grey-400: #d2d2d8;
+$ds-grey-500: #848490;
 $ds-grey-600: #696970;
 $ds-grey-700: #4c4c53;
 $ds-grey-900: #26262e;
@@ -98,6 +99,7 @@ $colors: (
   'grey-100': $ds-grey-100,
   'grey-200': $ds-grey-200,
   'grey-300': $ds-grey-300,
+  'grey-400': $ds-grey-400,
   'grey-500': $ds-grey-500,
   'grey-600': $ds-grey-600,
   'grey-700': $ds-grey-700,

package/dist/lib/scss/third-party/_google_places.scss

@@ -47,7 +47,7 @@
 
 .pac-container {
   background-color: white;
-  border: 1px solid var(--ds-grey-300);
+  border: 1px solid var(--ds-grey-400);
   box-shadow: none;
   border-radius: 8px;
   margin-top: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.5",
+  "version": "0.27.8-alpha",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -23,12 +23,15 @@
     "@popsure/public-models": "^1.0.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.7",
+    "hastscript": "^7.0.2",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "react-autosuggest": "^10.1.0",
     "react-day-picker": "^7.4.10",
     "react-dropzone": "^11.3.2",
+    "react-markdown": "^8.0.3",
     "react-scroll-sync": "^0.9.0",
+    "remark-directive": "^2.0.1",
     "sass": "^1.35.1",
     "signature_pad": "^3.0.0-beta.3"
   },

package/src/lib/components/dateSelector/datepicker.scss

@@ -391,7 +391,7 @@
 }
 
 .DayPicker-Day--outside {
-  color: $ds-grey-300;
+  color: $ds-grey-400;
   cursor: pointer;
 
   &:hover {
@@ -400,7 +400,7 @@
 }
 
 .DayPicker-Day--disabled {
-  color: $ds-grey-300;
+  color: $ds-grey-400;
   background-color: transparent;
   pointer-events: none;
 }

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

@@ -34,6 +34,8 @@ You are looking at the JSX definition of the Input component, if you want you ca
       value="jane.doe@feather-insurance.com"
       placeholder="Email"
     />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Input className="wmx5 mt8" placeholder="Email" disabled />
     <h4 className="p-h4 mt24">Error</h4>
     <Input
       className="wmx5 mt8"
@@ -50,6 +52,8 @@ You are looking at the JSX definition of the Input component, if you want you ca
     <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">Disabled</h4>
+    <Input className="wmx5 mt8" placeholder="amount" disabled prefix="€" />
     <h4 className="p-h4 mt24">Error</h4>
     <Input
       className="wmx5 mt8"

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

@@ -10,7 +10,7 @@
 
   transform: translateY(-50%);
 
-  color: var(--ds-grey-300);
+  color: var(--ds-grey-500);
 
   transition: 0.3s top;
 
@@ -78,7 +78,7 @@
   transform: translateY(-50%);
   transition: 0.3s ease all;
 
-  color: var(--ds-grey-300);
+  color: var(--ds-grey-500);
 
   &--with-prefix {
     left: 32px;

package/src/lib/components/markdown/example.md

@@ -0,0 +1,78 @@
+# Headers
+
+The header options range from h1 to h4.
+
+```
+# H1
+## H2
+### H3
+#### H4
+```
+
+# H1 Lorem ipsum non sunt qui sunt
+
+## H2 Lorem ipsum non sunt qui sunt
+
+### H3 Lorem ipsum non sunt qui sunt
+
+#### H4 Lorem ipsum non sunt qui sunt
+
+# Emphasis
+
+```
+Emphasis or italics, use *asterisk* or _underscore_.
+Strong emphasis or bold, use **asterisks** or __underscores__.
+Combined emphasis, use **_asterisks and underscores_**.
+```
+
+Emphasis or italics, use _asterisk_ or _underscore_.
+
+Strong emphasis or bold, use **asterisks** or **underscores**.
+
+Combined emphasis, use **_asterisks and underscores_**.
+
+# Lists
+
+```
+1. First ordered list item
+2. Another item
+3. Actual numbers don't matter, just that it's a number
+4. And another item.
+
+* Unordered list can use asterisks
+- Or minuses
++ Or pluses
+```
+
+1. First ordered list item
+2. Another item
+3. Actual numbers don't matter, just that it's a number
+4. And another item.
+
+- Unordered list can use asterisks
+- Or minuses
+- Or pluses
+
+# Links
+
+For links markdown syntax should be used.
+
+```
+[This is an inline link](https://feather-insurance.com)
+```
+
+[This is an inline link](https://feather-insurance.com)
+
+# Custom Markdown tags
+
+When additional functionality needs to be added to the markdown component, custom tags can be used.
+
+```
+Tags in the form of :mytag[value]{attributes} will be converted to the corresponding
+custom HTML tags <mytag ...attributes>value<mytag>.
+
+Custom styling for these tags can be provided by passing the customMDComponents prop
+<Markdown customMDComponents={
+  mytag: ({ children }) => (<h1>{childrend}</h1>)
+}>
+```

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

@@ -0,0 +1,22 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import Markdown from '.';
+import example from './example.md';
+
+<Meta title="JSX/Markdown" />
+
+# Markdown
+
+Display markdown text based on [react-markdown](https://github.com/remarkjs/react-markdown) with custom styling.
+
+<Preview>
+  <Markdown>{example}</Markdown>
+</Preview>
+
+| attribute          | unit                                           | description                                      | default value | required |
+| ------------------ | ---------------------------------------------- | ------------------------------------------------ | ------------- | -------- |
+| children           | string                                         | Markdown source to be rendered                   | n/a           | true     |
+| customMDComponents | Record&ltstring, FunctionComponent&ltany&gt&gt | Styling functions for custom tags                | n/a           | false    |
+| className          | string                                         | Styles to be applied to the whole markdown block | ''            | false    |
+| openLinksInNewTab  | boolean                                        | Whether the links should open in a new tab       | false         | false    |
+| paragraphClassName | string                                         | Styles to be applied to paragraph tags           | ''            | false    |

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

@@ -0,0 +1,139 @@
+import { h } from 'hastscript/html.js';
+import React, { FunctionComponent } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkDirective from 'remark-directive';
+import visit from 'unist-util-visit';
+
+import styles from './styles.module.scss';
+
+// The plugin function 'directiveToHTMLTag' is used in conjunction with 'remarkDirective' to parse custom markdown tags.
+
+// It converts tags in the form of :mytag[value]{attributes} to the
+// corresponding custom HTML tags <mytag ...attributes>value<mytag> .
+// (NOTE: tag names are always converted to lowercase custom html tags)
+
+// These can then be overridden by supplying the ReactMarkdown component with
+// an entry in its 'components' property:
+// <ReactMarkdown components={
+//  mytag: ({ children }) => (<h1>{childrend}</h1>)
+// }>
+
+// Without those plugins, it's only possible to override the standard html tags as listed here:
+// https://github.com/remarkjs/react-markdown#appendix-b-components
+
+const directiveToHTMLTag = () => {
+  return (tree: any) => {
+    // Visit the given tree and transform 'text-', 'leaf-' or 'containerDirectives' (= custom tags) as parsed by
+    // the remarkDirective plugin
+    visit(
+      tree,
+      ['textDirective', 'leafDirective', 'containerDirective'],
+      (node: any) => {
+        // Grab a reference to the data of the custom tag node
+        const data = node.data || (node.data = {});
+
+        // Create a HyperText Abstract Syntax Tree (HAST) from the node
+        const hast = h(node.name, node.attributes);
+
+        // Modify the node data with the resulting HAST's data to transform the node into something
+        // that ReactMarkdown can understand (custom html tag) and later replace with a custom component
+        data.hName = hast.tagName;
+        data.hProperties = hast.properties;
+      }
+    );
+  };
+};
+
+const Link = (openLinksInNewTab: boolean) => (props: any) => {
+  return openLinksInNewTab ? (
+    <a href={props.href} className="p-a" target="_blank" rel="noreferrer">
+      {props.children}
+    </a>
+  ) : (
+    <a href={props.href} className="p-a">
+      {props.children}
+    </a>
+  );
+};
+
+const Paragraph = (className: string) => (props: any) => {
+  return <p className={className || 'p-p mt8'}>{props.children}</p>;
+};
+
+const Heading = (props: any) => {
+  const { level } = props;
+
+  switch (level) {
+    case 1:
+      return <h1 className="p-h1 p--serif mt32">{props.children}</h1>;
+    case 2:
+      return <h2 className="p-h2 mt24">{props.children}</h2>;
+    case 3:
+      return <h3 className="p-h3 mt16">{props.children}</h3>;
+    case 4:
+      return <h4 className="p-h4 mt8">{props.children}</h4>;
+    default:
+      return <p>{props.children}</p>;
+  }
+};
+
+const UList = (props: any) => {
+  return <ul className={`p-p ${styles.ulist} mt8`}>{props.children}</ul>;
+};
+
+const OList = (props: any) => {
+  return <ol className={`p-p ${styles.olist} mt8`}>{props.children}</ol>;
+};
+
+const Strong = (props: any) => {
+  return <strong className="fw-bold">{props.children}</strong>;
+};
+
+const Italic = (props: any) => {
+  return <em className="fs-italic">{props.children}</em>;
+};
+
+const Code = (props: any) => {
+  return (
+    <div className={`bg-grey-200 p8 p-p--small my8 br2 ${styles.code}`}>
+      {props.children}
+    </div>
+  );
+};
+
+const Markdown = ({
+  children,
+  customMDComponents,
+  className = '',
+  openLinksInNewTab = false,
+  paragraphClassName = '',
+}: {
+  children: string;
+  customMDComponents?: Record<string, FunctionComponent<any>>;
+  className?: string;
+  openLinksInNewTab?: boolean;
+  paragraphClassName?: string;
+}) => (
+  <ReactMarkdown
+    children={children}
+    className={className}
+    components={{
+      a: Link(openLinksInNewTab),
+      p: Paragraph(paragraphClassName),
+      h1: Heading,
+      h2: Heading,
+      h3: Heading,
+      h4: Heading,
+      h5: Heading,
+      ol: OList,
+      ul: UList,
+      strong: Strong,
+      em: Italic,
+      code: Code,
+      ...customMDComponents,
+    }}
+    remarkPlugins={[remarkDirective, directiveToHTMLTag]}
+  />
+);
+
+export default Markdown;

package/src/lib/components/markdown/styles.module.scss

@@ -0,0 +1,13 @@
+.ulist {
+  list-style-type: disc;
+  list-style-position: inside;
+}
+
+.olist {
+  list-style-type: decimal;
+  list-style-position: inside;
+}
+
+.code {
+  font-family: monospace;
+}

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -7,7 +7,7 @@
 
   padding: 8px 16px;
 
-  border: 1px solid $ds-grey-300;
+  border: 1px solid $ds-grey-400;
   border-radius: 8px;
   background-color: white;
 

package/src/lib/components/multiDropzone/icons/upload.svg

@@ -1,5 +1,5 @@
-<svg width="74" height="65" viewBox="0 0 74 65" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.7331 51.0225H16.9671C12.207 51.0225 2 46.6745 2 35.4347C2 23.341 12.207 19.2864 17.3221 19.2864C18.0198 13.4585 21.8677 2.64515 36.0438 1.896C49.6806 1.896 55.7671 14.2015 54.7655 23.3697C60.0996 23.0395 72 25.4458 72 37.4209C72 47.6065 61.3317 51.4782 55.9975 51.0225H47.5947" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M36.9999 62.9938V29.5552" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M28.6452 37.91L37 29.5552L45.3548 37.91" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.589 52.324H16.6368C12.2734 52.324 2.91699 48.3383 2.91699 38.0351C2.91699 26.9493 12.2734 23.2325 16.9623 23.2325C17.6018 17.8902 21.1291 7.97805 34.1238 7.29132C46.6242 7.29132 52.2035 18.5714 51.2854 26.9756C56.175 26.6729 67.0837 28.8787 67.0837 39.8558C67.0837 49.1926 57.3044 52.7417 52.4147 52.324H44.7121" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35 63.2981V32.646" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.3428 40.3045L35.0013 32.646L42.6599 40.3045" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -69,6 +69,27 @@ MultiDropzone component allows upload of multiple documents / files.
   />
 </Preview>
 
+### Condensed view
+
+<Preview>
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        type: 'pdf',
+        progress: '100',
+        name: 'test_file_name.pdf',
+        token: 'abc',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    isCondensed
+  />
+</Preview>
+
 ### Error state
 
 <Preview>

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import classnames from 'classnames';
 
@@ -44,6 +44,7 @@ interface Props {
   uploadedFiles: UploadedFile[];
   uploading: boolean;
   onRemoveFile: (id: string) => void;
+  isCondensed?: boolean;
 }
 
 export default ({
@@ -51,6 +52,7 @@ export default ({
   onFileSelect,
   uploading,
   onRemoveFile,
+  isCondensed = false,
 }: Props) => {
   const onDrop = useCallback(
     (acceptedFiles) => {
@@ -62,16 +64,23 @@ export default ({
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
   return (
-    <div className={`w100 ${styles.container}`}>
+    <div className={styles.container}>
       <div
-        className={classnames(`w100 ta-center ${styles['upload-container']}`, {
-          [styles['upload-container-disabled']]: uploading,
-        })}
+        className={classnames(
+          `w100 ta-center br8 c-pointer ${styles.dropzoneContainer}`,
+          {
+            [styles['dropzoneContainerDisabled']]: uploading,
+          }
+        )}
         {...getRootProps()}
       >
         <input {...getInputProps()} />
-        <img src={icons.uploadIcon} alt="" />
-        <div className="p-h4 mt8">
+        <img
+          className={isCondensed ? styles.img : ''}
+          src={icons.uploadIcon}
+          alt="purple cloud with an arrow"
+        />
+        <div className={`p-h4 mt8 ${isCondensed ? styles.textInline : ''}`}>
           {uploading
             ? 'Please wait while uploading file...'
             : 'Choose file or drag & drop'}
@@ -79,7 +88,7 @@ export default ({
         <div className="p-p--small tc-grey-500">Supports JPEG, PNG, PDF</div>
       </div>
       {uploadedFiles.length > 0 && (
-        <div className={`w100 mt16`}>
+        <div className="w100 mt16">
           {uploadedFiles.map((file) => {
             const uploadStatus = getUploadStatus(file.progress, file.error);
             return (

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

@@ -1,32 +1,37 @@
 @use "../../scss/public/grid" as *;
 
 .container {
-  background-color: white;
-  padding: 24px;
-  box-shadow: 0px 2px 3px rgba(38, 38, 46, 0.04);
-  border-radius: 8px;
-
-  @include p-size-mobile {
-    padding: 16px;
-  }
+  background-color: transparent;
 }
 
-.upload-container {
+.dropzoneContainer {
   border: 1px dashed var(--ds-primary-500);
   padding: 32px 0;
-  cursor: pointer;
-  border-radius: 8px;
+  background-color: white;
+
+  transition: all 0.6s ease-in-out;
+}
+
+.img {
+  vertical-align: middle;
+  margin-right: 8px;
+  height: 18px;
+}
+
+.textInline {
+  display: inline-flex;
 }
 
-.upload-container:focus {
+.dropzoneContainer:focus {
   outline: none;
 }
 
-.upload-container:hover {
+.dropzoneContainer:hover {
   background-color: var(--ds-primary-100);
   transition: 0.5s ease;
 }
 
-.upload-container-disabled {
+.dropzoneContainerDisabled {
   pointer-events: none;
+  opacity: 0.4
 }

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

@@ -19,7 +19,7 @@
   left: 72px;
   bottom: 32px;
 
-  background-color: var(--ds-grey-300);
+  background-color: var(--ds-grey-400);
 
   border-radius: 1px;
 }

package/src/lib/scss/private/base/style.module.scss

@@ -35,7 +35,7 @@
     & > *:nth-child(2) {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
-      background-color: colors.$ds-grey-300;
+      background-color: colors.$ds-grey-400;
       width: 100%;
     }
   }

package/src/lib/scss/private/components/_badge.scss

@@ -26,7 +26,7 @@
 
   &--inactive {
     @extend .p-badge;
-    background-color: $ds-grey-300;
+    background-color: $ds-grey-400;
   }
 
   &--danger {