cozy-ui 124.1.0 → 124.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "124.1.0",
+  "version": "124.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Icons/Cloud2.jsx

@@ -5,7 +5,7 @@ function SvgCloud2(props) {
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <g clipPath="url(#cloud2_svg__clip0_1426_12806)">
-        <mask id="cloud2_svg__a">
+        <mask id="cloud2_svg__a" fill="#fff">
           <path
             fillRule="evenodd"
             clipRule="evenodd"

package/react/Layout/Layout.jsx

@@ -4,13 +4,22 @@ import React, { Component } from 'react'
 
 import styles from './styles.styl'
 
-export const Layout = ({ children, className, monoColumn, ...rest }) => {
+export const Layout = ({
+  children,
+  className,
+  monoColumn,
+  withTopBar,
+  ...rest
+}) => {
   return (
     <div
       className={cx(
         monoColumn ? styles['o-layout'] : styles['o-layout-2panes'],
         className,
-        [styles['o-layout--rounded']]
+        {
+          [styles[`o-layout${monoColumn ? '' : '-2panes'}--withTopBar`]]:
+            withTopBar
+        }
       )}
       {...rest}
     >
@@ -35,9 +44,13 @@ export class Content extends Component {
 Layout.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /** Used to add/remove top spacing when using with or without a topbar */
+  withTopBar: PropTypes.bool,
+  /** Should be true if no sidebar in the app */
   monoColumn: PropTypes.bool
 }
 
 Layout.defaultProps = {
+  withTopBar: true,
   monoColumn: false
 }

package/react/Layout/Layout.md

@@ -34,6 +34,7 @@ import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import Variants from 'cozy-ui/docs/components/Variants'
 
 /**
  * In a normal app, ExampleRouterNavLink is from react-router
@@ -50,13 +51,6 @@ const ExampleRouterNavLink = ({ children, className, active, activeClassName, on
 const NavLink = genNavLink(ExampleRouterNavLink)
 
 // Not necessary in a normal app
-const styles = {
-  layout: {
-    position: 'relative',
-    transform: 'translateZ(0)'
-  }
-}
-
 const useStyles = makeStyles({
   layout: {
     position: 'relative',
@@ -67,12 +61,13 @@ const useStyles = makeStyles({
   }
 })
 
-;
+const initialVariants = [{ monoColumn: false, withTopBar: true }]
+const [active, setActive] = useState(['Section 1', 'Subsection 1'])
+const styles = useStyles()
 
-const Example = () => {
-  const [active, setActive] = useState(['Section 1', 'Subsection 1'])
-  const styles = useStyles()
+;
 
+const SideBar = ({ variant }) => {
   // makeProps is not necessary in a normal app since react-router sets active
   // and onClick by itself
   const makeProps = route => {
@@ -80,7 +75,7 @@ const Example = () => {
     return { onClick: () => setActive(route), active: routeIsMatching }
   }
 
-  return <Layout className={styles.layout}>
+  return (
     <Sidebar>
       <Nav>
         <NavItem>
@@ -114,53 +109,27 @@ const Example = () => {
         </NavItem>
       </Nav>
     </Sidebar>
-    <Main>
-      <Content className='u-p-1'>
-        <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
-        { content.ada.short }
-      </Content>
-    </Main>
-  </Layout>
+  )
 }
 
-<DemoProvider>
-  <Example />
-</DemoProvider>
-```
-
-`monoColumn` option (without sidebar)
-
-```jsx
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import { makeStyles } from 'cozy-ui/transpiled/react/styles'
-
-// Not necessary in a normal app
-const useStyles = makeStyles({
-  layout: {
-    '& > main': {
-      minHeight: 'unset'
-    }
-  }
-})
-
-const Example = () => {
-  const styles = useStyles()
-
-  return (
-    <Layout className={styles.layout} monoColumn>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <DemoProvider>
+      <Layout
+        className={styles.layout}
+        withTopBar={variant.withTopBar}
+        monoColumn={variant.monoColumn}
+      >
+        {!variant.monoColumn && <SideBar variant={variant} />}
+        {variant.withTopBar && <div className="u-flex-m u-dn u-flex-items-center u-pos-absolute u-top-0 u-w-100" style={{ height: '48px', backgroundColor: 'var(--defaultBackgroundColor)' }}>Fake TopBar</div>}
         <Main>
           <Content className='u-p-1'>
+            <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
             { content.ada.short }
           </Content>
         </Main>
-    </Layout>
-  )
-}
-
-;
-
-<DemoProvider>
-  <Example />
-</DemoProvider>
+      </Layout>
+    </DemoProvider>
+  )}
+</Variants>
 ```

package/react/Layout/styles.styl

@@ -3,5 +3,11 @@
 .o-layout
     @extend $app
 
+.o-layout--withTopBar
+    @extend $app--withTopBar
+
 .o-layout-2panes
     @extend $app-2panes-sticky
+
+.o-layout-2panes--withTopBar
+    @extend $app-2panes--withTopBar

package/stylus/objects/layouts.styl

@@ -77,16 +77,6 @@ $app
         overflow-x hidden
         overflow-y auto
 
-    &--rounded
-        +medium-screen('min') // desktop only
-            main
-                background-color var(--defaultBackgroundColor)
-
-                & > [role=main]
-                    margin 1rem 1rem 1rem 0
-                    border-radius 1rem
-                    background-color var(--paperBackgroundColor)
-
     +medium-screen() // mobile + tablet
         display block
 
@@ -95,7 +85,7 @@ $app
             padding-left env(safe-area-inset-left)
             padding-right env(safe-area-inset-right)
             padding-bottom env(safe-area-inset-bottom)
-            min-height 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
+            min-height 100vh
 
         main,
         main > [role=contentinfo], // Deprecated
@@ -103,18 +93,17 @@ $app
             display block
             overflow visible
 
-        // These pseudo-element are "ghost" elements replacing bar and nav
+$app--withTopBar
+    +medium-screen() // mobile + tablet
+        main
+            min-height 'calc(100vh - %s)' % barHeight
+
+        // this pseudo-element is "ghost" element replacing bar
         &:before
-        &:after
             content ''
             display block
-
-        &:before
             height barHeight
 
-        &:after
-            height navHeight
-
 // STICKY layout
 // When you want a sidebar and you want it to act like a sticky footer on mobile
 $app-2panes-sticky
@@ -132,7 +121,26 @@ $app-2panes-sticky
     main > [role=main]
         height auto
 
+    // rounded effect
+    +medium-screen('min') // desktop only
+        main
+            background-color var(--defaultBackgroundColor)
+
+            & > [role=main]
+                margin 1rem 1rem 1rem 0
+                border-radius 1rem
+                background-color var(--paperBackgroundColor)
+
     +medium-screen() // mobile + tablet
+        main
+            min-height calc(100vh - var(--sidebarHeight))
+
+        // this pseudo-element is "ghost" element replacing nav
+        &:after
+            content ''
+            display block
+            height navHeight
+
         > aside
             position fixed
             bottom 0
@@ -140,3 +148,14 @@ $app-2panes-sticky
             display block
             z-index var(--zIndex-nav)
             width 100%
+
+$app-2panes--withTopBar
+    +medium-screen() // mobile + tablet
+        main
+            min-height 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
+
+        // this pseudo-element is "ghost" element replacing bar
+        &:before
+            content ''
+            display block
+            height barHeight