@rededor/cura 0.5.1 → 0.5.3

package/dist/types/components/forms/cura-switch/cura-switch.d.ts

@@ -0,0 +1,62 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class CuraSwitch {
+  /**
+   * Indicates whether the switch is checked or not.
+   */
+  checked: boolean;
+  /**
+   * Indicates whether the switch is disabled or not.
+   */
+  disabled: boolean;
+  /**
+   * The label text to display next to the switch.
+   */
+  label: string;
+  /**
+   * Tab index for the switch element.
+   * Reflects as an HTML attribute.
+   */
+  ontabindex: number;
+  /**
+   * Position of the label relative to the switch.
+   * Can be 'left' or 'right'.
+   */
+  position: "left" | "right";
+  /**
+   * Size of the switch.
+   * Can be 'small', 'medium', or 'large'.
+   */
+  size: 'small' | 'medium' | 'large';
+  /**
+   * Background style of the switch.
+   * Can be 'dark' or 'light'.
+   */
+  background: 'dark' | 'light';
+  /**
+   * Accent color of the switch.
+   */
+  color: string;
+  styles: {};
+  onchange: EventEmitter<{
+    checked: boolean;
+  }>;
+  sizes: {
+    large: {
+      size: number;
+    };
+    medium: {
+      size: number;
+    };
+    small: {
+      size: number;
+    };
+  };
+  isDarkbackground: () => boolean;
+  sizeHandler(): void;
+  setColors(): void;
+  connectedCallback(): void;
+  toggleSwitch: () => any;
+  assignColor(colorDark: string, colorLight: string): string;
+  getClasses(): {};
+  render(): any;
+}

package/dist/types/components/forms/cura-switch/cura-switch.stories.d.ts

