polaris_view_components 0.1.0

data/app/assets/icons/polaris/TypeMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 0c-.6 0-1.1.4-1.4 1L2 17.3a1 1 0 0 1-.9.7 1 1 0 1 0 0 2h4a1 1 0 1 0 0-2 1 1 0 0 1-.9-1.2L5 14h7l.9 2.8A1 1 0 0 1 12 18a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2 1 1 0 0 1-1-.7L12.5 1c-.3-.6-.8-1-1.5-1H9zm-.5 4.3L5.8 12h5.4L8.5 4.3z"/></svg>

data/app/assets/icons/polaris/UndoMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.488 5C5.637 3.066 7.478 2 10 2a8 8 0 0 1 8 8 8 8 0 0 1-8 8 1 1 0 1 0 0 2c5.523 0 10-4.477 10-10S15.523 0 10 0C6.703 0 4.356 1.496 2 3.647V1a1 1 0 0 0-2 0v5a.998.998 0 0 0 1 1h5a1 1 0 0 0 0-2H3.488z"/></svg>

data/app/assets/icons/polaris/UnfulfilledMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3v11h3.5c.775 0 1.388.662 1.926 1.244l.11.12a2 2 0 0 0 2.927-.001l.111-.119C12.112 14.662 12.725 14 13.5 14H17V3H3zm3-2H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H6z"/></svg>

data/app/assets/icons/polaris/UnknownDeviceMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 2h1V0H3.5A1.5 1.5 0 0 0 2 1.5V3h2V2zm4.685 10.502h2.136v-.141c.011-1.17.23-1.302 1.02-1.777l.238-.144c1.11-.664 1.805-1.57 1.805-2.952C13.884 5.448 12.296 4 9.99 4 7.877 4 6.06 5.193 6 7.487h2.267c.054-1.135.86-1.533 1.711-1.533.924 0 1.666.616 1.666 1.564 0 .845-.561 1.424-1.292 1.883-.102.064-.2.122-.293.178-.882.528-1.363.816-1.374 2.782v.14zm.979 4.34c.712 0 1.322-.591 1.328-1.328a1.342 1.342 0 0 0-1.328-1.316c-.737 0-1.334.592-1.328 1.316a1.32 1.32 0 0 0 1.328 1.328zM4 18v-1H2v1.5A1.5 1.5 0 0 0 3.5 20H5v-2H4zm11 0h1v-1h2v1.5a1.5 1.5 0 0 1-1.5 1.5H15v-2zM4 11v4H2v-4h2zm0-2V5H2v4h2zm14 2v4h-2v-4h2zm0-2V5h-2v4h2zm-2-6V2h-1V0h1.5A1.5 1.5 0 0 1 18 1.5V3h-2z"/></svg>

data/app/assets/icons/polaris/UpdateInventoryMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 5.65-8-3.555L2 5.65V19H0V5c0-.396.232-.753.594-.913l9-4a.999.999 0 0 1 .812 0l9 4A1 1 0 0 1 20 5v14h-2V5.65z"/><path d="M9 15a.997.997 0 0 1-.707-.293l-2-2a1 1 0 0 1 1.414-1.414L9 12.586l3.293-3.293a1 1 0 1 1 1.414 1.415l-4 4A.999.999 0 0 1 9 15z"/></svg>

data/app/assets/icons/polaris/UploadMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M20 10c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10zM5.293 8.293l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L11 7.414V15a1 1 0 1 1-2 0V7.414L6.707 9.707a1 1 0 0 1-1.414-1.414z"/></svg>

data/app/assets/icons/polaris/VariantMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 1A1.5 1.5 0 0 1 19 2.5v12a1.5 1.5 0 0 1-1.5 1.5H14v2.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 18.5v-11A1.5 1.5 0 0 1 1.5 6H4V2.5A1.5 1.5 0 0 1 5.5 1h12zM11 14h6V8l-6 6zm-9 4h10v-2.027l-6.495.022A1.5 1.5 0 0 1 4 14.495V8H2v10zM12 3H6v6l6-6z"/></svg>

