@faststore/ui 2.0.4-alpha.0 → 2.0.5-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/components/molecules/Modal/Modal.js +2 -2
- package/dist/components/molecules/Modal/Modal.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/atoms/Overlay/styles.scss +14 -0
- package/src/components/molecules/Modal/Modal.tsx +2 -3
- package/src/components/molecules/Modal/stories/Modal.mdx +0 -2
- package/src/index.ts +0 -3
- package/src/styles/components.scss +1 -0
- package/dist/components/atoms/Overlay/Overlay.d.ts +0 -10
- package/dist/components/atoms/Overlay/Overlay.js +0 -6
- package/dist/components/atoms/Overlay/Overlay.js.map +0 -1
- package/dist/components/atoms/Overlay/index.d.ts +0 -2
- package/dist/components/atoms/Overlay/index.js +0 -2
- package/dist/components/atoms/Overlay/index.js.map +0 -1
- package/src/components/atoms/Overlay/Overlay.tsx +0 -26
- package/src/components/atoms/Overlay/index.ts +0 -2
- package/src/components/atoms/Overlay/stories/Overlay.mdx +0 -18
- package/src/components/atoms/Overlay/stories/Overlay.stories.tsx +0 -48
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.5-alpha.0](https://github.com/vtex/faststore/compare/v2.0.4-alpha.0...v2.0.5-alpha.0) (2022-12-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* `Overlay` Component. ([#1544](https://github.com/vtex/faststore/issues/1544)) ([dad6872](https://github.com/vtex/faststore/commit/dad6872654faaa4411d1f5949e5beab609e2ca36))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [2.0.4-alpha.0](https://github.com/vtex/faststore/compare/v2.0.3-alpha.0...v2.0.4-alpha.0) (2022-12-07)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import Overlay from '
|
|
3
|
+
import { Overlay } from '@faststore/components';
|
|
4
4
|
import ModalContent from './ModalContent';
|
|
5
5
|
/*
|
|
6
6
|
* This component is based on @reach/dialog.
|
|
@@ -23,7 +23,7 @@ const Modal = ({ isOpen, children, onDismiss, testId = 'store-modal', ...otherPr
|
|
|
23
23
|
onDismiss?.(event);
|
|
24
24
|
};
|
|
25
25
|
return isOpen
|
|
26
|
-
? createPortal(React.createElement(Overlay, {
|
|
26
|
+
? createPortal(React.createElement(Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
|
|
27
27
|
React.createElement(ModalContent, Object.assign({}, otherProps, { testId: testId }), children)), document.body)
|
|
28
28
|
: null;
|
|
29
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,OAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE/C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAwBzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,aAAa,EACtB,GAAG,UAAU,EACiB,EAAE,EAAE;IAClC,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,IACN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,oBAAK,UAAU,IAAE,MAAM,EAAE,MAAM,KACzC,QAAQ,CACI,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -9,8 +9,6 @@ export { default as Price } from './components/atoms/Price';
|
|
|
9
9
|
export type { PriceProps } from './components/atoms/Price';
|
|
10
10
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
11
11
|
export type { TextAreaProps } from './components/atoms/TextArea';
|
|
12
|
-
export { default as Overlay } from './components/atoms/Overlay';
|
|
13
|
-
export type { OverlayProps } from './components/atoms/Overlay';
|
|
14
12
|
export { default as Select } from './components/atoms/Select';
|
|
15
13
|
export type { SelectProps } from './components/atoms/Select';
|
|
16
14
|
export { default as Slider } from './components/atoms/Slider';
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,6 @@ export { default as Input } from './components/atoms/Input';
|
|
|
5
5
|
export { default as Popover } from './components/atoms/Popover';
|
|
6
6
|
export { default as Price } from './components/atoms/Price';
|
|
7
7
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
8
|
-
export { default as Overlay } from './components/atoms/Overlay';
|
|
9
8
|
export { default as Select } from './components/atoms/Select';
|
|
10
9
|
export { default as Slider } from './components/atoms/Slider';
|
|
11
10
|
export { default as List } from './components/atoms/List';
|
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,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAG3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAG3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,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.5-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.5-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": "7ac374bab91528184e27381e7dc3be8bf5524e76"
|
|
82
82
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
[data-fs-overlay] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Overlay
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
--fs-overlay-bkg-color: rgb(0 0 0 / 20%);
|
|
6
|
+
|
|
7
|
+
position: fixed;
|
|
8
|
+
top: 0;
|
|
9
|
+
right: 0;
|
|
10
|
+
bottom: 0;
|
|
11
|
+
left: 0;
|
|
12
|
+
z-index: var(--fs-z-index-highest);
|
|
13
|
+
background-color: var(--fs-overlay-bkg-color);
|
|
14
|
+
}
|
|
@@ -7,9 +7,9 @@ import type {
|
|
|
7
7
|
import React from 'react'
|
|
8
8
|
import { createPortal } from 'react-dom'
|
|
9
9
|
|
|
10
|
-
import Overlay from '
|
|
11
|
-
import ModalContent from './ModalContent'
|
|
10
|
+
import { Overlay } from '@faststore/components'
|
|
12
11
|
import type { ModalContentProps } from './ModalContent'
|
|
12
|
+
import ModalContent from './ModalContent'
|
|
13
13
|
|
|
14
14
|
export interface ModalProps extends ModalContentProps {
|
|
15
15
|
/**
|
|
@@ -67,7 +67,6 @@ const Modal = ({
|
|
|
67
67
|
return isOpen
|
|
68
68
|
? createPortal(
|
|
69
69
|
<Overlay
|
|
70
|
-
data-modal-overlay
|
|
71
70
|
onClick={handleBackdropClick}
|
|
72
71
|
onKeyDown={handleBackdropKeyDown}
|
|
73
72
|
>
|
package/src/index.ts
CHANGED
|
@@ -16,9 +16,6 @@ export type { PriceProps } from './components/atoms/Price'
|
|
|
16
16
|
export { default as TextArea } from './components/atoms/TextArea'
|
|
17
17
|
export type { TextAreaProps } from './components/atoms/TextArea'
|
|
18
18
|
|
|
19
|
-
export { default as Overlay } from './components/atoms/Overlay'
|
|
20
|
-
export type { OverlayProps } from './components/atoms/Overlay'
|
|
21
|
-
|
|
22
19
|
export { default as Select } from './components/atoms/Select'
|
|
23
20
|
export type { SelectProps } from './components/atoms/Select'
|
|
24
21
|
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
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 Overlay: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export default Overlay;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const Overlay = forwardRef(function Overlay({ testId = 'store-overlay', ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("div", Object.assign({ role: "presentation", "data-fs-overlay": true, "data-testid": testId, ref: ref }, otherProps)));
|
|
4
|
-
});
|
|
5
|
-
export default Overlay;
|
|
6
|
-
//# sourceMappingURL=Overlay.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../../src/components/atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,OAAO,GAAG,UAAU,CAAwB,SAAS,OAAO,CAChE,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EAC3C,GAAG;IAEH,OAAO,CACL,2CACE,IAAI,EAAC,cAAc,0CAEN,MAAM,EACnB,GAAG,EAAE,GAAG,IACJ,UAAU,EACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/Overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
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 Overlay = forwardRef<HTMLDivElement, Props>(function Overlay(
|
|
12
|
-
{ testId = 'store-overlay', ...otherProps },
|
|
13
|
-
ref
|
|
14
|
-
) {
|
|
15
|
-
return (
|
|
16
|
-
<div
|
|
17
|
-
role="presentation"
|
|
18
|
-
data-fs-overlay
|
|
19
|
-
data-testid={testId}
|
|
20
|
-
ref={ref}
|
|
21
|
-
{...otherProps}
|
|
22
|
-
/>
|
|
23
|
-
)
|
|
24
|
-
})
|
|
25
|
-
|
|
26
|
-
export default Overlay
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
-
import Overlay from '../Overlay'
|
|
3
|
-
|
|
4
|
-
# Overlay
|
|
5
|
-
|
|
6
|
-
<Canvas>
|
|
7
|
-
<Story id="atoms-overlay" />
|
|
8
|
-
</Canvas>
|
|
9
|
-
|
|
10
|
-
## Props
|
|
11
|
-
|
|
12
|
-
<ArgsTable of={Overlay} />
|
|
13
|
-
|
|
14
|
-
## CSS Selectors
|
|
15
|
-
|
|
16
|
-
```css
|
|
17
|
-
[data-fs-overlay] {}
|
|
18
|
-
```
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import type { Story, Meta } from '@storybook/react'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { ComponentArgTypes } from '../../../../typings/utils'
|
|
5
|
-
import type { Props as OverlayProps } from '../Overlay'
|
|
6
|
-
import Component from '../Overlay'
|
|
7
|
-
import mdx from './Overlay.mdx'
|
|
8
|
-
|
|
9
|
-
type ColorType = 'black' | 'green'
|
|
10
|
-
type OverlayStoryProps = OverlayProps & { color: ColorType }
|
|
11
|
-
|
|
12
|
-
const OverlayTemplate: Story<OverlayStoryProps> = ({
|
|
13
|
-
color = 'black',
|
|
14
|
-
...otherProps
|
|
15
|
-
}) => {
|
|
16
|
-
const dataColor =
|
|
17
|
-
color === 'black' ? { 'data-black': true } : { 'data-green': true }
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<div data-story-overlay-out-container>
|
|
21
|
-
A content outside me
|
|
22
|
-
<Component {...otherProps} {...dataColor} />
|
|
23
|
-
</div>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export const Overlay = OverlayTemplate.bind({})
|
|
28
|
-
|
|
29
|
-
const controls: ComponentArgTypes<OverlayStoryProps> = {
|
|
30
|
-
color: {
|
|
31
|
-
options: ['green', 'black'],
|
|
32
|
-
control: {
|
|
33
|
-
type: 'select',
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export default {
|
|
39
|
-
title: 'Atoms/Overlay',
|
|
40
|
-
argTypes: {
|
|
41
|
-
...controls,
|
|
42
|
-
},
|
|
43
|
-
parameters: {
|
|
44
|
-
docs: {
|
|
45
|
-
page: mdx,
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
} as Meta
|