@popsure/dirty-swan 0.32.0 → 0.33.0

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

@@ -0,0 +1,214 @@
+
+import { useState } from 'react';
+import { Checkbox, CheckboxProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Inputs/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    options: {
+      description: 'Object that contains the possible options for rendering in the input.',
+      defaultValue: {
+        CAT:{
+          title: 'Cat',
+          description: 'At least 1'
+        },
+        DOG:{
+          title: 'Dog',
+          description: 'At least 2'
+        },
+        NONE:{
+          title: 'None',
+          description: 'No pets'
+        }
+      }
+    },
+    value: {
+      description: 'Current checked values.',
+    },
+    onChange: {
+      description: 'Function called everytime a value changes.',
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+    wide: {
+      description: 'Property that defines if options should fill 100% of available horizontal space',
+      defaultValue: false
+    },
+    inlineLayout: {
+      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
+      defaultValue: false
+    },
+    className: {
+      description: 'Wrapper classNames for custom styling',
+      defaultValue: ''
+    },
+    optionClassName: {
+      description: 'Option classNames for custom styling',
+      defaultValue: ''
+    },
+    labelClassName: {
+      description: 'Label classNames for custom styling',
+      defaultValue: ''
+    },
+  }
+};
+
+export const CheckboxStory = ({ 
+  onChange,
+  options,
+  wide,
+  className,
+  optionClassName,
+  labelClassName,
+  inlineLayout,
+}: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[]) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      wide={wide}
+      options={options} 
+      onChange={handleOnChange}
+      value={checkedValues}
+      className={className}
+      labelClassName={labelClassName}
+      optionClassName={optionClassName}
+      inlineLayout={inlineLayout}
+    />
+  );
+}
+
+export const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT1: 'Cat',
+        DOG1: 'Dog',
+      }} 
+      className="p32 bg-primary-300 br24 bs-lg"
+    />
+  );
+}
+
+export const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT2: 'Cat',
+        DOG2: 'Dog',
+      }} 
+      optionClassName="mb32 p24 bg-green-100 br12 bs-lg"
+    />
+  );
+}
+
+export const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT3: 'Cat',
+        DOG3: 'Dog',
+      }} 
+      labelClassName="bg-grey-900 tc-white"
+    />
+  );
+}
+
+export const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT4: 'Cat',
+        DOG4: 'Dog',
+        FISHER: 'Fish',
+        RABBIT: 'Rabbit',
+        RAT: 'Rat',
+        ANOTHER: 'Other',
+      }} 
+      optionClassName="w30"
+      inlineLayout
+      wide
+    />
+  );
+}
+
+export const CheckboxWithCustomLabel = ({ onChange, wide, className, optionClassName, inlineLayout }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      options={{
+        BIGDOG: {
+          icon: () => <img src={images.bigDog} alt='' />,
+          title: 'Dog',
+        },
+        FISH:{
+          icon: () => <img src={images.brokenAquarium} alt='' />,
+          title: 'Fish',
+        },
+        OTHER:{
+          icon: () => <img src={images.brokenGlass} alt='' />,
+          title: 'Other',
+        }
+      }} 
+      onChange={handleOnChange}
+      value={checkedValues}
+      optionClassName="w30"
+      inlineLayout
+    />
+  );
+}
+
+CheckboxStory.storyName = 'Checkbox';
+
+export default story;

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

@@ -0,0 +1,110 @@
+import { render } from '../../../util/testUtils';
+
+import { Checkbox, CheckboxProps } from '.';
+
+const mockOnChange = jest.fn();
+
+const setup = (onChange: CheckboxProps<string>['onChange'], value?: string[]) => {
+  const utils = render(
+    <Checkbox
+      options={{
+        CAT: 'Cat',
+        DOG: 'Dog',
+        NONE: 'None',
+      }}
+      onChange={onChange}
+      value={value}
+    />
+  );
+
+  return utils;
+};
+
+describe('Checkbox component', () => {
+  it('Should render options', () => {
+    const { getByText } = setup(mockOnChange);
+
+    expect(getByText('Cat')).toBeInTheDocument();
+    expect(getByText('Dog')).toBeInTheDocument();
+    expect(getByText('None')).toBeInTheDocument();
+  });
+
+  it('Should call onchange on selecting an option', async () => {
+    const { getByTestId, user } = setup(mockOnChange);
+
+    await user.click(getByTestId('checkbox-DOG'));
+
+    expect(mockOnChange).toBeCalledWith(["DOG"]);
+  });
+
+  it('Should render checked items when value is passed', async () => {
+    const { getByTestId } = setup(mockOnChange, ['CAT']);
+
+    expect(getByTestId('checkbox-input-CAT')).toBeChecked();
+  });
+
+  it('Should call onchange with NONE and removing other items on selecting NONE option', async () => {
+    const { getByTestId, user } = setup(mockOnChange, ['CAT', 'DOG']);
+
+    await user.click(getByTestId('checkbox-NONE'));
+
+    expect(mockOnChange).toBeCalledWith(["NONE"]);
+  });
+
+  it('Should call onchange empty when removing NONE option', async () => {
+    const { getByTestId, user } = setup(mockOnChange, ['NONE']);
+
+    await user.click(getByTestId('checkbox-NONE'));
+
+    expect(mockOnChange).toBeCalledWith([]);
+  });
+
+  it('Should render custom description', () => {
+      const { getByText } = render(
+        <Checkbox
+          options={{
+            CAT: {
+              title: 'Cat',
+              description: 'Cat description'
+            },
+          }}
+          onChange={mockOnChange}
+        />
+      );
+
+    expect(getByText('Cat description')).toBeInTheDocument();
+  });
+
+  it('Should render custom icon', () => {
+      const { getByText } = render(
+        <Checkbox
+          options={{
+            CAT: {
+              title: 'Cat',
+              icon: () => 'ICON'
+            },
+          }}
+          onChange={mockOnChange}
+        />
+      );
+
+    expect(getByText('ICON')).toBeInTheDocument();
+  });
+
+  it('Should render custom icon with selected', () => {
+      const { getByText } = render(
+        <Checkbox
+          options={{
+            CAT: {
+              title: 'Cat',
+              icon: (selected) => selected ? 'SELECTED-ICON' : 'ICON'
+            },
+          }}
+          onChange={mockOnChange}
+          value={['CAT']}
+        />
+      );
+
+    expect(getByText('SELECTED-ICON')).toBeInTheDocument();
+  });
+});

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,69 @@
+import { Markdown, MarkdownProps } from '.';
+import example from './example.md';
+
+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}>
+    {example}
+  </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/dist/esm/App.d.ts

@@ -1,3 +0,0 @@
-import './lib/scss/index.scss';
-declare function App(): JSX.Element;
-export default App;