Merge branch 'develop' into fix/725_inputfielnumber-update-value-on-r…

…eadonly
deven-org · Dec 3, 2024 · 7056d84 · 7056d84
2 parents a821024 + 21856a3
commit 7056d84
Show file tree

Hide file tree

Showing 8 changed files with 366 additions and 75 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,29 @@
+name: Release Please
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Release Please Action
+        uses: googleapis/release-please-action@v4
+        id: release
+        with:
+          release-type: node
+          package-name: '@ashk1996/boiler'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          target-branch: main
+          branch: main
diff --git a/docs/DEPLOYMENT.md b/docs/DEPLOYMENT.md
@@ -1,37 +1,104 @@
 # Deployment
+
 This chapter should provide the user with all needed information around the deployment of your project.
 
-Currently, the B01LER project is getting deployed to [render.com](https://render.com) periodically. In the near future, we intend on implementing a more formal deployment schedule so that the latest version of the project will be available to view and interact with.
+Currently, the B01LER project is getting deployed to [render.com](https://render.com) periodically. In the near future,
+we intend on implementing a more formal deployment schedule so that the latest version of the project will be available
+to view and interact with.
 
-The project can be viewed [here](https://b01ler.onrender.com/). This link allows you to experiment with the project and learn about how you can use components via Storybook.
+The project can be viewed [here](https://b01ler.onrender.com/). This link allows you to experiment with the project and
+learn about how you can use components via Storybook.
 
-We also deploy our JS Example app to [Render](https://b01ler.onrender.com/js-example-app). This application shows you how our components look when implemented in a vanilla Javascript application.
+We also deploy our JS Example app to [Render](https://b01ler.onrender.com/js-example-app). This application shows you
+how our components look when implemented in a vanilla Javascript application.
 
 ## Content
+
 - [Tooling](#tooling)
+- [Release Please](#release-please)
+- [Conventional Commit Messages](#conventional-commit-messages)
 - [How to deploy](#how-to-deploy)
 - [Versioning](#versioning)
 - [Release Management](#release-management)
 - [Deployment Schedule](#deployment-schedule)
 - [Support](#support)
 
 ## Tooling
-Please explain what kind of tools you use for your deployment, why you have choosen them and how to work with them.
 
+This project uses release-please and conventional commit messages for automated release creation and deploys the package
+to the npm registry.
+
+We use the [Git-Flow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) branching model:
+
+```mermaid
+        gitGraph
+       commit id: "a"
+       commit id: "b"
+       branch develop
+       checkout develop
+       checkout develop
+       branch feature1
+       checkout feature1
+       commit id: "c"
+       checkout develop
+       merge feature1
+       branch feature2
+       checkout feature2
+       commit id: "d"
+       checkout develop
+       merge feature2
+       checkout main
+       merge develop
+       branch "release"
+       checkout release
+       commit id: "1.0.0" tag: "release"
+       checkout main
+       merge release
+       checkout develop
+       merge main
+```
+
+## Release Please
+
+Release Please automates CHANGELOG generation, the creation of GitHub releases, and version bumps for your projects.
+Release Please does so by parsing the git history, looking for Conventional Commit messages, and creating release PRs.
+
+The tool runs on every update on the `main` branch and creates a release PR which needs to be manually be merged to
+create the release.
+
+The updated `main` branch then needs to be merged back, please use rebase, into the `develop` branch.
+
+## Conventional Commit Messages
+
+The commits must be compliant with with the
+[Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). The commit header should not
+exceed a maximum character count of 140. The scope is allowed to be one of the following options: 'all', 'ui-library',
+'icons', 'figma-design-tokens', 'tokens', or 'storybook'.
 
 ## How to deploy
-In this section you should discribe the deployment process for your project. Think about how developers  who are unfamiliar with the project can deploy it to the respective enviroments.
 
+One needs to create a new PR from `develop` to `main`. Once the PR is approved and merged the GitHub workflow `release`
+will be started.
 
-## Versioning
-Please describe briefly how you manage the versioning of your project.
+The `release` workflow will first run the tests and after they were successful a new release branch is created together
+with a PR from the release branch into `main`.
+
+The newly created release PR needs to be manually merged into main to finish the package creation and release
+publishing.
 
+After the release PR is merged the `develop` branch also needs to be updated by rebasing it onto the `main` branch.
 
-## Release Management
-If you have a release management setup in place, please describe the process and who to contact if support is needed.
+## Versioning
+
+Please see [conventional commit messages](#conventional-commit-messages)
 
 ## Deployment Schedule
-Please write down your deployment schedule. Consider using screenshots or graphs for better visualization.
+
+There is no deployment schedule. A new release is created whenever we have multiple new small features or a new big
+feature that we want to release.
 
 ## Support
-If support is needed while deploying BO1LER, please refer to our [README feedback section](/README.md#tipping_hand_person-help--feedback) where we list the many ways that we can be reached to support you.
+
+If support is needed while deploying BO1LER, please refer to our
+[README feedback section](/README.md#tipping_hand_person-help--feedback) where we list the many ways that we can be
+reached to support you.
diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts
@@ -30,30 +30,55 @@ import {
 } from '../../globals/events.js';
 import { LitElementCustom, ElementInterface } from '../../utils/lit/element.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { makeSanitizer } from '../../utils/lit/sanitize.js';
+import { SanitizationController } from '../../utils/lit/sanitization-controller.js';
 
 export type BlrButtonTextEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
   blrBlur?: (event: BlrBlurEvent) => void;
   blrClick?: (event: BlrClickEvent) => void;
 };
 
+const propertySanitizer = makeSanitizer((unsanitized: BlrButtonTextType) => ({
+  iconPosition: unsanitized.iconPosition ?? 'leading',
+  sizeVariant: unsanitized.sizeVariant ?? 'md',
+  buttonDisplay: unsanitized.buttonDisplay ?? 'inline-block',
+}));
+
 /**
  * @fires blrFocus Button received focus
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
 export class BlrButtonText extends LitElementCustom {
+  private sanitizedController: SanitizationController<
+    BlrButtonTextType,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any
+  >;
+
+  constructor() {
+    super();
+    this.sanitizedController = new SanitizationController<
+      BlrButtonTextType,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any
+    >({
+      host: this,
+      sanitize: propertySanitizer,
+    });
+  }
   static styles = [styleCustom, staticActionStyles];
 
   @property() accessor label = 'Button Label';
-  @property() accessor icon: SizelessIconType | undefined = undefined;
-  @property() accessor iconPosition: IconPositionVariant | undefined = 'leading';
+  @property() accessor icon: SizelessIconType | undefined;
+  @property() accessor iconPosition: IconPositionVariant | undefined;
   @property({ type: Boolean }) accessor loading!: boolean;
   @property({ type: Boolean }) accessor disabled!: boolean;
   @property() accessor buttonTextId: string | undefined;
   @property() accessor variant: ActionVariantType = 'primary';
-  @property() accessor sizeVariant: ActionSizesType | undefined = 'md';
-  @property() accessor buttonDisplay: DisplayType | undefined = 'inline-block';
+  @property() accessor sizeVariant: ActionSizesType | undefined;
+  @property() accessor buttonDisplay: DisplayType | undefined;
 
   @property() accessor theme: ThemeType = 'Light_value';
 
@@ -80,27 +105,28 @@ export class BlrButtonText extends LitElementCustom {
   };
 
   protected render() {
-    if (this.sizeVariant && this.buttonDisplay) {
+    const sanitized = this.sanitizedController.values;
+    if (sanitized.sizeVariant && this.buttonDisplay) {
       const classes = classMap({
         'blr-semantic-action': true,
         'blr-button-text': true,
         [this.variant]: this.variant,
-        [this.sizeVariant]: this.sizeVariant,
+        [sanitized.sizeVariant]: sanitized.sizeVariant,
         'disabled': this.disabled,
         'loading': this.loading,
-        [this.buttonDisplay]: this.buttonDisplay,
+        [sanitized.buttonDisplay]: sanitized.buttonDisplay,
         [this.theme]: this.theme,
       });
 
       const iconClasses = classMap({
         'icon': true,
-        'leading-icon-class': this.iconPosition === 'leading',
-        'trailing-icon-class': this.iconPosition === 'trailing',
+        'leading-icon-class': sanitized.iconPosition === 'leading',
+        'trailing-icon-class': sanitized.iconPosition === 'trailing',
       });
 
       const flexContainerClasses = classMap({
         'flex-container': true,
-        [this.sizeVariant]: this.sizeVariant,
+        [sanitized.sizeVariant]: sanitized.sizeVariant,
         [this.theme]: this.theme,
       });
 
@@ -118,19 +144,19 @@ export class BlrButtonText extends LitElementCustom {
         'buttons',
         'loader',
         'sizevariant',
-        this.sizeVariant,
+        sanitized.sizeVariant,
       ]).toLowerCase() as FormSizesType;
 
       const iconSizeVariant = getComponentConfigToken([
         'cmp',
         'buttontext',
         'icon',
         'sizevariant',
-        this.sizeVariant,
-      ]) as SizesType;
+        sanitized.sizeVariant,
+      ]).toLowerCase() as SizesType;
 
       const labelAndIconGroup = html` <div class="${flexContainerClasses}">
-        ${this.icon && this.iconPosition === 'leading'
+        ${this.icon && sanitized.iconPosition === 'leading'
           ? BlrIconRenderFunction(
               {
                 icon: calculateIconName(this.icon, iconSizeVariant),
@@ -144,7 +170,7 @@ export class BlrButtonText extends LitElementCustom {
             )
           : nothing}
         <span class="label">${this.label} </span>
-        ${this.icon && this.iconPosition === 'trailing'
+        ${this.icon && sanitized.iconPosition === 'trailing'
           ? BlrIconRenderFunction(
               {
                 icon: calculateIconName(this.icon, iconSizeVariant),