@pagopa/io-app-design-system 1.0.0-0

package/lib/module/components/tag/Tag.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { View, Text, StyleSheet, Platform } from "react-native";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { IOColors } from "../../core/IOColors";
+import { Icon } from "../icons";
+import { IOTagRadius } from "../../core/IOShapes";
+import { IOTagHSpacing, IOTagVSpacing } from "../../core/IOSpacing";
+const mapVariants = {
+  qrCode: {
+    iconColor: "blueIO-500",
+    iconName: "qrCode"
+  },
+  legalMessage: {
+    iconColor: "blueIO-500",
+    iconName: "legalValue"
+  },
+  info: {
+    iconColor: "info-700",
+    iconName: "info"
+  },
+  warning: {
+    iconColor: "warning-700",
+    iconName: "warningFilled"
+  },
+  error: {
+    iconColor: "error-600",
+    iconName: "errorFilled"
+  },
+  success: {
+    iconColor: "success-700",
+    iconName: "success"
+  }
+};
+const IOTagIconMargin = 6;
+const IOTagIconSize = 16;
+const styles = StyleSheet.create({
+  tag: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    ...Platform.select({
+      android: {
+        textAlignVertical: "center"
+      }
+    }),
+    borderWidth: 1,
+    backgroundColor: IOColors.white,
+    borderColor: IOColors["grey-100"],
+    borderRadius: IOTagRadius,
+    paddingHorizontal: IOTagHSpacing,
+    paddingVertical: IOTagVSpacing
+  },
+  iconWrapper: {
+    marginEnd: IOTagIconMargin,
+    flexShrink: 1
+  },
+  label: {
+    fontSize: 12,
+    lineHeight: 16,
+    alignSelf: "center",
+    textTransform: "uppercase",
+    color: IOColors["grey-700"],
+    flexShrink: 1,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  }
+});
+
+/**
+ * Tag component, used mainly for message list and details
+ */
+export const Tag = _ref => {
+  let {
+    text,
+    variant,
+    testID
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    testID: testID,
+    style: styles.tag
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: mapVariants[variant].iconName,
+    color: mapVariants[variant].iconColor,
+    size: IOTagIconSize
+  })), /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    style: styles.label
+  }, text));
+};
+//# sourceMappingURL=Tag.js.map

package/lib/module/components/tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","Platform","makeFontStyleObject","IOColors","Icon","IOTagRadius","IOTagHSpacing","IOTagVSpacing","mapVariants","qrCode","iconColor","iconName","legalMessage","info","warning","error","success","IOTagIconMargin","IOTagIconSize","styles","create","tag","alignSelf","flexDirection","alignItems","justifyContent","select","android","textAlignVertical","borderWidth","backgroundColor","white","borderColor","borderRadius","paddingHorizontal","paddingVertical","iconWrapper","marginEnd","flexShrink","label","fontSize","lineHeight","textTransform","color","Tag","_ref","text","variant","testID","createElement","style","name","size","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/tag/Tag.tsx"],"mappings":"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"}

package/lib/module/components/tag/index.js

@@ -0,0 +1,2 @@
+export * from "./Tag";
+//# sourceMappingURL=index.js.map

package/lib/module/components/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/tag/index.tsx"],"mappings":"AAAA,cAAc,OAAO"}

package/lib/module/components/typography/BaseTypography.js

@@ -0,0 +1,42 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useMemo } from "react";
+import { Text } from "react-native";
+import { IOColors } from "../../core/IOColors";
+import { makeFontStyleObject } from "../../utils/fonts";
+
+/**
+ * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information
+ * cannot be included in the default StyleProp<TextStyle>
+ */
+
+/**
+ * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
+ * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue}
+ * @param args the args of the function {@link makeFontStyleObject}
+ */
+const calculateTextStyle = function (color) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  return {
+    ...makeFontStyleObject(...args),
+    color: IOColors[color]
+  };
+};
+
+/**
+ * `BaseTypography` is the core Typography component used to render a text.
+ * It accepts all the default text style `StyleProp<TextStyle>` in addition with {@link BaseTypographyProps}
+ * used to calculate at runtime the platform-dependent styles.
+ * This component shouldn't be used in the application but only to compose others `Typography elements`.
+ * @param props
+ * @constructor
+ */
+export const BaseTypography = props => {
+  const fontStyle = useMemo(() => calculateTextStyle(props.color, props.weight, props.isItalic, props.font), [props.color, props.weight, props.isItalic, props.font]);
+  const style = props.style ? [props.style, props.fontStyle, fontStyle] : [props.fontStyle, fontStyle];
+  return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
+    style: style
+  }), props.children);
+};
+//# sourceMappingURL=BaseTypography.js.map

package/lib/module/components/typography/BaseTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Text","IOColors","makeFontStyleObject","calculateTextStyle","color","_len","arguments","length","args","Array","_key","BaseTypography","props","fontStyle","weight","isItalic","font","style","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/BaseTypography.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAAoBC,IAAI,QAAmB,cAAc;AACzD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAGEC,mBAAmB,QACd,mBAAmB;;AAE1B;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,SAAAA,CACzBC,KAAe;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EACZC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,OAAAA,IAAA,WAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAAJF,IAAI,CAAAE,IAAA,QAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OACH;IACJ,GAAGR,mBAAmB,CAAC,GAAGM,IAAI,CAAC;IAC/BJ,KAAK,EAAEH,QAAQ,CAACG,KAAK;EACvB,CAAC;AAAA,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,cAAkC,GAAGC,KAAK,IAAI;EACzD,MAAMC,SAAS,GAAGd,OAAO,CACvB,MACEI,kBAAkB,CAACS,KAAK,CAACR,KAAK,EAAEQ,KAAK,CAACE,MAAM,EAAEF,KAAK,CAACG,QAAQ,EAAEH,KAAK,CAACI,IAAI,CAAC,EAC3E,CAACJ,KAAK,CAACR,KAAK,EAAEQ,KAAK,CAACE,MAAM,EAAEF,KAAK,CAACG,QAAQ,EAAEH,KAAK,CAACI,IAAI,CACxD,CAAC;EACD,MAAMC,KAAK,GAAGL,KAAK,CAACK,KAAK,GACrB,CAACL,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACC,SAAS,EAAEA,SAAS,CAAC,GACzC,CAACD,KAAK,CAACC,SAAS,EAAEA,SAAS,CAAC;EAEhC,oBACEf,KAAA,CAAAoB,aAAA,CAAClB,IAAI,EAAAmB,QAAA,KAAKP,KAAK;IAAEK,KAAK,EAAEA;EAAM,IAC3BL,KAAK,CAACQ,QACH,CAAC;AAEX,CAAC"}

package/lib/module/components/typography/Body.js

@@ -0,0 +1,24 @@
+import { useTypographyFactory } from "./Factory";
+const fontName = "TitilliumWeb";
+export const bodyFontSize = 16;
+export const bodyLineHeight = 24;
+export const bodyDefaultColor = "bluegrey";
+export const bodyDefaultWeight = "Regular";
+
+/**
+ * Typography component to render `Body` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values (if not defined) are weight: `Regular`, color: `bluegrey`
+ * @param props`
+ * @constructor
+ */
+export const Body = props => useTypographyFactory({
+  ...props,
+  defaultWeight: bodyDefaultWeight,
+  defaultColor: bodyDefaultColor,
+  font: fontName,
+  fontStyle: {
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight
+  }
+});
+//# sourceMappingURL=Body.js.map

