@faststore/components 2.0.18-alpha.0 → 2.0.24-alpha.0

package/dist/organisms/Hero/Hero.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+declare type Variant = 'primary' | 'secondary';
+declare type ColorVariant = 'main' | 'light' | 'accent';
+interface HeroContext {
+    variant: Variant;
+    colorVariant: ColorVariant;
+}
+declare const HeroContext: React.Context<HeroContext | undefined>;
+export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specifies the component variant.
+     */
+    variant?: Variant;
+    /**
+     * Specifies the component's color variant combination.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+}
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement>>;
+export declare function useHero(): HeroContext;
+export default Hero;

package/dist/organisms/Hero/Hero.js

@@ -0,0 +1,16 @@
+import React, { forwardRef, useContext, createContext } from 'react';
+const HeroContext = createContext(undefined);
+const Hero = forwardRef(function Hero({ children, testId = 'fs-hero', variant = 'primary', colorVariant = 'main', ...otherProps }, ref) {
+    const context = { variant, colorVariant };
+    return (React.createElement(HeroContext.Provider, { value: context },
+        React.createElement("article", { ref: ref, "data-fs-hero": true, "data-fs-hero-variant": variant, "data-fs-hero-color-variant": colorVariant, "data-testid": testId, ...otherProps }, children)));
+});
+export function useHero() {
+    const context = useContext(HeroContext);
+    if (context === undefined) {
+        throw new Error('Do not use Hero components outside the Hero context.');
+    }
+    return context;
+}
+export default Hero;
+//# sourceMappingURL=Hero.js.map

package/dist/organisms/Hero/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/organisms/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAWpE,MAAM,WAAW,GAAG,aAAa,CAA0B,SAAS,CAAC,CAAA;AAkBrE,MAAM,IAAI,GAAG,UAAU,CAA4B,SAAS,IAAI,CAC9D,EACE,QAAQ,EACR,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,SAAS,EACnB,YAAY,GAAG,MAAM,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,CAAA;IAEzC,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAClC,iCACE,GAAG,EAAE,GAAG,gDAEc,OAAO,gCACD,YAAY,iBAC3B,MAAM,KACf,UAAU,IAEb,QAAQ,CACD,CACW,CACxB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,OAAO;IACrB,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEvC,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;KACxE;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,IAAI,CAAA"}

package/dist/organisms/Hero/HeroHeading.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content for the h1 tag.
+     */
+    title: string;
+    /**
+     * Content for the p tag.
+     */
+    subtitle: string;
+    /**
+     * Icon component for additional customization.
+     */
+    icon?: ReactNode;
+    /**
+     * Specifies the URL the action button goes to.
+     */
+    link?: string;
+    /**
+     * Specifies the action button's content.
+     */
+    linkText?: string;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const HeroHeading: React.ForwardRefExoticComponent<HeroHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default HeroHeading;

package/dist/organisms/Hero/HeroHeading.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { Icon, LinkButton } from '../..';
+import { ArrowRight } from '../../assets';
+import { useHero } from './Hero';
+const HeroHeading = forwardRef(function HeroHeading({ icon, link, title, linkText, subtitle, children, testId = 'fs-hero-heading', ...otherProps }, ref) {
+    const { variant, colorVariant } = useHero();
+    return (React.createElement("header", { ref: ref, "data-fs-hero-heading": true, "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-hero-wrapper": true, className: "layout__content" },
+            React.createElement("div", { "data-fs-hero-info": true },
+                React.createElement("h1", { "data-fs-hero-title": true }, title),
+                React.createElement("p", { "data-fs-hero-subtitle": true }, subtitle),
+                !!link && (React.createElement(LinkButton, { href: link, inverse: colorVariant === 'main', icon: React.createElement(ArrowRight, null), iconPosition: "right" }, linkText))),
+            icon && variant === 'secondary' && (React.createElement(Icon, { "data-fs-hero-icon": true, component: icon })))));
+});
+export default HeroHeading;
+//# sourceMappingURL=HeroHeading.js.map

package/dist/organisms/Hero/HeroHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroHeading.js","sourceRoot":"","sources":["../../../src/organisms/Hero/HeroHeading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AA6BhC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,iBAAiB,EAC1B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAA;IAE3C,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,+CAEK,MAAM,KACf,UAAU;QAEd,2DAA0B,SAAS,EAAC,iBAAiB;YACnD;gBACE,0DAAwB,KAAK,CAAM;gBACnC,4DAA0B,QAAQ,CAAK;gBACtC,CAAC,CAAC,IAAI,IAAI,CACT,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,YAAY,KAAK,MAAM,EAChC,IAAI,EAAE,oBAAC,UAAU,OAAG,EACpB,YAAY,EAAC,OAAO,IAEnB,QAAQ,CACE,CACd,CACG;YACL,IAAI,IAAI,OAAO,KAAK,WAAW,IAAI,CAClC,oBAAC,IAAI,+BAAmB,SAAS,EAAE,IAAI,GAAI,CAC5C,CACG,CACC,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/organisms/Hero/HeroImage.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface HeroImageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const HeroImage: React.ForwardRefExoticComponent<HeroImageProps & React.RefAttributes<HTMLDivElement>>;
+export default HeroImage;

package/dist/organisms/Hero/HeroImage.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const HeroImage = forwardRef(function HeroImage({ children, testId = 'fs-hero-image', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-hero-image": true, "data-testid": testId, ...otherProps }, children));
+});
+export default HeroImage;
+//# sourceMappingURL=HeroImage.js.map

package/dist/organisms/Hero/HeroImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroImage.js","sourceRoot":"","sources":["../../../src/organisms/Hero/HeroImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,6CAAkC,MAAM,KAAM,UAAU,IAClE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/organisms/Hero/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './Hero';
+export type { HeroProps } from './Hero';
+export { default as HeroImage } from './HeroImage';
+export type { HeroImageProps } from './HeroImage';
+export { default as HeroHeading } from './HeroHeading';
+export type { HeroHeadingProps } from './HeroHeading';

package/dist/organisms/Hero/index.js

@@ -0,0 +1,4 @@
+export { default } from './Hero';
+export { default as HeroImage } from './HeroImage';
+export { default as HeroHeading } from './HeroHeading';
+//# sourceMappingURL=index.js.map

package/dist/organisms/Hero/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAGhC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.18-alpha.0",
+  "version": "2.0.24-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": "f6117ac7008ebb70368642c145bab4e1f18be831"
+  "gitHead": "b59392c361cae99ef9b261125b561860b59ee6cd"
 }

package/src/assets/ArrowRight.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const ArrowRight: FC = () => (
+  <svg
+    id="ArrowRight"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+      <rect width="256" height="256" fill="none"></rect>
+      <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
+      <polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></polyline>
+  </svg>
+)
+
+export default ArrowRight

package/src/assets/House.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const House: FC = () => (
+  <svg
+    id="House"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <path d="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.5a8.3,8.3,0,0,1,2.6-5.9l80-72.7a8,8,0,0,1,10.8,0l80,72.7a8.3,8.3,0,0,1,2.6,5.9V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></path>
+  </svg>
+)
+
+export default House

package/src/assets/index.ts

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

package/src/atoms/Badge/Badge.tsx

@@ -49,11 +49,11 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
     <div
       ref={ref}
       data-fs-badge
-      data-testid={testId}
       aria-label={ariaLabel}
       data-fs-badge-variant={counter ? null : variant}
       data-fs-badge-size={size}
       data-fs-badge-counter={counter}
+      data-testid={testId}
       {...otherProps}
     >
       <div data-fs-badge-wrapper>{children}</div>

package/src/atoms/Button/Button.tsx

