feat(ui-library): forms with&without slot and simple manual validation(…

…#596)

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

@@ -78,6 +78,21 @@ export class BlrCheckbox extends LitElement {
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    addEventListener('propChanged', this._onPropChanged);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    removeEventListener('propChanged', this._onPropChanged);
+  }
+
+  _onPropChanged = (event: any) => {
+    this.hasError = event.detail.hasError;
+    this.errorMessage = event.detail.errorMessage;
+  };
+
   protected handleChange(event: Event) {
     if (!this.disabled && !this.readonly) {
       this.currentIndeterminateState = false;

packages/ui-library/src/components/form-example-with-slot/index.css.ts

@@ -0,0 +1,76 @@
+import { typeSafeNestedCss as css } from "../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+
+export const { tokenizedLight: captionLight, tokenizedDark: captionDark } = renderThemedCssStrings((componentTokens) => {
+  const { CaptionComponent } = componentTokens.Forms;
+
+  return css`
+    .blr-form-caption {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      color: ${CaptionComponent.Text.TextColor.Hint};
+
+      &.error {
+        color: ${CaptionComponent.Text.TextColor.Error};
+      }
+
+      &.sm {
+        padding: ${CaptionComponent.Container.Padding.SM};
+        gap: ${CaptionComponent.Container.ItemSpacing.SM};
+
+        .blr-icon {
+          padding-top: ${CaptionComponent.IconWrapper.PaddingTop.SM};
+          height: ${CaptionComponent.Icon.IconSize.SM};
+          width: ${CaptionComponent.Icon.IconSize.SM};
+        }
+
+        .blr-caption-text {
+          padding: ${CaptionComponent.TextWrapper.Padding.SM};
+          font-family: ${CaptionComponent.Text.Typography.SM.fontFamily}, sans-serif;
+          font-weight: ${CaptionComponent.Text.Typography.SM.fontWeight};
+          font-size: ${CaptionComponent.Text.Typography.SM.fontSize};
+          line-height: ${CaptionComponent.Text.Typography.SM.lineHeight};
+        }
+      }
+
+      &.md {
+        padding: ${CaptionComponent.Container.Padding.MD};
+        gap: ${CaptionComponent.Container.ItemSpacing.MD};
+
+        .blr-icon {
+          padding-top: ${CaptionComponent.IconWrapper.PaddingTop.MD};
+          height: ${CaptionComponent.Icon.IconSize.MD};
+          width: ${CaptionComponent.Icon.IconSize.MD};
+        }
+
+        .blr-caption-text {
+          padding: ${CaptionComponent.TextWrapper.Padding.MD};
+          font-family: ${CaptionComponent.Text.Typography.MD.fontFamily}, sans-serif;
+          font-weight: ${CaptionComponent.Text.Typography.MD.fontWeight};
+          font-size: ${CaptionComponent.Text.Typography.MD.fontSize};
+          line-height: ${CaptionComponent.Text.Typography.MD.lineHeight};
+        }
+      }
+
+      &.lg {
+        padding: ${CaptionComponent.Container.Padding.LG};
+        gap: ${CaptionComponent.Container.ItemSpacing.LG};
+
+        .blr-icon {
+          padding-top: ${CaptionComponent.IconWrapper.PaddingTop.LG};
+          height: ${CaptionComponent.Icon.IconSize.LG};
+          width: ${CaptionComponent.Icon.IconSize.LG};
+        }
+
+        .blr-caption-text {
+          padding: ${CaptionComponent.TextWrapper.Padding.LG};
+          font-family: ${CaptionComponent.Text.Typography.LG.fontFamily}, sans-serif;
+          font-weight: ${CaptionComponent.Text.Typography.LG.fontWeight};
+          font-size: ${CaptionComponent.Text.Typography.LG.fontSize};
+          line-height: ${CaptionComponent.Text.Typography.LG.lineHeight};
+        }
+      }
+    }
+  `;
+});

packages/ui-library/src/components/form-example-with-slot/index.stories.ts

@@ -0,0 +1,50 @@
+/* eslint-disable no-console */
+import { PureIconKeys } from '@boiler/icons';
+import { FormSizes, CaptionVariants } from '../../globals/constants';
+import { BlrFormExampleWithSlotType } from './index';
+import { BlrFormExampleWithSlotRenderFunction } from './renderFunction';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { html } from 'lit-html';
+import '../../index';
+
+const sharedStyles = html`
+  <style>
+    .wrapper {
+      padding: 1.25em;
+      background: red;
+    }
+  </style>
+`;
+
+export default {
+  title: 'Components/Form Example',
+  argTypes: {},
+  parameters: {
+    badges: ['Draft'],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125223&mode=dev',
+    },
+    viewMode: 'docs',
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `<Markdown>
+        This is experimental form.
+      </Markdown>
+      `,
+      },
+    },
+  },
+};
+
+export const BlrFormExampleWithSlot = (params: BlrFormExampleWithSlotType) =>
+  BlrFormExampleWithSlotRenderFunction(params);
+
+BlrFormExampleWithSlot.storyName = 'BlrFormExampleWithSlot';
+
+const args: BlrFormExampleWithSlotType = {
+  theme: 'Light',
+};
+
+BlrFormExampleWithSlot.args = args;

