@saasquatch/mint-components 1.6.8 → 1.6.10-0

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -13,7 +13,7 @@ export class DividedLayout {
   constructor() {
     /**
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
-     * @uiName Border Style
+     * @uiName Border style
      */
     this.dividerStyle = "1px solid #EAEAEA";
     withHooks(this);
@@ -67,7 +67,7 @@ export class DividedLayout {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Border Style",
+            "text": "Border style",
             "name": "uiName"
           }],
         "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color."

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js

@@ -18,16 +18,16 @@ const style = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-select::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
@@ -36,7 +36,7 @@ export function DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -17,11 +17,11 @@ export class DropdownField {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Dropdown Label
+     * @uiName Dropdown label
      */
     this.dropdownLabel = "Select an option";
     /**
-     * @uiName Unselected Error Message
+     * @uiName Unselected error message
      */
     this.errorMessage = "Select an option";
     /**
@@ -66,7 +66,7 @@ export class DropdownField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Dropdown Name Attribute",
+            "text": "Dropdown name attribute",
             "name": "uiName"
           }, {
             "text": undefined,
@@ -89,7 +89,7 @@ export class DropdownField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Dropdown Label",
+            "text": "Dropdown label",
             "name": "uiName"
           }],
         "text": ""
@@ -110,7 +110,7 @@ export class DropdownField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Unselected Error Message",
+            "text": "Unselected error message",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile-view.js

@@ -5,8 +5,8 @@ const EditProfileView = (props) => {
   const { text } = states;
   const { errors } = states.formState;
   if (states.showEdit) {
-    return (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}` },
-      h("h2", { style: {
+    return (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+      h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           margin: "0px",
           textAlign: "center",
@@ -34,9 +34,9 @@ const EditProfileView = (props) => {
               callbacks.onSubmit(e);
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext)))));
   }
-  return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
+  return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },
-      h("h2", { style: {
+      h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile.js

@@ -61,7 +61,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Edit Profile Text",
+            "text": "Edit profile text",
             "name": "uiName"
           }],
         "text": "Enable editing button text"
@@ -81,7 +81,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Cancel Button Text",
+            "text": "Cancel button text",
             "name": "uiName"
           }],
         "text": ""
@@ -101,7 +101,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Info Button Text",
+            "text": "Info button text",
             "name": "uiName"
           }],
         "text": ""
@@ -121,7 +121,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "First Name Label",
+            "text": "First name label",
             "name": "uiName"
           }],
         "text": ""
@@ -141,7 +141,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last Name Label",
+            "text": "Last name label",
             "name": "uiName"
           }],
         "text": ""
@@ -161,7 +161,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Region Field Label",
+            "text": "Region field label",
             "name": "uiName"
           }],
         "text": ""
@@ -181,7 +181,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Region",
+            "text": "Show region",
             "name": "uiName"
           }],
         "text": "Show or hide current region"

package/dist/collection/components/sqm-edit-profile/useEditProfile.js

@@ -2,39 +2,39 @@ import { useQuery, useMutation, useUserIdentity, } from "@saasquatch/component-b
 import { gql } from "graphql-request";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { intl } from "../../global/global";
-const GET_USER = gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
+const GET_USER = gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
 `;
-const UPSERT_USER = gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
+const UPSERT_USER = gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
 `;
 // view doesn't tolerate undefined, even when we're loading
 const defaultFormState = {

package/dist/collection/components/sqm-empty/sqm-empty-view.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (h("sqm-portal-container", { padding: "large", gap: "medium" },
+  return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
     h("sqm-image", { "image-url": emptyStateImage }),
     h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -10,6 +10,10 @@ export const ErrorAlert = () => {
   return (h("sqm-form-message", { type: "error" },
     h("div", null, "This is an error message")));
 };
+export const WarningAlert = () => {
+  return (h("sqm-form-message", { type: "warning" },
+    h("div", null, "This is an error message")));
+};
 export const InfoAlert = () => {
   return (h("sqm-form-message", { type: "info" },
     h("div", null, "This is an info message")));

package/dist/collection/components/sqm-form-message/sqm-form-message.css

@@ -9,6 +9,11 @@ sl-alert::part(base) {
   border-color: var(--sl-color-danger-200);
 }
 
+.Warning::part(base) {
+  background-color: var(--sl-color-warning-100);
+  border-color: var(--sl-color-warning-200);
+}
+
 .Success::part(base) {
   background-color: var(--sl-color-success-100);
   border-color: var(--sl-color-success-200);

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -21,6 +21,11 @@ export class FormMessage {
         h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
         h("slot", null)));
     }
+    else if (this.type === "warning") {
+      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true },
+        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
+        h("slot", null)));
+    }
     else {
       return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
         h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
@@ -48,10 +53,10 @@ export class FormMessage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Alert Type",
+            "text": "Alert type",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options include \"success\", \"info\", \"warning\", and \"error\""
       },
       "attribute": "type",
       "reflect": false
@@ -71,7 +76,7 @@ export class FormMessage {
             "text": "Icon",
             "name": "uiName"
           }],
-        "text": "Icon to use in alert"
+        "text": "Icon to use in alert. Use icon values from Shoelace (e.g. \"star\" or \"heart\") at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false

package/dist/collection/components/sqm-header-logo/sqm-header-logo.js

@@ -8,12 +8,12 @@ export class HeroImage {
     /**
      * Page participants are navigated to after clicking the header logo.
      *
-     * @uiName Redirect Path
+     * @uiName Redirect path
      * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * @uiName Logo Height
+     * @uiName Logo height
      */
     this.height = 60;
     withHooks(this);
@@ -21,7 +21,7 @@ export class HeroImage {
   disconnectedCallback() { }
   render() {
     return (h(Host, null,
-      h("a", { href: this.nextPage },
+      h("a", { href: this.nextPage, part: "sqm-link" },
         h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
   }
   static get is() { return "sqm-header-logo"; }
@@ -45,7 +45,7 @@ export class HeroImage {
             "text": "url",
             "name": "format"
           }, {
-            "text": "Logo Image",
+            "text": "Logo image",
             "name": "uiName"
           }],
         "text": ""
@@ -65,7 +65,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Redirect Path",
+            "text": "Redirect path",
             "name": "uiName"
           }, {
             "text": "pageSelect",
@@ -89,7 +89,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Logo Height",
+            "text": "Logo height",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-hero/Hero.stories.js

@@ -13,6 +13,7 @@ export const LoginOneColumn = () => {
       columns: 1,
       wrapDirection: "wrap",
       paddingSize: "large",
+      minHeight: 0,
     },
     content: {
       primaryColumn: [
@@ -24,12 +25,17 @@ export const LoginOneColumn = () => {
   return (h("div", { style: { height: "800px" } },
     h(HeroView, Object.assign({}, props))));
 };
+export const LoginOneColumnWithMinHeight = () => {
+  return (h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 1, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "#FFFFFF" },
+    h("sqm-portal-login", null)));
+};
 export const LoginOneColumnWithColor = () => {
   const props = {
     states: {
       columns: 1,
       wrapDirection: "wrap",
       paddingSize: "large",
+      minHeight: 0,
       background: "LightSlateGrey",
     },
     content: {
@@ -45,6 +51,7 @@ export const LoginOneColumnWithImage = () => {
       columns: 1,
       wrapDirection: "wrap",
       paddingSize: "large",
+      minHeight: 0,
       background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
     },
     content: { primaryColumn: h("sqm-portal-login", null) },
@@ -58,6 +65,7 @@ export const TwoColumnLoginLargePadding = () => {
       columns: 2,
       wrapDirection: "wrap",
       paddingSize: "large",
+      minHeight: 0,
       background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
       secondaryBackground: "LightSlateGrey",
     },
@@ -77,6 +85,7 @@ export const TwoColumnLoginMediumPadding = () => {
       columns: 2,
       wrapDirection: "wrap",
       paddingSize: "medium",
+      minHeight: 0,
       background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
       secondaryBackground: "LightSlateGrey",
     },
@@ -96,6 +105,7 @@ export const TwoColumnLoginSmallPadding = () => {
       columns: 2,
       wrapDirection: "wrap",
       paddingSize: "small",
+      minHeight: 0,
       background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
       secondaryBackground: "LightSlateGrey",
     },
@@ -115,6 +125,7 @@ export const TwoColumnLoginNoPadding = () => {
       columns: 2,
       wrapDirection: "wrap",
       paddingSize: "none",
+      minHeight: 0,
       background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
       secondaryBackground: "LightSlateGrey",
     },
@@ -135,6 +146,7 @@ export const TwoColumnLoginReverseWrap = () => {
       wrapDirection: "wrap-reverse",
       background: "LightSlateGrey",
       paddingSize: "large",
+      minHeight: 0,
       secondaryBackground: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
     },
     content: {
@@ -153,6 +165,7 @@ export const TwoColumnLoginWithImgElement = () => {
       columns: 2,
       wrapDirection: "wrap",
       paddingSize: "large",
+      minHeight: 0,
     },
     content: {
       primaryColumn: (h("div", null,
@@ -166,3 +179,20 @@ export const TwoColumnLoginWithImgElement = () => {
   return (h("div", { style: { height: "800px" } },
     h(HeroView, Object.assign({}, props))));
 };
+export const MinHeight = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+      paddingSize: "large",
+      minHeight: 600,
+      background: "https://images.unsplash.com/photo-1487528278747-ba99ed528ebc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
+    },
+    content: {
+      secondaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("sqm-portal-login", null))),
+    },
+  };
+  return h(HeroView, Object.assign({}, props));
+};

package/dist/collection/components/sqm-hero/sqm-hero-view.js

@@ -85,11 +85,12 @@ export function HeroView(props) {
         background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
       },
       "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      minHeight: `${states.minHeight}px`,
       display: "block",
     },
     SingleColumnContainer: {
       background: `no-repeat center/cover ${parseBackground(states.background)}`,
-      flex: "1 1 0",
+      minHeight: `${states.minHeight}px`,
     },
     Container: {
       width: "100%",
@@ -103,27 +104,27 @@ export function HeroView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{    
-    height: 100%;
-    display: contents;
-  }
-  sqm-hero{    
-    height: 100%;
-    display: contents;
-  }
-  img{
-      max-width: 100%;
-      height: auto;
-  }
-  
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
+      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -5,27 +5,33 @@ import { getProps } from "../../utils/utils";
 /**
  * @uiName Hero Layout
  * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
- * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
+ * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" min-height="0" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
  * @exampleGroup Layout
  */
 export class Hero {
   constructor() {
     /**
-     * Number of columns in the layout
      *
      * @uiName Columns
      * @uiEnum [1, 2]
      * @uiEnumNames ["One", "Two"]
      */
     this.columns = 1;
+    /**
+     * Minimum height of each column including when they are stacked on mobile
+     *
+     * @uiName Minimum height (in px)
+     */
+    this.minHeight = 200;
     /**
      * Can be an image url, colour or Shoelace variable.
      *
      * @uiName Background
+     * @uiWidget Background
      */
     this.background = "var(--sl-color-gray-50)";
     /**
-     * @uiName Padding Size
+     * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
      * @uiEnumNames ["None", "Small", "Medium", "Large"]
      */
@@ -33,7 +39,7 @@ export class Hero {
     /**
      * Flexbox wrap direction, accepts wrap or wrap-reverse
      *
-     * @uiName Wrap Direction
+     * @uiName Wrap direction
      * @uiEnum ["wrap", "wrap-reverse"]
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
@@ -41,6 +47,7 @@ export class Hero {
     withHooks(this);
   }
   disconnectedCallback() { }
+  // TODO: Improve empty slot behavior with useChildElements to check for empty slot
   render() {
     const props = {
       states: { ...getProps(this) },
@@ -75,12 +82,33 @@ export class Hero {
             "text": "[\"One\", \"Two\"]",
             "name": "uiEnumNames"
           }],
-        "text": "Number of columns in the layout"
+        "text": ""
       },
       "attribute": "columns",
       "reflect": false,
       "defaultValue": "1"
     },
+    "minHeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Minimum height (in px)",
+            "name": "uiName"
+          }],
+        "text": "Minimum height of each column including when they are stacked on mobile"
+      },
+      "attribute": "min-height",
+      "reflect": false,
+      "defaultValue": "200"
+    },
     "background": {
       "type": "string",
       "mutable": false,
@@ -95,6 +123,9 @@ export class Hero {
         "tags": [{
             "text": "Background",
             "name": "uiName"
+          }, {
+            "text": "Background",
+            "name": "uiWidget"
           }],
         "text": "Can be an image url, colour or Shoelace variable."
       },
@@ -114,7 +145,7 @@ export class Hero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Size",
+            "text": "Padding size",
             "name": "uiName"
           }, {
             "text": "[\"none\", \"small\", \"medium\",\"large\"]",
@@ -141,8 +172,11 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Secondary Background",
+            "text": "Secondary background",
             "name": "uiName"
+          }, {
+            "text": "Background",
+            "name": "uiWidget"
           }],
         "text": "Secondary background image or color (for use in the right column)"
       },
@@ -161,7 +195,7 @@ export class Hero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Wrap Direction",
+            "text": "Wrap direction",
             "name": "uiName"
           }, {
             "text": "[\"wrap\", \"wrap-reverse\"]",