fix(ui-library): fix icon button events (#1018)

fix(ui-library): fix icon button events
deven-org · Mar 27, 2024 · 2ceb1bf · 2ceb1bf
1 parent d4ab9b7
commit 2ceb1bf
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,7 @@
 # B01LER
-
 ![B01LER_UpdateImg_1100-480@2x](https://github.com/deven-org/boiler/assets/122102805/7f55e1fd-955f-4c9f-890d-3d5a03f5c3aa)
 
 ## :page_with_curl: Content
-
 - [B01LER](#b01ler)
   - [:page_with_curl: Content](#page_with_curl-content)
   - [:star: Introduction](#star-introduction)
@@ -192,7 +190,6 @@ component can also be viewed
 ## :arrow_forward: How to start
 
 ### Installation
-
 > **Note:** You need to run terminal as administrator on Windows machines.
 
 1. First, open a terminal and navigate to the folder you want to fork or clone this project
@@ -291,15 +288,13 @@ your first icon:
    ```sh
    $ yarn compile:icons
    ```
-
 2. To check that your icon has been added run your project locally and inspect the Icons tab:
 
    ```sh
    $ yarn start
    ```
 
 #### Changing Icons
-
 It is also possible to just change existing icon file without renaming it.
 
 1. Navigate to `/icon-set` folder

diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
@@ -61,7 +61,6 @@ contributions:
 > - A merge request can only be merged if it has successful test results and at least two approvals
 
 ## :arrows_counterclockwise: Contribution process overview
-
 1. Getting Started
 2. Create new issue / select an existing issue
 3. Create new branch

diff --git a/docs/GETSTARTED.md b/docs/GETSTARTED.md
@@ -26,7 +26,6 @@ seasoned professional or a newcomer, we've got you covered. Let's dive in and un
 - [Yik Cun Chung](https://github.com/yikcunchung)
 
 ### Developers
-
 - [Christian Hoffmann](https://github.com/ChristianHoffmannS2) (Lead)
 - [David Kennedy](https://github.com/davidken91) (Stand-in lead)
 - [Manuel Seemann](https://github.com/seemann)
@@ -37,7 +36,6 @@ seasoned professional or a newcomer, we've got you covered. Let's dive in and un
 - [Roman Yakovliev](https://https://github.com/veilvokay)
 
 ### Product & Project Management
-
 - [Thorben Hartmann](https://github.com/thrbnhrtmnn) (Lead, community leader)
 - [Anđelka Dakić](https://github.com/angelicahoyss) (Stand-in lead, community leader)
 

diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs
@@ -29,9 +29,21 @@
           <button id="toggleDisabledState">Toggle Disabled State</button>
         </div>
 
+        <div class="component">
+          <p>Icon Button</p>
+          <blr-button-icon
+            theme="Light"
+            variant="primary"
+            size-variant="md"
+            icon="blr360"
+            aria-label="Button Icon"
+            button-icon-id="buttonIconId">
+          </blr-button-icon>
+        </div>
+
         <div class="component">
           <p>Select</p>
-          <blr-select label="Boiler Select Component">
+          <blr-select theme="Light" size-variant="md" has-label="true" label="Label-text" label-appendix="(Appendix)" icon="blrChevronDown" aria-label="Select" select-id="selectId" name="select">
             <option value="" label="--Please choose an option--"></option>
             <option value="option1" label="Option 1"></option>
             <option value="option2" label="Option 2"></option>
@@ -44,12 +56,35 @@
 
         <div class="component">
           <p>Checkbox</p>
-          <blr-checkbox has-label="true" label="Please check" check-input-id="Test123"></blr-checkbox>
+          <blr-checkbox
+            theme="Light"
+            size="md"
+            has-label="true"
+            label="Label-text"
+            aria-label="check Input"
+            check-input-id="checkInputId"
+            name="checkInputId">
+          </blr-checkbox>
         </div>
 
         <div class="component">
           <p>Input Field Text</p>
-          <blr-input-field-text placeholder="Enter text..." value="" hint-text="Hint"></blr-input-field-text>
+          <blr-input-field-text
+            theme="Light"
+            size-variant="md"
+            type="text"
+            placeholder="Placeholder-text"
+            value=""
+            max-length="140"
+            has-label="true"
+            label="Label-text"
+            label-appendix="(Appendix)"
+            has-icon="true"
+            icon="blr360"
+            aria-label="InputFieldText"
+            name="InputFieldText"
+            input-field-text-id="Input Id">
+          </blr-input-field-text>
         </div>
 
         <div class="component">
@@ -79,16 +114,25 @@
         <div class="component">
           <p>Textarea</p>
           <blr-textarea
-            placeholder="Enter text..."
-            value=""
-            show-hint="true"
-            hint-text="Hint"
+            theme="Light"
+            size-variant="md"
             resize="both"
-            has-counter="true"
+            cols="40"
+            rows="4"
+            placeholder="Placeholder-text"
+            value=""
+            min-length="10"
             max-length="140"
+            has-label="true"
+            label="Label-text"
+            label-appendix="(Appendix)"
+            has-counter="true"
             warning-limit-type="warningLimitInt"
             warning-limit-int="105"
-          ></blr-textarea>
+            aria-label="Text Area"
+            text-area-id="#textAreaId"
+            name="Text Area">
+          </blr-textarea>
         </div>
 
         <div class="component">

diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
@@ -5,7 +5,8 @@ const toggleLoadingButton = document.querySelector('#toggleLoadingState');
 const toggleDisabledState = document.querySelector('#toggleDisabledState');
 const logsContainer = document.querySelector('#logs');
 
-const blrButton = document.getElementsByTagName('blr-button-text')[0];
+const blrButtonText = document.getElementsByTagName('blr-button-text')[0];
+const blrButtonIcon = document.getElementsByTagName('blr-button-icon')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
 const blrInputFieldText = document.getElementsByTagName('blr-input-field-text')[0];
@@ -19,41 +20,53 @@ const addLog = (log) => {
 };
 
 toggleLoadingButton.addEventListener('click', () => {
-  const currentState = blrButton.getAttribute('loading');
+  const currentState = blrButtonText.getAttribute('loading');
 
   if (currentState) {
-    blrButton.removeAttribute('loading');
+    blrButtonText.removeAttribute('loading');
     addLog('Set button text loading state to false');
   } else {
-    blrButton.setAttribute('loading', 'true');
+    blrButtonText.setAttribute('loading', 'true');
     addLog('Set button text loading state to true');
   }
 });
 
 toggleDisabledState.addEventListener('click', () => {
-  const currentState = blrButton.getAttribute('disabled');
+  const currentState = blrButtonText.getAttribute('disabled');
 
   if (currentState) {
-    blrButton.removeAttribute('disabled');
-    addLog('Set button text disabled state to false');
+    blrButtonText.removeAttribute('disabled');
+    addLog('Set text button disabled state to false');
   } else {
-    blrButton.setAttribute('disabled', 'true');
-    addLog('Set button text loading state to true');
+    blrButtonText.setAttribute('disabled', 'true');
+    addLog('Set text button loading state to true');
   }
 });
 
-blrButton.addEventListener('blrClick', () => {
+blrButtonText.addEventListener('blrClick', () => {
   addLog('blr-button-text clicked');
 });
 
-blrButton.addEventListener('blrFocus', () => {
+blrButtonText.addEventListener('blrFocus', () => {
   addLog('blr-button-text focused');
 });
 
-blrButton.addEventListener('blrBlur', () => {
+blrButtonText.addEventListener('blrBlur', () => {
   addLog('blr-button-text blurred');
 });
 
+blrButtonIcon.addEventListener('blrClick', () => {
+  addLog('blr-button-icon clicked');
+});
+
+blrButtonIcon.addEventListener('blrFocus', () => {
+  addLog('blr-button-icon focused');
+});
+
+blrButtonIcon.addEventListener('blrBlur', () => {
+  addLog('blr-button-icon blurred');
+});
+
 blrCheckbox.addEventListener('blrCheckedChange', (e) => {
   addLog('blr-checkbox changed: ' + e.detail.checkedState);
 });

diff --git a/packages/ui-library/src/components/button-icon/index.stories.ts b/packages/ui-library/src/components/button-icon/index.stories.ts
@@ -36,9 +36,9 @@ const argTypesToDisable = [
   'errorIcon',
   'arialabel',
   'name',
-  'onChange',
-  'onFocus',
-  'onBlur',
+  'blrClick',
+  'blrBlur',
+  'blrFocus',
 ];
 
 const generateDisabledArgTypes = (argTypes: string[]) => {
@@ -121,23 +121,23 @@ export default {
       },
     },
     // Events
-    onChange: {
-      description: 'Fires when the value changes.',
-      action: 'onChange',
+    blrClick: {
+      description: 'Fires when the component is clicked.',
+      action: 'blrClick',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
+    blrFocus: {
       description: 'Fires when the component is focused.',
-      action: 'onFocus',
+      action: 'blrFocus',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
+    blrBlur: {
       description: 'Fires when the component lost focus.',
-      action: 'onBlur',
+      action: 'blrBlur',
       table: {
         category: 'Events',
       },

diff --git a/packages/ui-library/tsconfig.json b/packages/ui-library/tsconfig.json
@@ -14,7 +14,16 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "strict": true,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true,
+        "rules": {
+          "no-missing-import": "off"
+        }
+      }
+    ]
   },
   "include": ["src"],
   "exclude": ["src/**/*.test.ts", "src/**/*.stories.ts"]