feat(checkbox): add pf-checkbox

.changeset/pf-checkbox.md

@@ -0,0 +1,23 @@
+---
+"@patternfly/elements": minor
+---
+✨ Added `<pf-checkbox>`
+
+```html
+<form>
+  <pf-checkbox label="Parent"
+               name="options"
+               value="parent">
+    <pf-checkbox label="Child 1"
+                 name="options"
+                 value="child1"></pf-checkbox>
+    <pf-checkbox label="Child 2"
+                 name="options"
+                 value="child2"></pf-checkbox>
+  </pf-checkbox>
+  <pf-checkbox label="Sibling"
+               name="options"
+               value="sibling"></pf-checkbox>
+  <pf-button>Submit</pf-button>
+</form>
+```

elements/package.json

@@ -25,6 +25,7 @@
     "./pf-button/pf-button.js": "./pf-button/pf-button.js",
     "./pf-card/BaseCard.js": "./pf-card/BaseCard.js",
     "./pf-card/pf-card.js": "./pf-card/pf-card.js",
+    "./pf-checkbox/pf-checkbox.js": "./pf-checkbox/pf-checkbox.js",
     "./pf-clipboard-copy/BaseClipboardCopy.js": "./pf-clipboard-copy/BaseClipboardCopy.js",
     "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
     "./pf-code-block/BaseCodeBlock.js": "./pf-code-block/BaseCodeBlock.js",

elements/pf-checkbox/README.md

@@ -0,0 +1,6 @@
+# Checkbox
+A **checkbox** is used to select a single item or multiple items, typically to choose elements to perform an action or to reflect a binary setting.
+
+```html
+<pf-checkbox label="Checkbox"></pf-checkbox>
+```

elements/pf-checkbox/demo/controlled.html

@@ -0,0 +1,13 @@
+<pf-checkbox label="Parent">
+  <pf-checkbox label="Child 1"></pf-checkbox>
+  <pf-checkbox label="Child 2"></pf-checkbox>
+  <pf-text-input label="Text"></pf-text-input>
+</pf-checkbox>
+<pf-checkbox label="Sibling"></pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+  import '@patternfly/elements/pf-text-input/pf-text-input.js';
+</script>
+
+

elements/pf-checkbox/demo/disabled.html

@@ -0,0 +1,7 @@
+<pf-checkbox disabled label="Disabled"></pf-checkbox>
+<pf-checkbox disabled checked label="Disabled and checked"></pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+

elements/pf-checkbox/demo/form-association.html

@@ -0,0 +1,41 @@
+
+<form id="face">
+  <pf-checkbox label="Parent"
+               name="options"
+               value="parent">
+    <pf-checkbox label="Child 1"
+                 name="options"
+                 value="child1"></pf-checkbox>
+    <pf-checkbox label="Child 2"
+                 name="options"
+                 value="child2"></pf-checkbox>
+  </pf-checkbox>
+  <pf-checkbox label="Sibling"
+               name="options"
+               value="sibling"></pf-checkbox>
+  <pf-button>Submit and Log Results</pf-button>
+  <fieldset>
+    <legend>FormData</legend>
+    <output name="output"></output>
+  </fieldset>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+  const form = document.getElementById('face')
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    const formdata = new FormData(form);
+    console.log(event);
+    console.log(formdata)
+    const fields = Array.from(formdata.entries()).reduce((acc, [key, val]) => ({ ...acc,
+      [key]: key in acc ?  [acc[key], val].flat() : val
+    }), {});
+
+    delete fields.output;
+
+    form.elements.output.textContent = JSON.stringify(fields);
+  })
+</script>
+
+

elements/pf-checkbox/demo/label.html

@@ -0,0 +1,12 @@
+<label><pf-checkbox></pf-checkbox> Wrapped</label>
+
+<label for="using-for">Using <code>for</code></label>
+<pf-checkbox id="using-for"></pf-checkbox>
+
+<pf-checkbox label="Using label attribute"></pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+
+

elements/pf-checkbox/demo/nested.html

@@ -0,0 +1,11 @@
+<pf-checkbox label="Parent">
+  <pf-checkbox label="Child 1"></pf-checkbox>
+  <pf-checkbox label="Child 2"></pf-checkbox>
+</pf-checkbox>
+<pf-checkbox label="Sibling"></pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+
+

elements/pf-checkbox/demo/pf-checkbox.html

@@ -0,0 +1,6 @@
+<pf-checkbox></pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+

elements/pf-checkbox/demo/validation.html

@@ -0,0 +1,10 @@
+<pf-checkbox label="Required" required></pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+  const x = document.querySelector('pf-checkbox')
+  await x.updateComplete;
+  x.checkValidity();
+</script>
+
+

elements/pf-checkbox/demo/with-body.html

@@ -0,0 +1,9 @@
+<pf-checkbox label="With body">
+  <span slot="body">This is where custom content goes</span>
+</pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+
+

elements/pf-checkbox/demo/with-description-and-body.html

@@ -0,0 +1,11 @@
+<pf-checkbox label="With description and body">
+  <span slot="body">This is where custom content goes</span>
+  <span slot="description">Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.</span>
+</pf-checkbox>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+
+

elements/pf-checkbox/demo/with-description.html

@@ -0,0 +1,9 @@
+<pf-checkbox label="With description">
+  <span slot="description">Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.</span>
+</pf-checkbox>
+
+<script type="module">
+  import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+
+

elements/pf-checkbox/docs/pf-checkbox.md

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

elements/pf-checkbox/pf-checkbox.css

@@ -0,0 +1,64 @@
+:host {
+  --pf-c-check--GridGap: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+  --pf-c-check__label--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-check__label--FontSize: var(--pf-global--FontSize--md, 1rem);
+  --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm, 1.3);
+  --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
+  --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
+  --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-check__description--Color: var(--pf-global--Color--200, #6a6e73);
+  --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-check__label-required--Color: var(--pf-global--danger-color--100, #c9190b);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: var(--pf-c-check--GridGap);
+  align-items: start;
+  justify-items: start;
+}
+
+[hidden] { display: none !important; }
+
+#nested::slotted(*) {
+  margin-inline-start: var(--pf-global--spacer--md, 1rem);
+  grid-column: -1/1;
+}
+
+#description {
+  display: inline;
+  grid-column: 2;
+  font-size: var(--pf-c-check__description--FontSize);
+  color: var(--pf-c-check__description--Color);
+}
+
+#body {
+  display: inline;
+  grid-column: 2;
+  margin-top: var(--pf-c-check__body--MarginTop);
+}
+
+input {
+  height: var(--pf-c-check__input--Height);
+  margin-block-start: var(--pf-c-check__input--MarginTop);
+}
+
+label {
+  font-size: var(--pf-c-check__label--FontSize);
+  font-weight: var(--pf-c-check__label--FontWeight);
+  line-height: var(--pf-c-check__label--LineHeight);
+  color: var(--pf-c-check__label--Color);
+}
+
+label.disabled {
+  color: var(--pf-c-check__label--disabled--Color);
+}
+
+
+#required {
+  margin-left: var(--pf-c-check__label-required--MarginLeft);
+  font-size: var(--pf-c-check__label-required--FontSize);
+  color: var(--pf-c-check__label-required--Color);
+}