@faststore/components 2.0.15-alpha.0 → 2.0.17-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.17-alpha.0](https://github.com/vtex/faststore/compare/v2.0.16-alpha.0...v2.0.17-alpha.0) (2022-12-15)
+
+
+### Features
+
+* Create `LinkButton` component ([#1558](https://github.com/vtex/faststore/issues/1558)) ([bbbebdb](https://github.com/vtex/faststore/commit/bbbebdb081f9c40315d8b661461e3b09a34b84b6))
+
+
+
+## [2.0.16-alpha.0](https://github.com/vtex/faststore/compare/v2.0.15-alpha.0...v2.0.16-alpha.0) (2022-12-15)
+
+
+### Features
+
+* Adds `Toggle` & `ToggleField` & `SROnly` components ([#1555](https://github.com/vtex/faststore/issues/1555)) ([b055c0a](https://github.com/vtex/faststore/commit/b055c0aa67291ad88e865b60e96b8a898a97db14))
+
+
+
 ## [2.0.15-alpha.0](https://github.com/vtex/faststore/compare/v2.0.14-alpha.0...v2.0.15-alpha.0) (2022-12-14)
 
 

package/dist/assets/Checked.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const Checked: FC;
+export default Checked;

package/dist/assets/Checked.js

@@ -0,0 +1,6 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const Checked = () => (React.createElement("svg", { id: "Checked", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 19 18", strokeWidth: "16", width: 15, height: 15 },
+    React.createElement("path", { d: "M15.6875 5.0625L7.8125 12.9375L3.875 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default Checked;
+//# sourceMappingURL=Checked.js.map

package/dist/assets/Checked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checked.js","sourceRoot":"","sources":["../../src/assets/Checked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,OAAO,GAAO,GAAG,EAAE,CAAC,CACxB,6BACE,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BACE,CAAC,EAAC,wCAAwC,EAC1C,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE,CACP,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/assets/index.d.ts

@@ -1,4 +1,5 @@
 export { default as CaretDown } from './CaretDown';
+export { default as Checked } from './Checked';
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as XCircle } from './XCircle';

package/dist/assets/index.js

@@ -1,4 +1,5 @@
 export { default as CaretDown } from './CaretDown';
+export { default as Checked } from './Checked';
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as XCircle } from './XCircle';

package/dist/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/atoms/List/List.d.ts

@@ -10,7 +10,7 @@ interface BaseProps {
      */
     marker?: boolean;
 }
-export declare type ListProps<T extends ElementType> = PolymorphicComponentPropsWithRef<T, BaseProps>;
+export declare type ListProps<T extends ElementType = 'ul'> = PolymorphicComponentPropsWithRef<T, BaseProps>;
 declare type ListComponent = <T extends ElementType = 'ul'>(props: ListProps<T>) => ReactElement | null;
 declare const List: ListComponent;
 export default List;

package/dist/atoms/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/atoms/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA4BzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/D,GAAsB;IAEtB,MAAM,SAAS,GAAG,EAAE,IAAI,IAAI,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,uCAEK,MAAM,yBACE,MAAM,KACvB,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/atoms/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA0BzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/D,GAAsB;IAEtB,MAAM,SAAS,GAAG,EAAE,IAAI,IAAI,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,uCAEK,MAAM,yBACE,MAAM,KACvB,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/atoms/SROnly/SROnly.d.ts

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

package/dist/atoms/SROnly/SROnly.js

@@ -0,0 +1,7 @@
+import React from 'react';
+function SROnly({ text, as }) {
+    const Component = as ?? 'span';
+    return React.createElement(Component, { "data-fs-sr-only": true }, text);
+}
+export default SROnly;
+//# sourceMappingURL=SROnly.js.map

package/dist/atoms/SROnly/SROnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SROnly.js","sourceRoot":"","sources":["../../../src/atoms/SROnly/SROnly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAS;IACjC,MAAM,SAAS,GAAG,EAAE,IAAI,MAAM,CAAA;IAE9B,OAAO,oBAAC,SAAS,+BAAkB,IAAI,CAAa,CAAA;AACtD,CAAC;AAED,eAAe,MAAM,CAAA"}

package/dist/atoms/SROnly/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SROnly';

package/dist/atoms/SROnly/index.js

@@ -0,0 +1,2 @@
+export { default } from './SROnly';
+//# sourceMappingURL=index.js.map

package/dist/atoms/SROnly/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/SROnly/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA"}

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
 export { default as Select } from './atoms/Select';
 export type { SelectProps } from './atoms/Select';
+export { default as SROnly } from './atoms/SROnly';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
@@ -32,9 +33,15 @@ export { default as DiscountBadge } from './molecules/DiscountBadge';
 export type { DiscountBadgeProps } from './molecules/DiscountBadge';
 export { default as InputField } from './molecules/InputField';
 export type { InputFieldProps } from './molecules/InputField';
+export { default as LinkButton } from './molecules/LinkButton';
+export type { LinkButtonProps } from './molecules/LinkButton';
 export { default as RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
 export { default as SelectField } from './molecules/SelectField';
 export type { SelectFieldProps } from './molecules/SelectField';
 export { default as Tag } from './molecules/Tag';
 export type { TagProps } from './molecules/Tag';
+export { default as Toggle } from './molecules/Toggle';
+export type { ToggleProps } from './molecules/Toggle';
+export { default as ToggleField } from './molecules/ToggleField';
+export type { ToggleFieldProps } from './molecules/ToggleField';

package/dist/index.js

@@ -13,13 +13,17 @@ export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export { default as Select } from './atoms/Select';
+export { default as SROnly } from './atoms/SROnly';
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
 export { default as DiscountBadge } from './molecules/DiscountBadge';
 export { default as InputField } from './molecules/InputField';
+export { default as LinkButton } from './molecules/LinkButton';
 export { default as RadioField } from './molecules/RadioField';
 export { default as SelectField } from './molecules/SelectField';
 export { default as Tag } from './molecules/Tag';
+export { default as Toggle } from './molecules/Toggle';
+export { default as ToggleField } from './molecules/ToggleField';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/molecules/LinkButton/LinkButton.d.ts

@@ -0,0 +1,5 @@
+import type { AnchorHTMLAttributes } from 'react';
+import type { ButtonProps } from '../..';
+export declare type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & ButtonProps;
+declare function LinkButton({ icon, inverse, children, disabled, iconPosition, size, variant, testId, ...otherProps }: LinkButtonProps): JSX.Element;
+export default LinkButton;

package/dist/molecules/LinkButton/LinkButton.js

@@ -0,0 +1,17 @@
+import React, { useRef } from 'react';
+import { Icon } from '../..';
+function LinkButton({ icon, inverse, children, disabled, iconPosition, size = 'regular', variant = 'primary', testId = 'fs-link-button', ...otherProps }) {
+    const linkRef = useRef(null);
+    function onFocus(e) {
+        e.preventDefault();
+        if (disabled) {
+            linkRef.current?.blur();
+        }
+    }
+    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 },
+        iconPosition === 'left' && React.createElement(Icon, { component: icon }),
+        children,
+        iconPosition === 'right' && React.createElement(Icon, { component: icon })));
+}
+export default LinkButton;
+//# sourceMappingURL=LinkButton.js.map

package/dist/molecules/LinkButton/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAM5B,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG;IAChB,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAEtD,SAAS,OAAO,CAAC,CAAa;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,CAAA;SACxB;IACH,CAAC;IAED,OAAO,CACL,2BACE,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,OAAO,sEAGH,MAAM,yBACE,IAAI,4BACD,OAAO,4BACP,OAAO,6BACN,QAAQ,KAC7B,UAAU;QAEb,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QACpD,QAAQ;QACR,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACpD,CACL,CAAA;AACH,CAAC;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/LinkButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './LinkButton';
+export type { LinkButtonProps } from './LinkButton';

package/dist/molecules/LinkButton/index.js

@@ -0,0 +1,2 @@
+export { default } from './LinkButton';
+//# sourceMappingURL=index.js.map

package/dist/molecules/LinkButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist/molecules/Toggle/Toggle.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { InputHTMLAttributes } from 'react';
+export interface ToggleProps extends InputHTMLAttributes<Omit<HTMLInputElement, 'disabled' | 'type'>> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID to identify input and corresponding label.
+     */
+    id: string;
+    /**
+     * Specifies that this input should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Controls the component's direction.
+     */
+    variant?: 'horizontal' | 'vertical';
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/molecules/Toggle/Toggle.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { Input, Icon } from './../../';
+import { Checked } from '../../assets';
+const Toggle = forwardRef(function Toggle({ testId = 'fs-toggle', id, disabled, variant = 'horizontal', ...otherProps }, ref) {
+    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("span", { "data-fs-toggle-knob": true },
+            React.createElement(Icon, { component: React.createElement(Checked, null) }))));
+});
+export default Toggle;
+//# sourceMappingURL=Toggle.js.map

package/dist/molecules/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/molecules/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAsBtC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CACtE,EACE,MAAM,GAAG,WAAW,EACpB,EAAE,EACF,QAAQ,EACR,OAAO,GAAG,YAAY,EACtB,GAAG,UAAU,EACD,EACd,GAAG;IAEH,OAAO,CACL,+EAA4C,OAAO,iBAAe,MAAM;QACtE,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,KACd,UAAU,GACd;QACF;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,OAAO,OAAG,GAAI,CAC3B,CACH,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/molecules/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Toggle';
+export type { ToggleProps } from './Toggle';

package/dist/molecules/Toggle/index.js

@@ -0,0 +1,2 @@
+export { default } from './Toggle';
+//# sourceMappingURL=index.js.map

package/dist/molecules/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA"}

package/dist/molecules/ToggleField/ToggleField.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare type ToggleFieldProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID to identify input and corresponding label.
+     */
+    id: string;
+    /**
+     * The text displayed to identify the input.
+     */
+    label: string;
+    /**
+     * Controls whether the label will be displayed or not.
+     */
+    displayLabel?: boolean;
+    /**
+     * Specifies that this input should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Controls the component's direction.
+     */
+    variant?: 'horizontal' | 'vertical';
+};
+declare const ToggleField: React.ForwardRefExoticComponent<ToggleFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default ToggleField;

package/dist/molecules/ToggleField/ToggleField.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import { Label, SROnly, Toggle } from './../../';
+const ToggleField = forwardRef(function ToggleField({ testId = 'fs-toggle-field', id, label, disabled, displayLabel = true, variant = 'horizontal', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-toggle-field": true, "data-testid": testId },
+        React.createElement(Toggle, { id: id, variant: variant, disabled: disabled, ...otherProps }),
+        displayLabel ? (React.createElement(Label, { "data-fs-toggle-field-label": true, htmlFor: id }, label)) : (React.createElement(SROnly, { text: label }))));
+});
+export default ToggleField;
+//# sourceMappingURL=ToggleField.js.map

package/dist/molecules/ToggleField/ToggleField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.js","sourceRoot":"","sources":["../../../src/molecules/ToggleField/ToggleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA6BhD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,MAAM,GAAG,iBAAiB,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,OAAO,GAAG,YAAY,EACtB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,+CAAoC,MAAM;QACrD,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,KAAM,UAAU,GAAI;QACvE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,KAAK,wCAA4B,OAAO,EAAE,EAAE,IAC1C,KAAK,CACA,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,IAAI,EAAE,KAAK,GAAI,CACxB,CACG,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/ToggleField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ToggleField';
+export type { ToggleFieldProps } from './ToggleField';

package/dist/molecules/ToggleField/index.js

@@ -0,0 +1,2 @@
+export { default } from './ToggleField';
+//# sourceMappingURL=index.js.map

package/dist/molecules/ToggleField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/ToggleField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.15-alpha.0",
+  "version": "2.0.17-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -28,5 +28,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "9b72e9d993f45bf072144751654854a11e099d17"
+  "gitHead": "63d93423c77df7aadbbd8ba8b5f9d39302e6fd3e"
 }

package/src/assets/Checked.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Checked: FC = () => (
+  <svg
+    id="Checked"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 19 18"
+    strokeWidth="16"
+    width={15}
+    height={15}
+  >
+    <path
+      d="M15.6875 5.0625L7.8125 12.9375L3.875 9"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Checked

package/src/assets/index.ts

@@ -1,4 +1,5 @@
 export { default as CaretDown } from './CaretDown'
+export { default as Checked } from './Checked'
 export { default as X } from './X'
 export { default as ShoppingCart } from './ShoppingCart'
 export { default as XCircle } from './XCircle'

package/src/atoms/List/List.tsx

@@ -17,10 +17,8 @@ interface BaseProps {
   marker?: boolean
 }
 
-export type ListProps<T extends ElementType> = PolymorphicComponentPropsWithRef<
-  T,
-  BaseProps
->
+export type ListProps<T extends ElementType = 'ul'> =
+  PolymorphicComponentPropsWithRef<T, BaseProps>
 
 type ListComponent = <T extends ElementType = 'ul'>(
   props: ListProps<T>

package/src/atoms/SROnly/SROnly.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import type { ElementType } from 'react'
+
+interface Props {
+  text: string
+  as?: ElementType
+}
+
+function SROnly({ text, as }: Props) {
+  const Component = as ?? 'span'
+
+  return <Component data-fs-sr-only>{text}</Component>
+}
+
+export default SROnly

package/src/atoms/SROnly/index.ts

@@ -0,0 +1 @@
+export { default } from './SROnly'

package/src/index.ts

@@ -26,6 +26,7 @@ export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
 export { default as Select } from './atoms/Select'
 export type { SelectProps } from './atoms/Select'
+export { default as SROnly } from './atoms/SROnly'
 
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton'
@@ -37,9 +38,15 @@ export { default as DiscountBadge } from './molecules/DiscountBadge'
 export type { DiscountBadgeProps } from './molecules/DiscountBadge'
 export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
+export { default as LinkButton } from './molecules/LinkButton'
+export type { LinkButtonProps } from './molecules/LinkButton'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
 export { default as Tag } from './molecules/Tag'
 export type { TagProps } from './molecules/Tag'
+export { default as Toggle } from './molecules/Toggle'
+export type { ToggleProps } from './molecules/Toggle'
+export { default as ToggleField } from './molecules/ToggleField'
+export type { ToggleFieldProps } from './molecules/ToggleField'

package/src/molecules/LinkButton/LinkButton.tsx

@@ -0,0 +1,51 @@
+import React, { useRef } from 'react'
+import type { FocusEvent, AnchorHTMLAttributes } from 'react'
+
+import { Icon } from '../..'
+import type { ButtonProps } from '../..'
+
+export type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> &
+  ButtonProps
+
+function LinkButton({
+  icon,
+  inverse,
+  children,
+  disabled,
+  iconPosition,
+  size = 'regular',
+  variant = 'primary',
+  testId = 'fs-link-button',
+  ...otherProps
+}: LinkButtonProps) {
+  const linkRef = useRef<HTMLAnchorElement | null>(null)
+
+  function onFocus(e: FocusEvent) {
+    e.preventDefault()
+
+    if (disabled) {
+      linkRef.current?.blur()
+    }
+  }
+
+  return (
+    <a
+      ref={linkRef}
+      onFocus={onFocus}
+      data-fs-button
+      data-fs-link-button
+      data-testid={testId}
+      data-fs-button-size={size}
+      data-fs-button-variant={variant}
+      data-fs-button-inverse={inverse}
+      data-fs-button-disabled={disabled}
+      {...otherProps}
+    >
+      {iconPosition === 'left' && <Icon component={icon} />}
+      {children}
+      {iconPosition === 'right' && <Icon component={icon} />}
+    </a>
+  )
+}
+
+export default LinkButton

package/src/molecules/LinkButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LinkButton'
+export type { LinkButtonProps } from './LinkButton'

package/src/molecules/Toggle/Toggle.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react'
+import type { InputHTMLAttributes } from 'react'
+import { Input, Icon } from './../../'
+import { Checked } from '../../assets'
+
+export interface ToggleProps
+  extends InputHTMLAttributes<Omit<HTMLInputElement, 'disabled' | 'type'>> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * Specifies that this input should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Controls the component's direction.
+   */
+  variant?: 'horizontal' | 'vertical'
+}
+
+const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
+  {
+    testId = 'fs-toggle',
+    id,
+    disabled,
+    variant = 'horizontal',
+    ...otherProps
+  }: ToggleProps,
+  ref
+) {
+  return (
+    <div data-fs-toggle data-fs-toggle-variant={variant} data-testid={testId}>
+      <Input
+        id={id}
+        ref={ref}
+        role="switch"
+        type="checkbox"
+        disabled={disabled}
+        {...otherProps}
+      />
+      <span data-fs-toggle-knob>
+        <Icon component={<Checked />} />
+      </span>
+    </div>
+  )
+})
+
+export default Toggle

package/src/molecules/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Toggle'
+export type { ToggleProps } from './Toggle'

package/src/molecules/ToggleField/ToggleField.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import { Label, SROnly, Toggle } from './../../'
+
+export type ToggleFieldProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify the input.
+   */
+  label: string
+  /**
+   * Controls whether the label will be displayed or not.
+   */
+  displayLabel?: boolean
+  /**
+   * Specifies that this input should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Controls the component's direction.
+   */
+  variant?: 'horizontal' | 'vertical'
+}
+
+const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(
+  function ToggleField(
+    {
+      testId = 'fs-toggle-field',
+      id,
+      label,
+      disabled,
+      displayLabel = true,
+      variant = 'horizontal',
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-toggle-field data-testid={testId}>
+        <Toggle id={id} variant={variant} disabled={disabled} {...otherProps} />
+        {displayLabel ? (
+          <Label data-fs-toggle-field-label htmlFor={id}>
+            {label}
+          </Label>
+        ) : (
+          <SROnly text={label} />
+        )}
+      </div>
+    )
+  }
+)
+
+export default ToggleField

package/src/molecules/ToggleField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ToggleField'
+export type { ToggleFieldProps } from './ToggleField'