@@ -54,12 +54,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   return (
     <button
       ref={ref}
-      data-testid={testId}
       data-fs-button
       data-fs-button-inverse={inverse}
       data-fs-button-size={size}
       data-fs-button-variant={variant}
       disabled={disabled}
+      data-testid={testId}
       {...otherProps}
     >
       {icon && iconPosition === 'left' && <Icon component={icon} />}

package/src/atoms/Icon/Icon.tsx

@@ -2,14 +2,14 @@ import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * 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
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  component: ReactNode
 }
 
 const Icon = forwardRef<HTMLSpanElement, IconProps>(function Button(

package/src/atoms/Link/Link.tsx

@@ -8,12 +8,12 @@ type LinkBaseProps = {
    */
   testId?: string
   /**
- * Specifies the component variant.
- */
+   * Specifies the component variant.
+   */
   variant?: 'default' | 'display' | 'inline'
   /**
-  * Defines use of inverted color.
-  */
+   * Defines use of inverted color.
+   */
   inverse?: boolean
   /**
    * Defines size os element
@@ -23,10 +23,8 @@ type LinkBaseProps = {
 
 export type LinkElementType = ElementType
 
-export type LinkProps<C extends LinkElementType = 'a'> = PolymorphicComponentPropsWithRef<
-  C,
-  LinkBaseProps
->
+export type LinkProps<C extends LinkElementType = 'a'> =
+  PolymorphicComponentPropsWithRef<C, LinkBaseProps>
 
 type LinkComponent = <C extends LinkElementType = 'a'>(
   props: LinkProps<C>
@@ -35,20 +33,27 @@ type LinkComponent = <C extends LinkElementType = 'a'>(
 const Link: LinkComponent = forwardRef(function Link<
   C extends LinkElementType = 'a'
 >(
-  { as, children, variant = 'default', size="regular", inverse, testId = 'fs-link', ...otherProps }: LinkProps<C>,
+  {
+    as,
+    children,
+    variant = 'default',
+    size = 'regular',
+    inverse,
+    testId = 'fs-link',
+    ...otherProps
+  }: LinkProps<C>,
   ref?: PolymorphicRef<C>
 ) {
-
   const Component = as ?? 'a'
 
   return (
-    <Component 
-      ref={ref} 
-      data-fs-link 
+    <Component
+      ref={ref}
+      data-fs-link
       data-fs-link-variant={variant}
       data-fs-link-inverse={inverse}
       data-fs-link-size={size}
-      data-testid={testId} 
+      data-testid={testId}
       {...otherProps}
     >
       {children}

package/src/atoms/List/List.tsx

@@ -36,8 +36,8 @@ const List: ListComponent = forwardRef(function List<
     <Component
       ref={ref}
       data-fs-list
-      data-testid={testId}
       data-fs-list-marker={marker}
+      data-testid={testId}
       {...otherProps}
     />
   )

package/src/atoms/Overlay/Overlay.tsx

@@ -14,10 +14,10 @@ const Overlay = forwardRef<HTMLDivElement, Props>(function Overlay(
 ) {
   return (
     <div
-      role="presentation"
+      ref={ref}
       data-fs-overlay
+      role="presentation"
       data-testid={testId}
-      ref={ref}
       {...otherProps}
     />
   )

package/src/atoms/Price/Price.tsx

@@ -12,14 +12,14 @@ export type PriceFormatter = (price: number, variant: PriceVariant) => ReactNode
 
 export interface PriceProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
-  /**
-   * Set the HTML element tag of this component.
-   */
-  as?: ElementType
   /**
    * 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.
+   */
+  as?: ElementType
   /**
    * The raw price value.
    */
@@ -52,8 +52,8 @@ const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
       <Component
         ref={ref}
         data-fs-price
-        data-testid={testId}
         data-fs-price-variant={variant}
+        data-testid={testId}
         {...otherProps}
       >
         {formattedPrice}

package/src/atoms/Radio/Radio.tsx

@@ -17,8 +17,8 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
     <input
       ref={ref}
       data-fs-radio
-      data-testid={testId}
       type="radio"
+      data-testid={testId}
       {...otherProps}
     />
   )

package/src/atoms/SROnly/SROnly.tsx

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

package/src/atoms/Select/Select.tsx

@@ -4,6 +4,10 @@ import { Icon } from '../..'
 import { CaretDown } from '../../assets'
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * 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.
    */
@@ -14,10 +18,6 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
    * will be displayed in the UI.
    */
   options: Record<string, string>
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
 }
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
@@ -26,14 +26,14 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
 ) {
   return (
     <div data-fs-select>
-      <select id={id} ref={ref} data-testid={testId} {...otherProps}>
+      <select ref={ref} id={id} data-testid={testId} {...otherProps}>
         {Object.keys(options).map((key) => (
           <option key={key} value={key}>
             {options[key]}
           </option>
         ))}
       </select>
-      <Icon data-fs-select-icon component={<CaretDown />}/>
+      <Icon data-fs-select-icon component={<CaretDown />} />
     </div>
   )
 })

package/src/index.ts

@@ -50,3 +50,15 @@ 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'
+
+// Organisms
+export {
+  default as Hero,
+  HeroImage,
+  HeroHeading,
+} from './organisms/Hero'
+export type {
+  HeroProps,
+  HeroImageProps,
+  HeroHeadingProps,
+} from './organisms/Hero'

package/src/molecules/BuyButton/BuyButton.tsx

