cozy-ui 140.5.2 → 141.0.0

package/stylus/cozy-ui/build.styl

@@ -882,56 +882,56 @@ Display an chip that represents complex identity
     .u-m-1 - Margins on all sides with 1 line (16px)
     .u-m-1-half - Margins on all sides with 1 line an a half (24px)
     .u-m-2 - Margins on all sides with 2 lines (32px)
-    .u-m-2-half - Margins on all sides with 1 line an a half (40px)
-    .u-m-3 - Margins on all sides with 2 lines (48px)
+    .u-m-2-half - Margins on all sides with 2 lines an a half (40px)
+    .u-m-3 - Margins on all sides with 3 lines (48px)
     .u-mv-auto - Auto vertically margins
     .u-mv-0 - No vertically margins
     .u-mv-half - Vertically margins with half a line (8px)
     .u-mv-1 - Vertically margins with 1 line (16px)
     .u-mv-1-half - Vertically margins with 1 line an a half (24px)
     .u-mv-2 - Vertically margins with 2 lines (32px)
-    .u-mv-2-half - Vertically margins with 1 line an a half (40px)
-    .u-mv-3 - Vertically margins with 2 lines (48px)
+    .u-mv-2-half - Vertically margins with 2 lines an a half (40px)
+    .u-mv-3 - Vertically margins with 3 lines (48px)
     .u-mh-auto - Auto horizontally margins
     .u-mh-0 - No horizontally margins
     .u-mh-half - Horizontally margins with half a line (8px)
     .u-mh-1 - Horizontally margins with 1 line (16px)
     .u-mh-1-half - Horizontally margins with 1 line an a half (24px)
     .u-mh-2 - Horizontally margins with 2 lines (32px)
-    .u-mh-2-half - Horizontally margins with 1 line an a half (40px)
-    .u-mh-3 - Horizontally margins with 2 lines (48px)
+    .u-mh-2-half - Horizontally margins with 2 lines an a half (40px)
+    .u-mh-3 - Horizontally margins with 3 lines (48px)
     .u-mt-auto - Margin Top auto
     .u-mt-0 - No margin Top
     .u-mt-half - Margin Top with half a line (8px)
     .u-mt-1 - Margin Top with 1 line (16px)
     .u-mt-1-half - Margin Top with 1 line an a half (24px)
     .u-mt-2 - Margin Top with 2 lines (32px)
-    .u-mt-2-half - Margin Top with 1 line an a half (40px)
-    .u-mt-3 - Margin Top with 2 lines (48px)
+    .u-mt-2-half - Margin Top with 2 lines an a half (40px)
+    .u-mt-3 - Margin Top with 3 lines (48px)
     .u-mb-auto - Margin Bottom auto
     .u-mb-0 - No margin Bottom
     .u-mb-half - Margin Bottom with half a line (8px)
     .u-mb-1 - Margin Bottom with 1 line (16px)
     .u-mb-1-half - Margin Bottom with 1 line an a half (24px)
     .u-mb-2 - Margin Bottom with 2 lines (32px)
-    .u-mb-2-half - Margin Bottom with 1 line an a half (40px)
-    .u-mb-3 - Margin Bottom with 2 lines (48px)
+    .u-mb-2-half - Margin Bottom with 2 lines an a half (40px)
+    .u-mb-3 - Margin Bottom with 3 lines (48px)
     .u-ml-auto - Margin Left auto
     .u-ml-0 - No margin Left
     .u-ml-half - Margin Left with half a line (8px)
     .u-ml-1 - Margin Left with 1 line (16px)
     .u-ml-1-half - Margin Left with 1 line an a half (24px)
     .u-ml-2 - Margin Left with 2 lines (32px)
-    .u-ml-2-half - Margin Left with 1 line an a half (40px)
-    .u-ml-3 - Margin Left with 2 lines (48px)
+    .u-ml-2-half - Margin Left with 2 lines an a half (40px)
+    .u-ml-3 - Margin Left with 3 lines (48px)
     .u-mr-auto - Margin Right auto
     .u-mr-0 - No margin Right
     .u-mr-half - Margin Right with half a line (8px)
     .u-mr-1 - Margin Right with 1 line (16px)
     .u-mr-1-half - Margin Right with 1 line an a half (24px)
     .u-mr-2 - Margin Right with 2 lines (32px)
-    .u-mr-2-half - Margin Right with 1 line an a half (40px)
-    .u-mr-3 - Margin Right with 2 lines (48px)
+    .u-mr-2-half - Margin Right with 2 lines an a half (40px)
+    .u-mr-3 - Margin Right with 3 lines (48px)
 
     Markup:
     <div style="background-color:dimgrey; border: 1px solid black;"><div style="padding:.5rem; background-color:gainsboro;" class="{{modifier_class}}">🎶 Gimme some margin 🎵 </div></div>
