feat: add tabs and tab shortcodes support (#634)

* feat: add tabs and tab shortcodes support

Powered by https://github.com/github/tab-container-element

* fix: adjust tab-container styles for improved layout and responsiveness

- [x] Underline Style (Default)
- [x] Pill Style
- [x] Card Style
- [x] Segment Style

* test: add tabs comprehensive test cases

* style: code optimization

* fix: add tabs support in home scope

* docs: add `<tab-container>` element reference to README files

* feat: enhance tab-container with loading mixin and simplify code

* refactor: update variable references to use root prefix in styles

* docs: add tabs shortcode support to README files

* fix: ensure shortcode is enclosed within a tabs block

* feat: add responsive design for tab-container on smaller screens

* test: remove unnecessary placement attribute for segment tabs

* refactor: remove unused vertical attribute from tabs shortcode

* fix: set default tab type to 'underline' for consistency

* refactor: update tab-button and tab-panel selectors for improved specificity

layouts/_shortcodes/tab.html

@@ -0,0 +1,18 @@
+{{- with $.Parent -}}
+  {{- if ne $.Parent.Name "tabs" -}}
+    {{- errorf "Found shortcode %q enclosed inside a %q block, must be enclosed inside a %q block. Error position: %s" $.Name $.Parent.Name "tabs" $.Position -}}
+  {{- end -}}
+{{- else -}}
+  {{- errorf "shortcode %q must be enclosed inside a %q block, but no parent block was found. Error position: %s" $.Name "tabs" $.Position -}}
+{{- end -}}
+
+{{- $id := dict "Page" .Page | partial "function/id.html" -}}
+{{- $title := .Get "title" -}}
+{{- .Parent.Store.Add "tabs" (slice (dict "title" $title "id" $id)) -}}
+{{- $content := trim .Inner "\r\n" -}}
+{{- /* Remove p tags around complete tab-container structure */ -}}
+{{- $content = $content | replaceRE `<p>(<tab-container[^>]*>[\s\S]*?</button>)</p>` "$1" -}}
+
+{{- /* Tab panel */ -}}
+<div role="tabpanel" aria-labelledby="tab-{{ $id }}" class="tab-panel">{{ $content | safeHTML }}</div>
+{{- /* EOF */ -}}

layouts/_shortcodes/tabs.html

@@ -0,0 +1,31 @@
+{{- $tabs := .Store.Get "tabs" -}}
+{{- if not $tabs -}}
+  {{- errorf "No tabs found. Please add at least one tab to the tabs shortcode. See %s %s" .Name .Position -}}
+{{- end -}}
+{{- $lenTabs := len $tabs -}}
+{{- $defaultTab := .Get "defaultTab" | default 0 -}}
+{{- $type := .Get "type" | default "underline" -}}
+{{- $placement := .Get "placement" | default "top" -}}
+{{- $placementMap := slice "top" "bottom" "left" "right" -}}
+{{- if ge $defaultTab $lenTabs -}}
+  {{- warnf "The defaultTab value %v is out of range [0, %v]. See %s %s" $defaultTab (sub $lenTabs 1) .Name .Position -}}
+  {{- $defaultTab = 0 -}}
+{{- end -}}
+{{- if not (in $placementMap $placement) -}}
+  {{- warnf "The placement value %q is invalid. Supported values are: %v. See %s %s" $placement (delimit $placementMap ", ") .Name .Position -}}
+  {{- $placement = "top" -}}
+{{- end -}}
+
+{{- /* Tabs Container */ -}}
+<tab-container default-tab="{{ $defaultTab }}" placement="{{ $placement }}"{{ with $type }} type="{{ . }}"{{ end }}>
+  {{- range $index, $tab := $tabs -}}
+    {{- $title := $tab.title | default (printf "Untitled%v" $index) -}}
+    {{- $id := $tab.id -}}
+    <button class="tab-button" type="button" role="tab" id="tab-{{ $id }}" aria-selected="{{ eq $index $defaultTab }}">{{ $title | $.Page.RenderString }}</button>
+  {{- end -}}
+  {{- .Inner -}}
+</tab-container>
+{{- .Page.Store.Set "hasTabs" true -}}
+{{- if eq hugo.Context.MarkupScope "home" -}}
+  {{- site.Home.Store.Set "hasTabs" true -}}
+{{- end -}}