fix(ui-library): added icon keys, type and visibility test (#280)

Author: ChristianHoffmannS2

packages/icons/icons-optimized/icons.ts

@@ -8211,6 +8211,121 @@ const blrWiFiXxs = (className: string) =>
     />
   </svg>`;
 
+const PureIconKeys = [
+  'blr360',
+  'blrArrowDown',
+  'blrArrowLeft',
+  'blrArrowRight',
+  'blrArrowUp',
+  'blrBag',
+  'blrBook',
+  'blrBookmark',
+  'blrBriefcase',
+  'blrCalendar',
+  'blrCalendarToday',
+  'blrCamera',
+  'blrCart',
+  'blrChat',
+  'blrCheckmark',
+  'blrChevronDown',
+  'blrChevronLeft',
+  'blrChevronRight',
+  'blrChevronUp',
+  'blrClock0000',
+  'blrClock0030',
+  'blrClock0100',
+  'blrClock0130',
+  'blrClock0300',
+  'blrClock0330',
+  'blrClock0430',
+  'blrClock0500',
+  'blrClock0700',
+  'blrClock0730',
+  'blrClock0900',
+  'blrClock0930',
+  'blrClock1100',
+  'blrClock1130',
+  'blrClose',
+  'blrCloud',
+  'blrCloudUpload',
+  'blrCompass',
+  'blrCopy',
+  'blrCrop',
+  'blrDislike',
+  'blrDocumentNew',
+  'blrDocumentTwo',
+  'blrDownload',
+  'blrDrag',
+  'blrEnvelopeClosed',
+  'blrEnvelopeOpen',
+  'blrEqual',
+  'blrErrorFilled',
+  'blrError',
+  'blrEye',
+  'blrEyeOff',
+  'blrEyeOn',
+  'blrFlag',
+  'blrFolder',
+  'blrFolderOpen',
+  'blrFolderOpenSide',
+  'blrForward',
+  'blrGlobe',
+  'blrHeart',
+  'blrHome',
+  'blrImage',
+  'blrInboxMessageMail',
+  'blrInfo',
+  'blrLike',
+  'blrLinkBroken',
+  'blrLink',
+  'blrLockClosed',
+  'blrLockOpen',
+  'blrMenu',
+  'blrMicrophone',
+  'blrMinus',
+  'blrMoreHorizontal',
+  'blrMore',
+  'blrMoreVertical',
+  'blrMusic',
+  'blrNotificationBellOff',
+  'blrNotificationBellOn',
+  'blrPause',
+  'blrPen',
+  'blrPhoneIncomingCall',
+  'blrPhone',
+  'blrPhoneOutgoingCall',
+  'blrPin',
+  'blrPlane',
+  'blrPlay',
+  'blrPlus',
+  'blrPrinter',
+  'blrProfile',
+  'blrRefresh2',
+  'blrRefresh',
+  'blrResizeIn',
+  'blrResizeOut',
+  'blrScissors',
+  'blrSearch',
+  'blrSelectionBoxOff',
+  'blrSelectionBoxOn',
+  'blrSelectionOff',
+  'blrSelectionOn',
+  'blrSend',
+  'blrSettingsCog',
+  'blrShare',
+  'blrShoppingBasket',
+  'blroothie',
+  'blrSoundMax',
+  'blrSoundMin',
+  'blrStar',
+  'blrTag',
+  'blrTrash',
+  'blrUpload',
+  'blrVideoCamera',
+  'blrVideo',
+  'blrWiFi',
+];
+
 export const IconMapping = {
   blr360Lg,
   blr360Md,
@@ -8877,5 +8992,9 @@ export const IconMapping = {
   blrWiFiXs,
   blrWiFiXxs,
 };
+
 export type IconType = keyof typeof IconMapping;
 export const IconKeys = Object.keys(IconMapping);
+
+export type SizelessIconType = (typeof PureIconKeys)[number];
+export const SizelessIconKeys = PureIconKeys;

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

@@ -3,16 +3,17 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FormSizesType, HintVariantType } from '../../../globals/types';
 import { BlrIconRenderFunction } from '../icon';
-import { IconType } from '@boiler/icons';
+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';
 
 @customElement('blr-form-hint')
 export class BlrFormHint extends LitElement {
-  static styles = [form];
+  static styles = [counter, form];
 
   @property() message?: string;
-  @property() icon?: IconType;
+  @property() icon?: SizelessIconType;
   @property() variant: HintVariantType = 'hint';
   @property() size: FormSizesType = 'md';
   @property() childElement?: TemplateResult<1>;

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

@@ -75,4 +75,31 @@ describe('blr-textarea', () => {
     // in html disabled will become null when its false
     expect(disabled).to.be.equal(null);
   });
+
+  it('is having a a visible hint icon', async () => {
+    const element = await fixture(
+      BlrTextareaRenderFunction({
+        ...sampleParams,
+        showHint: true,
+        hintIcon: 'blrInfo',
+      })
+    );
+
+    const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement);
+    const formHint = querySelectorDeep('blr-form-hint', textarea?.getRootNode() as HTMLElement);
+    const hintIcon = querySelectorDeep('blr-icon', formHint?.getRootNode() as HTMLElement);
+    const svg = querySelectorDeep('svg', hintIcon?.getRootNode() as HTMLElement);
+
+    const rect = svg?.getBoundingClientRect();
+
+    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

@@ -8,7 +8,7 @@ import { counter } from '../../foundation/component-tokens/feedback.css';
 import { FormSizesType } from '../../globals/types';
 import { BlrFormLabelRenderFunction } from '../internal-components/form-label';
 import { BlrFormHintRenderFunction } from '../internal-components/form-hint';
-import { IconType } from '@boiler/icons';
+import { SizelessIconType } from '@boiler/icons';
 import { iconButton } from '../../foundation/component-tokens/action.css';
 
 @customElement('blr-textarea')
@@ -33,7 +33,7 @@ export class BlrTextarea extends LitElement {
   @property() errorMessage?: string;
   @property() showHint = true;
   @property() hintText?: string;
-  @property() hintIcon: IconType = 'blrInfoSm';
+  @property() hintIcon: SizelessIconType = 'blrInfo';
   @property() isResizeable?: boolean;
   @property() rows?: number;
   @property() cols?: number;
@@ -117,10 +117,9 @@ export class BlrTextarea extends LitElement {
                   })}
                 `
               : html`<div class="blr-form-hint">
-                  <div class="brl-counter ${counterClasses}">${this.count}/${this.maxLength}</div>
+                  <div class="blr-counter ${counterClasses}">${this.count}/${this.maxLength}</div>
                 </div>`
           }