@@ -952,56 +952,56 @@ Display an chip that represents complex identity
     .u-p-1 - Paddings on all sides with 1 line (16px)
     .u-p-1-half - Paddings on all sides with 1 line an a half (24px)
     .u-p-2 - Paddings on all sides with 2 lines (32px)
-    .u-p-2-half - Paddings on all sides with 1 line an a half (40px)
-    .u-p-3 - Paddings on all sides with 2 lines (48px)
+    .u-p-2-half - Paddings on all sides with 2 lines an a half (40px)
+    .u-p-3 - Paddings on all sides with 3 lines (48px)
     .u-pv-auto - Auto vertically paddings
     .u-pv-0 - No vertically paddings
     .u-pv-half - Vertically paddings with half a line (8px)
     .u-pv-1 - Vertically paddings with 1 line (16px)
     .u-pv-1-half - Vertically paddings with 1 line an a half (24px)
     .u-pv-2 - Vertically paddings with 2 lines (32px)
-    .u-pv-2-half - Vertically paddings with 1 line an a half (40px)
-    .u-pv-3 - Vertically paddings with 2 lines (48px)
+    .u-pv-2-half - Vertically paddings with 2 lines an a half (40px)
+    .u-pv-3 - Vertically paddings with 3 lines (48px)
     .u-ph-auto - Auto horizontally paddings
     .u-ph-0 - No horizontally paddings
     .u-ph-half - Horizontally paddings with half a line (8px)
     .u-ph-1 - Horizontally paddings with 1 line (16px)
     .u-ph-1-half - Horizontally paddings with 1 line an a half (24px)
     .u-ph-2 - Horizontally paddings with 2 lines (32px)
-    .u-ph-2-half - Horizontally paddings with 1 line an a half (40px)
-    .u-ph-3 - Horizontally paddings with 2 lines (48px)
+    .u-ph-2-half - Horizontally paddings with 2 lines an a half (40px)
+    .u-ph-3 - Horizontally paddings with 3 lines (48px)
     .u-pt-auto - Padding Top auto
     .u-pt-0 - No padding Top
     .u-pt-half - Padding Top with half a line (8px)
     .u-pt-1 - Padding Top with 1 line (16px)
     .u-pt-1-half - Padding Top with 1 line an a half (24px)
     .u-pt-2 - Padding Top with 2 lines (32px)
-    .u-pt-2-half - Padding Top with 1 line an a half (40px)
-    .u-pt-3 - Padding Top with 2 lines (48px)
+    .u-pt-2-half - Padding Top with 2 lines an a half (40px)
+    .u-pt-3 - Padding Top with 3 lines (48px)
     .u-pb-auto - Padding Bottom auto
     .u-pb-0 - No padding Bottom
     .u-pb-half - Padding Bottom with half a line (8px)
     .u-pb-1 - Padding Bottom with 1 line (16px)
     .u-pb-1-half - Padding Bottom with 1 line an a half (24px)
     .u-pb-2 - Padding Bottom with 2 lines (32px)
-    .u-pb-2-half - Padding Bottom with 1 line an a half (40px)
-    .u-pb-3 - Padding Bottom with 2 lines (48px)
+    .u-pb-2-half - Padding Bottom with 2 lines an a half (40px)
+    .u-pb-3 - Padding Bottom with 3 lines (48px)
     .u-pl-auto - Padding Left auto
     .u-pl-0 - No padding Left
     .u-pl-half - Padding Left with half a line (8px)
     .u-pl-1 - Padding Left with 1 line (16px)
     .u-pl-1-half - Padding Left with 1 line an a half (24px)
     .u-pl-2 - Padding Left with 2 lines (32px)
-    .u-pl-2-half - Padding Left with 1 line an a half (40px)
-    .u-pl-3 - Padding Left with 2 lines (48px)
+    .u-pl-2-half - Padding Left with 2 lines an a half (40px)
+    .u-pl-3 - Padding Left with 3 lines (48px)
     .u-pr-auto - Padding Right auto
     .u-pr-0 - No padding Right
     .u-pr-half - Padding Right with half a line (8px)
     .u-pr-1 - Padding Right with 1 line (16px)
     .u-pr-1-half - Padding Right with 1 line an a half (24px)
     .u-pr-2 - Padding Right with 2 lines (32px)
-    .u-pr-2-half - Padding Right with 1 line an a half (40px)
-    .u-pr-3 - Padding Right with 2 lines (48px)
+    .u-pr-2-half - Padding Right with 2 lines an a half (40px)
+    .u-pr-3 - Padding Right with 3 lines (48px)
 
     Markup:
     <div style="background-color:gainsboro; display: inline-block;" class="{{modifier_class}}"><span style="background-color:bisque;">🎼 Gimme some padding 💃</span></div>
