@cfpb/cfpb-design-system 3.13.1 → 3.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.13.1",
+  "version": "3.14.1",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",
@@ -12,6 +12,7 @@
     "email": "tech@cfpb.gov",
     "url": "https://cfpb.github.io/design-system"
   },
+  "sideEffects": false,
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/elements/cfpb-button/index.js

@@ -48,7 +48,9 @@ export class CfpbButton extends LitElement {
       </button>
     `;
   }
-}
 
-window.customElements.get('cfpb-button') ||
-  window.customElements.define('cfpb-button', CfpbButton);
+  static init() {
+    window.customElements.get('cfpb-button') ||
+      window.customElements.define('cfpb-button', CfpbButton);
+  }
+}

package/src/elements/cfpb-file-upload/index.js

@@ -1,6 +1,7 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-file-upload.component.scss';
+import { CfpbButton } from '../cfpb-button';
 
 /**
  *
@@ -96,7 +97,13 @@ export class CfpbFileUpload extends LitElement {
       </div>
     `;
   }
-}
 
-window.customElements.get('cfpb-file-upload') ||
-  window.customElements.define('cfpb-file-upload', CfpbFileUpload);
+  static init() {
+    // Initialize internal button.
+    CfpbButton.init();
+
+    // Initialize parent file upload.
+    window.customElements.get('cfpb-file-upload') ||
+      window.customElements.define('cfpb-file-upload', CfpbFileUpload);
+  }
+}

package/src/utilities/utilities.scss

@@ -273,14 +273,13 @@ $ba: Link underline active color.
 }
 /* stylelint-enable */
 
-@mixin u-link-border() {
-  border-bottom-width: 1px;
-}
-
+// Turn off the default bottom `border` on the default and `:hover` states.
 @mixin u-link-no-border() {
   border-bottom-width: 0 !important;
 }
 
+// Turn off the default bottom `border` on the default state,
+// but force a bottom border on the `:hover` state.
 @mixin u-link-hover-border() {
   border-bottom-width: 0 !important;