From ac854accf57668f4e67b1c668bae0263604ba8d0 Mon Sep 17 00:00:00 2001 From: Clara Martin Date: Tue, 10 Jan 2023 11:08:39 +0100 Subject: [PATCH 1/5] First draft to creating a Readmore component. --- packages/ui/molecules/Readmore/Readmore.js | 51 +++++++++++++++ packages/ui/molecules/Readmore/Readmore.twig | 65 ++++++++++++++++++++ packages/ui/molecules/Readmore/package.json | 5 ++ 3 files changed, 121 insertions(+) create mode 100644 packages/ui/molecules/Readmore/Readmore.js create mode 100644 packages/ui/molecules/Readmore/Readmore.twig create mode 100644 packages/ui/molecules/Readmore/package.json diff --git a/packages/ui/molecules/Readmore/Readmore.js b/packages/ui/molecules/Readmore/Readmore.js new file mode 100644 index 00000000..2b18f3a5 --- /dev/null +++ b/packages/ui/molecules/Readmore/Readmore.js @@ -0,0 +1,51 @@ +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: ['button', 'main_content', 'hidden_content'], + options: { + length: Number, + amimate: { type: Boolean, default: 'true' }, + }, + }; + + /** + * On mounted + */ + mounted() { + this.hiddenContent = this.$refs.hidden_content; + this.mainContent = this.$refs.main_content; + + 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} + */ + onButtonClick() { + setTimeout(() => { + this.hiddenContent.classList.remove('hidden'); + }, 100); + + this.animation.start(); + } +} diff --git a/packages/ui/molecules/Readmore/Readmore.twig b/packages/ui/molecules/Readmore/Readmore.twig new file mode 100644 index 00000000..af0e245d --- /dev/null +++ b/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} $button +* Define the button. + * @param array $button_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 button_attr = + merge_html_attributes(button_attr ?? null, { class: 'optionnel' }, { class: ['button'] }) +%} + +{% set animation = animation|default(true) %} +{% set length = length|default('70') %} + +
+
+ {{ main_content }} +
+
+ {{ hidden_content }} +
+ {% include '@ui/atoms/Button/StyledButton.twig' with { + label: button.label, + attr: { data_ref: 'button' } + } %} +
diff --git a/packages/ui/molecules/Readmore/package.json b/packages/ui/molecules/Readmore/package.json new file mode 100644 index 00000000..47369394 --- /dev/null +++ b/packages/ui/molecules/Readmore/package.json @@ -0,0 +1,5 @@ +{ + "name": "@studiometa/readmore", + "type": "module", + "version": "0.0.0" +} From 6790d5edd7e896722eff3de566eeb9053b4bc520 Mon Sep 17 00:00:00 2001 From: Clara Martin Date: Tue, 10 Jan 2023 12:20:21 +0100 Subject: [PATCH 2/5] Add options to manage the labels --- packages/ui/molecules/Readmore/Readmore.js | 20 ++++++++++++++------ packages/ui/molecules/Readmore/Readmore.twig | 6 +++--- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/ui/molecules/Readmore/Readmore.js b/packages/ui/molecules/Readmore/Readmore.js index 2b18f3a5..c4ffd8fa 100644 --- a/packages/ui/molecules/Readmore/Readmore.js +++ b/packages/ui/molecules/Readmore/Readmore.js @@ -10,10 +10,12 @@ export default class Readmore extends Base { */ static config = { name: 'Readmore', - refs: ['button', 'main_content', 'hidden_content'], + refs: ['button', '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' }, }, }; @@ -23,6 +25,7 @@ export default class Readmore extends Base { mounted() { this.hiddenContent = this.$refs.hidden_content; this.mainContent = this.$refs.main_content; + this.button = this.$refs.button; this.animation = animate( this.hiddenContent, @@ -42,10 +45,15 @@ export default class Readmore extends Base { * @returns {void} */ onButtonClick() { - setTimeout(() => { - this.hiddenContent.classList.remove('hidden'); - }, 100); - - this.animation.start(); + if (this.hiddenContent.classList.contains('hidden')) { + setTimeout(() => { + this.hiddenContent.classList.remove('hidden'); + }, 50); + this.animation.start(); + this.button.innerHTML = this.$options.btnLabelMore; + } else { + this.hiddenContent.classList.add('hidden'); + this.button.innerHTML = this.$options.btnLabelLess; + } } } diff --git a/packages/ui/molecules/Readmore/Readmore.twig b/packages/ui/molecules/Readmore/Readmore.twig index af0e245d..634d5502 100644 --- a/packages/ui/molecules/Readmore/Readmore.twig +++ b/packages/ui/molecules/Readmore/Readmore.twig @@ -13,7 +13,7 @@ * Define the hidden content. * @param array $hidden_content_attr * Custom attributes for the hidden content. - * @param array {label: string} $button + * @param array {label: string, label2: string} $btn * Define the button. * @param array $button_attr * Custom attributes for the button. @@ -25,7 +25,7 @@ #} {% set attributes = - merge_html_attributes(attr ?? null, { data_component: 'Readmore', data_option_animate: 'true' }) + merge_html_attributes(attr ?? null, { data_component: 'Readmore', data_option_animate: ' true' }) %} {% set main_content_attributes = @@ -59,7 +59,7 @@ {{ hidden_content }} {% include '@ui/atoms/Button/StyledButton.twig' with { - label: button.label, + label: btn.label, attr: { data_ref: 'button' } } %} From 69912857c295675bbf8f5a91ee3aba190e1fa4cd Mon Sep 17 00:00:00 2001 From: Clara Martin Date: Tue, 10 Jan 2023 13:19:03 +0100 Subject: [PATCH 3/5] Add a first simple example of using the readmore --- .../components/molecules/Readmore/examples.md | 25 +++++++++++++++++++ .../components/molecules/Readmore/index.md | 10 ++++++++ .../molecules/Readmore/stories/app.js | 13 ++++++++++ .../Readmore/stories/simple/app.twig | 8 ++++++ .../Readmore/stories/simple/story.md | 5 ++++ packages/ui/molecules/Readmore/Readmore.js | 10 ++++---- packages/ui/molecules/Readmore/Readmore.twig | 10 ++++---- 7 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 packages/docs/components/molecules/Readmore/examples.md create mode 100644 packages/docs/components/molecules/Readmore/index.md create mode 100644 packages/docs/components/molecules/Readmore/stories/app.js create mode 100644 packages/docs/components/molecules/Readmore/stories/simple/app.twig create mode 100644 packages/docs/components/molecules/Readmore/stories/simple/story.md diff --git a/packages/docs/components/molecules/Readmore/examples.md b/packages/docs/components/molecules/Readmore/examples.md new file mode 100644 index 00000000..0ac74639 --- /dev/null +++ b/packages/docs/components/molecules/Readmore/examples.md @@ -0,0 +1,25 @@ +--- +title: Readmore examples +--- + +# Examples + +## Simple Readmore + + +:::details Code + + + + + + +::: diff --git a/packages/docs/components/molecules/Readmore/index.md b/packages/docs/components/molecules/Readmore/index.md new file mode 100644 index 00000000..411b0606 --- /dev/null +++ b/packages/docs/components/molecules/Readmore/index.md @@ -0,0 +1,10 @@ +# Readmore + + + +## Table of content + +- [Examples](./examples) diff --git a/packages/docs/components/molecules/Readmore/stories/app.js b/packages/docs/components/molecules/Readmore/stories/app.js new file mode 100644 index 00000000..574dc408 --- /dev/null +++ b/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); diff --git a/packages/docs/components/molecules/Readmore/stories/simple/app.twig b/packages/docs/components/molecules/Readmore/stories/simple/app.twig new file mode 100644 index 00000000..243bb4b5 --- /dev/null +++ b/packages/docs/components/molecules/Readmore/stories/simple/app.twig @@ -0,0 +1,8 @@ +
+ {% 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' + } %} +
diff --git a/packages/docs/components/molecules/Readmore/stories/simple/story.md b/packages/docs/components/molecules/Readmore/stories/simple/story.md new file mode 100644 index 00000000..5960edcd --- /dev/null +++ b/packages/docs/components/molecules/Readmore/stories/simple/story.md @@ -0,0 +1,5 @@ +--- +layout: none +--- + + diff --git a/packages/ui/molecules/Readmore/Readmore.js b/packages/ui/molecules/Readmore/Readmore.js index c4ffd8fa..20a1c5db 100644 --- a/packages/ui/molecules/Readmore/Readmore.js +++ b/packages/ui/molecules/Readmore/Readmore.js @@ -10,7 +10,7 @@ export default class Readmore extends Base { */ static config = { name: 'Readmore', - refs: ['button', 'btnLabel', 'main_content', 'hidden_content'], + refs: ['btn', 'btnLabel', 'main_content', 'hidden_content'], options: { length: Number, amimate: { type: Boolean, default: 'true' }, @@ -25,7 +25,7 @@ export default class Readmore extends Base { mounted() { this.hiddenContent = this.$refs.hidden_content; this.mainContent = this.$refs.main_content; - this.button = this.$refs.button; + this.btn = this.$refs.btn; this.animation = animate( this.hiddenContent, @@ -44,16 +44,16 @@ export default class Readmore extends Base { * On btn click * @returns {void} */ - onButtonClick() { + onBtnClick() { if (this.hiddenContent.classList.contains('hidden')) { setTimeout(() => { this.hiddenContent.classList.remove('hidden'); }, 50); this.animation.start(); - this.button.innerHTML = this.$options.btnLabelMore; + this.btn.innerHTML = this.$options.btnLabelLess; } else { this.hiddenContent.classList.add('hidden'); - this.button.innerHTML = this.$options.btnLabelLess; + this.btn.innerHTML = this.$options.btnLabelMore; } } } diff --git a/packages/ui/molecules/Readmore/Readmore.twig b/packages/ui/molecules/Readmore/Readmore.twig index 634d5502..037532ee 100644 --- a/packages/ui/molecules/Readmore/Readmore.twig +++ b/packages/ui/molecules/Readmore/Readmore.twig @@ -15,7 +15,7 @@ * Custom attributes for the hidden content. * @param array {label: string, label2: string} $btn * Define the button. - * @param array $button_attr + * @param array $btn_attr * Custom attributes for the button. * @param boolean $animation * Wether to use an animation or not @@ -44,8 +44,8 @@ ) %} -{% set button_attr = - merge_html_attributes(button_attr ?? null, { class: 'optionnel' }, { class: ['button'] }) +{% set btn_attr = + merge_html_attributes(btn_attr ?? null, { class: 'optionnel' }, { class: ['button'] }) %} {% set animation = animation|default(true) %} @@ -59,7 +59,7 @@ {{ hidden_content }} {% include '@ui/atoms/Button/StyledButton.twig' with { - label: btn.label, - attr: { data_ref: 'button' } + label: data_options_btn_label_more, + attr: { data_ref: 'btn' } } %} From 86c8578ba0213b16623ef9ed343bb44b59f20f1c Mon Sep 17 00:00:00 2001 From: Clara Martin Date: Wed, 18 Jan 2023 11:08:38 +0100 Subject: [PATCH 4/5] Migrate the file to TypeScript. Wrap the elements with block for easier advanced usage. Implement dedicated methods for the show anb hide --- packages/ui/molecules/Readmore/Readmore.js | 59 ------------ packages/ui/molecules/Readmore/Readmore.ts | 94 ++++++++++++++++++++ packages/ui/molecules/Readmore/Readmore.twig | 34 ++++--- 3 files changed, 114 insertions(+), 73 deletions(-) delete mode 100644 packages/ui/molecules/Readmore/Readmore.js create mode 100644 packages/ui/molecules/Readmore/Readmore.ts diff --git a/packages/ui/molecules/Readmore/Readmore.js b/packages/ui/molecules/Readmore/Readmore.js deleted file mode 100644 index 20a1c5db..00000000 --- a/packages/ui/molecules/Readmore/Readmore.js +++ /dev/null @@ -1,59 +0,0 @@ -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; - } - } -} diff --git a/packages/ui/molecules/Readmore/Readmore.ts b/packages/ui/molecules/Readmore/Readmore.ts new file mode 100644 index 00000000..cb7b0667 --- /dev/null +++ b/packages/ui/molecules/Readmore/Readmore.ts @@ -0,0 +1,94 @@ +import { Base } from '@studiometa/js-toolkit'; +import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit'; +import { animate, easeInOutExpo } from '@studiometa/js-toolkit/utils'; +import type { Animate } from '@studiometa/js-toolkit/utils'; +/** + * Button Readmore class. + */ +export interface ReadmoreProps extends BaseProps { + $refs: { + btn: HTMLButtonElement; + btnLabel: HTMLElement; + mainContent: HTMLElement; + hiddenContent: HTMLElement; + }; + $options: { + length: number; + animate: boolean; + btnLabelMore: string; + btnLabelLess: string; + }; +} + +/** + * Readmore Class + */ +export default class Readmore extends Base { + /** + * Config + */ + static config: BaseConfig = { + name: 'Readmore', + refs: ['btn', 'btnLabel', 'mainContent', 'hiddenContent'], + options: { + length: Number, + animate: { type: Boolean, default: true }, + btnLabelMore: { type: String, default: 'Voir plus' }, + btnLabelLess: { type: String, default: 'Voir moins' }, + }, + }; + + animation: Animate; + + /** + * On mounted + */ + mounted() { + this.animation = animate( + this.$refs.hiddenContent, + [ + { x: 0, scaleY: 0, opacity: 0 }, + { x: 0, scaleY: 1, opacity: 1 }, + ], + { + duration: 0.1, + easing: easeInOutExpo, + }, + ); + } + + /** + * Show the content + */ + show() { + setTimeout(() => { + this.$refs.hiddenContent.classList.remove('hidden'); + }, 50); + this.animation.start(); + this.$refs.btn.innerHTML = this.$options.btnLabelLess; + } + + /** + * Hide the content + */ + hide() { + this.$refs.hiddenContent.classList.add('hidden'); + this.$refs.btn.innerHTML = this.$options.btnLabelMore; + } + + /** + * Toggle the content visibility + */ + toggle() {} + + /** + * On button click + */ + onBtnClick() { + if (this.$refs.hiddenContent.classList.contains('hidden')) { + this.show(); + } else { + this.hide(); + } + } +} diff --git a/packages/ui/molecules/Readmore/Readmore.twig b/packages/ui/molecules/Readmore/Readmore.twig index 037532ee..d222d865 100644 --- a/packages/ui/molecules/Readmore/Readmore.twig +++ b/packages/ui/molecules/Readmore/Readmore.twig @@ -5,11 +5,11 @@ * * @param array $attr * Use it to customize the root element attributes. - * @param string main_content $main_content + * @param string $mainContent * Define the main content. * @param array $main_content_attr * Custom attributes for the main content. - * @param string $hidden_content + * @param string $hiddenContent * Define the hidden content. * @param array $hidden_content_attr * Custom attributes for the hidden content. @@ -32,7 +32,7 @@ merge_html_attributes( main_content_attr ?? null, { class: 'optionnel' }, - { data_ref: 'main_content', class: ['main_content'] } + { data_ref: 'mainContent', class: ['main_content'] } ) %} @@ -40,7 +40,7 @@ merge_html_attributes( hidden_content_attr ?? null, { class: 'optionnel' }, - { data_ref: 'hidden_content', aria_hidden: 'true', class: ['hidden_content hidden'] } + { data_ref: 'hiddenContent', aria_hidden: 'true', class: ['hidden_content hidden'] } ) %} @@ -52,14 +52,20 @@ {% set length = length|default('70') %}
-
- {{ main_content }} -
-
- {{ hidden_content }} -
- {% include '@ui/atoms/Button/StyledButton.twig' with { - label: data_options_btn_label_more, - attr: { data_ref: 'btn' } - } %} + {% block mainContent %} +
+ {{ mainContent }} +
+ {% endblock %} + {% block hiddenContent %} +
+ {{ hiddenContent }} +
+ {% endblock %} + {% block button %} + {% include '@ui/atoms/Button/Button.twig' with { + label: data_options_btn_label_more, + attr: { data_ref: 'btn' } + } %} + {% endblock %}
From 6377ec8c015b6ea7b1427e330ae39317fb926299 Mon Sep 17 00:00:00 2001 From: Clara Martin Date: Wed, 18 Jan 2023 11:16:04 +0100 Subject: [PATCH 5/5] Fix the code showing the example --- .../components/molecules/Readmore/examples.md | 1 + .../Readmore/stories/simple/app.twig | 21 +++++++++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/docs/components/molecules/Readmore/examples.md b/packages/docs/components/molecules/Readmore/examples.md index 0ac74639..4a5e580c 100644 --- a/packages/docs/components/molecules/Readmore/examples.md +++ b/packages/docs/components/molecules/Readmore/examples.md @@ -7,6 +7,7 @@ title: Readmore examples ## Simple Readmore + :::details Code diff --git a/packages/docs/components/molecules/Readmore/stories/simple/app.twig b/packages/docs/components/molecules/Readmore/stories/simple/app.twig index 243bb4b5..455e152b 100644 --- a/packages/docs/components/molecules/Readmore/stories/simple/app.twig +++ b/packages/docs/components/molecules/Readmore/stories/simple/app.twig @@ -1,8 +1,17 @@
- {% 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' - } %} + {% embed '@ui/molecules/Readmore/Readmore.twig' + with { + mainContent: '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.', + hiddenContent: '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' + } + %} + {% block button %} + {% include '@ui/atoms/Button/StyledButton.twig' with { + label: data_options_btn_label_more, + attr: { data_ref: 'btn' } + } %} + {% endblock %} + {% endembed %}