@progressive-development/pd-forms 0.0.13 → 0.0.14

package/stories/index.stories.js

@@ -1,44 +1,312 @@
 import { html } from 'lit';
-import '../pd-forms.js';
+
+import '../pd-button.js';
+import '../pd-button-goup.js';
+import '../pd-checkbox.js';
+import '../pd-input.js';
+import '../pd-input-area.js';
+import '../pd-radio-group.js';
+import '../pd-select.js';
 
 export default {
-  title: 'PdForms',
+  title: 'Form Examples',
   component: 'pd-forms',
   argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
+    gradient: { control: 'boolean' },
+    primaryColor: { control: 'color' },
+    secondaryColor: { control: 'color' },
+    thirdColor: { control: 'color' },
     textColor: { control: 'color' },
+    highlightColor: { control: 'color' },
+    errorColor: { control: 'color' },
+    errorBackgroundColor: { control: 'color' },
+    borderRadius: { control: 'text' },
+    displayFont: { control: 'text' },
+    fontSize: { control: 'text' },
+    inputHeigth: { control: 'text' },
   },
 };
 
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
-  return html`
-    <pd-forms
-      style="--pd-forms-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
+function Template({
+      selectVals,
+      gradient,
+      primaryColor,
+      secondaryColor,
+      thirdColor,
+      textColor,
+      highlightColor,
+      errorColor,
+      errorBackgroundColor,
+      borderRadius,
+      displayFont,
+      fontSize,
+      inputHeigth,
+    }) {
+
+  let style = '';
+  if (primaryColor) {
+    style += `--squi-primary-color:${primaryColor};`;
+  }
+  if (secondaryColor) {
+    style += `--squi-secondary-color:${secondaryColor};`;
+  }
+  if (thirdColor) {
+    style += `--squi-third-color:${thirdColor};`;
+  }
+  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};`;
+  }
+  if (inputHeigth) {
+    style += `--squi-input-height:${inputHeigth};`;
+  }
+
+return html`
+    <h3>Defaults Inputs with labels</h3>
+    <div
+      style="display: flex; justify-content: space-between; max-width: 800px"
     >
-      ${slot}
-    </pd-forms>
-  `;
-}
+      <pd-select
+        id="testId1"
+        ?gradient="${gradient}"
+        style="${style}"
+        label="Select Label"
+      ></pd-select>
+      <pd-input
+        id="testId1"
+        ?gradient="${gradient}"
+        style="${style}"
+        label="Input Label"
+      ></pd-input>
+      <pd-input-area
+        id="testId2"
+        ?gradient="${gradient}"
+        style="${style}"
+        label="Input Area Label"
+      ></pd-input-area>
+    </div>
 
