feat(ui-library): adding percentage warning limit filling text area t…

packages/ui-library/src/components/internal-components/form-hint/index.css.ts

@@ -0,0 +1,15 @@
+import { css } from "lit";
+
+export const styleCustom = css`
+  :host {
+    display: inline-flex;
+    flex-shrink: 0;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .blr-form-hint {
+    width: 100%;
+    display: flex;
+  }
+`;

packages/ui-library/src/components/internal-components/form-hint/index.ts

@@ -7,10 +7,11 @@ import { SizelessIconType } from '@boiler/icons';
 import { form } from '../../../foundation/semantic-tokens/form.css';
 import { calculateIconName } from '../../../utils/calculate-icon-name';
 import { counter } from '../../../foundation/component-tokens/feedback.css';
+import { styleCustom } from './index.css';
 
 @customElement('blr-form-hint')
 export class BlrFormHint extends LitElement {
-  static styles = [counter, form];
+  static styles = [counter, styleCustom, form];
 
   @property() message?: string;
   @property() icon?: SizelessIconType;
@@ -31,16 +32,18 @@ export class BlrFormHint extends LitElement {
     });
 
     return html`<div class=${classes}>
-      <div class="icon-wrapper">
-        ${BlrIconRenderFunction({
-          icon: calculateIconName(this.icon, 'sm'),
-          size: 'sm',
-          classMap: iconClasses,
-          hideAria: true,
-        })}
-      </div>
-      <div class="label-wrapper">
-        <span class="blr-caption-text">${this.message}</span>
+      <div class="hint-container">
+        <div class="icon-wrapper">
+          ${BlrIconRenderFunction({
+            icon: calculateIconName(this.icon, 'sm'),
+            size: 'sm',
+            classMap: iconClasses,
+            hideAria: true,
+          })}
+        </div>
+        <div class="label-wrapper">
+          <span class="blr-caption-text">${this.message}</span>
+        </div>
       </div>
       ${this.childElement}
     </div>`;

packages/ui-library/src/components/loader/index.css.ts

@@ -1,14 +1,9 @@
-import { css } from 'lit';
+import { css } from "lit";
 
 export const styleCustom = css`
   :host {
     display: inline-flex;
     flex-shrink: 0;
-  }
-
-  .blr-loader {
-    position: relative;
-    display: inline-flex;
-    flex-shrink: 0;
+    width: 100%;
   }
 `;

packages/ui-library/src/components/textarea/index.css.ts

@@ -7,15 +7,19 @@ export const styleCustom = css`
     max-width: 100%;
   }
 
-  .blr-textarea {
+  :host(.parent-width) {
+    width: 100%;
+  }
+
+  .textarea-input-control {
     resize: none;
     display: block;
     max-width: 100%;
     word-break: break-all;
     width: 100%;
   }
 
-  .blr-textarea.resizeable {
+  .textarea-input-control.resizeable {
     resize: both;
   }
 `;

packages/ui-library/src/components/textarea/index.stories.ts

@@ -19,6 +19,32 @@ export default {
       options: [...getIconName(IconKeys)],
       control: { type: 'select' },
     },
+    warningLimitType: {
+      name: 'Warning Limit Type',
+      options: ['warningLimitInt', 'warningLimitPer'],
+      control: {
+        type: 'radio',
+        labels: {
+          warningLimitInt: 'Whole Number',
+          warningLimitPer: 'Percentage',
+        },
+      },
+    },
+    // Only enabled if warningLimitType is Whole Number
+    warningLimitInt: {
+      control: 'number',
+      name: 'Warning Limit (Whole Number)',
+      if: { arg: 'warningLimitType', eq: 'warningLimitInt' },
+      description: 'Please provide a whole number',
+    },
+    // Only enabled if warningLimitType is Percentage
+    warningLimitPer: {
+      control: { type: 'range', min: 1, max: 100, step: 1 },
+      name: 'Warning Limit (Percentage)',
+      if: { arg: 'warningLimitType', eq: 'warningLimitPer' },
+      description:
+        'Please provide a percentage. Warning limit is calculated based on the percentage of the maximum length reached ((maximum length / 100) * percentage value)',
+    },
   },
   parameters: {
     viewMode: 'docs',
@@ -34,6 +60,9 @@ export const BlrTextarea = ({
   disabled,
   size,
   maxLength,
+  warningLimitType,
+  warningLimitInt,
+  warningLimitPer,
   cols,
   rows,
   errorMessage,
@@ -58,6 +87,9 @@ export const BlrTextarea = ({
       disabled,
       size,
       maxLength,
+      warningLimitType,
+      warningLimitInt,
+      warningLimitPer,
       cols,
       rows,
       errorMessage,
@@ -82,16 +114,19 @@ BlrTextarea.args = {
   labelAppendix: '(Optional)',
   size: 'md',
   value: 'Rindfleischetikettierungsüberwachungsaufgabenübertragunsgesetz',
-  minLength: '0',
-  maxLength: '140',
-  cols: '20',
-  rows: '5',
+  minLength: 0,
+  maxLength: 140,
+  warningLimitType: 'warningLimitInt',
+  warningLimitInt: 105,
+  warningLimitPer: 75,
+  cols: 20,
+  rows: 5,
   errorMessage: 'OMG it`s an error',
   placeholder: 'Type your message here ..',
   required: false,
   disabled: false,
   readonly: false,
-  hintText: 'Rindfleischetikettierungsüberwachungsaufgabenübertragunsgesetz',
+  hintText: 'Rindfleischetikettierungs',
   hasError: false,
   isResizeable: true,
   hintIcon: 'blrInfo',

packages/ui-library/src/components/textarea/index.test.ts

@@ -18,16 +18,19 @@ const sampleParams: BlrTextareaType = {
   hintText: 'Rindfleischetikettierungsüberwachungsaufgabenübertragunsgesetz',
   hintIcon: 'blrInfoLg',
   showHint: true,
+  warningLimitType: 'warningLimitInt',
+  warningLimitInt: 105,
+  warningLimitPer: 75,
 };
 
 describe('blr-textarea', () => {
   it('is having a textarea containing the right className', async () => {
     const element = await fixture(BlrTextareaRenderFunction(sampleParams));
-
-    const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement);
+    const inputWrapper = querySelectorDeep('.input-wrapper', element.getRootNode() as HTMLElement);
+    const textarea = querySelectorDeep('textarea', inputWrapper?.getRootNode() as HTMLElement);
     const className = textarea?.className;
 
-    expect(className).to.contain('blr-textarea');
+    expect(className).to.contain('textarea-input-control');
   });
 
   it('is is showing random placeholder', async () => {
@@ -94,12 +97,8 @@ describe('blr-textarea', () => {
 
     expect(rect).have.property('width');
     expect(rect).have.property('height');
-    // expect(rect).have.property('x');
-    // expect(rect).have.property('y');
 
     expect(rect?.width).to.be.greaterThan(0);
     expect(rect?.height).to.be.greaterThan(0);
-    // expect((rect?.x || 0) + (rect?.width || 0)).not.to.be.lessThan(0);
-    // expect((rect?.y || 0) + (rect?.height || 0)).not.to.be.lessThan(0);
   });
 });

packages/ui-library/src/components/textarea/index.ts

@@ -2,10 +2,9 @@ import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { form } from '../../foundation/semantic-tokens/form.css';
-import { textarea } from '../../foundation/component-tokens/form.css';
+import { form, textarea } from '../../foundation/semantic-tokens/form.css';
 import { counter } from '../../foundation/component-tokens/feedback.css';
-import { FormSizesType } from '../../globals/types';
+import { FormSizesType, WarningLimits } from '../../globals/types';
 import { BlrFormLabelRenderFunction } from '../internal-components/form-label';
 import { BlrFormHintRenderFunction } from '../internal-components/form-hint';
 import { SizelessIconType } from '@boiler/icons';
@@ -28,6 +27,9 @@ export class BlrTextarea extends LitElement {
   @property() onBlur?: HTMLElement['blur'];
   @property() onFocus?: HTMLElement['focus'];
   @property() maxLength?: number;
+  @property() warningLimitType: WarningLimits = 'warningLimitInt';
+  @property() warningLimitInt = 105;
+  @property() warningLimitPer = 75;
   @property() pattern?: string;
   @property() hasError?: boolean;
   @property() errorMessage?: string;
@@ -75,34 +77,43 @@ export class BlrTextarea extends LitElement {
     const counterClasses = classMap({
       [`${this.size}`]: this.size,
       ['limit-reached']: this.count >= (this.maxLength || 0),
-      ['limit-close']: this.maxLength
-        ? this.count >= (this.maxLength / 100) * 75 && this.count < this.maxLength
-        : false,
+      ['limit-close-int']:
+        this.maxLength && this.warningLimitType === 'warningLimitInt'
+          ? this.count >= this.warningLimitInt && this.count < this.maxLength
+          : false,
+      ['limit-close-per']:
+        this.maxLength && this.warningLimitType === 'warningLimitPer'
+          ? this.count >= (this.maxLength / 100) * this.warningLimitPer && this.count < this.maxLength
+          : false,
     });
 
     return html`
-      <div class="${classes}">
-        ${BlrFormLabelRenderFunction({
-          labelText: this.label,
-          labelSize: this.size,
-          labelAppendix: this.labelAppendix,
-          forValue: this.textareaId,
-        })}
-        <textarea
-          class="blr-form-element blr-textarea ${textareaClasses}"
-          id="${this.textareaId || nothing}"
-          maxlength="${this.maxLength || nothing}"
-          cols="${this.cols || nothing}"
-          rows="${this.rows || nothing}"
-          placeholder="${this.placeholder || nothing}"
-          ?required="${this.required}"
-          ?disabled="${this.disabled}"
-          @input="${this.onChange}"
-          @focus="${this.onFocus}"
-          @select="${this.onSelect}"
-          @keyup="${this.updateCounter}"
-        >${this.value}</textarea>
-
+      <div class="${classes} blr-textarea">
+        <div class="label-wrapper">
+          ${BlrFormLabelRenderFunction({
+            labelText: this.label,
+            labelSize: this.size,
+            labelAppendix: this.labelAppendix,
+            forValue: this.textareaId,
+          })}
+        </div>
+        <div class="input-wrapper">
+          <textarea
+            class="blr-form-element textarea-input-control ${textareaClasses}"
+            id="${this.textareaId || nothing}"
+            maxlength="${this.maxLength || nothing}"
+            cols="${this.cols || nothing}"
+            rows="${this.rows || nothing}"
+            placeholder="${this.placeholder || nothing}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            @input="${this.onChange}"
+            @focus="${this.onFocus}"
+            @select="${this.onSelect}"
+            @keyup="${this.updateCounter}"
+          >${this.value}</textarea>
+        </div>
+        <div class="hint-wrapper">
           ${
             this.showHint
               ? html`
@@ -120,6 +131,7 @@ export class BlrTextarea extends LitElement {
                   <div class="blr-counter ${counterClasses}">${this.count}/${this.maxLength}</div>
                 </div>`
           }
+          </div>
         </div>
       </div>
     `;
@@ -137,6 +149,9 @@ export const BlrTextareaRenderFunction = ({
   disabled,
   size,
   maxLength,
+  warningLimitType,
+  warningLimitInt,
+  warningLimitPer,
   cols,
   rows,
   errorMessage,
@@ -152,10 +167,14 @@ export const BlrTextareaRenderFunction = ({
   value,
 }: BlrTextareaType) => {
   return html`<blr-textarea
+    class=${isResizeable ? nothing : `parent-width`}
     .textareaId=${textareaId}
     .label=${label}
     .size=${size}
     .maxLength=${maxLength}
+    .warningLimitType=${warningLimitType}
+    .warningLimitInt=${warningLimitInt}
+    .warningLimitPer=${warningLimitPer}
     .cols=${cols}
     .rows=${rows}
     .value=${value}

packages/ui-library/src/foundation/component-tokens/feedback.css.js

@@ -113,7 +113,8 @@ export const counter = css`
       background-color: ${Error.Surface};
     }
 
-    &.limit-close,
+    &.limit-close-int,
+    &.limit-close-per,
     &.warn {
       color: ${Warning.Text};
       border-color: ${Warning.SurfaceStroke};