@popsure/dirty-swan 0.27.12 → 0.27.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +4 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +5247 -5375
- package/dist/index.js.map +1 -1
- package/dist/lib/components/button/index.d.ts +1 -1
- package/dist/lib/components/input/index.d.ts +1 -1
- package/dist/lib/index.d.ts +1 -4
- package/dist/lib/scss/private/components/_badge.scss +5 -0
- package/package.json +1 -1
- package/src/App.tsx +0 -8
- package/src/index.tsx +1 -7
- package/src/lib/components/cards/cardWithTopIcon/index.stories.mdx +8 -8
- package/src/lib/components/cards/cardWithTopIcon/index.tsx +1 -5
- package/src/lib/index.tsx +0 -5
- package/src/lib/scss/private/components/_badge.scss +5 -0
- package/src/lib/scss/private/components/badge.stories.mdx +6 -0
- package/dist/lib/components/downloadRing/icons/check-outside-circle.d.ts +0 -3
- package/dist/lib/components/downloadRing/icons/download-cloud.d.ts +0 -3
- package/dist/lib/components/downloadRing/index.d.ts +0 -8
- package/dist/lib/components/dropzone/images/error.d.ts +0 -3
- package/dist/lib/components/dropzone/images/file.d.ts +0 -3
- package/dist/lib/components/dropzone/images/upload-complete.d.ts +0 -3
- package/dist/lib/components/dropzone/images/upload.d.ts +0 -3
- package/dist/lib/components/dropzone/index.d.ts +0 -11
- package/dist/lib/models/downloadRing/index.d.ts +0 -1
- package/src/lib/components/downloadRing/icons/check-outside-circle.tsx +0 -26
- package/src/lib/components/downloadRing/icons/download-cloud.tsx +0 -18
- package/src/lib/components/downloadRing/icons/style.module.scss +0 -7
- package/src/lib/components/downloadRing/index.stories.mdx +0 -35
- package/src/lib/components/downloadRing/index.tsx +0 -79
- package/src/lib/components/downloadRing/style.module.scss +0 -66
- package/src/lib/components/dropzone/images/error.tsx +0 -18
- package/src/lib/components/dropzone/images/file.tsx +0 -26
- package/src/lib/components/dropzone/images/style.module.scss +0 -7
- package/src/lib/components/dropzone/images/upload-complete.tsx +0 -24
- package/src/lib/components/dropzone/images/upload.tsx +0 -18
- package/src/lib/components/dropzone/index.stories.mdx +0 -44
- package/src/lib/components/dropzone/index.tsx +0 -152
- package/src/lib/components/dropzone/style.module.scss +0 -90
- package/src/lib/models/downloadRing/index.ts +0 -6
|
@@ -9,5 +9,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<{
|
|
|
9
9
|
buttonType?: ButtonType | undefined;
|
|
10
10
|
leftIcon?: Icon | undefined;
|
|
11
11
|
loading?: boolean | undefined;
|
|
12
|
-
} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "hidden" | "title" | "className" | "form" | "slot" | "style" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "
|
|
12
|
+
} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "hidden" | "title" | "className" | "form" | "slot" | "style" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "loading" | "buttonTitle" | "buttonType"> & React.RefAttributes<HTMLButtonElement>>;
|
|
13
13
|
export default _default;
|
|
@@ -6,5 +6,5 @@ export declare type InputProps = {
|
|
|
6
6
|
declare const _default: React.ForwardRefExoticComponent<Pick<{
|
|
7
7
|
error?: string | undefined;
|
|
8
8
|
prefix?: string | undefined;
|
|
9
|
-
} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint"> & Partial<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint">>, "error" | "hidden" | "title" | "children" | "className" | "form" | "slot" | "style" | "pattern" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "
|
|
9
|
+
} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint"> & Partial<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint">>, "error" | "hidden" | "title" | "children" | "className" | "form" | "slot" | "style" | "pattern" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "enterKeyHint" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "type" | "width"> & React.RefAttributes<HTMLInputElement>>;
|
|
10
10
|
export default _default;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import DateSelector from './components/dateSelector';
|
|
2
|
-
import Dropzone from './components/dropzone';
|
|
3
2
|
import SignaturePad from './components/signaturePad';
|
|
4
3
|
import AutocompleteAddress from './components/autocompleteAddress';
|
|
5
4
|
import Input from './components/input';
|
|
6
5
|
import MultiDropzone from './components/multiDropzone';
|
|
7
|
-
import DownloadRing from './components/downloadRing';
|
|
8
6
|
import DownloadButton from './components/downloadButton';
|
|
9
7
|
import IbanInput from './components/input/iban';
|
|
10
8
|
import CurrencyInput from './components/input/currency';
|
|
@@ -17,7 +15,6 @@ import AutoSuggestInput from './components/input/autoSuggestInput';
|
|
|
17
15
|
import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableInfoButton, TableHeader } from './components/comparisonTable';
|
|
18
16
|
import SegmentedControl from './components/segmentedControl';
|
|
19
17
|
import Markdown from './components/markdown';
|
|
20
|
-
export { DateSelector,
|
|
18
|
+
export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableInfoButton, SegmentedControl, Markdown, };
|
|
21
19
|
export type { TableHeader };
|
|
22
|
-
export type { DownloadRingDownloadStatus } from './models/downloadRing';
|
|
23
20
|
export type { DownloadStatus } from './models/download';
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -2,10 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import './lib/scss/index.scss';
|
|
3
3
|
|
|
4
4
|
import DateSelector from './lib/components/dateSelector';
|
|
5
|
-
import Dropzone from './lib/components/dropzone';
|
|
6
5
|
import SignaturePad from './lib/components/signaturePad';
|
|
7
6
|
import { CardWithLeftIcon } from './lib/components/cards';
|
|
8
|
-
import AutocompleteAddress from './lib/components/autocompleteAddress';
|
|
9
7
|
|
|
10
8
|
function App() {
|
|
11
9
|
return (
|
|
@@ -20,12 +18,6 @@ function App() {
|
|
|
20
18
|
malesuada laoreet nulla, non maximus ante porta sit amet. Aenean non
|
|
21
19
|
ipsum nec quam gravida convallis vitae sit amet nisi.
|
|
22
20
|
</div>
|
|
23
|
-
<Dropzone
|
|
24
|
-
uploading={true}
|
|
25
|
-
progress={32}
|
|
26
|
-
onSelectedFile={() => {}}
|
|
27
|
-
// uploadedFileUrl="http://foo.com/my-file.png"
|
|
28
|
-
/>
|
|
29
21
|
<div style={{ backgroundColor: 'white', padding: '24px' }}>
|
|
30
22
|
<SignaturePad
|
|
31
23
|
onChange={(v) => {
|
package/src/index.tsx
CHANGED
|
@@ -3,12 +3,10 @@ import App from './App';
|
|
|
3
3
|
|
|
4
4
|
export {
|
|
5
5
|
DateSelector,
|
|
6
|
-
Dropzone,
|
|
7
6
|
SignaturePad,
|
|
8
7
|
AutocompleteAddress,
|
|
9
8
|
Input,
|
|
10
9
|
MultiDropzone,
|
|
11
|
-
DownloadRing,
|
|
12
10
|
IbanInput,
|
|
13
11
|
CurrencyInput,
|
|
14
12
|
BottomModal,
|
|
@@ -33,10 +31,6 @@ export {
|
|
|
33
31
|
Markdown,
|
|
34
32
|
} from './lib';
|
|
35
33
|
|
|
36
|
-
export type {
|
|
37
|
-
TableHeader,
|
|
38
|
-
DownloadRingDownloadStatus,
|
|
39
|
-
DownloadStatus,
|
|
40
|
-
} from './lib';
|
|
34
|
+
export type { TableHeader, DownloadStatus } from './lib';
|
|
41
35
|
|
|
42
36
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
@@ -7,14 +7,14 @@ import { featherLogo } from '../icons';
|
|
|
7
7
|
|
|
8
8
|
# Card with top icon
|
|
9
9
|
|
|
10
|
-
| attribute | unit
|
|
11
|
-
| ---------- |
|
|
12
|
-
| title | string
|
|
13
|
-
| cardSize
|
|
14
|
-
| topIcon | [Icon](?path=/story/jsx-cards-intro--page#icon)
|
|
15
|
-
| rightIcon | [Icon](?path=/story/jsx-cards-intro--page#icon)
|
|
16
|
-
| state | [Card State](?path=/story/jsx-cards-intro--page#card-state)
|
|
17
|
-
| dropshadow | boolean
|
|
10
|
+
| attribute | unit | description | default value | required |
|
|
11
|
+
| ---------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | -------- |
|
|
12
|
+
| title | string | The title text that needs to be displayed | n/a | true |
|
|
13
|
+
| cardSize | [Card Size (s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card | medium | false |
|
|
14
|
+
| topIcon | [Icon](?path=/story/jsx-cards-intro--page#icon) | Icon displayed on the top of the card | n/a | true |
|
|
15
|
+
| rightIcon | [Icon](?path=/story/jsx-cards-intro--page#icon) | Icon displayed on the right of the title | n/a | false |
|
|
16
|
+
| state | [Card State](?path=/story/jsx-cards-intro--page#card-state) | State that describe the interation with the card | actionable | false |
|
|
17
|
+
| dropshadow | boolean | If the card should have a box-shadow or not | true | false |
|
|
18
18
|
|
|
19
19
|
<Preview>
|
|
20
20
|
<>
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
associatedClassForCardState,
|
|
3
|
-
CardProps,
|
|
4
|
-
headingForCardSize,
|
|
5
|
-
} from '..';
|
|
1
|
+
import { associatedClassForCardState, CardProps, headingForCardSize } from '..';
|
|
6
2
|
import { Icon, arrowRight, IconSize } from '../icons';
|
|
7
3
|
|
|
8
4
|
import styles from './style.module.scss';
|
package/src/lib/index.tsx
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import DateSelector from './components/dateSelector';
|
|
2
|
-
import Dropzone from './components/dropzone';
|
|
3
2
|
import SignaturePad from './components/signaturePad';
|
|
4
3
|
import AutocompleteAddress from './components/autocompleteAddress';
|
|
5
4
|
import Input from './components/input';
|
|
6
5
|
import MultiDropzone from './components/multiDropzone';
|
|
7
|
-
import DownloadRing from './components/downloadRing';
|
|
8
6
|
import DownloadButton from './components/downloadButton';
|
|
9
7
|
import IbanInput from './components/input/iban';
|
|
10
8
|
import CurrencyInput from './components/input/currency';
|
|
@@ -37,12 +35,10 @@ import Markdown from './components/markdown';
|
|
|
37
35
|
|
|
38
36
|
export {
|
|
39
37
|
DateSelector,
|
|
40
|
-
Dropzone,
|
|
41
38
|
SignaturePad,
|
|
42
39
|
AutocompleteAddress,
|
|
43
40
|
Input,
|
|
44
41
|
MultiDropzone,
|
|
45
|
-
DownloadRing,
|
|
46
42
|
DownloadButton,
|
|
47
43
|
IbanInput,
|
|
48
44
|
BottomModal,
|
|
@@ -69,5 +65,4 @@ export {
|
|
|
69
65
|
|
|
70
66
|
export type { TableHeader };
|
|
71
67
|
|
|
72
|
-
export type { DownloadRingDownloadStatus } from './models/downloadRing';
|
|
73
68
|
export type { DownloadStatus } from './models/download';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare type Status = 'INITIAL' | 'GENERATING' | 'DOWNLOADING' | 'COMPLETED' | 'FAILED';
|
|
3
|
-
declare const _default: ({ progress, status, handleClick, }: {
|
|
4
|
-
progress: number;
|
|
5
|
-
status: Status;
|
|
6
|
-
handleClick: () => void;
|
|
7
|
-
}) => JSX.Element;
|
|
8
|
-
export default _default;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare function truncateStringTail(aString: string, length: number): string;
|
|
3
|
-
declare const _default: ({ className, uploading, progress, error, uploadedFileUrl, onSelectedFile, }: {
|
|
4
|
-
className?: string | undefined;
|
|
5
|
-
uploading: boolean;
|
|
6
|
-
progress?: number | undefined;
|
|
7
|
-
error?: string | undefined;
|
|
8
|
-
uploadedFileUrl?: string | undefined;
|
|
9
|
-
onSelectedFile: (file: File) => void;
|
|
10
|
-
}) => JSX.Element;
|
|
11
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare type DownloadRingDownloadStatus = 'INITIAL' | 'GENERATING' | 'DOWNLOADING' | 'COMPLETED' | 'FAILED';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default () => (
|
|
4
|
-
<svg
|
|
5
|
-
width="63"
|
|
6
|
-
height="63"
|
|
7
|
-
viewBox="0 0 63 63"
|
|
8
|
-
fill="none"
|
|
9
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
-
>
|
|
11
|
-
<path
|
|
12
|
-
d="M57.75 29.0849V31.4999C57.7468 37.1605 55.9138 42.6684 52.5245 47.2022C49.1352 51.7359 44.3711 55.0526 38.9428 56.6576C33.5145 58.2626 27.7128 58.0699 22.403 56.1082C17.0932 54.1465 12.5597 50.5209 9.47877 45.7722C6.39782 41.0235 4.93445 35.4061 5.3069 29.7577C5.67935 24.1094 7.86767 18.7327 11.5455 14.4297C15.2233 10.1267 20.1936 7.12777 25.715 5.88027C31.2364 4.63278 37.0132 5.20352 42.1838 7.50739"
|
|
13
|
-
stroke="#90DF9B"
|
|
14
|
-
strokeWidth="5"
|
|
15
|
-
strokeLinecap="round"
|
|
16
|
-
strokeLinejoin="round"
|
|
17
|
-
/>
|
|
18
|
-
<path
|
|
19
|
-
d="M57.75 10.5L31.5 36.7762L23.625 28.9012"
|
|
20
|
-
stroke="#90DF9B"
|
|
21
|
-
strokeWidth="5"
|
|
22
|
-
strokeLinecap="round"
|
|
23
|
-
strokeLinejoin="round"
|
|
24
|
-
/>
|
|
25
|
-
</svg>
|
|
26
|
-
);
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import styles from './style.module.scss';
|
|
4
|
-
|
|
5
|
-
export default () => (
|
|
6
|
-
<svg
|
|
7
|
-
width="81"
|
|
8
|
-
height="60"
|
|
9
|
-
viewBox="0 0 81 60"
|
|
10
|
-
fill="none"
|
|
11
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
-
>
|
|
13
|
-
<path
|
|
14
|
-
className={styles['fill-primary-500']}
|
|
15
|
-
d="M40.5003 0.52832C34.2609 0.52832 27.9875 2.90796 23.2303 7.66515C19.6924 11.203 17.5477 15.5917 16.6382 20.1682C7.40644 21.9591 0.40332 30.0216 0.40332 39.7537C0.40332 50.7951 9.41033 59.8022 20.4518 59.8022H51.4253C51.7718 59.8071 52.1159 59.7431 52.4374 59.6139C52.759 59.4846 53.0517 59.2928 53.2985 59.0495C53.5452 58.8062 53.7412 58.5163 53.8749 58.1965C54.0087 57.8768 54.0776 57.5337 54.0776 57.1872C54.0776 56.8406 54.0087 56.4975 53.8749 56.1778C53.7412 55.8581 53.5452 55.5682 53.2985 55.3249C53.0517 55.0816 52.759 54.8897 52.4374 54.7605C52.1159 54.6313 51.7718 54.5673 51.4253 54.5722H20.4518C12.237 54.5722 5.63336 47.9686 5.63336 39.7537C5.63336 31.9959 11.5333 25.6757 19.0898 24.9897C19.6825 24.9319 20.2376 24.6737 20.6636 24.2577C21.0895 23.8416 21.3608 23.2926 21.4325 22.7015C21.9136 18.5566 23.7477 14.5297 26.9349 11.3425C30.688 7.58956 35.5857 5.75836 40.5003 5.75836C45.415 5.75836 50.2818 7.58568 54.0385 11.3425C58.3797 15.6837 60.2168 21.5819 59.541 27.2233C59.4947 27.5909 59.5271 27.964 59.6359 28.3181C59.7447 28.6722 59.9274 28.9991 60.1721 29.2773C60.4168 29.5554 60.7177 29.7784 61.055 29.9315C61.3923 30.0845 61.7583 30.1642 62.1287 30.1652H63.1639C69.9698 30.1652 75.3673 35.5627 75.3673 42.3687C75.3673 49.1747 69.9698 54.5722 63.1639 54.5722H50.9604C50.6139 54.5673 50.2699 54.6313 49.9483 54.7605C49.6267 54.8897 49.334 55.0816 49.0873 55.3249C48.8405 55.5682 48.6445 55.8581 48.5108 56.1778C48.377 56.4975 48.3081 56.8406 48.3081 57.1872C48.3081 57.5337 48.377 57.8768 48.5108 58.1965C48.6445 58.5163 48.8405 58.8062 49.0873 59.0495C49.334 59.2928 49.6267 59.4846 49.9483 59.6139C50.2699 59.7431 50.6139 59.8071 50.9604 59.8022H63.1639C72.7768 59.8022 80.5973 51.9816 80.5973 42.3687C80.5973 33.2962 73.6081 25.9105 64.7438 25.0986C64.7847 18.7886 62.5435 12.4655 57.7431 7.66515C52.99 2.91184 46.7398 0.52832 40.5003 0.52832ZM40.5003 48.1024C39.6285 48.1024 39.1674 47.8218 38.7298 47.4214L29.1414 38.7047C28.0342 37.6771 28.0536 36.0095 28.9778 35C29.9022 33.9906 31.6684 33.9175 32.6825 34.8366L37.8853 39.5763V22.0877C37.8853 20.6435 39.0559 19.4727 40.5003 19.4727C41.9449 19.4727 43.1153 20.6435 43.1153 22.0877V39.5763L48.3182 34.8366C49.3324 33.9175 51.0451 34.0421 52.0228 35C53.053 36.0095 52.8643 37.7756 51.8593 38.7047L42.2709 47.4214C41.7528 47.8957 41.3722 48.1024 40.5003 48.1024Z"
|
|
16
|
-
/>
|
|
17
|
-
</svg>
|
|
18
|
-
);
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Meta, Preview } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
import DownloadRing from '.';
|
|
4
|
-
|
|
5
|
-
<Meta title="JSX/DownloadRing" component={DownloadRing} />
|
|
6
|
-
|
|
7
|
-
# DownloadRing
|
|
8
|
-
|
|
9
|
-
DownloadRing component displays progress and status of downloading files.
|
|
10
|
-
|
|
11
|
-
## Examples
|
|
12
|
-
|
|
13
|
-
### Idle state
|
|
14
|
-
|
|
15
|
-
<Preview>
|
|
16
|
-
<DownloadRing progress={0} status="INITIAL" handleClick={() => {}} />
|
|
17
|
-
</Preview>
|
|
18
|
-
|
|
19
|
-
### Downloading state
|
|
20
|
-
|
|
21
|
-
<Preview>
|
|
22
|
-
<DownloadRing progress={74} status="DOWNLOADING" handleClick={() => {}} />
|
|
23
|
-
</Preview>
|
|
24
|
-
|
|
25
|
-
### Download complete state
|
|
26
|
-
|
|
27
|
-
<Preview>
|
|
28
|
-
<DownloadRing progress={100} status="COMPLETED" handleClick={() => {}} />
|
|
29
|
-
</Preview>
|
|
30
|
-
|
|
31
|
-
### Error state
|
|
32
|
-
|
|
33
|
-
<Preview>
|
|
34
|
-
<DownloadRing progress={100} status="FAILED" handleClick={() => {}} />
|
|
35
|
-
</Preview>
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
|
-
|
|
4
|
-
import CheckOutsideCircleIcon from './icons/check-outside-circle';
|
|
5
|
-
import DownloadCloudIcon from './icons/download-cloud';
|
|
6
|
-
|
|
7
|
-
import styles from './style.module.scss';
|
|
8
|
-
|
|
9
|
-
const RADIUS = 140;
|
|
10
|
-
const STROKE = 4;
|
|
11
|
-
|
|
12
|
-
type Status = 'INITIAL' | 'GENERATING' | 'DOWNLOADING' | 'COMPLETED' | 'FAILED';
|
|
13
|
-
|
|
14
|
-
const mappingStatus: { [k in Status]: string } = {
|
|
15
|
-
INITIAL: 'Click to download documents',
|
|
16
|
-
GENERATING: 'Generating documents...',
|
|
17
|
-
DOWNLOADING: 'Downloading documents...',
|
|
18
|
-
COMPLETED: 'Done!',
|
|
19
|
-
FAILED: 'Download failed. Click again to retry.',
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export default ({
|
|
23
|
-
progress,
|
|
24
|
-
status,
|
|
25
|
-
handleClick,
|
|
26
|
-
}: {
|
|
27
|
-
progress: number;
|
|
28
|
-
status: Status;
|
|
29
|
-
handleClick: () => void;
|
|
30
|
-
}) => {
|
|
31
|
-
const normalizedRadius = RADIUS - STROKE * 2;
|
|
32
|
-
const circumference = normalizedRadius * 2 * Math.PI;
|
|
33
|
-
const strokeDashoffset = circumference - (progress / 100) * circumference;
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<div className={`w100 ${styles.container}`}>
|
|
37
|
-
<button
|
|
38
|
-
className={styles.button}
|
|
39
|
-
type="button"
|
|
40
|
-
onClick={handleClick}
|
|
41
|
-
data-cy="download-documents-button"
|
|
42
|
-
>
|
|
43
|
-
<svg height={RADIUS * 2} width={RADIUS * 2}>
|
|
44
|
-
<circle
|
|
45
|
-
className={classnames(`${styles['inner-circle']}`, {
|
|
46
|
-
[styles['inner-circle-hover']]: progress === 0,
|
|
47
|
-
})}
|
|
48
|
-
strokeWidth={STROKE}
|
|
49
|
-
strokeDasharray={circumference + ' ' + circumference}
|
|
50
|
-
r={normalizedRadius}
|
|
51
|
-
cx={RADIUS}
|
|
52
|
-
cy={RADIUS}
|
|
53
|
-
/>
|
|
54
|
-
<circle
|
|
55
|
-
className={
|
|
56
|
-
status === 'COMPLETED'
|
|
57
|
-
? styles['overlay-circle-completed']
|
|
58
|
-
: styles['overlay-circle']
|
|
59
|
-
}
|
|
60
|
-
strokeWidth={STROKE}
|
|
61
|
-
strokeDasharray={circumference + ' ' + circumference}
|
|
62
|
-
style={{ strokeDashoffset }}
|
|
63
|
-
r={normalizedRadius}
|
|
64
|
-
cx={RADIUS}
|
|
65
|
-
cy={RADIUS}
|
|
66
|
-
/>
|
|
67
|
-
</svg>
|
|
68
|
-
<div className={`ws2 ${styles['text-container']}`}>
|
|
69
|
-
{status === 'COMPLETED' ? (
|
|
70
|
-
<CheckOutsideCircleIcon />
|
|
71
|
-
) : (
|
|
72
|
-
<DownloadCloudIcon />
|
|
73
|
-
)}
|
|
74
|
-
<div className="p-p mt8">{mappingStatus[status]}</div>
|
|
75
|
-
</div>
|
|
76
|
-
</button>
|
|
77
|
-
</div>
|
|
78
|
-
);
|
|
79
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
@use "../../scss/public/grid" as *;
|
|
2
|
-
|
|
3
|
-
.container {
|
|
4
|
-
position: relative;
|
|
5
|
-
display: flex;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.button {
|
|
10
|
-
background-color: transparent;
|
|
11
|
-
border: none;
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.button:hover {
|
|
16
|
-
.inner-circle-hover {
|
|
17
|
-
animation: borderBlink 1.3s ease-in-out infinite;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.button:focus {
|
|
22
|
-
outline: none;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
circle {
|
|
26
|
-
transition: stroke-dashoffset 0.35s;
|
|
27
|
-
transform: rotate(-90deg);
|
|
28
|
-
transform-origin: 50% 50%;
|
|
29
|
-
|
|
30
|
-
position: absolute;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.overlay-circle {
|
|
34
|
-
z-index: 1;
|
|
35
|
-
stroke: var(--ds-primary-500);
|
|
36
|
-
fill: transparent;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.overlay-circle-completed {
|
|
40
|
-
z-index: 1;
|
|
41
|
-
stroke: #90df9b;
|
|
42
|
-
fill: rgba(144, 223, 155, 0.1);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.inner-circle {
|
|
46
|
-
z-index: 0;
|
|
47
|
-
stroke: var(--ds-primary-100);
|
|
48
|
-
fill: transparent;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.text-container {
|
|
52
|
-
position: absolute;
|
|
53
|
-
top: 50%;
|
|
54
|
-
left: 50%;
|
|
55
|
-
transform: translate(-50%, -50%);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@keyframes borderBlink {
|
|
59
|
-
from,
|
|
60
|
-
to {
|
|
61
|
-
stroke: var(--ds-primary-100);
|
|
62
|
-
}
|
|
63
|
-
50% {
|
|
64
|
-
stroke: var(--ds-primary-500);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default () => (
|
|
4
|
-
<svg
|
|
5
|
-
width="90"
|
|
6
|
-
height="66"
|
|
7
|
-
viewBox="0 0 90 66"
|
|
8
|
-
fill="none"
|
|
9
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
-
>
|
|
11
|
-
<path
|
|
12
|
-
fill-rule="evenodd"
|
|
13
|
-
clip-rule="evenodd"
|
|
14
|
-
d="M45 0C37.9976 0 30.9572 2.64966 25.6182 7.94665C21.6477 11.8859 19.2407 16.7726 18.2201 21.8685C7.85944 23.8626 0 32.8399 0 43.6762C0 55.9706 10.1084 65.9997 22.5 65.9997H56.656C56.6837 66.0001 56.7114 66.0001 56.7391 65.9997H57.2609C57.2886 66.0001 57.3163 66.0001 57.344 65.9997H70.4348C81.2231 65.9997 90 57.2917 90 46.5881C90 36.486 82.1561 28.2623 72.2079 27.3583C72.2539 20.3322 69.7386 13.2916 64.3512 7.94665C59.0169 2.65398 52.0024 0 45 0ZM57.2609 60.1762H56.7391C56.7114 60.1758 56.6838 60.1758 56.6561 60.1762H22.5C13.2807 60.1762 5.86957 52.8233 5.86957 43.6762C5.86957 35.0382 12.4909 28.0009 20.9715 27.237C21.6366 27.1727 22.2596 26.8852 22.7377 26.4219C23.2157 25.9587 23.5201 25.3474 23.6005 24.6892C24.1405 20.074 26.1989 15.5901 29.7758 12.0413C33.9878 7.86248 39.4844 5.8235 45 5.8235C50.5156 5.8235 55.9776 7.85816 60.1936 12.0413C65.0657 16.8751 67.1274 23.4426 66.3689 29.7241C66.317 30.1333 66.3533 30.5488 66.4754 30.9431C66.5975 31.3373 66.8026 31.7014 67.0772 32.0111C67.3518 32.3208 67.6895 32.5691 68.0681 32.7395C68.4466 32.91 68.8574 32.9987 69.2731 32.9998H70.4348C78.0729 32.9998 84.1304 39.0097 84.1304 46.5881C84.1304 54.1663 78.0729 60.1762 70.4348 60.1762H57.3439C57.3162 60.1758 57.2886 60.1758 57.2609 60.1762ZM32.7678 30.7678C31.7915 29.7915 31.7915 28.2085 32.7678 27.2322C33.7441 26.2559 35.327 26.2559 36.3033 27.2322L44.0355 34.9645L52.2322 26.7678C53.2085 25.7915 54.7915 25.7915 55.7678 26.7678C56.7441 27.7441 56.7441 29.327 55.7678 30.3033L47.5711 38.5L55.3952 46.3241C56.3715 47.3004 56.3715 48.8833 55.3952 49.8596C54.4189 50.836 52.836 50.836 51.8596 49.8596L44.0355 42.0355L36.6759 49.3952C35.6996 50.3715 34.1167 50.3715 33.1404 49.3952C32.164 48.4189 32.164 46.836 33.1404 45.8596L40.5 38.5L32.7678 30.7678Z"
|
|
15
|
-
fill="#E55566"
|
|
16
|
-
/>
|
|
17
|
-
</svg>
|
|
18
|
-
);
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import styles from './style.module.scss';
|
|
4
|
-
|
|
5
|
-
export default () => (
|
|
6
|
-
<svg
|
|
7
|
-
width="60"
|
|
8
|
-
height="72"
|
|
9
|
-
viewBox="0 0 60 72"
|
|
10
|
-
fill="none"
|
|
11
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
-
>
|
|
13
|
-
<path
|
|
14
|
-
className={styles['stroke-primary-500']}
|
|
15
|
-
d="M50.5975 69H8.94969C7.37173 69 5.8584 68.3679 4.74262 67.2426C3.62684 66.1174 3 64.5913 3 63V21L20.8491 3H50.5975C52.1754 3 53.6888 3.63214 54.8045 4.75736C55.9203 5.88258 56.5472 7.4087 56.5472 9V63C56.5472 64.5913 55.9203 66.1174 54.8045 67.2426C53.6888 68.3679 52.1754 69 50.5975 69Z"
|
|
16
|
-
strokeWidth="5"
|
|
17
|
-
strokeLinejoin="round"
|
|
18
|
-
/>
|
|
19
|
-
<path
|
|
20
|
-
className={styles['stroke-primary-500']}
|
|
21
|
-
d="M20.434 3V15.4528C20.434 17.1042 19.8217 18.6879 18.7319 19.8556C17.642 21.0233 16.1639 21.6792 14.6226 21.6792H3"
|
|
22
|
-
strokeWidth="5"
|
|
23
|
-
strokeLinejoin="round"
|
|
24
|
-
/>
|
|
25
|
-
</svg>
|
|
26
|
-
);
|