From 5d8b4b7051a0f6dada7e68f0c5a0ee903c29d49e Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 7 Mar 2023 11:55:17 -0500 Subject: [PATCH 1/6] docs: add htmlexample shortcode --- docs/main.css | 17 ++ elements/pf-accordion/docs/pf-accordion.md | 3 + elements/pf-avatar/docs/pf-avatar.md | 4 +- elements/pf-badge/docs/pf-badge.md | 8 +- elements/pf-button/docs/pf-button.md | 10 +- elements/pf-card/docs/pf-card.md | 13 +- .../docs/pf-clipboard-copy.md | 18 ++- elements/pf-code-block/docs/pf-code-block.md | 4 + elements/pf-icon/docs/pf-icon.md | 5 + elements/pf-jump-links/docs/pf-jump-links.md | 11 ++ elements/pf-label/docs/pf-label.md | 21 ++- elements/pf-modal/docs/pf-modal.md | 51 +++++- elements/pf-panel/docs/pf-panel.md | 12 +- .../docs/pf-progress-stepper.md | 15 +- elements/pf-spinner/docs/pf-spinner.md | 17 +- elements/pf-switch/docs/pf-switch.md | 10 +- elements/pf-tabs/docs/pf-tabs.md | 148 ++++++++++++++++-- elements/pf-tile/docs/pf-tile.md | 11 ++ elements/pf-timestamp/docs/pf-timestamp.md | 20 +++ elements/pf-tooltip/docs/pf-tooltip.md | 24 +++ eleventy.config.cjs | 9 ++ 21 files changed, 393 insertions(+), 38 deletions(-) diff --git a/docs/main.css b/docs/main.css index d6646f2b95..c72d84ca49 100644 --- a/docs/main.css +++ b/docs/main.css @@ -632,6 +632,23 @@ code { font-size: 14px; } + +.html-example { + display: flex; +} + +.html-example summary { + cursor: pointer; +} + +.html-example p:empty { + display: none; +} + +.html-example pre[class*="language-"] { + margin: 0; +} + .push-top { margin-top: var(--pf-theme--container-spacer, 0.83em); } diff --git a/elements/pf-accordion/docs/pf-accordion.md b/elements/pf-accordion/docs/pf-accordion.md index 86e51facf1..f79c60c908 100644 --- a/elements/pf-accordion/docs/pf-accordion.md +++ b/elements/pf-accordion/docs/pf-accordion.md @@ -59,6 +59,7 @@ + {% htmlexample %} ```html @@ -89,6 +90,8 @@ ``` + {% endhtmlexample %} + {% endband %} {% renderSlots %} diff --git a/elements/pf-avatar/docs/pf-avatar.md b/elements/pf-avatar/docs/pf-avatar.md index a0b39eca65..1837ec0b5f 100644 --- a/elements/pf-avatar/docs/pf-avatar.md +++ b/elements/pf-avatar/docs/pf-avatar.md @@ -11,13 +11,15 @@ src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"> + {% htmlexample %} ```html - + ``` + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-badge/docs/pf-badge.md b/elements/pf-badge/docs/pf-badge.md index 6481d4fbb3..d228e64825 100644 --- a/elements/pf-badge/docs/pf-badge.md +++ b/elements/pf-badge/docs/pf-badge.md @@ -9,18 +9,22 @@ ### Default 2 - ```html + {% htmlexample %} + ```html 2 ``` + {% endhtmlexample %} ### With a threshold This adds a "+" next to the number once the threshold value has been passed. 20 + {% htmlexample %} ```html 20 ``` + {% endhtmlexample %} ### With a state This adds a background color to the badge based on the state. @@ -28,10 +32,12 @@ 10 20 + {% htmlexample %} ```html 10 20 ``` + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-button/docs/pf-button.md b/elements/pf-button/docs/pf-button.md index 6e021f182c..736b08d1f4 100644 --- a/elements/pf-button/docs/pf-button.md +++ b/elements/pf-button/docs/pf-button.md @@ -37,6 +37,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; Inline Link Danger Link +{% htmlexample %} ```html +{% htmlexample %} ```html @@ -64,6 +67,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; ``` +{% endhtmlexample %} #### Control variant @@ -74,6 +78,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; +{% htmlexample %} ```html Control @@ -82,16 +87,19 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; ``` +{% endhtmlexample %}

Size

