Skip to content

Commit

Permalink
docs(blockquote): split out demos
Browse files Browse the repository at this point in the history
  • Loading branch information
bennypowers committed Oct 22, 2023
1 parent 0933eb6 commit 94ea6e7
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 80 deletions.
15 changes: 15 additions & 0 deletions elements/rh-blockquote/demo/centered.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<rh-blockquote align="center">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

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

<style>
[data-demo="rh-blockquote"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
42 changes: 42 additions & 0 deletions elements/rh-blockquote/demo/color-context.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<rh-context-picker target="context-provider"></rh-context-picker>

<rh-context-provider id="context-provider" color-palette="darkest">
<rh-blockquote>
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Default, Centered</h3>
<rh-blockquote align="center">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Default, Highlighted</h3>
<rh-blockquote highlight="inline-start">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Large</h3>
<rh-blockquote size="large">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>
</rh-context-provider>

<script type="module">
import '@rhds/elements/rh-blockquote/rh-blockquote.js';
import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
</script>

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

This file was deleted.

15 changes: 15 additions & 0 deletions elements/rh-blockquote/demo/highlighted.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<rh-blockquote highlight="inline-start">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

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

<style>
[data-demo="rh-blockquote"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
15 changes: 15 additions & 0 deletions elements/rh-blockquote/demo/large.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<rh-blockquote size="large">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

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

<style>
[data-demo="rh-blockquote"] {
padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
}
</style>
85 changes: 15 additions & 70 deletions elements/rh-blockquote/demo/rh-blockquote.html
Original file line number Diff line number Diff line change
@@ -1,70 +1,15 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-blockquote.js"></script>

<rh-context-provider>
<hgroup>
<h2>Light Theme</h2>
<h3>Default</h3>
</hgroup>

<rh-blockquote>
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Default, Centered</h3>
<rh-blockquote align="center">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Default, Highlighted</h3>
<rh-blockquote highlight="inline-start">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Large</h3>
<rh-blockquote size="large">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>
</rh-context-provider>

<rh-context-provider color-palette="darkest">
<hgroup>
<h2>Dark Theme</h2>
<h3>Default</h3>
</hgroup>

<rh-blockquote>
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Default, Centered</h3>
<rh-blockquote align="center">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Default, Highlighted</h3>
<rh-blockquote highlight="inline-start">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

<h3>Large</h3>
<rh-blockquote size="large">
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>
</rh-context-provider>
<rh-blockquote>
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>

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

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

This file was deleted.

0 comments on commit 94ea6e7

Please sign in to comment.