@progressive-development/pd-forms 0.0.13 → 0.0.14

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);