Medium Button Large Button - +{% htmlexample %} ```html Medium Button Large Button ``` +{% endhtmlexample %} + {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-card/docs/pf-card.md b/elements/pf-card/docs/pf-card.md index fa21fd92a4..223417a7f9 100644 --- a/elements/pf-card/docs/pf-card.md +++ b/elements/pf-card/docs/pf-card.md @@ -18,6 +18,7 @@ Link in the footer + {% htmlexample %} ```html

Header

@@ -25,6 +26,8 @@ Link in the footer ``` + {% endhtmlexample %} +

Rounded card

Header

@@ -32,6 +35,7 @@ Link in the footer + {% htmlexample %} ```html

Header

@@ -39,6 +43,7 @@ Link in the footer ``` + {% endhtmlexample %}

Large card

@@ -47,6 +52,7 @@ Link in the footer + {% htmlexample %} ```html

Large card

@@ -54,6 +60,7 @@ Link in the footer ``` + {% endhtmlexample %}

Full Height card

@@ -62,6 +69,7 @@ Link in the footer + {% htmlexample %} ```html

Header

@@ -69,6 +77,7 @@ Link in the footer ``` + {% endhtmlexample %}

Plain card

@@ -77,13 +86,15 @@ Link in the footer + {% htmlexample %} ```html

Header

This is the plain card

Link in the footer - ``` + ``` + {% endhtmlexample %} {% endband %} {% renderSlots %} diff --git a/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md b/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md index 4be138f825..a48cd6b21f 100644 --- a/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md +++ b/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md @@ -10,9 +10,11 @@ + {% htmlexample %} ```html ``` + {% endhtmlexample %}

Expanded

@@ -22,12 +24,14 @@
+ {% htmlexample %} ```html Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion. ``` + {% endhtmlexample %}

Read-only expanded

@@ -37,12 +41,14 @@
+ {% htmlexample %} ```html Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion. ``` + {% endhtmlexample %}

Read-only expanded by default

@@ -52,12 +58,14 @@
+ {% htmlexample %} ```html

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

asodifna osdif

 ``` + {% endhtmlexample %}

JSON object (pre-formatted code)

@@ -76,6 +84,7 @@
+ {% htmlexample %} ```html { "menu": { @@ -91,24 +100,29 @@ }} ``` + {% endhtmlexample %}

Inline compact

2.3.4-2-redhat
+ {% htmlexample %} ```html 2.3.4-2-redhat ``` + {% endhtmlexample %}

Inline compact code

2.3.4-2-redhat
+ {% htmlexample %} ```html 2.3.4-2-redhat - ``` + ``` + {% endhtmlexample %}

Inline compact with additional action

@@ -119,6 +133,7 @@
+ {% htmlexample %} ```html 2.3.4-2-redhat @@ -126,6 +141,7 @@ ``` + {% endhtmlexample %}
diff --git a/elements/pf-code-block/docs/pf-code-block.md b/elements/pf-code-block/docs/pf-code-block.md index 0e0b671116..f7c81bb6fc 100644 --- a/elements/pf-code-block/docs/pf-code-block.md +++ b/elements/pf-code-block/docs/pf-code-block.md @@ -37,6 +37,7 @@ To add copy-to-clipboard functionality, be sure to import `@patternfly/pf-clipbo +{% htmlexample %} ```html + {% htmlexample %} ```html ``` + {% endhtmlexample %} ### Adding a tooltip To add a tooltip that displays the timestamp content as a UTC time, you can wrap `pf-timestamp` with `pf-tooltip` and set the `utc` attribute on an additional `pf-timestamp`. @@ -80,39 +92,47 @@ + {% htmlexample %} ```html ``` + {% endhtmlexample %} + {% htmlexample %} ```html ``` + {% endhtmlexample %} ### Relative time To display relative time, set the `relative` attribute on `pf-timestamp`. + {% htmlexample %} ```html ``` + {% endhtmlexample %} + {% htmlexample %} ```html ``` + {% endhtmlexample %} ### Relative time with a tooltip To display relative time, set the `relative` attribute on `pf-timestamp`. diff --git a/elements/pf-tooltip/docs/pf-tooltip.md b/elements/pf-tooltip/docs/pf-tooltip.md index 7820718f18..7cfefc0d56 100644 --- a/elements/pf-tooltip/docs/pf-tooltip.md +++ b/elements/pf-tooltip/docs/pf-tooltip.md @@ -18,6 +18,7 @@
+{% htmlexample %} ```html Tooltip @@ -26,6 +27,7 @@ ``` +{% endhtmlexample %} ### Left-Start Tooltip @@ -35,6 +37,7 @@ +{% htmlexample %} ```html Tooltip @@ -43,6 +46,7 @@ ``` +{% endhtmlexample %} ### Left-End Tooltip @@ -52,6 +56,7 @@ +{% htmlexample %} ```html Tooltip @@ -60,6 +65,7 @@ ``` +{% endhtmlexample %} ### Right Tooltip @@ -69,6 +75,7 @@ +{% htmlexample %} ```html Tooltip @@ -77,6 +84,7 @@ ``` +{% endhtmlexample %} ### Right-Start Tooltip @@ -86,6 +94,7 @@ +{% htmlexample %} ```html Tooltip @@ -94,6 +103,7 @@ ``` +{% endhtmlexample %} ### Right-End Tooltip @@ -103,6 +113,7 @@ +{% htmlexample %} ```html Tooltip @@ -111,6 +122,7 @@ ``` +{% endhtmlexample %} ### Top Tooltip @@ -120,6 +132,7 @@ +{% htmlexample %} ```html Tooltip @@ -128,6 +141,7 @@ ``` +{% endhtmlexample %} ### Top-Start Tooltip @@ -137,6 +151,7 @@ +{% htmlexample %} ```html Tooltip @@ -145,6 +160,7 @@ ``` +{% endhtmlexample %} ### Top-End Tooltip @@ -154,6 +170,7 @@ +{% htmlexample %} ```html Tooltip @@ -162,6 +179,7 @@ ``` +{% endhtmlexample %} ### Bottom Tooltip @@ -171,6 +189,7 @@ +{% htmlexample %} ```html Tooltip @@ -179,6 +198,7 @@ ``` +{% endhtmlexample %} ### Bottom-Start Tooltip @@ -188,6 +208,7 @@ +{% htmlexample %} ```html Tooltip @@ -196,6 +217,7 @@ ``` +{% endhtmlexample %} ### Bottom-End Tooltip @@ -205,6 +227,7 @@ +{% htmlexample %} ```html Tooltip @@ -213,6 +236,7 @@ ``` +{% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/eleventy.config.cjs b/eleventy.config.cjs index 067bafe7c2..ff560ffd5c 100644 --- a/eleventy.config.cjs +++ b/eleventy.config.cjs @@ -79,6 +79,15 @@ module.exports = function(eleventyConfig) { warningFileSize: 400 * 1000, }); + eleventyConfig.addPairedShortcode('htmlexample', function(content) { + const id = Math.random().toString(36).at(2, 9); + return ` +
+ <HTML> + ${content} +
`; + }); + return { dir: { input: './docs', From b473f4a1e7917c5b730f76648e675342131c0c2a Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Thu, 16 Mar 2023 11:26:33 -0400 Subject: [PATCH 2/6] fix: broken icons on label docs page --- elements/pf-label/docs/pf-label.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/elements/pf-label/docs/pf-label.md b/elements/pf-label/docs/pf-label.md index 5242ee5506..c89f3a189d 100644 --- a/elements/pf-label/docs/pf-label.md +++ b/elements/pf-label/docs/pf-label.md @@ -76,11 +76,11 @@ ### With icon as an attribute Adds a optional fixed size `pf-icon` to the label as a prefix - Globe + Globe {% htmlexample %} ```html - Globe + Globe ``` {% endhtmlexample %} @@ -119,7 +119,7 @@ Globe Green Orange - Red + Red Purple Cyan Gold @@ -132,7 +132,7 @@ Green Orange - Red + Red Purple Cyan Gold From 122002b5cdd9d5b7651afe2c458a8228b73b3613 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 17 Apr 2023 16:54:39 +0300 Subject: [PATCH 3/6] docs: print html from html-example --- eleventy.config.cjs | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/eleventy.config.cjs b/eleventy.config.cjs index d8df15b65e..2419649620 100644 --- a/eleventy.config.cjs +++ b/eleventy.config.cjs @@ -84,12 +84,16 @@ module.exports = function(eleventyConfig) { }); eleventyConfig.addPairedShortcode('htmlexample', function(content) { - const id = Math.random().toString(36).at(2, 9); return ` -
- <HTML> - ${content} -
`; +${content} +
+ <HTML> + +~~~html +${content.trim()} +~~~ + +
`; }); return { From 75ebfe93008aef6187ee632a33022bab437944ea Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 17 Apr 2023 16:54:59 +0300 Subject: [PATCH 4/6] docs: migrate one instance of htmlexample --- elements/pf-tooltip/docs/pf-tooltip.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/elements/pf-tooltip/docs/pf-tooltip.md b/elements/pf-tooltip/docs/pf-tooltip.md index 7cfefc0d56..ac65544917 100644 --- a/elements/pf-tooltip/docs/pf-tooltip.md +++ b/elements/pf-tooltip/docs/pf-tooltip.md @@ -11,22 +11,13 @@ {% band header="Usage" %} ### Left Tooltip - - Tooltip -
- This is some content -
- - {% htmlexample %} -```html Tooltip
This is some content
-``` {% endhtmlexample %} ### Left-Start Tooltip From a53d20c4fa18d384e73334a5fa784471c9c69041 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 18 Apr 2023 10:50:32 +0300 Subject: [PATCH 5/6] docs: migrate rest of htmlexamples --- elements/pf-accordion/docs/pf-accordion.md | 31 -- elements/pf-avatar/docs/pf-avatar.md | 15 +- elements/pf-badge/docs/pf-badge.md | 12 - elements/pf-button/docs/pf-button.md | 116 +++--- elements/pf-card/docs/pf-card.md | 50 +-- .../docs/pf-clipboard-copy.md | 152 +++----- elements/pf-code-block/docs/pf-code-block.md | 30 -- elements/pf-icon/docs/pf-icon.md | 14 - elements/pf-jump-links/docs/pf-jump-links.md | 193 ++++------ elements/pf-label/docs/pf-label.md | 90 ++--- elements/pf-modal/docs/pf-modal.md | 38 -- elements/pf-panel/docs/pf-panel.md | 281 ++++++-------- .../docs/pf-progress-stepper.md | 12 - elements/pf-spinner/docs/pf-spinner.md | 17 +- elements/pf-switch/docs/pf-switch.md | 115 ++---- elements/pf-tabs/docs/pf-tabs.md | 280 ++++---------- elements/pf-tile/docs/pf-tile.md | 149 +++----- elements/pf-timestamp/docs/pf-timestamp.md | 106 ++---- elements/pf-tooltip/docs/pf-tooltip.md | 351 +++++++----------- eleventy.config.cjs | 4 +- 20 files changed, 620 insertions(+), 1436 deletions(-) diff --git a/elements/pf-accordion/docs/pf-accordion.md b/elements/pf-accordion/docs/pf-accordion.md index f79c60c908..8ccb924af8 100644 --- a/elements/pf-accordion/docs/pf-accordion.md +++ b/elements/pf-accordion/docs/pf-accordion.md @@ -30,37 +30,7 @@ {% endrenderOverview %} {% band header="Usage" %} - - -

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

- - -

Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.

- Call to action - - -

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

- - -

Ullamco ullamco sint ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.

- - -

Nostrud ad sit commodo nostrud?

- - -

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

- - -

Reprehenderit cupidatat labore?

- - -

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

- Call to action - - - {% htmlexample %} - ```html

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

@@ -89,7 +59,6 @@ Call to action - ``` {% endhtmlexample %} {% endband %} diff --git a/elements/pf-avatar/docs/pf-avatar.md b/elements/pf-avatar/docs/pf-avatar.md index 1837ec0b5f..94b2146669 100644 --- a/elements/pf-avatar/docs/pf-avatar.md +++ b/elements/pf-avatar/docs/pf-avatar.md @@ -3,22 +3,11 @@ {% endrenderOverview %} {% band header="Usage" %} -
- - - - -
- - {% htmlexample %} - ```html + {% htmlexample style="display: flex; gap: 1em;" %} - - ``` + {% endhtmlexample %} {% endband %} diff --git a/elements/pf-badge/docs/pf-badge.md b/elements/pf-badge/docs/pf-badge.md index d228e64825..5a949fe2d9 100644 --- a/elements/pf-badge/docs/pf-badge.md +++ b/elements/pf-badge/docs/pf-badge.md @@ -8,35 +8,23 @@ To provide context to your badge, it is highly encouraged that you also include an `aria-label` attribute in your markup. ### Default - 2 {% htmlexample %} - ```html 2 - ``` {% endhtmlexample %} ### With a threshold This adds a "+" next to the number once the threshold value has been passed. - 20 - {% htmlexample %} - ```html 20 - ``` {% endhtmlexample %} ### With a state This adds a background color to the badge based on the state. - 10 - 20 - {% htmlexample %} - ```html 10 20 - ``` {% endhtmlexample %} {% endband %} diff --git a/elements/pf-button/docs/pf-button.md b/elements/pf-button/docs/pf-button.md index 736b08d1f4..fb54d0e55a 100644 --- a/elements/pf-button/docs/pf-button.md +++ b/elements/pf-button/docs/pf-button.md @@ -26,80 +26,48 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; {% endrenderOverview %} {% band header="Usage" %} -#### Link variant - - - Link - -Link -Inline Link -Danger Link - -{% htmlexample %} -```html - - - Link - -Link -Inline Link -Danger Link -``` -{% endhtmlexample %} - -#### Plain button - - - - - - - -{% htmlexample %} -```html - - - - - -``` -{% endhtmlexample %} - -#### Control variant - -Control - - - - - - -{% htmlexample %} -```html -Control - - - - - -``` -{% endhtmlexample %} - -

Size

-Medium Button -Large Button - -{% htmlexample %} -```html -Medium Button -Large Button -``` -{% endhtmlexample %} - + ### Link variant + {% htmlexample %} + + + Link + + Link + Inline Link + Danger Link + {% endhtmlexample %} + + ### Plain button + {% htmlexample %} + + + + + + {% endhtmlexample %} + + ### Control variant + {% htmlexample %} + Control + + + + + + {% endhtmlexample %} + + ### Size + {% htmlexample %} + Medium Button + Large Button + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-card/docs/pf-card.md b/elements/pf-card/docs/pf-card.md index 223417a7f9..abb1bd2924 100644 --- a/elements/pf-card/docs/pf-card.md +++ b/elements/pf-card/docs/pf-card.md @@ -11,89 +11,49 @@ {% band header="Usage" %} -

Compact card

- -

Header

-

This is the compact card

- Link in the footer - - + ### Compact card {% htmlexample %} - ```html

Header

This is the compact card

Link in the footer - ``` {% endhtmlexample %} -

Rounded card

- -

Header

-

This is the rounded card

- Link in the footer - - + ### Rounded card {% htmlexample %} - ```html

Header

This is the rounded card

Link in the footer - ``` {% endhtmlexample %} -

Large card

- -

Large card

-

This is the large card

- Link in the footer - - + ### Large card {% htmlexample %} - ```html

Large card

This is the large card

Link in the footer - ``` {% endhtmlexample %} -

Full Height card

- -

Header

-

This is the full height card

- Link in the footer - - + ### Full Height card {% htmlexample %} - ```html

Header

This is the full height card

Link in the footer - ``` {% endhtmlexample %} -

Plain card

- -

Header

-

This is the plain card

- Link in the footer - - + ### Plain card {% htmlexample %} - ```html

Header

This is the plain card

Link in the footer - ``` {% endhtmlexample %} {% endband %} diff --git a/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md b/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md index a48cd6b21f..d562c67003 100644 --- a/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md +++ b/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md @@ -1,160 +1,94 @@ {% renderOverview %} -
- -
+ {% endrenderOverview %} {% band header="Usage" %} -
-

Read-only

- -
- + ### Read-only {% htmlexample %} - ```html - ``` {% endhtmlexample %} -
-

Expanded

- - Got a lot of text here, need to see all of it? - Click that arrow on the left side and check out the resulting expansion. - -
- + ### Expanded {% htmlexample %} - ```html Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion. - ``` {% endhtmlexample %} -
-

Read-only expanded

- - Got a lot of text here, need to see all of it? - Click that arrow on the left side and check out the resulting expansion. - -
- + ### Read-only expanded {% htmlexample %} - ```html Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion. - ``` {% endhtmlexample %} -
-

Read-only expanded by default

- -

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

-

asodifna osdif

- -
- + ### Read-only expanded by default {% htmlexample %} - ```html

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

asodifna osdif

 - ``` {% endhtmlexample %} -
-

JSON object (pre-formatted code)

- - { "menu": { - "id": "file", - "value": "File", - "popup": { - "menuitem": [ - {"value": "New", "onclick": "CreateNewDoc()"}, - {"value": "Open", "onclick": "OpenDoc()"}, - {"value": "Close", "onclick": "CloseDoc()"} - ] - } - }} - -
- + ### JSON object (pre-formatted code) {% htmlexample %} - ```html - - { "menu": { - "id": "file", - "value": "File", - "popup": { - "menuitem": [ - {"value": "New", "onclick": "CreateNewDoc()"}, - {"value": "Open", "onclick": "OpenDoc()"}, - {"value": "Close", "onclick": "CloseDoc()"} - ] - } - }} - - ``` + + { "menu": { + "id": "file", + "value": "File", + "popup": { + "menuitem": [ + {"value": "New", "onclick": "CreateNewDoc()"}, + {"value": "Open", "onclick": "OpenDoc()"}, + {"value": "Close", "onclick": "CloseDoc()"} + ] + } + }} + {% endhtmlexample %} -
-

Inline compact

- 2.3.4-2-redhat -
- + ### Inline compact {% htmlexample %} - ```html 2.3.4-2-redhat - ``` {% endhtmlexample %} -
-

Inline compact code

- 2.3.4-2-redhat -
- + ### Inline compact code {% htmlexample %} - ```html 2.3.4-2-redhat - ``` {% endhtmlexample %} -
-

Inline compact with additional action

- 2.3.4-2-redhat - - - - -
- + ### Inline compact with additional action {% htmlexample %} - ```html 2.3.4-2-redhat - ``` {% endhtmlexample %} -
-
-

Inline compact in sentence

-

Basic

-
-

Lorem ipsum 2.3.4-2-redhat

-

Long copy string

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

-

Long copy string in block

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. -

+ ### Inline compact in sentence + #### Basic + {% htmlexample %} +

Lorem ipsum 2.3.4-2-redhat

+ {% endhtmlexample %} + + #### Long copy string + {% htmlexample %} +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 + Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, + ullamcorper pharetra lacus nibh vitae enim.

+ {% endhtmlexample %} + + #### Long copy string in block + {% htmlexample %} +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 + Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, + ullamcorper pharetra lacus nibh vitae enim. +

+ {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-code-block/docs/pf-code-block.md b/elements/pf-code-block/docs/pf-code-block.md index f7c81bb6fc..92fde4e5ed 100644 --- a/elements/pf-code-block/docs/pf-code-block.md +++ b/elements/pf-code-block/docs/pf-code-block.md @@ -24,21 +24,7 @@ Script text content will be automatically dedented. To add copy-to-clipboard functionality, be sure to import `@patternfly/pf-clipboard` and add the `pf-clipboard` to the `action` slot. - - - - - {% htmlexample %} -```html -``` {% endhtmlexample %} ### Expandable @@ -62,21 +47,7 @@ It is important that you place the span right next to the ` - - - {% htmlexample %} -```html -``` {% endhtmlexample %} {% endband %} diff --git a/elements/pf-icon/docs/pf-icon.md b/elements/pf-icon/docs/pf-icon.md index 3f07ca4521..aa2797825d 100644 --- a/elements/pf-icon/docs/pf-icon.md +++ b/elements/pf-icon/docs/pf-icon.md @@ -19,36 +19,22 @@ with `aria-hidden="true"` or `role="presentation"`, if its content is merely presentational and expressed using accessible text copy elsewhere. - - - - - {% htmlexample %} - ```html - ``` {% endhtmlexample %} ### Size The default size is 1em, so icon size matches text size. `2x`, etc, are multiples of font size. `sm`, `md`, etc are fixed pixel-based sizes. - - - - - {% htmlexample %} - ```html - ``` {% endhtmlexample %} {% endband %} diff --git a/elements/pf-jump-links/docs/pf-jump-links.md b/elements/pf-jump-links/docs/pf-jump-links.md index 747dc242ff..ce00f0dd93 100644 --- a/elements/pf-jump-links/docs/pf-jump-links.md +++ b/elements/pf-jump-links/docs/pf-jump-links.md @@ -10,131 +10,74 @@ {% endrenderOverview %} {% band header="Usage" %} - - -
-

With centered list

- - Inactive section - Active section - Inactive section - -
- -{% htmlexample %} -```html - - Inactive section - Active section - Inactive section - -``` -{% endhtmlexample %} - -
-

With label

- - Inactive section - Active section - Inactive section - -
- -{% htmlexample %} -```html - - Inactive section - Active section - Inactive section - -``` -{% endhtmlexample %} - -
-

Vertical

- - Inactive section - Active section - Inactive section - -
- -{% htmlexample %} -```html - - Inactive section - Active section - Inactive section - -``` -{% endhtmlexample %} - - -
-

Expandable vertical with subsection

- - Inactive section - - Section with active subsection - - Active subsection - Inactive subsection - Inactive subsection - - - Inactive section - Inactive section - -
- -{% htmlexample %} -```html - - Inactive section - - Section with active subsection - - Active subsection - Inactive subsection - Inactive subsection - - - Inactive section - Inactive section - -``` -{% endhtmlexample %} - -
-

Expandable vertical with Scrollspy

- - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - -
- -{% htmlexample %} -```html - - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - -``` -{% endhtmlexample %} +
+

With centered list

+ {% htmlexample %} + + Inactive section + Active section + Inactive section + + {% endhtmlexample %} +
+ +
+

With label

+ {% htmlexample %} + + Inactive section + Active section + Inactive section + + {% endhtmlexample %} +
+ +
+

Vertical

+ {% htmlexample %} + + Inactive section + Active section + Inactive section + + {% endhtmlexample %} +
+ +
+

Expandable vertical with subsection

+ {% htmlexample %} + + Inactive section + + Section with active subsection + + Active subsection + Inactive subsection + Inactive subsection + + + Inactive section + Inactive section + + {% endhtmlexample %} +
+ +
+

Expandable vertical with Scrollspy

+ {% htmlexample %} + + Heading 1 + Heading 2 + Heading 3 + Heading 4 + Heading 5 + + {% endhtmlexample %} +
{%endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-label/docs/pf-label.md b/elements/pf-label/docs/pf-label.md index e295d506a5..22e19c578e 100644 --- a/elements/pf-label/docs/pf-label.md +++ b/elements/pf-label/docs/pf-label.md @@ -3,29 +3,15 @@ {% endrenderOverview %} {% band header="Usage" %} - ### Default - Default - {% htmlexample %} - ```html Default - ``` {% endhtmlexample %} ### With a color Available colors are: grey (default), blue, green, orange, red, purple, cyan, gold - Blue - Green - Orange - Red - Purple - Cyan - Gold - {% htmlexample %} - ```html Blue Green Orange @@ -33,35 +19,25 @@ Purple Cyan Gold - ``` {% endhtmlexample %}
-

Conveying meaning to assistive technologies

-

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with a class.

+ + ### Conveying meaning to assistive technologies + Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with a class. +
{% htmlexample %} - ```html - Red Warning - ``` + + Red Warning + {% endhtmlexample %} - ### Outline variant Swaps the color style for a outline styled variant - Blue - Green - Orange - Red - Purple - Cyan - Gold - Default - {% htmlexample %} - ```html Blue Green Orange @@ -69,19 +45,14 @@ Purple Cyan Gold - Default - ``` + Default {% endhtmlexample %} ### With icon as an attribute Adds a optional fixed size `pf-icon` to the label as a prefix - Globe - {% htmlexample %} - ```html Globe - ``` {% endhtmlexample %} Read more about Icon in the [PatternFly Elements Icon documentation](https://patternflyelements.org/components/icon) @@ -89,46 +60,38 @@ ### With user defined image using `slot="icon"` Adds user defined SVG or `pf-icon` to the label. - Globe - - - {% htmlexample %} - ```html Globe - + - ``` {% endhtmlexample %} - Globe - - - {% htmlexample %} - ```html Globe - ``` {% endhtmlexample %} ### Compact style Creates a compact style label which can be combined with color, variant and icon - Globe - Green - Orange - Red - Purple - Cyan - Gold - Default - {% htmlexample %} - ```html Globe - + Green Orange @@ -136,11 +99,8 @@ Purple Cyan Gold - Default - ``` + Default {% endhtmlexample %} - - {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-modal/docs/pf-modal.md b/elements/pf-modal/docs/pf-modal.md index 1880f1f227..677574711e 100644 --- a/elements/pf-modal/docs/pf-modal.md +++ b/elements/pf-modal/docs/pf-modal.md @@ -8,83 +8,45 @@ {% endrenderOverview %} {% band header="Usage" %} - - -

Modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Learn more - - Open modal - {% htmlexample %} - ```html

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open modal - ``` {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} {% renderAttributes %} - -

Small modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Learn more - - Open a small modal - {% htmlexample %} - ```html

Small modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open a small modal - ``` {% endhtmlexample %} - -

Medium modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Learn more - - Open a medium modal - {% htmlexample %} - ```html

Medium modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open a medium modal - ``` {% endhtmlexample %} - -

Large modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Learn more - - Open a large modal - {% htmlexample %} - ```html

Large modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open a large modal - ``` {% endhtmlexample %} - {% endrenderAttributes %} {% renderProperties %}{% endrenderProperties %} diff --git a/elements/pf-panel/docs/pf-panel.md b/elements/pf-panel/docs/pf-panel.md index 95f8a5d455..a5ae46ef9c 100644 --- a/elements/pf-panel/docs/pf-panel.md +++ b/elements/pf-panel/docs/pf-panel.md @@ -1,172 +1,123 @@ {% renderOverview %} - -

Main content

- + +

Main content

+ {% endrenderOverview %} {% band header="Usage" %} - -

Header

- -

Header content

-

Main content

- - -{% htmlexample %} -```html - -

Header content

-

Main content

- -``` -{% endhtmlexample %} - -

No Header

- -

Main content

-

Footer content

- - -{% htmlexample %} -```html - -

Main content

-

Footer content

- -``` -{% endhtmlexample %} - -

Header and footer

- -

Header content

-

Main content

-

Footer content

- - -{% htmlexample %} -```html - -

Header content

-

Main content

-

Footer content

- -``` -{% endhtmlexample %} - -

Raised

- -

Main content

- - -{% htmlexample %} -```html - -

Main content

- -``` -{% endhtmlexample %} - -

Bordered

- -

Main content

- - -{% htmlexample %} -```html - -

Main content

- -``` -{% endhtmlexample %} - -

Scrollable

- -

- A couple of years ago the Computer Science Club at Bishop's University - ran into a problem. Our student run computer lab was running - unlicensed copies of a propriety operating system. The computers also - had many unlicensed programs installed. It was a big mess. At that - time we had to make an ethical decision. We had to decide whether we - wanted to continue breaking the law or not. We decided against running - software for which we didn't have licenses as it could lead to the lab - being closed. -

-

- A couple of years ago the Computer Science Club at Bishop's University - ran into a problem. Our student run computer lab was running - unlicensed copies of a propriety operating system. The computers also - had many unlicensed programs installed. It was a big mess. At that - time we had to make an ethical decision. We had to decide whether we - wanted to continue breaking the law or not. We decided against running - software for which we didn't have licenses as it could lead to the lab - being closed. -

-

- A couple of years ago the Computer Science Club at Bishop's University - ran into a problem. Our student run computer lab was running - unlicensed copies of a propriety operating system. The computers also - had many unlicensed programs installed. It was a big mess. At that - time we had to make an ethical decision. We had to decide whether we - wanted to continue breaking the law or not. We decided against running - software for which we didn't have licenses as it could lead to the lab - being closed. -

- - -```html - -

- Long content... -

- -``` - -

Scrollable with header and footer

- -

Header content

-

- A couple of years ago the Computer Science Club at Bishop's University - ran into a problem. Our student run computer lab was running - unlicensed copies of a propriety operating system. The computers also - had many unlicensed programs installed. It was a big mess. At that - time we had to make an ethical decision. We had to decide whether we - wanted to continue breaking the law or not. We decided against running - software for which we didn't have licenses as it could lead to the lab - being closed. -

-

- A couple of years ago the Computer Science Club at Bishop's University - ran into a problem. Our student run computer lab was running - unlicensed copies of a propriety operating system. The computers also - had many unlicensed programs installed. It was a big mess. At that - time we had to make an ethical decision. We had to decide whether we - wanted to continue breaking the law or not. We decided against running - software for which we didn't have licenses as it could lead to the lab - being closed. -

-

- A couple of years ago the Computer Science Club at Bishop's University - ran into a problem. Our student run computer lab was running - unlicensed copies of a propriety operating system. The computers also - had many unlicensed programs installed. It was a big mess. At that - time we had to make an ethical decision. We had to decide whether we - wanted to continue breaking the law or not. We decided against running - software for which we didn't have licenses as it could lead to the lab - being closed. -

-

Footer content

- - -```html - -

Header content

-

- Long content... -

-

Footer content

- -``` - + ### Header + {% htmlexample %} + +

Header content

+

Main content

+ + {% endhtmlexample %} + + ### No Header + {% htmlexample %} + +

Main content

+

Footer content

+ + {% endhtmlexample %} + + ### Header and footer + {% htmlexample %} + +

Header content

+

Main content

+

Footer content

+ + {% endhtmlexample %} + + ### Raised + {% htmlexample %} + +

Main content

+ + {% endhtmlexample %} + + ### Bordered + {% htmlexample %} + +

Main content

+ + {% endhtmlexample %} + + ### Scrollable + {% htmlexample %} + +

+ A couple of years ago the Computer Science Club at Bishop's University + ran into a problem. Our student run computer lab was running + unlicensed copies of a propriety operating system. The computers also + had many unlicensed programs installed. It was a big mess. At that + time we had to make an ethical decision. We had to decide whether we + wanted to continue breaking the law or not. We decided against running + software for which we didn't have licenses as it could lead to the lab + being closed. +

+

+ A couple of years ago the Computer Science Club at Bishop's University + ran into a problem. Our student run computer lab was running + unlicensed copies of a propriety operating system. The computers also + had many unlicensed programs installed. It was a big mess. At that + time we had to make an ethical decision. We had to decide whether we + wanted to continue breaking the law or not. We decided against running + software for which we didn't have licenses as it could lead to the lab + being closed. +

+

+ A couple of years ago the Computer Science Club at Bishop's University + ran into a problem. Our student run computer lab was running + unlicensed copies of a propriety operating system. The computers also + had many unlicensed programs installed. It was a big mess. At that + time we had to make an ethical decision. We had to decide whether we + wanted to continue breaking the law or not. We decided against running + software for which we didn't have licenses as it could lead to the lab + being closed. +

+

Footer content

+ + {% endhtmlexample %} + + ### Scrollable with header and footer + {% htmlexample %} + +

Header content

+

+ A couple of years ago the Computer Science Club at Bishop's University + ran into a problem. Our student run computer lab was running + unlicensed copies of a propriety operating system. The computers also + had many unlicensed programs installed. It was a big mess. At that + time we had to make an ethical decision. We had to decide whether we + wanted to continue breaking the law or not. We decided against running + software for which we didn't have licenses as it could lead to the lab + being closed. +

+

+ A couple of years ago the Computer Science Club at Bishop's University + ran into a problem. Our student run computer lab was running + unlicensed copies of a propriety operating system. The computers also + had many unlicensed programs installed. It was a big mess. At that + time we had to make an ethical decision. We had to decide whether we + wanted to continue breaking the law or not. We decided against running + software for which we didn't have licenses as it could lead to the lab + being closed. +

+

+ A couple of years ago the Computer Science Club at Bishop's University + ran into a problem. Our student run computer lab was running + unlicensed copies of a propriety operating system. The computers also + had many unlicensed programs installed. It was a big mess. At that + time we had to make an ethical decision. We had to decide whether we + wanted to continue breaking the law or not. We decided against running + software for which we didn't have licenses as it could lead to the lab + being closed. +

+

Footer content

+ + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-progress-stepper/docs/pf-progress-stepper.md b/elements/pf-progress-stepper/docs/pf-progress-stepper.md index 1186bfd7db..50522018f4 100644 --- a/elements/pf-progress-stepper/docs/pf-progress-stepper.md +++ b/elements/pf-progress-stepper/docs/pf-progress-stepper.md @@ -9,17 +9,7 @@ {% endrenderOverview %} {% band header="Usage" %} - - - Completed - Issue - Failure - Running - Last - - {% htmlexample %} - ```html Completed Issue @@ -27,11 +17,9 @@ Running Last - ``` {% endhtmlexample %} {% endband %} - {% renderSlots %}{% endrenderSlots %} {% renderSlots for='pf-progress-step', header='Slots on `pf-progress-step`' %}{% endrenderSlots %} diff --git a/elements/pf-spinner/docs/pf-spinner.md b/elements/pf-spinner/docs/pf-spinner.md index 19e4082c46..94e1f784cd 100644 --- a/elements/pf-spinner/docs/pf-spinner.md +++ b/elements/pf-spinner/docs/pf-spinner.md @@ -1,40 +1,25 @@ {% renderOverview %} A spinner is used to indicate to users that an action is in progress. - + Loading... {% endrenderOverview %} {% band header="Usage" %} ### Basic - Loading... - {% htmlexample %} - ```html Loading... - ``` {% endhtmlexample %} ### Size variations - Loading... - Loading... - Loading... - Loading... - {% htmlexample %} - ```html Loading... Loading... Loading... Loading... - ``` {% endhtmlexample %} ### Custom size - Loading... - {% htmlexample %} - ```html Loading... - ``` {% endhtmlexample %} {% endband %} diff --git a/elements/pf-switch/docs/pf-switch.md b/elements/pf-switch/docs/pf-switch.md index 0284fb9799..b2a0473f51 100644 --- a/elements/pf-switch/docs/pf-switch.md +++ b/elements/pf-switch/docs/pf-switch.md @@ -1,82 +1,49 @@ {% renderOverview %} -A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting. + A switch toggles the state of a setting (between on and off). Switches + provide a more explicit, visible representation on a setting. - - - + + + {% endrenderOverview %} {% band header="Usage" %} - -### Basic - - - - -{% htmlexample %} -```html - - - -``` -{% endhtmlexample %} - -### Without label - - -{% htmlexample %} -```html - -``` -{% endhtmlexample %} - -### Checked with label - - - - -{% htmlexample %} -```html - - - -``` -{% endhtmlexample %} - -### Disabled -
-
- Checked and Disabled - - - -
-
- - - -
-
- -{% htmlexample %} -```html -
-
- Checked and Disabled - - - -
- -
- - - -
-
-``` -{% endhtmlexample %} - + ### Basic + {% htmlexample %} + + + + {% endhtmlexample %} + + ### Without label + {% htmlexample %} + + {% endhtmlexample %} + + ### Checked with label + {% htmlexample %} + + + + {% endhtmlexample %} + + ### Disabled + {% htmlexample %} +
+
+ Checked and Disabled + + + +
+ +
+ + + +
+
+ {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-tabs/docs/pf-tabs.md b/elements/pf-tabs/docs/pf-tabs.md index f564edcaca..c304c70df2 100644 --- a/elements/pf-tabs/docs/pf-tabs.md +++ b/elements/pf-tabs/docs/pf-tabs.md @@ -24,12 +24,13 @@ Aria Disabled Aria Disabled -
+ {% endrenderOverview %} {% band header="Usage" %} Each tab/panel pair consists of a `pf-tab` element, which must have the `slot="tab"` attribute, and a `pf-tab-panel` element, which should be a direct sibling of it's associated tab. + {% htmlexample %} Users Users @@ -38,90 +39,29 @@ Database Database + {% endhtmlexample %} +{% endband %} - {% htmlexample %} - ```html - +{% band header="Variants" %} + ### Box Light + {% htmlexample class="overflow-tab-wrapper" %} + Users Users Containers Containers Database Database + Disabled + Disabled + Aria Disabled + Aria Disabled - ``` - {% endhtmlexample %} -{% endband %} - -{% band header="Variants" %} - ### Box Light -
- - Users - Users - Containers - Containers - Database - Database - Disabled - Disabled - Aria Disabled - Aria Disabled - -
- - {% htmlexample %} - ```html - - Users - Users - Containers - Containers - Database - Database - Disabled - Disabled - Aria Disabled - Aria Disabled - - ``` {% endhtmlexample %} ### Box Dark -
- - Users - Users - Containers - Containers - Database - Database - Disabled - Disabled - Aria Disabled - Aria Disabled - -
- - {% htmlexample %} - ```html - - Users - Users - Containers - Containers - Database - Database - Disabled - Disabled - Aria Disabled - Aria Disabled - - ``` - {% endhtmlexample %} - - ### Vertical - + {% htmlexample class="overflow-tab-wrapper" %} + Users Users Containers @@ -133,9 +73,10 @@ Aria Disabled Aria Disabled + {% endhtmlexample %} + ### Vertical {% htmlexample %} - ```html Users Users @@ -148,7 +89,6 @@ Aria Disabled Aria Disabled - ``` {% endhtmlexample %} ### Inset @@ -170,140 +110,74 @@ ### Filled - Filled variant, each tab stretches to fill the available space for the tab set. - - **NOTE:** Filled variant does **not** overflow. + Filled variant, each tab stretches to fill the available space for the tab + set. -
- - Users - Users - Containers - Containers - Database - Database - -
+ **NOTE:** Filled variant does **not** overflow. - {% htmlexample %} - ```html - - Users - Users - Containers - Containers - Database - Database - - ``` + {% htmlexample class="overflow-tab-wrapper" %} + + Users + Users + Containers + Containers + Database + Database + {% endhtmlexample %} ### Icons and text `pf-tab` accepts a `svg` or `pf-icon` in the icon slot + ```html - - - - - - Users - - ... - + + + + + + Users + + ... + ``` -
- - - - Users - - Users - - - Containers - - Containers - - - Database - - Database - - - Server - - Server - - - System - - System - - - Network - - Network - - {% htmlexample %} -```html - - - - Users - - Users - - - Containers - - Containers - - - Database - - Database - - - Server - - Server - - - System - - System - - - Network - - Network - -``` - {% endhtmlexample %} -
- ### Filled with Icons -
- - - - Users - - Users - - - Containers - - Containers - - - Database - - Database - + {% htmlexample class="overflow-tab-wrapper" %} + + + + Users + + Users + + + Containers + + Containers + + + Database + + Database + + + Server + + Server + + + System + + System + + + Network + + Network + + {% endhtmlexample %} - {% htmlexample %} - ```html + ### Filled with Icons + {% htmlexample class="overflow-tab-wrapper" %} @@ -320,10 +194,8 @@ Database Database - - ``` - {% endhtmlexample %} -
+ + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-tile/docs/pf-tile.md b/elements/pf-tile/docs/pf-tile.md index 6e339f579f..81d870d799 100644 --- a/elements/pf-tile/docs/pf-tile.md +++ b/elements/pf-tile/docs/pf-tile.md @@ -1,103 +1,60 @@ {% renderOverview %} - -

Default

- - -

Selected

- - -

Disabled

- + +

Default

+ + +

Selected

+ + +

Disabled

+ {% endrenderOverview %} {% band header="Usage" %} - -### With subtext - - -

Default

-

Subtext goes here

- - -{% htmlexample %} -```html - - -

Default

-

Subtext goes here

- -``` -{% endhtmlexample %} - -### Selected - - - -

Selected

-

Subtext goes here

- - - -{% htmlexample %} -```html - - -

Selected

-

Subtext goes here

- -``` -{% endhtmlexample %} - -### Stacked - - -

Default

-

Subtext goes here

- - -{% htmlexample %} -```html - - -

Default

-

Subtext goes here

- -``` -{% endhtmlexample %} - -### Stacked Large - - -

Default

-

Subtext goes here

- - -{% htmlexample %} -```html - - -

Default

-

Subtext goes here

- -``` -{% endhtmlexample %} - -### Disabled - - -

Disabled

-

Subtext goes here

- - -{% htmlexample %} -```html - - -

Disabled

-

Subtext goes here

- -``` -{% endhtmlexample %} + ### With subtext + {% htmlexample %} + + +

Default

+

Subtext goes here

+ + {% endhtmlexample %} + + ### Selected + {% htmlexample %} + + +

Selected

+

Subtext goes here

+ + {% endhtmlexample %} + + ### Stacked + {% htmlexample %} + + +

Default

+

Subtext goes here

+ + {% endhtmlexample %} + + ### Stacked Large + {% htmlexample %} + + +

Default

+

Subtext goes here

+ + {% endhtmlexample %} + + ### Disabled + {% htmlexample %} + + +

Disabled

+

Subtext goes here

+ + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-timestamp/docs/pf-timestamp.md b/elements/pf-timestamp/docs/pf-timestamp.md index de53afe88a..9f9cecc86e 100644 --- a/elements/pf-timestamp/docs/pf-timestamp.md +++ b/elements/pf-timestamp/docs/pf-timestamp.md @@ -4,19 +4,16 @@ Default: With a locale of es: - + Relative time: {% endrenderOverview %} {% band header="Usage" %} ### Default By default, a timestamp will display the current date and time based on the current locale if the date attribute is not set. - - + {% htmlexample %} - ```html - ``` {% endhtmlexample %} ### Basic formats @@ -24,166 +21,105 @@ You can also set the `display-suffix` attribute to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format. - {% htmlexample %} - ```html - ``` {% endhtmlexample %} - {% htmlexample %} - ```html - ``` {% endhtmlexample %} - {% htmlexample %} - ```html - ``` {% endhtmlexample %} - {% htmlexample %} - ```html - ``` {% endhtmlexample %} ### Custom format The format of the displayed content can be further customized by setting the custom-format attributes. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be set. - - {% htmlexample %} - ```html - + - ``` {% endhtmlexample %} ### Adding a tooltip To add a tooltip that displays the timestamp content as a UTC time, you can wrap `pf-timestamp` with `pf-tooltip` and set the `utc` attribute on an additional `pf-timestamp`. - - - - - {% htmlexample %} - ```html - ``` {% endhtmlexample %} - - - - - {% htmlexample %} - ```html - ``` {% endhtmlexample %} ### Relative time To display relative time, set the `relative` attribute on `pf-timestamp`. - - {% htmlexample %} - ```html - ``` {% endhtmlexample %} - - {% htmlexample %} - ```html - ``` {% endhtmlexample %} ### Relative time with a tooltip To display relative time, set the `relative` attribute on `pf-timestamp`. + {% htmlexample %} + {% endhtmlexample %} - ```html - - - - - ``` - - - - - - - ```html + {% htmlexample %} - ``` + {% endhtmlexample %} ### Set a locale to something other than the default locale The default locale is inferred by the browser. To set the locale to something else, set the `locale` attribute. - - - ```html + {% htmlexample %} - ``` - - + {% endhtmlexample %} - ```html + {% htmlexample %} - ``` + {% endhtmlexample %} ### As a UTC timestamp Set the `utc` attribute. - - - ```html + {% htmlexample %} - ``` + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-tooltip/docs/pf-tooltip.md b/elements/pf-tooltip/docs/pf-tooltip.md index ac65544917..160318ae2b 100644 --- a/elements/pf-tooltip/docs/pf-tooltip.md +++ b/elements/pf-tooltip/docs/pf-tooltip.md @@ -1,233 +1,132 @@ {% renderOverview %} -### Default - - Tooltip -
- This is some content -
- + ### Default + Tooltip +
+ This is some content +
+ {% endrenderOverview %} {% band header="Usage" %} - -### Left Tooltip -{% htmlexample %} - - Tooltip -
- This is some content -
- -{% endhtmlexample %} - -### Left-Start Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Left-End Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Right Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Right-Start Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Right-End Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Top Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Top-Start Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Top-End Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Bottom Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Bottom-Start Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} - -### Bottom-End Tooltip - - Tooltip -
- This is some content -
- - -{% htmlexample %} -```html - - Tooltip -
- This is some content -
- -``` -{% endhtmlexample %} + ### Left Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Left-Start Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Left-End Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Right Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Right-Start Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Right-End Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Top Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Top-Start Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Top-End Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Bottom Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Bottom-Start Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} + + ### Bottom-End Tooltip + {% htmlexample %} + + Tooltip +
+ This is some content +
+ + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/eleventy.config.cjs b/eleventy.config.cjs index 2419649620..2084ef0487 100644 --- a/eleventy.config.cjs +++ b/eleventy.config.cjs @@ -83,10 +83,10 @@ module.exports = function(eleventyConfig) { warningFileSize: 400 * 1000, }); - eleventyConfig.addPairedShortcode('htmlexample', function(content) { + eleventyConfig.addPairedShortcode('htmlexample', function(content, kwargs) { return ` ${content} -
+
<HTML> ~~~html From 5caf4d324a58d9cdea078896716552f1d3a968c1 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 18 Apr 2023 11:04:19 +0300 Subject: [PATCH 6/6] docs: fix and dedent htmlexample --- eleventy.config.cjs | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/eleventy.config.cjs b/eleventy.config.cjs index 2084ef0487..2e7de12498 100644 --- a/eleventy.config.cjs +++ b/eleventy.config.cjs @@ -83,14 +83,20 @@ module.exports = function(eleventyConfig) { warningFileSize: 400 * 1000, }); + function dedent(str) { + const stripped = str.replace(/^\n/, ''); + const match = stripped.match(/^\s+/); + return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str; + } + eleventyConfig.addPairedShortcode('htmlexample', function(content, kwargs) { return ` ${content} -
- <HTML> +
+ View HTML Source ~~~html -${content.trim()} +${dedent(content)} ~~~
`;