@aquera/nile-elements 0.0.3-1 → 0.0.3-2

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

@@ -34,7 +34,7 @@ export class NileRadioGroup extends NileElement {
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   @state() private hasButtonGroup = false;
-  @state() private errorMessage = '';
+
   @state() defaultValue = '';
 
   /**
@@ -43,9 +43,6 @@ export class NileRadioGroup extends NileElement {
    */
   @property() label = '';
 
-  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
   /** The name of the radio group, submitted as a name/value pair with form data. */
   @property() name = 'option';
 
@@ -69,6 +66,10 @@ export class NileRadioGroup extends NileElement {
   /** Used to disabled or not */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -203,7 +204,8 @@ export class NileRadioGroup extends NileElement {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
 
     const defaultSlot = html`
       <slot
@@ -241,7 +243,6 @@ export class NileRadioGroup extends NileElement {
 
         <div part="form-control-input" class="form-control-input">
           <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
             <label class="radio-group__validation">
               <input
                 type="text"
@@ -261,15 +262,24 @@ export class NileRadioGroup extends NileElement {
             <div class="${this.labelInline ? `form-control--inline-radio`:``}"> ${defaultSlot}</div> `}
         </div>
 
-        <slot
-          name="help-text"
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? 'false' : 'true'}
-        >
-          ${this.helpText}
-        </slot>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
+
       </fieldset>
     `;
   }

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

@@ -36,16 +36,20 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    color: #333333;
-    margin-bottom: 0.75rem;
+    margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
-
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 1rem;
+    font-size: 14px;
   }
 
-
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
@@ -63,7 +67,6 @@ export const styles = css`
     font-size: 0.875rem;
   }
 
-
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
     margin-top: 0.25rem;
@@ -127,6 +130,11 @@ export const styles = css`
     padding: 0;
     margin: 0;
     -webkit-appearance: none;
+    font-family: var(--nile-font-family-serif);
+  }
+
+  .select__display-input::placeholder {
+    font-family: var(--nile-font-family-serif);
   }
 
   .select:not(.select--disabled):hover .select__display-input {
@@ -284,7 +292,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: #005EA6;
+    color: #005ea6;
     border: none;
     background: none;
     padding: 0;
@@ -333,11 +341,11 @@ export const styles = css`
     max-height: var(--auto-size-available-height);
   }
 
-  .select__options{
+  .select__options {
     padding-top: 10px;
   }
 
-  .select__options{
+  .select__options {
     padding: 5px;
     margin: 4px;
     font-size: 14px;

package/src/nile-select/nile-select.ts

@@ -150,6 +150,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -190,8 +194,6 @@ export class NileSelect extends NileElement implements NileFormControl {
    */
   @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';
 
-  /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
@@ -819,11 +821,12 @@ export class NileSelect extends NileElement implements NileFormControl {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
     const searchValue = this.searchValue || '';
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
       <div
@@ -1057,15 +1060,24 @@ export class NileSelect extends NileElement implements NileFormControl {
           </nile-popup>
         </div>
 
-        <slot
-          name="help-text"
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? 'false' : 'true'}
-        >
-          ${this.helpText}
-        </slot>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
+
       </div>
     `;
   }

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

@@ -19,6 +19,13 @@ export default css`
   .nile-slide-toggle__label {
     margin-left: 2px;
     font-size: 14px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .nile-slide-toggle__switch input {

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -9,6 +9,10 @@ export class NileSlideToggle extends LitElement {
   @property({ type: String }) label = '';
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   toggleValue() {
     this.isChecked = !this.isChecked;
     this.dispatchEvent(
@@ -17,6 +21,9 @@ export class NileSlideToggle extends LitElement {
   }
 
   public render() {
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
     return html`
     <div class="nile-slide-toggle">
       <label class="nile-slide-toggle__switch">
@@ -31,6 +38,23 @@ export class NileSlideToggle extends LitElement {
         <slot>${this.label}</slot>
       </span>
     </div>
+    ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
     `;
   }
 }

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

@@ -18,10 +18,12 @@ export const styles = css`
   .tag {
     display: flex;
     align-items: center;
-    border: solid 1px;
+    border: solid 2px;
     line-height: 1;
     white-space: nowrap;
     user-select: none;
+    border-radius: 4px;
+    gap: 6px;
   }
 
   .tag__remove::part(base) {
@@ -34,9 +36,14 @@ export const styles = css`
    */
 
   .tag--primary {
-    background-color: hsl(204 100% 97.1%);
-    border-color: hsl(200.6 94.4% 86.1%);
-    color: hsl(201 90% 27.5%);
+    background: #005EA6;
+    border-color: #005EA6;
+    border: 2px solid  #005EA6;
+    color: #FFF;
+  }
+
+  .tag--primary:hover {
+    border: 2px solid rgba(0, 94, 166, 0.50);
   }
 
   .tag--primary:active > nile-icon-button {
@@ -44,71 +51,82 @@ export const styles = css`
   }
 
   .tag--success {
-    background-color: hsl(138.5 76.5% 96.7%);
-    border-color: hsl(141 78.9% 85.1%);
-    color: hsl(142.8 64.2% 24.1%);
+    background: #A5F3E1;
+    border: 2px solid #A5F3E1;
+    color: #000;
+  }
+
+  .tag--success:hover {
+    border: 2px solid #43E5C0;
   }
 
   .tag--success:active > nile-icon-button {
     color: hsl(142.1 76.2% 36.3%);
   }
 
-  .tag--neutral {
-    background-color: #e5e9eb;
-    border-color: #e5e9eb;
-    color: hsl(240 3.7% 15.9%);
+  .tag--normal {
+    background: #E5E9EB;
+    border: 2px solid #E5E9EB;
+    color: #000;
+  }
+
+  .tag--normal:hover {
+    border: 2px solid #C7CED4;
   }
 
-  .tag--neutral:active > nile-icon-button {
+
+  .tag--normal:active > nile-icon-button {
     color: hsl(240 5.2% 33.9%);
   }
 
   .tag--warning {
-    background-color: hsl(48 100% 96.1%);
-    border-color: hsl(48 96.6% 76.7%);
-    color: hsl(26 90.5% 37.1%);
+    background: #F3E0A5;
+    border: 2px solid #F3E0A5;
+    color: #000;
+  }
+
+  .tag--warning:hover {
+    border: 2px solid #E5BF43;
   }
 
   .tag--warning:active > nile-icon-button {
     color: hsl(32.1 94.6% 43.7%);
   }
 
-  .tag--danger {
-    background-color: hsl(0 85.7% 97.3%);
-    border-color: hsl(0 96.3% 89.4%);
-    color: hsl(0 70% 35.3%);
+
+  .tag--error {
+    background: #F3A5AA;
+    border: 2px solid #F3A5AA;
+    color: #000;
+  }
+
+  .tag--error:hover {
+    border: 2px solid #E5434D;
   }
 
-  .tag--danger:active > nile-icon-button {
+  .tag--error:active > nile-icon-button {
     color: hsl(0 72.2% 50.6%);
   }
 
-  /*
-   * Size modifiers
-   */
+  .tag--info {
+    background: #A5D3F3;
+    border: 2px solid #A5D3F3;
+    color: #000000;
+  }
 
-  .tag--small {
-    font-size: 0.75rem;
-    height: calc(1.875rem * 0.8);
-    line-height: calc(1.875rem - 1px * 2);
-    border-radius: 0.25rem;
-    padding: 0 0.5rem;
+  .tag--info:hover {
+    border: 2px solid #42A3E5;
   }
 
-  .tag--medium {
-    font-size: 0.875rem;
-    height: calc(2.5rem * 0.8);
-    line-height: calc(2.5rem - 1px * 2);
-    border-radius: 0.25rem;
-    padding: 0 0.75rem;
+  .tag--info:active > nile-icon-button {
+    color: hsl(0 72.2% 50.6%);
   }
 
-  .tag--large {
-    font-size: 1rem;
-    height: calc(3.125rem * 0.8);
-    line-height: calc(3.125rem - 1px * 2);
-    border-radius: 0.25rem;
-    padding: 0 1rem;
+
+  .tag--medium {
+    font-size: 14px;
+    height: 26px;
+    padding: 0 0.75rem;
   }
 
   .tag__remove {
@@ -122,6 +140,15 @@ export const styles = css`
   .tag--pill {
     border-radius: 9999px;
   }
+
+  .tag__prefix {
+  padding: 3px 6px;
+}
+
+ .tag__content {
+  font-size: 14px;
+}
+
 `;
 
 export default [styles];

package/src/nile-tag/nile-tag.ts

@@ -49,10 +49,10 @@ export class NileTag extends NileElement {
   @property({ reflect: true }) variant:
     | 'primary'
     | 'success'
-    | 'neutral'
+    | 'normal'
     | 'warning'
-    | 'danger'
-    | 'text' = 'neutral';
+    | 'error'
+    | 'info' = 'normal';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -77,10 +77,10 @@ export class NileTag extends NileElement {
           // Types
           'tag--primary': this.variant === 'primary',
           'tag--success': this.variant === 'success',
-          'tag--neutral': this.variant === 'neutral',
+          'tag--normal': this.variant === 'normal',
           'tag--warning': this.variant === 'warning',
-          'tag--danger': this.variant === 'danger',
-          'tag--text': this.variant === 'text',
+          'tag--error': this.variant === 'error',
+          'tag--info': this.variant === 'info',
 
           // Sizes
           'tag--small': this.size === 'small',
@@ -92,14 +92,17 @@ export class NileTag extends NileElement {
           'tag--removable': this.removable,
         })}
       >
-        <slot part="content" class="tag__content"></slot>
+
+        <slot name="prefix" part="prefix" class="tag__prefix"></slot>
+
+        <slot  part="content" class="tag__content"></slot>
 
         ${this.removable
           ? html`
               <nile-icon-button
                 part="remove-button"
                 exportparts="base:remove-button__base"
-                name="error"
+                name="close"
                 library="system"
                 label="remove"
                 class="tag__remove"

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

@@ -22,8 +22,14 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    color: var(--nile-colors-dark-900);
     margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
@@ -113,7 +119,7 @@ export const styles = css`
 
   .textarea--standard.textarea--focused:not(.textarea--disabled)
     .textarea__control {
-    color: #333;
+      color: #000000;
   }
 
   .textarea--standard.textarea--disabled {

package/src/nile-textarea/nile-textarea.ts

@@ -267,7 +267,9 @@ export class NileTextarea extends NileElement  {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
       <div
@@ -335,23 +337,23 @@ export class NileTextarea extends NileElement  {
           </div>
         </div>
 
-        <slot
-          name="help-text"
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? 'false' : 'true'}
-        >
-          ${this.helpText}
-        </slot>
-        <slot
-          name="error-message"
-          part="form-control-error-message"
-          id="error-message"
-          class="form-control__error-message"
-        >
-          ${this.errorMessage}
-        </slot>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
       </div>
     `;
   }