feat(radio): add pf-radio

elements/package.json

@@ -36,6 +36,7 @@
     "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",
     "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",
     "./pf-label/pf-label.js": "./pf-label/pf-label.js",
+    "./pf-radio/pf-radio.js": "./pf-radio/pf-radio.js",
     "./pf-select/pf-select.js": "./pf-select/pf-select.js",
     "./pf-select/pf-listbox.js": "./pf-select/pf-listbox.js",
     "./pf-select/pf-option-group.js": "./pf-select/pf-option-group.js",

elements/pf-radio/README.md

@@ -0,0 +1,11 @@
+# Radio
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-radio>
+
+</pf-radio>
+```

elements/pf-radio/demo/multiple-groups.html

@@ -0,0 +1,118 @@
+<section class="container">
+  <p>Basic <code>&lt;pf-radio&gt;</code> group</p>
+  <div class="radio-group">
+    <p>Salutation: </p>
+    <pf-radio value="mr"    name="title" label="Mr"></pf-radio>
+    <pf-radio value="miss"  name="title" label="Miss"></pf-radio>
+    <pf-radio value="mrs"   name="title" label="Mrs"></pf-radio>
+    <pf-radio value="ms"    name="title" label="Ms"></pf-radio>
+  </div>
+
+  <p><code>&lt;pf-radio&gt;</code> group with different name inside same parent</p>
+  <div class="radio-group-container">
+    <div class="radio-group">
+      <p>Salutation: </p>
+      <pf-radio value="mr"    name="title" label="Mr"></pf-radio>
+      <pf-radio value="miss"  name="title" label="Miss"></pf-radio>
+      <pf-radio value="mrs"   name="title" label="Mrs"></pf-radio>
+      <pf-radio value="ms"    name="title" label="Ms"></pf-radio>
+      <pf-radio value="dr"    name="title" label="Dr"></pf-radio>
+      <pf-radio value="other" name="title" label="Other"></pf-radio>
+
+      <div class='spacing'></div>
+
+      <p>Score: </p>
+      <pf-radio value="a" name="score" label="A"></pf-radio>
+      <pf-radio value="b" name="score" label="B"></pf-radio>
+      <pf-radio value="c" name="score" label="C"></pf-radio>
+    </div>
+  </div>
+
+  <p><code>&lt;pf-radio&gt;</code> group with same name inside different parent</p>
+  <div class="radio-group-container">
+    <div class="radio-group">
+      <p>Score: </p>
+      <pf-radio value="a" name="score" label="A"></pf-radio>
+      <pf-radio value="b" name="score" label="B"></pf-radio>
+      <pf-radio value="c" name="score" label="C"></pf-radio>
+    </div>
+
+    <div class="radio-group">
+      <p>Score: </p>
+      <pf-radio value="a" name="score" label="A"></pf-radio>
+      <pf-radio value="b" name="score" label="B"></pf-radio>
+      <pf-radio value="c" name="score" label="C"></pf-radio>
+    </div>
+  </div>
+
+  <p><code>&lt;pf-radio&gt;</code> group inside pf-card component (component inside shadowroot)</p>
+  <pf-card>
+    <div class="radio-group">
+      <p>Score: </p>
+      <pf-radio value="a" name="score" label="A"></pf-radio>
+      <pf-radio value="b" name="score" label="B"></pf-radio>
+      <pf-radio value="c" name="score" label="C"></pf-radio>
+      <pf-radio value="d" name="score" label="D"></pf-radio>
+    </div>
+  </pf-card>
+  <pf-button> Submit</pf-button>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-radio/pf-radio.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+  import '@patternfly/elements/pf-card/pf-card.js'
+</script>
+
+<style>
+.container{
+  padding: 3rem;
+}
+.container p {
+  font-size: 1.3rem;
+  margin-block-end: 1rem;
+}
+
+.container .radio-group p {
+  font-size: 1.1rem;
+  margin-block-end: 0rem;
+  margin-block-start: 0rem;
+  color: var(--rh-color-red-60, #a60000);
+  padding-right: 0.5rem;
+}
+
+.radio-group-container {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+}
+
+.radio-group{
+  display: flex;
+  justify-content: flex-start;
+  padding-bottom: 1rem;
+  padding-right: 2rem;
+  flex-direction: row;
+  align-items: baseline;
+}
+.radio-group pf-radio{
+  padding-right: 1rem;
+}
+pf-card{
+  margin-bottom: 2rem;
+  width: fit-content;
+}
+
+pf-card .radio-group{
+  padding-top: 2rem;
+  padding-bottom: 0.5rem;
+}
+.spacing{
+  margin-right: 2rem;
+}
+
+code{
+  font-size: 1.2rem;
+}
+</style>
+

elements/pf-radio/demo/pf-radio.html

@@ -0,0 +1,36 @@
+<section class="container">
+  <p> Select a title </p>
+  <div class="radio-group">
+    <pf-radio id="title-mr" value="mr" label="Mr" name="title"></pf-radio>
+    <pf-radio id="title-miss" value="miss" label="Miss" name="title"></pf-radio>
+    <pf-radio id="title-mrs" value="mrs" label="Mrs" name="title"></pf-radio>
+    <pf-radio id="title-ms" value="ms" label="Ms" name="title"></pf-radio>
+    <pf-radio id="title-dr" value="dr" label="Dr" name="title"></pf-radio>
+    <pf-radio id="title-other" value="other" label="Other" name="title"></pf-radio>
+  </div>
+  <pf-button> Submit</pf-button>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-radio/pf-radio.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>
+
+<style>
+.container{
+  padding: 3rem;
+}
+.container p {
+  font-size: 1.5rem;
+  margin-block-end: 0.5rem;
+}
+.radio-group{
+  display: flex;
+  justify-content: flex-start;
+  padding-bottom: 1rem;
+}
+.radio-group pf-radio{
+  padding-right: 1rem;
+}
+</style>
+

elements/pf-radio/docs/pf-radio.md

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

elements/pf-radio/pf-radio.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}