Initial AD port

themes/after-dark/docs/content/shortcode/button-group.md

@@ -0,0 +1,68 @@
++++
+title = "Button Group"
+description = "Layout buttons to fit buttons snugly together."
+categories = ["interaction"]
+tags = ["controls"]
+html_attributes = ["class"]
+custom_attributes = ["formactions"]
+snippets_used = ["button group", "button", "form"]
+notes = [
+  "update 'snippets' if this content is updated"
+]
+[[copyright]]
+  owner = "Josh Habdas"
+  date = "2019"
+  license = "agpl-3.0-or-later"
++++
+
+With three [Buttons](../button), one ghosted and one of type info:
+
+```html
+{{</* hackcss-buttongroup >}}
+  {{< hackcss-button text="Left" />}}
+  {{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
+  {{< hackcss-button text="Right" isghost="true" />}}
+{{< /hackcss-buttongroup */>}}
+```
+
+{{< hackcss-buttongroup >}}
+  {{< hackcss-button text="Left" />}}
+  {{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
+  {{< hackcss-button text="Right" isghost="true" />}}
+{{< /hackcss-buttongroup >}}
+
+With three [Buttons](../button) styled using `class` attribute:
+
+```html
+<style>.btn-text button::after { content: attr(class) }</style>
+{{</* hackcss-buttongroup class="btn-text" >}}
+  {{< hackcss-button />}}
+  {{< hackcss-button type="info" />}}
+{{< /hackcss-buttongroup */>}}
+```
+
+<style>.btn-text button::after { content: attr(class) }</style>
+{{< hackcss-buttongroup class="btn-text" >}}
+  {{< hackcss-button />}}
+  {{< hackcss-button type="info" />}}
+{{< /hackcss-buttongroup >}}
+
+With two [Buttons](../button) inside a [Form](../form) using `formactions` attribute:
+
+```html
+{{</* hackcss-form action="/search" >}}
+  {{< hackcss-textinput type="hidden" name="s" value="button" >}}
+  {{< hackcss-buttongroup formactions="true" >}}
+    {{< hackcss-button text="Print" action="javascript:window.print()" />}}
+    {{< hackcss-button text="Search" type="primary" isghost="true" />}}
+  {{< /hackcss-buttongroup >}}
+{{< /hackcss-form */>}}
+```
+
+{{< hackcss-form action="/search" >}}
+  {{< hackcss-textinput type="hidden" name="s" value="group" >}}
+  {{< hackcss-buttongroup formactions="true" >}}
+    {{< hackcss-button text="Print" action="javascript:window.print()" />}}
+    {{< hackcss-button text="Search" type="primary" isghost="true" />}}
+  {{< /hackcss-buttongroup >}}
+{{< /hackcss-form >}}