Merge branch 'release/0.2.5'

.github/workflows/tests.yml

@@ -55,3 +55,13 @@ jobs:
         fail_ci_if_error: false
         path_to_write_report: ./codecov_report.txt
         verbose: true
+
+  Export-Size:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: antfu/export-size-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          build_script: npm run build
+          paths: dist

composer.json

@@ -12,7 +12,8 @@
     "phpstan/phpstan": "^0.12.88",
     "squizlabs/php_codesniffer": "^3.6",
     "pestphp/pest": "^1.21",
-    "spatie/pest-plugin-snapshots": "^1.1"
+    "spatie/pest-plugin-snapshots": "^1.1",
+    "mallardduck/prettier-php-runner": "^1.0"
   },
   "scripts": {
     "phpcs": "phpcs",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": true,
   "workspaces": [
     "packages/*"

packages/docs/components/atoms/Figure/Figure/app.twig

@@ -0,0 +1,13 @@
+<div class="max-w-lg mx-auto p-10 space-y-10">
+  {% include '@ui/atoms/Figure/Figure.twig' with {
+    src: 'https://picsum.photos/500/400',
+    width: '500',
+    height: '400',
+    lazy: false
+  } %}
+  {% include '@ui/atoms/Figure/Figure.twig' with {
+    src: 'https://picsum.photos/500/400',
+    width: '500',
+    height: '400'
+  } %}
+</div>

packages/docs/components/atoms/Figure/Figure/story.md

@@ -0,0 +1,29 @@
+---
+sidebar: false
+navbar: false
+customLayout: true
+---
+
+<RenderTwig :js-importer="() => import('./app.js')" :tpl-importer="() => import('./app.twig?raw')" />
+
+<script>
+  import appJsRaw from './app.js?raw';
+  import AppTwigRaw from './app.twig?raw';
+
+  export const story = {
+    src: './Figure/story.html',
+    name: 'Figure',
+    files: [
+      {
+        label: 'app.js',
+        lang: 'js',
+        content: appJsRaw,
+      },
+      {
+        label: 'app.twig',
+        lang: 'twig',
+        content: AppTwigRaw,
+      },
+    ],
+  };
+</script>

packages/docs/components/atoms/Figure/FigureTwicPics/app.js

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

packages/docs/components/atoms/Figure/FigureTwicPics/app.twig

@@ -0,0 +1,24 @@
+<div class="max-w-lg mx-auto p-10 space-y-10">
+  {% include '@ui/atoms/Figure/Figure.twig' with {
+    src: 'https://picsum.photos/500/400',
+    width: '500',
+    height: '400',
+    lazy: false,
+    attr: {
+      data_option_transform: 'focus=auto/crop=300x300'
+    }
+  } %}
+  {% include '@ui/atoms/Figure/Figure.twig' with {
+    src: 'https://picsum.photos/500/400',
+    width: '500',
+    height: '400',
+  } %}
+  {% include '@ui/atoms/Figure/Figure.twig' with {
+    src: 'https://picsum.photos/500/400',
+    width: '500',
+    height: '400',
+    attr: {
+      data_option_transform: 'focus=auto/crop=300x300'
+    }
+  } %}
+</div>