diff --git a/docs/main.css b/docs/main.css index e9a11649e2..f927d15cec 100644 --- a/docs/main.css +++ b/docs/main.css @@ -699,6 +699,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 c26e85b439..8ccb924af8 100644 --- a/elements/pf-accordion/docs/pf-accordion.md +++ b/elements/pf-accordion/docs/pf-accordion.md @@ -30,6 +30,7 @@ {% endrenderOverview %} {% band header="Usage" %} + {% htmlexample %}

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

@@ -58,222 +59,7 @@ Call to action - - ```html - - -

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 - - - ``` - - ### Single Expanded Behavior - - -

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 - - - - ```html - - -

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 - - - ``` - - - ### Fixed with multiple expand behavior - - -

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 - - - - ```html - - -

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 - - - ``` - - - ### Bordered - - -

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 - - - - ```html - - -

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 - - - ``` + {% endhtmlexample %} {% endband %} diff --git a/elements/pf-avatar/docs/pf-avatar.md b/elements/pf-avatar/docs/pf-avatar.md index a0b39eca65..94b2146669 100644 --- a/elements/pf-avatar/docs/pf-avatar.md +++ b/elements/pf-avatar/docs/pf-avatar.md @@ -3,21 +3,12 @@ {% endrenderOverview %} {% band header="Usage" %} -
- - - - -
- - ```html + {% htmlexample style="display: flex; gap: 1em;" %} - + - - ``` + + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-badge/docs/pf-badge.md b/elements/pf-badge/docs/pf-badge.md index 6481d4fbb3..5a949fe2d9 100644 --- a/elements/pf-badge/docs/pf-badge.md +++ b/elements/pf-badge/docs/pf-badge.md @@ -8,30 +8,24 @@ To provide context to your badge, it is highly encouraged that you also include an `aria-label` attribute in your markup. ### Default + {% htmlexample %} 2 - ```html - 2 - ``` + {% endhtmlexample %} ### With a threshold This adds a "+" next to the number once the threshold value has been passed. + {% htmlexample %} 20 - - ```html - 20 - ``` + {% endhtmlexample %} ### With a state This adds a background color to the badge based on the state. + {% htmlexample %} 10 20 - - ```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..fb54d0e55a 100644 --- a/elements/pf-button/docs/pf-button.md +++ b/elements/pf-button/docs/pf-button.md @@ -26,72 +26,48 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; {% endrenderOverview %} {% band header="Usage" %} -#### Link variant - - - Link - -Link -Inline Link -Danger Link - -```html - - - Link - -Link -Inline Link -Danger Link -``` - -#### Plain button - - - - - - - -```html - - - - - -``` - -#### Control variant - -Control - - - - - - -```html -Control - - - - - -``` - -

Size

-Medium Button -Large Button - - -```html -Medium Button -Large Button -``` + ### 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 fa21fd92a4..abb1bd2924 100644 --- a/elements/pf-card/docs/pf-card.md +++ b/elements/pf-card/docs/pf-card.md @@ -11,79 +11,50 @@ {% band header="Usage" %} -

Compact card

+ ### Compact card + {% htmlexample %}

Header

This is the compact card

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

Header

-

This is the compact card

- Link in the footer - - ``` -

Rounded card

+ ### Rounded card + {% htmlexample %}

Header

This is the rounded card

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

Header

-

This is the rounded card

- Link in the footer - - ``` - -

Large card

+ ### Large card + {% htmlexample %}

Large card

This is the large card

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

Large card

-

This is the large card

- Link in the footer - - ``` - -

Full Height card

- -

Header

-

This is the full height card

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

Header

This is the full height card

Link in the footer - ``` - -

Plain card

- -

Header

-

This is the plain card

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

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..d562c67003 100644 --- a/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md +++ b/elements/pf-clipboard-copy/docs/pf-clipboard-copy.md @@ -1,144 +1,94 @@ {% renderOverview %} -
- -
+ {% endrenderOverview %} {% band header="Usage" %} -
-

Read-only

