@faststore/ui 2.0.13-alpha.0 → 2.0.15-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/AggregateRating/AggregateRating.d.ts +3 -3
- package/dist/components/molecules/AggregateRating/AggregateRating.js +3 -3
- package/dist/components/molecules/AggregateRating/AggregateRating.js.map +1 -1
- package/dist/components/molecules/Breadcrumb/Breadcrumb.js +2 -2
- package/dist/components/molecules/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/components/molecules/OrderSummary/OrderSummary.d.ts +3 -3
- package/dist/components/molecules/OrderSummary/OrderSummary.js +1 -1
- package/dist/components/molecules/OrderSummary/OrderSummary.js.map +1 -1
- 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/Link/Link.stories.mdx +134 -0
- package/src/components/atoms/Link/styles.scss +94 -0
- package/src/components/atoms/List/styles.scss +27 -0
- package/src/components/molecules/AggregateRating/AggregateRating.tsx +4 -11
- package/src/components/molecules/Alert/stories/Alert.stories.tsx +1 -1
- package/src/components/molecules/Breadcrumb/Breadcrumb.tsx +2 -2
- package/src/components/molecules/IconButton/IconButton.stories.mdx +1 -2
- package/src/components/molecules/OrderSummary/OrderSummary.tsx +3 -2
- package/src/index.ts +0 -6
- package/src/styles/components.scss +2 -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/List/List.d.ts +0 -12
- package/dist/components/atoms/List/List.js +0 -16
- package/dist/components/atoms/List/List.js.map +0 -1
- package/dist/components/atoms/List/index.d.ts +0 -2
- package/dist/components/atoms/List/index.js +0 -2
- package/dist/components/atoms/List/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/List/List.tsx +0 -38
- package/src/components/atoms/List/index.ts +0 -2
- package/src/components/atoms/List/stories/List.mdx +0 -33
- package/src/components/atoms/List/stories/List.stories.tsx +0 -73
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.15-alpha.0](https://github.com/vtex/faststore/compare/v2.0.14-alpha.0...v2.0.15-alpha.0) (2022-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Adds `List` component ([#1549](https://github.com/vtex/faststore/issues/1549)) ([55858fe](https://github.com/vtex/faststore/commit/55858fe39c254786e7c7a1e1dd3da96ed3be0d16))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.14-alpha.0](https://github.com/vtex/faststore/compare/v2.0.13-alpha.0...v2.0.14-alpha.0) (2022-12-14)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* Adds `Link` component ([#1543](https://github.com/vtex/faststore/issues/1543)) ([9c219eb](https://github.com/vtex/faststore/commit/9c219eba996fc6fec90edd1383a4abf8dbe0a7ef))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [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
25
|
|
|
8
26
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ListProps } from '
|
|
3
|
-
export interface AggregateRatingProps extends ListProps<
|
|
2
|
+
import type { ListProps } from '@faststore/components';
|
|
3
|
+
export interface AggregateRatingProps extends ListProps<'ul'> {
|
|
4
4
|
/**
|
|
5
5
|
* The current value of the rating, based on the quantity of child elements.
|
|
6
6
|
*/
|
|
@@ -14,5 +14,5 @@ export interface RatingItemProps {
|
|
|
14
14
|
'data-fs-aggregate-rating-item'?: 'full' | 'partial' | 'empty';
|
|
15
15
|
'data-testid'?: string;
|
|
16
16
|
}
|
|
17
|
-
declare const AggregateRating: React.ForwardRefExoticComponent<AggregateRatingProps & React.RefAttributes<HTMLUListElement>>;
|
|
17
|
+
declare const AggregateRating: React.ForwardRefExoticComponent<Pick<AggregateRatingProps, "children" | "hidden" | "testId" | "slot" | "style" | "title" | "marker" | "as" | "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" | "value"> & React.RefAttributes<HTMLUListElement>>;
|
|
18
18
|
export default AggregateRating;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import List from '
|
|
2
|
+
import { List } from '@faststore/components';
|
|
3
3
|
const RatingItem = ({ children, ...otherProps }) => {
|
|
4
4
|
if (!React.isValidElement(children)) {
|
|
5
5
|
return React.createElement("li", Object.assign({}, otherProps), children);
|
|
6
6
|
}
|
|
7
7
|
return React.createElement("li", null, React.cloneElement(children, otherProps));
|
|
8
8
|
};
|
|
9
|
-
const AggregateRating = forwardRef(function AggregateRating({ children, testId = 'store-aggregate-rating', value,
|
|
9
|
+
const AggregateRating = forwardRef(function AggregateRating({ children, testId = 'store-aggregate-rating', value, ...otherProps }, ref) {
|
|
10
10
|
const fillCheck = (itemValue) => {
|
|
11
11
|
if (itemValue >= 1) {
|
|
12
12
|
return 'full';
|
|
@@ -16,7 +16,7 @@ const AggregateRating = forwardRef(function AggregateRating({ children, testId =
|
|
|
16
16
|
}
|
|
17
17
|
return 'empty';
|
|
18
18
|
};
|
|
19
|
-
return (React.createElement(List, Object.assign({ "data-fs-aggregate-rating": true,
|
|
19
|
+
return (React.createElement(List, Object.assign({ "data-fs-aggregate-rating": true, ref: ref, "data-testid": testId }, otherProps), React.Children.map(children, (child, index) => {
|
|
20
20
|
const currentItemNumber = index;
|
|
21
21
|
const fill = fillCheck(value - currentItemNumber);
|
|
22
22
|
return (React.createElement(RatingItem, { key: `aggregate-rating-${index}`, "data-fs-aggregate-rating-item": fill, "data-testid": `${testId}-item` }, child));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AggregateRating.js","sourceRoot":"","sources":["../../../../src/components/molecules/AggregateRating/AggregateRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,IAAI,MAAM,
|
|
1
|
+
{"version":3,"file":"AggregateRating.js","sourceRoot":"","sources":["../../../../src/components/molecules/AggregateRating/AggregateRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAmB5C,MAAM,UAAU,GAA2C,CAAC,EAC1D,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,EAAE;IACH,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACnC,OAAO,4CAAQ,UAAU,GAAG,QAAQ,CAAM,CAAA;KAC3C;IAED,OAAO,gCAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAM,CAAA;AAC5D,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,MAAM,GAAG,wBAAwB,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,EACrE,GAAG;IAEH,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAE,EAAE;QACtC,IAAI,SAAS,IAAI,CAAC,EAAE;YAClB,OAAO,MAAM,CAAA;SACd;QAED,IAAI,CAAC,GAAG,SAAS,IAAI,SAAS,GAAG,CAAC,EAAE;YAClC,OAAO,SAAS,CAAA;SACjB;QAED,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,IAAI,oDAEH,GAAG,EAAE,GAAG,iBACK,MAAM,IACf,UAAU,GAEb,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAa,EAAE,EAAE;QACrD,MAAM,iBAAiB,GAAG,KAAK,CAAA;QAC/B,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,iBAAiB,CAAC,CAAA;QAEjD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,oBAAoB,KAAK,EAAE,mCACD,IAAI,iBACtB,GAAG,MAAM,OAAO,IAE5B,KAAK,CACK,CACd,CAAA;IACH,CAAC,CAAC,CACG,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import List from '
|
|
2
|
+
import { List } from '@faststore/components';
|
|
3
3
|
const Divider = ({ divider, testId }) => {
|
|
4
4
|
const props = {
|
|
5
5
|
'data-breadcrumb-divider': true,
|
|
@@ -29,7 +29,7 @@ const ListItem = ({ children, isLastItem, divider, testId, }) => {
|
|
|
29
29
|
};
|
|
30
30
|
const Breadcrumb = forwardRef(function Breadcrumb({ children, divider: rawDivider, testId = 'store-breadcrumb', ...otherProps }, ref) {
|
|
31
31
|
return (React.createElement("nav", Object.assign({ "aria-label": "Breadcrumb", role: "navigation", ref: ref, "data-fs-breadcrumb": true, "data-testid": testId }, otherProps),
|
|
32
|
-
React.createElement(List, { "data-breadcrumb-list": true
|
|
32
|
+
React.createElement(List, { as: "ol", "data-breadcrumb-list": true }, React.Children.toArray(children).map((child, index, childrenArray) => {
|
|
33
33
|
const isLastItem = index === childrenArray.length - 1;
|
|
34
34
|
return (React.createElement(ListItem, { isLastItem: isLastItem, divider: rawDivider, key: `breadcrumb-${index}`, testId: testId }, child));
|
|
35
35
|
}))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,IAAI,MAAM,
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAa5C,MAAM,OAAO,GAAwB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG;QACZ,yBAAyB,EAAE,IAAI;QAC/B,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,GAAG,MAAM,UAAU;KACnC,CAAA;IAED,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QACjC,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;KAC1C;IAED,OAAO,8CAAU,KAAK,GAAG,OAAO,IAAI,GAAG,CAAQ,CAAA;AACjD,CAAC,CAAA;AASD,MAAM,QAAQ,GAAsB,CAAC,EACnC,QAAQ,EACR,UAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,EAAE;IACH,MAAM,KAAK,GAAG;QACZ,aAAa,EAAE,GAAG,MAAM,OAAO;QAC/B,sBAAsB,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACrD,cAAc,EAAE,UAAU,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;KAC3D,CAAA;IAED,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACnC,OAAO,CACL;YACE,8CAAU,KAAK;gBACZ,QAAQ;gBACR,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,CAC7D,CACJ,CACN,CAAA;KACF;IAED,OAAO,CACL;QACG,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC;QACnC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,CAC/D,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,EAAE,UAAU,EACnB,MAAM,GAAG,kBAAkB,EAC3B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,yDACa,YAAY,EACvB,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,6CAEK,MAAM,IACf,UAAU;QAEd,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,kCACV,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CACnC,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;YAC9B,MAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAA;YAErD,OAAO,CACL,oBAAC,QAAQ,IACP,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,cAAc,KAAK,EAAE,EAC1B,MAAM,EAAE,MAAM,IAEb,KAAK,CACG,CACZ,CAAA;QACH,CAAC,CACF,CACI,CACH,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ListProps } from '
|
|
3
|
-
export interface OrderSummaryProps
|
|
2
|
+
import type { ListProps } from '@faststore/components';
|
|
3
|
+
export interface OrderSummaryProps extends ListProps<'ul'> {
|
|
4
4
|
/**
|
|
5
5
|
* ID to find this component in testing tools (e.g.: cypress,
|
|
6
6
|
* testing-library, and jest).
|
|
@@ -31,5 +31,5 @@ export interface OrderSummaryProps<T = HTMLElement> extends Omit<ListProps<T>, '
|
|
|
31
31
|
*/
|
|
32
32
|
totalValue?: string;
|
|
33
33
|
}
|
|
34
|
-
declare const OrderSummary: React.ForwardRefExoticComponent<OrderSummaryProps
|
|
34
|
+
declare const OrderSummary: React.ForwardRefExoticComponent<Pick<OrderSummaryProps, "children" | "hidden" | "testId" | "slot" | "style" | "title" | "marker" | "as" | "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" | "subtotalLabel" | "subtotalValue" | "discountLabel" | "discountValue" | "totalLabel" | "totalValue"> & React.RefAttributes<HTMLUListElement>>;
|
|
35
35
|
export default OrderSummary;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import List from '
|
|
2
|
+
import { List } from '@faststore/components';
|
|
3
3
|
const OrderSummary = forwardRef(function OrderSummary({ testId = 'store-order-summary', children, subtotalLabel, subtotalValue, discountLabel, discountValue, totalLabel, totalValue, ...otherProps }, ref) {
|
|
4
4
|
return (React.createElement(List, Object.assign({ ref: ref, "data-fs-order-summary": true, "data-testid": testId }, otherProps),
|
|
5
5
|
subtotalValue ? (React.createElement("li", { "data-fs-order-summary-subtotal": true },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../../src/components/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,
|
|
1
|
+
{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../../src/components/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAmC5C,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,GAAG,qBAAqB,EAC9B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,UAAU,EACV,UAAU,EACV,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,GAAG,gDAEK,MAAM,IACf,UAAU;QAEb,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACP,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACR;YACE,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN;YACP,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN,CACJ,CACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -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,14 +1,10 @@
|
|
|
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
6
|
export { default as Slider } from './components/atoms/Slider';
|
|
9
7
|
export type { SliderProps } from './components/atoms/Slider';
|
|
10
|
-
export { default as List } from './components/atoms/List';
|
|
11
|
-
export type { ListProps } from './components/atoms/List';
|
|
12
8
|
export { default as Skeleton } from './components/atoms/Skeleton';
|
|
13
9
|
export type { SkeletonProps } from './components/atoms/Skeleton';
|
|
14
10
|
export { default as Spinner } from './components/atoms/Spinner';
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
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
5
|
export { default as Slider } from './components/atoms/Slider';
|
|
7
|
-
export { default as List } from './components/atoms/List';
|
|
8
6
|
export { default as Skeleton } from './components/atoms/Skeleton';
|
|
9
7
|
export { default as Spinner } from './components/atoms/Spinner';
|
|
10
8
|
export { default as Incentive } from './components/atoms/Incentive';
|
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":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,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,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAGnF,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAA;AAG/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,mCAAmC,CAAA;AAM1C,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,kCAAkC,CAAA;AAQzC,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,8BAA8B,CAAA;AAUrC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAGrF,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,iCAAiC,CAAA;AAQxC,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.15-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": "9b72e9d993f45bf072144751654854a11e099d17"
|
|
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,27 @@
|
|
|
1
|
+
[data-fs-list] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for List
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-list-style-unordered : initial;
|
|
8
|
+
--fs-list-style-ordered : decimal;
|
|
9
|
+
|
|
10
|
+
// --------------------------------------------------------
|
|
11
|
+
// Structural Styles
|
|
12
|
+
// --------------------------------------------------------
|
|
13
|
+
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
|
|
17
|
+
&[data-fs-list-marker="true"] {
|
|
18
|
+
list-style: var(--fs-list-style-unordered);
|
|
19
|
+
list-style-position: inside;
|
|
20
|
+
|
|
21
|
+
@at-root ol#{&} {
|
|
22
|
+
list-style: var(--fs-list-style-ordered);
|
|
23
|
+
list-style-position: inside;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react'
|
|
2
2
|
import type { FC, PropsWithChildren } from 'react'
|
|
3
3
|
|
|
4
|
-
import List from '
|
|
5
|
-
import type { ListProps } from '
|
|
4
|
+
import { List } from '@faststore/components'
|
|
5
|
+
import type { ListProps } from '@faststore/components'
|
|
6
6
|
|
|
7
|
-
export interface AggregateRatingProps extends ListProps<
|
|
7
|
+
export interface AggregateRatingProps extends ListProps<'ul'> {
|
|
8
8
|
/**
|
|
9
9
|
* The current value of the rating, based on the quantity of child elements.
|
|
10
10
|
*/
|
|
@@ -33,13 +33,7 @@ const RatingItem: FC<PropsWithChildren<RatingItemProps>> = ({
|
|
|
33
33
|
|
|
34
34
|
const AggregateRating = forwardRef<HTMLUListElement, AggregateRatingProps>(
|
|
35
35
|
function AggregateRating(
|
|
36
|
-
{
|
|
37
|
-
children,
|
|
38
|
-
testId = 'store-aggregate-rating',
|
|
39
|
-
value,
|
|
40
|
-
variant = 'unordered',
|
|
41
|
-
...otherProps
|
|
42
|
-
},
|
|
36
|
+
{ children, testId = 'store-aggregate-rating', value, ...otherProps },
|
|
43
37
|
ref
|
|
44
38
|
) {
|
|
45
39
|
const fillCheck = (itemValue: number) => {
|
|
@@ -57,7 +51,6 @@ const AggregateRating = forwardRef<HTMLUListElement, AggregateRatingProps>(
|
|
|
57
51
|
return (
|
|
58
52
|
<List
|
|
59
53
|
data-fs-aggregate-rating
|
|
60
|
-
variant={variant}
|
|
61
54
|
ref={ref}
|
|
62
55
|
data-testid={testId}
|
|
63
56
|
{...otherProps}
|
|
@@ -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,7 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react'
|
|
2
2
|
import type { FC, HTMLAttributes, ReactNode } from 'react'
|
|
3
3
|
|
|
4
|
-
import List from '
|
|
4
|
+
import { List } from '@faststore/components'
|
|
5
5
|
|
|
6
6
|
export interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
7
7
|
/**
|
|
@@ -85,7 +85,7 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
|
|
|
85
85
|
data-testid={testId}
|
|
86
86
|
{...otherProps}
|
|
87
87
|
>
|
|
88
|
-
<List data-breadcrumb-list
|
|
88
|
+
<List as="ol" data-breadcrumb-list>
|
|
89
89
|
{React.Children.toArray(children).map(
|
|
90
90
|
(child, index, childrenArray) => {
|
|
91
91
|
const isLastItem = index === childrenArray.length - 1
|
|
@@ -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"
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react'
|
|
2
|
-
import
|
|
2
|
+
import { List } from '@faststore/components'
|
|
3
|
+
import type { ListProps } from '@faststore/components'
|
|
3
4
|
|
|
4
|
-
export interface OrderSummaryProps
|
|
5
|
+
export interface OrderSummaryProps extends ListProps<'ul'> {
|
|
5
6
|
/**
|
|
6
7
|
* ID to find this component in testing tools (e.g.: cypress,
|
|
7
8
|
* testing-library, and jest).
|
package/src/index.ts
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
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
|
|
|
@@ -13,9 +10,6 @@ export type { TextAreaProps } from './components/atoms/TextArea'
|
|
|
13
10
|
export { default as Slider } from './components/atoms/Slider'
|
|
14
11
|
export type { SliderProps } from './components/atoms/Slider'
|
|
15
12
|
|
|
16
|
-
export { default as List } from './components/atoms/List'
|
|
17
|
-
export type { ListProps } from './components/atoms/List'
|
|
18
|
-
|
|
19
13
|
export { default as Skeleton } from './components/atoms/Skeleton'
|
|
20
14
|
export type { SkeletonProps } from './components/atoms/Skeleton'
|
|
21
15
|
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
@import "../components/atoms/Button/styles";
|
|
4
4
|
@import "../components/atoms/Checkbox/styles";
|
|
5
5
|
@import "../components/atoms/Icon/styles";
|
|
6
|
+
@import "../components/atoms/Link/styles";
|
|
6
7
|
@import "../components/atoms/Input/styles";
|
|
8
|
+
@import "../components/atoms/List/styles";
|
|
7
9
|
@import "../components/atoms/Overlay/styles";
|
|
8
10
|
@import "../components/atoms/Price/styles";
|
|
9
11
|
@import "../components/atoms/Radio/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,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ElementType, HTMLAttributes } from 'react';
|
|
3
|
-
export interface ListProps<T = HTMLElement> extends HTMLAttributes<T> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
variant?: 'description' | 'ordered' | 'unordered';
|
|
9
|
-
as?: ElementType;
|
|
10
|
-
}
|
|
11
|
-
declare const List: React.ForwardRefExoticComponent<ListProps<HTMLElement> & React.RefAttributes<HTMLUListElement>>;
|
|
12
|
-
export default List;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const variantToElement = {
|
|
3
|
-
description: 'dl',
|
|
4
|
-
unordered: 'ul',
|
|
5
|
-
ordered: 'ol',
|
|
6
|
-
};
|
|
7
|
-
const List = forwardRef(function List({ testId = 'store-list', variant = 'unordered', as: MaybeComponent, ...otherProps }, ref) {
|
|
8
|
-
const dataAttributes = {
|
|
9
|
-
'data-testid': testId,
|
|
10
|
-
'data-fs-list': variant,
|
|
11
|
-
};
|
|
12
|
-
const Component = MaybeComponent ?? variantToElement[variant] ?? 'ul';
|
|
13
|
-
return React.createElement(Component, Object.assign({ ref: ref }, dataAttributes, otherProps));
|
|
14
|
-
});
|
|
15
|
-
export default List;
|
|
16
|
-
//# sourceMappingURL=List.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/atoms/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,MAAM,gBAAgB,GAAG;IACvB,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;CACd,CAAA;AAWD,MAAM,IAAI,GAAG,UAAU,CAA8B,SAAS,IAAI,CAChE,EACE,MAAM,GAAG,YAAY,EACrB,OAAO,GAAG,WAAW,EACrB,EAAE,EAAE,cAAc,EAClB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,cAAc,GAAG;QACrB,aAAa,EAAE,MAAM;QACrB,cAAc,EAAE,OAAO;KACxB,CAAA;IAED,MAAM,SAAS,GAAG,cAAc,IAAI,gBAAgB,CAAC,OAAO,CAAC,IAAI,IAAI,CAAA;IAErE,OAAO,oBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,IAAM,cAAc,EAAM,UAAU,EAAI,CAAA;AACpE,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,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,38 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react'
|
|
2
|
-
import type { ElementType, HTMLAttributes } from 'react'
|
|
3
|
-
|
|
4
|
-
const variantToElement = {
|
|
5
|
-
description: 'dl',
|
|
6
|
-
unordered: 'ul',
|
|
7
|
-
ordered: 'ol',
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export interface ListProps<T = HTMLElement> extends HTMLAttributes<T> {
|
|
11
|
-
/**
|
|
12
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
13
|
-
*/
|
|
14
|
-
testId?: string
|
|
15
|
-
variant?: 'description' | 'ordered' | 'unordered'
|
|
16
|
-
as?: ElementType
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const List = forwardRef<HTMLUListElement, ListProps>(function List(
|
|
20
|
-
{
|
|
21
|
-
testId = 'store-list',
|
|
22
|
-
variant = 'unordered',
|
|
23
|
-
as: MaybeComponent,
|
|
24
|
-
...otherProps
|
|
25
|
-
},
|
|
26
|
-
ref
|
|
27
|
-
) {
|
|
28
|
-
const dataAttributes = {
|
|
29
|
-
'data-testid': testId,
|
|
30
|
-
'data-fs-list': variant,
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const Component = MaybeComponent ?? variantToElement[variant] ?? 'ul'
|
|
34
|
-
|
|
35
|
-
return <Component ref={ref} {...dataAttributes} {...otherProps} />
|
|
36
|
-
})
|
|
37
|
-
|
|
38
|
-
export default List
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
-
import List from '../List'
|
|
3
|
-
|
|
4
|
-
# List
|
|
5
|
-
|
|
6
|
-
## Unordered
|
|
7
|
-
|
|
8
|
-
<Canvas>
|
|
9
|
-
<Story id="atoms-list--unordered-list" />
|
|
10
|
-
</Canvas>
|
|
11
|
-
|
|
12
|
-
## Ordered
|
|
13
|
-
|
|
14
|
-
<Canvas>
|
|
15
|
-
<Story id="atoms-list--ordered-list" />
|
|
16
|
-
</Canvas>
|
|
17
|
-
|
|
18
|
-
## Description
|
|
19
|
-
|
|
20
|
-
<Canvas>
|
|
21
|
-
<Story id="atoms-list--description-list" />
|
|
22
|
-
</Canvas>
|
|
23
|
-
|
|
24
|
-
## Props
|
|
25
|
-
|
|
26
|
-
<ArgsTable of={List} />
|
|
27
|
-
|
|
28
|
-
## CSS Selectors
|
|
29
|
-
|
|
30
|
-
```css
|
|
31
|
-
[data-fs-list] {}
|
|
32
|
-
[data-fs-list='(description|ordered|unordered)'] {}
|
|
33
|
-
```
|
|
@@ -1,73 +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 { ListProps } from '../List'
|
|
6
|
-
import Component from '../List'
|
|
7
|
-
import mdx from './List.mdx'
|
|
8
|
-
|
|
9
|
-
type ListStoryProps = ListProps & { options: string[] }
|
|
10
|
-
type DescriptionListStoryProps = ListProps & { options: string[][] }
|
|
11
|
-
|
|
12
|
-
const ListTemplate: Story<ListStoryProps> = ({ options, ...props }) => {
|
|
13
|
-
return (
|
|
14
|
-
<Component {...props}>
|
|
15
|
-
{options.map((value) => (
|
|
16
|
-
<li key={value}>{value}</li>
|
|
17
|
-
))}
|
|
18
|
-
</Component>
|
|
19
|
-
)
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const DescriptionListTemplate: Story<DescriptionListStoryProps> = ({
|
|
23
|
-
options,
|
|
24
|
-
...props
|
|
25
|
-
}) => {
|
|
26
|
-
return (
|
|
27
|
-
<Component {...props}>
|
|
28
|
-
{options.map(([title, value]) => [
|
|
29
|
-
<dt key={title}>{title}</dt>,
|
|
30
|
-
<dd key={value}>{value}</dd>,
|
|
31
|
-
])}
|
|
32
|
-
</Component>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export const UnorderedList = ListTemplate.bind({})
|
|
37
|
-
|
|
38
|
-
export const OrderedList = ListTemplate.bind({})
|
|
39
|
-
OrderedList.args = {
|
|
40
|
-
variant: 'ordered',
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export const DescriptionList = DescriptionListTemplate.bind({})
|
|
44
|
-
DescriptionList.args = {
|
|
45
|
-
options: [
|
|
46
|
-
['Ok', 'An ok item'],
|
|
47
|
-
['Good', 'A good item'],
|
|
48
|
-
['Bad', 'A bad item'],
|
|
49
|
-
],
|
|
50
|
-
variant: 'description',
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
const argTypes: ComponentArgTypes<ListStoryProps> = {
|
|
54
|
-
options: {
|
|
55
|
-
control: { type: 'array' },
|
|
56
|
-
defaultValue: ['Great', 'Ok', 'Bad'],
|
|
57
|
-
},
|
|
58
|
-
variant: {
|
|
59
|
-
options: ['description', 'ordered', 'unordered'],
|
|
60
|
-
control: { type: 'select' },
|
|
61
|
-
defaultValue: 'unordered',
|
|
62
|
-
},
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default {
|
|
66
|
-
title: 'Atoms/List',
|
|
67
|
-
argTypes,
|
|
68
|
-
parameters: {
|
|
69
|
-
docs: {
|
|
70
|
-
page: mdx,
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
}
|