-export const Regular = Template.bind({});
+    <div
+      style="display: flex; justify-content: space-between; max-width: 800px"
+    >
+      <pd-select
+        id="testId1"
+        ?gradient="${gradient}"
+        .values="${selectVals}"
+        style="${style}"
+        label="Select Label"
+      ></pd-select>
+      <pd-input
+        id="testId1"
+        ?gradient="${gradient}"
+        style="${style}"
+        label="Input Label"
+        value="My Value"
+      ></pd-input>
+      <pd-input-area
+        id="testId2"
+        ?gradient="${gradient}"
+        style="${style}"
+        label="Input Area Label"
+        value="My Value Area Text and ..."
+      ></pd-input-area>
+    </div>
 
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
+    <div
+      style="display: flex; justify-content: space-between; max-width: 800px"
+    >
+      <pd-select
+        id="testId1"
+        .values="${selectVals}"
+        ?gradient="${gradient}"
+        style="${style}"
+        label="Select Label"
+        errorMsg="Fehler 1"
+      ></pd-select>
+      <pd-input
+        id="testId1"
+        style="${style}"
+        ?gradient="${gradient}"
+        label="Input Label"
+        value="My Value"
+        errorMsg="Fehler 2"
+      ></pd-input>
+      <pd-input-area
+        id="testId2"
+        style="${style}"
+        ?gradient="${gradient}"
+        label="Input Area Label"
+        errorMsg="Fehler 3"
+        value="My Value Area Text and ..."
+      ></pd-input-area>
+    </div>
 
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
+    <div
+      style="display: flex; justify-content: space-between; max-width: 800px"
+    >
+      <pd-select
+        id="testId1"
+        .values="${selectVals}"
+        ?gradient="${gradient}"
+        style="${style}"
+        ?disabled="${true}"
+        label="Select Label"
+      ></pd-select>
+      <pd-input
+        id="testId1"
+        style="${style}"
+        ?gradient="${gradient}"
+        label="Input Label"
+        ?disabled="${true}"
+        value="My Value"
+      ></pd-input>
+      <pd-input-area
+        id="testId2"
+        style="${style}"
+        ?gradient="${gradient}"
+        label="Input Area Label"
+        ?disabled="${true}"
+        value="My Value Area Text and ..."
+      ></pd-input-area>
+    </div>
 
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
+    <div
+      style="display: flex; justify-content: space-between; max-width: 800px"
+    >
+      <pd-select
+        id="testId1"
+        .values="${selectVals}"
+        ?gradient="${gradient}"
+        style="${style}"
+        ?disabled="${true}"
+        label="Select ohne Placeholder"
+      ></pd-select>
+      <pd-input
+        id="testId1"
+        style="${style}"
+        ?gradient="${gradient}"
+        label="Input Label"
+        placeHolder="Placeholder Text"
+      ></pd-input>
+      <pd-input-area
+        id="testId2"
+        style="${style}"
+        ?gradient="${gradient}"
+        label="Input Area Label"
+        placeHolder="Placeholder Text"
+      ></pd-input-area>
+    </div>
+
+    <h3>Radio & Switch</h3>
+    <div
+      style="display: flex; justify-content: space-between; max-width: 1000px"
+    >
+      <pd-checkbox name="Test1" value="true"
+        >Label zur Checkbox</pd-checkbox
+      >
+      <pd-checkbox name="Test2" value="false"
+        >Label zur Checkbox</pd-checkbox
+      >
+      <pd-checkbox name="Test1" isSwitch value="true"
+        >Label zur Checkbox</pd-checkbox
+      >
+      <pd-checkbox name="Test2" isSwitch value="false"
+        >Label zur Checkbox</pd-checkbox
+      >
+    </div>
+
+    <h3>Radio Group</h3>
+    <pd-radio-group>
+      <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>
+    <pd-radio-group style="--group-direction: column;">
+      <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>
+
+    <h3>Buttons</h3>
+    <pd-button
+      ?gradient="${gradient}"
+      style="${style}"
+      text="Primary"
+      ?primary="${true}"
+    ></pd-button>
+    <pd-button
+      ?gradient="${gradient}"
+      style="${style}"
+      text="Normal"
+    ></pd-button>
+    <pd-button
+      ?gradient="${gradient}"
+      style="${style}"
+      ?disabled="${true}"
+      text="Disabled"
+    ></pd-button>
+    <pd-button
+      ?gradient="${gradient}"
+      style="${style}"
+      text="Primary Disabled"
+      ?disabled="${true}"
+      ?primary="${true}"
+    ></pd-button>
+
+    <h3>Button Group</h3>
+    <pd-button-group
+      @button-click="${e => alert('Button click:', e)}"
+      .buttons="${[
+        { text: 'Button 1' },
+        { text: 'Button 2' },
+        { text: 'Button 3' },
+        { text: 'Button 4' },
+      ]}"
+    >
+    </pd-button-group>
+
+    <pd-button-group
+      .buttons="${[
+        { text: 'Button 1' },
+        { text: 'Button 2', visibility: 'hidden' },
+        { text: 'Button 3' },
+        { text: 'Button 4' },
+      ]}"
+    >
+    </pd-button-group>
+  `;
+}
+
+export const FormExamples = Template.bind({});
+FormExamples.args = {
+  selectVals: [
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 },
+  ],
+  gradient: false,
 };
+

package/stories/input-area.stories.js

@@ -0,0 +1,129 @@
+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/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: '',
+};