@aquera/nile-elements 0.0.65 → 0.0.67

package/package.json

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

package/src/index.ts

@@ -57,3 +57,5 @@ export { NileTableBody } from './nile-table-body';
 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';

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

@@ -19,15 +19,15 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-style: normal;
     font-weight: 500;
-    color:var(--nile-colors-white-base);
+    color: var(--nile-colors-white-base);
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    border: 1px solid;
-    border-color: var(--nile-colors-neutral-500);
+    border: 0.5px solid;
+    border-color: rgba(0, 0, 0, 0.08);
   }
 
   .avatar {
@@ -70,34 +70,24 @@ export const styles = css`
     border-radius: 50%;
   }
 
-  .variant__yellow {
-    color: var(--nile-colors-yellow-700);
-    border-color: var(--nile-colors-yellow-500);
-    background: var(--nile-colors-yellow-400);
+  .variant__orange {
+    background: #e04f16;
   }
 
-  .variant__blue {
-    color: var(--nile-colors-blue-700);
-    border-color: var(--nile-colors-blue-500);
-    background: var(--nile-colors-blue-400);
+  .variant__pink {
+    background: #c11574;
   }
 
-  .variant__red {
-    color: var(--nile-colors-button-caution-pressed-border);
-    border-color: var(--nile-colors-red-500);
-    background: var(--nile-colors-red-400);
+  .variant__blue {
+    background: #3538cd;
   }
 
-  .variant__green {
-    color: var(--nile-colors-green-700);
-    border-color: var(--nile-colors-green-500);
-    background: var(--nile-colors-green-400);
+  .variant__light_blue {
+    background: #0086c9;
   }
 
-  .variant__neutral {
-    color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-500);
-    background: var(--nile-colors-dark-200);
+  .variant__green {
+    background: #079455;
   }
 `;
 

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

@@ -42,13 +42,15 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true }) name = '';
 
   /** Gives the default bg color  to the Avatar */
-  @property({ type: String, reflect: true }) color = '';
+  @property({ type: String, reflect: true,attribute: 'bg-color' }) bgColor = '';
 
-    /** Gives the default text color  to the Avatar */
-  @property({ type: String, reflect: true ,attribute:'text-color' }) textColor = '#fff';
+  /** Gives the default text color  to the Avatar */
+  @property({ type: String, reflect: true, attribute: 'text-color' })
+  textColor = '#fff';
 
-  /** Gives the default bg color  to the Avatar */
-  @property({ type: String, reflect: true ,attribute:'border-color'}) borderColor = 'transparent';
+  /** Gives the default border color  to the Avatar */
+  @property({ type: String, reflect: true, attribute: 'border-color' })
+  borderColor = 'rgba(0, 0, 0, 0.08)';
 
   /** Size of the Avatar */
   @property({ reflect: true }) size:
@@ -94,6 +96,7 @@ export class NileAvatar extends NileElement {
   private handleImageError(event: Event): void {
     const defaultInitials = this.generateInitials(this.name);
     const variant__code = this.generateVariantCode(defaultInitials);
+
     this.defaultAvatarContent = html`<div
       class=${classMap({
         text__avatar: true,
@@ -102,14 +105,14 @@ export class NileAvatar extends NileElement {
         avatar__large: this.size === 'large',
         avatar__extralarge: this.size === 'extralarge',
         avatar__rounded: this.isRounded,
-        variant__yellow: variant__code === 0 && !this.color,
-        variant__blue: variant__code === 1 && !this.color ,
-        variant__red: variant__code === 2 && !this.color ,
-        variant__green: variant__code === 3 && !this.color,
-        variant__neutral: variant__code === 4 && !this.color,
+        variant__orange: variant__code === 0 && !this.bgColor,
+        variant__pink: variant__code === 1 && !this.bgColor,
+        variant__blue: variant__code === 2 && !this.bgColor,
+        variant__light_blue: variant__code === 3 && !this.bgColor,
+        variant__green: variant__code === 4 && !this.bgColor,
       })}
-      style="background-color: ${this.color}; border-color: ${this
-        .borderColor}; color:${this.textColor}"
+      style="background-color: ${this.bgColor};color:${this
+        .textColor};border-color:${this.borderColor}"
     >
       ${defaultInitials
         ? defaultInitials
@@ -143,7 +146,6 @@ export class NileAvatar extends NileElement {
 
   /* #endregion */
 }
-// onerror="this.onerror=null;this.src='${defaultimg}';"
 
 export default NileAvatar;
 

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

@@ -306,6 +306,18 @@ export class NileButton extends NileElement implements NileFormControl {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;
 
+    const variantCaretColors = {
+      primary: 'white',
+      secondary: 'black',
+      tertiary: 'black',
+      caution: 'white',
+      ghost: 'black',
+      destructive: 'white',
+      'secondary-grey': 'black',
+      'secondary-blue': 'black',
+      'tertiary-blue': 'black',
+    };
+
     /* eslint-disable lit/no-invalid-html */
     /* eslint-disable lit/binding-positions */
     return html`
@@ -364,7 +376,7 @@ export class NileButton extends NileElement implements NileFormControl {
                 <nile-icon
                   part="caret"
                   class="button__caret"
-                  color="white"
+                  color="${variantCaretColors[this.variant]}"
                   name="arrowdown"
                 ></nile-icon>
               `

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

@@ -26,11 +26,10 @@ export const styles = css`
   }
 
   :host {
-    --border-color: var(--nile-card-color-border); /* for v2 */
+    --border-color: var(--nile-card-color-border);
     --border-radius: 8px;
     --border-width: 1px;
     --padding: 18px;
-    --footer-padding: var(--nile-card-footer-padding); /*for v2 */
     display: inline-block;
   }
 
@@ -41,26 +40,16 @@ export const styles = css`
     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);
   }
 
   .card__body {
     display: block;
-    padding: var(--padding);
-  }
-
-  .card--has-footer {
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
-    border-bottom: none;
   }
 
   .card__footer {
     display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--footer-padding);
-    border:1px solid var(--nile-card-footer-border-color);
-    border-width: var(--nile-card-footer-border-width);
-    border-radius:var(--nile-card-footer-border-radius);
-    background-color:var(--nile-card-footer-background-color);
+    margin-top: var(--nile-type-scale-4);
   }
 
   .card:not(.card--has-footer) .card__footer {

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

@@ -37,8 +37,9 @@ export class NileCard extends NileElements {
         })}
       >
         <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
       </div>
-      <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+      
     `;
   }
 }

package/src/nile-empty-state/index.ts

@@ -0,0 +1 @@
+export { NileEmptyState } from './nile-empty-state';

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -0,0 +1,131 @@
+/**
+* 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';
+
+/**
+ * EmptyState CSS
+ */
+export const styles = css`
+  :host {
+    display:inline-flex;
+    min-width:300px;
+    max-width:512px;
+    width:100%;
+  }
+
+  .empty-state--sm {
+    --nile-es-text-size:16px;
+    --nile-es-subtext-size:14px;
+    --nile-es-icon-size:48px;
+    --es-flat-option-border-radius:5px;
+    --nile-es-img-height:118px;
+  }
+
+  .empty-state--md {
+    --nile-es-text-size:18px;
+    --nile-es-subtext-size:14px;
+    --nile-es-icon-size:48px;
+    --es-flat-option-border-radius:5px;
+    --nile-es-img-height:128px;
+  }
+
+  .empty-state--lg {
+    --nile-es-text-size:20px;
+    --nile-es-subtext-size:16px;
+    --nile-es-icon-size:56px;
+    --es-flat-option-border-radius:10px;
+    --nile-es-img-height:160px;
+  }
+
+  .empty-state {
+    padding:1rem;
+    min-width:300px;
+    max-width:512px;
+    width:100%;
+    height:max-content;
+    display:flex;
+    flex-direction:column;
+    row-gap:2rem;
+  }
+
+  .empty-state__body {
+    row-gap:5px;
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between;
+    align-items:center;
+  }
+
+  .empty-state__body--content {
+    position:relative;
+  }
+
+  .empty-state__img__icon {
+    height: var(--nile-es-icon-size);
+    aspect-ratio:1 / 1;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: #34405466;
+  }
+
+  .empty-state__img__icon--abs {
+    position:absolute;
+    left: calc(50% - calc(var(--nile-es-icon-size) / 2));
+    top:calc(50% - calc(var(--nile-es-icon-size) / 2));
+  }
+
+  .empty-state__body--tonal {
+    background: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);
+    width: 100px;
+    height: 100px;
+    padding: 1rem;
+    border-radius: 50%;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+  }
+
+  .empty-state__body--flat {
+    margin:2rem;
+  }
+
+  .nile-flat-type-icon {
+    height:var(--nile-es-icon-size);
+    aspect-ratio:1 / 1;
+    border-radius: var(--es-flat-option-border-radius);
+
+    background-color: white;
+    display: grid;
+    place-items: center;
+    border: 1px solid #EAECF0;
+  }
+
+  .empty-state__text {
+    font-size: var(--nile-es-text-size);
+    font-weight: 600;
+    line-height: 28px;
+    text-align: center;
+  }
+
+  .empty-state__subtext {
+    font-size: var(--nile-es-subtext-size);
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color:#475467;
+  }
+
+  .empty-state-actions {
+    display:flex;
+    justify-content:center;
+    gap:1rem;
+  }
+`;
+
+export default [styles];

package/src/nile-empty-state/nile-empty-state.ts

@@ -0,0 +1,117 @@
+/**
+ * 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 { state, html, nothing, property, CSSResultArray, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-empty-state.css';
+import { HasSlotController } from '../internal/slot';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile empty-state component.
+ *
+ * @tag nile-empty-state
+ *
+ */
+@customElement('nile-empty-state')
+export class NileEmptyState extends NileElement {
+
+  /**
+   * The styles for nile-empty-state
+   * @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];
+  }
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    'actions'
+  );
+
+  @property() size: 'sm' | 'md' | 'lg' = 'md';
+
+  @property() variant:
+    | 'flat'
+    | 'content'
+    | 'tonal' = 'tonal';
+
+  @property() icon: string = 'error';
+
+  @property() text: String = 'Empty State';
+  @property() subText: String = 'No Data';
+
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    const hasContentSlot = this.hasSlotController.test('content');
+    return html`
+		<div class="${classMap({
+      'empty-state': true,
+      'empty-state--sm': this.size == 'sm',
+      'empty-state--md': this.size == 'md',
+      'empty-state--lg': this.size == 'lg'
+    })}">
+			<div class="${classMap({
+      'empty-state__body': true,
+    })}">
+			${this.variant == 'content' ? html`
+				<div class="empty-state__body--content">
+					<slot name="content"></slot>
+					${!this.icon ? nothing :
+          html`
+						<div class="${classMap({
+            'empty-state__img__icon': true,
+            'empty-state__img__icon--abs': hasContentSlot
+          })}">
+							<nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+						</div>`
+        }
+				</div>`: nothing
+      }
+				
+			${this.variant == 'tonal' ? html`
+				<div class="empty-state__body--tonal">
+					<nile-icon name="${this.icon}" size="40"></nile-icon>
+				</div>`: nothing
+      }
+
+			${this.variant == 'flat' ? html`
+				<div class="empty-state__body--flat">
+					<span class="nile-flat-type-icon">
+						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+					</span>
+				</div>`: nothing
+      }
+				<div class="empty-state__text">${this.text}</div>
+				<div class="empty-state__subtext">${this.subText}</div>
+			</div>
+
+			<div class="empty-state-actions">
+				<slot></slot>
+			</div>
+		</div>
+		`;
+  }
+
+  /* #endregion */
+}
+
+export default NileEmptyState;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-empty-state': NileEmptyState;
+  }
+}

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -17,7 +17,6 @@ export const styles = css`
   .nile-form-help-text {
     display: flex;
     align-items: center;
-    color: var(--nile-colors-dark-500);
     color: var(--nile-form-help-text-color);
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-form-help-text-font-size);

package/src/nile-hero/index.ts

@@ -0,0 +1 @@
+export { NileHero } from './nile-hero';

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

@@ -0,0 +1,71 @@
+/**
+* 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';
+
+/**
+ * Hero CSS
+ */
+export const styles = css`
+
+	:host {
+		min-height:var(--nile-hero-height);
+		width:100%;
+		position:relative;
+		display:block;
+		border-bottom: 1px solid #EAECF0;
+		background: linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+	}
+
+	.hero__body {
+		height:100%;
+	}
+
+	.hero__header {
+		display: flex;
+		align-items: center;
+		padding: var(--nile-hero-first-elements-padding);
+		gap: .75rem;
+	}
+
+	.icon__container {
+		height: 25px;
+		place-items: center;
+		display: grid;
+		aspect-ratio: 1 / 1;
+		border-radius: 8px;
+		border: 1px solid #EAECF0;
+		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
+	}
+
+	.hero__text {
+		color: var(--nile-hero-text-color);
+		font-size: var(--nile-hero-text-font-size);
+		font-style: normal;
+		font-weight: var(--nile-hero-text-font-weight);
+	}
+
+	.hero__slot {
+		padding: var(--nile-hero-first-elements-padding);
+	}
+
+	.hero__img__container {
+		height:100%;
+		width:max-content;
+		position: absolute;
+		right: 0;
+		top:0;
+	}
+
+	.hero__img {
+		object-fit:cover;
+		height:100%;
+		width:auto;
+	}
+`;
+
+export default [styles];

package/src/nile-hero/nile-hero.ts

@@ -0,0 +1,70 @@
+/**
+ * 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-hero.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile hero component.
+ *
+ * @tag nile-hero
+ *
+ */
+@customElement('nile-hero')
+export class NileHero extends NileElement {
+	@property({reflect:true}) icon:string='action'
+	@property({ reflect: true, attribute: 'img-src' }) imgSrc:string='';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText:string='Nile Hero';
+
+	/**
+	 * The styles for nile-hero
+	 * @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];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<div class="hero__body">
+				<div class="hero__header">
+					<span class="icon__container">
+						<nile-icon name="${this.icon}" ></nile-icon>
+					</span>
+					<span class="hero__text">${this.heroText}</span>
+				</div>
+				<div class="hero__slot">
+					<slot></slot>
+				</div>
+			</div>
+			<div class="hero__img__container">
+				<img src="${this.imgSrc}" class="hero__img">
+			</div>
+		`;
+	}
+
+	/* #endregion */
+}
+
+export default NileHero;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-hero': NileHero;
+  }
+}

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

