From 62b52bb8680225e7de2ff0442813709ae1e14bc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sat, 30 Nov 2024 19:36:58 +0100 Subject: [PATCH] notice: add parameter groupid #954 --- .../content/introduction/releasenotes/7/2.en.md | 6 +++++- exampleSite/content/shortcodes/notice.en.md | 13 ++++++++----- layouts/partials/shortcodes/notice.html | 3 ++- layouts/partials/version.txt | 2 +- layouts/shortcodes/notice.html | 1 + 5 files changed, 17 insertions(+), 8 deletions(-) diff --git a/exampleSite/content/introduction/releasenotes/7/2.en.md b/exampleSite/content/introduction/releasenotes/7/2.en.md index e390e5489f..645e18a55d 100644 --- a/exampleSite/content/introduction/releasenotes/7/2.en.md +++ b/exampleSite/content/introduction/releasenotes/7/2.en.md @@ -10,7 +10,11 @@ weight = -2 ### Change -- {{% badge style="note" title=" " %}}Change{{% /badge %}} Due to refactoring, the [`expand` shortcode](shortcodes/expand) and the [`notice` shortcode](shortcodes/notice) with `style=transparent` now generate slightly different margins. +- {{% badge style="note" title=" " %}}Change{{% /badge %}} The [`expand` shortcode](shortcodes/expand) was refactored and now internally uses the [`notice` shortcode](shortcodes/notice). + + In addition, the `notice` shortcode was improved for accessibility and comes with a [brand new parameter `groupid`](shortcodes/notice#expandable-content-area-with-groupid). + + Due to these changes, `expand` and `notice` with `style=transparent` will now generate slightly different margins. ### New diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md index b01422d753..77c170ee4c 100644 --- a/exampleSite/content/shortcodes/notice.en.md +++ b/exampleSite/content/shortcodes/notice.en.md @@ -63,6 +63,7 @@ If you want to display a transparent expandable box without any border, you can | Name | Position | Default | Notes | |-----------------------|----------|-----------------|-------------| +| **groupid** | | _<empty>_ | Arbitrary name of the group the box belongs to.

Expandable boxes with the same **groupid** sychronize their open state. | | **style** | 1 | `default` | The style scheme used for the box.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code`

You can also [define your own styles](#defining-own-styles). | | **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color

This is not available using callout syntax. | | **title** | 2 | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | @@ -261,23 +262,25 @@ No visible borders. {{% include "shortcodes/include/INCLUDE_ME.md" %}} {{% /notice %}} -#### Expandable Content Area +#### Expandable Content Area with `groupid` + +If you give multiple expandable boxes the same `groupid`, at most one will be open at any given time. If you open one of the boxes, all other boxes of the same group will close. ````go -{{%/* notice style="green" title="Expand me..." expanded="true" */%}} +{{%/* notice style="green" title="Expand me..." groupid="notice-toggle" expanded="true" */%}} No need to press you! {{%/* /notice */%}} -{{%/* notice style="red" title="Expand me..." expanded="false" */%}} +{{%/* notice style="red" title="Expand me..." groupid="notice-toggle" expanded="false" */%}} Thank you! {{%/* /notice */%}} ```` -{{% notice style="green" title="Expand me..." expanded="true" %}} +{{% notice style="green" title="Expand me..." groupid="notice-toggle" expanded="true" %}} No need to press you! {{% /notice %}} -{{% notice style="red" title="Expand me..." expanded="false" %}} +{{% notice style="red" title="Expand me..." groupid="notice-toggle" expanded="false" %}} Thank you! {{% /notice %}} diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html index 6348424b1e..d0629a2589 100644 --- a/layouts/partials/shortcodes/notice.html +++ b/layouts/partials/shortcodes/notice.html @@ -12,6 +12,7 @@ {{- if not (hasPrefix $content "<") }} {{- $content = printf "

\n%s" $content }} {{- end }} +{{- $groupid := .groupid }} {{- $style := .style | default "default" }} {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }} {{- $title := trim ($boxStyle.title) " " }} @@ -33,7 +34,7 @@ {{- end }} {{- with $page }} {{- if or $icon $title $hasContent -}} -

+
{{ if $expander }} {{ end }}{{ if $icon }} {{ end }}{{ if $title }} diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt index 690b181564..f043aa05db 100644 --- a/layouts/partials/version.txt +++ b/layouts/partials/version.txt @@ -1 +1 @@ -7.1.1+15b9b378f434ff288d819579379d632a97bf4938 \ No newline at end of file +7.1.1+bda57027b3c9f782f73a1b088ab021cf9b47a29d \ No newline at end of file diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html index 4eac55ee5f..8693d9075a 100644 --- a/layouts/shortcodes/notice.html +++ b/layouts/shortcodes/notice.html @@ -4,6 +4,7 @@ "color" (.Get "color") "content" .Inner "expanded" (.Get "expanded") + "groupid" (.Get "groupid") "icon" (.Get "icon" | default (.Get 2)) "style" (.Get "style" | default (.Get 0)) "title" (.Get "title" | default (.Get 1))