@faststore/ui 2.0.10-alpha.0 → 2.0.14-alpha.0
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/CHANGELOG.md +18 -0
- package/dist/components/molecules/Table/Table.d.ts +1 -1
- package/dist/index.d.ts +0 -4
- package/dist/index.js +0 -2
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/atoms/Icon/styles.scss +9 -0
- package/src/components/atoms/Link/Link.stories.mdx +134 -0
- package/src/components/atoms/Link/styles.scss +94 -0
- package/src/components/atoms/Select/styles.scss +78 -0
- package/src/components/molecules/Alert/stories/Alert.stories.tsx +1 -1
- package/src/components/molecules/IconButton/IconButton.stories.mdx +1 -2
- package/src/components/molecules/SelectField/styles.scss +21 -0
- package/src/index.ts +0 -6
- package/src/styles/components.scss +4 -0
- package/dist/components/atoms/Link/Link.d.ts +0 -19
- package/dist/components/atoms/Link/Link.js +0 -13
- package/dist/components/atoms/Link/Link.js.map +0 -1
- package/dist/components/atoms/Link/index.d.ts +0 -2
- package/dist/components/atoms/Link/index.js +0 -2
- package/dist/components/atoms/Link/index.js.map +0 -1
- package/dist/components/atoms/Select/Select.d.ts +0 -10
- package/dist/components/atoms/Select/Select.js +0 -6
- package/dist/components/atoms/Select/Select.js.map +0 -1
- package/dist/components/atoms/Select/index.d.ts +0 -2
- package/dist/components/atoms/Select/index.js +0 -2
- package/dist/components/atoms/Select/index.js.map +0 -1
- package/src/components/atoms/Link/Link.tsx +0 -47
- package/src/components/atoms/Link/index.tsx +0 -2
- package/src/components/atoms/Link/stories/Link.mdx +0 -35
- package/src/components/atoms/Link/stories/Link.stories.tsx +0 -30
- package/src/components/atoms/Select/Select.tsx +0 -22
- package/src/components/atoms/Select/index.ts +0 -2
- package/src/components/atoms/Select/stories/Select.mdx +0 -40
- package/src/components/atoms/Select/stories/Select.stories.tsx +0 -63
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.14-alpha.0](https://github.com/vtex/faststore/compare/v2.0.13-alpha.0...v2.0.14-alpha.0) (2022-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Adds `Link` component ([#1543](https://github.com/vtex/faststore/issues/1543)) ([9c219eb](https://github.com/vtex/faststore/commit/9c219eba996fc6fec90edd1383a4abf8dbe0a7ef))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.13-alpha.0](https://github.com/vtex/faststore/compare/v2.0.12-alpha.0...v2.0.13-alpha.0) (2022-12-14)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* Adds `Select` and `SelectField` components ([#1547](https://github.com/vtex/faststore/issues/1547)) ([7c4beb0](https://github.com/vtex/faststore/commit/7c4beb085c893ad540e1a4440cc7b902fa36a75c))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [2.0.10-alpha.0](https://github.com/vtex/faststore/compare/v2.0.9-alpha.0...v2.0.10-alpha.0) (2022-12-12)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -7,5 +7,5 @@ export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTa
|
|
|
7
7
|
testId?: string;
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
}
|
|
10
|
-
declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "slot" | "style" | "summary" | "title" | "className" | "
|
|
10
|
+
declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "children" | "hidden" | "testId" | "slot" | "style" | "summary" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "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" | "width" | "cellPadding" | "cellSpacing"> & React.RefAttributes<HTMLTableElement>>;
|
|
11
11
|
export default Table;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
export * from '@faststore/components';
|
|
2
|
-
export { default as Link } from './components/atoms/Link';
|
|
3
|
-
export type { LinkProps } from './components/atoms/Link';
|
|
4
2
|
export { default as Popover } from './components/atoms/Popover';
|
|
5
3
|
export type { PopoverProps } from './components/atoms/Popover';
|
|
6
4
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
7
5
|
export type { TextAreaProps } from './components/atoms/TextArea';
|
|
8
|
-
export { default as Select } from './components/atoms/Select';
|
|
9
|
-
export type { SelectProps } from './components/atoms/Select';
|
|
10
6
|
export { default as Slider } from './components/atoms/Slider';
|
|
11
7
|
export type { SliderProps } from './components/atoms/Slider';
|
|
12
8
|
export { default as List } from './components/atoms/List';
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
export * from '@faststore/components';
|
|
2
2
|
// Atoms
|
|
3
|
-
export { default as Link } from './components/atoms/Link';
|
|
4
3
|
export { default as Popover } from './components/atoms/Popover';
|
|
5
4
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
6
|
-
export { default as Select } from './components/atoms/Select';
|
|
7
5
|
export { default as Slider } from './components/atoms/Slider';
|
|
8
6
|
export { default as List } from './components/atoms/List';
|
|
9
7
|
export { default as Skeleton } from './components/atoms/Skeleton';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.14-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@babel/core": "^7.19.6",
|
|
52
52
|
"@faststore/shared": "^2.0.3-alpha.0",
|
|
53
|
-
"@faststore/styles": "^2.0.
|
|
53
|
+
"@faststore/styles": "^2.0.14-alpha.0",
|
|
54
54
|
"@size-limit/preset-small-lib": "^7.0.8",
|
|
55
55
|
"@storybook/addon-a11y": "^6.5.13",
|
|
56
56
|
"@storybook/addon-actions": "^6.5.13",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"node": "16.18.0",
|
|
79
79
|
"yarn": "1.19.1"
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "a8f4ca0ddc690e24df31abee9e4a4bbdb2d1a03b"
|
|
82
82
|
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
import { Link } from '@faststore/components'
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Atoms/Link/Default"
|
|
7
|
+
component={Link}
|
|
8
|
+
argTypes={{
|
|
9
|
+
children: {
|
|
10
|
+
name: 'content',
|
|
11
|
+
},
|
|
12
|
+
variant: {
|
|
13
|
+
options: [
|
|
14
|
+
'default',
|
|
15
|
+
'display',
|
|
16
|
+
'footer',
|
|
17
|
+
'inline',
|
|
18
|
+
],
|
|
19
|
+
control: { type: 'select' },
|
|
20
|
+
},
|
|
21
|
+
size: {
|
|
22
|
+
options: [
|
|
23
|
+
'regular',
|
|
24
|
+
'small',
|
|
25
|
+
],
|
|
26
|
+
control: { type: 'select' },
|
|
27
|
+
defaultValue: 'regular',
|
|
28
|
+
},
|
|
29
|
+
inverse: {
|
|
30
|
+
type: {
|
|
31
|
+
name: 'boolean',
|
|
32
|
+
},
|
|
33
|
+
description: 'Should use inverse color',
|
|
34
|
+
defaultValue: false,
|
|
35
|
+
},
|
|
36
|
+
as: {
|
|
37
|
+
description: 'Html tag or Link component to be used as Polymorphic way',
|
|
38
|
+
as: 'a',
|
|
39
|
+
},
|
|
40
|
+
testId: {
|
|
41
|
+
table: {
|
|
42
|
+
disable: true,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
}}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
export const Template = ({ children, ...args }) => (
|
|
49
|
+
<Link {...args}>{children}</Link>
|
|
50
|
+
)
|
|
51
|
+
|
|
52
|
+
<header>
|
|
53
|
+
|
|
54
|
+
# Link
|
|
55
|
+
|
|
56
|
+
Link performs the same behavior of a regular anchor tag (`a`), but can be used as any HTML tag and component, including specific Frameworks link components.
|
|
57
|
+
|
|
58
|
+
</header>
|
|
59
|
+
|
|
60
|
+
## Overview
|
|
61
|
+
|
|
62
|
+
<Canvas>
|
|
63
|
+
<Story
|
|
64
|
+
name="overview-default"
|
|
65
|
+
args={{
|
|
66
|
+
children: 'Default',
|
|
67
|
+
variant: 'neutral',
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
{Template.bind({})}
|
|
71
|
+
</Story>
|
|
72
|
+
<Story
|
|
73
|
+
name="overview-display"
|
|
74
|
+
args={{
|
|
75
|
+
children: 'Display',
|
|
76
|
+
variant: 'display',
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
{Template.bind({})}
|
|
80
|
+
</Story>
|
|
81
|
+
<Story
|
|
82
|
+
name="overview-inline"
|
|
83
|
+
args={{
|
|
84
|
+
children: 'Inline',
|
|
85
|
+
variant: 'inline',
|
|
86
|
+
}}
|
|
87
|
+
>
|
|
88
|
+
{Template.bind({})}
|
|
89
|
+
</Story>
|
|
90
|
+
<Story
|
|
91
|
+
name="overview-small"
|
|
92
|
+
args={{
|
|
93
|
+
children: 'Small',
|
|
94
|
+
variant: 'display',
|
|
95
|
+
size: "small",
|
|
96
|
+
}}
|
|
97
|
+
>
|
|
98
|
+
{Template.bind({})}
|
|
99
|
+
</Story>
|
|
100
|
+
<Story
|
|
101
|
+
name="overview-inverse"
|
|
102
|
+
args={{
|
|
103
|
+
children: 'Inverse',
|
|
104
|
+
inverse: true,
|
|
105
|
+
}}
|
|
106
|
+
>
|
|
107
|
+
{Template.bind({})}
|
|
108
|
+
</Story>
|
|
109
|
+
</Canvas>
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Usage
|
|
114
|
+
|
|
115
|
+
```jsx
|
|
116
|
+
import Link from '@faststore/ui'
|
|
117
|
+
|
|
118
|
+
// Styles
|
|
119
|
+
import @faststore/ui/src/components/atoms/Link/styles.scss
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
<Canvas>
|
|
123
|
+
<Story
|
|
124
|
+
name="default"
|
|
125
|
+
args={{
|
|
126
|
+
children: 'Link',
|
|
127
|
+
variant: 'default',
|
|
128
|
+
}}
|
|
129
|
+
>
|
|
130
|
+
{Template.bind({})}
|
|
131
|
+
</Story>
|
|
132
|
+
</Canvas>
|
|
133
|
+
|
|
134
|
+
<ArgsTable story="default" />
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
[data-fs-link] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Link
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-link-min-width : auto;
|
|
8
|
+
--fs-link-min-height : var(--fs-link-min-width);
|
|
9
|
+
--fs-link-padding : var(--fs-spacing-2) var(--fs-spacing-0);
|
|
10
|
+
--fs-link-border-radius : var(--fs-border-radius);
|
|
11
|
+
|
|
12
|
+
--fs-link-text-line-height : 1.5;
|
|
13
|
+
--fs-link-text-color : var(--fs-color-link);
|
|
14
|
+
--fs-link-text-color-visited : var(--fs-color-link-visited);
|
|
15
|
+
--fs-link-text-decoration : none;
|
|
16
|
+
--fs-link-text-decoration-hover : underline;
|
|
17
|
+
|
|
18
|
+
--fs-link-transition-function : var(--fs-transition-function);
|
|
19
|
+
--fs-link-transition-property : var(--fs-transition-property);
|
|
20
|
+
--fs-link-transition-timing : var(--fs-transition-timing);
|
|
21
|
+
|
|
22
|
+
// Inverse
|
|
23
|
+
--fs-link-inverse-text-color : var(--fs-color-link-inverse);
|
|
24
|
+
--fs-link-inverse-text-color-visited : var(--fs-link-inverse-text-color);
|
|
25
|
+
|
|
26
|
+
// Display
|
|
27
|
+
--fs-link-display-text-line-height : var(--fs-link-text-line-height);
|
|
28
|
+
--fs-link-display-text-color : var(--fs-color-text-display);
|
|
29
|
+
--fs-link-display-text-color-visited : var(--fs-link-display-text-color);
|
|
30
|
+
|
|
31
|
+
// Inline
|
|
32
|
+
--fs-link-inline-padding : 0;
|
|
33
|
+
--fs-link-inline-text-decoration : underline;
|
|
34
|
+
--fs-link-inline-text-color : var(--fs-link-text-color);
|
|
35
|
+
|
|
36
|
+
// Small
|
|
37
|
+
--fs-link-small-text-size : var(--fs-text-size-1);
|
|
38
|
+
--fs-link-small-padding : var(--fs-spacing-1) var(--fs-spacing-0);
|
|
39
|
+
|
|
40
|
+
// --------------------------------------------------------
|
|
41
|
+
// Structural Styles
|
|
42
|
+
// --------------------------------------------------------
|
|
43
|
+
|
|
44
|
+
min-width: var(--fs-link-min-width);
|
|
45
|
+
min-height: var(--fs-link-min-height);
|
|
46
|
+
padding: var(--fs-link-padding);
|
|
47
|
+
text-decoration: var(--fs-link-text-decoration);
|
|
48
|
+
|
|
49
|
+
&:hover { text-decoration: var(--fs-link-text-decoration-hover); }
|
|
50
|
+
|
|
51
|
+
&:visited { color: var(--fs-link-text-color-visited); }
|
|
52
|
+
|
|
53
|
+
a {
|
|
54
|
+
border-radius: var(--fs-link-border-radius);
|
|
55
|
+
transition: var(--fs-link-transition-property) var(--fs-link-transition-timing) var(--fs-link-transition-function);
|
|
56
|
+
|
|
57
|
+
@include focus-ring-visible;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// --------------------------------------------------------
|
|
61
|
+
// Variants Styles
|
|
62
|
+
// --------------------------------------------------------
|
|
63
|
+
|
|
64
|
+
&[data-fs-link-variant="default"] {
|
|
65
|
+
line-height: var(--fs-link-text-line-height);
|
|
66
|
+
color: var(--fs-link-text-color);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&[data-fs-link-variant="display"] {
|
|
70
|
+
line-height: var(--fs-link-display-text-line-height);
|
|
71
|
+
color: var(--fs-link-display-text-color);
|
|
72
|
+
|
|
73
|
+
&:visited { color: var(--fs-link-display-text-color-visited); }
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&[data-fs-link-variant="inline"] {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
padding: var(--fs-link-inline-padding);
|
|
79
|
+
color: var(--fs-link-inline-text-color);
|
|
80
|
+
text-decoration: var(--fs-link-inline-text-decoration);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&[data-fs-link-size="small"] {
|
|
84
|
+
font-size: var(--fs-link-small-text-size);
|
|
85
|
+
|
|
86
|
+
@include media(">=notebook") { padding: var(--fs-link-small-padding); }
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&[data-fs-link-inverse="true"] {
|
|
90
|
+
color: var(--fs-link-inverse-text-color);
|
|
91
|
+
|
|
92
|
+
&:visited { color: var(--fs-link-inverse-text-color-visited); }
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
[data-fs-select] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Select
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-select-height : var(--fs-spacing-6);
|
|
8
|
+
--fs-select-min-height : var(--fs-control-tap-size);
|
|
9
|
+
--fs-select-padding : var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2);
|
|
10
|
+
|
|
11
|
+
--fs-select-text-color : var(--fs-color-link);
|
|
12
|
+
|
|
13
|
+
--fs-select-border-radius : var(--fs-border-radius);
|
|
14
|
+
|
|
15
|
+
--fs-select-bkg : transparent;
|
|
16
|
+
--fs-select-bkg-color-focus : var(--fs-color-primary-bkg-light);
|
|
17
|
+
--fs-select-bkg-color-hover : var(--fs-select-bkg-color-focus);
|
|
18
|
+
|
|
19
|
+
--fs-select-transition-timing : var(--fs-transition-timing);
|
|
20
|
+
--fs-select-transition-property : var(--fs-transition-property);
|
|
21
|
+
--fs-select-transition-function : var(--fs-transition-function);
|
|
22
|
+
|
|
23
|
+
// Icon
|
|
24
|
+
--fs-select-icon-position-right : var(--fs-spacing-1);
|
|
25
|
+
--fs-select-icon-width : var(--fs-spacing-3);
|
|
26
|
+
--fs-select-icon-height : var(--fs-select-icon-width);
|
|
27
|
+
--fs-select-icon-color : var(--fs-color-link);
|
|
28
|
+
|
|
29
|
+
// Disabled
|
|
30
|
+
--fs-select-disabled-text-color : var(--fs-color-disabled-text);
|
|
31
|
+
--fs-select-disabled-text-opacity : 1;
|
|
32
|
+
|
|
33
|
+
// --------------------------------------------------------
|
|
34
|
+
// Structural Styles
|
|
35
|
+
// --------------------------------------------------------
|
|
36
|
+
|
|
37
|
+
position: relative;
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
width: fit-content;
|
|
41
|
+
|
|
42
|
+
select {
|
|
43
|
+
padding: var(--fs-select-padding);
|
|
44
|
+
color: var(--fs-select-text-color);
|
|
45
|
+
background: var(--fs-select-bkg);
|
|
46
|
+
border: 0;
|
|
47
|
+
border-radius: var(--fs-select-border-radius);
|
|
48
|
+
box-shadow: 0;
|
|
49
|
+
transition: var(--fs-select-transition-property) var(--fs-select-transition-timing) var(--fs-select-transition-function);
|
|
50
|
+
appearance: none;
|
|
51
|
+
|
|
52
|
+
@include focus-ring-visible;
|
|
53
|
+
|
|
54
|
+
&:focus { background-color: var(--fs-select-bkg-color-focus); }
|
|
55
|
+
|
|
56
|
+
&:hover:not(:disabled) { background-color: var(--fs-select-bkg-color-hover); }
|
|
57
|
+
|
|
58
|
+
&:disabled {
|
|
59
|
+
color: var(--fs-select-disabled-text-color);
|
|
60
|
+
cursor: not-allowed;
|
|
61
|
+
opacity: var(--fs-select-disabled-text-opacity);
|
|
62
|
+
+ [data-fs-select-icon] { display: none; }
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@include media("<notebook") { min-height: var(--fs-select-min-height); }
|
|
66
|
+
|
|
67
|
+
@include media(">=notebook") { height: var(--fs-select-height); }
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
[data-fs-select-icon] {
|
|
71
|
+
position: absolute;
|
|
72
|
+
right: var(--fs-select-icon-position-right);
|
|
73
|
+
color: var(--fs-select-icon-color);
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
width: var(--fs-select-icon-width);
|
|
76
|
+
height: var(--fs-select-icon-height);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -3,7 +3,7 @@ import React from 'react'
|
|
|
3
3
|
|
|
4
4
|
import type { AlertProps } from '../Alert'
|
|
5
5
|
import Component from '../Alert'
|
|
6
|
-
import { ShoppingCart } from '@faststore/components
|
|
6
|
+
import { ShoppingCart } from '@faststore/components'
|
|
7
7
|
import mdx from './Alert.mdx'
|
|
8
8
|
import { Icon } from '../../../../'
|
|
9
9
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
|
|
2
2
|
|
|
3
|
-
import { IconButton } from '@faststore/components'
|
|
4
|
-
import { ShoppingCart } from '@faststore/components/src/assets'
|
|
3
|
+
import { IconButton, ShoppingCart } from '@faststore/components'
|
|
5
4
|
|
|
6
5
|
<Meta
|
|
7
6
|
title="Molecules/IconButton"
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
[data-fs-select-field] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Select Field
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Label
|
|
7
|
+
--fs-select-field-label-margin-right : var(--fs-spacing-1);
|
|
8
|
+
--fs-select-field-label-color : var(--fs-color-text-light);
|
|
9
|
+
|
|
10
|
+
// --------------------------------------------------------
|
|
11
|
+
// Structural Styles
|
|
12
|
+
// --------------------------------------------------------
|
|
13
|
+
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
|
|
17
|
+
[data-fs-select-field-label] {
|
|
18
|
+
margin-right: var(--fs-select-field-label-margin-right);
|
|
19
|
+
color: var(--fs-select-field-label-color);
|
|
20
|
+
}
|
|
21
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -1,18 +1,12 @@
|
|
|
1
1
|
export * from '@faststore/components'
|
|
2
2
|
|
|
3
3
|
// Atoms
|
|
4
|
-
export { default as Link } from './components/atoms/Link'
|
|
5
|
-
export type { LinkProps } from './components/atoms/Link'
|
|
6
|
-
|
|
7
4
|
export { default as Popover } from './components/atoms/Popover'
|
|
8
5
|
export type { PopoverProps } from './components/atoms/Popover'
|
|
9
6
|
|
|
10
7
|
export { default as TextArea } from './components/atoms/TextArea'
|
|
11
8
|
export type { TextAreaProps } from './components/atoms/TextArea'
|
|
12
9
|
|
|
13
|
-
export { default as Select } from './components/atoms/Select'
|
|
14
|
-
export type { SelectProps } from './components/atoms/Select'
|
|
15
|
-
|
|
16
10
|
export { default as Slider } from './components/atoms/Slider'
|
|
17
11
|
export type { SliderProps } from './components/atoms/Slider'
|
|
18
12
|
|
|
@@ -2,10 +2,13 @@
|
|
|
2
2
|
@import "../components/atoms/Badge/styles";
|
|
3
3
|
@import "../components/atoms/Button/styles";
|
|
4
4
|
@import "../components/atoms/Checkbox/styles";
|
|
5
|
+
@import "../components/atoms/Icon/styles";
|
|
6
|
+
@import "../components/atoms/Link/styles";
|
|
5
7
|
@import "../components/atoms/Input/styles";
|
|
6
8
|
@import "../components/atoms/Overlay/styles";
|
|
7
9
|
@import "../components/atoms/Price/styles";
|
|
8
10
|
@import "../components/atoms/Radio/styles";
|
|
11
|
+
@import "../components/atoms/Select/styles";
|
|
9
12
|
|
|
10
13
|
// Molecules
|
|
11
14
|
@import "../components/molecules/BuyButton/styles";
|
|
@@ -13,4 +16,5 @@
|
|
|
13
16
|
@import "../components/molecules/DiscountBadge/styles";
|
|
14
17
|
@import "../components/molecules/InputField/styles";
|
|
15
18
|
@import "../components/molecules/RadioField/styles";
|
|
19
|
+
@import "../components/molecules/SelectField/styles";
|
|
16
20
|
@import "../components/molecules/Tag/styles";
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ElementType, ReactElement } from 'react';
|
|
3
|
-
import type { PolymorphicComponentPropsWithRef } from '../../../typings';
|
|
4
|
-
interface Props {
|
|
5
|
-
/**
|
|
6
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
|
-
*/
|
|
8
|
-
testId?: string;
|
|
9
|
-
}
|
|
10
|
-
export declare type LinkProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, Props>;
|
|
11
|
-
declare type LinkComponent = <C extends ElementType = 'a'>(props: LinkProps<C>) => ReactElement | null;
|
|
12
|
-
declare const Link: LinkComponent;
|
|
13
|
-
/**
|
|
14
|
-
* This is only being exported to make it easier to use in Storybook.
|
|
15
|
-
* **DON'T** import this directly to use this component, use the default export
|
|
16
|
-
* instead.
|
|
17
|
-
*/
|
|
18
|
-
export declare const StorybookLink: React.FC<Props>;
|
|
19
|
-
export default Link;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const Link = forwardRef(function Link({ as, children, testId = 'store-link', ...otherProps }, ref) {
|
|
3
|
-
const Component = as ?? 'a';
|
|
4
|
-
return (React.createElement(Component, Object.assign({ ref: ref, "data-fs-link": true, "data-testid": testId }, otherProps), children));
|
|
5
|
-
});
|
|
6
|
-
/**
|
|
7
|
-
* This is only being exported to make it easier to use in Storybook.
|
|
8
|
-
* **DON'T** import this directly to use this component, use the default export
|
|
9
|
-
* instead.
|
|
10
|
-
*/
|
|
11
|
-
export const StorybookLink = Link;
|
|
12
|
-
export default Link;
|
|
13
|
-
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../src/components/atoms/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAwBzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,UAAU,EAAgB,EACpE,GAAuB;IAEvB,MAAM,SAAS,GAAG,EAAE,IAAI,GAAG,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,uCAA4B,MAAM,IAAM,UAAU,GAClE,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,IAAiB,CAAA;AAE9C,eAAe,IAAI,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { SelectHTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
}
|
|
9
|
-
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
10
|
-
export default Select;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const Select = forwardRef(function Select({ children, testId = 'store-select', ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("select", Object.assign({ ref: ref, "data-fs-select": true, "data-testid": testId }, otherProps), children));
|
|
4
|
-
});
|
|
5
|
-
export default Select;
|
|
6
|
-
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/atoms/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,QAAQ,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,UAAU,EAAE,EACpD,GAAG;IAEH,OAAO,CACL,8CAAQ,GAAG,EAAE,GAAG,yCAA8B,MAAM,IAAM,UAAU,GACjE,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react'
|
|
2
|
-
import type { FC, ElementType, ReactElement } from 'react'
|
|
3
|
-
|
|
4
|
-
import type {
|
|
5
|
-
PolymorphicRef,
|
|
6
|
-
PolymorphicComponentPropsWithRef,
|
|
7
|
-
} from '../../../typings'
|
|
8
|
-
|
|
9
|
-
interface Props {
|
|
10
|
-
/**
|
|
11
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
12
|
-
*/
|
|
13
|
-
testId?: string
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export type LinkProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
|
|
17
|
-
C,
|
|
18
|
-
Props
|
|
19
|
-
>
|
|
20
|
-
|
|
21
|
-
type LinkComponent = <C extends ElementType = 'a'>(
|
|
22
|
-
props: LinkProps<C>
|
|
23
|
-
) => ReactElement | null
|
|
24
|
-
|
|
25
|
-
const Link: LinkComponent = forwardRef(function Link<
|
|
26
|
-
C extends ElementType = 'a'
|
|
27
|
-
>(
|
|
28
|
-
{ as, children, testId = 'store-link', ...otherProps }: LinkProps<C>,
|
|
29
|
-
ref?: PolymorphicRef<C>
|
|
30
|
-
) {
|
|
31
|
-
const Component = as ?? 'a'
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<Component ref={ref} data-fs-link data-testid={testId} {...otherProps}>
|
|
35
|
-
{children}
|
|
36
|
-
</Component>
|
|
37
|
-
)
|
|
38
|
-
})
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* This is only being exported to make it easier to use in Storybook.
|
|
42
|
-
* **DON'T** import this directly to use this component, use the default export
|
|
43
|
-
* instead.
|
|
44
|
-
*/
|
|
45
|
-
export const StorybookLink = Link as FC<Props>
|
|
46
|
-
|
|
47
|
-
export default Link
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
-
import { StorybookLink } from '../Link'
|
|
3
|
-
|
|
4
|
-
# Link
|
|
5
|
-
|
|
6
|
-
`Link` component performs the same behavior of a regular anchor tag (`<a>`), but can be used as any HTML tag.
|
|
7
|
-
|
|
8
|
-
## Default
|
|
9
|
-
|
|
10
|
-
<Canvas>
|
|
11
|
-
<Story id="atoms-link--default" />
|
|
12
|
-
</Canvas>
|
|
13
|
-
|
|
14
|
-
## As Div
|
|
15
|
-
|
|
16
|
-
<Canvas>
|
|
17
|
-
<Story id="atoms-link--as-div" />
|
|
18
|
-
</Canvas>
|
|
19
|
-
|
|
20
|
-
## Props
|
|
21
|
-
|
|
22
|
-
The component supports all attributes also supported by the choosen tag (through the prop `as`).
|
|
23
|
-
|
|
24
|
-
For example, in cases it is wanted to be used as a wrapper for any external link component (i.e., Next.js Link or Gatsby Link), the component can be used with the prop `as="div"`.
|
|
25
|
-
|
|
26
|
-
Besides those attributes, the following props are also supported:
|
|
27
|
-
|
|
28
|
-
<ArgsTable of={StorybookLink} />
|
|
29
|
-
|
|
30
|
-
## CSS Selectors
|
|
31
|
-
|
|
32
|
-
```css
|
|
33
|
-
[data-fs-link] {
|
|
34
|
-
}
|
|
35
|
-
```
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import type { Story, Meta } from '@storybook/react'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { LinkProps } from '../Link'
|
|
5
|
-
import LinkComponent from '../Link'
|
|
6
|
-
import mdx from './Link.mdx'
|
|
7
|
-
|
|
8
|
-
const LinkDefaultTemplate: Story<LinkProps<'a'>> = () => (
|
|
9
|
-
<LinkComponent href="/">A default link</LinkComponent>
|
|
10
|
-
)
|
|
11
|
-
|
|
12
|
-
export const Default = LinkDefaultTemplate.bind({})
|
|
13
|
-
|
|
14
|
-
const LinkAsDivTemplate: Story<LinkProps<'div'>> = () => (
|
|
15
|
-
<LinkComponent as="div">
|
|
16
|
-
<span>A span inside the Link component</span>
|
|
17
|
-
<a href="/">A link inside the Link component</a>
|
|
18
|
-
</LinkComponent>
|
|
19
|
-
)
|
|
20
|
-
|
|
21
|
-
export const AsDiv = LinkAsDivTemplate.bind({})
|
|
22
|
-
|
|
23
|
-
export default {
|
|
24
|
-
title: 'Atoms/Link',
|
|
25
|
-
parameters: {
|
|
26
|
-
docs: {
|
|
27
|
-
page: mdx,
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
} as Meta
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { SelectHTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
5
|
-
/**
|
|
6
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
|
-
*/
|
|
8
|
-
testId?: string
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
|
|
12
|
-
{ children, testId = 'store-select', ...otherProps },
|
|
13
|
-
ref
|
|
14
|
-
) {
|
|
15
|
-
return (
|
|
16
|
-
<select ref={ref} data-fs-select data-testid={testId} {...otherProps}>
|
|
17
|
-
{children}
|
|
18
|
-
</select>
|
|
19
|
-
)
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
export default Select
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
-
import Select from '../Select'
|
|
3
|
-
|
|
4
|
-
# Select
|
|
5
|
-
|
|
6
|
-
## Default
|
|
7
|
-
|
|
8
|
-
<Canvas>
|
|
9
|
-
<Story id="atoms-select--default-select" />
|
|
10
|
-
</Canvas>
|
|
11
|
-
|
|
12
|
-
## Disabled
|
|
13
|
-
|
|
14
|
-
<Canvas>
|
|
15
|
-
<Story id="atoms-select--disabled-select" />
|
|
16
|
-
</Canvas>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
## Multiple
|
|
20
|
-
|
|
21
|
-
<Canvas>
|
|
22
|
-
<Story id="atoms-select--multiple-select" />
|
|
23
|
-
</Canvas>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
## Default Value
|
|
27
|
-
|
|
28
|
-
<Canvas>
|
|
29
|
-
<Story id="atoms-select--base-value-select" />
|
|
30
|
-
</Canvas>
|
|
31
|
-
|
|
32
|
-
## Props
|
|
33
|
-
|
|
34
|
-
<ArgsTable of={Select} />
|
|
35
|
-
|
|
36
|
-
## CSS Selectors
|
|
37
|
-
|
|
38
|
-
```css
|
|
39
|
-
[data-fs-select] {}
|
|
40
|
-
```
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import type { Story } from '@storybook/react'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { ComponentArgTypes } from '../../../../typings/utils'
|
|
5
|
-
import type { SelectProps } from '../Select'
|
|
6
|
-
import Component from '../Select'
|
|
7
|
-
import mdx from './Select.mdx'
|
|
8
|
-
|
|
9
|
-
type SelectStoryProps = SelectProps & { options: string[][] }
|
|
10
|
-
const SelectTemplate: Story<SelectStoryProps> = ({ options, ...props }) => {
|
|
11
|
-
return (
|
|
12
|
-
<>
|
|
13
|
-
<label htmlFor="select">Select:</label>
|
|
14
|
-
<Component {...props} name="select" id="select">
|
|
15
|
-
{options.map(([value, label]) => {
|
|
16
|
-
return (
|
|
17
|
-
<option key={value} value={value}>
|
|
18
|
-
{label}
|
|
19
|
-
</option>
|
|
20
|
-
)
|
|
21
|
-
})}
|
|
22
|
-
</Component>
|
|
23
|
-
</>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export const DefaultSelect = SelectTemplate.bind({})
|
|
28
|
-
|
|
29
|
-
export const DisabledSelect = SelectTemplate.bind({})
|
|
30
|
-
DisabledSelect.args = {
|
|
31
|
-
disabled: true,
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export const MultipleSelect = SelectTemplate.bind({})
|
|
35
|
-
MultipleSelect.args = {
|
|
36
|
-
multiple: true,
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export const BaseValueSelect = SelectTemplate.bind({})
|
|
40
|
-
BaseValueSelect.args = {
|
|
41
|
-
defaultValue: 'ok',
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
const argTypes: ComponentArgTypes<SelectStoryProps> = {
|
|
45
|
-
options: {
|
|
46
|
-
control: { type: 'array' },
|
|
47
|
-
defaultValue: [
|
|
48
|
-
['great', 'Great'],
|
|
49
|
-
['ok', 'Ok'],
|
|
50
|
-
['bad', 'Bad'],
|
|
51
|
-
],
|
|
52
|
-
},
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export default {
|
|
56
|
-
title: 'Atoms/Select',
|
|
57
|
-
argTypes,
|
|
58
|
-
parameters: {
|
|
59
|
-
docs: {
|
|
60
|
-
page: mdx,
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
}
|