Skip to content

Commit

Permalink
docs(alert): inline scripts, heading tags fixing
Browse files Browse the repository at this point in the history
  • Loading branch information
brianferry committed Oct 16, 2023
1 parent d97a4f7 commit 472fa59
Show file tree
Hide file tree
Showing 8 changed files with 43 additions and 55 deletions.
3 changes: 1 addition & 2 deletions elements/pf-alert/demo/custom-icons.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<pf-alert header="Custom icon">
<pf-icon slot="icon" set="fas" icon="users" loading="idle"></pf-icon>
Expand Down
13 changes: 6 additions & 7 deletions elements/pf-alert/demo/inline.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<h1>
<h2>
Inline
</h1>
</h2>

<pf-alert header="Default inline" inline></pf-alert>
<pf-alert variant="info" header="Info inline" inline></pf-alert>
<pf-alert variant="success" header="Success inline" inline></pf-alert>
<pf-alert variant="warning" header="Warning inline" inline></pf-alert>
<pf-alert variant="danger" header="Danger inline" inline></pf-alert>

<h1>
<h2>
Inline Plain
</h1>
</h2>

<pf-alert header="Default inline" inline plain></pf-alert>
<pf-alert variant="info" header="Info inline" inline plain></pf-alert>
<pf-alert variant="success" header="Success inline" inline plain></pf-alert>
<pf-alert variant="warning" header="Warning inline" inline plain></pf-alert>
<pf-alert variant="danger" header="Danger inline" inline plain></pf-alert>
<pf-alert variant="danger" header="Danger inline" inline plain></pf-alert>
37 changes: 18 additions & 19 deletions elements/pf-alert/demo/kitchen-sink.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<pf-alert header="Default alert title"></pf-alert>
<pf-alert variant="info" header="Info alert title"></pf-alert>
<pf-alert variant="success" header="Success alert title"></pf-alert>
<pf-alert variant="warning" header="Warning alert title"></pf-alert>
<pf-alert variant="danger" header="Danger alert title"></pf-alert>

<h1>
Alert Variations
</h1>
<h2>
Alert Variations
</h2>

<pf-alert header="Success alert title" variant="success" dismissable>
<p>Success alert description. This should tell the user more information about the alert.</p>
Expand Down Expand Up @@ -41,9 +40,9 @@ <h1>

<pf-alert header="Success alert title" variant="success" dismissable></pf-alert>

<h1>
<h2>
Default Icons
</h1>
</h2>

<pf-alert header="Custom icon">
<pf-icon slot="icon" set="fas" icon="users" loading="idle"></pf-icon>
Expand All @@ -61,9 +60,9 @@ <h1>
<pf-icon slot="icon" set="fas" icon="laptop" loading="idle"></pf-icon>
</pf-alert>

<h1>
<h2>
Plain
</h1>
</h2>

<pf-alert header="Default plain" plain></pf-alert>
<pf-alert variant="info" header="Info plain" plain></pf-alert>
Expand All @@ -74,45 +73,45 @@ <h1>
<pf-alert variant="warning" header="Warning plain" plain></pf-alert>
<pf-alert variant="danger" header="Danger plain" plain></pf-alert>

<h1>
<h2>
Inline
</h1>
</h2>

<pf-alert header="Default inline" inline></pf-alert>
<pf-alert variant="info" header="Info inline" inline></pf-alert>
<pf-alert variant="success" header="Success inline" inline></pf-alert>
<pf-alert variant="warning" header="Warning inline" inline></pf-alert>
<pf-alert variant="danger" header="Danger inline" inline></pf-alert>

<h1>
<h2>
Plain
</h1>
</h2>

<pf-alert header="Default inline" plain></pf-alert>
<pf-alert variant="info" header="Info inline" plain></pf-alert>
<pf-alert variant="success" header="Success inline" plain></pf-alert>
<pf-alert variant="warning" header="Warning inline" plain></pf-alert>
<pf-alert variant="danger" header="Danger inline" plain></pf-alert>

<h1>
<h2>
Inline Plain
</h1>
</h2>

<pf-alert header="Default inline" inline plain></pf-alert>
<pf-alert variant="info" header="Info inline" inline plain></pf-alert>
<pf-alert variant="success" header="Success inline" inline plain></pf-alert>
<pf-alert variant="warning" header="Warning inline" inline plain></pf-alert>
<pf-alert variant="danger" header="Danger inline" inline plain></pf-alert>

<h1>
<h2>
Truncated Title
</h1>
</h2>

<pf-alert style="width:100px;" truncate-title header="It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair."></pf-alert>

<h1>
<h2>
Timeout
</h1>
</h2>

<pf-button id="create-timeout-alert">Create default timeout alert</pf-button>
<pf-button id="create-timeout-inline-alert">Create inline timeout alert</pf-button>
Expand Down
7 changes: 1 addition & 6 deletions elements/pf-alert/demo/pf-alert.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<pf-alert header="Default alert title"></pf-alert>
<pf-alert variant="info" header="Info alert title"></pf-alert>
<pf-alert variant="success" header="Success alert title"></pf-alert>
<pf-alert variant="warning" header="Warning alert title"></pf-alert>
<pf-alert variant="danger" header="Danger alert title"></pf-alert>
11 changes: 5 additions & 6 deletions elements/pf-alert/demo/plain.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<h1>
<h2>
Plain
</h1>
</h2>

<pf-alert header="Default plain" plain></pf-alert>
<pf-alert variant="info" header="Info plain" plain></pf-alert>
Expand All @@ -14,9 +13,9 @@ <h1>
<pf-alert variant="warning" header="Warning plain" plain></pf-alert>
<pf-alert variant="danger" header="Danger plain" plain></pf-alert>

<h1>
<h2>
Inline Plain
</h1>
</h2>

<pf-alert header="Default inline" inline plain></pf-alert>
<pf-alert variant="info" header="Info inline" inline plain></pf-alert>
Expand Down
7 changes: 3 additions & 4 deletions elements/pf-alert/demo/timeout.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="timeout.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="timeout.js"></script>

<h1>
<h2>
Timeout
</h1>
</h2>

<pf-button id="create-timeout-alert">Create default timeout alert</pf-button>
<pf-button id="create-timeout-inline-alert">Create inline timeout alert</pf-button>
Expand Down
9 changes: 4 additions & 5 deletions elements/pf-alert/demo/truncated.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<h1>
<h2>
Truncated Title
</h1>
</h2>

<pf-alert style="width:100px;" truncate-title header="It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair."></pf-alert>
<pf-alert style="width:100px;" truncate-title header="It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair."></pf-alert>
11 changes: 5 additions & 6 deletions elements/pf-alert/demo/variants.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-alert.js"></script>
<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>

<pf-alert header="Default alert title"></pf-alert>
<pf-alert variant="info" header="Info alert title"></pf-alert>
<pf-alert variant="success" header="Success alert title"></pf-alert>
<pf-alert variant="warning" header="Warning alert title"></pf-alert>
<pf-alert variant="danger" header="Danger alert title"></pf-alert>

<h1>
Alert Variations
</h1>
<h2>
Alert Variations
</h2>

<pf-alert header="Success alert title" variant="success" dismissable>
<p>Success alert description. This should tell the user more information about the alert.</p>
Expand Down Expand Up @@ -39,4 +38,4 @@ <h1>
<button slot="actions">Ignore</button>
</pf-alert>

<pf-alert header="Success alert title" variant="success" dismissable></pf-alert>
<pf-alert header="Success alert title" variant="success" dismissable></pf-alert>

0 comments on commit 472fa59

Please sign in to comment.