diff --git a/README.md b/README.md index d9d7530b3..2efa95748 100644 --- 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,7 +288,6 @@ 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 @@ -299,7 +295,6 @@ your first icon: ``` #### 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 index b1c5cc295..4f11872f4 100644 --- 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 index 6c49ec1f7..b6be661f3 100644 --- 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 index c0683bb46..3741a0ad9 100644 --- a/packages/js-example-app/src/index.ejs +++ b/packages/js-example-app/src/index.ejs @@ -29,9 +29,21 @@ +
+

Icon Button

+ + +
+

Select

- + @@ -44,12 +56,35 @@

Checkbox

- + +

Input Field Text

- + +
@@ -79,16 +114,25 @@

Textarea

+ aria-label="Text Area" + text-area-id="#textAreaId" + name="Text Area"> +
diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index c92ac7ede..7e53f3313 100644 --- 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 index 1971b9522..92ecacc5e 100644 --- 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 index b8a2732a3..0ccdd6796 100644 --- 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"]