@popsure/dirty-swan 0.27.7 → 0.27.8-alpha

package/dist/index.js

@@ -7583,7 +7583,7 @@ module.exports = isEqual;
 
 var isEqual = lodash_isequal.exports;
 
-var css_248z$p = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-400);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-400);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
+var css_248z$p = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-500);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
 var styles$o = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","error":"style-module_error__167Zc"};
 styleInject(css_248z$p);
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.7",
+  "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/input/style.module.scss

@@ -10,7 +10,7 @@
 
   transform: translateY(-50%);
 
-  color: var(--ds-grey-400);
+  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-400);
+  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;
+}