@progressive-development/pd-forms 0.2.16 → 0.5.0

package/src/stories/checkbox.stories.js

@@ -1,103 +0,0 @@
-import { html } from 'lit';
-import '../../pd-checkbox.js';
-import '../../pd-form-container.js';
-
-export default {
-  title: 'PdForms/Checkbox',
-  component: 'pd-checkbox',
-  parameters: {
-    actions: {
-      handles: ['checkbox-changed'],
-    },
-  },
-};
-
-function Template({ errorMsg }) {
-  return html`
-    <h3>Checkbox selected</h3>
-    <pd-checkbox valueName="Test1" value="true">
-      Label zur Checkbox
-    </pd-checkbox>
-
-    <h3>Checkbox unselected</h3>
-    <pd-checkbox valueName="Test2" value="false">
-      Label zur Checkbox
-    </pd-checkbox>    
-
-    <h3>Checkbox readonly</h3>
-    <pd-checkbox valueName="Test3" value="false" readonly>
-      Label zur Checkbox
-    </pd-checkbox>
-    <pd-checkbox valueName="Test4" value="true" readonly>
-      Label zur Checkbox
-    </pd-checkbox>    
-
-    <h3>Checkbox disabled</h3>
-    <pd-checkbox valueName="Test5" value="false" disabled>
-      Label zur Checkbox
-    </pd-checkbox>
-    <pd-checkbox valueName="Test6" value="true" disabled>
-      Label zur Checkbox
-    </pd-checkbox>
-    
-    <h3>Checkbox required</h3>
-    <pd-form-container id="testCheckboxContainerId">
-      <pd-checkbox valueName="Test7" required>
-        Label zur Checkbox
-      </pd-checkbox>
-    </pd-form-container>
-
-    <h2>Test Validation</h2>
-    <button
-      @click="${() => {
-        document.getElementById('testCheckboxContainerId').dispatchEvent(
-          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
-        );
-      }}"
-    >
-      Test Validate
-    </button>
-  `;
-}
-
-function SwitchTemplate({ errorMsg }) {
-  return html`
-    <h3>Switch selected</h3>
-    <pd-checkbox name="Test1" isSwitch value="true" 
-      >Label zur Checkbox</pd-checkbox
-    >
-
-    <h3>Switch unselected</h3>
-    <pd-checkbox name="Test2" isSwitch value="false" 
-      >Label zur Checkbox</pd-checkbox
-    >
-
-    <h3>Switch disabled</h3>
-    <pd-checkbox name="Test2" isSwitch value="false" disabled 
-      >Label zur Checkbox</pd-checkbox
-    >
-    <h3>Switch disabled</h3>
-    <pd-checkbox name="Test2" isSwitch value="true" disabled 
-      >Label zur Checkbox</pd-checkbox
-    >
-
-    <h3>Switch readonly</h3>
-    <pd-checkbox name="Test2" isSwitch value="false" readonly
-      >Label zur Checkbox</pd-checkbox
-    >
-    <h3>Switch readonly</h3>
-    <pd-checkbox name="Test2" isSwitch value="true" readonly
-      >Label zur Checkbox</pd-checkbox
-    >
-  `;
-}
-
-export const Checkbox = Template.bind({});
-Checkbox.args = {
-  errorMsg: '',
-};
-
-export const Switch = SwitchTemplate.bind({});
-Switch.args = {
-  errorMsg: '',
-};

package/src/stories/form-container.stories.js

@@ -1,100 +0,0 @@
-import { html } from 'lit';
-import '../../pd-form-container.js';
-import '../../pd-form-row.js';
-import '../../pd-input.js';
-import '../../pd-input-file.js';
-import '../../pd-range.js';
-
-export default {
-  title: 'PdForms/Form Container',
-  component: 'pd-form-container',
-  argTypes: {},
-};
-
-const OPTIONS_GENRE = {
-  0: "Keine Auswahl",
-  1: "No-Go",
-  2: "Wenig",
-  3: "Mittel",
-  4: "Viel",
-};
-
-function Template() {
-  return html`
-    <h3>Mit Forms</h3>
-    <pd-form-container id="testFormContainerId" requiredFieldInfo>
-      <pd-form-row>
-        <pd-input class="quarter2" id="test1Id" label="Label 1" required autoCompleteName="email"></pd-input>
-        <pd-input-file class="quarter2" id="test2Id" label="Label 2" required></pd-input-file>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input class="quarter4" id="test3Id" label="Label 3" required></pd-input>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input class="quarter3" id="test4Id" label="Label 4"></pd-input>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input class="quarter1" id="test5Id" label="Label 5"></pd-input>
-        <pd-input class="quarter1" id="test6Id" label="Label 6"></pd-input>
-        <pd-input class="quarter1" id="test7Id" label="Label 7"></pd-input>
-        <pd-input class="quarter1" id="test8Id" label="Label 8"></pd-input>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input class="quarter3" id="test9Id" label="Label 5"></pd-input>
-        <pd-input class="quarter1" id="test10Id" label="Label 6"></pd-input>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input-area class="quarter3-area" id="test19Id" label="Label Area" required></pd-input-area>
-        <pd-input-area class="quarter1-area" id="test20Id" label="Label Area" required
-          requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden.">
-        </pd-input-area>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input class="quarter1" id="test11Id" label="Label 5"></pd-input>
-        <pd-input class="quarter3" id="test12Id" label="Label 6"></pd-input>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input class="quarter1" id="test13Id" label="Label 5"></pd-input>
-        <pd-input class="quarter1" id="test14Id" label="Label 5"></pd-input>
-        <pd-input class="quarter2" id="test15Id" label="Label 6"></pd-input>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input-area class="quarter4-area" id="test16Id" label="Label Area" required></pd-input-area>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-input-area class="quarter2-area" id="test17Id" label="Label Area" required></pd-input-area>
-        <pd-input-area class="quarter2-area" id="test18Id" label="Label Area" required
-          requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden."></pd-input-area>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-range id="testRangeId"
-          label="Range Label"
-          max="12"
-          value="0" .optionValueMapper="${OPTIONS_GENRE}" required>
-        </pd-range>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-range id="testRangeId"
-                  label="Mit Helper"
-                  max="12"
-                  helperTxt="Hier kommt dann kluges hin"
-                  value="0" .optionValueMapper="${OPTIONS_GENRE}" required>
-        </pd-range>
-      </pd-form-row>
-    </pd-form-container>
-
-    <h2>Test Validation</h2>
-      <button
-      @click="${() => {
-        document.getElementById('testFormContainerId').dispatchEvent(
-          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
-        );
-      }}"
-      >
-        Test Validate
-      </button>
-  `;
-}
-
-export const FormContainer = Template.bind({});
-FormContainer.args = {};

package/src/stories/form-row.stories.js

@@ -1,23 +0,0 @@
-import { html } from 'lit';
-import '../../pd-form-row.js';
-
-export default {
-  title: 'PdForms/Form Row',
-  component: 'pd-form-row',
-  argTypes: {},
-};
-
-function Template() {
-  return html`
-    <h3>Noch im test ob Sinnvoll....</h3>
-    <div style="">
-      <pd-form-row>
-        <div style="background-color: blue;">Hier ist es blau</div>
-        <div style="background-color: red;">Hier ist es rot</div>
-      </pd-form-row>
-    </div>
-  `;
-}
-
-export const FormRow = Template.bind({});
-FormRow.args = {};

package/src/stories/input-area.stories.js

@@ -1,129 +0,0 @@
-import { html } from 'lit';
-import '../../pd-input-area.js';
-
-export default {
-  title: 'PdForms/Input Area',
-  component: 'pd-input-area',
-  argTypes: {
-    primaryColor: { control: 'color' },
-    secondaryColor: { control: 'color' },
-    textColor: { control: 'color' },
-    highlightColor: { control: 'color' },
-    errorColor: { control: 'color' },
-    errorBackgroundColor: { control: 'color' },
-    borderRadius: { control: 'text' },
-    displayFont: { control: 'text' },
-    fontSize: { control: 'text' },
-  },
-};
-
-function Template({
-  primaryColor,
-  secondaryColor,
-  textColor,
-  highlightColor,
-  errorColor,
-  errorBackgroundColor,
-  borderRadius,
-  displayFont,
-  fontSize,
-}) {
-  let style = '';
-  if (primaryColor) {
-    style += `--squi-primary-color:${primaryColor};`;
-  }
-  if (secondaryColor) {
-    style += `--squi-secondary-color:${secondaryColor};`;
-  }
-  if (textColor) {
-    style += `--squi-text-color:${textColor};`;
-  }
-  if (highlightColor) {
-    style += `--squi-highlight-color:${highlightColor};`;
-  }
-  if (errorColor) {
-    style += `--squi-error-color:${errorColor};`;
-  }
-  if (errorBackgroundColor) {
-    style += `--squi-error-background-color:${errorBackgroundColor};`;
-  }
-  if (borderRadius) {
-    style += `--squi-border-radius:${borderRadius};`;
-  }
-  if (displayFont) {
-    style += `--squi-display-font:${displayFont};`;
-  }
-  if (fontSize) {
-    style += `--squi-font-size:${fontSize};`;
-  }
-
-  return html`
-    <h3>Input Area default</h3>
-    <pd-input-area id="testId1" style="${style}"></pd-input-area>
-
-    <h3>Input Area default with value</h3>
-    <pd-input-area
-      id="testId2"
-      style="${style}"
-      value="Das ist mein Text-Area Input value"
-    ></pd-input-area>
-
-    <h3>Input Area with value - custom size</h3>
-    <pd-input-area
-      id="testId3"
-      style="${style}"
-      value="Das ist mein Text-Area Input value. Der kann auch ein bißchen länger sein. Weitere Zeilen stehen hier...."
-    ></pd-input-area>
-
-    <h3>Input Area with placeholder - custom size</h3>
-    <pd-input-area
-      id="testId4"
-      style="${style}"
-      placeHolder="Hier steht ein placeholder Text"
-    ></pd-input-area>
-
-    <h3>
-      Input Area with value - custom size - label => ToDo: Derzeit ohne
-      cols/rows nur mit css props
-    </h3>
-    <pd-input-area
-      id="testId5"
-      style="${style}"
-      label="Area Label 1"
-      rows="10"
-      value="Mein Text..."
-    ></pd-input-area>
-
-    <h3>Input Area with error - custom size - label</h3>
-    <pd-input-area
-      id="testId6"
-      style="${style}"
-      label="Area Label 2"
-      value="Mein Text..."
-      errorMsg="Fehler augetreten"
-    ></pd-input-area>
-
-    <h3>Input Area disabled - custom size - label</h3>
-    <pd-input-area
-      id="testId7"
-      style="${style}"
-      label="Area Label 3"
-      value="Mein Text..."
-      ?disabled="${true}"
-    ></pd-input-area>
-
-    <h3>Input Area readonly - custom size - label</h3>
-    <pd-input-area
-      id="testId8"
-      style="${style}"
-      cols="60"
-      rows="3"
-      label="Area Label 4"
-      value="Mein Text..."
-      ?readonly="${true}"
-    ></pd-input-area>
-  `;
-}
-
-export const InputArea = Template.bind({});
-InputArea.args = {};

package/src/stories/input-file.stories.js

@@ -1,111 +0,0 @@
-import { html } from 'lit';
-import '../../pd-input-file.js';
-import { ICON_DATE } from '@progressive-development/pd-icon/src/PdIcon.js';
-
-export default {
-  title: 'PdForms/InputFile',
-  component: 'pd-input-file',
-  argTypes: {
-    primaryColor: { control: 'color' },
-    secondaryColor: { control: 'color' },
-    textColor: { control: 'color' },
-    highlightColor: { control: 'color' },
-    errorColor: { control: 'color' },
-    errorBackgroundColor: { control: 'color' },
-    borderRadius: { control: 'text' },
-    displayFont: { control: 'text' },
-    fontSize: { control: 'text' },
-  },
-};
-
-function Template({
-  primaryColor,
-  secondaryColor,
-  textColor,
-  highlightColor,
-  errorColor,
-  errorBackgroundColor,
-  borderRadius,
-  displayFont,
-  fontSize,
-  accept
-}) {
-  let style = '';
-  if (primaryColor) {
-    style += `--squi-primary-color:${primaryColor};`;
-  }
-  if (secondaryColor) {
-    style += `--squi-secondary-color:${secondaryColor};`;
-  }
-  if (textColor) {
-    style += `--squi-text-color:${textColor};`;
-  }
-  if (highlightColor) {
-    style += `--squi-highlight-color:${highlightColor};`;
-  }
-  if (errorColor) {
-    style += `--squi-error-color:${errorColor};`;
-  }
-  if (errorBackgroundColor) {
-    style += `--squi-error-background-color:${errorBackgroundColor};`;
-  }
-  if (borderRadius) {
-    style += `--squi-border-radius:${borderRadius};`;
-  }
-  if (displayFont) {
-    style += `--squi-display-font:${displayFont};`;
-  }
-  if (fontSize) {
-    style += `--squi-font-size:${fontSize};`;
-  }
-  return html`
-    <h3>Default Input</h3>
-    <pd-input-file id="test1Id" style="${style}"></pd-input-file>
-
-    <h3>Input with Icon</h3>
-    <pd-input-file
-      icon-right
-      id="testIconId"
-      icon="${ICON_DATE}"
-    ></pd-input-file>
-
-    <h3>Input with left Icon</h3>
-    <pd-input-file
-      icon-left
-      id="testIcon2Id"
-      icon="${ICON_DATE}"
-    ></pd-input-file>
-
-    <h3>Input with max lenth</h3>
-    <pd-input-file
-      id="test5Id"
-      maxlength="4"
-    ></pd-input-file>    
-
-    <h3>Input with accept</h3>
-    <pd-input-file
-      id="test5Id"
-      maxlength="4"
-      accept="${accept}"
-    ></pd-input-file>    
-
-    <h3>Input with label</h3>
-    <pd-input-file
-      id="test6Id"
-      label="Input Label 1"
-    ></pd-input-file>
-
-    <h3>Input with label - disabled</h3>
-    <pd-input-file
-      id="test7Id"
-      label="Input Label 1"
-      disabled
-    ></pd-input-file>
-
-  `;
-}
-
-export const InputFile = Template.bind({});
-InputFile.args = {
-  accept: "text/*"
-};

package/src/stories/input.stories.js

@@ -1,179 +0,0 @@
-import { html } from 'lit';
-import '../../pd-input.js';
-import { ICON_CAMERA, ICON_DATE } from '@progressive-development/pd-icon/src/PdIcon.js';
-
-export default {
-  title: 'PdForms/Input',
-  component: 'pd-input',
-  argTypes: {
-    primaryColor: { control: 'color' },
-    secondaryColor: { control: 'color' },
-    textColor: { control: 'color' },
-    highlightColor: { control: 'color' },
-    errorColor: { control: 'color' },
-    errorBackgroundColor: { control: 'color' },
-    borderRadius: { control: 'text' },
-    displayFont: { control: 'text' },
-    fontSize: { control: 'text' },
-  },
-};
-
-function Template({
-  primaryColor,
-  secondaryColor,
-  textColor,
-  highlightColor,
-  errorColor,
-  errorBackgroundColor,
-  borderRadius,
-  displayFont,
-  fontSize,
-}) {
-  let style = '';
-  if (primaryColor) {
-    style += `--squi-primary-color:${primaryColor};`;
-  }
-  if (secondaryColor) {
-    style += `--squi-secondary-color:${secondaryColor};`;
-  }
-  if (textColor) {
-    style += `--squi-text-color:${textColor};`;
-  }
-  if (highlightColor) {
-    style += `--squi-highlight-color:${highlightColor};`;
-  }
-  if (errorColor) {
-    style += `--squi-error-color:${errorColor};`;
-  }
-  if (errorBackgroundColor) {
-    style += `--squi-error-background-color:${errorBackgroundColor};`;
-  }
-  if (borderRadius) {
-    style += `--squi-border-radius:${borderRadius};`;
-  }
-  if (displayFont) {
-    style += `--squi-display-font:${displayFont};`;
-  }
-  if (fontSize) {
-    style += `--squi-font-size:${fontSize};`;
-  }
-  return html`
-    <h3>Default Input</h3>
-    <pd-input id="test1Id" style="${style}"></pd-input>
-
-    <h3>Default Input with place holder</h3>
-    <pd-input
-      id="test2Id"
-      placeHolder="Placeholder Text"      
-    ></pd-input>
-
-    <h3>Default Input only Numbers</h3>
-    <pd-input
-      id="test2Id"
-      onlyNumbers
-      placeHolder="Placeholder Text"      
-    ></pd-input>
-
-    <h3>Default Input with value</h3>
-    <pd-input
-      id="test3Id"
-      value="My input value"      
-    ></pd-input>
-
-    <h3>Input with value - Error</h3>
-    <pd-input
-      id="test4Id"
-      value="My input value"
-      errorMsg="Fehler aufgetreten"      
-    ></pd-input>
-
-    <h3>Input with right assigned text</h3>
-    <pd-input
-      text-right
-      id="testRightTextId"
-      value="Right Text"
-    ></pd-input>
-
-    <h3>Input with right assigned text and icon</h3>
-    <pd-input
-      id="testRightTextId"  
-      text-right
-      icon-right
-      icon="${ICON_DATE}"      
-      value="Right Text"
-    ></pd-input>
-
-    <h3>Input with Icon</h3>
-    <pd-input
-      icon-right
-      id="testIconId"
-      value="Input value"
-      icon="${ICON_DATE}"
-    ></pd-input>
-
-    <h3>Big Input with left Icon</h3>
-    <pd-input
-      style="--pd-input-field-height: 4em;"
-      icon-left
-      id="testIcon2Id"
-      value="Input value"
-      icon="${ICON_DATE}"
-    ></pd-input>
-
-    <h3>Input with max lenth and size</h3>
-    <pd-input
-      id="test5Id"
-      maxlength="4"
-      style="${`--pd-input-field-width: 80px;`}"
-    ></pd-input>
-
-    <h3>Input with place holder and label</h3>
-    <pd-input
-      id="test6Id"
-      label="Input Label 1"
-      placeHolder="Placeholder Text"      
-    ></pd-input>
-
-    <h3>Input with place holder and label - disabled</h3>
-    <pd-input
-      id="test7Id"
-      label="Input Label 1"
-      placeHolder="Placeholder Text"
-      disabled
-    ></pd-input>
-
-    <h3>Input with value and label - disabled</h3>
-    <pd-input
-      id="test8Id"
-      label="Input Label 1"
-      value="My Value"
-      disabled
-    ></pd-input>
-
-    <h3>Input with place holder and label - readonly</h3>
-    <pd-input
-      id="test7Id"
-      label="Input Label 1"
-      placeHolder="Placeholder Text"
-      readonly
-    ></pd-input>
-
-    <h3>Input with value and label - readonly</h3>
-    <pd-input
-      id="test8Id"
-      label="Input Label 1"
-      value="My Value"
-      readonly
-    ></pd-input>
-
-    <h3>Input with value and label - error</h3>
-    <pd-input
-      id="test4Id"
-      label="Test Label"
-      value="My input value"
-    ></pd-input>
-  `;
-}
-
-export const Input = Template.bind({});
-Input.args = {};

