From 49b9e012f520a84cca1f8d4945261597a837a0a7 Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Mon, 11 Mar 2024 09:10:40 +0100 Subject: [PATCH 1/3] fix(ui-library): updating readme with component prefix information --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 7fd1955d7..fd283f97a 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ - [Figma](#figma) - [Tokens Studio](#tokens-studio) - [:triangular_ruler: Architecture](#triangular_ruler-architecture) + - [:leftwards_arrow_with_hook: Prefixes](#leftwards_arrow_with_hook-prefixes) - [:arrow_forward: How to start](#arrow_forward-how-to-start) - [Installation](#installation) - [Setup](#setup) @@ -83,6 +84,14 @@ Please let us know in case you are finding any bugs by reporting them with our [ ## :triangular_ruler: Architecture Get to know about our Architecture [here](./docs/ARCHITECTURE.md). +## :leftwards_arrow_with_hook: Prefixes +BO1LER uses the 'blr' prefix in three main areas: custom component tag names, events and icons +### Components +The names of BO1LER components follow the W3C Custom Elements specification. Component prefixes can easily be customized by updating the exported TAG_NAME in each `renderFunction` file. The `renderFunction` file can be found in the directory of each component in our `ui-library` package. In order for your component to be valid, the name must contain at least one dash, it must start with a lowercase character of the alphabet and it cannot contain reserved tag names that already exist in the HTML spec. For a full list of reserved tag names and more tips on naming Custom Elements, please explore [this guide](https://webcomponents.guide/learn/components/naming-your-components/) to ensure that your naming convention is compliant. +### Events +### Icons + + ## :gear: Requirements 1. First you need to install Git. Git is needed to clone the project to your local machine. If you don't have it installed yet you can follow this [installation guide](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git). 2. This project is a Node.js package. You need Node Version 18 or higher in order to run it. Check your installed version with node -v. For more information check out the [Node.js Documentation](https://nodejs.org/en/docs/). From e9d798581df249cfc982d8caea759e6940b873c9 Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Mon, 11 Mar 2024 09:23:19 +0100 Subject: [PATCH 2/3] fix(ui-library): updating readme with custom icon prefix instructions --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fd283f97a..f9fb638bc 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,7 @@ BO1LER uses the 'blr' prefix in three main areas: custom component tag names, ev The names of BO1LER components follow the W3C Custom Elements specification. Component prefixes can easily be customized by updating the exported TAG_NAME in each `renderFunction` file. The `renderFunction` file can be found in the directory of each component in our `ui-library` package. In order for your component to be valid, the name must contain at least one dash, it must start with a lowercase character of the alphabet and it cannot contain reserved tag names that already exist in the HTML spec. For a full list of reserved tag names and more tips on naming Custom Elements, please explore [this guide](https://webcomponents.guide/learn/components/naming-your-components/) to ensure that your naming convention is compliant. ### Events ### Icons +The prefixes of our icons can easily be renamed by opening the [index.mjs file](./packages/icons/scripts/index.mjs) in the `icons` directory. This file is responsible for optimizing our icons, assigning a prefix and exporting their type and exporting their keys. Simply replace the value of the variable `withPrefix` with a prefix of your choosing and run `yarn compile:icons` from the root directory for your changes to take effect. Remember to update the test files and the .stories.ts files with your chosen prefix for the app to function as expected. ## :gear: Requirements From 2b4985027b6927ff2cd1b723606ad43369fccd7b Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Mon, 11 Mar 2024 09:39:53 +0100 Subject: [PATCH 3/3] fix(ui-library): updating readme with custom events prefix instructions --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index f9fb638bc..dbbeed436 100644 --- a/README.md +++ b/README.md @@ -86,9 +86,17 @@ Get to know about our Architecture [here](./docs/ARCHITECTURE.md). ## :leftwards_arrow_with_hook: Prefixes BO1LER uses the 'blr' prefix in three main areas: custom component tag names, events and icons + ### Components The names of BO1LER components follow the W3C Custom Elements specification. Component prefixes can easily be customized by updating the exported TAG_NAME in each `renderFunction` file. The `renderFunction` file can be found in the directory of each component in our `ui-library` package. In order for your component to be valid, the name must contain at least one dash, it must start with a lowercase character of the alphabet and it cannot contain reserved tag names that already exist in the HTML spec. For a full list of reserved tag names and more tips on naming Custom Elements, please explore [this guide](https://webcomponents.guide/learn/components/naming-your-components/) to ensure that your naming convention is compliant. + ### Events +BO1LER uses custom event names in our components that come prefixed with `blr` by default. This is done to avoid using the same names in HTML. Users may still need to use native events without having to worry about naming collisions. The exported event names can be customized in the [events.ts file](./packages/ui-library/src/globals/events.ts). For example, the focus event can be updated with a new prefix of your choosing by changing the value: + +``` +export const BlrFocusEventName = 'blrFocus'; +``` + ### Icons The prefixes of our icons can easily be renamed by opening the [index.mjs file](./packages/icons/scripts/index.mjs) in the `icons` directory. This file is responsible for optimizing our icons, assigning a prefix and exporting their type and exporting their keys. Simply replace the value of the variable `withPrefix` with a prefix of your choosing and run `yarn compile:icons` from the root directory for your changes to take effect. Remember to update the test files and the .stories.ts files with your chosen prefix for the app to function as expected.