@faststore/ui 2.0.10-alpha.0 → 2.0.13-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 +9 -0
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Icon/styles.scss +9 -0
- package/src/components/atoms/Select/styles.scss +78 -0
- package/src/components/molecules/SelectField/styles.scss +21 -0
- package/src/index.ts +0 -3
- package/src/styles/components.scss +3 -0
- 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/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,15 @@
|
|
|
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.13-alpha.0](https://github.com/vtex/faststore/compare/v2.0.12-alpha.0...v2.0.13-alpha.0) (2022-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Adds `Select` and `SelectField` components ([#1547](https://github.com/vtex/faststore/issues/1547)) ([7c4beb0](https://github.com/vtex/faststore/commit/7c4beb085c893ad540e1a4440cc7b902fa36a75c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [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
16
|
|
|
8
17
|
|
package/dist/index.d.ts
CHANGED
|
@@ -5,8 +5,6 @@ export { default as Popover } from './components/atoms/Popover';
|
|
|
5
5
|
export type { PopoverProps } from './components/atoms/Popover';
|
|
6
6
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
7
7
|
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
8
|
export { default as Slider } from './components/atoms/Slider';
|
|
11
9
|
export type { SliderProps } from './components/atoms/Slider';
|
|
12
10
|
export { default as List } from './components/atoms/List';
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,6 @@ export * from '@faststore/components';
|
|
|
3
3
|
export { default as Link } from './components/atoms/Link';
|
|
4
4
|
export { default as Popover } from './components/atoms/Popover';
|
|
5
5
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
6
|
-
export { default as Select } from './components/atoms/Select';
|
|
7
6
|
export { default as Slider } from './components/atoms/Slider';
|
|
8
7
|
export { default as List } from './components/atoms/List';
|
|
9
8
|
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,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAGzD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAG7D,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.13-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"node": "16.18.0",
|
|
79
79
|
"yarn": "1.19.1"
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "c513c94b5b36c43355224db4c179cbe4362117ea"
|
|
82
82
|
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
@@ -10,9 +10,6 @@ export type { PopoverProps } from './components/atoms/Popover'
|
|
|
10
10
|
export { default as TextArea } from './components/atoms/TextArea'
|
|
11
11
|
export type { TextAreaProps } from './components/atoms/TextArea'
|
|
12
12
|
|
|
13
|
-
export { default as Select } from './components/atoms/Select'
|
|
14
|
-
export type { SelectProps } from './components/atoms/Select'
|
|
15
|
-
|
|
16
13
|
export { default as Slider } from './components/atoms/Slider'
|
|
17
14
|
export type { SliderProps } from './components/atoms/Slider'
|
|
18
15
|
|
|
@@ -2,10 +2,12 @@
|
|
|
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";
|
|
5
6
|
@import "../components/atoms/Input/styles";
|
|
6
7
|
@import "../components/atoms/Overlay/styles";
|
|
7
8
|
@import "../components/atoms/Price/styles";
|
|
8
9
|
@import "../components/atoms/Radio/styles";
|
|
10
|
+
@import "../components/atoms/Select/styles";
|
|
9
11
|
|
|
10
12
|
// Molecules
|
|
11
13
|
@import "../components/molecules/BuyButton/styles";
|
|
@@ -13,4 +15,5 @@
|
|
|
13
15
|
@import "../components/molecules/DiscountBadge/styles";
|
|
14
16
|
@import "../components/molecules/InputField/styles";
|
|
15
17
|
@import "../components/molecules/RadioField/styles";
|
|
18
|
+
@import "../components/molecules/SelectField/styles";
|
|
16
19
|
@import "../components/molecules/Tag/styles";
|
|
@@ -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,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
|
-
}
|