diff --git a/.gitignore b/.gitignore index 824fac011..eb0f772b3 100644 --- a/.gitignore +++ b/.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 diff --git a/package.json b/package.json index 2f16f67a6..5ac7bedca 100644 --- a/package.json +++ b/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", diff --git a/packages/js-example-app/package.json b/packages/js-example-app/package.json index bd9df10c3..3b05a1cbe 100644 --- a/packages/js-example-app/package.json +++ b/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": [], diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html deleted file mode 100644 index 938cf8871..000000000 --- a/packages/js-example-app/src/assets/index.html +++ /dev/null @@ -1,149 +0,0 @@ - - - - - Boiler | Vanilla JS Example App - - - -
- boiler -

Vanilla JS Example Application

-
- -
-
-
-

Text Button

- - - -
- -
-

Select

- - - - - - - - - -
- -
-

Checkbox

- -
- -
-

Text Input

- -
- -
-

Number Input

- -
- -
-

Textarea

- -
- -
-

Tooltip

- - - - -
- -
-

Radio Input

- -
- -
-

Text Input

- -
- -
-

Tab Bar

-

Tab 1

-

Tab 2

-

Tab 3

-

Tab 4

-

Tab 5

-

Tab 6

-

Tab 7

-

Tab 8

-

Tab 9

-

Tab 10

-

Tab 11

- -
-
- -
-
- - - - diff --git a/packages/js-example-app/src/prod-assets/index.html b/packages/js-example-app/src/index.ejs similarity index 98% rename from packages/js-example-app/src/prod-assets/index.html rename to packages/js-example-app/src/index.ejs index 0441e8560..e0ffe5bdd 100644 --- a/packages/js-example-app/src/prod-assets/index.html +++ b/packages/js-example-app/src/index.ejs @@ -139,6 +139,6 @@

Vanilla JS Example Application

- + diff --git a/packages/js-example-app/src/prod-assets/logo.svg b/packages/js-example-app/src/prod-assets/logo.svg deleted file mode 100644 index 6c0f52fe5..000000000 --- a/packages/js-example-app/src/prod-assets/logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/js-example-app/webpack.dev.js b/packages/js-example-app/webpack.dev.js index 73881b365..cbe47371a 100644 --- a/packages/js-example-app/webpack.dev.js +++ b/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: '.' }, ], }), diff --git a/packages/js-example-app/webpack.prod.js b/packages/js-example-app/webpack.prod.js index 1d8a17b87..7a56e651b 100644 --- a/packages/js-example-app/webpack.prod.js +++ b/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: '.' }, ], }), diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts index f26eceab2..bf1b97758 100644 --- a/packages/ui-library/src/components/form-label/index.stories.ts +++ b/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: ' ', })} diff --git a/packages/ui-library/src/components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts index b020d001e..1f4490b6b 100644 --- a/packages/ui-library/src/components/form-label/index.test.ts +++ b/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 () => { diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts index 6c10ad8e4..2da49f01c 100644 --- a/packages/ui-library/src/components/form-label/index.ts +++ b/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({ diff --git a/packages/ui-library/src/components/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts index fe896628b..269ac6401 100644 --- a/packages/ui-library/src/components/number-input/index.ts +++ b/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), })} ` diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index 7a598b245..ec0a59dad 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/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), })} ` diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts index 516cb5e2a..aeb2f67a7 100644 --- a/packages/ui-library/src/components/text-input/index.ts +++ b/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), })} ` diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 7605d734b..d836a2498 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/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), })} ` : nothing} diff --git a/yarn.lock b/yarn.lock index 4803324be..3955a51bb 100644 --- a/yarn.lock +++ b/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: