feat(button): add <rh-button>

.changeset/feat-rh-button.md

@@ -0,0 +1,13 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-button>`.
+
+Button is a form-associated custom element. Buttons allow users to 
+perform an action when triggered. They feature a text label, a background or a 
+border, and icons.
+
+```html
+<rh-button>Submit</rh-button>
+```

.changeset/rh-context-slotchange.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-context-provider>`: notify children of context when adding them using javascript.

.changeset/rh-context-theme.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-context-provider>`: set color context, rather than palette, on consumers

.stylelintrc.yml

@@ -5,7 +5,7 @@ ignoreFiles:
 rules:
   alpha-value-notation: number # TODO: fix for `percentage` in tokens
   color-hex-length: long
-  color-function-notation: legacy # TODO: fix for `modern` in tokens
+  color-function-notation: modern
   custom-property-pattern: _?[a-z]+[a-z0-9-]*
   declaration-block-no-redundant-longhand-properties: 
     - true

docs/_plugins/importMap.cjs

@@ -74,19 +74,16 @@ module.exports = function(eleventyConfig, {
     Object.assign(json.imports ?? {}, Object.values(json.scopes ?? {}).find(x => 'lit-html' in x));
     // ENDHACK
 
-    // HACK: no clue why we need to do this
+    // TODO: automate this
     Object.assign(json.imports ?? {}, {
       // TODO
       // '@rhds/elements/lib/': '/assets/packages/@rhds/elements/lib/',
       // '@rhds/elements/lib/context/': '/assets/packages/@rhds/elements/lib/context/',
       // '@rhds/elements/lib/context/color/': '/assets/packages/@rhds/elements/lib/context/color/',
-      // '@rhds/elements/lib/context/color/consumer.js': '/assets/packages/@rhds/elements/lib/context/color/consumer.js',
       '@rhds/elements/lib/': '/assets/lib/',
       '@rhds/elements/lib/context/': '/assets/lib/context/',
       '@rhds/elements/lib/context/color/': '/assets/lib/context/color/',
-      '@rhds/elements/lib/context/color/consumer.js': '/assets/lib/context/color/consumer.js',
     });
-    // ENDHACk
 
     performance.mark('importMap-end');
 
@@ -122,4 +119,3 @@ function logPerf() {
   }
   /* eslint-enable no-console */
 }
-

elements/rh-button/README.md

@@ -0,0 +1,26 @@
+# Button
+
+Buttons allow users to perform an action when triggered. They feature a text 
+label, a background or a border, and icons.
+
+## Installation
+
+If using npm/bundlers:
+
+```bash
+npm install @rhds/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@rhds/elements/rh-button/rh-button.js';
+```
+
+## Usage
+
+### Basic Button
+
+```html
+<rh-button>Ok</rh-button>
+```

elements/rh-button/demo/color-context.html

@@ -0,0 +1,22 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="rh-button.js"></script>
+<script type="module" src="color-context.js"></script>
+
+<template id="template">
+  <rh-button danger>Danger</rh-button>
+  <rh-button>Primary</rh-button>
+  <rh-button variant="link">Link</rh-button>
+  <rh-button variant="secondary">Secondary</rh-button>
+  <rh-button variant="secondary" danger>Secondary Danger</rh-button>
+  <rh-button variant="tertiary">Tertiary</rh-button>
+  <rh-button variant="close">Close</rh-button>
+  <rh-button variant="play">Play</rh-button>
+  <rh-button disabled>Disabled</rh-button>
+</template>
+
+<rh-context-provider color-palette="lightest"></rh-context-provider>
+<rh-context-provider color-palette="lighter"></rh-context-provider>
+<rh-context-provider color-palette="light"></rh-context-provider>
+<rh-context-provider color-palette="dark"></rh-context-provider>
+<rh-context-provider color-palette="darker"></rh-context-provider>
+<rh-context-provider color-palette="darkest"></rh-context-provider>

elements/rh-button/demo/color-context.js

@@ -0,0 +1,3 @@
+for (const provider of document.querySelectorAll('rh-context-provider')) {
+  provider.append(document.getElementById('template').content.cloneNode(true));
+}

elements/rh-button/demo/demo.css

@@ -0,0 +1,52 @@
+section {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  gap: var(--rh-space-sm, 6px);
+  padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+}
+
+rh-context-provider {
+  padding-block: var(--rh-space-lg, 16px);
+  padding-inline: var(--rh-space-6xl, 96px);
+  display: flex;
+  align-items: center;
+  gap: var(--rh-space-sm, 6px);
+}
+
+h2 {
+  width: 100%;
+}
+
+#checkboxes {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+}
+
+label {
+  display: block;
+}
+
+form h2 {
+  width: 100%;
+}
+
+form output {
+  text-transform: capitalize;
+}
+
+datalist {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  writing-mode: vertical-lr;
+}
+
+datalist,
+input {
+  width: 200px;
+}
+
+option {
+  padding: 0;
+}

elements/rh-button/demo/form-control.html

@@ -0,0 +1,31 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="rh-button.js"></script>
+<script type="module" src="form-control.js"></script>
+
+<section>
+  <h2>Form Control</h2>
+  <form id="form">
+    <fieldset id="fieldset">
+      <legend>
+        rh-button in a <code>&lt;fieldset&gt;</code> element;
+        clicking this button must submit the form
+      </legend>
+      <rh-button id="button" type="submit">Submit</rh-button>
+    </fieldset>
+
+    <fieldset id="checkboxes">
+      <legend>Use these checkboxes to toggle disabled state</legend>
+      <input id="fst" type="checkbox" data-controls="fieldset" type="checkbox">
+      <label for="fst">Disable fieldset</label>
+      <input id="btn" type="checkbox" data-controls="button">
+      <label for="btn">Disable rh-button</label>
+    </fieldset>
+
+    <fieldset id="outputs">
+      <legend>Observe and reset form state</legend>
+      <rh-button type="reset">Reset</rh-button>
+      <label for="output">Form status:</label>
+      <output id="output">Pending</output>
+    </fieldset>
+  </form>
+</section>

elements/rh-button/demo/form-control.js

@@ -0,0 +1,28 @@
+const form = document.getElementById('form');
+const fieldset = document.getElementById('fieldset');
+
+/** @this {HTMLFormElement} */
+function onSubmit(event) {
+  event.preventDefault();
+  this.elements.output.textContent = 'Submitted';
+}
+
+/** @this {HTMLFormElement} */
+function onReset() {
+  fieldset.disabled = false;
+  this.elements.output.textContent = 'Pending';
+}
+
+/** @this{HTMLInputElement} */
+function onChange({ target: { checked, dataset: { controls } } }) {
+  // eslint-disable-next-line no-console
+  console.log(`${controls}.disabled =`, checked);
+  const el = document.getElementById(controls);
+  if (el) {
+    el.disabled = checked;
+  }
+}
+
+form.addEventListener('submit', onSubmit);
+form.addEventListener('reset', onReset);
+form.addEventListener('change', onChange);

elements/rh-button/demo/rh-button.html

@@ -0,0 +1,15 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="rh-button.js"></script>
+
+<section>
+  <h2>Variants</h2>
+  <rh-button danger>Danger</rh-button>
+  <rh-button>Primary</rh-button>
+  <rh-button variant="link">Link</rh-button>
+  <rh-button variant="secondary">Secondary</rh-button>
+  <rh-button variant="secondary" danger>Secondary Danger</rh-button>
+  <rh-button variant="tertiary">Tertiary</rh-button>
+  <rh-button variant="close">Close</rh-button>
+  <rh-button variant="play">Play</rh-button>
+  <rh-button disabled>Disabled</rh-button>
+</section>

elements/rh-button/demo/rh-button.js

@@ -0,0 +1,5 @@
+import '@rhds/elements/rh-context-provider/rh-context-provider.js';
+import '@rhds/elements/rh-button/rh-button.js';
+
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+Logger.debugLog(true);

elements/rh-button/docs/rh-button.md

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <rh-button>Ok</rh-button>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}