@faststore/components - npm Package Compare versions

Comparing version 2.0.19-alpha.0 to 2.0.24-alpha.0

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+## [2.0.24-alpha.0](https://github.com/vtex/faststore/compare/v2.0.23-alpha.0...v2.0.24-alpha.0) (2022-12-20)
+
+
+### Chores
+
+* Review components docs ([#1557](https://github.com/vtex/faststore/issues/1557)) ([2da23a0](https://github.com/vtex/faststore/commit/2da23a0ffe2f201f7e6163ea3db8dea4de07afa8))
+
+
+
 ## [2.0.19-alpha.0](https://github.com/vtex/faststore/compare/v2.0.18-alpha.0...v2.0.19-alpha.0) (2022-12-16)
@@ -8,0 +17,0 @@

dist/atoms/Badge/Badge.js

 import React, { forwardRef } from 'react';
 const Badge = forwardRef(function Badge({ testId = 'fs-badge', size = 'small', variant = 'neutral', counter = false, 'aria-label': ariaLabel, children, ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-fs-badge": true, "data-testid": testId, "aria-label": ariaLabel, "data-fs-badge-variant": counter ? null : variant, "data-fs-badge-size": size, "data-fs-badge-counter": counter, ...otherProps },
+    return (React.createElement("div", { ref: ref, "data-fs-badge": true, "aria-label": ariaLabel, "data-fs-badge-variant": counter ? null : variant, "data-fs-badge-size": size, "data-fs-badge-counter": counter, "data-testid": testId, ...otherProps },
         React.createElement("div", { "data-fs-badge-wrapper": true }, children)));
@@ -5,0 +5,0 @@ });

dist/atoms/Button/Button.js

 import React, { forwardRef } from 'react';
 import { Icon } from '../../index';
 const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
-    return (React.createElement("button", { ref: ref, "data-testid": testId, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-variant": variant, disabled: disabled, ...otherProps },
+    return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
         icon && iconPosition === 'left' && React.createElement(Icon, { component: icon }),
@@ -6,0 +6,0 @@ children,

dist/atoms/Icon/Icon.d.ts

@@ -5,11 +5,11 @@ import type { HTMLAttributes, ReactNode } from 'react';
     /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
      * A React component that will be rendered as an icon.
      */
     component: ReactNode;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
 }
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

dist/atoms/Link/Link.d.ts

@@ -9,8 +9,8 @@ import type { ElementType, ReactElement } from 'react';
     /**
-   * Specifies the component variant.
-   */
+     * Specifies the component variant.
+     */
     variant?: 'default' | 'display' | 'inline';
     /**
-    * Defines use of inverted color.
-    */
+     * Defines use of inverted color.
+     */
     inverse?: boolean;
@@ -17,0 +17,0 @@ /**

dist/atoms/Link/Link.js

 import React, { forwardRef } from 'react';
-const Link = forwardRef(function Link({ as, children, variant = 'default', size = "regular", inverse, testId = 'fs-link', ...otherProps }, ref) {
+const Link = forwardRef(function Link({ as, children, variant = 'default', size = 'regular', inverse, testId = 'fs-link', ...otherProps }, ref) {
     const Component = as ?? 'a';
@@ -4,0 +4,0 @@ return (React.createElement(Component, { ref: ref, "data-fs-link": true, "data-fs-link-variant": variant, "data-fs-link-inverse": inverse, "data-fs-link-size": size, "data-testid": testId, ...otherProps }, children));

dist/atoms/List/List.js

 import React, { forwardRef } from 'react';
 const List = forwardRef(function List({ as, marker, testId = 'fs-list', ...otherProps }, ref) {
     const Component = as ?? 'ul';
-    return (React.createElement(Component, { ref: ref, "data-fs-list": true, "data-testid": testId, "data-fs-list-marker": marker, ...otherProps }));
+    return (React.createElement(Component, { ref: ref, "data-fs-list": true, "data-fs-list-marker": marker, "data-testid": testId, ...otherProps }));
 });
 export default List;
 //# sourceMappingURL=List.js.map

dist/atoms/Overlay/Overlay.js

 import React, { forwardRef } from 'react';
 const Overlay = forwardRef(function Overlay({ testId = 'fs-overlay', ...otherProps }, ref) {
-    return (React.createElement("div", { role: "presentation", "data-fs-overlay": true, "data-testid": testId, ref: ref, ...otherProps }));
+    return (React.createElement("div", { ref: ref, "data-fs-overlay": true, role: "presentation", "data-testid": testId, ...otherProps }));
 });
 export default Overlay;
 //# sourceMappingURL=Overlay.js.map

dist/atoms/Price/Price.d.ts

@@ -7,2 +7,6 @@ import type { HTMLAttributes, ElementType, ReactNode } from 'react';
     /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
      * Set the HTML element tag of this component.
@@ -12,6 +16,2 @@ */
     /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    /**
      * The raw price value.
@@ -18,0 +18,0 @@ */

dist/atoms/Price/Price.js

 import React, { forwardRef } from 'react';
 const Price = forwardRef(function Price({ value, as: Component = 'span', variant = 'selling', testId = 'fs-price', formatter = (price) => price, ...otherProps }, ref) {
     const formattedPrice = formatter(value, variant);
-    return (React.createElement(Component, { ref: ref, "data-fs-price": true, "data-testid": testId, "data-fs-price-variant": variant, ...otherProps }, formattedPrice));
+    return (React.createElement(Component, { ref: ref, "data-fs-price": true, "data-fs-price-variant": variant, "data-testid": testId, ...otherProps }, formattedPrice));
 });
 export default Price;
 //# sourceMappingURL=Price.js.map

dist/atoms/Radio/Radio.js

 import React, { forwardRef } from 'react';
 const Radio = forwardRef(function Radio({ testId = 'fs-radio', ...otherProps }, ref) {
-    return (React.createElement("input", { ref: ref, "data-fs-radio": true, "data-testid": testId, type: "radio", ...otherProps }));
+    return (React.createElement("input", { ref: ref, "data-fs-radio": true, type: "radio", "data-testid": testId, ...otherProps }));
 });
 export default Radio;
 //# sourceMappingURL=Radio.js.map

dist/atoms/Select/Select.d.ts

@@ -5,2 +5,6 @@ import React from 'react';
     /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
      * Assigns an identifier to link the UISelect component and its label.
@@ -15,8 +19,4 @@ */
     options: Record<string, string>;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

dist/atoms/Select/Select.js

@@ -6,3 +6,3 @@ import React, { forwardRef } from 'react';
     return (React.createElement("div", { "data-fs-select": true },
-        React.createElement("select", { id: id, ref: ref, "data-testid": testId, ...otherProps }, Object.keys(options).map((key) => (React.createElement("option", { key: key, value: key }, options[key])))),
+        React.createElement("select", { ref: ref, id: id, "data-testid": testId, ...otherProps }, Object.keys(options).map((key) => (React.createElement("option", { key: key, value: key }, options[key])))),
         React.createElement(Icon, { "data-fs-select-icon": true, component: React.createElement(CaretDown, null) })));
@@ -9,0 +9,0 @@ });

dist/atoms/SROnly/SROnly.d.ts

 import type { ElementType } from 'react';
-interface Props {
+interface SROnlyProps {
     text: string;
     as?: ElementType;
 }
-declare function SROnly({ text, as }: Props): JSX.Element;
+declare function SROnly({ text, as }: SROnlyProps): JSX.Element;
 export default SROnly;

dist/molecules/BuyButton/BuyButton.d.ts

 /// <reference types="react" />
 import type { ButtonProps } from '../../index';
-declare type Props = ButtonProps;
-declare function BuyButton({ icon, children, ...otherProps }: Props): JSX.Element;
+declare type BuyButtonProps = ButtonProps;
+declare function BuyButton({ testId, icon, children, ...otherProps }: BuyButtonProps): JSX.Element;
 export default BuyButton;

dist/molecules/BuyButton/BuyButton.js

 import React from 'react';
 import { Button, Icon } from '../../index';
 import { ShoppingCart } from '../../assets';
-function BuyButton({ icon, children, ...otherProps }) {
-    return (React.createElement(Button, { "data-fs-buy-button": true, ...otherProps },
+function BuyButton({ testId = 'fs-buy-button', icon, children, ...otherProps }) {
+    return (React.createElement(Button, { "data-fs-buy-button": true, "data-testid": testId, ...otherProps },
         React.createElement(Icon, { component: React.createElement(ShoppingCart, null) }),
@@ -7,0 +7,0 @@ children));

dist/molecules/DiscountBadge/DiscountBadge.d.ts

 /// <reference types="react" />
 export declare type DiscountBadgeProps = {
     /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
      * Specifies price without discount applied.
@@ -12,6 +16,2 @@ */
     /**
-     * Sets the component's size.
-     */
-    size?: 'small' | 'big';
-    /**
      * Sets the limit percentage value to consider a low discount.
@@ -25,3 +25,3 @@ */
 };
-declare const DiscountBadge: ({ listPrice, spotPrice, size, thresholdLow, thresholdHigh, }: DiscountBadgeProps) => JSX.Element;
+declare const DiscountBadge: ({ listPrice, spotPrice, thresholdLow, thresholdHigh, testId, }: DiscountBadgeProps) => JSX.Element;
 export default DiscountBadge;

dist/molecules/DiscountBadge/DiscountBadge.js

 import React from 'react';
 import { Badge } from '../..';
 import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent';
-const DiscountBadge = ({ listPrice, spotPrice, size = 'small', thresholdLow = 15, thresholdHigh = 40, }) => {
+const DiscountBadge = ({ listPrice, spotPrice, thresholdLow = 15, thresholdHigh = 40, testId = 'fs-discount-badge', }) => {
     const discountPercent = useDiscountPercent(listPrice, spotPrice);
@@ -14,3 +14,3 @@ if (discountPercent === 0) {
             : 'high';
-    return (React.createElement(Badge, { size: size, "data-fs-discount-badge": true, "data-fs-discount-badge-variant": discountVariant },
+    return (React.createElement(Badge, { "data-fs-discount-badge": true, "data-fs-discount-badge-variant": discountVariant, "data-testid": testId },
         discountPercent,
@@ -17,0 +17,0 @@ "% off"));

dist/molecules/IconButton/IconButton.js

 import React, { forwardRef } from 'react';
 import { Icon, Button } from '../../index';
 const IconButton = forwardRef(function IconButton({ icon, children, testId = 'fs-icon-button', 'aria-label': ariaLabel, variant, ...otherProps }, ref) {
-    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, testId: testId, variant: variant ?? 'tertiary', "aria-label": ariaLabel, ...otherProps },
+    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', "aria-label": ariaLabel, testId: testId, ...otherProps },
         children,
@@ -6,0 +6,0 @@ React.createElement(Icon, { component: icon })));

dist/molecules/InputField/InputField.d.ts

@@ -5,2 +5,6 @@ import type { MutableRefObject } from 'react';
     /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
      * ID to identify input and corresponding label.
@@ -55,3 +59,3 @@ */
 export declare type InputFieldProps = DefaultProps & Omit<InputProps, 'disabled' | 'onSubmit'> & ActionableInputField;
-declare const InputField: ({ id, label, type, error, displayClearButton, actionable, buttonActionText, onSubmit, onClear, placeholder, inputRef, disabled, value, ...otherProps }: InputFieldProps) => JSX.Element;
+declare const InputField: ({ id, label, type, error, displayClearButton, actionable, buttonActionText, onSubmit, onClear, placeholder, inputRef, disabled, value, testId, ...otherProps }: InputFieldProps) => JSX.Element;
 export default InputField;

dist/molecules/InputField/InputField.js

@@ -5,6 +5,6 @@ import React from 'react';
 const InputField = ({ id, label, type = 'text', error, displayClearButton, actionable, buttonActionText = 'Apply', onSubmit, onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
-inputRef, disabled, value, ...otherProps }) => {
+inputRef, disabled, value, testId = 'fs-input-field', ...otherProps }) => {
     const shouldDisplayError = !disabled && error && error !== '';
     const shouldDisplayButton = actionable && !disabled && value !== '';
-    return (React.createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '' },
+    return (React.createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '', "data-testid": testId },
         React.createElement(Input, { id: id, type: type, value: value, ref: inputRef, disabled: disabled, placeholder: placeholder, ...otherProps }),
@@ -11,0 +11,0 @@ React.createElement(Label, { htmlFor: id }, label),

dist/molecules/LinkButton/LinkButton.js

@@ -11,3 +11,3 @@ import React, { useRef } from 'react';
     }
-    return (React.createElement("a", { ref: linkRef, onFocus: onFocus, "data-fs-button": true, "data-fs-link-button": true, "data-testid": testId, "data-fs-button-size": size, "data-fs-button-variant": variant, "data-fs-button-inverse": inverse, "data-fs-button-disabled": disabled, ...otherProps },
+    return (React.createElement("a", { ref: linkRef, "data-fs-button": true, "data-fs-link-button": true, "data-fs-button-size": size, "data-fs-button-variant": variant, "data-fs-button-inverse": inverse, "data-fs-button-disabled": disabled, onFocus: onFocus, "data-testid": testId, ...otherProps },
         iconPosition === 'left' && React.createElement(Icon, { component: icon }),
@@ -14,0 +14,0 @@ children,

dist/molecules/SelectField/SelectField.js

 import React, { forwardRef } from 'react';
 import { Label, Select } from '../..';
 const SelectField = forwardRef(function SelectField({ id, label, options, testId = 'fs-select-field', ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-fs-select-field": true },
+    return (React.createElement("div", { ref: ref, "data-fs-select-field": true, "data-testid": testId },
         React.createElement(Label, { "data-fs-select-field-label": true, htmlFor: id }, label),
-        React.createElement(Select, { id: id, options: options, "data-testid": testId, ...otherProps })));
+        React.createElement(Select, { id: id, options: options, ...otherProps })));
 });
 export default SelectField;
 //# sourceMappingURL=SelectField.js.map

dist/molecules/Tag/Tag.js

@@ -6,3 +6,3 @@ import React, { forwardRef } from 'react';
 const Tag = forwardRef(function Tag({ testId = 'fs-tag', label, icon, iconButtonLabel, onClose, ...otherProps }, ref) {
-    return (React.createElement(Badge, { ref: ref, "data-fs-tag": true, "data-testid": testId, size: "big", ...otherProps },
+    return (React.createElement(Badge, { ref: ref, "data-fs-tag": true, size: "big", "data-testid": testId, ...otherProps },
         React.createElement("span", { "data-fs-tag-label": true }, label),
@@ -9,0 +9,0 @@ React.createElement("button", { "data-fs-tag-icon-button": true, "aria-label": iconButtonLabel ? iconButtonLabel : 'remove', onClick: onClose },

dist/molecules/Toggle/Toggle.js

@@ -6,3 +6,3 @@ import React, { forwardRef } from 'react';
     return (React.createElement("div", { "data-fs-toggle": true, "data-fs-toggle-variant": variant, "data-testid": testId },
-        React.createElement(Input, { id: id, ref: ref, role: "switch", type: "checkbox", disabled: disabled, ...otherProps }),
+        React.createElement(Input, { ref: ref, id: id, role: "switch", type: "checkbox", disabled: disabled, ...otherProps }),
         React.createElement("span", { "data-fs-toggle-knob": true },
@@ -9,0 +9,0 @@ React.createElement(Icon, { component: React.createElement(Checked, null) }))));

package.json

 {
   "name": "@faststore/components",
-  "version": "2.0.19-alpha.0",
+  "version": "2.0.24-alpha.0",
   "module": "dist/index.js",
@@ -31,3 +31,3 @@ "typings": "dist/index.d.ts",
   },
-  "gitHead": "40266ca0a2dc46a9a3da1632caf5c8a264157efd"
+  "gitHead": "b59392c361cae99ef9b261125b561860b59ee6cd"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

131542

increased by0.84%

Lines of code

2629

increased by0.81%

No dependency changes