docs: fix align component page header and css (#2471)

anujsingla · anujsi · web-flow · commit 52b336ae4853 · 2023-04-24T13:48:18.000+03:00
* docs: fix align component page header and css

* docs: fix align component page header and css

* docs: fix align component page header and css

* docs: fix align component page header and css

* docs: fix align component page header and css

* docs: fix align component page header and css

---------

Co-authored-by: Anuj Singla &lt;asingla@redhat.com&gt;
diff --git a/docs/components/components.md b/docs/components/components.md
@@ -17,6 +17,9 @@
 
 <header class="band">
   <h1>{{element.title}}</h1>
+
+  {{ element.description | safe}}
+
 </header>
 
 {% renderFile element.docsTemplatePath, element %}
diff --git a/docs/main.css b/docs/main.css
@@ -78,12 +78,7 @@ strong {
 }
 
 header.band {
-  background-color:
-    var(
-      --pf-c-page__main-section--BackgroundColor,
-      var(
-        --pf-c-page__main-section--m-light-100--BackgroundColor,
-        var(--pf-global--BackgroundColor--150, #fafafa)));
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
   padding: var(--pf-global--spacer--md, 1rem) var(--pf-global--spacer--md, 1rem);
   box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)));
 }
@@ -278,11 +273,33 @@ header.band h1 {
   margin-top: 0;
 }
 
+.example-preview {
+  padding: var(--pf-global--spacer--md, 1rem);
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
+  border-bottom: var(--pf-global--BorderWidth--sm, 1px) solid var(--pf-global--BorderColor--300, #f0f0f0);
+  transition: width .2s ease-in-out;
+}
+
+section.api.band.api-properties dl {
+  padding: var(--pf-global--spacer--md, 1rem);
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
+}
+
+section.api.band.api-properties table {
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
+}
+
 main.basic,
 main.blog {
   margin-top: 6.5rem;
   margin-bottom: 3.75rem;
   flex-grow: 1;
+  background-color:
+  var(
+    --pf-c-page__main-section--BackgroundColor,
+    var(
+      --pf-c-page__main-section--m-light-100--BackgroundColor,
+      var(--pf-global--BackgroundColor--150, #fafafa)));
 }
 
 #home-title img {
@@ -673,7 +690,6 @@ th, td {
 }
 
 code:not([class*="language-"]) {
-  background-color: rgba(27,31,35,.05);
   padding: .2em .4em;
   border-radius: 6px;
   font-family: "Overpass Mono", monospace;
diff --git a/elements/pf-accordion/docs/pf-accordion.md b/elements/pf-accordion/docs/pf-accordion.md
@@ -84,4 +84,4 @@
 
 {% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
 
-{% renderCssParts %}{% endrenderCssParts %}
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts
@@ -11,7 +11,7 @@ export * from './pf-accordion-panel.js';
 import style from './pf-accordion.css';
 
 /**
- * An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
+ * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
  *
  * @summary Toggle the visibility of sections of content
  *
diff --git a/elements/pf-avatar/pf-avatar.ts b/elements/pf-avatar/pf-avatar.ts
@@ -6,7 +6,7 @@ import { BaseAvatar } from './BaseAvatar.js';
 import style from './pf-avatar.css';
 
 /**
- * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
+ * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
  *
  * @summary For displaying a user's avatar image
  */
diff --git a/elements/pf-badge/pf-badge.ts b/elements/pf-badge/pf-badge.ts
@@ -6,7 +6,7 @@ import { BaseBadge } from './BaseBadge.js';
 import styles from './pf-badge.css';
 
 /**
- * A badge is used to annotate other information like a label or an object name.
+ * A **badge** is used to annotate other information like a label or an object name.
  *
  * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}
  *
diff --git a/elements/pf-button/pf-button.ts b/elements/pf-button/pf-button.ts
@@ -19,7 +19,7 @@ export type ButtonVariant = (
 );
 
 /**
- * A button is a box area or text that communicates and triggers user actions when
+ * A **button** is a box area or text that communicates and triggers user actions when
  * clicked or selected. Buttons can be used to communicate and immediately trigger
  * actions a user can take in an application, like submitting a form, canceling a
  * process, or creating a new object. Buttons can also be used to take a user to a
diff --git a/elements/pf-card/pf-card.ts b/elements/pf-card/pf-card.ts
@@ -5,7 +5,7 @@ import style from './pf-card.css';
 import { BaseCard } from './BaseCard.js';
 
 /**
- * A card is a square or rectangular container that can contain any kind of content.
+ * A **card** is a square or rectangular container that can contain any kind of content.
  * Cards symbolize units of information, and each one acts as an entry point for
  * users to access more details. For example, in dashboards and catalog views, cards
  * function as a preview of a detailed page. Cards may also be used in data displays
diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts
@@ -15,7 +15,7 @@ import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
 const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));
 
 /**
- * The clipboard copy component allows users to quickly and easily copy content to their clipboard.
+ * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
  *
  * @slot - Place content to copy here, or use the `value` attribute
  * @slot actions - Place additional action buttons here
diff --git a/elements/pf-code-block/pf-code-block.ts b/elements/pf-code-block/pf-code-block.ts
@@ -6,7 +6,7 @@ import { BaseCodeBlock } from './BaseCodeBlock.js';
 import styles from './pf-code-block.css';
 
 /**
- * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
  *
  * @slot code
  *       The slot to put the code in
diff --git a/elements/pf-icon/pf-icon.ts b/elements/pf-icon/pf-icon.ts
@@ -5,7 +5,7 @@ import { property } from 'lit/decorators/property.js';
 import style from './pf-icon.css';
 
 /**
- * An icon component is a container that allows for icons of varying dimensions to
+ * An **icon** component is a container that allows for icons of varying dimensions to
  * seamlessly replace each other without shifting surrounding content.
  *
  * @slot - Slotted content is used as a fallback in case the icon doesn't load
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
@@ -12,7 +12,7 @@ import './pf-jump-links-item.js';
 import style from './pf-jump-links.css';
 
 /**
- * Jump links allow users to navigate to sections within a page.
+ * **Jump links** allow users to navigate to sections within a page.
  *
  * @fires toggle - when the `expanded` disclosure widget is toggled
  * @slot - Place pf-jump-links-items here
diff --git a/elements/pf-label/pf-label.ts b/elements/pf-label/pf-label.ts
@@ -28,7 +28,7 @@ export type LabelColor = (
 )
 
 /**
- * The label component allows users to add specific element captions for user
+ * The **label** component allows users to add specific element captions for user
  * clarity and convenience.
  *
  * @summary Allows users to display meta data in a stylized form.
diff --git a/elements/pf-modal/pf-modal.ts b/elements/pf-modal/pf-modal.ts
@@ -35,7 +35,7 @@ export class ModalOpenEvent extends ComposedEvent {
 }
 
 /**
- * A modal displays important information to a user without requiring them to navigate
+ * A **modal** displays important information to a user without requiring them to navigate
  * to a new page.
  *
  * @summary Displays information or helps a user focus on a task
diff --git a/elements/pf-panel/pf-panel.ts b/elements/pf-panel/pf-panel.ts
@@ -7,7 +7,7 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 import styles from './pf-panel.css';
 
 /**
- * The panel component is a container that supports flexible content layouts. It can
+ * The **panel** component is a container that supports flexible content layouts. It can
  * be used to house other components such as fields, forms, videos, buttons, and more.
  * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
  * component, which allows you to surface information via a collapsable container.
diff --git a/elements/pf-progress-stepper/pf-progress-stepper.ts b/elements/pf-progress-stepper/pf-progress-stepper.ts
@@ -11,7 +11,7 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 import '@patternfly/elements/pf-icon/pf-icon.js';
 
 /**
- * A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
+ * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
  */
 @customElement('pf-progress-stepper')
 export class PfProgressStepper extends LitElement {
diff --git a/elements/pf-spinner/pf-spinner.ts b/elements/pf-spinner/pf-spinner.ts
@@ -6,7 +6,7 @@ import { BaseSpinner } from './BaseSpinner.js';
 import styles from './pf-spinner.css';
 
 /**
- * A spinner is used to indicate to users that an action is in progress. For actions
+ * A **spinner** is used to indicate to users that an action is in progress. For actions
  * that may take a long time, use a progress bar instead.
  *
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
diff --git a/elements/pf-switch/pf-switch.ts b/elements/pf-switch/pf-switch.ts
@@ -4,7 +4,7 @@ import { BaseSwitch } from './BaseSwitch.js';
 import styles from './pf-switch.css';
 
 /**
- * A switch toggles the state of a setting (between on and off). Switches and
+ * A **switch** toggles the state of a setting (between on and off). Switches and
  * checkboxes can often be used interchangeably, but the switch provides a more
  * explicit, visible representation on a setting.
  *
diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts
@@ -10,7 +10,7 @@ import { PfTabPanel } from './pf-tab-panel.js';
 import styles from './pf-tabs.css';
 
 /**
- * Tabs allow users to navigate between views within the same page or context.
+ * **Tabs** allow users to navigate between views within the same page or context.
  *
  * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}
  *
diff --git a/elements/pf-tile/pf-tile.ts b/elements/pf-tile/pf-tile.ts
@@ -12,7 +12,7 @@ export type StackedSize = (
 )
 
 /**
- * A tile component is a form of selection that can be used in place of a
+ * A **tile** component is a form of selection that can be used in place of a
  * radio button and is commonly used in forms. A tile appears visually similar to a
  * [selectable card](../card/). However, tiles are used specifically when the user is selecting
  * a static option, whereas a selectable card triggers an action or opens a quickstart
diff --git a/elements/pf-timestamp/pf-timestamp.ts b/elements/pf-timestamp/pf-timestamp.ts
@@ -13,7 +13,7 @@ const BooleanStringConverter: ComplexAttributeConverter = {
 };
 
 /**
- * A timestamp provides consistent formats for displaying date and time values.
+ * A **timestamp** provides consistent formats for displaying date and time values.
  */
 @customElement('pf-timestamp')
 export class PfTimestamp extends LitElement {
diff --git a/elements/pf-tooltip/pf-tooltip.ts b/elements/pf-tooltip/pf-tooltip.ts
@@ -7,7 +7,7 @@ import { BaseTooltip } from './BaseTooltip.js';
 import styles from './pf-tooltip.css';
 
 /**
- * A tooltip is in-app messaging used to identify elements on a page with short,
+ * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
  *
  * @summary Toggle the visibility of helpful or contextual information.
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
@@ -91,7 +91,9 @@ module.exports = function(eleventyConfig) {
 
   eleventyConfig.addPairedShortcode('htmlexample', function(content, kwargs) {
     return `
-${content}
+<div class="example-preview">
+  ${content}
+</div>
 <details class="html-example ${kwargs?.class ?? ''}"${!kwargs?.style ? '' : ` style="${kwargs.style}"`}>
   <summary>View HTML Source</summary>
 
diff --git a/tools/pfe-tools/11ty/templates/attributes.njk b/tools/pfe-tools/11ty/templates/attributes.njk
@@ -1,7 +1,7 @@
 {% set level = level or 2 %}
 {% set header = header or 'Attributes' %}
 
-<section class="band api attributes">
+<section class="band api attributes api-properties">
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not attributes.length %}
 
   <em>None</em> {%- else -%}
diff --git a/tools/pfe-tools/11ty/templates/css-custom-properties.njk b/tools/pfe-tools/11ty/templates/css-custom-properties.njk
@@ -9,7 +9,7 @@
   </tr>
 {%- endmacro -%}
 
-<section class="api band css-custom-properties">
+<section class="api band css-custom-properties api-properties">
   <a id="styling-hooks"></a>
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not cssProperties.length %}
 
@@ -60,6 +60,7 @@
 </section>
 
 <style>
+
 table.css-custom-properties code[data-color] {
   display: inline-flex;
   align-items: center;
diff --git a/tools/pfe-tools/11ty/templates/css-shadow-parts.njk b/tools/pfe-tools/11ty/templates/css-shadow-parts.njk
@@ -1,7 +1,7 @@
 {% set level = level or 2 %}
 {% set header = header or 'CSS Shadow Parts' %}
 
-<section class="api band css-shadow-parts">
+<section class="api band css-shadow-parts api-properties">
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not parts.length %}
 
   <em>None</em> {%- else -%}
diff --git a/tools/pfe-tools/11ty/templates/events.njk b/tools/pfe-tools/11ty/templates/events.njk
@@ -1,7 +1,7 @@
 {% set level = level or 2 %}
 {% set header = header or 'Events' %}
 
-<section class="api band events">
+<section class="api band events api-properties">
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not events.length %}
 
   <em>None</em> {% else %}
diff --git a/tools/pfe-tools/11ty/templates/methods.njk b/tools/pfe-tools/11ty/templates/methods.njk
@@ -3,7 +3,7 @@
 
 {# TODO: inline code highlighting for type and default: render the markdown to html and extract the `<code>` from the `<pre>` #}
 
-<section class="api band methods">
+<section class="api band methods api-properties">
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not methods.length %}
 
   <em>None</em> {% else %}
diff --git a/tools/pfe-tools/11ty/templates/overview.njk b/tools/pfe-tools/11ty/templates/overview.njk
@@ -1,9 +1,9 @@
 <section class="band overview">
   <h2>Overview</h2>
 
-  {{ description | safe }}
-
-  {{ content | safe }}
+  <div class="example-preview">
+    {{ content | safe }}
+  </div>
 
 </section>
 
diff --git a/tools/pfe-tools/11ty/templates/properties.njk b/tools/pfe-tools/11ty/templates/properties.njk
@@ -3,7 +3,7 @@
 
 {# TODO: inline code highlighting for type and default: render the markdown to html and extract the `<code>` from the `<pre>` #}
 
-<section class="api band properties">
+<section class="api band properties api-properties">
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not properties.length %}
 
   <em>None</em> {% else %}
diff --git a/tools/pfe-tools/11ty/templates/slots.njk b/tools/pfe-tools/11ty/templates/slots.njk
@@ -1,7 +1,7 @@
 {% set level = level or 2 %}
 {% set header = header or 'Slots' %}
 
-<section class="api band slots">
+<section class="api band slots api-properties">
   <h{{level}}>{{ header | innerMD | safe }}</h{{level}}> {% if not content and not slots.length %}
 
   <em>None</em> {%- else -%}

Original file line number	Diff line number	Diff line change
`@@ -84,4 +84,4 @@`
`84`	`84`
`85`	`85`	`{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}`
`86`	`86`
`87`		`-{% renderCssParts %}{% endrenderCssParts %}`
	`87`	`+{% renderCssParts %}{% endrenderCssParts %}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export * from './pf-accordion-panel.js';`
`11`	`11`	`import style from './pf-accordion.css';`
`12`	`12`
`13`	`13`	`/**`
`14`		`- * An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.`
	`14`	`+ * An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.`
`15`	`15`	`*`
`16`	`16`	`* @summary Toggle the visibility of sections of content`
`17`	`17`	`*`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { BaseAvatar } from './BaseAvatar.js';`
`6`	`6`	`import style from './pf-avatar.css';`
`7`	`7`
`8`	`8`	`/**`
`9`		`- * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.`
	`9`	`+ * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.`
`10`	`10`	`*`
`11`	`11`	`* @summary For displaying a user's avatar image`
`12`	`12`	`*/`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { BaseBadge } from './BaseBadge.js';`
`6`	`6`	`import styles from './pf-badge.css';`
`7`	`7`
`8`	`8`	`/**`
`9`		`- * A badge is used to annotate other information like a label or an object name.`
	`9`	`+ * A badge is used to annotate other information like a label or an object name.`
`10`	`10`	`*`
`11`	`11`	* @cssprop {<length>} --pf-c-badge--BorderRadius {@default `180em`}
`12`	`12`	`*`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ import '@patternfly/elements/pf-tooltip/pf-tooltip.js';`
`15`	`15`	`const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));`
`16`	`16`
`17`	`17`	`/**`
`18`		`- * The clipboard copy component allows users to quickly and easily copy content to their clipboard.`
	`18`	`+ * The clipboard copy component allows users to quickly and easily copy content to their clipboard.`
`19`	`19`	`*`
`20`	`20`	* @slot - Place content to copy here, or use the `value` attribute
`21`	`21`	`* @slot actions - Place additional action buttons here`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { BaseCodeBlock } from './BaseCodeBlock.js';`
`6`	`6`	`import styles from './pf-code-block.css';`
`7`	`7`
`8`	`8`	`/**`
`9`		`- * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.`
	`9`	`+ * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.`
`10`	`10`	`*`
`11`	`11`	`* @slot code`
`12`	`12`	`* The slot to put the code in`