@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 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":"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"}
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.10-alpha.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": "640305492dc03e55d3df05de18bcca8587d562fc"
81
+ "gitHead": "c513c94b5b36c43355224db4c179cbe4362117ea"
82
82
  }
@@ -0,0 +1,9 @@
1
+ [data-fs-icon] {
2
+ // --------------------------------------------------------
3
+ // Structural Styles
4
+ // --------------------------------------------------------
5
+
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ }
@@ -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,2 +0,0 @@
1
- export { default } from './Select';
2
- export type { SelectProps } from './Select';
@@ -1,2 +0,0 @@
1
- export { default } from './Select';
2
- //# sourceMappingURL=index.js.map
@@ -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,2 +0,0 @@
1
- export { default } from './Select'
2
- export type { SelectProps } from './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
- }