@aquera/nile-elements 0.0.4-2 → 0.0.4-4

package/package.json

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

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

@@ -11,8 +11,9 @@ import { css } from 'lit-element';
  * Checkbox CSS
  */
 export const styles = css`
-   :host {
+  :host {
     display: inline-block;
+    width: 100%;
   }
 
   .checkbox {
@@ -41,8 +42,10 @@ export const styles = css`
     border: solid 1px var(--nile-colors-neutral-700);
     background-color: var(--nile-colors-white-base);
     border-radius: 4px;
-    transition: var(--nile-transition-duration-default border-color), var(--nile-transition-duration-default) background-color,
-    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default box-shadow);
+    transition: var(--nile-transition-duration-default border-color),
+      var(--nile-transition-duration-default) background-color,
+      var(--nile-transition-duration-default) color,
+      var(--nile-transition-duration-default box-shadow);
   }
 
   .checkbox__input {
@@ -53,20 +56,22 @@ export const styles = css`
     pointer-events: none;
   }
 
-
   /* svg {
       display:none !important;
   } */
 
   /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
+    .checkbox__control:hover {
     background: var(--nile-colors-primary-100);
     border: 1px solid var(--nile-colors-primary-600);
     border-radius: 4px;
   }
 
   /* Focus */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
+    .checkbox__input:focus-visible
+    ~ .checkbox__control {
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
@@ -80,14 +85,19 @@ export const styles = css`
 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
+    .checkbox__control:hover {
     background: var(--nile-colors-primary-900);
     border: 1px solid var(--nile-colors-primary-900);
   }
 
   /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+  .checkbox.checkbox--checked:not(.checkbox--disabled)
+    .checkbox__input:focus-visible
+    ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
+    .checkbox__input:focus-visible
+    ~ .checkbox__control {
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
@@ -114,12 +124,21 @@ export const styles = css`
 
   :host([required]) .checkbox__label::after {
     content: '*';
-    margin-inline-start: -2px
+    margin-inline-start: -2px;
   }
 
-  :host {
+  .checkbox__checked-icon {
     --nile-svg-stroke: white;
   }
+
+  .checkbox__indeterminate-icon {
+    --nile-svg-stroke: white;
+  }
+
+  .checkbox__icon {
+    float: right;
+    cursor: pointer;
+  }
 `;
 
 export default [styles];

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

@@ -95,6 +95,8 @@ export class NileCheckbox extends NileElement {
 
   @property({ attribute: 'help-text' }) helpText = '';
 
+  @property({ type: Boolean }) showHelpText = false;
+
   @property({ attribute: 'error-message' }) errorMessage = '';
 
   /**
@@ -107,6 +109,10 @@ 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;
@@ -232,23 +238,21 @@ export class NileCheckbox extends NileElement {
         </div>
       </label>
 
-      ${
-          hasHelpText
-            ? html`
-                <nile-form-help-text>${this.helpText}</nile-form-help-text>
-              `
-            : ``
-        }
-
-        ${
-          hasErrorMessage
-            ? html`
-                <nile-form-error-message
-                  >${this.errorMessage}</nile-form-error-message
-                >
-              `
-            : ``
-        }
+      ${hasHelpText
+        ? html` <nile-icon name="question" @click=${this.toggleHelpText} class="checkbox__icon"></nile-icon> `
+        : ``}
+
+      ${hasHelpText && this.showHelpText
+        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+        : ``}
+
+      ${hasErrorMessage
+        ? html`
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `
+        : ``}
     `;
   }
 }