@pagopa/io-app-design-system 1.7.1 → 1.8.0

package/lib/commonjs/components/typography/Hero.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.heroLineHeight = exports.heroFontSize = exports.Hero = void 0;
+var _core = require("../../core");
+var _Factory = require("./Factory");
+const heroFontSize = 32;
+exports.heroFontSize = heroFontSize;
+const heroLineHeight = 48;
+exports.heroLineHeight = heroLineHeight;
+const font = "ReadexPro";
+const defaultColor = "black";
+const defaultWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont = "TitilliumWeb";
+/**
+ * `Hero` typographic style
+ */
+const Hero = props => {
+  const {
+    isExperimental
+  } = (0, _core.useIOExperimentalDesign)();
+  return (0, _Factory.useTypographyFactory)({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: {
+      fontSize: heroFontSize,
+      lineHeight: heroLineHeight
+    }
+  });
+};
+exports.Hero = Hero;
+//# sourceMappingURL=Hero.js.map

package/lib/commonjs/components/typography/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_core","require","_Factory","heroFontSize","exports","heroLineHeight","font","defaultColor","defaultWeight","legacyFont","Hero","props","isExperimental","useIOExperimentalDesign","useTypographyFactory","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/Hero.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAUO,MAAME,YAAY,GAAG,EAAE;AAACC,OAAA,CAAAD,YAAA,GAAAA,YAAA;AACxB,MAAME,cAAc,GAAG,EAAE;AAACD,OAAA,CAAAC,cAAA,GAAAA,cAAA;AACjC,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C;AACA;AACA;AACO,MAAMC,IAAI,GAAIC,KAAgB,IAAK;EACxC,MAAM;IAAEC;EAAe,CAAC,GAAG,IAAAC,6BAAuB,EAAC,CAAC;EAEpD,OAAO,IAAAC,6BAAoB,EAA+B;IACxD,GAAGH,KAAK;IACRH,aAAa;IACbD,YAAY;IACZD,IAAI,EAAEM,cAAc,GAAGN,IAAI,GAAGG,UAAU;IACxCM,SAAS,EAAE;MAAEC,QAAQ,EAAEb,YAAY;MAAEc,UAAU,EAAEZ;IAAe;EAClE,CAAC,CAAC;AACJ,CAAC;AAACD,OAAA,CAAAM,IAAA,GAAAA,IAAA"}

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

@@ -5,24 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Label = void 0;
 var _Factory = require("./Factory");
+var _common = require("./common");
+const fontName = "TitilliumWeb";
+const labelDefaultWeight = "Bold";
+const labelDefaultcolor = "black";
+
 /**
- * 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
+ * `Label` typographic style
  */
