vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

feat(a11y): add alt attribute to set alternative text for the icon or image (#1102)

old
Félix Zapata 2017-01-16 21:51:53 +01:00 committed by Javi Velasco
parent 46f535378d
commit 3859c464ff
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/avatar/Avatar.js
View File

@ -5,17 +5,18 @@ import { AVATAR } from '../identifiers.js';
import InjectFontIcon from '../font_icon/FontIcon.js';
const factory = (FontIcon) => {
const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
const Avatar = ({alt, children, className, cover, icon, image, theme, title, ...other}) => (
<div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
{children}
{cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
{!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
{cover && typeof image === 'string' && <span aria-label={alt} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
{!cover && (typeof image === 'string' ? <img alt={alt} className={theme.image} src={image} /> : image)}
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} alt={alt} /> : icon}
{title ? <span className={theme.letter}>{title[0]}</span> : null}
</div>
);
Avatar.propTypes = {
alt: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
cover: PropTypes.bool,
@ -30,6 +31,7 @@ const factory = (FontIcon) => {
};
Avatar.defaultProps = {
alt: '',
cover: false
};

1
components/avatar/readme.md
View File

@ -30,6 +30,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `alt` | `String` | `''` | An alternative text for the image or icon.|
| `children` | `Node` | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
| `className` | `String` | `''` | Set a class to style the Component.|
| `cover` | `Boolean` | `''` | Set to true if your image is not squared so it will be used as a cover for the element.|

9
spec/components/avatar.js
View File

@ -6,11 +6,12 @@ const AvatarTest = () => (
<section>
<h5>Avatars</h5>
<p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" alt="icon folder" />
<Avatar icon={<GithubIcon />}/>
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
<Avatar image="https://placeimg.com/80/80/animals" />
<Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
<Avatar><img src="https://placeimg.com/80/80/animals" alt="foobar"/></Avatar>
<Avatar image="https://placeimg.com/80/80/animals" alt="foobar" />
<Avatar alt="foobar"
image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
<Avatar title="Javier"/>
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
</section>