From 79d3e264d6c443d61e3511eeea9608600c33b3cc Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 20 Jun 2023 10:44:00 -0700 Subject: [PATCH] docs(rounded): add examples for rounded button #212 --- apiExamples/rounded.html | 3 +++ apiExamples/roundedRightAlign.html | 4 ++++ apiExamples/roundedRightAlign.js | 11 +++++++++++ apiExamples/roundedTextOnly.html | 3 +++ apiExamples/roundedTextWithIcon.html | 4 ++++ apiExamples/toggledText.html | 4 ++++ apiExamples/toggledText.js | 11 +++++++++++ 7 files changed, 40 insertions(+) create mode 100644 apiExamples/rounded.html create mode 100644 apiExamples/roundedRightAlign.html create mode 100644 apiExamples/roundedRightAlign.js create mode 100644 apiExamples/roundedTextOnly.html create mode 100644 apiExamples/roundedTextWithIcon.html create mode 100644 apiExamples/toggledText.html create mode 100644 apiExamples/toggledText.js diff --git a/apiExamples/rounded.html b/apiExamples/rounded.html new file mode 100644 index 0000000..38c6e25 --- /dev/null +++ b/apiExamples/rounded.html @@ -0,0 +1,3 @@ + + + diff --git a/apiExamples/roundedRightAlign.html b/apiExamples/roundedRightAlign.html new file mode 100644 index 0000000..14979f9 --- /dev/null +++ b/apiExamples/roundedRightAlign.html @@ -0,0 +1,4 @@ + + Back to Top + + diff --git a/apiExamples/roundedRightAlign.js b/apiExamples/roundedRightAlign.js new file mode 100644 index 0000000..c23dae8 --- /dev/null +++ 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 new file mode 100644 index 0000000..6ca2136 --- /dev/null +++ b/apiExamples/roundedTextOnly.html @@ -0,0 +1,3 @@ + + Primary + diff --git a/apiExamples/roundedTextWithIcon.html b/apiExamples/roundedTextWithIcon.html new file mode 100644 index 0000000..c37bec1 --- /dev/null +++ b/apiExamples/roundedTextWithIcon.html @@ -0,0 +1,4 @@ + + Back to Top + + diff --git a/apiExamples/toggledText.html b/apiExamples/toggledText.html new file mode 100644 index 0000000..edc4841 --- /dev/null +++ b/apiExamples/toggledText.html @@ -0,0 +1,4 @@ + + Text is now shown! + + diff --git a/apiExamples/toggledText.js b/apiExamples/toggledText.js new file mode 100644 index 0000000..f02d512 --- /dev/null +++ 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; + }); +}