- -
- - ```html + ### Read-only + {% htmlexample %} - ``` + {% 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. - -
- - ```html + ### Expanded + {% htmlexample %} 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

- - 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 %} - ```html + ### Read-only expanded + {% htmlexample %} 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

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

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

 - ``` - -
-

JSON object (pre-formatted code)

- - { "menu": { - "id": "file", - "value": "File", - "popup": { - "menuitem": [ - {"value": "New", "onclick": "CreateNewDoc()"}, - {"value": "Open", "onclick": "OpenDoc()"}, - {"value": "Close", "onclick": "CloseDoc()"} - ] - } - }} - -
- - ```html - - { "menu": { - "id": "file", - "value": "File", - "popup": { - "menuitem": [ - {"value": "New", "onclick": "CreateNewDoc()"}, - {"value": "Open", "onclick": "OpenDoc()"}, - {"value": "Close", "onclick": "CloseDoc()"} - ] - } - }} - - ``` - -
-

Inline compact

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

Inline compact code

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

Inline compact with additional action

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

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. -

+ {% endhtmlexample %} + + ### 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 0e0b671116..92fde4e5ed 100644 --- a/elements/pf-code-block/docs/pf-code-block.md +++ b/elements/pf-code-block/docs/pf-code-block.md @@ -24,6 +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 @@ -60,6 +47,7 @@ It is important that you place the span right next to the ` - -```html - - - - -``` +{% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-icon/docs/pf-icon.md b/elements/pf-icon/docs/pf-icon.md index e6c3d5d663..aa2797825d 100644 --- a/elements/pf-icon/docs/pf-icon.md +++ b/elements/pf-icon/docs/pf-icon.md @@ -19,32 +19,23 @@ 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 %} {% band header="Icon sets" %} diff --git a/elements/pf-jump-links/docs/pf-jump-links.md b/elements/pf-jump-links/docs/pf-jump-links.md index 27d1548417..ce00f0dd93 100644 --- a/elements/pf-jump-links/docs/pf-jump-links.md +++ b/elements/pf-jump-links/docs/pf-jump-links.md @@ -10,120 +10,74 @@ {% endrenderOverview %} {% band header="Usage" %} - - -
-

With centered list

- - Inactive section - Active section - Inactive section - -
- -```html - - Inactive section - Active section - Inactive section - -``` - -
-

With label

- - Inactive section - Active section - Inactive section - -
- -```html - - Inactive section - Active section - Inactive section - -``` - -
-

Vertical

- - Inactive section - Active section - Inactive section - -
- -```html - - Inactive section - Active section - Inactive section - -``` - - -
-

Expandable vertical with subsection

- - Inactive section - - Section with active subsection - - Active subsection - Inactive subsection - Inactive subsection - - - Inactive section - Inactive section - -
- -```html - - Inactive section - - Section with active subsection - - Active subsection - Inactive subsection - Inactive subsection - - - Inactive section - Inactive section - -``` -
-

Expandable vertical with Scrollspy

- - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - -
- -```html - - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - -``` +
+

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 2c58f484cc..22e19c578e 100644 --- a/elements/pf-label/docs/pf-label.md +++ b/elements/pf-label/docs/pf-label.md @@ -3,16 +3,15 @@ {% endrenderOverview %} {% band header="Usage" %} - ### Default + {% htmlexample %} Default - ```html - Default - ``` + {% endhtmlexample %} ### With a color Available colors are: grey (default), blue, green, orange, red, purple, cyan, gold + {% htmlexample %} Blue Green Orange @@ -20,30 +19,25 @@ Purple Cyan Gold - - ```html - Blue - Green - Orange - Red - 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.

-
- ```html - Red Warning - ``` + ### 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 %} + + Red Warning + + {% endhtmlexample %} ### Outline variant Swaps the color style for a outline styled variant + {% htmlexample %} Blue Green Orange @@ -51,79 +45,62 @@ Purple Cyan Gold - Default - - ```html - Blue - Green - Orange - Red - 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 %} + Globe + {% endhtmlexample %} - - ```html - Globe - ``` Read more about Icon in the [PatternFly Elements Icon documentation](https://patternflyelements.org/components/icon) ### With user defined image using `slot="icon"` Adds user defined SVG or `pf-icon` to the label. + {% htmlexample %} Globe - - - - ```html - Globe - - - ``` - Globe - + + {% endhtmlexample %} - ```html + {% htmlexample %} 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 - - ```html + {% htmlexample %} Globe - + Green Orange - Red + Red 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 1f1a3d59c7..677574711e 100644 --- a/elements/pf-modal/docs/pf-modal.md +++ b/elements/pf-modal/docs/pf-modal.md @@ -8,40 +8,45 @@ {% endrenderOverview %} {% band header="Usage" %} - - ```html + {% htmlexample %}

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 %} - + {% htmlexample %} +

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 %} - + {% htmlexample %} +

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 %} - + {% htmlexample %} +

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 827ab3e3ae..a5ae46ef9c 100644 --- a/elements/pf-panel/docs/pf-panel.md +++ b/elements/pf-panel/docs/pf-panel.md @@ -1,162 +1,123 @@ {% renderOverview %} - -

