chore(Cross): [IOAPPX-353] Add deprecation note to all the legacy typ…

…ographic styles (#6027)

## Short description
This PR adds a deprecation note to all legacy local typographic styles
to prevent accidental import during development of the new features.

## List of changes proposed in this pull request
- Add deprecation note to the local typographic styles
- Remove `LabelHeader` typographic style and relative `TabItem`
component (not referenced anymore)

## How to test
N/A

---------

Co-authored-by: Fabio Bombardi <[email protected]>
Co-authored-by: Jacopo Pompilii <[email protected]>

ts/components/core/fonts.ts

@@ -102,6 +102,7 @@ export const allUsedFonts = [
  * @param weight
  * @param isItalic
  * @param font
+ * @deprecated Don't use local `makeFontStyleObject`. Import it from `io-app-design-system` instead.
  */
 export const makeFontStyleObject = (
   weight: IOFontWeight | undefined = undefined,

ts/components/core/typography/BaseTypography.tsx

@@ -39,6 +39,7 @@ const calculateTextStyle = (
  * This component shouldn't be used in the application but only to compose others `Typography elements`.
  * @param props
  * @constructor
+ * @deprecated Don't use local `BaseTypography`. Import it from `io-app-design-system` instead.
  */
 export const BaseTypography: React.FunctionComponent<OwnProps> = props => {
   const fontStyle = useMemo(

ts/components/core/typography/Body.tsx

@@ -26,6 +26,7 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
  * default values(if not defined) are weight: `Regular`, color: `bluegrey`
  * @param props`
  * @constructor
+ * @deprecated Don't use local `Body`. Import it from `io-app-design-system` instead.
  */
 export const Body: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/Factory.tsx

@@ -71,6 +71,7 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
  * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps}
  * TODO: rewrite this component following the rules of hooks
  * @param props
+ * @deprecated Don't use local `useTypographyFactory`. Import it from `io-app-design-system` instead.
  */
 export function useTypographyFactory<
   WeightPropsType extends IOFontWeight,

ts/components/core/typography/H1.tsx

@@ -33,6 +33,7 @@ export const h1DefaultWeight: AllowedWeight = "Bold";
  * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
  * @param props
  * @constructor
+ * @deprecated Don't use local `H1`. Import it from `io-app-design-system` instead.
  */
 export const H1: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/H2.tsx

@@ -33,6 +33,7 @@ export const h2DefaultWeight: AllowedWeight = "Bold";
  * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
  * @param props
  * @constructor
+ * @deprecated Don't use local `H2`. Import it from `io-app-design-system` instead.
  */
 export const H2: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/H3.tsx

@@ -86,6 +86,7 @@ export const calculateH3WeightColor = (
  * default values(if not defined) are weight: `Semibold`, color: `bluegreyDark`
  * @param props
  * @constructor
+ * @deprecated Don't use local `H3`. Import it from `io-app-design-system` instead.
  */
 export const H3: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/H4.tsx

@@ -88,6 +88,7 @@ export const calculateH4WeightColor = (
  * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
  * @param props
  * @constructor
+ * @deprecated Don't use local `H4`. Import it from `io-app-design-system` instead.
  */
 export const H4: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/H5.tsx

@@ -54,6 +54,7 @@ export const h5DefaultWeight: AllowedWeight = "Semibold";
  * default values(if not defined) are weight: `Semibold`, color: `bluegreyDark`
  * @param props
  * @constructor
+ * @deprecated Don't use local `H5`. Import it from `io-app-design-system` instead.
  */
 export const H5: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/Label.tsx

@@ -25,6 +25,7 @@ const fontName: IOFontFamily = "TitilliumSansPro";
  * default values(if not defined) are weight: `Bold`, color: `blue`
  * @param props`
  * @constructor
+ * @deprecated Don't use local `Label`. Import it from `io-app-design-system` instead.
  */
 export const Label = ({ fontSize, ...rest }: LabelProps) =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/LabelSmall.tsx

@@ -33,6 +33,7 @@ const lineHeightMapping: Record<FontSize, number> = { regular: 21, small: 18 };
  * default values(if not defined) are weight: `Bold`, color: `blue`
  * @param props`
  * @constructor
+ * @deprecated Don't use local `LabelSmall`. Import it from `io-app-design-system` instead.
  */
 export const LabelSmall: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/Link.tsx

@@ -21,6 +21,7 @@ export const linkDefaultWeight: AllowedWeight = "Semibold";
  * default values(if not defined) are weight: `Semibold`, color: `blue`
  * @param props`
  * @constructor
+ * @deprecated Don't use local `Link`. Import `LabelLink` from `io-app-design-system` instead.
  */
 export const Link: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({

ts/components/core/typography/Monospace.tsx

@@ -19,6 +19,7 @@ const fontSize = 16;
  * default values(if not defined) are weight: `Regular`, color: `bluegrey`
  * @param props`
  * @constructor
+ * @deprecated Don't use local `Monospace`. Import `BodyMonospace` from `io-app-design-system` instead.
  */
 export const Monospace: React.FunctionComponent<OwnProps> = props =>
   useTypographyFactory<AllowedWeight, AllowedColors>({