package/lib/module/components/typography/Body.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","fontName","bodyFontSize","bodyLineHeight","bodyDefaultColor","bodyDefaultWeight","Body","props","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/Body.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;AAchD,MAAMC,QAAoB,GAAG,cAAc;AAC3C,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAAc,GAAG,EAAE;AAChC,OAAO,MAAMC,gBAA+B,GAAG,UAAU;AACzD,OAAO,MAAMC,iBAAgC,GAAG,SAAS;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAuC,GAAGC,KAAK,IACxDP,oBAAoB,CAA+B;EAC/C,GAAGO,KAAK;EACRC,aAAa,EAAEH,iBAAiB;EAChCI,YAAY,EAAEL,gBAAgB;EAC9BM,IAAI,EAAET,QAAQ;EACdU,SAAS,EAAE;IAAEC,QAAQ,EAAEV,YAAY;IAAEW,UAAU,EAAEV;EAAe;AACpE,CAAC,CAAC"}

package/lib/module/components/typography/Factory.js

@@ -0,0 +1,52 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useMemo } from "react";
+import { BaseTypography } from "./BaseTypography";
+import { calculateWeightColor } from "./common";
+
+/**
+ * Using the DefaultArgumentProps is possible to define a default fallback value for  weight and color
+ * that will be used when the fields weight and color will be undefined.
+ */
+
+/**
+ * Using the DefaultFactoryProps is possible to define a custom factory to calculate the default value for
+ * weight and color, thus allowing to implement more sophisticated strategies.
+ */
+
+/**
+ * Only one type of default props strategy is allowed
+ */
+
+/**
+ * The factory props will include:
+ * - One of the two DefaultProps
+ * - The props of {@link BaseTypographyProps} without weight and color
+ * - The default {@link TypographyProps}
+ */
+
+/**
+ * Calculate if the props is of type {@link DefaultFactoryProps}
+ * @param props
+ */
+function isDefaultFactoryProps(props) {
+  return props.weightColorFactory !== undefined;
+}
+
+/**
+ * Build a {@link BaseTypography} component, calculating the default values for weight and color if undefined.
+ * The default values can be calculated specifying some fallback values using {@link DefaultArgumentProps}
+ * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps}
+ * @param props
+ */
+export function useTypographyFactory(props) {
+  // Use different strategy to calculate the default values, based on DefaultProps
+  const {
+    weight,
+    color
+  } = useMemo(() => isDefaultFactoryProps(props) ? props.weightColorFactory(props.weight, props.color) : calculateWeightColor(props.defaultWeight, props.defaultColor, props.weight, props.color), [props]);
+  return /*#__PURE__*/React.createElement(BaseTypography, _extends({
+    weight: weight,
+    color: color
+  }, props));
+}
+//# sourceMappingURL=Factory.js.map

package/lib/module/components/typography/Factory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","BaseTypography","calculateWeightColor","isDefaultFactoryProps","props","weightColorFactory","undefined","useTypographyFactory","weight","color","defaultWeight","defaultColor","createElement","_extends"],"sourceRoot":"../../../../src","sources":["components/typography/Factory.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAItC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SACIC,oBAAoB,QAGjB,UAAU;;AAEjB;AACA;AACA;AACA;;AAMA;AACA;AACA;AACA;;AAQA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA,SAASC,qBAAqBA,CAC1BC,KAE4D,EACE;EAC9D,OACKA,KAAK,CACDC,kBAAkB,KAAKC,SAAS;AAE7C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAGlCH,KAAqD,EAAE;EACrD;EACA,MAAM;IAAEI,MAAM;IAAEC;EAAM,CAAC,GAAGT,OAAO,CAC7B,MACIG,qBAAqB,CAACC,KAAK,CAAC,GACtBA,KAAK,CAACC,kBAAkB,CAACD,KAAK,CAACI,MAAM,EAAEJ,KAAK,CAACK,KAAK,CAAC,GACnDP,oBAAoB,CAClBE,KAAK,CAACM,aAAa,EACnBN,KAAK,CAACO,YAAY,EAClBP,KAAK,CAACI,MAAM,EACZJ,KAAK,CAACK,KACV,CAAC,EACT,CAACL,KAAK,CACV,CAAC;EAED,oBAAOL,KAAA,CAAAa,aAAA,CAACX,cAAc,EAAAY,QAAA;IAACL,MAAM,EAAEA,MAAO;IAACC,KAAK,EAAEA;EAAM,GAAKL,KAAK,CAAG,CAAC;AACtE"}

package/lib/module/components/typography/H1.js

@@ -0,0 +1,26 @@
+import { useTypographyFactory } from "./Factory";
+export const h1FontSize = 26;
+export const h1LineHeight = 32;
+export const h1DefaultColor = "bluegreyDark";
+export const h1DefaultWeight = "Bold";
+
+/**
+ * Typography component to render H1 text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const H1 = props => {
+  const fontName = "TitilliumWeb";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: h1DefaultWeight,
+    defaultColor: h1DefaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: h1FontSize,
+      lineHeight: h1LineHeight
+    }
+  });
+};
+//# sourceMappingURL=H1.js.map

package/lib/module/components/typography/H1.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","h1FontSize","h1LineHeight","h1DefaultColor","h1DefaultWeight","H1","props","fontName","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H1.tsx"],"mappings":"AAOA,SAASA,oBAAoB,QAAQ,WAAW;AAiBhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAA6B,GAAG,cAAc;AAC3D,OAAO,MAAMC,eAA8B,GAAG,MAAM;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,EAAsB,GAAIC,KAAK,IAAK;EAC7C,MAAMC,QAAoB,GAAG,cAAc;EAC3C,OAAOP,oBAAoB,CAA+B;IACtD,GAAGM,KAAK;IACRE,aAAa,EAAEJ,eAAe;IAC9BK,YAAY,EAAEN,cAAc;IAC5BO,IAAI,EAAEH,QAAQ;IACdI,SAAS,EAAE;MAAEC,QAAQ,EAAEX,UAAU;MAAEY,UAAU,EAAEX;IAAa;EAChE,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/H2.js

@@ -0,0 +1,26 @@
+import { useTypographyFactory } from "./Factory";
+export const h2FontSize = 20;
+export const h2LineHeight = 24;
+export const h2DefaultColor = "bluegreyDark";
+export const h2DefaultWeight = "Bold";
+
+/**
+ * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const H2 = props => {
+  const fontName = "TitilliumWeb";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: h2DefaultWeight,
+    defaultColor: h2DefaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: h2FontSize,
+      lineHeight: h2LineHeight
+    }
+  });
+};
+//# sourceMappingURL=H2.js.map

package/lib/module/components/typography/H2.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","h2FontSize","h2LineHeight","h2DefaultColor","h2DefaultWeight","H2","props","fontName","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H2.tsx"],"mappings":"AAOA,SAASA,oBAAoB,QAAQ,WAAW;AAiBhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAA6B,GAAG,cAAc;AAC3D,OAAO,MAAMC,eAA8B,GAAG,MAAM;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,EAAsB,GAAIC,KAAK,IAAK;EAC7C,MAAMC,QAAoB,GAAG,cAAc;EAC3C,OAAOP,oBAAoB,CAA+B;IACtD,GAAGM,KAAK;IACRE,aAAa,EAAEJ,eAAe;IAC9BK,YAAY,EAAEN,cAAc;IAC5BO,IAAI,EAAEH,QAAQ;IACdI,SAAS,EAAE;MAAEC,QAAQ,EAAEX,UAAU;MAAEY,UAAU,EAAEX;IAAa;EAChE,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/H3.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { useTypographyFactory } from "./Factory";
+
+// these colors are allowed only when the weight is SemiBold
+
+// when the weight is bold, only the white color is allowed
+
+// all the possible colors
+
+// all the possible weight
+
+// these are the properties allowed only if weight is undefined or SemiBold
+
+// these are the properties allowed only if weight is Bold
+
+export const h3FontSize = 18;
+export const h3LineHeight = 22;
+
+/**
+ * A custom function to calculate the values if no weight or color is provided.
+ * The choose of the default color depends on the weight, for this reason cannot be used
+ * the default calculateWeightColor with fallback if undefined.
+ * @param weight
+ * @param color
+ */
+export const calculateH3WeightColor = (weight, color) => {
+  const newWeight = weight ?? "SemiBold";
+  const newColor = color !== undefined ? color : newWeight === "SemiBold" ? "bluegreyDark" : "white";
+  return {
+    weight: newWeight,
+    color: newColor
+  };
+};
+
+/**
+ * Typography component to render `H3` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const H3 = props => {
+  const fontName = "TitilliumWeb";
+  const weightColorFactory = React.useCallback(() => calculateH3WeightColor(props.weight, props.color), [props.weight, props.color]);
+  return useTypographyFactory({
+    ...props,
+    weightColorFactory,
+    font: fontName,
+    fontStyle: {
+      fontSize: h3FontSize,
+      lineHeight: h3LineHeight
+    }
+  });
+};
+//# sourceMappingURL=H3.js.map

package/lib/module/components/typography/H3.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useTypographyFactory","h3FontSize","h3LineHeight","calculateH3WeightColor","weight","color","newWeight","newColor","undefined","H3","props","fontName","weightColorFactory","useCallback","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H3.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,oBAAoB,QAAQ,WAAW;;AAGhD;;AAYA;;AAYA;;AAMA;;AAGA;;AAMA;;AAUA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAGA,CAClCC,MAAsB,EACtBC,KAAqB,KACmC;EACxD,MAAMC,SAAS,GAAGF,MAAM,IAAI,UAAU;EACtC,MAAMG,QAAQ,GACVF,KAAK,KAAKG,SAAS,GACbH,KAAK,GACLC,SAAS,KAAK,UAAU,GACpB,cAAc,GACd,OAAO;EACrB,OAAO;IACHF,MAAM,EAAEE,SAAS;IACjBD,KAAK,EAAEE;EACX,CAAC;AACL,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,EAAsB,GAAIC,KAAK,IAAK;EAC7C,MAAMC,QAAoB,GAAG,cAAc;EAC3C,MAAMC,kBAAkB,GAAGb,KAAK,CAACc,WAAW,CACxC,MAAMV,sBAAsB,CAACO,KAAK,CAACN,MAAM,EAAEM,KAAK,CAACL,KAAK,CAAC,EACvD,CAACK,KAAK,CAACN,MAAM,EAAEM,KAAK,CAACL,KAAK,CAC9B,CAAC;EACD,OAAOL,oBAAoB,CAA+B;IACtD,GAAGU,KAAK;IACRE,kBAAkB;IAClBE,IAAI,EAAEH,QAAQ;IACdI,SAAS,EAAE;MAAEC,QAAQ,EAAEf,UAAU;MAAEgB,UAAU,EAAEf;IAAa;EAChE,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/H4.js

@@ -0,0 +1,28 @@
+import { useTypographyFactory } from "./Factory";
+/* Common typographic styles */
+export const h4FontSize = 20;
+export const h4LineHeight = 24;
+
+/**
+ * Typography component to render `H4` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Regular/SemiBold`, color: `black/bluegreyDark` if design system is enabled or not
+ * @param props
+ * @constructor
+ */
+export const H4 = props => {
+  /* New typographic styles */
+  const font = "ReadexPro";
+  const defaultColor = "black";
+  const defaultWeight = "Regular";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize: h4FontSize,
+      lineHeight: h4LineHeight
+    }
+  });
+};
+//# sourceMappingURL=H4.js.map

package/lib/module/components/typography/H4.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","h4FontSize","h4LineHeight","H4","props","font","defaultColor","defaultWeight","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H4.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;AAUhD;AACA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,EAAsB,GAAGC,KAAK,IAAI;EAC3C;EACA,MAAMC,IAAgB,GAAG,WAAW;EACpC,MAAMC,YAA2B,GAAG,OAAO;EAC3C,MAAMC,aAA4B,GAAG,SAAS;EAE9C,OAAOP,oBAAoB,CAA+B;IACtD,GAAGI,KAAK;IACRG,aAAa;IACbD,YAAY;IACZD,IAAI;IACJG,SAAS,EAAE;MAAEC,QAAQ,EAAER,UAAU;MAAES,UAAU,EAAER;IAAa;EAChE,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/H5.js

@@ -0,0 +1,37 @@
+import { useTypographyFactory } from "./Factory";
+
+// these colors are allowed only when the weight is SemiBold
+
+// when the weight is bold, only the white color is allowed
+
+// all the possible colors
+
+// all the possible weight
+
+// these are the properties allowed only if weight is undefined or SemiBold
+
+// these are the properties allowed only if weight is Bold
+
+export const h5FontSize = 14;
+export const h5DefaultColor = "bluegreyDark";
+export const h5DefaultWeight = "SemiBold";
+
+/**
+ * Typography component to render `H5` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const H5 = props => {
+  const fontName = "TitilliumWeb";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: h5DefaultWeight,
+    defaultColor: h5DefaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: h5FontSize
+    }
+  });
+};
+//# sourceMappingURL=H5.js.map

package/lib/module/components/typography/H5.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","h5FontSize","h5DefaultColor","h5DefaultWeight","H5","props","fontName","defaultWeight","defaultColor","font","fontStyle","fontSize"],"sourceRoot":"../../../../src","sources":["components/typography/H5.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;;AAGhD;;AAMA;;AAYA;;AAGA;;AAGA;;AAMA;;AAUA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,cAA6B,GAAG,cAAc;AAC3D,OAAO,MAAMC,eAA8B,GAAG,UAAU;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,EAAsB,GAAIC,KAAK,IAAK;EAC7C,MAAMC,QAAoB,GAAG,cAAc;EAC3C,OAAON,oBAAoB,CAA+B;IACtD,GAAGK,KAAK;IACRE,aAAa,EAAEJ,eAAe;IAC9BK,YAAY,EAAEN,cAAc;IAC5BO,IAAI,EAAEH,QAAQ;IACdI,SAAS,EAAE;MAAEC,QAAQ,EAAEV;IAAW;EACtC,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/H6.js

@@ -0,0 +1,30 @@
+import { IOThemeLight } from "../../core/IOColors";
+import { useTypographyFactory } from "./Factory";
+
+// when the weight is bold, only these color are allowed
+
+export const h6FontSize = 16;
+export const h6LineHeight = 20;
+export const h6DefaultColor = IOThemeLight["textBody-default"];
+export const h6DefaultWeight = "Regular";
+
+/**
+ * Typography component to render `H6` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Regular`, color: `black`
+ * @param props
+ * @constructor
+ */
+export const H6 = props => {
+  const fontName = "ReadexPro";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: h6DefaultWeight,
+    defaultColor: h6DefaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: h6FontSize,
+      lineHeight: h6LineHeight
+    }
+  });
+};
+//# sourceMappingURL=H6.js.map

package/lib/module/components/typography/H6.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IOThemeLight","useTypographyFactory","h6FontSize","h6LineHeight","h6DefaultColor","h6DefaultWeight","H6","props","fontName","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H6.tsx"],"mappings":"AACA,SAAkBA,YAAY,QAAQ,qBAAqB;AAE3D,SAASC,oBAAoB,QAAQ,WAAW;;AAGhD;;AAQA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAA6B,GAAGJ,YAAY,CAAC,kBAAkB,CAAC;AAC7E,OAAO,MAAMK,eAA8B,GAAG,SAAS;;AAEvD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,EAAsB,GAAIC,KAAK,IAAK;EAC7C,MAAMC,QAAoB,GAAG,WAAW;EACxC,OAAOP,oBAAoB,CAA+B;IACtD,GAAGM,KAAK;IACRE,aAAa,EAAEJ,eAAe;IAC9BK,YAAY,EAAEN,cAAc;IAC5BO,IAAI,EAAEH,QAAQ;IACdI,SAAS,EAAE;MAAEC,QAAQ,EAAEX,UAAU;MAAEY,UAAU,EAAEX;IAAa;EAChE,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/Label.js

@@ -0,0 +1,23 @@
+import { useTypographyFactory } from "./Factory";
+/**
+ * Typography component to render `Label` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold`, color: `blue`
+ * @param props`
+ * @constructor
+ */
+export const Label = props => {
+  const fontName = "TitilliumWeb";
+  const fontSize = 16;
+  const labelDefaultWeight = "Bold";
+  const labelDefaultcolor = "blue";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: labelDefaultWeight,
+    defaultColor: labelDefaultcolor,
+    font: fontName,
+    fontStyle: {
+      fontSize
+    }
+  });
+};
+//# sourceMappingURL=Label.js.map

package/lib/module/components/typography/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","Label","props","fontName","fontSize","labelDefaultWeight","labelDefaultcolor","defaultWeight","defaultColor","font","fontStyle"],"sourceRoot":"../../../../src","sources":["components/typography/Label.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;AAahD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAyB,GAAIC,KAAK,IAAK;EAChD,MAAMC,QAAoB,GAAG,cAAc;EAC3C,MAAMC,QAAQ,GAAG,EAAE;EACnB,MAAMC,kBAAkB,GAAG,MAAM;EACjC,MAAMC,iBAAiB,GAAG,MAAM;EAEhC,OAAON,oBAAoB,CAA+B;IACtD,GAAGE,KAAK;IACRK,aAAa,EAAEF,kBAAkB;IACjCG,YAAY,EAAEF,iBAAiB;IAC/BG,IAAI,EAAEN,QAAQ;IACdO,SAAS,EAAE;MAAEN;IAAS;EAC1B,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/LabelSmall.js

@@ -0,0 +1,26 @@
+import { useTypographyFactory } from "./Factory";
+/**
+ * Typography component to render `LabelSmall` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold`, color: `blue`
+ * @param props`
+ * @constructor
+ */
+export const LabelSmall = props => {
+  const fontName = "TitilliumWeb";
+  const fontSizeMapping = {
+    regular: 14,
+    small: 12
+  };
+  const labelDefaultWeight = "Bold";
+  const labelDefaultcolor = "blue";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: labelDefaultWeight,
+    defaultColor: labelDefaultcolor,
+    font: fontName,
+    fontStyle: {
+      fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular
+    }
+  });
+};
+//# sourceMappingURL=LabelSmall.js.map

package/lib/module/components/typography/LabelSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","LabelSmall","props","fontName","fontSizeMapping","regular","small","labelDefaultWeight","labelDefaultcolor","defaultWeight","defaultColor","font","fontStyle","fontSize"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;AAuBhD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAA8B,GAAIC,KAAK,IAAK;EACrD,MAAMC,QAAoB,GAAG,cAAc;EAC3C,MAAMC,eAAyC,GAAG;IAAEC,OAAO,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAG,CAAC;EAC5E,MAAMC,kBAAkB,GAAG,MAAM;EACjC,MAAMC,iBAAiB,GAAG,MAAM;EAEhC,OAAOR,oBAAoB,CAA+B;IACtD,GAAGE,KAAK;IACRO,aAAa,EAAEF,kBAAkB;IACjCG,YAAY,EAACF,iBAAiB;IAC9BG,IAAI,EAAER,QAAQ;IACdS,SAAS,EAAE;MACPC,QAAQ,EAAEX,KAAK,CAACW,QAAQ,GAClBT,eAAe,CAACF,KAAK,CAACW,QAAQ,CAAC,GAC/BT,eAAe,CAACC;IAC1B;EACJ,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/Link.js

@@ -0,0 +1,33 @@
+import { useTypographyFactory } from "./Factory";
+export const linkDefaultColor = "blueIO-500";
+export const linkDefaultWeight = "Bold";
+
+/**
+ * Typography component to render `Link` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold/SemiBold`, color: `blue/blueIO-500`
+ * @param props`
+ * @constructor
+ */
+export const Link = props => {
+  const fontName = "TitilliumWeb";
+  const fontSizeMapping = {
+    regular: 16,
+    small: 14
+  };
+  const defaultWeight = linkDefaultWeight;
+  const defaultColor = linkDefaultColor;
+  const defaultFontSize = props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular;
+  const defaultTextDecorationLine = "underline";
+  return useTypographyFactory({
+    accessibilityRole: props.onPress ? "link" : undefined,
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: defaultFontSize,
+      textDecorationLine: defaultTextDecorationLine
+    }
+  });
+};
+//# sourceMappingURL=Link.js.map