@@ -0,0 +1,135 @@
+declare const _default: {
+  title: string;
+  tags: string[];
+  render: ({ label, message, ...args }: {
+    [x: string]: any;
+    label: any;
+    message: any;
+  }) => string;
+  argTypes: {
+    label: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+      };
+    };
+    message: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+      };
+    };
+    checked: {
+      control: string;
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    disabled: {
+      control: string;
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    ontabindex: {
+      control: string;
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: number;
+        };
+      };
+      name: string;
+    };
+    position: {
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+      name: string;
+    };
+    size: {
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    background: {
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    color: {
+      control: {
+        type: string;
+      };
+      options: string[];
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    onchange: {
+      control: string;
+      description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+};
+export default _default;
+export declare const CuraSwitchStory: {
+  args: {
+    label: string;
+    color: string;
+    message: string;
+    checked: boolean;
+    size: string;
+    disabled: boolean;
+    position: string;
+    background: string;
+    ontabindex: number;
+  };
+};

package/dist/types/components/text/cura-display/cura-display.d.ts

@@ -1,38 +1,49 @@
 export declare class CuraDisplay {
   /**
-   * Heading level for semantics.
-   * Values: 1(default)-6.
+   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+   * Values: 1(default) to 6.
    */
-  level: number;
+  level: 1 | 2 | 3 | 4 | 5 | 6;
   /**
-  * Heading style size.
-  * Values: small | regular(default) | large.
+  * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+  * Values: Color from design system scheme. Default to 'accent-dark'.
   */
-  size: string;
+  spotColor: string;
   /**
-  * Apply light color to text in dark background.
-  * Values: boolean.
-  */
-  inverted: boolean;
+   * Text color.
+   * Values: Color from design system scheme. Default to the font color from the theme.
+   */
+  color: string;
+  handleChangeColor(): void;
   /**
-  * Apply base system color to elements like <a> and <abbr>.
-  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
-  */
-  spotColor: string;
+   * CSS margin-block property values.
+   * Default to 1.25em
+   */
+  marginBlock: string;
+  /**
+   * CSS line-height property values.
+   * Default to 140%
+   */
+  lineHeight: string;
   /**
-   * Host element <cura-heading>
+   * Host element <cura-display>
    */
   host: HTMLElement;
   /**
    * Internal Props
    */
   weights: any;
-  styles: any;
+  fontSizeBase: string;
+  theme: import("../../../api/cura-api.type").APIThemeFunctions;
+  styles: {};
   connectedCallback(): void;
-  getClasses(): {};
   setFontProperties(): void;
+  hostCSSProperties(): {
+    '--margin-block': string;
+    '--font-size-base': string;
+    '--line-height': string;
+  };
   setColors(): void;
-  setHostProperty(prop: string, value: string): void;
   getHeadingTag(): any;
   render(): any;
 }

package/dist/types/components/text/cura-display/cura-display.stories.d.ts

@@ -11,17 +11,7 @@ declare const _default: {
       description: string;
       name: string;
     };
-    inverted: {
-      control: string;
-      description: string;
-      table: {
-        category: string;
-        defaultValue: {
-          summary: string;
-        };
-      };
-    };
-    size: {
+    color: {
       control: {
         type: string;
       };
@@ -40,6 +30,7 @@ declare const _default: {
       };
       options: string[];
       description: string;
+      name: string;
       table: {
         category: string;
         defaultValue: {
@@ -55,6 +46,50 @@ declare const _default: {
         step: number;
       };
       description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: number;
+        };
+      };
+    };
+    marginBlock: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    lineHeight: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    cssMarginBlock: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    cssLineHeight: {
+      control: string;
+      description: string;
+      name: string;
       table: {
         category: string;
         defaultValue: {
@@ -68,9 +103,12 @@ export default _default;
 export declare const Display: {
   args: {
     label: string;
-    size: string;
-    level: number;
+    level: string;
+    color: string;
     spotColor: string;
-    inverted: boolean;
+    marginBlock: string;
+    lineHeight: string;
+    cssMarginBlock: string;
+    cssLineHeight: string;
   };
 };

package/dist/types/components/text/cura-heading/cura-heading.d.ts

@@ -1,29 +1,40 @@
 export declare class CuraHeading {
   /**
-   * Heading level for semantics.
-   * Values: 1(default)-6.
+   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+   * Values: 1(default) to 6.
    */
-  level: number;
+  level: 1 | 2 | 3 | 4 | 5 | 6;
   /**
    * Heading style size.
-   * Values: small | regular(default) | large.
+   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.
    */
-  size: string;
+  size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall';
   /**
-   * Heading font weight.
-   * Values: regular(default) | bold.
+   * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.
+   * Values: regular (default) | bold.
    */
-  weight: string;
+  weight: 'regular' | 'bold';
   /**
-  * Apply light color to text in dark background.
-  * Values: boolean.
-  */
-  inverted: boolean;
-  /**
-  * Apply base system color to elements like <a> and <abbr>.
-  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+  * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+  * Values: Color from design system scheme. Default to 'accent-dark'.
   */
   spotColor: string;
+  /**
+   * Text color.
+   * Values: Color from design system scheme. Default to the font color from the theme.
+   */
+  color: string;
+  handleChangeColor(): void;
+  /**
+   * CSS margin-block property values.
+   * Default to 1.25em
+   */
+  marginBlock: string;
+  /**
+   * CSS line-height property values.
+   * Default to 140%
+   */
+  lineHeight: string;
   /**
    * Host element <cura-heading>
    */
@@ -32,12 +43,18 @@ export declare class CuraHeading {
    * Internal Props
    */
   weights: any;
-  styles: any;
+  fontSizeBase: string;
+  styles: {};
+  theme: import("../../../api/cura-api.type").APIThemeFunctions;
   connectedCallback(): void;
   getClasses(): {};
   setFontProperties(): void;
+  hostCSSProperties(): {
+    '--margin-block': string;
+    '--font-size-base': string;
+    '--line-height': string;
+  };
   setColors(): void;
-  setHostProperty(prop: string, value: string): void;
   getHeadingTag(): any;
   render(): any;
 }

package/dist/types/components/text/cura-heading/cura-heading.stories.d.ts

@@ -11,8 +11,11 @@ declare const _default: {
       description: string;
       name: string;
     };
-    inverted: {
-      control: string;
+    size: {
+      control: {
+        type: string;
+      };
+      options: string[];
       description: string;
       table: {
         category: string;
@@ -21,7 +24,7 @@ declare const _default: {
         };
       };
     };
-    size: {
+    weight: {
       control: {
         type: string;
       };
@@ -34,7 +37,7 @@ declare const _default: {
         };
       };
     };
-    weight: {
+    color: {
       control: {
         type: string;
       };
@@ -53,6 +56,7 @@ declare const _default: {
       };
       options: string[];
       description: string;
+      name: string;
       table: {
         category: string;
         defaultValue: {
@@ -68,6 +72,50 @@ declare const _default: {
         step: number;
       };
       description: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: number;
+        };
+      };
+    };
+    marginBlock: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    lineHeight: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    cssMarginBlock: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    cssLineHeight: {
+      control: string;
+      description: string;
+      name: string;
       table: {
         category: string;
         defaultValue: {
@@ -83,8 +131,12 @@ export declare const Heading: {
     label: string;
     size: string;
     weight: string;
-    level: number;
+    level: string;
+    color: string;
     spotColor: string;
-    inverted: boolean;
+    marginBlock: string;
+    lineHeight: string;
+    cssMarginBlock: string;
+    cssLineHeight: string;
   };
 };

package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts

@@ -1,24 +1,30 @@
 export declare class CuraParagraph {
   /**
    * Set size of body text.
-   * Values: regular (default) | large | small | caption.
+   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.
    */
-  size: 'regular' | 'large' | 'small' | 'caption';
+  size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall';
   /**
-  * Apply light color to text in dark background.
-  * Values: boolean.
-  */
-  inverted: boolean;
-  /**
-  * Apply base system color to elements like <a> and <abbr>.
-  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+  * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+  * Values: Color from design system scheme. Default to 'accent-dark'.
   */
   spotColor: string;
   /**
-   * Color base from color scheme. Default: theme font color.
+   * Text color.
+   * Values: Color from design system scheme. Default to the font color from the theme.
    */
-  color: any;
+  color: string;
   handleChangeColor(): void;
+  /**
+   * CSS margin-block property values.
+   * Default to 1.25em
+   */
+  marginBlock: string;
+  /**
+   * CSS line-height property values.
+   * Default to 140%
+   */
+  lineHeight: string;
   /**
    * Host element <cura-paragraph>
    */
@@ -27,11 +33,17 @@ export declare class CuraParagraph {
    * Internal Props
    */
   weights: any;
+  fontSizeBase: string;
   styles: {};
+  theme: import("../../../api/cura-api.type").APIThemeFunctions;
   connectedCallback(): void;
   setsizeClass(): {};
   setFontProperties(): void;
   setColors(): void;
-  setHostProperty(prop: string, value: string): void;
+  hostCSSProperties(): {
+    '--margin-block': string;
+    '--font-size-base': string;
+    '--line-height': string;
+  };
   render(): any;
 }

package/dist/types/components/text/cura-paragraph/cura-paragraph.stories.d.ts

@@ -11,8 +11,11 @@ declare const _default: {
       description: string;
       name: string;
     };
-    inverted: {
-      control: string;
+    size: {
+      control: {
+        type: string;
+      };
+      options: string[];
       description: string;
       table: {
         category: string;
@@ -21,7 +24,7 @@ declare const _default: {
         };
       };
     };
-    size: {
+    color: {
       control: {
         type: string;
       };
@@ -40,6 +43,7 @@ declare const _default: {
       };
       options: string[];
       description: string;
+      name: string;
       table: {
         category: string;
         defaultValue: {
@@ -47,12 +51,43 @@ declare const _default: {
         };
       };
     };
-    color: {
-      control: {
-        type: string;
+    marginBlock: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
       };
-      options: string[];
+    };
+    lineHeight: {
+      control: string;
       description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    cssMarginBlock: {
+      control: string;
+      description: string;
+      name: string;
+      table: {
+        category: string;
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    cssLineHeight: {
+      control: string;
+      description: string;
+      name: string;
       table: {
         category: string;
         defaultValue: {
@@ -67,8 +102,11 @@ export declare const Paragraph: {
   args: {
     label: string;
     size: string;
-    spotColor: string;
-    inverted: boolean;
     color: string;
+    spotColor: string;
+    marginBlock: string;
+    lineHeight: string;
+    cssMarginBlock: string;
+    cssLineHeight: string;
   };
 };