@faststore/ui 1.10.28 → 1.10.31

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.31](https://github.com/vtex/faststore/compare/v1.10.30...v1.10.31) (2022-08-02)
+
+
+### Features
+
+* Add fowardRef to `ProductTitle` ([#1427](https://github.com/vtex/faststore/issues/1427)) ([5f622f3](https://github.com/vtex/faststore/commit/5f622f3a28a32228aa457c0b1bd141969f541262))
+
+
+
+## 1.10.30 (2022-08-02)
+
+
+### Chores
+
+* Updates documentation link ([#1424](https://github.com/vtex/faststore/issues/1424)) ([04e518a](https://github.com/vtex/faststore/commit/04e518a92038259bda212024b85c1a807ebf0e1a))
+
+
+
+## [1.10.29](https://github.com/vtex/faststore/compare/v1.10.28...v1.10.29) (2022-07-29)
+
+
+### Features
+
+* Add ProductTitle Molecule ([#1418](https://github.com/vtex/faststore/issues/1418)) ([184d0b9](https://github.com/vtex/faststore/commit/184d0b9399648e3cab25cd2348c17269ac549f49))
+
+
+
+
+
 ## [1.10.28](https://github.com/vtex/faststore/compare/v1.10.27...v1.10.28) (2022-07-28)
 
 

package/README.md

@@ -49,4 +49,4 @@ function MyComponent {
 
 ## Docs
 
-For more information, please refer to our documentation: https://faststore.dev/reference/ui/overview
+For more information, please refer to our documentation: https://faststore.dev/reference/ui/faststore-ui

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 export type { IncentiveProps } from './atoms/Incentive';
+export { default as ProductTitle } from './molecules/ProductTitle';
+export type { ProductTitleProps } from './molecules/ProductTitle';
 export { default as AggregateRating } from './molecules/AggregateRating';
 export type { AggregateRatingProps } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
@@ -76,6 +78,8 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
 export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './molecules/Dropdown';
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
 export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './organisms/OutOfStock';
+export { Tiles, Tile } from './organisms/Tiles';
+export type { TilesProps, TileProps } from './organisms/Tiles';
 export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
 export type { HeroProps, HeroHeadingProps, HeroImageProps, } from './organisms/Hero';
 export { default as useSlider } from './hooks/useSlider';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Spinner } from './atoms/Spinner';
 export { default as Label } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 // Molecules
+export { default as ProductTitle } from './molecules/ProductTitle';
 export { default as AggregateRating } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
@@ -40,6 +41,7 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
 export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
 // Organisms
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
+export { Tiles, Tile } from './organisms/Tiles';
 export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
 // Hooks
 export { default as useSlider } from './hooks/useSlider';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/ProductTitle/ProductTitle.d.ts

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+export declare type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    /**
+     * A react component to be used as the product title, e.g. a `h1`
+     */
+    title: ReactNode;
+    /**
+     * A react component to be used as the product label, e.g. a `DiscountBadge`
+     */
+    label?: ReactNode;
+    /**
+     * Label for reference.
+     */
+    refTag?: string;
+    /**
+     * A text to be used below the title and the label, such as the product's reference number.
+     */
+    refNumber?: string;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+};
+declare const ProductTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /**
+     * A react component to be used as the product title, e.g. a `h1`
+     */
+    title: ReactNode;
+    /**
+     * A react component to be used as the product label, e.g. a `DiscountBadge`
+     */
+    label?: ReactNode;
+    /**
+     * Label for reference.
+     */
+    refTag?: string | undefined;
+    /**
+     * A text to be used below the title and the label, such as the product's reference number.
+     */
+    refNumber?: string | undefined;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export default ProductTitle;

package/dist/molecules/ProductTitle/ProductTitle.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+const ProductTitle = forwardRef(function ProductTitle({ title, label, refTag = "Ref.: ", refNumber, testId = 'store-product-title', ...otherProps }, ref) {
+    return (React.createElement("header", Object.assign({ ref: ref, "data-fs-product-title": true, "data-testid": testId }, otherProps),
+        React.createElement("div", { "data-fs-product-title-header": true },
+            title,
+            !!label && label),
+        refNumber && (React.createElement("p", { "data-fs-product-title-addendum": true },
+            refTag,
+            refNumber))));
+});
+export default ProductTitle;
+//# sourceMappingURL=ProductTitle.js.map

package/dist/molecules/ProductTitle/ProductTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AA0BzD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,QAAQ,EAAC,SAAS,EAAE,MAAM,GAAE,qBAAqB,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG;IACnH,OAAO,CACL,8CAAQ,GAAG,EAAE,GAAG,gDAAqC,MAAM,IAAM,UAAU;QACzE;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,SAAS,IAAI,CACZ;YACG,MAAM;YAAE,SAAS,CAChB,CACL,CACM,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

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

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

package/dist/molecules/ProductTitle/index.js

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

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

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

package/dist/organisms/Tiles/Tile.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface TileProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress,
+     * Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLLIElement>>;
+export default Tile;

package/dist/organisms/Tiles/Tile.js

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

package/dist/organisms/Tiles/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CAC7D,EAAE,MAAM,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAClD,GAAG;IAEH,OAAO,CACL,0CAAI,GAAG,EAAE,GAAG,uCAA4B,MAAM,IAAM,UAAU,GAC3D,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/organisms/Tiles/Tiles.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress,
+     * Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLUListElement>>;
+export default Tiles;

package/dist/organisms/Tiles/Tiles.js

@@ -0,0 +1,30 @@
+import React, { Children, forwardRef } from 'react';
+import { Tile } from '.';
+const MIN_CHILDREN = 2;
+const MAX_CHILDREN = 4;
+const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2;
+const NUMBER_ITEMS_TO_EXPAND_FIRST = 3;
+const Tiles = forwardRef(function Tiles({ testId = 'store-tiles', children, ...otherProps }, ref) {
+    const childrenCount = Children.count(children);
+    if (process.env.NODE_ENV === 'development') {
+        const isOutOfBounds = childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN;
+        if (isOutOfBounds) {
+            throw new Error(`Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`);
+        }
+    }
+    if (process.env.NODE_ENV === 'development') {
+        Children.forEach(children, (child) => {
+            if (child.type !== Tile) {
+                throw new Error('Only Tile components allowed as children.');
+            }
+        });
+    }
+    const expandedClass = childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
+        ? 'expanded-first'
+        : childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
+            ? 'expanded-first-two'
+            : '';
+    return (React.createElement("ul", Object.assign({ ref: ref, "data-fs-tiles": true, "data-fs-tiles-variant": expandedClass, "data-testid": testId }, otherProps), children));
+});
+export default Tiles;
+//# sourceMappingURL=Tiles.js.map

package/dist/organisms/Tiles/Tiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAUxB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,gCAAgC,GAAG,CAAC,CAAA;AAC1C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AAEtC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE9C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,MAAM,aAAa,GACjB,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,CAAA;QAE9D,IAAI,aAAa,EAAE;YACjB,MAAM,IAAI,KAAK,CACb,kCAAkC,YAAY,iBAAiB,YAAY,YAAY,CACxF,CAAA;SACF;KACF;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,QAAQ,CAAC,OAAO,CAAC,QAAwB,EAAE,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;aAC7D;QACH,CAAC,CAAC,CAAA;KACH;IAED,MAAM,aAAa,GACjB,aAAa,KAAK,4BAA4B;QAC5C,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,aAAa,KAAK,gCAAgC;YACpD,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,kDAEe,aAAa,iBACvB,MAAM,IACf,UAAU,GAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default as Tiles } from './Tiles';
+export type { TilesProps } from './Tiles';
+export { default as Tile } from './Tile';
+export type { TileProps } from './Tile';

package/dist/organisms/Tiles/index.js

@@ -0,0 +1,3 @@
+export { default as Tiles } from './Tiles';
+export { default as Tile } from './Tile';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.10.28",
+  "version": "1.10.31",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@faststore/styles": "^1.10.18",
+    "@faststore/styles": "^1.10.30",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -79,11 +79,11 @@
     "react": "^17.0.2",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.2",
-    "shared": "^1.10.18",
+    "shared": "^1.10.30",
     "size-limit": "^7.0.8",
     "storybook-addon-themes": "^6.1.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "9fb36482671c60c4e4035e4677a7d4308e65488b"
+  "gitHead": "cd75cbdac4910c60b9ff42ab7bc830d2dc35ba49"
 }

package/src/index.ts

@@ -54,6 +54,9 @@ export { default as Incentive } from './atoms/Incentive'
 export type { IncentiveProps } from './atoms/Incentive'
 
 // Molecules
+export { default as ProductTitle } from './molecules/ProductTitle'
+export type { ProductTitleProps } from './molecules/ProductTitle'
+
 export { default as AggregateRating } from './molecules/AggregateRating'
 export type { AggregateRatingProps } from './molecules/AggregateRating'
 
@@ -190,6 +193,9 @@ export type {
   OutOfStockTitleProps,
 } from './organisms/OutOfStock'
 
+export { Tiles, Tile } from './organisms/Tiles'
+export type { TilesProps, TileProps } from './organisms/Tiles'
+
 export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero'
 export type {
   HeroProps,

package/src/molecules/ProductTitle/ProductTitle.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import type { ReactNode } from 'react'
+
+export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  /**
+   * A react component to be used as the product title, e.g. a `h1`
+   */
+  title: ReactNode
+  /**
+   * A react component to be used as the product label, e.g. a `DiscountBadge`
+   */
+  label?: ReactNode
+  /**
+   * Label for reference.
+   */
+  refTag?: string
+  /**
+   * A text to be used below the title and the label, such as the product's reference number.
+   */
+  refNumber?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
+  function ProductTitle({ title, label, refTag= "Ref.: ",refNumber, testId= 'store-product-title', ...otherProps }, ref) {
+    return (
+      <header ref={ref} data-fs-product-title data-testid={testId} {...otherProps}>
+        <div data-fs-product-title-header>
+          {title}
+          {!!label && label}
+        </div>
+
+        {refNumber && (
+          <p data-fs-product-title-addendum>
+            {refTag}{refNumber}
+          </p>
+        )}
+      </header>
+    )
+  }
+)
+
+export default ProductTitle

package/src/molecules/ProductTitle/index.tsx

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

package/src/molecules/ProductTitle/stories/ProductTitle.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import ProductTitle from '../ProductTitle'
+
+# ProductTitle
+
+<Canvas>
+  <Story id="molecules-producttitle--product-title" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ ProductTitle } />
+
+## CSS Selectors
+
+```css
+[data-fs-product-title] {
+}
+
+[data-fs-product-title-header] {
+}
+
+[data-fs-product-title-addendum] {
+}
+```

package/src/molecules/ProductTitle/stories/ProductTitle.stories.tsx

@@ -0,0 +1,27 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import type { ProductTitleProps } from '../ProductTitle'
+import Component from '../ProductTitle'
+import mdx from './ProductTitle.mdx'
+import Badge from '../../../atoms/Badge'
+
+const ProductTitleTemplate: Story<ProductTitleProps> = () => (
+  <Component 
+    title={<h1>Apple Magic Mouse</h1>}
+    refNumber='99995945'
+    label={<Badge>90%</Badge>}
+  />
+)
+
+export const ProductTitle = ProductTitleTemplate.bind({})
+ProductTitle.storyName = 'ProductTitle'
+
+export default {
+  title: 'Molecules/ProductTitle',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta

package/src/organisms/Tiles/Tile.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface TileProps extends HTMLAttributes<HTMLLIElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress,
+   * Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const Tile = forwardRef<HTMLLIElement, TileProps>(function Tile(
+  { testId = 'store-tile', children, ...otherProps },
+  ref
+) {
+  return (
+    <li ref={ref} data-fs-tile data-testid={testId} {...otherProps}>
+      {children}
+    </li>
+  )
+})
+
+export default Tile

package/src/organisms/Tiles/Tiles.tsx

@@ -0,0 +1,64 @@
+import React, { Children, forwardRef } from 'react'
+import type { HTMLAttributes, ReactElement } from 'react'
+
+import { Tile } from '.'
+
+export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress,
+   * Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const MIN_CHILDREN = 2
+const MAX_CHILDREN = 4
+const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2
+const NUMBER_ITEMS_TO_EXPAND_FIRST = 3
+
+const Tiles = forwardRef<HTMLUListElement, TilesProps>(function Tiles(
+  { testId = 'store-tiles', children, ...otherProps },
+  ref
+) {
+  const childrenCount = Children.count(children)
+
+  if (process.env.NODE_ENV === 'development') {
+    const isOutOfBounds =
+      childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN
+
+    if (isOutOfBounds) {
+      throw new Error(
+        `Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`
+      )
+    }
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    Children.forEach(children as ReactElement, (child) => {
+      if (child.type !== Tile) {
+        throw new Error('Only Tile components allowed as children.')
+      }
+    })
+  }
+
+  const expandedClass =
+    childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
+      ? 'expanded-first'
+      : childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
+      ? 'expanded-first-two'
+      : ''
+
+  return (
+    <ul
+      ref={ref}
+      data-fs-tiles
+      data-fs-tiles-variant={expandedClass}
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </ul>
+  )
+})
+
+export default Tiles

package/src/organisms/Tiles/index.ts

@@ -0,0 +1,5 @@
+export { default as Tiles } from './Tiles'
+export type { TilesProps } from './Tiles'
+
+export { default as Tile } from './Tile'
+export type { TileProps } from './Tile'

package/src/organisms/Tiles/stories/Tiles.mdx

@@ -0,0 +1,39 @@
+import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
+
+import { Tile, Tiles } from '../'
+
+# Tiles
+
+<Canvas>
+  <Story id="organisms-tiles--tiles" />
+</Canvas>
+
+## Components
+
+- `Tiles`: the parent component that wraps one or many `Tile`s.
+- `Tile`: the child component.
+
+## Props
+
+Besides those attributes, the following props are also supported:
+
+### `Tiles`
+
+<ArgsTable of={Tiles} />
+
+### `Tile`
+
+<ArgsTable of={Tile} />
+
+## CSS Selectors
+
+```css
+[data-fs-tiles] {
+}
+
+[data-fs-tiles-variant='expanded-first'|'expanded-first-two'] {
+}
+
+[data-fs-tile] {
+}
+```

package/src/organisms/Tiles/stories/Tiles.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { Tile, Tiles as UITiles } from '../'
+import mdx from './Tiles.mdx'
+
+import type { Story, Meta } from '@storybook/react'
+import type { TilesProps } from '../'
+
+const TilesTemplate: Story<TilesProps> = () => (
+  <>
+    <UITiles>
+      <Tile>Tile #1</Tile>
+      <Tile>Tile #2</Tile>
+    </UITiles>
+    <UITiles>
+      <Tile>Tile #1</Tile>
+      <Tile>Tile #2</Tile>
+      <Tile>Tile #3</Tile>
+      <Tile>Tile #4</Tile>
+    </UITiles>
+    <UITiles>
+      <Tile>Tile #1</Tile>
+      <Tile>Tile #2</Tile>
+      <Tile>Tile #3</Tile>
+    </UITiles>
+  </>
+)
+
+export const Tiles = TilesTemplate.bind({})
+
+export default {
+  title: 'Organisms/Tiles',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta