Skip to content

Commit

Permalink
Merge pull request #1889 from cozy/feat/improve_Empty
Browse files Browse the repository at this point in the history 
feat: Add prop iconSize
@Merkur39
Merkur39 authored Sep 10, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
2 parents 1a2d0ff + 9d6ab89 commit 723f199
Showing 13 changed files with 555 additions and 174 deletions.
28 changes: 13 additions & 15 deletions react/Banner/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
### Banner

```jsx
import Variants from 'docs/components/Variants'
import palette from 'cozy-ui/transpiled/react/palette'
import Variants from 'cozy-ui/docs/components/Variants';
import palette from 'cozy-ui/transpiled/react/palette';

import Banner from 'cozy-ui/transpiled/react/Banner'
import Button from 'cozy-ui/transpiled/react/Button'
import Icon from 'cozy-ui/transpiled/react/Icon'
import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
import DownloadIcon from "cozy-ui/transpiled/react/Icons/Download"
import Banner from 'cozy-ui/transpiled/react/Banner';
import Button from 'cozy-ui/transpiled/react/Button';
import Icon from 'cozy-ui/transpiled/react/Icon';
import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop';
import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download';

const shortText = "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."
const longText = "You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text."
const buttonOne = <Button theme="text" icon={DownloadIcon} label="Download" onClick={() => alert('Clicked!')} />
const buttonTwo = <Button theme="text" label="No, thanks!" />
const icon = <Icon icon={DeviceLaptopIcon} />
const shortText = 'Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.';
const longText = 'You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text.';
const buttonOne = <Button theme="text" icon={DownloadIcon} label="Download" onClick={() => alert('Clicked!')} />;
const buttonTwo = <Button theme="text" label="No, thanks!" />;
const icon = <Icon icon={DeviceLaptopIcon} />;

const initialVariants = [
{ icon: true, longText: false, buttonOne: true, buttonTwo: true, inline: true, backgroundColor: true }
]

;
];

<Variants initialVariants={initialVariants}>
{variant => (
39 changes: 20 additions & 19 deletions react/CompositeRow/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
```js
import { Media, Bd, Img } from '../Media'
import UIChip from '../Chip'
import Icon from '../Icon'
import Circle from '../Circle'
import Variants from 'docs/components/Variants'
import { Media, Bd, Img } from '../Media';
import UIChip from '../Chip';
import Icon from '../Icon';
import Circle from '../Circle';
import Variants from 'cozy-ui/docs/components/Variants';
import CompositeRow from 'cozy-ui/transpiled/react/CompositeRow';

import Typography from "cozy-ui/transpiled/react/Typography";
import Typography from 'cozy-ui/transpiled/react/Typography';

import WalletIcon from "cozy-ui/transpiled/react/Icons/Wallet";
import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
import palette from "cozy-ui/transpiled/react/palette";
import WalletIcon from 'cozy-ui/transpiled/react/Icons/Wallet';
import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots';
import palette from 'cozy-ui/transpiled/react/palette';

const fnacLogoURL = 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Fnac_Logo.svg';

@@ -20,32 +21,32 @@ const Chip = React.memo(({ children, ...props }) => (
size='small'
children={children} {...props}
/>
))
));

const ChipImage = React.memo(({ src }) => (
<img className='u-mr-half' src={src} height='50%' />
))
));

const compositeStyle = {
boxShadow: '0 0 10px rgba(0, 0, 0, 0.15)',
boxSizing: 'border-box',
}
boxSizing: 'border-box',
};


const CompositeImage = () => (
<Circle backgroundColor={palette.melon}>
<Icon icon={WalletIcon} />
</Circle>
)
);

const Amount = () => (
<Typography tag='span' variant="h6">12,15€</Typography>
)
);

const onDotsClick = () => { alert('clicked dots !')}
const Dots = () => (
<Icon className="u-c-pointer" color="var(--coolGrey)" icon={DotsIcon} onClick={onDotsClick}/>
)
);

const Chips = () => (
<Bd className='u-row-xs'>
@@ -56,7 +57,7 @@ const Chips = () => (
<ChipImage src={fnacLogoURL} /> Fnac
</Chip>
</Bd>
)
);

const Actions = ({ extraInformation }) => (
<Media>
@@ -70,9 +71,9 @@ const Actions = ({ extraInformation }) => (
</Bd>
{ extraInformation ? <Shrink><Typography variant="caption" color="textSecondary">Extra information to the right of the card</Typography></Shrink> : null }
</Media>
)
);

const Shrink = Img
const Shrink = Img;

const initialVariants = [
{ chips: true, secondaryText: true, dots: true, icon: true, extraInformation: true },
81 changes: 44 additions & 37 deletions react/Empty/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
Empty (or error) view in a listing container

### Default
_See **layout** difference on mobile view_

```
import Empty from 'cozy-ui/transpiled/react/Empty';
```jsx
import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy';
import Button from 'cozy-ui/transpiled/react/Button';
import Empty from 'cozy-ui/transpiled/react/Empty';
import Variants from 'cozy-ui/docs/components/Variants';

const styles = {
empty: {
@@ -15,41 +17,46 @@ const styles = {
}
};

<div style={styles.empty}>
<Empty icon={CozyIcon} title="This list is empty" text="Try adding some content to this list"/>
</div>
```

### Without layout

```
import Empty from 'cozy-ui/transpiled/react/Empty';
import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy';
const initialVariants = [
{ layout: false, large: false, medium: false, withContent: false }
];

<>
<Empty icon={CozyIcon} layout={false} title="This list is empty" text="Try adding some content to this list"/>
{!isTesting() && (
<Variants initialVariants={initialVariants}>
{variant => (
<Empty
icon={CozyIcon}
iconSize={variant.large ? 'large' : variant.medium ? 'medium' : 'normal'}
layout={variant.layout}
title="This list is empty"
text="Try adding some content to this list"
>
{variant.withContent && <Button className='u-mt-1' label="Try refreshing" />}
</Empty>
)}
</Variants>
)}

{isTesting() && (
<>
<div style={styles.empty}>
<Empty icon={CozyIcon} layout={false} title="This list is empty" text="Try adding some content to this list"/>
</div>
<div>
<Empty icon={CozyIcon} layout={false} title="This list is empty" text="Try adding some content to this list"/>
</div>
<div style={styles.empty}>
<Empty id='empty' layout={false} icon={CozyIcon} title="An error occured" text="It's maybe nothing, just refresh to be sure">
<Button className='u-mt-1' label="Try refreshing" />
</Empty>
</div>
<div>
<Empty icon={CozyIcon} layout={false} title="This list is empty" text="Try adding some content to this list"/>
<Empty icon={CozyIcon} layout={false} iconSize="medium" title="This list is empty" text="Try adding some content to this list" />
<Empty icon={CozyIcon} layout={false} iconSize="large" title="This list is empty" text="Try adding some content to this list" />
</div>
</>
)}
</>
```

### With some additional content

```
import Empty from 'cozy-ui/transpiled/react/Empty';
import Button from 'cozy-ui/transpiled/react/Button';
import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy';
const styles = {
empty: {
position: 'relative',
transform: 'translateZ(0)',
height: '500px',
display: 'flex'
}
};
<div style={styles.empty}>
<Empty id='empty' icon={CozyIcon} title="An error occured" text="It's maybe nothing, just refresh to be sure">
<Button className='u-mt-1' label="Try refreshing" />
</Empty>
</div>
```
11 changes: 8 additions & 3 deletions react/Empty/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ const depreciationLogger = createDepreciationLogger()

export const Empty = ({
icon,
iconSize,
title,
text,
children,
@@ -35,10 +36,11 @@ export const Empty = ({
>
{icon && (
<Icon
className={styles['c-empty-img']}
className={cx(styles['c-empty-img'], {
[styles[`c-empty-img--${iconSize}`]]: iconSize !== 'normal'
})}
icon={icon}
width="100%"
height="100%"
size="100%"
/>
)}
{title && (
@@ -54,13 +56,16 @@ export const Empty = ({

Empty.propTypes = {
icon: iconPropType,
iconSize: PropTypes.oneOf(['normal', 'medium', 'large']),
title: PropTypes.node.isRequired,
text: PropTypes.node,
className: PropTypes.string,
/** Added vertical centering (only Mobile) */
layout: PropTypes.bool
}

Empty.defaultProps = {
iconSize: 'normal',
layout: true
}

22 changes: 14 additions & 8 deletions react/Empty/styles.styl
View file
Original file line number Diff line number Diff line change
@@ -4,18 +4,24 @@
@extend $empty

.c-empty-container
display flex
flex-direction column
justify-content center
flex 1 0 auto
align-self center
padding rem(16) 0
text-align center
max-width 100%
display flex
flex-direction column
justify-content center
flex 1 0 auto
align-self center
padding rem(16) 0
text-align center
max-width 100%

.c-empty-img
@extend $empty-img

.c-empty-img--medium
@extend $empty-img--medium

.c-empty-img--large
@extend $empty-img--large

.c-empty-title
@extend $empty-title

4 changes: 4 additions & 0 deletions react/MidEllipsis/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -7,27 +7,31 @@ import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
```

#### Ellipsis in directory tree

```jsx
import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';

<MidEllipsis text="/Administratif/Netflix" />
```

#### Ellipsis with React string children

```jsx
import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';

<MidEllipsis>/Administratif/Netflix</MidEllipsis>
```

#### Ellipsis in directory tree with complex names

```jsx
import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';

<MidEllipsis text="/Administratif/Ameli//1 88 88 88 888 888" />
```

#### Ellipsis in directory tree with complex names and unusual characters

```jsx
import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';

4 changes: 2 additions & 2 deletions react/Paper/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
```jsx
import Variants from 'docs/components/Variants';
import Variants from 'cozy-ui/docs/components/Variants';

import Paper from 'cozy-ui/transpiled/react/Paper';
import Stack from 'cozy-ui/transpiled/react/Stack';
@@ -29,7 +29,7 @@ const PaperExample = ({ classes, square, elevation }) => {
</Typography>
</Paper>
)
}
};


const StyledPaperExample = withStyles(styles)(PaperExample);
26 changes: 15 additions & 11 deletions react/Progress/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -3,25 +3,29 @@ Progress indicators express an unspecified wait time or display the length of a
### Linear and circular progress

```jsx
import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression'
import Variants from 'docs/components/Variants'
import { LinearProgress, CircularProgress } from 'cozy-ui/transpiled/react/Progress'
import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression';
import Variants from 'cozy-ui/docs/components/Variants';
import { LinearProgress, CircularProgress } from 'cozy-ui/transpiled/react/Progress';

const { progression } = useProgression()
const { progression } = useProgression();

const initialVariants = [
{ withValue: true }
];

<Variants initialVariants={initialVariants}>{
variant => (
<><LinearProgress
variant={variant.withValue ? "determinate" : undefined}
value={variant.withValue ? progression : undefined}
/><br /><CircularProgress
variant={variant.withValue ? "determinate" : undefined}
value={variant.withValue ? progression : undefined}
/></>
<>
<LinearProgress
variant={variant.withValue ? "determinate" : undefined}
value={variant.withValue ? progression : undefined}
/>
<br />
<CircularProgress
variant={variant.withValue ? "determinate" : undefined}
value={variant.withValue ? progression : undefined}
/>
</>
)
}</Variants>
```
14 changes: 7 additions & 7 deletions react/ProgressionBanner/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
A banner with a progress bar at the bottom.

```jsx
import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression'
import ProgressionBanner from 'cozy-ui/transpiled/react/ProgressionBanner'
import Icon from 'cozy-ui/transpiled/react/Icon'
import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync'
import Variants from 'docs/components/Variants'
import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons'
import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression';
import ProgressionBanner from 'cozy-ui/transpiled/react/ProgressionBanner';
import Icon from 'cozy-ui/transpiled/react/Icon';
import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync';
import Variants from 'cozy-ui/docs/components/Variants';
import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons';

const { progression } = useProgression()
const { progression } = useProgression();

const initialVariants = [
{ withValue: true, progressBar: true, withButton: false }
58 changes: 28 additions & 30 deletions react/Viewer/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -5,23 +5,23 @@ Once rendered, the `Viewer` will take up all the available space in it's contain
The `Viewer` can display an **information panel** to show additional information about the current file (e.g. whether a file is certified).

```jsx
import { makeStyles } from '@material-ui/core/styles'
import Variants from 'docs/components/Variants'
import Card from 'cozy-ui/transpiled/react/Card'
import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
import Viewer from 'cozy-ui/transpiled/react/Viewer'
import Stack from 'cozy-ui/transpiled/react/Stack'
import Paper from 'cozy-ui/transpiled/react/Paper'
import Typography from 'cozy-ui/transpiled/react/Typography'
import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
import Icon from 'cozy-ui/transpiled/react/Icon'
import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
import { makeStyles } from '@material-ui/core/styles';
import Variants from 'cozy-ui/docs/components/Variants';
import Card from 'cozy-ui/transpiled/react/Card';
import Checkbox from 'cozy-ui/transpiled/react/Checkbox';
import Viewer from 'cozy-ui/transpiled/react/Viewer';
import Stack from 'cozy-ui/transpiled/react/Stack';
import Paper from 'cozy-ui/transpiled/react/Paper';
import Typography from 'cozy-ui/transpiled/react/Typography';
import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
import Icon from 'cozy-ui/transpiled/react/Icon';
import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy';
// The DemoProvider inserts a fake cozy-client in the React context.
import DemoProvider from './docs/DemoProvider'
import Overlay from 'cozy-ui/transpiled/react/Overlay'
import Button from 'cozy-ui/transpiled/react/Button'
import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
import DemoProvider from './docs/DemoProvider';
import Overlay from 'cozy-ui/transpiled/react/Overlay';
import Button from 'cozy-ui/transpiled/react/Button';
import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download';
import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';

// We provide a collection of (fake) io.cozy.files to be rendered
const files = [
@@ -70,22 +70,22 @@ const files = [
name: 'Unsupported file type',
mime: '???/???'
}
]
];

// The host app will usually need a small wrapper to display the Viewer. This is a very small example of such a wrapper that handles opening, closing, and navigating between files.
initialState = {
viewerOpened: isTesting(),
currentIndex: 0,
showToolbarCloseButton: true
}
};

const initialVariants = [
{ navigation: true, toolbar: true, onlyOfficeEnabled: true }
]
];

const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened })
const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton })
const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex })
const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened });
const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton });
const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex });

const PanelContent = ({ file }) => {
return (
@@ -114,7 +114,7 @@ const PanelContent = ({ file }) => {
</Paper>
</Stack>
)
}
};
const useStyles = makeStyles({
footer: {
@@ -126,7 +126,7 @@ const useStyles = makeStyles({
paddingRight: '1rem',
borderTop: '1px solid var(--dividerColor)'
}
})
});
const FooterContent = () => {
const styles = useStyles()
@@ -148,9 +148,7 @@ const FooterContent = () => {
/>
</div>
)
}
;
};
<DemoProvider>
<Variants initialVariants={initialVariants}>{
@@ -218,10 +216,10 @@ With this alias, a specific JS file for the worker will be created in the build
One way to do this is to explicitly load the web worker in your application like this:
```js static
import createWorker from 'react-pdf/dist/pdf.worker.entry.js'
import { pdfjs } from 'react-pdf'
import createWorker from 'react-pdf/dist/pdf.worker.entry.js';
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerPort = createWorker()
pdfjs.GlobalWorkerOptions.workerPort = createWorker();
```
And then configure the [webpack worker-loader](https://github.com/webpack-contrib/worker-loader) to output the file in a publicly served directory:
382 changes: 361 additions & 21 deletions react/__snapshots__/examples.spec.jsx.snap
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions react/examples.spec.jsx
View file
Original file line number Diff line number Diff line change
@@ -28,10 +28,12 @@ testComponent('ActionMenu', { delay: 100 })
testComponent('AppTitle')
testComponent('Avatar')
testComponent('Badge')
testComponent('Banner')
testComponent('BarButton')
testComponent('Button')
testComponent('Card')
testComponent('Checkbox')
testComponent('CompositeRow')
testComponent('ContactsList')
testComponent('ContactsListModal')
testComponent('DateMonthPicker')
@@ -54,9 +56,12 @@ testComponent('Media')
testComponent('Menu')
testComponent('NarrowContent')
testComponent('OrderedList')
testComponent('Paper')
testComponent('PasswordExample')
testComponent('PercentageBar')
testComponent('PercentageLine')
testComponent('Progress')
testComponent('ProgressionBanner')
testComponent('QuotaAlert')
testComponent('Radio')
testComponent('SelectBox')
@@ -67,4 +72,5 @@ testComponent('Table')
testComponent('Text')
testComponent('Textarea')
testComponent('UnorderedList')
testComponent('Viewer')
testComponent('Wizard')
54 changes: 33 additions & 21 deletions stylus/components/empty.styl
View file
Original file line number Diff line number Diff line change
@@ -5,41 +5,53 @@
contentHeight = barHeight + navHeight

$empty
display flex
flex-direction column
justify-content center
flex 1 0 auto
align-self center
padding rem(16) 0
text-align center
max-width 100%
display flex
flex-direction column
justify-content center
flex 1 0 auto
align-self center
padding rem(16) 0
text-align center
max-width 100%

+medium-screen()
margin-top 'calc(50vh - %s)' % contentHeight
transform translateY(-50%)

$empty-img
display block
margin 0 auto rem(16)
height rem(140)
display block
margin 0 auto rem(16)
height rem(128)

+medium-screen()
margin-bottom rem(8)
height rem(105)
height rem(96)

$empty-img--medium
height rem(160)

+medium-screen()
height rem(128)

$empty-img--large
height rem(192)

+medium-screen()
height rem(160)

$empty-title
margin 0 auto
max-width rem(1008)
line-height 1.3
margin 0 auto
max-width rem(1008)
line-height 1.3

+medium-screen()
margin 0 rem(24)
margin 0 rem(24)

$empty-text
margin rem(5) auto 0
max-width rem(1008)
color var(--coolGrey)
line-height 1.5
margin rem(5) auto 0
max-width rem(1008)
color var(--coolGrey)
line-height 1.5

+medium-screen()
margin rem(5 24 0)
margin rem(5 24 0)

0 comments on commit 723f199

Please sign in to comment.