Main content

- + +

Main content

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

Header

- -

Header content

-

Main content

- - -```html - -

Header content

-

Main content

- -``` - -

Header

- -

Main content

-

Footer content

- - -```html - -

Main content

-

Footer content

- -``` - -

Header and footer

- -

Header content

-

Main content

-

Footer content

- - -```html - -

Header content

-

Main content

-

Footer content

- -``` - -

Raised

- -

Main content

- - -```html - -

Main content

- -``` - -

Bordered

- -

Main content

- - -```html - -

Main content

- -``` - -

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 04f494bd9c..50522018f4 100644 --- a/elements/pf-progress-stepper/docs/pf-progress-stepper.md +++ b/elements/pf-progress-stepper/docs/pf-progress-stepper.md @@ -9,18 +9,17 @@ {% endrenderOverview %} {% band header="Usage" %} - ```html + {% htmlexample %} Completed - Issue + Issue Failure - Running + 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 e0bf46679a..94e1f784cd 100644 --- a/elements/pf-spinner/docs/pf-spinner.md +++ b/elements/pf-spinner/docs/pf-spinner.md @@ -1,36 +1,26 @@ {% renderOverview %} A spinner is used to indicate to users that an action is in progress. - + Loading... {% endrenderOverview %} {% band header="Usage" %} ### Basic + {% htmlexample %} Loading... - - ```html - Loading... - ``` - + {% endhtmlexample %} ### Size variations + {% htmlexample %} Loading... Loading... Loading... Loading... - - ```html -Loading... -Loading... -Loading... -Loading... - ``` + {% endhtmlexample %} ### Custom size + {% htmlexample %} Loading... - - ```html -Loading... - ``` + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-switch/docs/pf-switch.md b/elements/pf-switch/docs/pf-switch.md index 9fd7893fcf..b2a0473f51 100644 --- a/elements/pf-switch/docs/pf-switch.md +++ b/elements/pf-switch/docs/pf-switch.md @@ -1,74 +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 - - - - -```html - - - -``` - - -### Without label - - -```html - -``` - -### Checked with label - - - - -```html - - - -``` - -### Disabled -
-
- Checked and Disabled - - - -
-
- - - -
-
- -```html -
-
- Checked and Disabled - - - -
- -
- - - -
-
-``` + ### 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 b2737284be..c304c70df2 100644 --- a/elements/pf-tabs/docs/pf-tabs.md +++ b/elements/pf-tabs/docs/pf-tabs.md @@ -24,13 +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. - ```html + {% htmlexample %} Users Users @@ -38,56 +38,45 @@ 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 - -
- - ```html - ... - ``` + {% htmlexample class="overflow-tab-wrapper" %} + + 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 - -
- - ```html - ... - ``` + {% htmlexample class="overflow-tab-wrapper" %} + + Users + Users + Containers + Containers + Database + Database + Disabled + Disabled + Aria Disabled + Aria Disabled + + {% endhtmlexample %} ### Vertical + {% htmlexample %} Users Users @@ -100,14 +89,17 @@ Aria Disabled Aria Disabled - - ```html - ... - ``` + {% endhtmlexample %} ### Inset - Inset is implemented using CSS part `tab-container` + Inset is implemented using CSS part `::part(tab-container)` + ```html + + Users + Users + + ``` ```css .inset-sm::part(tabs-container) { --pf-c-tabs--inset: var(--pf-global--spacer--sm, 0.5rem); @@ -116,100 +108,94 @@ } ``` - ```html - - Users - Users - - ``` - ### Filled - Filled variant, each tab stretches to fill the available space for the tab set. **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. - ```html - ... - ``` + {% 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 class="overflow-tab-wrapper" %} + + + + 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 + + {% endhtmlexample %} {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-tile/docs/pf-tile.md b/elements/pf-tile/docs/pf-tile.md index 66dce45c35..81d870d799 100644 --- a/elements/pf-tile/docs/pf-tile.md +++ b/elements/pf-tile/docs/pf-tile.md @@ -1,92 +1,60 @@ {% renderOverview %} - -

