fix: adds accents slot to rh-accordion-header

.changeset/lemon-comics-flow.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: added a accents slot with placement options as inline and bottom

docs/_plugins/rhds.cjs

@@ -233,7 +233,13 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
   eleventyConfig.addCollection('sortedDevelopers', async function(collectionApi) {
     const developersCollection = collectionApi.getFilteredByTags('developers');
     return developersCollection.sort((a, b) => {
-      if (a.data.order > b.data.order) { return 1; } else if (a.data.order < b.data.order) { return -1; } else { return 0; }
+      if (a.data.order > b.data.order) {
+        return 1;
+      } else if (a.data.order < b.data.order) {
+        return -1;
+      } else {
+        return 0;
+      }
     });
   });
 

docs/scss/components/_component-status-table.scss

@@ -2,6 +2,9 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  p {
+    font-size: var(--rh-font-size-body-text-sm);
+  }
 }
 
 .component-status-list-container {

elements/rh-accordion/context.ts

@@ -0,0 +1,9 @@
+import type { RhAccordion } from './rh-accordion';
+
+import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
+
+export interface RhAccordionContext {
+  accents?: 'inline' | 'bottom';
+}
+
+export const context = createContextWithRoot<RhAccordionContext>(Symbol('rh-accordion-context'));

elements/rh-accordion/demo/accents.html

@@ -0,0 +1,71 @@
+<section id="inline">
+  <h3>Inline</h3>
+  <rh-accordion>
+    <rh-accordion-header>
+      <h4>Item One</h4>
+      <rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
+      <rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
+      <rh-tag slot="accents" color="orange" variant="filled" icon="bell" icon-set="fas">Orange</rh-tag>
+      <rh-tag slot="accents" color="purple" variant="filled" icon="ban" icon-set="fas">Purple</rh-tag>
+    </rh-accordion-header>
+    <rh-accordion-panel>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </rh-accordion-panel>
+    <rh-accordion-header>
+      <h4>Item Two</h4>
+      <rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
+    </rh-accordion-header>
+    <rh-accordion-panel>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </rh-accordion-panel>
+    <rh-accordion-header>
+      <h4>Item Three</h4>
+      <rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
+    </rh-accordion-header>
+    <rh-accordion-panel>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </rh-accordion-panel>
+  </rh-accordion>
+</section>
+
+
+<section id="bottom">
+  <h3>Bottom</h3>
+  <rh-accordion accents="bottom">
+    <rh-accordion-header>
+      <h4>Item One</h4>
+      <rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
+      <rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
+      <rh-tag slot="accents" color="orange" variant="filled" icon="bell" icon-set="fas">Orange</rh-tag>
+      <rh-tag slot="accents" color="purple" variant="filled" icon="ban" icon-set="fas">Purple</rh-tag>
+    </rh-accordion-header>
+    <rh-accordion-panel>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </rh-accordion-panel>
+    <rh-accordion-header>
+      <h4>Item Two</h4>
+      <rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
+    </rh-accordion-header>
+    <rh-accordion-panel>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </rh-accordion-panel>
+    <rh-accordion-header>
+      <h4>Item Three</h4>
+      <rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
+    </rh-accordion-header>
+    <rh-accordion-panel>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </rh-accordion-panel>
+  </rh-accordion>
+</section>
+
+<style>
+  #inline, #bottom {
+    margin-block-end: var(--rh-space-3xl, 48px);
+  }
+</style>
+
+<script type="module">
+    import '@rhds/elements/rh-accordion/rh-accordion.js';
+    import '@rhds/elements/rh-tag/rh-tag.js';
+</script>

elements/rh-accordion/rh-accordion-header.css

@@ -101,12 +101,27 @@ a {
 
 span {
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: calc(100% - var(--rh-space-xl, 24px));
   text-align: start;
 }
 
+[part="container"] {
+  display: flex;
+  gap: var(--rh-space-xl, 24px);
+  container-type: inline-size;
+}
+
+#header-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rh-space-md, 8px);
+}
+
+[part="accents"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rh-space-md, 8px);
+}
+
 #button[aria-expanded="true"] #icon {
   rotate: calc(var(--_isRTL, -1) * 180deg);
 }
@@ -145,3 +160,9 @@ span {
   inset-block: 0;
   inset-inline-start: 0;
 }
+
+@container (min-width: 576px) {
+  #header-container:not(.bottom) {
+    flex-direction: row;
+  }
+}

