Merge branch 'release/0.2.44'

CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [v0.2.44](https://github.com/studiometa/ui/compare/0.2.43..0.2.44) (2024-02-29)
+
+### Added
+
+- Add the **Action** atom ([#161](https://github.com/studiometa/ui/issues/161), [#165](https://github.com/studiometa/ui/pull/165))
+- Add the **CircularMarquee** atom ([#171](https://github.com/studiometa/ui/pull/171))
+
 ## [v0.2.43](https://github.com/studiometa/ui/compare/0.2.42..0.2.43) (2024-02-14)
 
 ### Changed

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "studiometa/ui",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "description": "A set of opiniated, unstyled and accessible components.",
   "license": "MIT",
   "require": {

package.json

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

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

@@ -0,0 +1,12 @@
+---
+title: Action examples
+---
+
+# Examples
+
+## Close modals and panels
+
+<PreviewPlayground
+  :html="() => import('./stories/close-modal-and-panel/app.twig')"
+  :script="() => import('./stories/close-modal-and-panel/app.js?raw')"
+  />

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

@@ -0,0 +1,43 @@
+# Action <Badges :texts="badges" />
+
+<script setup>
+  import pkg from '@studiometa/ui/atoms/Action/package.json';
+
+  const badges = [`v${pkg.version}`, 'JS'];
+</script>
+
+The `Action` atom is a component who trigger an action on specified components.
+
+## Table of content
+
+- [Examples](./examples)
+- [JS API](./js-api)
+
+## Usage
+
+This component can be directly imported and defined as a dependency of your application:
+
+```js {2,8}
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { Action } from '@studiometa/ui';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Action,
+    },
+  };
+}
+```
+
+```html
+<button
+  type="button"
+  data-component="Action"
+  data-option-target="Panel Modal"
+  data-option-selector=".can-be-closed"
+  data-option-method="close">
+  Close every panel & modal with .can-be-closed class
+</button>
+```

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

@@ -0,0 +1,35 @@
+---
+title: Action JS API
+---
+
+# JS API
+
+## Options
+
+### `on`
+
+- Type: `string`
+- Default: `'click'`
+
+Use this option to change the listened event.
+
+### `target`
+
+- Type: `string`
+- Required
+
+Use this option to set the name of the components that you want to target. You can target multiple components if you separate the names by a space.
+
+### `method`
+
+- Type: `string`
+- Required
+
+Use this option to set the method name that will be triggered on the targeted components.
+
+### `selector`
+
+- Type: `string`
+- Default: `null`
+
+Use this option to filter the targeted components.

packages/docs/components/atoms/Action/stories/close-modal-and-panel/app.js

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

packages/docs/components/atoms/Action/stories/close-modal-and-panel/app.twig

@@ -0,0 +1,58 @@
+{% include '@ui/atoms/Button/StyledButton.twig' with {
+  label: 'Close Panel & Modal with [data-can-be-closed]',
+  attr: {
+    class: 'relative z-50',
+    data_component: 'Action',
+    data_option_on: 'click',
+    data_option_target: 'Modal Panel',
+    data_option_method: 'close',
+    data_option_selector: '[data-can-be-closed]',
+  }
+} %}
+
+<div class="w-full h-screen flex items-center justify-center p-10">
+  {% embed '@ui/molecules/Modal/StyledModal.twig' with {
+    attr: {
+      data_can_be_closed: true,
+    }
+  } %}
+    {% block content %}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#">
+          ea commodo consequat
+        </a>. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+        id est laborum.
+      </p>
+    {% endblock %}
+  {% endembed %}
+  {% embed '@ui/molecules/Panel/StyledPanel.twig'
+    with {
+      attr: {
+        data_can_be_closed: true,
+      },
+      position: 'right',
+      wrapper_attr: { class: 'p-10' },
+      container_attr: { class: 'max-w-lg mb-auto rounded' },
+      content_attr: { class: 'p-4' }
+    }
+  %}
+    {% block content %}
+      <div class="mb-4">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod.
+      </div>
+
+      {% include '@ui/atoms/Button/StyledButton.twig' with {
+        label: 'Ok',
+        attr: { data_ref: 'close[]' }
+      } %}
+    {% endblock %}
+    {% block close %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

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

@@ -0,0 +1,31 @@
+# Examples
+
+## Default
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  />
+
+## Higher sensitivity
+<PreviewPlayground
+  :html="() => import('./stories/app-2.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  />
+
+## Negative sensitivity
+<PreviewPlayground
+  :html="() => import('./stories/app-3.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  />
+
+## Exemple with same `outer_radius` and `radius`
+
+:::tip Why is there two radius parameters ?
+- `outer_radius` set the size of the **svg viewbox**. `radius` set the size of the `<path>` on which the circular text will be written.
+- `outer_radius` needs to be greater in order to **avoid cutting** the text since the `<svg>` will always hide the overflowing content.
+:::
+
+<PreviewPlayground
+  :html="() => import('./stories/app-4.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  />

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

@@ -0,0 +1,47 @@
+---
+outline: deep
+---
+
+# CircularMarquee <Badges :texts="badges" />
+
+<script setup>
+  import pkg from '@studiometa/ui/atoms/Button/package.json';
+
+  const badges = [`v${pkg.version}`, 'Twig'];
+</script>
+
+Use this component to create CircularMarquee, a spinning on scroll circular text. This is made using the `<svg>` capabilities.
+
+## Table of content
+
+- [Examples](./examples.md)
+- [Twig API](./twig-api.md)
+
+## Usage
+
+Once the [package installed](/guide/installation/), simply include the Twig template and load the JavaScript component in your project:
+
+```twig
+{% include '@ui-pkg/atoms/CircularMarquee/CircularMarquee.twig' with {
+  id: 'unique-id',
+  radius: 120,
+  outer_radius: 150,
+  content: ' My text content'
+} only %}
+```
+
+```js
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { CircularMarquee } from '@studiometa/ui';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      CircularMarquee,
+    },
+  };
+}
+
+export default createApp(Base);
+```

packages/docs/components/atoms/CircularMarquee/stories/app-2.twig

@@ -0,0 +1,18 @@
+<div class="flex items-center justify-center h-48">
+  Scroll down
+</div>
+<div class="h-screen overflow-hidden">
+  <div style="height: 400vh">
+    {% include '@ui/atoms/CircularMarquee/CircularMarquee.twig' with {
+      id: 'fraicheur',
+      sensitivity: 0.9,
+      radius: 120,
+      outer_radius: 150,
+      content: ' Douceur • Fraîcheur • Douceur • Fraîcheur • Douceur • Fraîcheur • '
+    } only %}
+  </div>
+</div>
+</div>
+<div class="flex items-center justify-center h-screen">
+  Scroll up
+</div>

packages/docs/components/atoms/CircularMarquee/stories/app-3.twig

@@ -0,0 +1,17 @@
+<div class="flex items-center justify-center h-48">
+  Scroll down
+</div>
+<div class="h-screen overflow-hidden">
+  <div style="height: 400vh">
+    {% include '@ui/atoms/CircularMarquee/CircularMarquee.twig' with {
+      id: 'fraicheur',
+      sensitivity: - 1 * 0.3,
+      radius: 120,
+      outer_radius: 150,
+      content: ' Douceur • Fraîcheur • Douceur • Fraîcheur • Douceur • Fraîcheur • '
+    } only %}
+  </div>
+</div>
+<div class="flex items-center justify-center h-screen">
+  Scroll up
+</div>

packages/docs/components/atoms/CircularMarquee/stories/app-4.twig

@@ -0,0 +1,15 @@
+<div class="flex items-center justify-center h-48">
+  Scroll down
+</div>
+<div class="h-screen overflow-hidden">
+  {% include '@ui/atoms/CircularMarquee/CircularMarquee.twig' with {
+    id: 'douceur',
+    radius: 120,
+    outer_radius: 120,
+    content: ' Douceur • Fraîcheur • Douceur • Fraîcheur • Douceur • Fraîcheur • '
+  } only %}
+</div>
+</div>
+<div class="flex items-center justify-center h-screen">
+  Scroll up
+</div>

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

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