Commit d501c600 authored by Sam Gluck's avatar Sam Gluck
Browse files

- Fix style guide for Tag cmpnt;

- Create Avatar cmpnt with "marked" blue dot prop;
- Add Avatar component to the style guide;
parent 12f83266
```js
<div>
<div style={{ float: 'left' }}>
<div>Profile</div>
<div>
<Avatar size="large">
<img src="https://picsum.photos/100/100?random" alt="Example avatar" />
</Avatar>
</div>
</div>
<div style={{ float: 'left', marginLeft: '20px' }}>
<div>Contributors</div>
<div>
<Avatar>
<img src="https://picsum.photos/100/100?random" alt="Example avatar" />
</Avatar>
<Avatar marked>
<img src="https://picsum.photos/100/100?random" alt="Example avatar" />
</Avatar>
</div>
</div>
<div style={{ clear: 'both' }}>Blue dot = collection owner</div>
</div>
```
import * as React from 'react';
import { Avatar } from '@zendeskgarden/react-avatars';
export default ({ children, marked, className = '', ...props }) => {
if (marked) {
className += ' marked';
}
return (
<Avatar className={className} {...props}>
{children}
</Avatar>
);
};
```js
<Tag closeable focused style={{ marginRight: '10px'}} onClick={() => alert('Tag close clicked')}>Selected</Tag>
<Tag closeable onClick={() => alert('Tag close clicked')}>Unselected</Tag>
const { default: Tag, TagContainer } = require('./Tag');
<TagContainer style={{ margin: 0 }}>
<Tag
closeable
focused
style={{ marginRight: '10px' }}
onClick={() => alert('Tag close clicked')}
>
Selected
</Tag>
<Tag closeable onClick={() => alert('Tag close clicked')}>
Unselected
</Tag>
</TagContainer>;
```
......@@ -276,6 +276,32 @@ export default function createTheme(theme: MoodleThemeInterface) {
&&&&:hover {
color: ${theme.colour.primary};
}
`,
// - avatars
//language=SCSS
'avatars.avatar': `
&&&& {
position: relative;
width: 40px;
height: 40px;
}
&&&&[class*=large] {
width: 80px;
height: 80px;
}
&&.marked:after {
content: '';
position: absolute;
display: block;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: #60C3FF;
top: 0;
right: 0;
}
`
};
}
......@@ -22,8 +22,7 @@ webpackConfig.module.rules.push({
module.exports = {
components: 'src/components/**/*.tsx',
ignore: [
//TODO maybe don't ignore these chrome components?
'src/components/chrome/{Body,Menu,Nav}/*.tsx',
'src/components/chrome/{Body,Menu,Nav,Main}/*.tsx',
'src/components/typography/LI/*.tsx',
'src/components/elements/flag/*.tsx',
'src/components/inputs/LanguageSelect/*.tsx',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment