refactor(core): reduce strict errors

.changeset/clever-pandas-chew.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core): replace font styles with actual formats

.npmrc

@@ -18,3 +18,4 @@ public-hoist-pattern[]=mark.js
 public-hoist-pattern[]=lunr
 
 public-hoist-pattern[]=playwright
+public-hoist-pattern[]=eslint**

packages/core/component-doc.json

@@ -55,7 +55,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -120,7 +120,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -890,7 +890,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -911,7 +911,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -937,7 +937,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -1406,7 +1406,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -1588,6 +1588,7 @@
               "text": "2.1.0"
             }
           ],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -3249,7 +3250,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16785,7 +16786,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16824,7 +16825,7 @@
               "type": "TypographyFormatCode"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16884,7 +16885,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -17679,11 +17680,6 @@
       "docstring": "",
       "path": "src/components/card/card.tsx"
     },
-    "src/components/typography/typography.tsx::TypographyVariants": {
-      "declaration": "export type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';",
-      "docstring": "",
-      "path": "src/components/typography/typography.tsx"
-    },
     "src/components/typography/typography.tsx::TypographyFormat": {
       "declaration": "export type TypographyFormat =\n  | TypographyFormatLabel\n  | TypographyFormatBody\n  | TypographyFormatDisplay\n  | TypographyFormatHeading\n  | TypographyFormatCode;",
       "docstring": "",

packages/core/src/components.d.ts

@@ -44,7 +44,7 @@ import { ToastConfig, ToastType } from "./components/toast/toast-utils";
 import { ShowToastResult } from "./components/toast/toast-container";
 import { Element } from "@stencil/core";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
-import { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography";
+import { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography";
 import { UploadFileState } from "./components/upload/upload-file-state";
 export { ActionCardVariant } from "./components/action-card/action-card";
 export { IxTheme } from "./components/utils/theme-switcher";
@@ -85,7 +85,7 @@ export { ToastConfig, ToastType } from "./components/toast/toast-utils";
 export { ShowToastResult } from "./components/toast/toast-container";
 export { Element } from "@stencil/core";
 export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
-export { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography";
+export { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography";
 export { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
     /**
@@ -95,7 +95,7 @@ export namespace Components {
         /**
           * Card heading
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * Card icon
          */
@@ -107,7 +107,7 @@ export namespace Components {
         /**
           * Card subheading
          */
-        "subheading": string;
+        "subheading"?: string;
         /**
           * Card variant
           * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
@@ -206,16 +206,16 @@ export namespace Components {
           * Optional icon to be displayed next to the header label
           * @since 1.5.0
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Label of blind
          */
-        "label": string;
+        "label"?: string;
         /**
           * Secondary label inside blind header
           * @since 2.0.0
          */
-        "sublabel": string;
+        "sublabel"?: string;
         /**
           * Blind variant
           * @since 2.0.0
@@ -268,7 +268,7 @@ export namespace Components {
         /**
           * Icon name
          */
-        "icon": string;
+        "icon"?: string;
         "iconSize": '12' | '16' | '24';
         /**
           * Loading button
@@ -508,7 +508,7 @@ export namespace Components {
         /**
           * Title of Header
          */
-        "headerTitle": string;
+        "headerTitle"?: string;
         /**
           * Variant of content header
          */
@@ -518,7 +518,7 @@ export namespace Components {
         /**
           * Define css grid template
          */
-        "templates": Partial<Record<CssGridTemplateType, string[][]>>;
+        "templates"?: Partial<Record<CssGridTemplateType, string[][]>>;
     }
     interface IxCssGridItem {
         /**
@@ -2338,24 +2338,19 @@ export namespace Components {
           * Text color based on theme variables
           * @deprecated since 2.1.0 use property `text-color`
          */
-        "color": TypographyColors;
+        "color"?: TypographyColors;
         /**
           * Text format
          */
-        "format": TypographyFormat;
+        "format"?: TypographyFormat;
         /**
           * Text color based on theme variables
          */
-        "textColor": TypographyColors;
+        "textColor"?: TypographyColors;
         /**
           * Text decoration
          */
         "textDecoration": TextDecoration;
-        /**
-          * Font variant based on theme variables
-          * @deprecated Use `format` property
-         */
-        "variant": TypographyVariants;
     }
     interface IxUpload {
         /**
@@ -6637,11 +6632,6 @@ declare namespace LocalJSX {
           * Text decoration
          */
         "textDecoration"?: TextDecoration;
-        /**
-          * Font variant based on theme variables
-          * @deprecated Use `format` property
-         */
-        "variant"?: TypographyVariants;
     }
     interface IxUpload {
         /**

packages/core/src/components/action-card/action-card.tsx

@@ -36,19 +36,19 @@ export class IxActionCard {
   /**
    * Card heading
    */
-  @Prop() heading: string;
+  @Prop() heading?: string;
 
   /**
    * Card subheading
    */
-  @Prop() subheading: string;
+  @Prop() subheading?: string;
 
   /**
    * Card selection
    */
   @Prop() selected = false;
 
-  private getSubheadingColor(): TypographyColors {
+  private getSubheadingColor(): TypographyColors | undefined {
     switch (this.variant) {
       case 'insight':
       case 'notification':

packages/core/src/components/blind/blind.tsx

@@ -40,19 +40,19 @@ export class Blind {
   /**
    * Label of blind
    */
-  @Prop() label: string;
+  @Prop() label?: string;
 
   /**
    * Secondary label inside blind header
    * @since 2.0.0
    */
-  @Prop() sublabel: string;
+  @Prop() sublabel?: string;
 
   /**
    * Optional icon to be displayed next to the header label
    * @since 1.5.0
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   /**
    * Blind variant
@@ -63,11 +63,11 @@ export class Blind {
   /**
    * Collapsed state changed
    */
-  @Event() collapsedChange: EventEmitter<boolean>;
+  @Event() collapsedChange!: EventEmitter<boolean>;
 
   @Element() hostElement!: HTMLIxBlindElement;
 
-  private chevronRef: HTMLElement;
+  private chevronRef?: HTMLElement;
   private blindId = ++sequentialInstanceId;
 
   constructor() {}
@@ -82,7 +82,7 @@ export class Blind {
   }
 
   get content() {
-    return this.hostElement.shadowRoot.querySelector('.blind-content');
+    return this.hostElement.shadowRoot!.querySelector('.blind-content');
   }
 
   @Watch('collapsed')
@@ -160,7 +160,7 @@ export class Blind {
                   ? 'color-primary'
                   : `color-${this.variant}--contrast`
               }
-              ref={(ref) => (this.chevronRef = ref)}
+              ref={(ref: HTMLElement) => (this.chevronRef = ref)}
             ></ix-icon>
             <div
               class="blind-header-title"

packages/core/src/components/button/base-button.tsx

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 import { A11yAttributes } from '../utils/a11y';
 import { ButtonVariant } from './button';
 
@@ -61,7 +61,7 @@ export type BaseButtonProps = {
   selected: boolean;
   disabled: boolean;
   loading: boolean;
-  icon: string;
+  icon?: string;
   onClick?: Function;
   ariaAttributes?: A11yAttributes;
   extraClasses?: { [key: string]: boolean };
@@ -87,7 +87,10 @@ const getSpinnerSize = (btnProps: BaseButtonProps) => {
   }
 };
 
-export function BaseButton(props: BaseButtonProps, children) {
+export const BaseButton: FunctionalComponent<BaseButtonProps> = (
+  props: BaseButtonProps,
+  children
+) => {
   const extraClasses = props.extraClasses ?? {};
 
   const ariaAttributes = props.ariaAttributes ?? {};
@@ -136,4 +139,4 @@ export function BaseButton(props: BaseButtonProps, children) {
       {props.afterContent ? props.afterContent : null}
     </button>
   );
-}
+};

packages/core/src/components/button/button.tsx

@@ -54,20 +54,20 @@ export class Button {
   /**
    * Icon name
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   /** @internal */
   @Prop() alignment: 'center' | 'start' = 'center';
 
   /** @internal */
   @Prop() iconSize: '12' | '16' | '24' = '24';
 
-  @Element() hostElement: HTMLIxButtonElement;
+  @Element() hostElement!: HTMLIxButtonElement;
 
   /**
    * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)
    */
-  submitButtonElement: HTMLButtonElement;
+  submitButtonElement?: HTMLButtonElement;
 
   componentDidLoad() {
     if (this.type === 'submit') {