@progressive-development/pd-forms 0.0.13 → 0.0.15

package/stories/input.stories.js

@@ -0,0 +1,130 @@
+import { html } from 'lit';
+import '../pd-input.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"
+      style="${style}"
+    ></pd-input>
+
+    <h3>Default Input with value</h3>
+    <pd-input
+      id="test3Id"
+      value="My input value"
+      style="${style}"
+    ></pd-input>
+
+    <h3>Input with value - Error</h3>
+    <pd-input
+      id="test4Id"
+      value="My input value"
+      errorMsg="Fehler aufgetreten"
+      style="${style}"
+    ></pd-input>
+
+    <h3>Input with max lenth and size</h3>
+    <pd-input
+      id="test5Id"
+      maxlength="4"
+      style="${`${style}--squi-input-width: 80px;`}"
+    ></pd-input>
+
+    <h3>Input with place holder and label</h3>
+    <pd-input
+      id="test6Id"
+      label="Input Label 1"
+      placeHolder="Placeholder Text"
+      style="${style}"
+    ></pd-input>
+
+    <h3>Input with place holder and label - disabled</h3>
+    <pd-input
+      id="test7Id"
+      label="Input Label 1"
+      placeHolder="Placeholder Text"
+      ?disabled="${true}"
+      style="${style}"
+    ></pd-input>
+
+    <h3>Input with value and label - disabled</h3>
+    <pd-input
+      id="test8Id"
+      label="Input Label 1"
+      value="My Value"
+      ?disabled="${true}"
+      style="${style}"
+    ></pd-input>
+
+    <h3>Input with value and label - error</h3>
+    <pd-input
+      id="test4Id"
+      label="Test Label"
+      value="My input value"
+      errorMsg="Fehler aufgetreten"
+      style="${style}"
+    ></pd-input>
+  `;
+}
+
+export const Input = Template.bind({});
+Input.args = {};

package/stories/label-value.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import '../pd-label-value.js';
+
+export default {
+  title: 'PdForms/Label Value',
+  component: 'pd-label-value',
+  argTypes: {
+    
+  },
+};
+
+function Template() {  
+  return html`
+    <h1>Label Value Story</h1>
+    <p>Component not used at the moment.</p>
+    <pd-label-value label="Test" value="Mein Wert"></pd-label-value>
+    
+
+    <p>DL Test</p>
+    <dl>
+      <dt>Coffee</dt>
+      <dd>Black hot drink</dd>      
+      <dt>Milk</dt>
+      <dd>White cold drink</dd>
+    </dl> 
+  `;
+}
+
+export const LabelValue = Template.bind({});
+LabelValue.args = {  
+};
+

package/stories/radio-group.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+import '../pd-checkbox.js';
+import '../pd-radio-group.js';
+
+export default {
+  title: 'PdForms/Radio Group',
+  component: 'pd-radio-group',
+  argTypes: {},
+};
+
+function Template({ errorMsg }) {
+  return html`
+    <h1>Radio Group</h1>
+    <p style="color: red;">
+      Working progress, checkbox style not suitable here
+    </p>
+
+    <p>Enter error message in custom properties to show error style</p>
+
+    <h3>Radio Group Horiz.</h3>
+    <pd-radio-group errorMsg="${errorMsg}">
+      <pd-checkbox name="Test1" value="true"
+        >Label zur Checkbox</pd-checkbox
+      >
+      <pd-checkbox name="Test2" value="false"
+        >Label zur Checkbox</pd-checkbox
+      >
+    </pd-radio-group>
+
+    <h3>Radio Group Vert.</h3>
+    <pd-radio-group style="--group-direction: column;" errorMsg="${errorMsg}">
+      <pd-checkbox name="Test3" value="true"
+        >Label zur Checkbox</pd-checkbox
+      >
+      <pd-checkbox name="Test4" value="false"
+        >Label zur Checkbox</pd-checkbox
+      >
+    </pd-radio-group>
+  `;
+}
+
+export const RadioGroup = Template.bind({});
+RadioGroup.args = {
+  errorMsg: '',
+};

package/stories/select.stories.js

@@ -0,0 +1,104 @@
+import { html } from 'lit';
+import '../pd-select.js';
+
+export default {
+  title: 'PdForms/Select',
+  component: 'pd-select',
+  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({
+  selectVals,
+  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>Select default</h3>
+    <pd-select
+      id="testId1"
+      .values="${selectVals}"
+      style="${style}"
+    ></pd-select>
+
+    <h3>Select with label</h3>
+    <pd-select
+      id="testId2"
+      .values="${selectVals}"
+      label="Label for Select"
+      style="${style}"
+    ></pd-select>
+
+    <h3>Select with label - disabled</h3>
+    <pd-select
+      id="testId2"
+      .values="${selectVals}"
+      label="Label for Select"
+      ?disabled="${true}"
+      style="${style}"
+    ></pd-select>
+
+    <h3>Select with label - error</h3>
+    <pd-select
+      id="testId2"
+      .values="${selectVals}"
+      label="Label for Select"
+      errorMsg="Fehler aufgetreten"
+      style="${style}"
+    ></pd-select>
+  `;
+}
+
+export const Select = Template.bind({});
+Select.args = {
+  selectVals: [
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 },
+  ],
+};

package/PdButton.js

@@ -1,3 +0,0 @@
-import { SquiButton } from './src/squi-button.js';
-
-window.customElements.define('squi-button', SquiButton);

package/PdButtonGroup.js

@@ -1,3 +0,0 @@
-import { SquiButtonGroup } from './src/squi-button-group.js';
-
-customElements.define('squi-button-group', SquiButtonGroup);

package/PdCheckbox.js

@@ -1,3 +0,0 @@
-import { SquiCheckbox } from './src/squi-checkbox.js';
-
-window.customElements.define('squi-checkbox', SquiCheckbox);

package/PdFormContainer.js

@@ -1,3 +0,0 @@
-import { SquiFormContainer } from './src/squi-form-container.js';
-
-window.customElements.define('squi-form-container', SquiFormContainer);

package/PdFormRow.js

@@ -1,3 +0,0 @@
-import { SquiFormRow } from './src/squi-form-row.js';
-
-window.customElements.define('squi-form-row', SquiFormRow);

package/PdInput.js

@@ -1,3 +0,0 @@
-import { SquiInput } from './src/squi-input.js';
-
-window.customElements.define('squi-input', SquiInput);

package/PdInputArea.js

@@ -1,3 +0,0 @@
-import { SquiInputArea } from './src/squi-input-area.js';
-
-window.customElements.define('squi-input-area', SquiInputArea);

package/PdRadioGroup.js

@@ -1,3 +0,0 @@
-import { SquiRadioGroup } from './src/squi-radio-group.js';
-
-window.customElements.define('squi-radio-group', SquiRadioGroup);

package/PdSelect.js

@@ -1,3 +0,0 @@
-import { SquiSelect } from './src/squi-select.js';
-
-window.customElements.define('squi-select', SquiSelect);