Default

- - -

Selected

- - -

Disabled

- + +

Default

+ + +

Selected

+ + +

Disabled

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

Default

-

Subtext goes here

- - -```html - - -

Default

-

Subtext goes here

- -``` - -### Selected - - - -

Selected

-

Subtext goes here

- - -```html - - -

Selected

-

Subtext goes here

- -``` - -### Stacked - - -

Default

-

Subtext goes here

- - -```html - - -

Default

-

Subtext goes here

- -``` - -### Stacked Large - - -

Default

-

Subtext goes here

- - -```html - - -

Default

-

Subtext goes here

- -``` - -### Disabled - - -

Disabled

-

Subtext goes here

- - -```html - - -

Disabled

-

Subtext goes here

- -``` + ### 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 84d99fa1d0..9f9cecc86e 100644 --- a/elements/pf-timestamp/docs/pf-timestamp.md +++ b/elements/pf-timestamp/docs/pf-timestamp.md @@ -4,166 +4,122 @@ 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. - - - ```html + + {% htmlexample %} - ``` + {% endhtmlexample %} ### Basic formats The format of the displayed content can be customized by setting the `date-format` and/or `time-format` attributes. Setting only one of the attributes will display only the date or time, depending on which attribute is set. The possible options are "full", "long", "medium", and "short". 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 %} - - ```html + {% htmlexample %} - ``` + {% 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. - - - ```html - + {% htmlexample %} + - ``` + {% 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 %} + {% endhtmlexample %} - ```html - - - - - ``` - - - - - - - ```html + {% htmlexample %} - ``` + {% endhtmlexample %} ### Relative time To display relative time, set the `relative` attribute on `pf-timestamp`. + {% htmlexample %} + {% endhtmlexample %} - ```html - - ``` - + {% htmlexample %} - - ```html - - ``` + {% endhtmlexample %} ### Relative time with a tooltip To display relative time, set the `relative` attribute on `pf-timestamp`. + {% htmlexample %} + {% endhtmlexample %} - ```html - - - - - ``` - + {% htmlexample %} - - ```html - - - - - ``` + {% 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 7820718f18..160318ae2b 100644 --- a/elements/pf-tooltip/docs/pf-tooltip.md +++ b/elements/pf-tooltip/docs/pf-tooltip.md @@ -1,218 +1,132 @@ {% renderOverview %} -### Default - - Tooltip -
- This is some content -
- + ### Default + Tooltip +
+ This is some content +
+ {% endrenderOverview %} {% band header="Usage" %} - -### Left Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Left-Start Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Left-End Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Right Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Right-Start Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Right-End Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Top Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Top-Start Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Top-End Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Bottom Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Bottom-Start Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` - -### Bottom-End Tooltip - - Tooltip -
- This is some content -
- - -```html - - Tooltip -
- This is some content -
- -``` + ### 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 911abea0ca..2e7de12498 100644 --- a/eleventy.config.cjs +++ b/eleventy.config.cjs @@ -83,6 +83,25 @@ 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} +
+ View HTML Source + +~~~html +${dedent(content)} +~~~ + +
`; + }); + return { dir: { input: './docs',