@popsure/dirty-swan 0.32.0 → 0.33.1

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

@@ -0,0 +1,129 @@
+import classNames from "classnames";
+import { ReactNode } from "react";
+
+export interface CheckboxWithDescription {
+  title: string;
+  description?: string;
+  icon?: (selected: boolean) => ReactNode;
+}
+
+export interface CheckboxProps<ValueType extends string> {
+  options: Record<ValueType, string | CheckboxWithDescription>;
+  value?: ValueType[];
+  onChange: (value: ValueType[]) => void;
+  wide?: boolean;
+  inlineLayout?: boolean;
+  className?: string;
+  labelClassName?: string;
+  optionClassName?: string
+}
+
+export const Checkbox = <ValueType extends string>({
+  options,
+  value = [],
+  onChange,
+  wide = false,
+  inlineLayout = false,
+  className = '',
+  labelClassName = '',
+  optionClassName = '',
+}: CheckboxProps<ValueType> & {  }) => {
+  const hasNoneValue = Object.keys(options).includes('NONE');
+
+  const handleOnChange = (newValue: ValueType) => {
+    if (value?.includes(newValue)) {
+      const filteredCheckboxValues = value.filter(
+        (selectedValue) => selectedValue !== newValue
+      );
+
+      onChange(filteredCheckboxValues);
+      return;
+    }
+
+    if (hasNoneValue && newValue === 'NONE') {
+      onChange([newValue]);
+      return;
+    }
+
+    if (hasNoneValue && newValue !== 'NONE') {
+      const newValues = value
+        ? [...value.filter((v) => v !== 'NONE'), newValue]
+        : [newValue];
+      onChange(newValues);
+      return;
+    }
+
+    const newValues = value
+      ? [...value, newValue]
+      : [newValue];
+    onChange(newValues);
+  };
+
+
+  const entries = Object.entries(options) as [
+    ValueType,
+    string | CheckboxWithDescription
+  ][];
+
+  return (
+    <div
+      className={classNames(className, 'd-flex gap8', {
+        ws10: wide,
+        ws6: !wide,
+        'fd-row': inlineLayout,
+        'f-wrap': inlineLayout,
+        'fd-column': !inlineLayout,
+      })}
+    >
+      {entries.map(([currentValue, label]) => {
+        const checked = value?.includes(currentValue);
+        const customIcon = (label as CheckboxWithDescription)?.icon;
+
+        return (
+          <div className={optionClassName} key={currentValue}>
+            <input
+              className={classNames(
+                "p-checkbox", {
+                  'p-checkbox--no-icon': customIcon
+                }
+              )}
+              id={currentValue}
+              type="checkbox"
+              value={currentValue}
+              onChange={() => handleOnChange(currentValue)}
+              checked={checked}
+              data-testid={`checkbox-input-${currentValue}`}
+            />
+
+            <label
+              htmlFor={currentValue}
+              className={classNames(
+                labelClassName,
+                'p-label p-label--bordered pr16',
+                {
+                  'jc-center': customIcon,
+                  'fd-column': customIcon
+                }
+              )}
+              data-cy={`checkbox-${currentValue}`}
+              data-testid={`checkbox-${currentValue}`}
+            >
+              {customIcon && (
+                <div className="mt8">{customIcon?.(checked)}</div>
+              )}
+
+              {typeof label === 'string' ? label : (
+                <div>
+                  <p className="p-p">{label.title}</p>
+                  <span className="d-block p-p p-p--small tc-grey-600">
+                    {label.description}
+                  </span>
+                </div>
+              )}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,131 @@
+import { Markdown, MarkdownProps } from '.';
+
+const story = {
+  title: 'JSX/Markdown',
+  component: Markdown,
+  argTypes: {
+    children: {
+      description: 'MD content to be rendered in the component.',
+    },
+    className: {
+      defaultValue: '',
+      description: 'This property allows to add custom styles to the component.',
+    },
+    customMDComponents: {
+      defaultValue: {},
+      description: 'An object that allows creating custom MD components by passing the key to wrap it in, and the logic to render, as a function that returns an HTMLElement.',
+      table: {
+        type: {
+            summary: 'Record<componentKey, (props: HTMLElmentAttributes) => HTMLElement>'
+        }
+      }
+    },
+    paragraphClassName: {
+      defaultValue: '',
+      description: 'This property allows to add custom styles to the paragraph (`<p>`) component rendered inside Markdown component.',
+    },
+    openLinksInNewTab: {
+      defaultValue: false,
+      description: 'Wether link components rendered inside Markdown should open in a new tab (`target="_blank"`).',
+    }
+  },
+  args: {
+    children: '## Title \n This is **our content**.'
+  },
+  parameters: {
+    componentSubtitle: (
+      <>
+        Display markdown text based on <a href="https://github.com/remarkjs/react-markdown" target='_blank' rel="noreferrer">react-markdown</a> with custom styling.
+      </>
+    ),
+  },
+};
+
+export const MarkdownStory = ({ children, className }: MarkdownProps) => (
+  <Markdown className={className}>
+    {children}
+  </Markdown>
+);
+
+MarkdownStory.storyName = "Markdown";
+
+export const AvailableMDComponents = ({ className }: MarkdownProps) => (
+  <Markdown className={className}>
+    {`# 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)
+`}
+  </Markdown>
+);
+
+export const AddingCustomComponents = ({ className }: MarkdownProps) => (
+  <Markdown customMDComponents={{
+    h6: (props: any) => (
+      <h6 className='tc-red-500'>{props.children}</h6>
+    )
+  }}>
+    ###### This is a custom H6 that will always be red
+  </Markdown>
+);
+
+export default story;

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

@@ -1,5 +1,5 @@
 import { h } from 'hastscript/html.js';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkDirective from 'remark-directive';
 import visit from 'unist-util-visit';
@@ -101,19 +101,21 @@ const Code = (props: any) => {
   );
 };
 
+export interface MarkdownProps {
+  children: string;
+  customMDComponents?: Record<string, FunctionComponent<any>>;
+  className?: string;
+  openLinksInNewTab?: boolean;
+  paragraphClassName?: string;
+}
+
 const Markdown = ({
   children,
   customMDComponents,
   className = '',
   openLinksInNewTab = false,
   paragraphClassName = '',
-}: {
-  children: string;
-  customMDComponents?: Record<string, FunctionComponent<any>>;
-  className?: string;
-  openLinksInNewTab?: boolean;
-  paragraphClassName?: string;
-}) => (
+}: MarkdownProps) => (
   <ReactMarkdown
     children={children}
     className={className}
@@ -136,4 +138,4 @@ const Markdown = ({
   />
 );
 
-export default Markdown;
+export { Markdown};

package/src/lib/components/signaturePad/index.stories.tsx

@@ -0,0 +1,35 @@
+import { SignaturePad, SignaturePadProps } from '.';
+
+const story = {
+  title: 'JSX/SignaturePad',
+  component: SignaturePad,
+  argTypes: {
+    onChange: {
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle: 'Signature pad are user interface elements which allow user sign any legal document.',
+  },
+};
+
+export const SignaturePadStory = ({
+  onChange,
+}: SignaturePadProps) => {
+  const handleOnChange = (newIndex: string) => {
+    onChange?.(newIndex);
+  };
+
+  return (
+    <SignaturePad
+      onChange={handleOnChange}
+    />
+  );
+};
+
+SignaturePadStory.storyName = "SignaturePad";
+
+export default story;

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

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 
-import SignaturePad from 'signature_pad';
+import Signature from 'signature_pad';
 
 import styles from './style.module.scss';
 
 import sign from './img/sign.svg';
 import reset from './img/reset.svg';
 
-interface Props {
+export interface SignaturePadProps {
   onChange: (base64signature: string) => void;
 }
 
@@ -15,12 +15,12 @@ interface State {
   hasContent: boolean;
 }
 
-class Signature extends Component<Props, State> {
+class SignaturePad extends Component<SignaturePadProps, State> {
   private canvasRef: React.RefObject<HTMLCanvasElement>;
   private canvas: any;
   private signaturePad: any;
 
-  constructor(props: Props) {
+  constructor(props: SignaturePadProps) {
     super(props);
     this.state = {
       hasContent: false,
@@ -33,7 +33,7 @@ class Signature extends Component<Props, State> {
 
   public componentDidMount() {
     this.canvas = this.canvasRef.current;
-    this.signaturePad = new SignaturePad(this.canvas, {
+    this.signaturePad = new Signature(this.canvas, {
       onEnd: this.notifyOnChange,
     });
     this.resizeCanvas();
@@ -93,4 +93,4 @@ class Signature extends Component<Props, State> {
   }
 }
 
-export default Signature;
+export { SignaturePad };

package/src/lib/index.tsx

@@ -1,5 +1,5 @@
 import DateSelector from './components/dateSelector';
-import SignaturePad from './components/signaturePad';
+import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
 import MultiDropzone, { 
@@ -8,9 +8,10 @@ import MultiDropzone, {
   UploadedFile,
   UploadStatus
 } from './components/multiDropzone';
-import DownloadButton from './components/downloadButton';
+import { DownloadButton } from './components/downloadButton';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';
+import { Checkbox } from './components/input/checkbox';
 import {
   BottomModal,
   RegularModal,
@@ -37,7 +38,7 @@ import {
   TableHeader,
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import Markdown from './components/markdown';
+import { Markdown } from './components/markdown';
 import { images } from './util/images';
 
 export {
@@ -69,6 +70,7 @@ export {
   TableInfoButton,
   SegmentedControl,
   Markdown,
+  Checkbox,
   images,
 };
 

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

@@ -145,6 +145,10 @@
   }
 }
 
+.p-checkbox--no-icon + label::before {
+  display: none!important;
+}
+
 .p-label {
   cursor: pointer;
 

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

@@ -1,59 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import DownloadButton from '.';
-
-<Meta title="JSX/DownloadButton" component={DownloadButton} />
-
-# DownloadButton
-
-DownloadButton component displays progress and status of downloading files.
-
-## Examples
-
-### Idle state
-
-<Preview>
-  <DownloadButton downloadStatus="INITIAL" onDownload={() => {}} />
-</Preview>
-
-### Generating state
-
-<Preview>
-  <DownloadButton downloadStatus="GENERATING" onDownload={() => {}} />
-</Preview>
-
-### Download complete state
-
-<Preview>
-  <DownloadButton downloadStatus="COMPLETED" onDownload={() => {}} />
-</Preview>
-
-### Error state
-
-<Preview>
-  <DownloadButton downloadStatus="FAILED" onDownload={() => {}} />
-</Preview>
-
-### Custom Error state
-
-<Preview>
-  <DownloadButton
-    customFail={
-      <>
-        An error occured while generating your documents. Please try again or{' '}
-        <a
-          className='tc-primary-500'
-          href={`mailto:help@yourcompany.com`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          contact us
-        </a>
-        .
-      </>
-    }
-    downloadStatus="FAILED"
-    onDownload={() => {}}
-  />
-</Preview>
-

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

@@ -1,78 +0,0 @@
-# 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

@@ -1,22 +0,0 @@
-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/signaturePad/index.stories.mdx

@@ -1,17 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import Signaturepad from '.';
-
-<Meta title="JSX/Signaturepad" component={Signaturepad} />
-
-# Signature pad
-
-Signature pad are user interface elements which allow user sign any legal document.
-
-## Examples
-
-### Default example
-
-<Preview>
-  <Signaturepad onChange={() => {}} />
-</Preview>