@progressive-development/pd-forms 0.0.13 → 0.0.15

package/stories/button.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+import '../pd-button.js';
+
+export default {
+  title: 'PdForms/Button',
+  component: 'pd-button',
+  argTypes: {},
+};
+
+function ButtonTemplate() {
+  return html` <pd-button text="My Button"></pd-button> `;
+}
+
+export const Button = ButtonTemplate.bind({});
+Button.args = {};

package/stories/checkbox.stories.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import '../pd-checkbox.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 name="Test1" value="true" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+
+    <h3>Checkbox unselected</h3>
+    <pd-checkbox name="Test2" value="false" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+  `;
+}
+
+function SwitchTemplate({ errorMsg }) {
+  return html`
+    <h3>Switch selected</h3>
+    <pd-checkbox name="Test1" isSwitch value="true" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+
+    <h3>Switch unselected</h3>
+    <pd-checkbox name="Test2" isSwitch value="false" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+  `;
+}
+
+export const Checkbox = Template.bind({});
+Checkbox.args = {
+  errorMsg: '',
+};
+
+export const Switch = SwitchTemplate.bind({});
+Switch.args = {
+  errorMsg: '',
+};

package/stories/form-container.stories.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import '../pd-form-container.js';
+import '../pd-form-row.js';
+import '../pd-input.js';
+
+export default {
+  title: 'PdForms/Form Container',
+  component: 'pd-form-container',
+  argTypes: {},
+};
+
+function Template() {
+  return html`
+    <h3>Mit Forms</h3>
+    <pd-form-container>
+      <pd-form-row>
+        <pd-input class="quarter2" id="test1Id" label="Label 1"></pd-input>
+        <pd-input class="quarter2" id="test2Id" label="Label 2"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter4" id="test3Id" label="Label 3"></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 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-container>
+  `;
+}
+
+export const FormContainer = Template.bind({});
+FormContainer.args = {};

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 = {};