@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.
Files changed (35) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/components/molecules/Table/Table.d.ts +1 -1
  3. package/dist/index.d.ts +0 -4
  4. package/dist/index.js +0 -2
  5. package/dist/index.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/components/atoms/Icon/styles.scss +9 -0
  8. package/src/components/atoms/Link/Link.stories.mdx +134 -0
  9. package/src/components/atoms/Link/styles.scss +94 -0
  10. package/src/components/atoms/Select/styles.scss +78 -0
  11. package/src/components/molecules/Alert/stories/Alert.stories.tsx +1 -1
  12. package/src/components/molecules/IconButton/IconButton.stories.mdx +1 -2
  13. package/src/components/molecules/SelectField/styles.scss +21 -0
  14. package/src/index.ts +0 -6
  15. package/src/styles/components.scss +4 -0
  16. package/dist/components/atoms/Link/Link.d.ts +0 -19
  17. package/dist/components/atoms/Link/Link.js +0 -13
  18. package/dist/components/atoms/Link/Link.js.map +0 -1
  19. package/dist/components/atoms/Link/index.d.ts +0 -2
  20. package/dist/components/atoms/Link/index.js +0 -2
  21. package/dist/components/atoms/Link/index.js.map +0 -1
  22. package/dist/components/atoms/Select/Select.d.ts +0 -10
  23. package/dist/components/atoms/Select/Select.js +0 -6
  24. package/dist/components/atoms/Select/Select.js.map +0 -1
  25. package/dist/components/atoms/Select/index.d.ts +0 -2
  26. package/dist/components/atoms/Select/index.js +0 -2
  27. package/dist/components/atoms/Select/index.js.map +0 -1
  28. package/src/components/atoms/Link/Link.tsx +0 -47
  29. package/src/components/atoms/Link/index.tsx +0 -2
  30. package/src/components/atoms/Link/stories/Link.mdx +0 -35
  31. package/src/components/atoms/Link/stories/Link.stories.tsx +0 -30
  32. package/src/components/atoms/Select/Select.tsx +0 -22
  33. package/src/components/atoms/Select/index.ts +0 -2
  34. package/src/components/atoms/Select/stories/Select.mdx +0 -40
  35. 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" | "color" | "id" | "lang" | "width" | "role" | "tabIndex" | "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" | "children" | "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" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cellPadding" | "cellSpacing" | "testId"> & React.RefAttributes<HTMLTableElement>>;
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":"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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.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.9-alpha.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": "640305492dc03e55d3df05de18bcca8587d562fc"
81
+ "gitHead": "a8f4ca0ddc690e24df31abee9e4a4bbdb2d1a03b"
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,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/src/assets'
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,2 +0,0 @@
1
- export { default } from './Link';
2
- export type { LinkProps } from './Link';
@@ -1,2 +0,0 @@
1
- export { default } from './Link';
2
- //# sourceMappingURL=index.js.map
@@ -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,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,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,2 +0,0 @@
1
- export { default } from './Link'
2
- export type { LinkProps } from './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,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
- }