@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/types/components/button/button-native.stories.d.ts

@@ -0,0 +1,148 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    chromatic: {
+      disableSnapshot: boolean;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    text: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        truthy: boolean;
+      };
+    };
+    btnType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    modeVariant: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    fullbleed: {
+      name: string;
+      defaultValue: boolean;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    disabled: {
+      name: string;
+      type: string;
+      description: string;
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    onlyIcon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: any[];
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+    iconType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+  };
+  args: {
+    text: string;
+    btnType: string;
+    size: string;
+    modeVariant: string;
+    fullbleed: boolean;
+    disabled: boolean;
+    onlyIcon: boolean;
+    icon: string;
+    iconType: string;
+  };
+};
+export default _default;
+export declare const Native: any;
+export declare const NativeWithIcon: any;
+export declare const NativeOnlyIcon: any;

package/dist/types/components/button/button-webcomponent.stories.d.ts

@@ -0,0 +1,147 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    chromatic: {
+      disableSnapshot: boolean;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    text: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        truthy: boolean;
+      };
+    };
+    btnType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    size: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+      description: string;
+    };
+    modeVariant: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    fullbleed: {
+      name: string;
+      type: string;
+      description: string;
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        truthy: boolean;
+      };
+    };
+    disabled: {
+      name: string;
+      type: string;
+      description: string;
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    onlyIcon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: any[];
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+    iconType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+  };
+  args: {
+    text: string;
+    btnType: string;
+    size: string;
+    modeVariant: string;
+    fullbleed: boolean;
+    disabled: boolean;
+    onlyIcon: boolean;
+    icon: string;
+    iconType: string;
+  };
+};
+export default _default;
+/** Button as web component */
+export declare const WebComponent: any;
+export declare const WebComponentWithIcon: any;
+export declare const WebComponentOnlyIcon: any;

package/dist/types/components/card/card.stories.d.ts

@@ -0,0 +1,138 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    header: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    subheader: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    bodyText: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    bodyDivider: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    cardBottom: {
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+    clickable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    bodyImg: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    imageTop: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    headerImg: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    headerPlacement: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+  args: {
+    header: string;
+    subheader: string;
+    headerImg: boolean;
+    headerPlacement: string;
+    bodyImg: boolean;
+    bodyText: string;
+    bodyDivider: boolean;
+    cardBottom: string;
+    modeVariant: string;
+    clickable: boolean;
+  };
+};
+export default _default;
+export declare const Native: any;

package/dist/types/components/card/sdds-card.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SddsCard {
+  /** Variant of the card based on the theme used. */
+  modeVariant: 'primary' | 'secondary';
+  /** Placement of the header */
+  headerPlacement: 'above' | 'below';
+  /** Text in the header */
+  header: string;
+  /** Subheader text in the header */
+  subheader: string;
+  /** Header image src */
+  headerImg: string;
+  /** Alt text for the header image */
+  headerImgAlt: string;
+  /** Body image src */
+  bodyImg: string;
+  /** Alt text for the body image */
+  bodyImgAlt: string;
+  /** Divider for the body */
+  bodyDivider: boolean;
+  /** Makes the card clickable. */
+  clickable: boolean;
+  /** ID for the card, must be unique.
+   *
+   * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.
+   */
+  cardId: string;
+  /** Sends unique card identifier when the card is clicked, if clickable=true */
+  sddsClick: EventEmitter<{
+    cardId: string;
+  }>;
+  hostElement: HTMLSddsCardElement;
+  hasCardBottomSlot: boolean;
+  hasCardBodySlot: boolean;
+  connectedCallback(): void;
+  handleClick: () => void;
+  getCardContent: () => any;
+  render(): any;
+}

package/dist/types/components/card/sdds-card.stories.d.ts

@@ -0,0 +1,139 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    header: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    subheader: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    headerImg: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    headerPlacement: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    bodyContent: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    clickable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    bodyDivider: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    bodyImg: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    imageTop: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    cardBottom: {
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+  args: {
+    header: string;
+    subheader: string;
+    headerImg: boolean;
+    headerPlacement: string;
+    bodyImg: boolean;
+    bodyContent: string;
+    bodyDivider: boolean;
+    cardBottom: string;
+    modeVariant: string;
+    clickable: boolean;
+  };
+};
+export default _default;
+export declare const WebComponent: any;

package/dist/types/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    checked: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    label: {
+      name: string;
+      description: string;
+      type: string;
+    };
+  };
+  args: {
+    disabled: boolean;
+    checked: boolean;
+    label: string;
+  };
+};
+export default _default;
+export declare const Native: any;

package/dist/types/components/checkbox/sdds-checkbox.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HostElement } from '../../stencil-public-runtime';
+export declare class SddsCheckbox {
+  /** Name for the checkbox's input element. */
+  name: string;
+  /** ID for the checkbox's input element. Randomly generated if not specified. */
+  checkboxId: string;
+  /** Sets the checkbox in a disabled state */
+  disabled: boolean;
+  /** Make the checkbox required */
+  required: boolean;
+  /** Sets the checkbox as checked */
+  checked: boolean;
+  /** Value for the checkbox */
+  value: string;
+  host: HostElement;
+  /** Toggles the checked value of the component. */
+  toggleCheckbox(): Promise<{
+    checkboxId: string;
+    checked: boolean;
+  }>;
+  /** Sends unique checkbox identifier and checked status when it is checked/unchecked. */
+  sddsChange: EventEmitter<{
+    checkboxId: string;
+    checked: boolean;
+    value?: string;
+  }>;
+  handleChange: () => void;
+  /** Focus event for the checkbox */
+  sddsFocus: EventEmitter<FocusEvent>;
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event: any): void;
+  /** Blur event for the checkbox */
+  sddsBlur: EventEmitter<FocusEvent>;
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event: any): void;
+  render(): any;
+}

package/dist/types/components/checkbox/sdds-checkbox.stories.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    checked: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    label: {
+      name: string;
+      description: string;
+      type: string;
+    };
+  };
+  args: {
+    disabled: boolean;
+    checked: boolean;
+    label: string;
+  };
+};
+export default _default;
+export declare const WebComponent: any;