data/app/assets/icons/polaris/ViewMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M19.928 9.629C17.791 4.286 13.681 1.85 9.573 2.064c-4.06.21-7.892 3.002-9.516 7.603L-.061 10l.118.333c1.624 4.601 5.455 7.393 9.516 7.603 4.108.213 8.218-2.222 10.355-7.565l.149-.371-.149-.371zM10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/><circle cx="10" cy="10" r="3"/></svg>

data/app/assets/icons/polaris/ViewMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.928 9.628C17.837 9.399 15.611 4 10 4S2.162 9.399 2.07 9.628a1.017 1.017 0 0 0 0 .744C2.163 10.601 4.389 16 10 16s7.837-5.399 7.928-5.628a1.017 1.017 0 0 0 0-.744zM10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 .002 4.001A2 2 0 0 0 9.999 8z"/></svg>

data/app/assets/icons/polaris/ViewportNarrowMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.414 9H19a1 1 0 1 1 0 2h-4.586l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 1 1 1.414 1.414L14.414 9zM5.707 6.293l3 3a.999.999 0 0 1 0 1.414l-3 3a.997.997 0 0 1-1.631-.324 1 1 0 0 1 .217-1.09L5.586 11H1a1 1 0 0 1 0-2h4.586L4.293 7.707a1 1 0 0 1 1.414-1.414zM8 2v4L6 4V1.5A1.5 1.5 0 0 1 7.5 0h5A1.5 1.5 0 0 1 14 1.5V4l-2 2V2H8zm6 14-2-2v4H8v-4l-2 2v2.5A1.5 1.5 0 0 0 7.5 20h5a1.5 1.5 0 0 0 1.5-1.5V16z"/></svg>

data/app/assets/icons/polaris/ViewportWideMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.707 6.293 3 3a.998.998 0 0 1 0 1.414l-3 3a.997.997 0 0 1-1.631-.324 1 1 0 0 1 .217-1.09L16.586 11H12a1 1 0 1 1 0-2h4.586l-1.293-1.293a1 1 0 1 1 1.414-1.414zm-13.414 0a1 1 0 1 1 1.414 1.414L3.414 9H8a1 1 0 0 1 0 2H3.414l1.293 1.293a1.003 1.003 0 0 1 0 1.414 1 1 0 0 1-1.414 0l-3-3a.998.998 0 0 1 0-1.414l3-3z"/><path d="M1 1.5A1.5 1.5 0 0 1 2.5 0h15A1.5 1.5 0 0 1 19 1.5V6l-2-2V2H3v2L1 6V1.5zM17 18v-2l2-2v4.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 18.5V14l2 2v2h14z"/></svg>

data/app/assets/icons/polaris/VocabularyMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M20 1.5A1.5 1.5 0 0 0 18.5 0H12c-.768 0-1.469.29-2 .766A2.987 2.987 0 0 0 8 0H1.5A1.5 1.5 0 0 0 0 1.5v15A1.5 1.5 0 0 0 1.5 18H8a1 1 0 0 1 1 1 1 1 0 1 0 2 0 1 1 0 0 1 1-1h6.5a1.5 1.5 0 0 0 1.5-1.5v-15zM18 16h-6c-.352 0-.687.067-1 .179V3a1 1 0 0 1 1-1h6v14zM8 16H2V2h6a1 1 0 0 1 1 1v13.179A2.959 2.959 0 0 0 8 16z"/><path d="M4 4h3v2H4zm9 0h3v2h-3zM4 8h3v2H4zm9 0h3v2h-3zm-9 4h3v2H4z"/></svg>

data/app/assets/icons/polaris/WandMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.666.376c.495-.501 1.189-.501 1.684 0l2.278 2.307c.496.502.496 1.204 0 1.706L15.963 8 12 3.987l3.666-3.61zM10.993 5 15 9.007 4.382 19.624c-.5.501-1.202.501-1.703 0L.376 17.321c-.501-.501-.501-1.203 0-1.703L10.993 5zM16 13c0-.6.4-1 1-1s1 .4 1 1 .4 1 1 1 1 .4 1 1-.4 1-1 1-1 .4-1 1-.4 1-1 1-1-.4-1-1-.4-1-1-1-1-.4-1-1 .4-1 1-1 1-.4 1-1zM4 1c0-.6.4-1 1-1s1 .4 1 1 .4 1 1 1 1 .4 1 1-.4 1-1 1-1 .4-1 1-.4 1-1 1-1-.4-1-1-.4-1-1-1-1-.4-1-1 .4-1 1-1 1-.4 1-1z"/></svg>