-const Label = props => {
-  const fontName = "TitilliumWeb";
-  const fontSize = 16;
-  const labelDefaultWeight = "Bold";
-  const labelDefaultcolor = "blue";
+const Label = _ref => {
+  let {
+    fontSize,
+    ...props
+  } = _ref;
   return (0, _Factory.useTypographyFactory)({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
     font: fontName,
     fontStyle: {
-      fontSize
+      fontSize: fontSize ? _common.fontSizeMapping[fontSize] : _common.fontSizeMapping.regular,
+      lineHeight: fontSize ? _common.lineHeightMapping[fontSize] : _common.lineHeightMapping.regular
     }
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_Factory","require","Label","props","fontName","fontSize","labelDefaultWeight","labelDefaultcolor","useTypographyFactory","defaultWeight","defaultColor","font","fontStyle","exports"],"sourceRoot":"../../../../src","sources":["components/typography/Label.tsx"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAaA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAyB,GAAGC,KAAK,IAAI;EAChD,MAAMC,QAAoB,GAAG,cAAc;EAC3C,MAAMC,QAAQ,GAAG,EAAE;EACnB,MAAMC,kBAAkB,GAAG,MAAM;EACjC,MAAMC,iBAAiB,GAAG,MAAM;EAEhC,OAAO,IAAAC,6BAAoB,EAA+B;IACxD,GAAGL,KAAK;IACRM,aAAa,EAAEH,kBAAkB;IACjCI,YAAY,EAAEH,iBAAiB;IAC/BI,IAAI,EAAEP,QAAQ;IACdQ,SAAS,EAAE;MAAEP;IAAS;EACxB,CAAC,CAAC;AACJ,CAAC;AAACQ,OAAA,CAAAX,KAAA,GAAAA,KAAA"}
+{"version":3,"names":["_Factory","require","_common","fontName","labelDefaultWeight","labelDefaultcolor","Label","_ref","fontSize","props","useTypographyFactory","defaultWeight","defaultColor","font","fontStyle","fontSizeMapping","regular","lineHeight","lineHeightMapping","exports"],"sourceRoot":"../../../../src","sources":["components/typography/Label.tsx"],"mappings":";;;;;;AAEA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAeA,MAAME,QAAoB,GAAG,cAAc;AAC3C,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,iBAAiB,GAAG,OAAO;;AAEjC;AACA;AACA;AACO,MAAMC,KAAK,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAE,GAAGC;EAAkB,CAAC,GAAAF,IAAA;EAAA,OACtD,IAAAG,6BAAoB,EAA+B;IACjD,GAAGD,KAAK;IACRE,aAAa,EAAEP,kBAAkB;IACjCQ,YAAY,EAAEP,iBAAiB;IAC/BQ,IAAI,EAAEV,QAAQ;IACdW,SAAS,EAAE;MACTN,QAAQ,EAAEA,QAAQ,GAAGO,uBAAe,CAACP,QAAQ,CAAC,GAAGO,uBAAe,CAACC,OAAO;MACxEC,UAAU,EAAET,QAAQ,GAChBU,yBAAiB,CAACV,QAAQ,CAAC,GAC3BU,yBAAiB,CAACF;IACxB;EACF,CAAC,CAAC;AAAA;AAACG,OAAA,CAAAb,KAAA,GAAAA,KAAA"}

package/lib/commonjs/components/typography/LabelHeader.js

@@ -6,32 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 exports.labelHeaderLineHeight = exports.labelHeaderFontSize = exports.labelHeaderDefaultColor = exports.LabelHeader = void 0;
 var _core = require("../../core");
 var _Factory = require("./Factory");
-/* Common typographic styles */
 const labelHeaderFontSize = 14;
 exports.labelHeaderFontSize = labelHeaderFontSize;
 const labelHeaderLineHeight = 18;
 exports.labelHeaderLineHeight = labelHeaderLineHeight;
 const labelHeaderDefaultColor = _core.IOThemeLight["textBody-default"];
-/* New typographic styles */
 exports.labelHeaderDefaultColor = labelHeaderDefaultColor;
 const labelHeaderFontName = "ReadexPro";
 const labelHeaderDefaultWeight = "Regular";
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyLabelHeaderFontName = "TitilliumWeb";
+
 /**
- * Typography component to render `LabelHeader` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Regular`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `LabelHeader` typographic style
  */
-const LabelHeader = props => (0, _Factory.useTypographyFactory)({
-  ...props,
-  defaultWeight: labelHeaderDefaultWeight,
-  defaultColor: labelHeaderDefaultColor,
-  font: labelHeaderFontName,
-  fontStyle: {
-    fontSize: labelHeaderFontSize,
-    lineHeight: labelHeaderLineHeight
-  }
-});
+const LabelHeader = props => {
+  const {
+    isExperimental
+  } = (0, _core.useIOExperimentalDesign)();
+  return (0, _Factory.useTypographyFactory)({
+    ...props,
+    defaultWeight: labelHeaderDefaultWeight,
+    defaultColor: labelHeaderDefaultColor,
+    font: isExperimental ? legacyLabelHeaderFontName : labelHeaderFontName,
+    fontStyle: {
+      fontSize: labelHeaderFontSize,
+      lineHeight: labelHeaderLineHeight
+    }
+  });
+};
 exports.LabelHeader = LabelHeader;
 //# sourceMappingURL=LabelHeader.js.map

package/lib/commonjs/components/typography/LabelHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["_core","require","_Factory","labelHeaderFontSize","exports","labelHeaderLineHeight","labelHeaderDefaultColor","IOThemeLight","labelHeaderFontName","labelHeaderDefaultWeight","LabelHeader","props","useTypographyFactory","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/LabelHeader.tsx"],"mappings":";;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAeA;AACO,MAAME,mBAAmB,GAAG,EAAE;AAACC,OAAA,CAAAD,mBAAA,GAAAA,mBAAA;AAC/B,MAAME,qBAAqB,GAAG,EAAE;AAACD,OAAA,CAAAC,qBAAA,GAAAA,qBAAA;AACjC,MAAMC,uBAAsC,GACjDC,kBAAY,CAAC,kBAAkB,CAAC;AAClC;AAAAH,OAAA,CAAAE,uBAAA,GAAAA,uBAAA;AACA,MAAME,mBAAiC,GAAG,WAAW;AACrD,MAAMC,wBAAuC,GAAG,SAAS;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAA8C,GAAGC,KAAK,IACjE,IAAAC,6BAAoB,EAA+B;EACjD,GAAGD,KAAK;EACRE,aAAa,EAAEJ,wBAAwB;EACvCK,YAAY,EAAER,uBAAuB;EACrCS,IAAI,EAAEP,mBAAmB;EACzBQ,SAAS,EAAE;IACTC,QAAQ,EAAEd,mBAAmB;IAC7Be,UAAU,EAAEb;EACd;AACF,CAAC,CAAC;AAACD,OAAA,CAAAM,WAAA,GAAAA,WAAA"}
+{"version":3,"names":["_core","require","_Factory","labelHeaderFontSize","exports","labelHeaderLineHeight","labelHeaderDefaultColor","IOThemeLight","labelHeaderFontName","labelHeaderDefaultWeight","legacyLabelHeaderFontName","LabelHeader","props","isExperimental","useIOExperimentalDesign","useTypographyFactory","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/LabelHeader.tsx"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAeO,MAAME,mBAAmB,GAAG,EAAE;AAACC,OAAA,CAAAD,mBAAA,GAAAA,mBAAA;AAC/B,MAAME,qBAAqB,GAAG,EAAE;AAACD,OAAA,CAAAC,qBAAA,GAAAA,qBAAA;AACjC,MAAMC,uBAAsC,GACjDC,kBAAY,CAAC,kBAAkB,CAAC;AAACH,OAAA,CAAAE,uBAAA,GAAAA,uBAAA;AACnC,MAAME,mBAAiC,GAAG,WAAW;AACrD,MAAMC,wBAAuC,GAAG,SAAS;;AAEzD;AACA,MAAMC,yBAAuC,GAAG,cAAc;;AAE9D;AACA;AACA;AACO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACtD,MAAM;IAAEC;EAAe,CAAC,GAAG,IAAAC,6BAAuB,EAAC,CAAC;EAEpD,OAAO,IAAAC,6BAAoB,EAA+B;IACxD,GAAGH,KAAK;IACRI,aAAa,EAAEP,wBAAwB;IACvCQ,YAAY,EAAEX,uBAAuB;IACrCY,IAAI,EAAEL,cAAc,GAAGH,yBAAyB,GAAGF,mBAAmB;IACtEW,SAAS,EAAE;MACTC,QAAQ,EAAEjB,mBAAmB;MAC7BkB,UAAU,EAAEhB;IACd;EACF,CAAC,CAAC;AACJ,CAAC;AAACD,OAAA,CAAAO,WAAA,GAAAA,WAAA"}

package/lib/commonjs/components/typography/{Link.js → LabelLink.js}

@@ -3,34 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkDefaultWeight = exports.linkDefaultColor = exports.Link = void 0;
+exports.linkDefaultWeight = exports.linkDefaultColor = exports.LabelLink = void 0;
+var _common = require("./common");
 var _Factory = require("./Factory");
 const fontName = "TitilliumWeb";
-const fontSizeMapping = {
-  regular: 16,
-  small: 14
-};
 const linkDefaultColor = "blueIO-500";
 exports.linkDefaultColor = linkDefaultColor;
-const linkDefaultWeight = "Bold";
+const linkDefaultWeight = "SemiBold";
 
 /**
- * Typography component to render `Link` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `blue`
- * @param props`
- * @constructor
+ * `Link` typographic style
  */
 exports.linkDefaultWeight = linkDefaultWeight;
-const Link = props => (0, _Factory.useTypographyFactory)({
+const LabelLink = props => (0, _Factory.useTypographyFactory)({
   accessibilityRole: props.onPress ? "link" : undefined,
   ...props,
   defaultWeight: linkDefaultWeight,
   defaultColor: linkDefaultColor,
   font: fontName,
   fontStyle: {
-    fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular,
+    fontSize: props.fontSize ? _common.fontSizeMapping[props.fontSize] : _common.fontSizeMapping.regular,
+    lineHeight: props.fontSize ? _common.lineHeightMapping[props.fontSize] : _common.lineHeightMapping.regular,
     textDecorationLine: "underline"
   }
 });
-exports.Link = Link;
-//# sourceMappingURL=Link.js.map
+exports.LabelLink = LabelLink;
+//# sourceMappingURL=LabelLink.js.map

package/lib/commonjs/components/typography/LabelLink.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_common","require","_Factory","fontName","linkDefaultColor","exports","linkDefaultWeight","LabelLink","props","useTypographyFactory","accessibilityRole","onPress","undefined","defaultWeight","defaultColor","font","fontStyle","fontSize","fontSizeMapping","regular","lineHeight","lineHeightMapping","textDecorationLine"],"sourceRoot":"../../../../src","sources":["components/typography/LabelLink.tsx"],"mappings":";;;;;;AAEA,IAAAA,OAAA,GAAAC,OAAA;AAOA,IAAAC,QAAA,GAAAD,OAAA;AAWA,MAAME,QAAsB,GAAG,cAAc;AAEtC,MAAMC,gBAA+B,GAAG,YAAY;AAACC,OAAA,CAAAD,gBAAA,GAAAA,gBAAA;AACrD,MAAME,iBAAgC,GAAG,UAAU;;AAE1D;AACA;AACA;AAFAD,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAGO,MAAMC,SAAS,GAAIC,KAAgB,IACxC,IAAAC,6BAAoB,EAA+B;EACjDC,iBAAiB,EAAEF,KAAK,CAACG,OAAO,GAAG,MAAM,GAAGC,SAAS;EACrD,GAAGJ,KAAK;EACRK,aAAa,EAAEP,iBAAiB;EAChCQ,YAAY,EAAEV,gBAAgB;EAC9BW,IAAI,EAAEZ,QAAQ;EACda,SAAS,EAAE;IACTC,QAAQ,EAAET,KAAK,CAACS,QAAQ,GACpBC,uBAAe,CAACV,KAAK,CAACS,QAAQ,CAAC,GAC/BC,uBAAe,CAACC,OAAO;IAC3BC,UAAU,EAAEZ,KAAK,CAACS,QAAQ,GACtBI,yBAAiB,CAACb,KAAK,CAACS,QAAQ,CAAC,GACjCI,yBAAiB,CAACF,OAAO;IAC7BG,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC;AAACjB,OAAA,CAAAE,SAAA,GAAAA,SAAA"}

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

@@ -5,29 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LabelSmall = void 0;
 var _Factory = require("./Factory");
+const fontName = "TitilliumWeb";
+const fontSizeMapping = {
+  regular: 14,
+  small: 12
+};
+const labelDefaultWeight = "Bold";
+const labelDefaultcolor = "blue";
+
 /**
- * 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
+ * `LabelSmall` typographic style
  */
-const LabelSmall = props => {
-  const fontName = "TitilliumWeb";
-  const fontSizeMapping = {
-    regular: 14,
-    small: 12
-  };
-  const labelDefaultWeight = "Bold";
-  const labelDefaultcolor = "blue";
-  return (0, _Factory.useTypographyFactory)({
-    ...props,
-    defaultWeight: labelDefaultWeight,
-    defaultColor: labelDefaultcolor,
-    font: fontName,
-    fontStyle: {
-      fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular
-    }
-  });
-};
+const LabelSmall = props => (0, _Factory.useTypographyFactory)({
+  ...props,
+  defaultWeight: labelDefaultWeight,
+  defaultColor: labelDefaultcolor,
+  font: fontName,
+  fontStyle: {
+    fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular
+  }
+});
 exports.LabelSmall = LabelSmall;
 //# sourceMappingURL=LabelSmall.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_Factory","require","LabelSmall","props","fontName","fontSizeMapping","regular","small","labelDefaultWeight","labelDefaultcolor","useTypographyFactory","defaultWeight","defaultColor","font","fontStyle","fontSize","exports"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAA8B,GAAGC,KAAK,IAAI;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,OAAO,IAAAC,6BAAoB,EAA+B;IACxD,GAAGP,KAAK;IACRQ,aAAa,EAAEH,kBAAkB;IACjCI,YAAY,EAAEH,iBAAiB;IAC/BI,IAAI,EAAET,QAAQ;IACdU,SAAS,EAAE;MACTC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ,GACpBV,eAAe,CAACF,KAAK,CAACY,QAAQ,CAAC,GAC/BV,eAAe,CAACC;IACtB;EACF,CAAC,CAAC;AACJ,CAAC;AAACU,OAAA,CAAAd,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_Factory","require","fontName","fontSizeMapping","regular","small","labelDefaultWeight","labelDefaultcolor","LabelSmall","props","useTypographyFactory","defaultWeight","defaultColor","font","fontStyle","fontSize","exports"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":";;;;;;AAEA,IAAAA,QAAA,GAAAC,OAAA;AAuBA,MAAMC,QAAoB,GAAG,cAAc;AAC3C,MAAMC,eAAyC,GAAG;EAChDC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACT,CAAC;AACD,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,iBAAiB,GAAG,MAAM;;AAEhC;AACA;AACA;AACO,MAAMC,UAAU,GAAIC,KAAsB,IAC/C,IAAAC,6BAAoB,EAA+B;EACjD,GAAGD,KAAK;EACRE,aAAa,EAAEL,kBAAkB;EACjCM,YAAY,EAAEL,iBAAiB;EAC/BM,IAAI,EAAEX,QAAQ;EACdY,SAAS,EAAE;IACTC,QAAQ,EAAEN,KAAK,CAACM,QAAQ,GACpBZ,eAAe,CAACM,KAAK,CAACM,QAAQ,CAAC,GAC/BZ,eAAe,CAACC;EACtB;AACF,CAAC,CAAC;AAACY,OAAA,CAAAR,UAAA,GAAAA,UAAA"}