-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into upgrade-jest
- Loading branch information
Showing
36 changed files
with
1,950 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; | ||
|
|
||
| import { AvatarNetwork } from './avatar-network'; | ||
|
|
||
| # AvatarNetwork | ||
|
|
||
| The `AvatarNetwork` is a component responsible for display of the image of a given network | ||
|
|
||
| <Canvas> | ||
| <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--default-story" /> | ||
| </Canvas> | ||
|
|
||
| ## Props | ||
|
|
||
| The `AvatarNetwork` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props | ||
|
|
||
| <ArgsTable of={AvatarNetwork} /> | ||
|
|
||
| ### Size | ||
|
|
||
| Use the `size` prop to set the size of the `AvatarNetwork`. | ||
|
|
||
| Possible sizes include: | ||
|
|
||
| - `xs` 16px | ||
| - `sm` 24px | ||
| - `md` 32px | ||
| - `lg` 40px | ||
| - `xl` 48px | ||
|
|
||
| Defaults to `md` | ||
|
|
||
| <Canvas> | ||
| <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--size" /> | ||
| </Canvas> | ||
|
|
||
| ### Network Name | ||
|
|
||
| Use the `networkName` prop to set the initial alphabet of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `networkImageUrl` prop. | ||
|
|
||
| <Canvas> | ||
| <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--network-name" /> | ||
| </Canvas> | ||
|
|
||
| ### Network Image Url | ||
|
|
||
| Use the `networkImageUrl` prop to set the image to be rendered of the `AvatarNetwork`. | ||
|
|
||
| <Canvas> | ||
| <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--network-image-url" /> | ||
| </Canvas> | ||
|
|
||
| ### Show Halo | ||
|
|
||
| If we want to display the component with halo effect. Only works if an image url is supplied to `networkImageUrl` | ||
|
|
||
| <Canvas> | ||
| <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--show-halo" /> | ||
| </Canvas> | ||
|
|
||
| ### Color, Background Color And Border Color | ||
|
|
||
| Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarToken`. | ||
|
|
||
| <Canvas> | ||
| <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--color-background-color-and-border-color" /> | ||
| </Canvas> |
123 changes: 123 additions & 0 deletions
123
ui/components/component-library/avatar-network/avatar-network.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classnames from 'classnames'; | ||
| import { BaseAvatar } from '../base-avatar'; | ||
| import Box from '../../ui/box/box'; | ||
|
|
||
| import { | ||
| COLORS, | ||
| SIZES, | ||
| DISPLAY, | ||
| ALIGN_ITEMS, | ||
| JUSTIFY_CONTENT, | ||
| } from '../../../helpers/constants/design-system'; | ||
|
|
||
| export const AvatarNetwork = ({ | ||
| size = SIZES.MD, | ||
| networkName, | ||
| networkImageUrl, | ||
| showHalo, | ||
| color = COLORS.TEXT_DEFAULT, | ||
| backgroundColor = COLORS.BACKGROUND_ALTERNATIVE, | ||
| borderColor = COLORS.TRANSPARENT, | ||
| className, | ||
| ...props | ||
| }) => { | ||
| const [showFallback, setShowFallback] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| setShowFallback(!networkImageUrl); | ||
| }, [networkImageUrl]); | ||
|
|
||
| const fallbackString = networkName && networkName[0] ? networkName[0] : '?'; | ||
|
|
||
| const handleOnError = () => { | ||
| setShowFallback(true); | ||
| }; | ||
|
|
||
| return ( | ||
| <BaseAvatar | ||
| size={size} | ||
| display={DISPLAY.FLEX} | ||
| alignItems={ALIGN_ITEMS.CENTER} | ||
| justifyContent={JUSTIFY_CONTENT.CENTER} | ||
| className={classnames( | ||
| 'avatar-network', | ||
| showHalo && 'avatar-network--with-halo', | ||
| className, | ||
| )} | ||
| {...{ backgroundColor, borderColor, color, ...props }} | ||
| > | ||
| {showFallback ? ( | ||
| fallbackString | ||
| ) : ( | ||
| <> | ||
| {showHalo && ( | ||
| <img | ||
| src={networkImageUrl} | ||
| className={ | ||
| showHalo ? 'avatar-network__network-image--blurred' : '' | ||
| } | ||
| aria-hidden="true" | ||
| /> | ||
| )} | ||
| <img | ||
| className={ | ||
| showHalo | ||
| ? 'avatar-network__network-image--size-reduced' | ||
| : 'avatar-network__network-image' | ||
| } | ||
| onError={handleOnError} | ||
| src={networkImageUrl} | ||
| alt={networkName || 'network avatar'} | ||
| /> | ||
| </> | ||
| )} | ||
| </BaseAvatar> | ||
| ); | ||
| }; | ||
|
|
||
| AvatarNetwork.propTypes = { | ||
| /** | ||
| * The networkName accepts the string to render the first alphabet of the Avatar Name | ||
| */ | ||
| networkName: PropTypes.string, | ||
| /** | ||
| * The networkImageUrl accepts the string of the image to be rendered | ||
| */ | ||
| networkImageUrl: PropTypes.string, | ||
| /** | ||
| * The showHalo accepts a boolean prop to render the image with halo effect | ||
| */ | ||
| showHalo: PropTypes.bool, | ||
| /** | ||
| * The size of the AvatarNetwork | ||
| * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL' | ||
| * Defaults to SIZES.MD | ||
| */ | ||
| size: PropTypes.oneOf(Object.values(SIZES)), | ||
| /** | ||
| * The background color of the AvatarNetwork | ||
| * Defaults to COLORS.BACKGROUND_ALTERNATIVE | ||
| */ | ||
| backgroundColor: Box.propTypes.backgroundColor, | ||
| /** | ||
| * The background color of the AvatarNetwork | ||
| * Defaults to COLORS.BORDER_DEFAULT | ||
| */ | ||
| borderColor: Box.propTypes.borderColor, | ||
| /** | ||
| * The color of the text inside the AvatarNetwork | ||
| * Defaults to COLORS.TEXT_DEFAULT | ||
| */ | ||
| color: Box.propTypes.color, | ||
| /** | ||
| * Additional classNames to be added to the AvatarNetwork | ||
| */ | ||
| className: PropTypes.string, | ||
| /** | ||
| * AvatarNetwork also accepts all Box props including but not limited to | ||
| * className, as(change root element of HTML element) and margin props | ||
| */ | ||
| ...Box.propTypes, | ||
| }; |
23 changes: 23 additions & 0 deletions
23
ui/components/component-library/avatar-network/avatar-network.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| .avatar-network { | ||
| &--with-halo { | ||
| position: relative; | ||
| } | ||
|
|
||
| &__network-image { | ||
| width: 100%; | ||
|
|
||
| &--blurred { | ||
| filter: blur(20px); | ||
| } | ||
|
|
||
| &--size-reduced { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| width: 62.5%; | ||
| height: 62.5%; | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.