[Feature] Add a readmore component

packages/docs/components/molecules/Readmore/examples.md

@@ -0,0 +1,25 @@
+---
+title: Readmore examples
+---
+
+# Examples
+
+## Simple Readmore
+
+<PreviewIframe src="./stories/simple/story.html" />
+:::details Code
+
+<SimpleTabs :items="['app.twig', 'app.js']">
+  <template #content-1>
+
+<<< ./components/molecules/Readmore/stories/simple/app.twig
+
+  </template>
+  <template #content-2>
+
+<<< ./components/molecules/Readmore/stories/app.js
+
+  </template>
+</SimpleTabs>
+
+:::

packages/docs/components/molecules/Readmore/index.md

@@ -0,0 +1,10 @@
+# Readmore <Badges :texts="badges" />
+
+<script setup>
+  import pkg from '@studiometa/ui/molecules/Readmore/package.json';
+  const badges = [`v${pkg.version}`, 'Twig', 'JS'];
+</script>
+
+## Table of content
+
+- [Examples](./examples)

packages/docs/components/molecules/Readmore/stories/app.js

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

packages/docs/components/molecules/Readmore/stories/simple/app.twig

@@ -0,0 +1,8 @@
+<div class="p-20 max-w-2xl mx-auto">
+  {% include '@ui/molecules/Readmore/Readmore.twig' with {
+    main_content: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem expedita architecto maxime nostrum id voluptate perspiciatis sapiente explicabo earum culpa, sit fugit optio impedit iusto quos, illo, fugiat dolor sequi.',
+    hidden_content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id expedita repellat debitis soluta praesentium magnam accusantium vero porro ullam, explicabo maiores harum incidunt fuga nisi? Accusamus odio voluptatum eos quas.',
+    data_options_btn_label_less: 'voir moins',
+    data_options_btn_label_more: 'voir plus'
+  } %}
+</div>

packages/docs/components/molecules/Readmore/stories/simple/story.md

@@ -0,0 +1,5 @@
+---
+layout: none
+---
+
+<RenderTwig :js-importer="() => import('../app.js')" :tpl-importer="() => import('./app.twig?raw')" />

packages/ui/molecules/Readmore/Readmore.js

@@ -0,0 +1,59 @@
+import { Base } from '@studiometa/js-toolkit';
+import { animate, easeInOutExpo } from '@studiometa/js-toolkit/utils';
+/**
+ * Button Readmore class.
+ */
+export default class Readmore extends Base {
+  /**
+   * Class cfnig
+   * @type {Object}
+   */
+  static config = {
+    name: 'Readmore',
+    refs: ['btn', 'btnLabel', 'main_content', 'hidden_content'],
+    options: {
+      length: Number,
+      amimate: { type: Boolean, default: 'true' },
+      btnLabelMore: { type: String, default: 'Voir plus' },
+      btnLabelLess: { type: String, default: 'Voir moins' },
+    },
+  };
+
+  /**
+   * On mounted
+   */
+  mounted() {
+    this.hiddenContent = this.$refs.hidden_content;
+    this.mainContent = this.$refs.main_content;
+    this.btn = this.$refs.btn;
+
+    this.animation = animate(
+      this.hiddenContent,
+      [
+        { x: 0, scaleY: 0, opacity: 0 },
+        { x: 0, scaleY: 1, opacity: 1 },
+      ],
+      {
+        duration: 0.1,
+        easing: easeInOutExpo,
+      },
+    );
+  }
+
+  /**
+   * On btn click
+   * @returns {void}
+   */
+  onBtnClick() {
+    if (this.hiddenContent.classList.contains('hidden')) {
+      setTimeout(() => {
+        this.hiddenContent.classList.remove('hidden');
+      }, 50);
+      this.animation.start();
+      this.btn.innerHTML = this.$options.btnLabelLess;
+    } else {
+      this.hiddenContent.classList.add('hidden');
+      this.btn.innerHTML = this.$options.btnLabelMore;
+    }
+  }
+}

packages/ui/molecules/Readmore/Readmore.twig

@@ -0,0 +1,65 @@
+{#
+/**
+ * @file
+ *   Readmore component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param string main_content $main_content
+ *   Define the main content.
+ * @param array $main_content_attr
+ *   Custom attributes for the main content.
+ * @param string $hidden_content
+ *   Define the hidden content.
+ * @param array $hidden_content_attr
+ *   Custom attributes for the hidden content.
+ * @param array {label: string, label2: string} $btn
+*   Define the button.
+ * @param array $btn_attr
+ *   Custom attributes for the button.
+ * @param boolean $animation
+ *   Wether to use an animation or not
+ * @param number $length
+ *   The maximum characters length before hidding the content if only one content is provided.s
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(attr ?? null, { data_component: 'Readmore', data_option_animate: ' true' })
+%}
+
+{% set main_content_attributes =
+  merge_html_attributes(
+    main_content_attr ?? null,
+    { class: 'optionnel' },
+    { data_ref: 'main_content', class: ['main_content'] }
+  )
+%}
+
+{% set hidden_content_attributes =
+  merge_html_attributes(
+    hidden_content_attr ?? null,
+    { class: 'optionnel' },
+    { data_ref: 'hidden_content', aria_hidden: 'true', class: ['hidden_content hidden'] }
+  )
+%}
+
+{% set btn_attr =
+  merge_html_attributes(btn_attr ?? null, { class: 'optionnel' }, { class: ['button'] })
+%}
+
+{% set animation = animation|default(true) %}
+{% set length = length|default('70') %}
+
+<div {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(main_content_attributes) }}>
+    {{ main_content }}
+  </div>
+  <div {{ html_attributes(hidden_content_attributes) }}>
+    {{ hidden_content }}
+  </div>
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: data_options_btn_label_more,
+    attr: { data_ref: 'btn' }
+  } %}
+</div>

packages/ui/molecules/Readmore/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@studiometa/readmore",
+  "type": "module",
+  "version": "0.0.0"
+}