@@ -100,7 +100,7 @@ export const styles = css`
   .input--standard {
     background-color: var(--nile-input-standard-background-color);
     border: solid 1px var(--nile-input-standard-border-color);
-    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);
   }
 
   .input--standard:hover:not(.input--disabled) {
@@ -110,7 +110,9 @@ export const styles = css`
 
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #005ea6;
+    border-color: #85aad1;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -129,7 +131,6 @@ export const styles = css`
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: hsl(240 5.2% 33.9%);
     color: var(--nile-input-standard-disabled-placeholder-font-color);
   }
 
@@ -149,9 +150,14 @@ export const styles = css`
     border-color: #fda29b;
   }
 
-  .input--standard.input--destructive:focus {
+  .input--standard.input--focused.input--destructive:not(.input--disabled) {
+    border: 1px solid #fda29b;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  .input--destructive:active {
     border: 1px solid #fda29b;
-    /* Focus rings/ring-error-shadow-xs */
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
@@ -247,8 +253,7 @@ export const styles = css`
   }
 
   .input__control::placeholder {
-    color: #7f7f7f;
-    color: #667085; /**for v2 */
+    color: #667085;
     user-select: none;
   }
 
@@ -283,9 +288,9 @@ export const styles = css`
 
   .input--standard:focus {
     border-radius: 4px;
-    border: 1px solid #85aad1; /**for v2 */
+    border: 1px solid #85aad1;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */
+      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
   }
 
   /*