elements/rh-accordion/rh-accordion-header.ts

@@ -1,16 +1,22 @@
 import type { RhAccordion } from './rh-accordion.js';
+import type { RhAccordionContext } from './context.js';
 
 import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { DirController } from '../../lib/DirController.js';
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
+import { consume } from '@lit/context';
+
+import { context } from './context.js';
+
 import styles from './rh-accordion-header.css';
 
 const isPorHeader =
@@ -38,8 +44,8 @@ export class AccordionHeaderChangeEvent extends Event {
  * @slot
  *       We expect the light DOM of the rh-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)
  * @slot accents
- *       These elements will appear inline with the accordion header, between the header and the chevron
- *       (or after the chevron and header in disclosure mode).
+ *       These elements will appear inline by default with the header title, between the header and the chevron
+ *       (or after the chevron and header in disclosure mode). There is an option to set the accents placement to bottom
  *
  * @fires {AccordionHeaderChangeEvent} change - when the open panels change
  *
@@ -61,10 +67,15 @@ export class RhAccordionHeader extends LitElement {
 
   @property({ reflect: true, attribute: 'heading-tag' }) headingTag?: string;
 
+  /** @deprecated */
   @property({ reflect: true }) icon = 'angle-down';
 
   @colorContextConsumer() private on?: ColorTheme;
 
+  @consume({ context, subscribe: true })
+  @property({ attribute: false })
+  private ctx?: RhAccordionContext;
+
   #generatedHtag?: HTMLHeadingElement;
 
   #logger = new Logger(this);
@@ -121,13 +132,20 @@ export class RhAccordionHeader extends LitElement {
   }
 
   #renderHeaderContent() {
+    const { accents } = this.ctx ?? {};
     const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();
+
     return html`
       <button id="button"
               class="toggle"
               aria-expanded="${String(!!this.expanded) as 'true' | 'false'}">
-        <span part="text">${headingText ?? html`
+        <span id="header-container" class="${ifDefined(accents)}">
+          <span part="text">${headingText ?? html`
           <slot></slot>`}
+          </span>
+          <span part="accents">
+            <slot name="accents"></slot>
+          </span>
         </span>
         <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>

elements/rh-accordion/rh-accordion.ts

@@ -4,6 +4,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { observed } from '@patternfly/pfe-core/decorators/observed.js';
+import { provide } from '@lit/context';
 
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 
@@ -16,8 +17,11 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { RhAccordionHeader, AccordionHeaderChangeEvent } from './rh-accordion-header.js';
 import { RhAccordionPanel } from './rh-accordion-panel.js';
 
+import { context, type RhAccordionContext } from './context.js';
+
 import styles from './rh-accordion.css';
 
+
 export class AccordionExpandEvent extends ComposedEvent {
   constructor(
     public toggle: RhAccordionHeader,
@@ -48,6 +52,10 @@ export class AccordionCollapseEvent extends ComposedEvent {
  * @slot
  *       Place the `rh-accordion-header` and `rh-accordion-panel` elements here.
  *
+ * @attr  accents
+ *        Position accents in the header either inline or bottom
+ *        {@default inline}
+ *
  */
 @customElement('rh-accordion')
 export class RhAccordion extends LitElement {
@@ -71,6 +79,14 @@ export class RhAccordion extends LitElement {
     return event instanceof AccordionHeaderChangeEvent;
   }
 
+  /**
+   * Sets accordion header's accents position to inline or bottom
+   */
+  @property({
+    attribute: true,
+    reflect: true,
+  }) accents?: 'inline' | 'bottom';
+
   /**
    * Sets and reflects the currently expanded accordion 0-based indexes.
    * Use commas to separate multiple indexes.
@@ -101,6 +117,12 @@ export class RhAccordion extends LitElement {
     }
   }
 
+  get #ctx(): RhAccordionContext {
+    const accents = this.accents ? this.accents : 'inline';
+    return { accents };
+  }
+
+
   @observed(function largeChanged(this: RhAccordion) {
     [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));
   })
@@ -128,6 +150,8 @@ export class RhAccordion extends LitElement {
 
   #mo = new MutationObserver(() => this.#init());
 
+  @provide({ context }) private ctx = this.#ctx;
+
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('change', this.#onChange as EventListener);
@@ -153,6 +177,7 @@ export class RhAccordion extends LitElement {
         }
       }
     });
+    this.ctx = this.#ctx;
   }
 
   /**