@scania/tegel 0.0.9 → 0.0.11

package/dist/types/components/accordion/accordion-item/accordion-item.d.ts

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For content of an expanded accordion.
+ * @slot header - Slot for the Accordion Item header.
+ */
 export declare class TdsAccordionItem {
   /** The header gives users the context about the additional information available inside the panel */
   header: string;

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

@@ -1,3 +1,6 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For accordion items.
+ */
 export declare class TdsAccordion {
   /** Set the variant of the Accordion. */
   modeVariant: 'primary' | 'secondary';

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

@@ -0,0 +1,77 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    iconPosition: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: {
+        End: string;
+        Start: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    paddingReset: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  parameters: {
+    notes: {
+      Accordion: any;
+      'Accordion Item': any;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  args: {
+    modeVariant: string;
+    iconPosition: string;
+    paddingReset: boolean;
+    disabled: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -0,0 +1,73 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: {
+        Large: string;
+        Small: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    value: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        neq: string;
+      };
+    };
+    hidden: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    demoCode: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    size: string;
+    value: number;
+    hidden: boolean;
+    demoCode: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,12 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot header - Slot for the Header of the Banner
+ * @slot subheader - Slot for the Subheader of the Banner
+ * @slot bottom - Slot for the bottom part of the Banner, used for links.
+ */
 export declare class TdsBanner {
   host: HTMLElement;
-  /** Name of the icon for the component. For error and information type, the icon is predefined. */
+  /** Name of the icon for the component. For error and information variant, the icon is predefined. */
   icon: string;
   /** Header text. */
   header: string;
-  /** Type of Banner */
-  type: 'error' | 'information' | 'none';
+  /** Subheader text. */
+  subheader: string;
+  /** Variant of Banner */
+  variant: 'error' | 'information' | 'none';
   /** ID used for internal table functionality and events, must be unique.
    *
    * **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,
@@ -17,8 +24,6 @@ export declare class TdsBanner {
   persistent: boolean;
   /** Hides the Banner */
   hidden: boolean;
-  hasSubheader: boolean;
-  hasLink: boolean;
   /** Sends a unique Banner identifier when the close button is pressed. */
   tdsClose: EventEmitter<{
     bannerId: string;

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

@@ -0,0 +1,82 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    variant: {
+      name: string;
+      description: string;
+      options: string[];
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    header: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    subheader: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    bottom: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: any[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+    persistent: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    variant: string;
+    header: string;
+    subheader: string;
+    bottom: string;
+    icon: string;
+    persistent: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,3 +1,6 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the content.
+ */
 export declare class TdsBlock {
   host: HTMLElement;
   /** Mode variant of the component, based on current mode. */

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

@@ -0,0 +1,32 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+  };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -1,7 +1,8 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a native <code>&lt;a></code> element.
+ */
 export declare class TdsBreadcrumb {
   /** Boolean for the current link */
   current: boolean;
-  /** Toggle the disabled state for the Breadcrumb */
-  disabled: boolean;
   render(): any;
 }

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

@@ -1,5 +1,7 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the breadcrumb elements.
+ */
 export declare class TdsBreadcrumbs {
   el: HTMLElement;
-  connectedCallback(): void;
   render(): any;
 }

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

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

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

@@ -1,9 +1,16 @@
+/**
+ * @slot label - Slot for the text injection. Serves as alternative to text prop.
+ * @slot icon - Slot used to display an Icon in the Button.
+ */
 export declare class TdsButton {
   host: HTMLElement;
   /** Text displayed inside the Button */
   text: string;
-  /** Type of Button */
-  type: 'primary' | 'secondary' | 'ghost' | 'danger';
+  /** Button's type */
+  type: 'button' | 'submit' | 'reset';
+  /** Variation of Button's design */
+  variant: 'primary' | 'secondary' | 'ghost' | 'danger';
+  /** Size of a Button */
   size: 'xs' | 'sm' | 'md' | 'lg';
   /** Control for disabled state of a component */
   disabled: boolean;
@@ -12,7 +19,6 @@ export declare class TdsButton {
   /** Set the mode variant of the Button. */
   modeVariant: 'primary' | 'secondary';
   onlyIcon: boolean;
-  slotElement: Element;
   connectedCallback(): void;
   render(): any;
 }

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

@@ -0,0 +1,147 @@
+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;
+        };
+      };
+    };
+    variant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    type: {
+      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;
+        };
+      };
+    };
+    text: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        truthy: boolean;
+      };
+    };
+    fullbleed: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        truthy: 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;
+      };
+    };
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    type: string;
+    variant: string;
+    size: string;
+    text: string;
+    fullbleed: boolean;
+    onlyIcon: boolean;
+    icon: string;
+    disabled: boolean;
+  };
+};
+export default _default;
+/** Button as a web component */
+export declare const Default: any;

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

@@ -1,17 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot header - Slot for the Card header.
+ * @slot subheader - Slot for the Card subheader.
+ * @slot thumbnail - Slot for the Card thumbnail.
+ * @slot body - Slot for the body section of the Card.
+ * @slot body-image - Slot for the body section of the Card, used for image.
+ * @slot bottom - Slot for the bottom section of the Card.
+ */
 export declare class TdsCard {
+  host: HTMLElement;
   /** Variant of the Card based on the theme used. */
   modeVariant: 'primary' | 'secondary';
   /** Placement of the header */
-  headerPlacement: 'above' | 'below';
+  imagePlacement: 'above-header' | 'below-header';
   /** 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 */
@@ -30,11 +35,8 @@ export declare class TdsCard {
   tdsClick: EventEmitter<{
     cardId: string;
   }>;
-  hostElement: HTMLTdsCardElement;
-  hasCardBottomSlot: boolean;
-  hasCardBodySlot: boolean;
-  connectedCallback(): void;
   handleClick: () => void;
+  getCardHeader: () => any;
   getCardContent: () => any;
   render(): any;
 }

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

@@ -0,0 +1,128 @@
+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;
+      };
+    };
+    thumbnail: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    imagePlacement: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    bodyImg: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    bodyContent: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    bodyDivider: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    cardBottom: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    clickable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    header: string;
+    subheader: string;
+    thumbnail: boolean;
+    imagePlacement: string;
+    bodyImg: boolean;
+    bodyContent: string;
+    bodyDivider: boolean;
+    cardBottom: string;
+    clickable: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,4 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot label - Slot for the label text.
+ */
 export declare class TdsCheckbox {
   host: HTMLElement;
   /** Name for the Checkbox's input element. */