data/app/assets/icons/polaris/WearableMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3v2.5A1.5 1.5 0 0 0 7.5 20h5a1.5 1.5 0 0 0 1.5-1.5V16a3 3 0 0 0 3-3v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1V7a3 3 0 0 0-3-3V1.5A1.5 1.5 0 0 0 12.5 0h-5A1.5 1.5 0 0 0 6 1.5V4zm2 0V2h4v2H8zm4 12v2H8v-2h4zM6 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H6z"/></svg>

data/app/assets/icons/polaris/WholesaleMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17 3a1 1 0 1 0-2 0v5.392a2.5 2.5 0 0 0-.32-1.223l-2.184-3.892A2.5 2.5 0 0 0 10.316 2H7.5A2.5 2.5 0 0 0 5 4.5V6H2.5A1.5 1.5 0 0 0 1 7.5v2.585A1.5 1.5 0 0 0 0 11.5V17a3 3 0 1 0 6 0h3a3 3 0 1 0 6 0v-2h4a1 1 0 1 0 0-2h-2V3zM3 10h2V8H3v2zm10-1.608V10H7V4.5a.5.5 0 0 1 .5-.5h2.816a.5.5 0 0 1 .436.255l2.184 3.892a.5.5 0 0 1 .064.245zM4 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm8 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

data/app/assets/icons/polaris/WifiMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 18a1.501 1.501 0 0 1 0-3 1.501 1.501 0 0 1 0 3zM1.004 8a.997.997 0 0 1-.607-1.795C3.106 4.138 6.516 3 10 3c3.483 0 6.892 1.137 9.598 3.202a1 1 0 1 1-1.212 1.59C16.026 5.991 13.048 5 10 5c-3.05 0-6.029.992-8.391 2.795A.988.988 0 0 1 1.004 8zM4 11a.996.996 0 0 1-.958-1.293.998.998 0 0 1 .352-.502C5.255 7.783 7.602 7 10 7c2.397 0 4.742.782 6.601 2.203a1 1 0 0 1-1.213 1.59C13.875 9.637 11.961 9 10 9c-1.962 0-3.877.638-5.392 1.795a.989.989 0 0 1-.605.205h-.002zm8.994 3a.994.994 0 0 1-.594-.197 4.052 4.052 0 0 0-4.804 0 .999.999 0 1 1-1.192-1.606c2.108-1.565 5.079-1.566 7.187 0A1 1 0 0 1 12.996 14z"/></svg>

data/app/assets/javascripts/polaris.js