@@ -1009,6 +1009,49 @@ Display an chip that represents complex identity
     Styleguide utilities.paddings
 */
 
+/*
+    Gaps
+
+    Classes to add gaps between children nodes, vertically, horizontally or in both directions based on default font-size (16px)<br>
+    [Can be used with breakpoints modifier suffixes (`-t`,`-s`,`-m`)](section-settings.html#kssref-settings-breakpoints)
+
+    .u-g-normal - Normal gaps in both directions
+    .u-g-0 - No gaps in both directions
+    .u-g-half - Gaps in both directions with half a line (8px)
+    .u-g-1 - Gaps in both directions with 1 line (16px)
+    .u-g-1-half - Gaps in both directions with 1 line an a half (24px)
+    .u-g-2 - Gaps in both directions with 2 lines (32px)
+    .u-g-2-half - Gaps in both directions with 2 lines an a half (40px)
+    .u-g-3 - Gaps in both directions with 3 lines (48px)
+    .u-gv-normal - Normal vertically gaps
+    .u-gv-0 - No vertically gaps
+    .u-gv-half - Vertically gaps with half a line (8px)
+    .u-gv-1 - Vertically gaps with 1 line (16px)
+    .u-gv-1-half - Vertically gaps with 1 line an a half (24px)
+    .u-gv-2 - Vertically gaps with 2 lines (32px)
+    .u-gv-2-half - Vertically gaps with 2 lines an a half (40px)
+    .u-gv-3 - Vertically gaps with 3 lines (48px)
+    .u-gh-normal - Normal horizontally gaps
+    .u-gh-0 - No horizontally gaps
+    .u-gh-half - Horizontally gaps with half a line (8px)
+    .u-gh-1 - Horizontally gaps with 1 line (16px)
+    .u-gh-1-half - Horizontally gaps with 1 line an a half (24px)
+    .u-gh-2 - Horizontally gaps with 2 lines (32px)
+    .u-gh-2-half - Horizontally gaps with 2 lines an a half (40px)
+    .u-gh-3 - Horizontally gaps with 3 lines (48px)
+
+    Markup:
+    <div style="background-color: dimgrey; border: 1px solid black; line-height: 2.5rem;" class="u-flex u-flex-wrap u-w-4 u-ta-center {{modifier_class}}">
+        <div style="background-color: gainsboro;" class="u-w-2-half u-h-2-half">🎶</div>
+        <div style="background-color: gainsboro;" class="u-w-2-half u-h-2-half">🎵</div>
+        <div style="background-color: gainsboro;" class="u-w-2-half u-h-2-half">🎼</div>
+        <div style="background-color: gainsboro;" class="u-w-2-half u-h-2-half">💃</div>
+    </div>
+
+    Styleguide utilities.gaps
+*/
+
+
 /*
     Spacing
 

package/stylus/utilities/spaces.styl

@@ -21,6 +21,27 @@ directions = {
     h: horizontal
 }
 
+gapTypes = {
+    g: gap
+}
+
+gapSizes = {
+    'normal': normal,
+    '0': 0,
+    'half': rem(8),
+    '1': rem(16),
+    '1-half': rem(24),
+    '2': rem(32),
+    '2-half': rem(40),
+    '3': rem(48)
+}
+
+gapDirections = {
+    '': all,
+    v: row,
+    h: column
+}
+
 // Placeholders generation
 for kType, vType in types
     for kSize, vSize in sizes
@@ -39,6 +60,15 @@ for kType, vType in types
             else
                 ${kType}{kDir}-{kSize}
                     {vType}-{vDir}: vSize !important
+for kType, vType in gapTypes
+    for kSize, vSize in gapSizes
+        for kDir, vDir in gapDirections
+            if vDir == all
+                ${kType}-{kSize}
+                    {vType}: vSize !important
+            else
+                ${kType}{kDir}-{kSize}
+                    {vDir}-{vType}: vSize !important
 
 // Classes generation
 cssModulesSpacingUtils()
@@ -77,6 +107,24 @@ cssModulesSpacingUtils()
                             else
                                 :global(.u-{kType}{kDir}-{kSize}-{vBp})
                                     {vType}-{vDir}: vSize !important
+        for kType, vType in gapTypes
+            for kSize, vSize in gapSizes
+                for kDir, vDir in gapDirections
+                    if vBp == ''
+                        if vDir == all
+                            :global(.u-{kType}-{kSize})
+                                {vType}: vSize !important
+                        else
+                            :global(.u-{kType}{kDir}-{kSize})
+                                {vDir}-{vType}: vSize !important
+                    else
+                        @media (max-width: rem(lookup('BP-'+kBp)))
+                            if vDir == all
+                                :global(.u-{kType}-{kSize}-{vBp})
+                                    {vType}: vSize !important
+                            else
+                                :global(.u-{kType}{kDir}-{kSize}-{vBp})
+                                    {vDir}-{vType}: vSize !important
 
 nativeSpacingUtils()
     for kBp, vBp in breakpoints
@@ -114,6 +162,25 @@ nativeSpacingUtils()
                             else
                                 .u-{kType}{kDir}-{kSize}-{vBp}
                                     {vType}-{vDir}: vSize !important
+        for kType, vType in gapTypes
+            for kSize, vSize in gapSizes
+                for kDir, vDir in gapDirections
+                    if vBp == ''
+                        if vDir == all
+                            .u-{kType}-{kSize}
+                                {vType}: vSize !important
+                        else
+                            .u-{kType}{kDir}-{kSize}
+                                {vDir}-{vType}: vSize !important
+                    else
+                        @media (max-width: rem(lookup('BP-'+kBp)))
+                            if vDir == all
+                                .u-{kType}-{kSize}-{vBp}
+                                    {vType}: vSize !important
+                            else
+                                .u-{kType}{kDir}-{kSize}-{vBp}
+                                    {vDir}-{vType}: vSize !important
+
 if cssmodules == true
     cssModulesSpacingUtils()
 else

package/transpiled/react/providers/Breakpoints/index.js

@@ -19,10 +19,10 @@ export var BreakpointsProvider = function BreakpointsProvider(_ref) {
   var _useIframeConnection = useIframeConnection({
     parentBasedIframe: parentBasedIframe
   }),
-      hasIframe = _useIframeConnection.hasIframe;
+      iframeWindow = _useIframeConnection.iframeWindow;
 
   useIframeToSendWidth({
-    hasIframe: hasIframe
+    iframeWindow: iframeWindow
   });
 
   var _useParentBreakpoints = useParentBreakpoints({

package/transpiled/react/providers/Breakpoints/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/providers/Breakpoints/useIframeConnection.d.ts

@@ -1,5 +1,5 @@
 export function useIframeConnection({ parentBasedIframe }: {
     parentBasedIframe: any;
 }): {
-    hasIframe: boolean;
+    iframeWindow: null;
 };

package/transpiled/react/providers/Breakpoints/useIframeConnection.js

@@ -4,17 +4,17 @@ import { isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
 export var useIframeConnection = function useIframeConnection(_ref) {
   var parentBasedIframe = _ref.parentBasedIframe;
 
-  var _useState = useState(false),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      hasIframe = _useState2[0],
-      setHasIframe = _useState2[1];
+      iframeWindow = _useState2[0],
+      setIframeWindow = _useState2[1];
 
   var isIframe = parentBasedIframe && isInsideIframe(); // parent window receives from iframe to give breakpoints
 
   useEffect(function () {
     var handleMessage = function handleMessage(ev) {
       if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
-        setHasIframe(true);
+        setIframeWindow(ev.source);
       }
     };
 
@@ -30,6 +30,6 @@ export var useIframeConnection = function useIframeConnection(_ref) {
     }
   }, [isIframe]);
   return {
-    hasIframe: hasIframe
+    iframeWindow: iframeWindow
   };
 };

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.d.ts

@@ -1,3 +1,3 @@
-export function useIframeToSendWidth({ hasIframe }: {
-    hasIframe: any;
+export function useIframeToSendWidth({ iframeWindow }: {
+    iframeWindow: any;
 }): void;

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.js

@@ -1,32 +1,24 @@
 import throttle from 'lodash/throttle';
 import { useEffect } from 'react';
-/**
- * To send window innerWidth to first iframe
- * @returns
- */
 
-var sendWidthToIframe = function sendWidthToIframe() {
-  return window.frames[1].postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
+var sendWidthToIframe = function sendWidthToIframe(iframeWindow) {
+  return iframeWindow === null || iframeWindow === void 0 ? void 0 : iframeWindow.postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
 };
 
 export var useIframeToSendWidth = function useIframeToSendWidth(_ref) {
-  var hasIframe = _ref.hasIframe;
+  var iframeWindow = _ref.iframeWindow;
   // parent window send its innerWidth
   useEffect(function () {
-    if (hasIframe) {
-      sendWidthToIframe();
-    }
-  }, [hasIframe]); // parent window send its innerWidth on resize
+    sendWidthToIframe(iframeWindow);
+  }, [iframeWindow]); // parent window send its innerWidth on resize
 
   useEffect(function () {
     var handleResize = throttle(function () {
-      if (hasIframe) {
-        sendWidthToIframe();
-      }
+      sendWidthToIframe(iframeWindow);
     }, 100);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
     };
-  }, [hasIframe]);
+  }, [iframeWindow]);
 };