@scania/tegel 0.0.1-beta

package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts

@@ -0,0 +1,20 @@
+export declare class InlineTabsFullbleed {
+  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  modeVariant: 'primary' | 'secondary';
+  host: HTMLElement;
+  tabs: Array<any>;
+  showLeftScroll: boolean;
+  showRightScroll: boolean;
+  navWrapperElement: HTMLElement;
+  componentWidth: number;
+  buttonsWidth: number;
+  scrollWidth: number;
+  buttonWidth: number;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  _calculateButtonWidth(): void;
+  _scrollRight(): void;
+  _scrollLeft(): void;
+  _evaluateScrollButtons(): void;
+  render(): any;
+}

package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+  };
+  args: {
+    modeVariant: string;
+  };
+};
+export default _default;
+export declare const InlineTabsFullbleed: any;

package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts

@@ -0,0 +1,18 @@
+export declare class NavigationTabs {
+  host: HTMLElement;
+  tabs: Array<any>;
+  showLeftScroll: boolean;
+  showRightScroll: boolean;
+  navWrapperElement: HTMLElement;
+  componentWidth: number;
+  buttonsWidth: number;
+  scrollWidth: number;
+  buttonWidth: number;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  _calculateButtonWidth(): void;
+  _scrollRight(): void;
+  _scrollLeft(): void;
+  _evaluateScrollButtons(): void;
+  render(): any;
+}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+};
+export default _default;
+export declare const NavigationTabs: any;

package/dist/types/components/textarea/textarea.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Textarea {
+  /** Textinput for focus state */
+  textEl?: HTMLTextAreaElement;
+  /** Label text */
+  label: string;
+  /** Name attribute */
+  name: string;
+  /** Helper text */
+  helper: string;
+  /** Textarea cols attribute */
+  cols: number;
+  /** Textarea rows attribute */
+  rows: number;
+  /** Position of the label for the textfield. */
+  labelPosition: 'inside' | 'outside' | 'no-label';
+  /** Placeholder text */
+  placeholder: string;
+  /** Value of the input text */
+  value: string;
+  /** Set input in disabled state */
+  disabled: boolean;
+  /** Set input in readonly state */
+  readOnly: boolean;
+  /** Error state of input */
+  state: 'error' | 'success' | 'default';
+  /** Max length of input */
+  maxLength: number;
+  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  modeVariant: 'primary' | 'secondary';
+  /** Control of autofocus */
+  autoFocus: boolean;
+  /** Listen to the focus state of the input */
+  focusInput: any;
+  /** Change event for the textarea */
+  customChange: EventEmitter;
+  handleInput(e: any): void;
+  handleFocusClick(): void;
+  handleChange(e: any): void;
+  render(): any;
+}

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

@@ -0,0 +1,111 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    placeholder: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      description: string;
+      name: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    readonly: {
+      description: string;
+      name: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    label: {
+      description: string;
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+    labelPosition: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+    };
+    helper: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    maxLength: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    rows: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    state: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    variant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+  };
+  args: {
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    label: string;
+    labelPosition: string;
+    helper: string;
+    maxLength: number;
+    rows: number;
+    state: string;
+    variant: string;
+  };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/textfield/textfield.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Textfield {
+  /** Textinput for focus state */
+  textInput?: HTMLInputElement;
+  /** Which input type, text, password or similar */
+  type: 'text' | 'password';
+  /** Position of the label for the textfield. */
+  labelPosition: 'inside' | 'outside' | 'no-label';
+  /** Label text */
+  label: string;
+  /** Placeholder text */
+  placeholder: string;
+  /** Value of the input text */
+  value: string;
+  /** Set input in disabled state */
+  disabled: boolean;
+  /** Set input in readonly state */
+  readonly: boolean;
+  /** Size of the input */
+  size: 'sm' | 'md' | 'lg';
+  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  modeVariant: 'primary' | 'secondary';
+  /** With setting */
+  noMinWidth: boolean;
+  /** Name property */
+  name: string;
+  /** Error state of input */
+  state: 'error' | 'success' | 'default';
+  /** Max length of input */
+  maxLength: number;
+  /** Autofocus for input */
+  autofocus: boolean;
+  /** Listen to the focus state of the input */
+  focusInput: any;
+  /** Change event for the textfield */
+  customChange: EventEmitter;
+  handleInput(e: any): void;
+  handleChange(e: any): void;
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocusClick(): void;
+  render(): any;
+}

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

@@ -0,0 +1,176 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    placeholderText: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    type: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+        options: string[];
+      };
+    };
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+        options: string[];
+      };
+    };
+    minWidth: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    disabled: {
+      description: string;
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+    readonly: {
+      description: string;
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+    label: {
+      description: string;
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+    labelPosition: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+    };
+    prefix: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    prefixType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    suffix: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    suffixType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    helper: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    maxLength: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    state: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    variant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+  };
+  args: {
+    placeholderText: string;
+    disabled: boolean;
+    readonly: boolean;
+    label: string;
+    labelPosition: string;
+    helper: string;
+    maxLength: number;
+    state: string;
+    variant: string;
+    suffix: boolean;
+    suffixType: string;
+    prefix: boolean;
+    prefixType: string;
+    minWidth: string;
+    size: string;
+    type: string;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -0,0 +1,58 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    toastType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    subheader: {
+      name: string;
+      description: string;
+    };
+    link: {
+      name: string;
+      description: string;
+    };
+    iconType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: any[];
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+  };
+  args: {
+    toastType: string;
+    subheader: boolean;
+    link: boolean;
+    iconType: string;
+    icon: string;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -0,0 +1,42 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    size: {
+      name: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+    };
+    headline: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+  args: {
+    size: string;
+    headline: string;
+    disabled: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -0,0 +1,20 @@
+import type { Placement } from '@popperjs/core';
+export declare class Tooltip {
+  /** In case tooltip contains only text, no HTML, text can be passed by this prop */
+  text: string;
+  /** CSS selector of element on which tooltip is used on.  */
+  selector: string;
+  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */
+  mouseOverTooltip: boolean;
+  /** Prop in control of showing and hiding prop */
+  show: boolean;
+  /** Placement of tooltip. Possible values: auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end. */
+  placement: Placement;
+  target: any;
+  border: string;
+  offsetSkidding: number;
+  offsetDistance: number;
+  tooltip: HTMLInputElement;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,54 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    tooltipPosition: {
+      name: string;
+      control: {
+        type: string;
+        options: string[];
+      };
+      description: string;
+    };
+    text: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    slot: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    mouseOverTooltip: {
+      name: string;
+      control: string;
+      description: string;
+    };
+  };
+  args: {
+    tooltipPosition: string;
+    text: string;
+    slot: string;
+    mouseOverTooltip: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/utility/colour/background-color.stories.d.ts

@@ -0,0 +1,58 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+  argTypes: {
+    backgroundColor: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: {
+        Red: string;
+        Blue: string;
+        Grey: string;
+      };
+    };
+    greyScale: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+    redScale: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+    blueScale: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const backgroundColor: any;