@@ -4,11 +4,16 @@ import { Button, Icon } from '../../index'
 import type { ButtonProps } from '../../index'
 import { ShoppingCart } from '../../assets'
 
-type Props = ButtonProps
+type BuyButtonProps = ButtonProps
 
-function BuyButton({ icon, children, ...otherProps }: Props) {
+function BuyButton({
+  testId = 'fs-buy-button',
+  icon,
+  children,
+  ...otherProps
+}: BuyButtonProps) {
   return (
-    <Button data-fs-buy-button {...otherProps}>
+    <Button data-fs-buy-button data-testid={testId} {...otherProps}>
       <Icon component={<ShoppingCart />} />
       {children}
     </Button>

package/src/molecules/DiscountBadge/DiscountBadge.tsx

@@ -4,6 +4,10 @@ import { Badge } from '../..'
 import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent'
 
 export 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,10 +16,6 @@ export type DiscountBadgeProps = {
    * Specifies current price with discount applied.
    */
   spotPrice: number
-  /**
-   * Sets the component's size.
-   */
-  size?: 'small' | 'big'
   /**
    * Sets the limit percentage value to consider a low discount.
    */
@@ -29,9 +29,9 @@ export type DiscountBadgeProps = {
 const DiscountBadge = ({
   listPrice,
   spotPrice,
-  size = 'small',
   thresholdLow = 15,
   thresholdHigh = 40,
+  testId = 'fs-discount-badge',
 }: DiscountBadgeProps) => {
   const discountPercent = useDiscountPercent(listPrice, spotPrice)
 
@@ -48,9 +48,9 @@ const DiscountBadge = ({
 
   return (
     <Badge
-      size={size}
       data-fs-discount-badge
       data-fs-discount-badge-variant={discountVariant}
+      data-testid={testId}
     >
       {discountPercent}% off
     </Badge>

package/src/molecules/IconButton/IconButton.tsx

@@ -36,9 +36,9 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         ref={ref}
         data-fs-button
         data-fs-icon-button
-        testId={testId}
         variant={variant ?? 'tertiary'}
         aria-label={ariaLabel}
+        testId={testId}
         {...otherProps}
       >
         {children}

package/src/molecules/InputField/InputField.tsx

@@ -6,6 +6,10 @@ import type { InputProps } from '../../index'
 import { XCircle } from '../../assets'
 
 type DefaultProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
   /**
    * ID to identify input and corresponding label.
    */
@@ -77,6 +81,7 @@ const InputField = ({
   inputRef,
   disabled,
   value,
+  testId = 'fs-input-field',
   ...otherProps
 }: InputFieldProps) => {
   const shouldDisplayError = !disabled && error && error !== ''
@@ -87,6 +92,7 @@ const InputField = ({
       data-fs-input-field
       data-fs-input-field-actionable={actionable}
       data-fs-input-field-error={error && error !== ''}
+      data-testid={testId}
     >
       <Input
         id={id}

package/src/molecules/LinkButton/LinkButton.tsx

@@ -31,14 +31,14 @@ function LinkButton({
   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}
+      onFocus={onFocus}
+      data-testid={testId}
       {...otherProps}
     >
       {iconPosition === 'left' && <Icon component={icon} />}

package/src/molecules/SelectField/SelectField.tsx

@@ -19,11 +19,11 @@ const SelectField = forwardRef<
   ref
 ) {
   return (
-    <div ref={ref} data-fs-select-field>
+    <div ref={ref} data-fs-select-field data-testid={testId}>
       <Label data-fs-select-field-label htmlFor={id}>
         {label}
       </Label>
-      <Select id={id} options={options} data-testid={testId} {...otherProps} />
+      <Select id={id} options={options} {...otherProps} />
     </div>
   )
 })

package/src/molecules/Tag/Tag.tsx

@@ -35,8 +35,8 @@ const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
     <Badge
       ref={ref}
       data-fs-tag
-      data-testid={testId}
       size="big"
+      data-testid={testId}
       {...otherProps}
     >
       <span data-fs-tag-label>{label}</span>

package/src/molecules/Toggle/Toggle.tsx

@@ -36,8 +36,8 @@ const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
   return (
     <div data-fs-toggle data-fs-toggle-variant={variant} data-testid={testId}>
       <Input
-        id={id}
         ref={ref}
+        id={id}
         role="switch"
         type="checkbox"
         disabled={disabled}