Skip to content

Commit

Permalink
docs(badge): split out demos
Browse files Browse the repository at this point in the history
  • Loading branch information
bennypowers committed Oct 22, 2023
1 parent 7490bee commit 873e903
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 30 deletions.
14 changes: 14 additions & 0 deletions elements/rh-badge/demo/critical.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<rh-badge number="7" state="critical">7</rh-badge>
<rh-badge number="24" state="critical">24</rh-badge>
<rh-badge number="240" state="critical">240</rh-badge>
<rh-badge threshold="900" number="999" state="critical">999</rh-badge>

<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>

<style>
[data-demo="rh-badge"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
25 changes: 0 additions & 25 deletions elements/rh-badge/demo/demo.css

This file was deleted.

14 changes: 14 additions & 0 deletions elements/rh-badge/demo/important.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<rh-badge number="7" state="important">7</rh-badge>
<rh-badge number="24" state="important">24</rh-badge>
<rh-badge number="240" state="important">240</rh-badge>
<rh-badge threshold="900" number="999" state="important">999</rh-badge>

<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>

<style>
[data-demo="rh-badge"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
14 changes: 14 additions & 0 deletions elements/rh-badge/demo/info.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<rh-badge number="7" state="info">7</rh-badge>
<rh-badge number="24" state="info">24</rh-badge>
<rh-badge number="240" state="info">240</rh-badge>
<rh-badge threshold="900" number="999" state="info">999</rh-badge>

<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>

<style>
[data-demo="rh-badge"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
14 changes: 14 additions & 0 deletions elements/rh-badge/demo/moderate.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<rh-badge number="7" state="moderate">7</rh-badge>
<rh-badge number="24" state="moderate">24</rh-badge>
<rh-badge number="240" state="moderate">240</rh-badge>
<rh-badge threshold="900" number="999" state="moderate">999</rh-badge>

<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>

<style>
[data-demo="rh-badge"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
5 changes: 0 additions & 5 deletions elements/rh-badge/demo/rh-badge.js

This file was deleted.

14 changes: 14 additions & 0 deletions elements/rh-badge/demo/success.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<rh-badge number="7" state="success">7</rh-badge>
<rh-badge number="24" state="success">24</rh-badge>
<rh-badge number="240" state="success">240</rh-badge>
<rh-badge threshold="900" number="999" state="success">999</rh-badge>

<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>

<style>
[data-demo="rh-badge"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
12 changes: 12 additions & 0 deletions elements/rh-badge/demo/threshold.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<rh-badge number="900" threshold="100">900</rh-badge> (Threshold = 100)
<p>Should add '+' sign if the value exceeds the threshold</p>

<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>

<style>
[data-demo="rh-badge"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>

0 comments on commit 873e903

Please sign in to comment.