@popsure/dirty-swan 0.27.6 → 0.27.8

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/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.6",
+  "version": "0.27.8",
   "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/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 
 import styles from './style.module.scss';
 
@@ -11,7 +12,7 @@ export type InputProps = {
 
 export default React.forwardRef(
   (
-    { className, placeholder, prefix, error, ...props }: InputProps,
+    { className, placeholder, prefix, error, disabled, ...props }: InputProps,
     ref?: React.ForwardedRef<HTMLInputElement>
   ) => (
     <div className={`${styles.container} ${className ?? ''}`}>
@@ -19,27 +20,34 @@ export default React.forwardRef(
         data-testid="ds-input-input"
         type="text"
         ref={ref}
-        className={`${error ? 'p-input--error' : 'p-input'} ${
-          placeholder && placeholder?.length > 0
+        className={classnames(
+          error ? 'p-input--error' : 'p-input',
+          placeholder && placeholder.length > 0
             ? styles.input
-            : styles['input--no-placeholder']
-        } ${prefix ? styles['input--with-prefix'] : ''}`}
+            : styles['input--no-placeholder'],
+          { [styles['input--with-prefix']]: prefix }
+        )}
         placeholder=" "
+        disabled={disabled}
         {...props}
       />
       {prefix && (
         <span
-          className={`${styles.prefix} ${
-            error ? styles['prefix--with-error'] : ''
-          }`}
+          className={classnames(
+            styles.prefix,
+            { [styles['prefix--with-error']]: error },
+            { [styles['prefix--disabled']]: disabled }
+          )}
         >
           {prefix}
         </span>
       )}
       <span
-        className={`${styles.placeholder} ${
-          prefix ? styles['placeholder--with-prefix'] : ''
-        } ${error ? styles['placeholder--with-error'] : ''}`}
+        className={classnames(
+          styles.placeholder,
+          { [styles['placeholder--with-prefix']]: prefix },
+          { [styles['placeholder--with-error']]: error }
+        )}
       >
         {placeholder}
       </span>

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

@@ -10,13 +10,17 @@
 
   transform: translateY(-50%);
 
-  color: var(--ds-grey-300);
+  color: var(--ds-grey-500);
 
   transition: 0.3s top;
 
   &--with-error {
     color: var(--ds-red-500);
   }
+
+  &--disabled {
+    color: var(--ds-grey-600);
+  }
 }
 
 .input:not(:placeholder-shown) ~ .placeholder,
@@ -78,7 +82,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/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 {

package/src/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/src/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/src/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/src/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;