@aquera/nile-elements 0.0.67 → 0.0.69

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -67,7 +67,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2",
-    "x": "^0.1.2"
+    "x": "^0.1.2",
+    "@web/test-runner-puppeteer": "0.16.0"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/plopfile.js

@@ -10,6 +10,11 @@ export default function (plop) {
       },
     ],
     actions: [
+      {
+        type: 'append',
+        path: 'src/index.ts',
+        templateFile: 'plop-templates/lit/litindex.ts.hbs',
+      },
       {
         type: 'add',
         path: 'src/nile-{{name}}/index.ts',

package/rollup.config.js

@@ -9,17 +9,16 @@ import glob from 'glob';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import commonjs from '@rollup/plugin-commonjs';
+import styles from 'rollup-plugin-styles';
 
 const { LERNA_PACKAGE_NAME } = process.env;
 const PACKAGE_ROOT_PATH = process.cwd();
 
-import styles from 'rollup-plugin-styles';
-
 export default [
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
-        // This remove `src/` as well as the file extension from each file, so e.g.
+        // This removes `src/` as well as the file extension from each file, so e.g.
         // src/nested/foo.js becomes nested/foo
         path.relative(
           'src',
@@ -69,7 +68,10 @@ export default [
     },
     plugins: [
       typescript(),
-      replace({ 'Reflect.decorate': 'undefined' }),
+      replace({
+        'Reflect.decorate': 'undefined',
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
       resolve(),
       terser({
         ecma: 2017,
@@ -95,7 +97,10 @@ export default [
     },
     plugins: [
       typescript(),
-      replace({ 'Reflect.decorate': 'undefined' }),
+      replace({
+        'Reflect.decorate': 'undefined',
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
       resolve(),
       terser({
         ecma: 2017,
@@ -111,5 +116,5 @@ export default [
       summary(),
       commonjs()
     ],
-    },
+  },
 ];

package/src/index.ts

@@ -58,4 +58,7 @@ export { NileTableHeaderItem } from './nile-table-header-item';
 export { NileAvatar } from './nile-avatar';
 export { NilePageHeader } from './nile-page-header';
 export { NileEmptyState } from './nile-empty-state';
-export { NileHero } from './nile-hero';
+export { NileHero } from './nile-hero';
+export { NileStepperItem } from './nile-stepper-item';
+export { NileStepper } from './nile-stepper';
+export { NileHeroHeader } from './nile-hero-header';

package/src/nile-avatar/nile-avatar.css.ts

@@ -13,12 +13,13 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
   }
+
   .text__avatar {
     box-sizing: border-box;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: var(--nile-font-family-serif);
     font-style: normal;
-    font-weight: 500;
+    font-weight: 600;
     color: var(--nile-colors-white-base);
     text-transform: uppercase;
     display: flex;
@@ -48,22 +49,29 @@ export const styles = css`
   .avatar__medium {
     width: var(--nile-spacing-3-x);
     height: var(--nile-spacing-3-x);
-    font-size: var(--nile-type-scale-1);
-    line-height: var(--nile-type-scale-1);
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .avatar__large {
     width: 32px;
     height: 32px;
-    font-size: 12.8px;
-    line-height: 12.8px;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .avatar__extralarge {
     height: 40px;
     width: 40px;
-    font-size: var(--nile-type-scale-3);
-    line-height: var(--nile-type-scale-3);
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .avatar__2xl {
+    height: 64px;
+    width: 64px;
+    font-size: 24px;
+    line-height: 32px;
   }
 
   .avatar__rounded {

package/src/nile-avatar/nile-avatar.ts

@@ -57,7 +57,7 @@ export class NileAvatar extends NileElement {
     | 'small'
     | 'medium'
     | 'large'
-    | 'extralarge' = 'medium';
+    | 'extralarge'|'2xl' = 'medium';
 
   /** Gives a border radius of 50% to the Avatar */
   @property({ type: Boolean, reflect: true }) isRounded = false;
@@ -104,6 +104,7 @@ export class NileAvatar extends NileElement {
         avatar__medium: this.size === 'medium',
         avatar__large: this.size === 'large',
         avatar__extralarge: this.size === 'extralarge',
+        avatar__2xl: this.size === '2xl',
         avatar__rounded: this.isRounded,
         variant__orange: variant__code === 0 && !this.bgColor,
         variant__pink: variant__code === 1 && !this.bgColor,

package/src/nile-badge/nile-badge.css.ts

@@ -15,20 +15,21 @@ export const styles = css`
   }
 
   .badge {
-    padding: 0 4px;
+    padding: 2px 6px;
     border-radius: 4px;
-    height: 16px;
-    font-size: 10.24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    height: 22px;
   }
 
   .badge__content {
     font-family: var(--nile-font-family-serif);
-    font-size: 10.24px;
+    font-size: 12px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
   }
 
@@ -168,6 +169,7 @@ export const styles = css`
   }
 
   .badge--rounded {
+    padding: 2px 8px;
     border-radius: 100px;
   }
 `;

package/src/nile-button/nile-button.css.ts

@@ -25,9 +25,7 @@ export const styles = css`
     border-style: solid;
     border-width: 1px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
@@ -39,12 +37,14 @@ export const styles = css`
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    padding: var(--nile-spacing-2-x);
-    gap: var(--nile-spacing-2-x);
+    font-size: 14px;
+    font-weight: 500;
     border-radius: var(--nile-radius-base-standard);
-    line-height: var(--nile-type-scale-3);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
-    height: 38px;
+    height: 40px;
   }
 
   .button::-moz-focus-inner {
@@ -76,49 +76,37 @@ export const styles = css`
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
-    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
-    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
-      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
 
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
@@ -617,9 +605,11 @@ export const styles = css`
   }
 
   .button--outline.button--secondary-blue:hover:not(.button--disabled),
-  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+  .button--outline.button--secondary-blue.button--checked:not(
+      .button--disabled
+    ) {
     color: #004678;
-    background-color: #EAF0F8;
+    background-color: #eaf0f8;
   }
 
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -629,7 +619,7 @@ export const styles = css`
   .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
     box-shadow: 0px;
   }
-  
+
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;

package/src/nile-button-toggle/nile-button-toggle.css.ts

@@ -16,10 +16,11 @@ export const styles = css`
 
   .nile-button-toggle {
     display: flex;
-    padding: 12px;
+    padding: 6px 16px 6px 14px;
     border: 1px solid var(--nile-button-toggle-border-color);
     cursor: pointer;
     border-radius: 4px;
+    font-weight: 500;
     color: #000;
     text-align: center;
     font-family: var(--nile-font-family-serif);
@@ -28,15 +29,17 @@ export const styles = css`
     letter-spacing: 0.2px;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    height: 40px;
+    box-sizing: border-box;
   }
 
   .nile-button-toggle:hover {
-    background:var(--nile-button-toggle-color-background-non-active-hover);
+    background: var(--nile-button-toggle-color-background-non-active-hover);
   }
 
   .nile-button-toggle:active {
-    background: #e5e9eb; 
+    background: #e5e9eb;
   }
 
   .nile-button-toggle__initial {
@@ -56,12 +59,14 @@ export const styles = css`
   }
 
   .nile-button-toggle__active {
-    background-color:var(--nile-button-toggle-color-background-active-standard);
+    background-color: var(
+      --nile-button-toggle-color-background-active-standard
+    );
     color: var(--nile-button-toggle-text-color-standard);
   }
 
   .nile-button-toggle__active:hover {
-    background-color:var(--nile-button-toggle-color-background-active-hover);
+    background-color: var(--nile-button-toggle-color-background-active-hover);
     color: var(--nile-button-toggle-text-color-hover);
   }
 

package/src/nile-button-toggle-group/nile-button-toggle-group.css.ts

@@ -1,19 +1,20 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * ButtonToggleGroup CSS
  */
 export const styles = css`
-	:host {
+  :host {
     display: inline-flex;
-	}
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 `;
 
 export default [styles];

package/src/nile-checkbox/nile-checkbox.css.ts

@@ -22,7 +22,7 @@ export const styles = css`
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: top;
+    align-items: stretch;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
@@ -30,6 +30,7 @@ export const styles = css`
   }
 
   .checkbox--medium {
+    padding-top: 2px;
     --toggle-size: var(--nile-type-scale-3);
     font-size: var(--nile-type-scale-3);
   }
@@ -44,7 +45,7 @@ export const styles = css`
     height: var(--nile-type-scale-3);
     border: solid 1px var(--nile-checkbox-color-border-standard);
     background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 4px;
+    border-radius: 3px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
@@ -110,20 +111,33 @@ export const styles = css`
     opacity: 0.3;
     cursor: not-allowed;
   }
-  
 
   .checkbox__label {
-    display: inline-block;
-    line-height: 14px;
-    font-size: 14px;
-    margin-inline-start: 0.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-family: var(--nile-font-family-serif);
+    margin-left: 8px;
     user-select: none;
-    margin-top: 2px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
     font-style: normal;
-    font-weight: 400;
     letter-spacing: 0.2px;
+    box-sizing: border-box;
+  }
+
+  .checkbox__label__text {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #344054;
+  }
+
+  .checkbox__sublabel__text {
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #475467;
   }
 
   :host([required]) .checkbox__label::after {

package/src/nile-checkbox/nile-checkbox.test.ts

@@ -0,0 +1,146 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-checkbox';
+import { NileCheckbox } from './nile-checkbox';
+
+describe('NileCheckbox', () => {
+  it('renders correctly with default properties', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('toggles checked state on click', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    input.click();
+    expect(el.checked).to.be.true;
+    input.click();
+    expect(el.checked).to.be.false;
+  });
+
+  it('emits nile-change event on click', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    setTimeout(() => input.click());
+    const event = await oneEvent(el, 'valueChange');
+    expect(event.detail.checked).to.be.true;
+  });
+
+  it('handles focus and blur events', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    // Focus the input and wait for the focus event
+    setTimeout(() => input.focus());
+    const focusEvent = await oneEvent(el, 'focus');
+    expect(focusEvent).to.exist;
+
+    // Blur the input and wait for the blur event
+    setTimeout(() => input.blur());
+    const blurEvent = await oneEvent(el, 'blur');
+    expect(blurEvent).to.exist;
+  });
+
+  it('handles indeterminate state', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    expect(input.indeterminate).to.be.true;
+
+    el.checked = true;
+    el.indeterminate = false;
+    await el.updateComplete;
+    expect(input.indeterminate).to.be.false;
+    expect(input.checked).to.be.true;
+  });
+
+  it('reflects properties to attributes', async () => {
+    const el = await fixture<NileCheckbox>(html`
+      <nile-checkbox
+        name="test-name"
+        title="test-title"
+        disabled
+        required
+        label="test-label"
+        sub-label="test-sublabel"
+        help-text="test-help"
+        error-message="test-error"
+      ></nile-checkbox>
+    `);
+
+    expect(el.getAttribute('name')).to.equal('test-name');
+    expect(el.getAttribute('title')).to.equal('test-title');
+    expect(el.getAttribute('disabled')).to.equal('');
+    expect(el.getAttribute('required')). to.equal('');
+    expect(el.getAttribute('label')).to.equal('test-label');
+    expect(el.getAttribute('sub-label')).to.equal('test-sublabel');
+    expect(el.getAttribute('help-text')).to.equal('test-help');
+    expect(el.getAttribute('error-message')).to.equal('test-error');
+  });
+
+  it('displays help text when showHelpText is true', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text="test-help"></nile-checkbox>`);
+    el.showHelpText = true;
+    await el.updateComplete;
+
+    const helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
+    expect(helpTextIcon).to.exist;
+  });
+
+  it('updates host class based on helpText', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    el.helpText = 'test-help';
+    await el.updateComplete;
+
+    expect(el.classList.contains('full-width')).to.be.true;
+
+    el.helpText = '';
+    await el.updateComplete;
+
+    expect(el.classList.contains('full-width')).to.be.false;
+  });
+
+  it('emits custom events on connected and disconnected', async () => {
+    const el = document.createElement('nile-checkbox');
+
+    // Wait for the connected event
+    const initEventPromise = oneEvent(el, 'nile-init');
+    document.body.appendChild(el);
+    const initEvent = await initEventPromise;
+    expect(initEvent).to.exist;
+
+    // Wait for the disconnected event
+    const destroyEventPromise = oneEvent(el, 'nile-destroy');
+    document.body.removeChild(el);
+    const destroyEvent = await destroyEventPromise;
+    expect(destroyEvent).to.exist;
+  });
+
+  it('handles required attribute', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);
+    const input = el.shadowRoot!.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    expect(input.required).to.be.true;
+  });
+
+  it('simulates click using click method', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+    el.click();
+    expect(el.checked).to.be.true;
+  });
+
+  it('sets and removes focus using focus and blur methods', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
+
+    // Call the focus method and wait for the focus event
+    setTimeout(() => el.focus());
+    const focusEvent = await oneEvent(el, 'focus');
+    expect(focusEvent).to.exist;
+
+    // Call the blur method and wait for the blur event
+    setTimeout(() => el.blur());
+    const blurEvent = await oneEvent(el, 'blur');
+    expect(blurEvent).to.exist;
+  });
+});

package/src/nile-checkbox/nile-checkbox.ts

@@ -84,6 +84,10 @@ export class NileCheckbox extends NileElement {
   /** Label, declared this property for backward compatibility of old component  */
   @property({ type: String, reflect: true }) label = '';
 
+  /** Sublabel, declared this property for backward compatibility of old component  */
+  @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel =
+    '';
+
   /**
    * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
    * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -93,11 +97,11 @@ export class NileCheckbox extends NileElement {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue('checked') defaultChecked = false;
 
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
-  @property({ type: Boolean }) showHelpText = false;
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ type: Boolean }) showHelpText = false;
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
@@ -258,7 +262,8 @@ export class NileCheckbox extends NileElement {
         </span>
 
         <div part="label" class="checkbox__label">
-          ${typeof this.label === 'boolean' ? '' : this.label}
+          ${this.label ? html`<span class="checkbox__label__text">${this.label}</span>` : ``}
+          ${this.label && this.subLabel ? html`<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
           <slot></slot>
         </div>
       </label>
@@ -273,7 +278,6 @@ export class NileCheckbox extends NileElement {
             </nile-tooltip>
           `
         : ``}
-
       ${hasErrorMessage
         ? html`
             <nile-form-error-message

package/src/nile-chip/nile-chip.ts

@@ -84,9 +84,9 @@ export class NileChip extends NileElement {
 
   @property({ type: Array }) errorIndexes: number[] = [];
 
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
 
   @watch('autoCompleteOptions')