docs(rounded): add examples for rounded button #212

AlaskaAirlines · Jun 15, 2023 · 8669f8a · 8669f8a
1 parent 04780b1
commit 8669f8a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 0 deletions.
diff --git a/apiExamples/rounded.html b/apiExamples/rounded.html
@@ -0,0 +1,3 @@
+<auro-button aria-label="arrow-up" rounded iconOnly>
+  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+</auro-button>
diff --git a/apiExamples/roundedRightAlign.html b/apiExamples/roundedRightAlign.html
@@ -0,0 +1,4 @@
+<auro-button aria-label="in-flight" rounded iconOnly toggleText id="rightAlignElem" style="float: right;">
+  Back to Top
+  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+</auro-button>
diff --git a/apiExamples/roundedRightAlign.js b/apiExamples/roundedRightAlign.js
@@ -0,0 +1,11 @@
+export function roundedRightAlignExample() {
+  const rightAlignElem = document.querySelector('#rightAlignElem');
+
+  rightAlignElem.addEventListener('mouseover', () => {
+    rightAlignElem.iconOnly = false;
+  });
+
+  rightAlignElem.addEventListener('mouseout', () => {
+    rightAlignElem.iconOnly = true;
+  });
+}
diff --git a/apiExamples/roundedTextOnly.html b/apiExamples/roundedTextOnly.html
@@ -0,0 +1,3 @@
+<auro-button aria-label="arrow-up" rounded>
+  Primary
+</auro-button>
diff --git a/apiExamples/roundedTextWithIcon.html b/apiExamples/roundedTextWithIcon.html
@@ -0,0 +1,4 @@
+<auro-button aria-label="in-flight" rounded>
+  Back to Top
+  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+</auro-button>
diff --git a/apiExamples/toggledText.html b/apiExamples/toggledText.html
@@ -0,0 +1,4 @@
+<auro-button aria-label="arrow-up" rounded iconOnly toggleText id="toggledTextElem">
+  Text is now shown!
+  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+</auro-button>
diff --git a/apiExamples/toggledText.js b/apiExamples/toggledText.js
@@ -0,0 +1,11 @@
+export function toggledTextExample() {
+  const toggledTextElem = document.querySelector('#toggledTextElem');
+
+  toggledTextElem.addEventListener('mouseover', () => {
+    toggledTextElem.iconOnly = false;
+  });
+
+  toggledTextElem.addEventListener('mouseout', () => {
+    toggledTextElem.iconOnly = true;
+  });
+}