package/lib/module/components/typography/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","linkDefaultColor","linkDefaultWeight","Link","props","fontName","fontSizeMapping","regular","small","defaultWeight","defaultColor","defaultFontSize","fontSize","defaultTextDecorationLine","accessibilityRole","onPress","undefined","font","fontStyle","textDecorationLine"],"sourceRoot":"../../../../src","sources":["components/typography/Link.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;AAahD,OAAO,MAAMC,gBAA+B,GAAG,YAAY;AAC3D,OAAO,MAAMC,iBAAgC,GAAG,MAAM;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAwB,GAAIC,KAAK,IAAK;EAC/C,MAAMC,QAAoB,GAAG,cAAc;EAC3C,MAAMC,eAAyC,GAAG;IAAEC,OAAO,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAG,CAAC;EAE5E,MAAMC,aAAa,GAAGP,iBAAiB;EACvC,MAAMQ,YAAY,GAAGT,gBAAgB;EAErC,MAAMU,eAAe,GAAGP,KAAK,CAACQ,QAAQ,GAChCN,eAAe,CAACF,KAAK,CAACQ,QAAQ,CAAC,GAC/BN,eAAe,CAACC,OAAO;EAC7B,MAAMM,yBAAyB,GAAG,WAAW;EAE7C,OAAOb,oBAAoB,CAA+B;IACtDc,iBAAiB,EAAEV,KAAK,CAACW,OAAO,GAAG,MAAM,GAAGC,SAAS;IACrD,GAAGZ,KAAK;IACRK,aAAa;IACbC,YAAY;IACZO,IAAI,EAAEZ,QAAQ;IACda,SAAS,EAAE;MACPN,QAAQ,EAAED,eAAe;MACzBQ,kBAAkB,EAAEN;IACxB;EACJ,CAAC,CAAC;AACN,CAAC"}

package/lib/module/components/typography/Monospace.js

@@ -0,0 +1,23 @@
+import { useTypographyFactory } from "./Factory";
+/**
+ * Typography component to render `Monospace` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Regular`, color: `bluegrey`
+ * @param props`
+ * @constructor
+ */
+export const Monospace = props => {
+  const fontName = "RobotoMono";
+  const fontSize = 16;
+  const monospaceDefaultWeight = "Regular";
+  const monospaceDefaultcolor = "bluegrey";
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: monospaceDefaultWeight,
+    defaultColor: monospaceDefaultcolor,
+    font: fontName,
+    fontStyle: {
+      fontSize
+    }
+  });
+};
+//# sourceMappingURL=Monospace.js.map

package/lib/module/components/typography/Monospace.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTypographyFactory","Monospace","props","fontName","fontSize","monospaceDefaultWeight","monospaceDefaultcolor","defaultWeight","defaultColor","font","fontStyle"],"sourceRoot":"../../../../src","sources":["components/typography/Monospace.tsx"],"mappings":"AAGA,SAASA,oBAAoB,QAAQ,WAAW;AAUhD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAA6B,GAAIC,KAAK,IAAK;EACpD,MAAMC,QAAoB,GAAG,YAAY;EACzC,MAAMC,QAAQ,GAAG,EAAE;EAEnB,MAAMC,sBAAsB,GAAG,SAAS;EACxC,MAAMC,qBAAqB,GAAG,UAAU;EAExC,OAAON,oBAAoB,CAA+B;IACtD,GAAGE,KAAK;IACRK,aAAa,EAAEF,sBAAsB;IACrCG,YAAY,EAAEF,qBAAqB;IACnCG,IAAI,EAAEN,QAAQ;IACdO,SAAS,EAAE;MAAEN;IAAS;EAC1B,CAAC,CAAC;AACN,CAAC"}