[Feature] Add a FigureShopify JS component

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- Add a [FigureShopify](https://ui.studiometa.dev/-/components/atoms/FigureShopify/) component ([#303](https://github.com/studiometa/ui/pull/303))
+
 ## [v1.0.0-alpha.8](https://github.com/studiometa/ui/compare/1.0.0-alpha.7..1.0.0-alpha.8) (2024-09-25)
 
 ### Added

packages/docs/components/atoms/FigureShopify/examples.md

@@ -0,0 +1,23 @@
+---
+title: FigureShopify examples
+---
+
+# Examples
+
+## Simple
+
+This is a simple example using a 1 × 1 pixels transparent PNG as a placeholder.
+
+<PreviewPlayground
+  :html="() => import('./stories/app.liquid?raw')"
+  :script="() => import('./stories/app.js?raw')"
+  />
+
+## Blurred placeholder
+
+This example uses a small sized image with a maximum width of 10 pixels with a blur backdrop-filter as a placeholder.
+
+<PreviewPlayground
+  :html="() => import('./stories/blurred.liquid?raw')"
+  :script="() => import('./stories/app.js?raw')"
+  />

packages/docs/components/atoms/FigureShopify/index.md

@@ -0,0 +1,47 @@
+---
+badges: [JS]
+---
+
+# FigureShopify <Badges :texts="$frontmatter.badges" />
+
+Use the `FigureShopify` component to display responsive images with [Shopify CDN `image_url` API](https://shopify.dev/docs/api/liquid/filters/image_url).
+
+## Table of content
+
+- [Examples](./examples.html)
+- [JS API](./js-api.html)
+
+## Usage
+
+Register the component in your JavaScript app and use it in your templates. The component will transform the `data-src` URL to load an image at the dimension of the `<img>` DOM element.
+
+```js {2,8}
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { FigureShopify } from '@studiometa/ui';
+
+class App extends Base {
+  static config = {
+    name: 'Base',
+    components: {
+      Figure: FigureShopify,
+    }
+  };
+}
+
+export default createApp(App);
+```
+
+```liquid
+<div class="card">
+  <figure data-component="Figure">
+    <img
+      data-ref="img"
+      src="placeholder.png"
+      data-src="{{ product | image_url }}"
+      width="200"
+      height="200"
+      alt="">
+  </figure>
+</div>
+```
+

packages/docs/components/atoms/FigureShopify/js-api.md

@@ -0,0 +1,31 @@
+---
+title: FigureShopify JS API
+outline: deep
+---
+
+# JS API
+
+The `FigureShopify` class extends the [`Figure` class](/components/atoms/Figure/js-api.html) and adds support for TwicPics API.
+
+## Options
+
+### `step`
+
+- Type: `number`
+- Default: `50`
+
+The step used to round up image size calculation. Default to `50`, which means that a size of `320×380` will be rounded to `350×400`.
+
+### `crop`
+
+- Type: `string`
+- Default: `'top' | 'left' | 'right' | 'bottom' | 'center'`
+
+If the image should be cropped (cover like), use the `crop` option with one the allowed value.
+
+### `disable`
+
+- Type: `boolean`
+- Default: `false`
+
+Use this option to disable the features of this component.

packages/docs/components/atoms/FigureShopify/stories/app.js

@@ -0,0 +1,13 @@
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { FigureShopify } from '@studiometa/ui';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Figure: FigureShopify,
+    },
+  };
+}
+
+export default createApp(App, document.body);