package/src/stories/radio-group.stories.js

@@ -1,54 +0,0 @@
-import { html } from 'lit';
-import '../../pd-checkbox.js';
-import '../../pd-radio-group.js';
-import '../../pd-form-container.js';
-
-export default {
-  title: 'PdForms/Radio Group',
-  component: 'pd-radio-group',
-  argTypes: {},
-};
-
-function Template() {
-  return html`
-    <h1>Radio Group</h1>
-    <p style="color: red;">
-      Working progress, checkbox style not suitable here
-    </p>
-
-    <pd-form-container id="testGroupboxContainerId">
-      
-      <h3>Radio Group Horiz.</h3>
-        <pd-radio-group required>
-          <pd-checkbox name="Test1" value="false" valueName="Test1">Label zur Checkbox</pd-checkbox>
-          <pd-checkbox name="Test2" value="false" valueName="Test2">Label zur Checkbox</pd-checkbox>
-        </pd-radio-group>
-
-      <h3>Radio Group Vert.</h3>
-        <pd-radio-group style="--group-direction: column;" required>
-          <pd-checkbox name="Test3" value="false" valueName="Test12">Label zur Checkbox</pd-checkbox>
-          <pd-checkbox name="Test4" value="false" valueName="Test13">Label zur Checkbox</pd-checkbox>
-        </pd-radio-group>
-    </pd-form-container>
-
-    <h2>Test Validation</h2>
-    <button
-      @click="${() => {
-        document
-          .getElementById('testGroupboxContainerId')
-          .dispatchEvent(
-            new CustomEvent('validate-form', {
-              detail: { errorMap: new Map() },
-            })
-          );
-      }}"
-    >
-      Test Validate
-    </button>
-  `;
-}
-
-export const RadioGroup = Template.bind({});
-RadioGroup.args = {
-  
-};