@@ -0,0 +1,113 @@
+import { Controller } from "stimulus";
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+class _class$1 extends Controller {
+  update(event) {
+    const select = event.currentTarget;
+    const option = select.options[select.selectedIndex];
+    this.selectedOptionTarget.innerText = option.text;
+  }
+}
+
+_defineProperty(_class$1, "targets", [ "selectedOption" ]);
+
+class _class extends Controller {
+  connect() {
+    this.syncValue();
+    this.stepValue = this.inputTarget.getAttribute("step");
+    this.minValue = this.inputTarget.getAttribute("min");
+    this.maxValue = this.inputTarget.getAttribute("max");
+  }
+  syncValue() {
+    this.valueValue = this.inputTarget.value;
+  }
+  clear() {
+    this.value = null;
+  }
+  increase() {
+    this.changeNumber(1);
+  }
+  decrease() {
+    this.changeNumber(-1);
+  }
+  valueValueChanged() {
+    this.toggleHasValueClass();
+    if (this.hasClearButtonTarget) {
+      this.toggleClearButton();
+    }
+    if (this.hasCharacterCountTarget) {
+      this.updateCharacterCount();
+    }
+  }
+  get value() {
+    return this.valueValue;
+  }
+  set value(newValue) {
+    this.inputTarget.value = newValue;
+    this.syncValue();
+  }
+  toggleHasValueClass() {
+    if (this.value.length > 0) {
+      this.element.classList.add(this.hasValueClass);
+    } else {
+      this.element.classList.remove(this.hasValueClass);
+    }
+  }
+  toggleClearButton() {
+    if (this.value.length > 0) {
+      this.clearButtonTarget.classList.remove(this.clearButtonHiddenClass);
+      this.clearButtonTarget.setAttribute("tab-index", "-");
+    } else {
+      this.clearButtonTarget.classList.add(this.clearButtonHiddenClass);
+      this.clearButtonTarget.setAttribute("tab-index", "-1");
+    }
+  }
+  updateCharacterCount() {
+    this.characterCountTarget.textContent = this.textTemplateValue.replace(`{count}`, this.value.length);
+    this.characterCountTarget.setAttribute("aria-label", this.labelTemplateValue.replace(`{count}`, this.value.length));
+  }
+  changeNumber(steps) {
+    const dpl = num => (num.toString().split(".")[1] || []).length;
+    const numericValue = this.value ? parseFloat(this.value) : 0;
+    if (isNaN(numericValue)) {
+      return;
+    }
+    console.log(numericValue, this.stepValue);
+    const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
+    const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
+    this.value = String(newValue.toFixed(decimalPlaces));
+  }
+}
+
+_defineProperty(_class, "targets", [ "input", "clearButton", "characterCount" ]);
+
+_defineProperty(_class, "classes", [ "hasValue", "clearButtonHidden" ]);
+
+_defineProperty(_class, "values", {
+  value: String,
+  labelTemplate: String,
+  textTemplate: String,
+  step: Number,
+  min: Number,
+  max: Number
+});
+
+function registerPolarisControllers(application) {
+  application.register("polaris-select", _class$1);
+  application.register("polaris-text-field", _class);
+}
+
+export { _class$1 as Select, _class as TextField, registerPolarisControllers };

data/app/assets/stylesheets/polaris_view_components.css

@@ -0,0 +1,136 @@
+.shp-Navigation {
+  margin: 0 auto;
+  padding: 0 2rem;
+  max-width: 99.8rem;
+  max-width: none;
+  border-bottom: .1rem solid var(--p-border-subdued)
+}
+
+@media (max-width: 48.0625em) and (min-width: 30.625em),(min-width: 45.625em) {
+  .shp-Navigation {
+    padding: 0 2rem
+  }
+}
+
+@media (min-width: 30.625em) {
+  .shp-Navigation {
+    padding: 0 2rem
+  }
+}
+
+@media (max-width: 48.0625em) and (min-width: 46.5em),(min-width: 61.5em) {
+  .shp-Navigation {
+    padding: 0 3.2rem
+  }
+}
+
+@media (min-width: 46.5em) {
+  .shp-Navigation {
+    padding: 0 3.2rem
+  }
+}
+
+@media (max-width: 30.5625em) {
+  .shp-Navigation {
+    padding: 0 1.6rem
+  }
+}
+
+.shp-Navigation_Items {
+  display: flex;
+  margin: 0;
+  padding: 0 .2rem;
+  list-style: none
+}
+
+.shp-Navigation_Item {
+  display: flex;
+  margin: 0;
+  padding: 0
+}
+
+.shp-Navigation_Link {
+  color: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: inherit;
+  line-height: inherit;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--p-text-subdued);
+  position: relative;
+  z-index: 400;
+  justify-content: center;
+  width: 100%;
+  min-width: 100%;
+  margin-top: 1px;
+  margin-bottom: -1px;
+  padding: 0 1.6rem;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer
+}
+
+.shp-Navigation_Link:visited {
+  color: inherit
+}
+
+.shp-Navigation_Link:focus {
+  outline: none
+}
+
+@media (min-width: 40em) {
+  .shp-Navigation_Link {
+    font-size: 1.4rem
+  }
+}
+
+.shp-Navigation_Link:hover {
+  text-decoration: none
+}
+
+.shp-Navigation_Link:hover .shp-Navigation_LinkText {
+  font-weight: 400;
+  color: var(--p-text);
+  text-decoration: none;
+  border-bottom: .3rem solid var(--p-action-primary)
+}
+
+.shp-Navigation_Link:focus {
+  box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
+}
+
+.shp-Navigation_Link:focus .shp-Navigation_LinkText {
+  font-weight: 400;
+  color: var(--p-text)
+}
+
+.shp-Navigation_LinkText {
+  padding: 1.6rem 0 1.3rem 0;
+  border-bottom: .3rem solid transparent
+}
+
+.shp-Navigation_LinkText {
+  display: block;
+}
+
+[aria-selected='true'],
+.shp-Navigation_Link:focus .shp-Navigation_LinkText {
+  font-weight: 400;
+  color: var(--p-text)
+}
+
+[aria-selected='true'] .shp-Navigation_LinkText {
+  color: var(--p-action-primary);
+  border-bottom: .3rem solid var(--p-action-primary)
+}

data/app/components/polaris/action.rb

@@ -0,0 +1,32 @@
+module Polaris
+  class Action
+    attr_reader :content
+
+    def initialize(
+      content:,
+      url:,
+      accessibility_label: '',
+      external: false,
+      id: '',
+      data: {}
+    )
+      @content = content
+      @accessibility_label = accessibility_label
+      @external = external
+      @id = id
+      @url = url
+      @data = data
+    end
+
+    def to_h
+      {
+        content: @content,
+        accessibility_label: @accessibility_label,
+        external: @external,
+        id: @id,
+        url: @url,
+        data: @data,
+      }
+    end
+  end
+end

data/app/components/polaris/application_component.rb

@@ -0,0 +1,35 @@
+class Polaris::ApplicationComponent < ViewComponent::Base
+  include ActiveModel::Validations
+
+  def initialize(data: {}, aria: {}, html_options: {}, **args)
+    @data = data
+    @aria = aria
+    @html_options = html_options
+  end
+
+  private
+
+    def classes
+      []
+    end
+
+    def additional_data
+      {}
+    end
+
+    def additional_aria
+      {}
+    end
+
+    def content_tag_options
+      {
+        class: classes.compact,
+        data: @data.merge(additional_data),
+        aria: @aria.merge(additional_aria)
+      }.merge(@html_options)
+    end
+
+    def before_render
+      validate!
+    end
+end

data/app/components/polaris/avatar_component.html.erb

@@ -0,0 +1,19 @@
+<%= render Polaris::BaseComponent.new(tag: 'span', **@system_arguments) do %>
+  <% if @source %>
+    <%= image_tag @source, class: "Polaris-Avatar__Image", role: "presentation" %>
+  <% else %>
+    <span class="Polaris-Avatar__Initials">
+      <% if @initials %>
+        <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
+          <text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">
+            <%= @initials %>
+          </text>
+        </svg>
+      <% else %>
+        <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
+          <path fill="currentColor" d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"></path>
+        </svg>
+      <% end %>
+    </span>
+  <% end %>
+<% end %>

data/app/components/polaris/avatar_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Polaris
+  class AvatarComponent < Polaris::NewComponent
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-Avatar--sizeSmall",
+      medium: "Polaris-Avatar--sizeMedium",
+      large: "Polaris-Avatar--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(
+      customer: false,
+      initials: nil,
+      name: nil,
+      size: SIZE_DEFAULT,
+      source: nil,
+      **system_arguments
+    )
+      @initials = initials
+      @source = source
+
+      @system_arguments = system_arguments
+      if name
+        @system_arguments[:aria] ||= {}
+        @system_arguments[:aria][:label] ||= name
+      end
+      @system_arguments[:role] = "img"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Avatar",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        "Polaris-Avatar--styleOne" => !customer,
+        "Polaris-Avatar--hasImage" => source.present?
+      )
+    end
+  end
+end

data/app/components/polaris/badge_component.html.erb

@@ -0,0 +1,9 @@
+<%= render Polaris::BaseComponent.new(tag: 'span', **@system_arguments) do %>
+  <% if @progress != :default %>
+    <span class="Polaris-Badge__Pip">
+      <%= polaris_visually_hidden { @progress.to_s.humanize } %>
+    </span>
+  <% end %>
+
+  <%= content %>
+<% end %>