Merge branch 'develop' into fix/709-readme-optimizations

.gitignore

@@ -8,6 +8,7 @@ storybook-static
 package-lock.json
 
 packages/js-example-app/dist
+packages/js-example-app/src/assets/index.html
 
 .yarn/install-state.gz
 

package.json

@@ -72,6 +72,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
+    "ejs": "^3.1.9",
     "eslint": "^8.53.0",
     "eslint-webpack-plugin": "^3.2.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",

packages/js-example-app/package.json

@@ -5,8 +5,10 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --config webpack.dev.js",
-    "build:prod": "webpack --config webpack.prod.js",
+    "build-index": "yarn run -T ejs src/index.ejs baseURL=. -o src/assets/index.html",
+    "build-index:prod": "yarn run -T ejs src/index.ejs baseURL=js-example-app -o src/assets/index.html",
+    "build": "yarn run build-index && webpack --config webpack.dev.js",
+    "build:prod": "yarn run build-index:prod && webpack --config webpack.prod.js",
     "serve": "http-server ./dist"
   },
   "keywords": [],

packages/js-example-app/src/prod-assets/index.html → packages/js-example-app/src/index.ejs

@@ -139,6 +139,6 @@ <h2>Vanilla JS Example Application</h2>
       <div id="logs" class="logsWrapper"></div>
     </div>
 
-    <script src="js-example-app/main.js"></script>
+    <script src="<%= baseURL %>/main.js"></script>
   </body>
 </html>

packages/js-example-app/webpack.dev.js

@@ -8,7 +8,6 @@ module.exports = merge(common, {
     new CopyPlugin({
       patterns: [
         { from: 'src/assets', to: '.' },
-
         { from: '../ui-library/dist', to: '.' },
       ],
     }),

packages/js-example-app/webpack.prod.js

@@ -10,7 +10,7 @@ module.exports = merge(common, {
   plugins: [
     new CopyPlugin({
       patterns: [
-        { from: 'src/prod-assets', to: '.' },
+        { from: 'src/assets', to: '.' },
         { from: '../ui-library/dist', to: '.' },
       ],
     }),

packages/ui-library/src/components/form-label/index.stories.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { Themes } from '../../foundation/_tokens-generated/index.themes';
-import { FormSizes, LabelVariants } from '../../globals/constants';
+import { FormSizes } from '../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
@@ -54,11 +54,9 @@ export default {
         category: 'Content / Settings',
       },
     },
-
     hasError: {
       description: 'Choose if component has an error.',
-      options: LabelVariants,
-      control: { type: 'select' },
+      defaultValue: false,
       table: {
         category: 'Validation',
       },
@@ -86,10 +84,8 @@ export default {
 
         - [**Appearance**](#appearance)
           - [**Size Variant**](#size-variant)
-        
         - [**Content / Settings**](#content--settings)
           - [**Label Appendix**](#label-appendix)
-        
         - [**Validation**](#validation)
           - [**Has Error**](#has-error)
         
@@ -139,7 +135,7 @@ BlrFormLabel.args = defaultParams;
 
 /**
  * ## Appearance
- *  ### Size Variant
+ * ### Size Variant
  * The Form Label component comes in 3 sizes: SM, MD and LG.
  */
 export const SizeVariant = () => {
@@ -180,19 +176,19 @@ export const LabelAppendix = () => {
   return html`
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      sizeVariant: 'lg',
+      sizeVariant: 'md',
       label: 'Form label',
       labelAppendix: '(required)',
     })}
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      sizeVariant: 'lg',
+      sizeVariant: 'md',
       label: 'Form label',
       labelAppendix: '(optional)',
     })}
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      sizeVariant: 'lg',
+      sizeVariant: 'md',
       label: 'Form label',
       labelAppendix: ' ',
     })}

packages/ui-library/src/components/form-label/index.test.ts

@@ -107,7 +107,7 @@ describe('blr-form-label', () => {
     );
     const blrLabel = querySelectorDeep('label.blr-form-label', element.getRootNode() as HTMLElement);
     const errorLabel = blrLabel?.getAttribute('class');
-    expect(errorLabel).to.contain('true');
+    expect(errorLabel).to.contain('error');
   });
 
   it('has a size md by default', async () => {

packages/ui-library/src/components/form-label/index.ts

@@ -48,7 +48,7 @@ export class BlrFormLabel extends LitElement {
       const labelClasses = classMap({
         'blr-form-label': true,
         [`${this.sizeVariant}`]: this.sizeVariant,
-        [`${this.hasError}`]: this.hasError,
+        'error': this.hasError,
       });
 
       const spanClasses = classMap({

packages/ui-library/src/components/number-input/index.ts

@@ -249,7 +249,7 @@ export class BlrNumberInput extends LitElement {
                     labelAppendix: this.labelAppendix,
                     forValue: this.numberInputId,
                     theme: this.theme,
-                    hasError: Boolean(this.label),
+                    hasError: Boolean(this.hasError),
                   })}
                 </div>
               `

packages/ui-library/src/components/select/index.ts

@@ -164,7 +164,7 @@ export class BlrSelect extends LitElement {
                     sizeVariant: this.size,
                     forValue: this.selectId,
                     theme: this.theme,
-                    hasError: Boolean(this.label),
+                    hasError: Boolean(this.hasError),
                   })}
                 </div>
               `

packages/ui-library/src/components/text-input/index.ts

@@ -174,7 +174,7 @@ export class BlrTextInput extends LitElement {
                     labelAppendix: this.labelAppendix,
                     forValue: this.textInputId,
                     theme: this.theme,
-                    hasError: Boolean(this.label),
+                    hasError: Boolean(this.hasError),
                   })}
                 </div>
               `

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

@@ -205,7 +205,7 @@ export class BlrTextarea extends LitElement {
                   labelAppendix: this.labelAppendix,
                   forValue: this.textareaId,
                   theme: this.theme,
-                  hasError: Boolean(this.label),
+                  hasError: Boolean(this.hasError),
                 })}
               </div>`
             : nothing}

yarn.lock

@@ -1569,6 +1569,7 @@ __metadata:
     clean-webpack-plugin: "npm:^4.0.0"
     copy-webpack-plugin: "npm:^11.0.0"
     css-loader: "npm:^6.7.3"
+    ejs: "npm:^3.1.9"
     eslint: "npm:^8.53.0"
     eslint-webpack-plugin: "npm:^3.2.0"
     fork-ts-checker-webpack-plugin: "npm:^7.3.0"
@@ -8018,7 +8019,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.8":
+"ejs@npm:^3.1.8, ejs@npm:^3.1.9":
   version: 3.1.9
   resolution: "ejs@npm:3.1.9"
   dependencies: