notice: add parameter groupid #954

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
 

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**           |          | _&lt;empty&gt;_ | Arbitrary name of the group the box belongs to.<br><br>Expandable boxes with the same **groupid** sychronize their open state. |
 | **style**             | 1        | `default`       | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`<br><br>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.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color<br><br>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.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>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 %}}
 

layouts/partials/shortcodes/notice.html

@@ -12,6 +12,7 @@
 {{- if not (hasPrefix $content "<") }}
   {{- $content = printf "<p>\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 -}}
-<details class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style=" --VARIABLE-BOX-color: {{ $color }};"{{ end }}{{ if not $expander }} tabindex="-1" open{{ else if $expanded }} open{{ end }}>
+<details class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style=" --VARIABLE-BOX-color: {{ $color }};"{{ end }}{{ if $groupid }} name="{{ $groupid }}" {{ end }}{{ if not $expander }} tabindex="-1" open{{ else if $expanded }} open{{ end }}>
   <summary class="box-label{{ if and (not $expander) (not $icon) (not $title) }} a11y-only{{ end }}">{{ if $expander }}
     <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ end }}{{ if $icon }}
     <i class="{{ $icon }}"></i> {{ end }}{{ if $title }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.1.1+15b9b378f434ff288d819579379d632a97bf4938
+7.1.1+bda57027b3c9f782f73a1b088ab021cf9b47a29d

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))