packages/ui-library/src/components/form-example-with-slot/index.ts

@@ -0,0 +1,144 @@
+import { LitElement, html } from 'lit';
+import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { property } from 'lit/decorators.js';
+
+export class BlrFormExampleWithSlot extends LitElement {
+  @property() theme: ThemeType = 'Light';
+  @property() firstInputValue: string = '';
+  @property() secondInputValue: string = '';
+  @property({ reflect: true }) checkBoxChecked: boolean = false;
+
+  protected render() {
+    return html`
+      <blr-form .handleSubmit="${this.handleSubmit}">
+        <blr-text-input
+          size="md"
+          placeholder="Placeholder-text"
+          value="${this.firstInputValue}"
+          maxlength="140"
+          label="Label-text"
+          labelappendix="(Appendix)"
+          arialabel="firstInput"
+          name="firstInput"
+          theme="Light"
+          textinputid="firstInput"
+          haslabel="true"
+          type="text"
+          inputicon="blr360"
+          showinputicon="true"
+          @blrTextValueChange="${this.handleFirstInputChange}"
+          required="true"
+        ></blr-text-input>
+        <blr-text-input
+          size="md"
+          placeholder="Placeholder-text"
+          value="${this.secondInputValue}"
+          maxlength="140"
+          label="Label-text"
+          labelappendix="(Appendix)"
+          arialabel="secondInput"
+          name="secondInput"
+          theme="Light"
+          textinputid="secondInput"
+          haslabel="true"
+          type="text"
+          inputicon="blr360"
+          showinputicon="true"
+          @blrTextValueChange="${this.handleSecondInputChange}"
+          required="true"
+        ></blr-text-input>
+        <blr-checkbox
+          theme="Light"
+          size="md"
+          checkedicon="blrCheckmark"
+          indeterminatedicon="blrMinus"
+          haslabel="true"
+          label="I accept the terms and conditions."
+          hintmessage="This is a small hint message"
+          hinticon="blrInfo"
+          erroricon=""
+          arialabel="check Input"
+          checkinputid="checkInputId"
+          name="checkInput"
+          @blrCheckedChange=${this.handleCheckInput}
+          ?checked=${this.checkBoxChecked}
+        ></blr-checkbox>
+      </blr-form>
+    `;
+  }
+
+  private handleSubmit(e) {
+    const slot = this.renderRoot?.querySelector('slot');
+    const assignedNodes = slot?.assignedElements({ flatten: true }) ?? [];
+    assignedNodes.forEach((node: any) => {
+      if (node.name === 'firstInput') {
+        if (node.hasAttribute('required') && node.value === '') {
+          node._onPropChanged({
+            detail: {
+              hasError: true,
+              errorMessage: 'This is a required field',
+            },
+          });
+        } else {
+          this.firstInputValue = node.value;
+        }
+      }
+
+      if (node.name === 'secondInput') {
+        if (node.hasAttribute('required') && node.value === '') {
+          node._onPropChanged({
+            detail: {
+              hasError: true,
+              errorMessage: 'This is a second required field',
+            },
+          });
+        } else {
+          this.secondInputValue = node.value;
+        }
+      }
+
+      if (node.name === 'checkInput' && !node.hasAttribute('checked')) {
+        node._onPropChanged({
+          detail: {
+            hasError: true,
+            errorMessage: 'Error: Unchecked',
+          },
+        });
+      }
+    });
+
+    // just to simulate the value change. Remove later
+    setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent('propChanged', {
+          detail: { hasError: false, errorMessage: '' },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }, 3000);
+
+    console.log(
+      `The submitted value are firstName: ${this.firstInputValue} lastName: ${this.secondInputValue} and TOA checked is ${this.checkBoxChecked}`
+    );
+  }
+
+  private handleFirstInputChange(evt: any) {
+    this.firstInputValue = evt.detail.originalEvent.target.value;
+  }
+
+  private handleSecondInputChange(evt: any) {
+    this.secondInputValue = evt.detail.originalEvent.target.value;
+  }
+
+  private handleCheckInput(evt: any) {
+    this.checkBoxChecked = evt.detail.checkedState;
+  }
+}
+
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrFormExampleWithSlot);
+}
+
+export type BlrFormExampleWithSlotType = Omit<BlrFormExampleWithSlot, keyof LitElement>;

