Skip to content

Commit

Permalink
feat: Add loading variant to SquareAppIcon
Browse files Browse the repository at this point in the history
  • Loading branch information
@acezard
acezard committed Mar 14, 2023
1 parent 5395103 commit f72b657
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 48 deletions.
106 changes: 58 additions & 48 deletions react/SquareAppIcon/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,66 +8,76 @@ import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { useCozyTheme } from 'cozy-ui/transpiled/react/CozyTheme'
import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
import Button from 'cozy-ui/transpiled/react/Buttons'

const theme = useCozyTheme()
const app = { name: "Test App", slug: "testapp", type: "app" }
const [isLoading, setLoading] = React.useState(false)


;

<>
<Button className="u-mb-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />

<Grid container spacing={1} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
>
<Grid item>
<SquareAppIcon app={app} name="Normal" />
</Grid>
<Grid item>
<SquareAppIcon app={app} name="Maintenance" variant="maintenance" />
</Grid>
<Grid item>
<SquareAppIcon app={app} name="Error" variant="error" />
</Grid>
<Grid item>
<SquareAppIcon name="Add" variant="add" />
</Grid>
<Grid item>
<SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
</Grid>
<Grid item>
<SquareAppIcon name="Shortcut" variant="shortcut" />
</Grid>
<Grid item>
<SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
src={`data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd" transform="translate(0 2)">
<rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/>
<path fill="#197BFF" d="M0,0.990777969 C0,0.443586406 0.449948758,0 1.00684547,0 L12.9931545,0 C13.5492199,0 14.3125,0.3125 14.7107565,0.71075654 L15.2892435,1.28924346 C15.6817835,1.68178346 16.4446309,2 17.0008717,2 L30.0059397,2 C31.1072288,2 32,2.89470506 32,4 L32,4 L17.0008717,4 C16.4481055,4 15.6875,4.3125 15.2892435,4.71075654 L14.7107565,5.28924346 C14.3182165,5.68178346 13.5500512,6 12.9931545,6 L1.00684547,6 C0.450780073,6 0,5.54902482 0,5.00922203 L0,0.990777969 Z"/>
</g>
</svg>`)}`}
width={32}
height={32}
alt={"Shortcut"}
/>}/>
</Grid>
<Grid item>
<SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
</Grid>
<Grid item>
<SquareAppIcon name="Icon Grid" IconContent={(
<Grid container spacing={0}>
<Grid item xs={6}>
<Icon icon={CozyIcon} />
</Grid>
<Grid item xs={6}>
<Icon icon={CozyIcon} />
</Grid>
<Grid container spacing={1} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
>
<Grid item>
<SquareAppIcon app={app} name="Normal" />
</Grid>
<Grid item>
<SquareAppIcon app={app} name="Maintenance" variant="maintenance" />
</Grid>
<Grid item>
<SquareAppIcon app={app} name="Error" variant="error" />
</Grid>
<Grid item>
<SquareAppIcon name="Add" variant="add" />
</Grid>
<Grid item>
<SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
</Grid>
<Grid item>
<SquareAppIcon name="Shortcut" variant="shortcut" />
</Grid>
<Grid item>
<SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
</Grid>
<Grid item>
<SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
src={`data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd" transform="translate(0 2)">
<rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/>
<path fill="#197BFF" d="M0,0.990777969 C0,0.443586406 0.449948758,0 1.00684547,0 L12.9931545,0 C13.5492199,0 14.3125,0.3125 14.7107565,0.71075654 L15.2892435,1.28924346 C15.6817835,1.68178346 16.4446309,2 17.0008717,2 L30.0059397,2 C31.1072288,2 32,2.89470506 32,4 L32,4 L17.0008717,4 C16.4481055,4 15.6875,4.3125 15.2892435,4.71075654 L14.7107565,5.28924346 C14.3182165,5.68178346 13.5500512,6 12.9931545,6 L1.00684547,6 C0.450780073,6 0,5.54902482 0,5.00922203 L0,0.990777969 Z"/>
</g>
</svg>`)}`}
width={32}
height={32}
alt={"Shortcut"}
/>}/>
</Grid>
<Grid item>
<SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
</Grid>
<Grid item>
<SquareAppIcon name="Icon Grid" IconContent={(
<Grid container spacing={0}>
<Grid item xs={6}>
<Icon icon={CozyIcon} />
</Grid>
<Grid item xs={6}>
<Icon icon={CozyIcon} />
</Grid>
</Grid>
)} />
<Grid item xs={6}>
<Icon icon={CozyIcon} />
</Grid>
<Grid item xs={6}>
<Icon icon={CozyIcon} />
</Grid>
</Grid>
)} />
</Grid>
</Grid>
</Grid>

</>
```
88 changes: 88 additions & 0 deletions react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,28 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
<span
class="MuiBadge-root"
>
<div
class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1"
>
<svg
aria-busy="true"
class="styles__icon___23x3R styles__icon--spin___ybfC1"
height="16"
role="progressbar"
style="fill: var(--spinnerColor);"
viewBox="0 0 32 32"
width="16"
>
<path
d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
opacity="0.25"
/>
<path
d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
/>
</svg>
</div>
<span
class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-9"
>
Expand Down Expand Up @@ -50,6 +72,28 @@ exports[`SquareAppIcon component should render an app correctly with the given n
<span
class="MuiBadge-root"
>
<div
class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1"
>
<svg
aria-busy="true"
class="styles__icon___23x3R styles__icon--spin___ybfC1"
height="16"
role="progressbar"
style="fill: var(--spinnerColor);"
viewBox="0 0 32 32"
width="16"
>
<path
d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
opacity="0.25"
/>
<path
d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
/>
</svg>
</div>
<span
class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-3"
>
Expand Down Expand Up @@ -92,6 +136,28 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
<span
class="MuiBadge-root"
>
<div
class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1"
>
<svg
aria-busy="true"
class="styles__icon___23x3R styles__icon--spin___ybfC1"
height="16"
role="progressbar"
style="fill: var(--spinnerColor);"
viewBox="0 0 32 32"
width="16"
>
<path
d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
opacity="0.25"
/>
<path
d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
/>
</svg>
</div>
<span
class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-15"
>
Expand Down Expand Up @@ -364,6 +430,28 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
<span
class="MuiBadge-root"
>
<div
class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1"
>
<svg
aria-busy="true"
class="styles__icon___23x3R styles__icon--spin___ybfC1"
height="16"
role="progressbar"
style="fill: var(--spinnerColor);"
viewBox="0 0 32 32"
width="16"
>
<path
d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
opacity="0.25"
/>
<path
d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
/>
</svg>
</div>
<span
class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-57"
>
Expand Down
10 changes: 10 additions & 0 deletions react/SquareAppIcon/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import AppIcon from '../AppIcon'
import Badge from '../Badge'
import InfosBadge from '../InfosBadge'
import { nameToColor } from '../Avatar'
import Spinner from '../Spinner'
import Typography from '../Typography'
import Icon from '../Icon'
import iconPlus from '../Icons/Plus'
Expand Down Expand Up @@ -81,6 +82,9 @@ export const SquareAppIcon = ({
overlap="rectangular"
invisible={variant !== 'shortcut'}
>
{['default', 'loading'].includes(variant) && (
<Spinner className={styles['SquareAppIcon-spinner']} />
)}
<Badge
className={cx(
styles['SquareAppIcon-wrapper'],
Expand Down Expand Up @@ -145,6 +149,8 @@ export const SquareAppIcon = ({
SquareAppIcon.propTypes = {
name: PropTypes.string,
variant: PropTypes.oneOf([
'default',
'loading',
'ghost',
'maintenance',
'error',
Expand All @@ -154,4 +160,8 @@ SquareAppIcon.propTypes = {
IconContent: PropTypes.node
}

SquareAppIcon.defaultProps = {
variant: 'default'
}

export default SquareAppIcon
14 changes: 14 additions & 0 deletions react/SquareAppIcon/styles.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ $color = constants['color'] // hard-coded color, because the component is curren
border-radius rem(12)
height $iconSize
width $iconSize
transition transform 300ms, border-radius 300ms

+small-screen()
height $mobileIconSize
width $mobileIconSize
Expand Down Expand Up @@ -45,3 +47,15 @@ $color = constants['color'] // hard-coded color, because the component is curren
mix-blend-mode luminosity
svg, img
opacity .5

.SquareAppIcon-wrapper-loading
border-radius 50%
transform scale(0.875)
+small-screen()
transform scale(0.8334)

.SquareAppIcon-spinner
svg
position absolute
height 100%
width 100%

0 comments on commit f72b657

Please sign in to comment.