Docs(web): ButtonLink demo #DS-979

- Added demo and readme for ButtonLink in web package
lmc-eu · Sep 26, 2023 · 00f7fdf · 00f7fdf
1 parent 60d60be
commit 00f7fdf
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 0 deletions.
diff --git a/packages/web/src/scss/components/ButtonLink/README.md b/packages/web/src/scss/components/ButtonLink/README.md
@@ -0,0 +1,65 @@
+# ButtonLink
+
+Variants:
+
+```html
+<a href="#" class="Button Button--primary Button--medium">Primary Button</a>
+<a href="#" class="Button Button--secondary Button--medium">Secondary Button</a>
+<a href="#" class="Button Button--tertiary Button--medium">Tertiary Button</a>
+<a href="#" class="Button Button--inverted Button--medium">Inverted button</a>
+<a href="#" class="Button Button--success Button--medium">Success button</a>
+<a href="#" class="Button Button--informative Button--medium">Informative button</a>
+<a href="#" class="Button Button--warning Button--medium">Warning button</a>
+<a href="#" class="Button Button--danger Button--medium">Danger button</a>
+```
+
+Block-level Button:
+
+```html
+<a href="#" class="Button Button--primary Button--medium Button--block">Primary block-level Button</a>
+```
+
+Disabling a Button:
+
+```html
+<a href="#" class="Button Button--primary Button--medium is-disabled">Disabled Button</a>
+<a href="#" class="Button Button--primary Button--medium Button--disabled">Disabled Button</a>
+```
+
+Loading Button:
+⚠️ In CSS we depend on the correct placement of the Spinner Icon. It should be the last child of the Button.
+
+```html
+<a href="#" class="Button Button--primary Button--medium Button--loading Button--disabled">
+  Button primary
+  <svg width="24" height="24" aria-hidden="true" class="animation-spin-clockwise">
+    <use xlink:href="/icons/svg/sprite.svg#spinner" />
+  </svg>
+</a>
+<a href="#" class="Button Button--primary Button--medium Button--loading Button--disabled">
+  <svg class="mr-400" width="24" height="24" aria-hidden="true">
+    <use xlink:href="/icons/svg/sprite.svg#hamburger" />
+  </svg>
+  Menu
+  <svg width="24" height="24" aria-hidden="true" class="animation-spin-clockwise">
+    <use xlink:href="/icons/svg/sprite.svg#spinner" />
+  </svg>
+</a>
+<a href="#" class="Button Button--primary Button--medium Button--square Button--loading Button--disabled">
+  <span class="accessibility-hidden">Menu</span>
+  <svg width="24" height="24" aria-hidden="true">
+    <use xlink:href="/icons/svg/sprite.svg#hamburger" />
+  </svg>
+  <svg width="24" height="24" aria-hidden="true" class="animation-spin-clockwise">
+    <use xlink:href="/icons/svg/sprite.svg#spinner" />
+  </svg>
+</a>
+```
+
+Sizes:
+
+```html
+<a href="#" class="Button Button--primary Button--small">Small Button</a>
+<a href="#" class="Button Button--primary Button--medium">Medium Button</a>
+<a href="#" class="Button Button--primary Button--large">Large Button</a>
+```
diff --git a/packages/web/src/scss/components/ButtonLink/index.html b/packages/web/src/scss/components/ButtonLink/index.html
@@ -0,0 +1,76 @@
+{{#> layout/plain }} {{setVar "colors" "primary" "secondary" "tertiary" "inverted" "success" "informative" "warning"
+"danger" }} {{setVar "sizes" "small" "medium" "large" }}
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Grid Grid--cols-1 Grid--desktop--cols-3">
+    {{#each @root.sizes as |size|}}
+      <div>
+        <h2 class="docs-Heading">Size {{size}}</h2>
+        <div class="docs-Stack docs-Stack--start">
+        {{#each @root.colors as |color|}}
+          <div class="{{#if (eq color 'inverted')}}docs-Box {{/if}}">
+            <div>
+              <a href="#" class="Button Button--{{color}} Button--{{size}}">Button {{color}}</a>
+              <a href="#" class="Button Button--{{color}} Button--{{size}}">
+                <svg class="mr-400" width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/icons/svg/sprite.svg#link" />
+                </svg>
+                Menu
+              </a>
+              <a href="#" class="Button Button--{{color}} Button--{{size}} Button--square">
+                <span class="accessibility-hidden">Menu</span>
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/icons/svg/sprite.svg#link" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        {{/each}}
+        </div>
+      </div>
+    {{/each}}
+    </div>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Disabled</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+    {{#each @root.sizes as |size|}}
+      <div>
+        <h2 class="docs-Heading">Size {{size}}</h2>
+        <div class="docs-Stack docs-Stack--start">
+        {{#each @root.colors as |color|}}
+          <div class="{{#if (eq color 'inverted')}}docs-Box {{/if}}">
+            <div>
+              <a href="#" class="Button Button--{{color}} Button--{{size}} is-disabled">Button {{color}}</a>
+              <a href="#" class="Button Button--{{color}} Button--{{size}} Button--disabled">
+                <svg class="mr-400" width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/icons/svg/sprite.svg#link" />
+                </svg>
+                Menu
+              </a>
+              <a href="#" class="Button Button--{{color}} Button--{{size}} Button--square Button--disabled">
+                <span class="accessibility-hidden">Menu</span>
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/icons/svg/sprite.svg#link" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        {{/each}}
+        </div>
+      </div>
+    {{/each}}
+    </div>
+
+  </div>
+</section>
+
+{{/layout/plain }}