@cfpb/cfpb-design-system 3.12.1 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.12.1",
+  "version": "3.13.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",

package/src/components/cfpb-tooltips/index.js

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 import tippy from 'tippy.js';
-import { instantiateAll } from '@cfpb/cfpb-design-system';
+import { instantiateAll } from '../../utilities/atomic-helpers.js';
 
 import * as TooltipStyles from './tooltip.scss';
 

package/src/elements/cfpb-button/cfpb-button.component.scss

@@ -0,0 +1,8 @@
+@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button' as *;
+
+:host {
+  // This prevents the child button from having an empty gap after the button.
+  display: flex;
+  width: fit-content;
+}

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

@@ -0,0 +1,53 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-button.component.scss';
+
+/**
+ *
+ * @element cfpb-button
+ * @slot - The main content for the button.
+ */
+export class CfpbButton extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  static get properties() {
+    return {
+      isDisabled: { type: Boolean },
+      type: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.isDisabled = false;
+    this.type = '';
+  }
+
+  get _btnClass() {
+    let btnClass = 'a-btn';
+    switch (this.type) {
+      case 'secondary':
+        btnClass += ' a-btn--secondary';
+        break;
+      case 'warning':
+        btnClass += ' a-btn--warning';
+        break;
+      case 'disabled':
+        btnClass += ' a-btn--disabled';
+        break;
+    }
+
+    return btnClass;
+  }
+
+  render() {
+    return html`
+      <button class="${this._btnClass}" ?disabled=${this.isDisabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+window.customElements.define('cfpb-button', CfpbButton);

package/src/elements/cfpb-file-upload/cfpb-file-upload.component.scss

@@ -0,0 +1,14 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+
+:host {
+  // This prevents the child button from having an empty gap after the button.
+  display: flex;
+  width: fit-content;
+
+  flex-direction: column;
+}
+
+:host::part(upload-details)[hidden='true'] {
+  display: none;
+}

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

@@ -0,0 +1,81 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import styles from './cfpb-file-upload.component.scss';
+
+/**
+ *
+ * @element cfpb-file-upload.
+ * @slot - The main content for the upload button.
+ */
+export class CfpbFileUpload extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  static get properties() {
+    return {
+      isDetailHidden: { type: Boolean },
+      fileName: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.isDetailHidden = true;
+    this.fileName = '';
+  }
+
+  fileInput = createRef();
+  fileDetails = createRef();
+
+  #getUploadName(fileName) {
+    let uploadName = fileName;
+    if (uploadName.indexOf('\\') > -1) {
+      const uploadNameParts = uploadName.split('\\');
+      uploadName = uploadNameParts[uploadNameParts.length - 1];
+    }
+
+    return uploadName;
+  }
+
+  #showDetails() {
+    this.fileName = this.#getUploadName(this.fileInput.value.value);
+    this.isDetailHidden = false;
+  }
+
+  render() {
+    return html`
+      <cfpb-button
+        type="secondary"
+        @click="${() => {
+          this.fileInput.value.click();
+        }}"
+      >
+        <slot></slot>
+      </cfpb-button>
+      <input
+        id="file-upload"
+        class="a-btn a-btn--secondary"
+        type="file"
+        hidden
+        @input="${() => this.#showDetails()}"
+        ${ref(this.fileInput)}
+      />
+      <div
+        part="upload-details"
+        ?hidden=${this.isDetailHidden}
+        ${ref(this.fileDetails)}
+      >
+        <h4>File added</h4>
+        <ul>
+          <li>${this.fileName} ${this.isDetailHidden}</li>
+        </ul>
+        <p>
+          To remove or replace your file, select a new file and upload again.
+        </p>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('cfpb-file-upload', CfpbFileUpload);

package/src/index.js

@@ -17,3 +17,6 @@ export * from './components/cfpb-tables';
 export * from './components/cfpb-typography';
 
 export * from './utilities';
+
+export * from './elements/cfpb-button';
+export * from './elements/cfpb-file-upload';

package/src/utilities/behavior/behavior.js

@@ -21,7 +21,8 @@
    </div>
    ========================================================================== */
 
-import { BEHAVIOR_PREFIX, JS_HOOK, contains } from '@cfpb/cfpb-design-system';
+import { BEHAVIOR_PREFIX, JS_HOOK } from '../standard-type.js';
+import { contains } from '../data-hook.js';
 
 /**
  * @param {string} behaviorSelector - Behavior type used to find the element

package/src/utilities/behavior/flyout-menu.js

@@ -1,10 +1,7 @@
-import {
-  BEHAVIOR_PREFIX,
-  JS_HOOK,
-  BaseTransition,
-  EventObserver,
-  checkBehaviorDom,
-} from '@cfpb/cfpb-design-system';
+import { BaseTransition } from '../transition/base-transition.js';
+import { EventObserver } from '../event-observer.js';
+import { checkBehaviorDom } from '../behavior/behavior.js';
+import { BEHAVIOR_PREFIX, JS_HOOK } from '../standard-type.js';
 
 const BASE_CLASS = BEHAVIOR_PREFIX + 'flyout-menu';
 const SEL_PREFIX = '[' + JS_HOOK + '=' + BASE_CLASS;

package/src/utilities/transition/alpha-transition.js

@@ -1,4 +1,5 @@
-import { BaseTransition, EventObserver } from '@cfpb/cfpb-design-system';
+import { BaseTransition } from '../transition/base-transition.js';
+import { EventObserver } from '../event-observer.js';
 
 // Exported constants.
 const CLASSES = {

package/src/utilities/transition/max-height-transition.js

@@ -1,4 +1,5 @@
-import { BaseTransition, EventObserver } from '@cfpb/cfpb-design-system';
+import { BaseTransition } from '../transition/base-transition.js';
+import { EventObserver } from '../event-observer.js';
 
 // Exported constants.
 const CLASSES = {

package/src/utilities/transition/move-transition.js

@@ -1,4 +1,5 @@
-import { BaseTransition, EventObserver } from '@cfpb/cfpb-design-system';
+import { BaseTransition } from '../transition/base-transition.js';
+import { EventObserver } from '../event-observer.js';
 
 // Exported constants.
 const CLASSES = {