packages/ui-library/src/components/form-example-with-slot/renderFunction.ts

@@ -0,0 +1,7 @@
+import { BlrFormExampleWithSlotType } from '.';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
+
+export const TAG_NAME = 'blr-form-example-with-slot';
+
+export const BlrFormExampleWithSlotRenderFunction = (params: BlrFormExampleWithSlotType) =>
+  genericBlrComponentRenderer<BlrFormExampleWithSlotType>(TAG_NAME, { ...params });

packages/ui-library/src/components/form-example-without-slot/index.css.ts

@@ -0,0 +1,76 @@
+import { typeSafeNestedCss as css } from "../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+
+export const { tokenizedLight: captionLight, tokenizedDark: captionDark } = renderThemedCssStrings((componentTokens) => {
+  const { CaptionComponent } = componentTokens.Forms;
+
+  return css`
+    .blr-form-caption {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      color: ${CaptionComponent.Text.TextColor.Hint};
+
+      &.error {
+        color: ${CaptionComponent.Text.TextColor.Error};
+      }
+
+      &.sm {
+        padding: ${CaptionComponent.Container.Padding.SM};
+        gap: ${CaptionComponent.Container.ItemSpacing.SM};
+
+        .blr-icon {
+          padding-top: ${CaptionComponent.IconWrapper.PaddingTop.SM};
+          height: ${CaptionComponent.Icon.IconSize.SM};
+          width: ${CaptionComponent.Icon.IconSize.SM};
+        }
+
+        .blr-caption-text {
+          padding: ${CaptionComponent.TextWrapper.Padding.SM};
+          font-family: ${CaptionComponent.Text.Typography.SM.fontFamily}, sans-serif;
+          font-weight: ${CaptionComponent.Text.Typography.SM.fontWeight};
+          font-size: ${CaptionComponent.Text.Typography.SM.fontSize};
+          line-height: ${CaptionComponent.Text.Typography.SM.lineHeight};
+        }
+      }
+
+      &.md {
+        padding: ${CaptionComponent.Container.Padding.MD};
+        gap: ${CaptionComponent.Container.ItemSpacing.MD};
+
+        .blr-icon {
+          padding-top: ${CaptionComponent.IconWrapper.PaddingTop.MD};
+          height: ${CaptionComponent.Icon.IconSize.MD};
+          width: ${CaptionComponent.Icon.IconSize.MD};
+        }
+
+        .blr-caption-text {
+          padding: ${CaptionComponent.TextWrapper.Padding.MD};
+          font-family: ${CaptionComponent.Text.Typography.MD.fontFamily}, sans-serif;
+          font-weight: ${CaptionComponent.Text.Typography.MD.fontWeight};
+          font-size: ${CaptionComponent.Text.Typography.MD.fontSize};
+          line-height: ${CaptionComponent.Text.Typography.MD.lineHeight};
+        }
+      }
+
+      &.lg {
+        padding: ${CaptionComponent.Container.Padding.LG};
+        gap: ${CaptionComponent.Container.ItemSpacing.LG};
+
+        .blr-icon {
+          padding-top: ${CaptionComponent.IconWrapper.PaddingTop.LG};
+          height: ${CaptionComponent.Icon.IconSize.LG};
+          width: ${CaptionComponent.Icon.IconSize.LG};
+        }
+
+        .blr-caption-text {
+          padding: ${CaptionComponent.TextWrapper.Padding.LG};
+          font-family: ${CaptionComponent.Text.Typography.LG.fontFamily}, sans-serif;
+          font-weight: ${CaptionComponent.Text.Typography.LG.fontWeight};
+          font-size: ${CaptionComponent.Text.Typography.LG.fontSize};
+          line-height: ${CaptionComponent.Text.Typography.LG.lineHeight};
+        }
+      }
+    }
+  `;
+});