@aquera/nile-elements 0.0.69 → 0.0.70

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -61,4 +61,5 @@ export { NileEmptyState } from './nile-empty-state';
 export { NileHero } from './nile-hero';
 export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
-export { NileHeroHeader } from './nile-hero-header';
+export { NileHeroHeader } from './nile-hero-header';
+export { NileFormatDate } from './nile-format-date';

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

@@ -28,7 +28,7 @@ export const styles = css`
   :host {
     --border-color: var(--nile-card-color-border);
     --border-radius: 8px;
-    --border-width: 1px;
+    --border-width: 0.5px;
     --padding: 18px;
     display: inline-block;
   }
@@ -36,11 +36,24 @@ export const styles = css`
   .card {
     display: flex;
     flex-direction: column;
+    justify-items: strecth;
     background-color: var(--nile-colors-white-base);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);
-    padding: var(--nile-type-scale-4);
+    min-width: 273px;
+    max-width: 350px;
+    overflow: hidden;
+  }
+
+  .body__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px 0 16px;
+  }
+
+  .card__header {
+    display: block;
   }
 
   .card__body {
@@ -48,8 +61,14 @@ export const styles = css`
   }
 
   .card__footer {
+    margin-top: 12px;
     display: block;
-    margin-top: var(--nile-type-scale-4);
+    box-sizing: border-box;
+    align-content: center;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: #f9fafb;
+    height: 40px;
   }
 
   .card:not(.card--has-footer) .card__footer {

package/src/nile-card/nile-card.ts

@@ -5,15 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-card.css';
+import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
 import NileElements from '../internal/nile-element';
 import { CSSResultGroup } from 'lit';
 
-
 /**
  * Nile icon component.
  *
@@ -22,7 +27,6 @@ import { CSSResultGroup } from 'lit';
  */
 @customElement('nile-card')
 export class NileCard extends NileElements {
-
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
@@ -36,15 +40,22 @@ export class NileCard extends NileElements {
           'card--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+        <div class="body__wrapper">
+          <slot name="header" part="header" class="card__header"></slot>
+          <slot part="body" class="card__body"></slot>
+        </div>
+
+        <slot
+          name="footer"
+          part="footer"
+          ?hidden="${!this.hasSlotController.test('footer')}"
+          class="card__footer"
+        ></slot>
       </div>
-      
     `;
   }
 }
 
-
 export default NileCard;
 
 declare global {

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

@@ -72,7 +72,7 @@ describe('NileCheckbox', () => {
     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('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');
@@ -143,4 +143,46 @@ describe('NileCheckbox', () => {
     const blurEvent = await oneEvent(el, 'blur');
     expect(blurEvent).to.exist;
   });
+
+  it('reflects checked attribute to property', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);
+    expect(el.checked).to.be.true;
+  });
+
+  it('reflects indeterminate attribute to property', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);
+    expect(el.indeterminate).to.be.true;
+  });
+
+  it('associates form using form attribute', async () => {
+    const el = await fixture(html`
+      <div>
+        <form id="test-form"></form>
+        <nile-checkbox form="test-form"></nile-checkbox>
+      </div>
+    `);
+    const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;
+    expect(checkbox).to.not.be.null;
+    expect(checkbox.getAttribute('form')).to.equal('test-form');
+  });
+
+  it('displays and hides help text correctly', async () => {
+    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text="test-help"></nile-checkbox>`);
+
+    // Initially, help text should not be shown
+    expect(el.showHelpText).to.be.false;
+
+    // Show the help text
+    el.showHelpText = true;
+    await el.updateComplete;
+    let helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
+    expect(helpTextIcon).to.exist;
+
+    // Hide the help text
+    el.showHelpText = false;
+    await el.updateComplete;
+    helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
+    expect(helpTextIcon).to.be.exist;
+  });
 });
+

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

@@ -35,7 +35,6 @@ import type { CSSResultGroup } from 'lit';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
- * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -113,10 +112,6 @@ export class NileCheckbox extends NileElement {
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  private toggleHelpText() {
-    this.showHelpText = !this.showHelpText;
-  }
-
   private handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;

package/src/nile-format-date/index.ts

@@ -0,0 +1 @@
+export { NileFormatDate } from './nile-format-date';

package/src/nile-format-date/nile-format-date.css.ts

@@ -0,0 +1,19 @@
+/**
+* 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';
+
+/**
+ * FormatDate CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+`;
+
+export default [styles];

package/src/nile-format-date/nile-format-date.ts

@@ -0,0 +1,133 @@
+/**
+ * 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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-format-date.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile format-date component.
+ *
+ * @tag nile-format-date
+ *
+ */
+@customElement('nile-format-date')
+export class NileFormatDate extends NileElement {
+  /**
+   * The styles for nile-format-date
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
+   * recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
+   * in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+   */
+  @property() date: Date | string = new Date();
+
+  /** The format for displaying the weekday. */
+  @property() weekday: 'narrow' | 'short' | 'long';
+
+  /** The format for displaying the era. */
+  @property() era: 'narrow' | 'short' | 'long';
+
+  /** The format for displaying the year. */
+  @property() year: 'numeric' | '2-digit';
+
+  /** The format for displaying the month. */
+  @property() month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+
+  /** The format for displaying the day. */
+  @property() day: 'numeric' | '2-digit';
+
+  /** The format for displaying the hour. */
+  @property() hour: 'numeric' | '2-digit';
+
+  /** The format for displaying the minute. */
+  @property() minute: 'numeric' | '2-digit';
+
+  /** The format for displaying the second. */
+  @property() second: 'numeric' | '2-digit';
+
+  /** The format for displaying the time. */
+  @property({ attribute: 'time-zone-name' }) timeZoneName: 'short' | 'long';
+
+  /** The time zone to express the time in. */
+  @property({ attribute: 'time-zone' }) timeZone: string;
+
+  /** The format for displaying the hour. */
+  @property({ attribute: 'hour-format' }) hourFormat: 'auto' | '12' | '24' =
+    'auto';
+
+  /** The separator for the date format. */
+  @property({ attribute: 'date-separator' }) dateSeparator: '-' | '/' = '-';
+
+  formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {
+    dateToFormat = new Date(dateToFormat);
+    const formatter = new Intl.DateTimeFormat('en-GB', options);
+    const parts = formatter.formatToParts(dateToFormat);
+    const formattedDate = parts.map(({ type, value }) => {
+      if (type === 'day' || type === 'month' || type === 'year') {
+        return value;
+      }
+      if (type === 'literal' && value === '/') {
+        return this.dateSeparator;
+      }
+      return value;
+    }).join('');
+    return formattedDate;
+  }
+
+  // formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {
+  //   dateToFormat = new Date(dateToFormat);
+  //   return new Intl.DateTimeFormat('en-GB', options).format(dateToFormat);
+  // }
+
+
+  render() {
+    const date = new Date(this.date);
+    const hour12 =
+      this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';
+
+    // Check for an invalid date
+    if (isNaN(date.getMilliseconds())) {
+      return undefined;
+    }
+
+    return html`
+      <time datetime=${date.toISOString()}>
+        ${this.formatDate(date, {
+          weekday: this.weekday,
+          era: this.era,
+          year: this.year,
+          month: this.month,
+          day: this.day,
+          hour: this.hour,
+          minute: this.minute,
+          second: this.second,
+          timeZoneName: this.timeZoneName,
+          timeZone: this.timeZone,
+          hour12: hour12,
+        })}
+      </time>
+    `;
+  }
+}
+	/* #endregion */
+
+export default NileFormatDate;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-format-date': NileFormatDate;
+  }
+}

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

@@ -259,11 +259,6 @@ export const styles = css`
 
   .input:hover:not(.input--disabled) .input__control {
     color: #000;
-    font-size: 14px;
-    line-height: 14px;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: 0.2px;
   }
 
   .input__control:focus {

package/src/nile-tab-group/nile-tab-group.ts

@@ -313,8 +313,8 @@ export class NileTabGroup extends NileElement {
     const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
     const offset = precedingTabs.reduce(
       (previous, current) => ({
-        left: previous.left + current.clientWidth + 24,
-        top: previous.top + current.clientHeight + 24
+        left: previous.left + current.clientWidth + 10,
+        top: previous.top + current.clientHeight + 10
       }),
       { left: 0, top: 0 }
     );

package/web-test-runner.config.mjs

@@ -38,4 +38,17 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
       timeout: 5000 // Increase the default timeout to 5 seconds
     }
   },
+
+  /** Coverage configuration */
+  coverageConfig: {
+    include: ['dist/src/**/*.js'],
+    exclude: ['dist/src/**/*.test.js'],
+    reporter: ['html', 'text-summary'],
+    thresholds: {
+      statements: 100,
+      branches: 100,
+      functions: 100,
+      lines: 100,
+    },
+  },
 });