@pagopa/io-app-design-system 1.12.0 → 1.13.0

package/src/components/pictograms/svg/PictogramBleedNotification.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedNotification = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M133.54 173.88c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.12-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92.01.91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.29-.04-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M137.45 190.31c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.32-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.86-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.36 213.78c-39.81-19.17-81.44-13.87-92.88-10.51-2.81.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.74 3.6ZM169.578 150.271l-.698 3.939 10.349 1.834.698-3.939-10.349-1.834Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M191.139 170.89c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.338 156.727l-3.982.38 2.844 29.855 3.982-.38-2.844-29.855Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="m131.07 106.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.83-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.2405-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M48.7898 127.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04l76.8402-14.18c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M105.77 115.39c1.83 9.92-4.73 19.45-14.6502 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedNotification;

package/src/components/pictograms/svg/PictogramNotification.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramNotification = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M207.289 180.45c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.27 1.72-1.32 2.8-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.74 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.0795-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M127.05 166.22c-2.31-1.73-10.9-2.99-22.99-3.37-5.8401-.18-10.4701-5.09-10.3201-10.95.11-4.48 3.04-8.44 7.2801-9.87l2.11-.71 1.27 3.79-2.11.71c-2.6601.89-4.4901 3.37-4.5601 6.17-.09 3.66 2.8001 6.73 6.4501 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M167.13 225.39c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.8501-.7-5.1501-2.77-6.1501-5.53-1.04-2.87-.5-6.12 1.4-8.5l3.29-4.1 3.1201 2.5-3.2901 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8001 2.63 3.3501 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24v-.01ZM146.973 142.998l-2.585 3.052 8.019 6.794 2.585-3.052-8.019-6.794Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M155.239 171.66c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM134.705 143.744l-12.57 27.229 3.631 1.676 12.57-27.229-3.631-1.676Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="m120.07 94.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.8304-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.24-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M37.7898 115.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04L114.31 98.01c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M94.7698 103.39c1.83 9.92-4.73 19.45-14.65 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramNotification;

package/src/components/pictograms/svg/originals/PictogramBleedNotification.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M133.54 173.88c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.12-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92.01.91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.29-.04-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M137.45 190.31c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.32-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.86-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28h.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M240.36 213.78c-39.81-19.17-81.44-13.87-92.88-10.51-2.81.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.74 3.6ZM169.578 150.271l-.698 3.939 10.349 1.834.698-3.939-10.349-1.834Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M191.139 170.89c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.338 156.727l-3.982.38 2.844 29.855 3.982-.38-2.844-29.855Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="m131.07 106.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.83-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.2405-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M48.7898 127.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04l76.8402-14.18c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M105.77 115.39c1.83 9.92-4.73 19.45-14.6502 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/pictograms/svg/originals/PictogramNotification.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M207.289 180.45c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.27 1.72-1.32 2.8-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.74 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.0795-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55.01.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M127.05 166.22c-2.31-1.73-10.9-2.99-22.99-3.37-5.8401-.18-10.4701-5.09-10.3201-10.95.11-4.48 3.04-8.44 7.2801-9.87l2.11-.71 1.27 3.79-2.11.71c-2.6601.89-4.4901 3.37-4.5601 6.17-.09 3.66 2.8001 6.73 6.4501 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2v.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M167.13 225.39c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.8501-.7-5.1501-2.77-6.1501-5.53-1.04-2.87-.5-6.12 1.4-8.5l3.29-4.1 3.1201 2.5-3.2901 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8001 2.63 3.3501 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24v-.01ZM146.973 142.998l-2.585 3.052 8.019 6.794 2.585-3.052-8.019-6.794Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M155.239 171.66c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM134.705 143.744l-12.57 27.229 3.631 1.676 12.57-27.229-3.631-1.676Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="m120.07 94.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.8304-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.24-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M37.7898 115.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04L114.31 98.01c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M94.7698 103.39c1.83 9.92-4.73 19.45-14.65 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+    fill="#00C5CA"
+  />
+</svg>

package/src/core/IOStyles.ts

@@ -117,6 +117,11 @@ export const IOButtonLegacyStyles = StyleSheet.create({
     // paddingHorizontal: PixelRatio.getFontScale() * 16,
     // borderRadius: PixelRatio.getFontScale() * 8
   },
+  buttonInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   /* Labels */
   label: {
     alignSelf: "center"
@@ -152,6 +157,11 @@ export const IOButtonStyles = StyleSheet.create({
     // paddingHorizontal: PixelRatio.getFontScale() * 16,
     // borderRadius: PixelRatio.getFontScale() * 8
   },
+  buttonInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   buttonLink: {
     flexDirection: "row",
     alignItems: "center",

package/src/core/IOTransitions.ts

@@ -0,0 +1,94 @@
+import { Easing, withTiming } from "react-native-reanimated";
+
+/**
+A custom enter transition designed for the average size
+inner content of a button or module (e.g. text).
+The scaling effect is slight.
+*/
+export const enterTransitionInnerContent = () => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(1, {
+      duration: 250,
+      easing: Easing.in(Easing.cubic)
+    }),
+    transform: [
+      {
+        scale: withTiming(1, {
+          duration: 250,
+          easing: Easing.in(Easing.cubic)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 0,
+    transform: [{ scale: 1.05 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
+
+/**
+A custom enter transition designed for the small size
+inner content of a button or module (e.g. loading spinner).
+The scaling effect is accentuated.
+*/
+export const enterTransitionInnerContentSmall = () => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(1, {
+      duration: 250,
+      easing: Easing.in(Easing.cubic)
+    }),
+    transform: [
+      {
+        scale: withTiming(1, {
+          duration: 250,
+          easing: Easing.in(Easing.cubic)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 0,
+    transform: [{ scale: 1.25 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
+
+/**
+A custom exit transition designed for both small
+and average size inner content of a button or module.
+The scaling effect is slight.
+*/
+export const exitTransitionInnerContent = () => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(0, {
+      duration: 350,
+      easing: Easing.out(Easing.cubic)
+    }),
+    transform: [
+      {
+        scale: withTiming(0.9, {
+          duration: 350,
+          easing: Easing.out(Easing.cubic)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 1,
+    transform: [{ scale: 1 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};

package/src/core/index.ts

@@ -1,5 +1,6 @@
 export * from "./IOColors";
 export * from "./IOAnimations";
+export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";