-
         </div>
       </div>
     `;

packages/ui-library/src/foundation/semantic-tokens/form.css.js

@@ -178,6 +178,31 @@ export const form = css`
     padding-bottom: ${Forms.LG.LabelSlot.Padding};
   }
 }
+.blr-counter {
+  &.sm {
+    font-family: ${Forms.SM.Caption.fontFamily}, sans-serif;
+    font-weight: ${Forms.SM.Caption.fontWeight};
+    font-size: ${Forms.SM.Caption.fontSize};
+    font-family: ${Forms.SM.Caption.fontFamily}, sans-serif;
+    line-height: ${Forms.SM.Caption.lineHeight};
+  }
+
+  &.md {
+    font-family: ${Forms.MD.Caption.fontFamily}, sans-serif;
+    font-weight: ${Forms.MD.Caption.fontWeight};
+    font-size: ${Forms.MD.Caption.fontSize};
+    font-family: ${Forms.MD.Caption.fontFamily}, sans-serif;
+    line-height: ${Forms.MD.Caption.lineHeight};
+  }
+
+  &.md {
+    font-family: ${Forms.LG.Caption.fontFamily}, sans-serif;
+    font-weight: ${Forms.LG.Caption.fontWeight};
+    font-size: ${Forms.LG.Caption.fontSize};
+    font-family: ${Forms.LG.Caption.fontFamily}, sans-serif;
+    line-height: ${Forms.LG.Caption.lineHeight};
+  }
+}
 .blr-form-hint, .blr-counter {
   display: flex;
   align-items: flex-start;