From 9574b2f39759e77609e0d91c290e6c7a05fce67b Mon Sep 17 00:00:00 2001 From: TC Liu Date: Wed, 24 Oct 2018 15:00:21 +0800 Subject: [PATCH] feat(Avatar): add IconAvatar, Avatar (#14) add `IconAvatar`, `Avatar` for #9 Reference: [MCS-LITE-UI Storybook `Avatar`](https://mcs-lite-ui.netlify.com/?selectedKind=Avatar&selectedStory=Default&full=0&addons=0&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) --- src/Avatar/Avatar.example.js | 34 ++ src/Avatar/Avatar.js | 31 ++ .../__snapshots__/Avatar.example.storyshot | 313 ++++++++++++++++++ src/Avatar/index.js | 2 + src/Avatar/styled-components.js | 21 ++ .../__snapshots__/Icons.example.storyshot | 78 +++++ src/Icons/index.js | 1 + src/Icons/svg/icon_avatar.svg | 11 + src/Icons/svgr/IconAvatar.js | 18 + src/index.js | 1 + 10 files changed, 510 insertions(+) create mode 100644 src/Avatar/Avatar.example.js create mode 100644 src/Avatar/Avatar.js create mode 100644 src/Avatar/__snapshots__/Avatar.example.storyshot create mode 100644 src/Avatar/index.js create mode 100644 src/Avatar/styled-components.js create mode 100644 src/Icons/svg/icon_avatar.svg create mode 100644 src/Icons/svgr/IconAvatar.js diff --git a/src/Avatar/Avatar.example.js b/src/Avatar/Avatar.example.js new file mode 100644 index 00000000..a853a27c --- /dev/null +++ b/src/Avatar/Avatar.example.js @@ -0,0 +1,34 @@ +// @flow +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import Avatar from '.'; + +storiesOf('Avatar', module) + .add('Default', () => , { + info: { + text: '', + inline: true, + }, + }) + .add('Default - Large', () => , { + info: { + text: '', + inline: true, + }, + }) + .add('With Url', () => , { + info: { + text: '', + inline: true, + }, + }) + .add( + 'With Url - Large', + () => , + { + info: { + text: '', + inline: true, + }, + }, + ); diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js new file mode 100644 index 00000000..5326fea6 --- /dev/null +++ b/src/Avatar/Avatar.js @@ -0,0 +1,31 @@ +// @flow +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { IconAvatar } from '../Icons'; +import Wrapper from './styled-components'; + +export type Props = { + src?: string, + size?: number, +}; + +const Avatar = ({ src, size }: Props) => ( + + {src ? ( + + ) : ( + + )} + +); + +Avatar.displayName = 'Avatar'; +Avatar.propTypes = { + src: PropTypes.string, + size: PropTypes.number, +}; +Avatar.defaultProps = { + size: 30, +}; + +export default Avatar; diff --git a/src/Avatar/__snapshots__/Avatar.example.storyshot b/src/Avatar/__snapshots__/Avatar.example.storyshot new file mode 100644 index 00000000..a527d48f --- /dev/null +++ b/src/Avatar/__snapshots__/Avatar.example.storyshot @@ -0,0 +1,313 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Avatar Default - Large 1`] = ` +.c0 img, +.c0 svg { + display: inline-block; + border-radius: 50%; + border: 1px solid #D1D2D3; + padding: 1px; + background: #FFFFFF; + fill: #D1D2D3; + box-sizing: border-box; + object-fit: cover; +} + + + + +
+ + + + + +
+ + + +`; + +exports[`Storyshots Avatar Default 1`] = ` +.c0 img, +.c0 svg { + display: inline-block; + border-radius: 50%; + border: 1px solid #D1D2D3; + padding: 1px; + background: #FFFFFF; + fill: #D1D2D3; + box-sizing: border-box; + object-fit: cover; +} + + + + +
+ + + + + +
+ + + +`; + +exports[`Storyshots Avatar With Url - Large 1`] = ` +.c0 img, +.c0 svg { + display: inline-block; + border-radius: 50%; + border: 1px solid #D1D2D3; + padding: 1px; + background: #FFFFFF; + fill: #D1D2D3; + box-sizing: border-box; + object-fit: cover; +} + + + + +
+ +
+ + + +`; + +exports[`Storyshots Avatar With Url 1`] = ` +.c0 img, +.c0 svg { + display: inline-block; + border-radius: 50%; + border: 1px solid #D1D2D3; + padding: 1px; + background: #FFFFFF; + fill: #D1D2D3; + box-sizing: border-box; + object-fit: cover; +} + + + + +
+ +
+ + + +`; diff --git a/src/Avatar/index.js b/src/Avatar/index.js new file mode 100644 index 00000000..f7a9c700 --- /dev/null +++ b/src/Avatar/index.js @@ -0,0 +1,2 @@ +// @flow +export { default } from './Avatar'; diff --git a/src/Avatar/styled-components.js b/src/Avatar/styled-components.js new file mode 100644 index 00000000..5e9f395c --- /dev/null +++ b/src/Avatar/styled-components.js @@ -0,0 +1,21 @@ +// @flow +import * as React from 'react'; +import styled from 'styled-components'; +import { type Props as AvatarProps } from './Avatar'; +import { type ThemeProps } from '../utils/type.flow'; + +const Wrapper: React.ComponentType = styled.div` + img, + svg { + display: inline-block; + border-radius: 50%; + border: 1px solid ${({ theme }: ThemeProps) => theme.color.grayBase}; + padding: 1px; + background: ${({ theme }: ThemeProps) => theme.color.white}; + fill: ${({ theme }: ThemeProps) => theme.color.grayBase}; + box-sizing: border-box; + object-fit: cover; + } +`; + +export default Wrapper; diff --git a/src/Icons/__snapshots__/Icons.example.storyshot b/src/Icons/__snapshots__/Icons.example.storyshot index 985cb83c..687436f0 100644 --- a/src/Icons/__snapshots__/Icons.example.storyshot +++ b/src/Icons/__snapshots__/Icons.example.storyshot @@ -428,6 +428,84 @@ exports[`Storyshots Icons List 1`] = ` + + pre { + background-color: ", + [Function], + "; + color: ", + [Function], + "; + padding: 2px 5px; + } + + > svg { + width: 24px; + height: 24px; + fill: ", + [Function], + "; + } +", + ], + }, + "displayName": "Iconsexample__IconWrapper", + "render": [Function], + "styledComponentId": "Iconsexample__IconWrapper-f2ede-0", + "target": "div", + "warnTooManyClasses": [Function], + "withComponent": [Function], + } + } + forwardedRef={null} + > +
+ 
+          IconAvatar
+
+ + + + + +
+ + diff --git a/src/Icons/index.js b/src/Icons/index.js index 534d8e2b..801874f9 100644 --- a/src/Icons/index.js +++ b/src/Icons/index.js @@ -4,6 +4,7 @@ export { default as IconAdd } from './svgr/IconAdd'; export { default as IconArrowDropDown } from './svgr/IconArrowDropDown'; export { default as IconArrowLeft } from './svgr/IconArrowLeft'; export { default as IconArrowNarrow } from './svgr/IconArrowNarrow'; +export { default as IconAvatar } from './svgr/IconAvatar'; export { default as IconCalendar } from './svgr/IconCalendar'; export { default as IconChevronRight } from './svgr/IconChevronRight'; export { default as IconClose } from './svgr/IconClose'; diff --git a/src/Icons/svg/icon_avatar.svg b/src/Icons/svg/icon_avatar.svg new file mode 100644 index 00000000..11b43822 --- /dev/null +++ b/src/Icons/svg/icon_avatar.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/Icons/svgr/IconAvatar.js b/src/Icons/svgr/IconAvatar.js new file mode 100644 index 00000000..3ac86b19 --- /dev/null +++ b/src/Icons/svgr/IconAvatar.js @@ -0,0 +1,18 @@ +// @flow +import * as React from 'react'; + +type Props = {}; + +const IconAvatar = (props: Props) => ( + + + +); + +export default IconAvatar; diff --git a/src/index.js b/src/index.js index c8dd7190..6bed8511 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ export * from './Logo'; export { default as theme } from './utils/theme'; export { default as A } from './A'; +export { default as Avatar } from './Avatar'; export { default as B } from './B'; export { default as Breadcrumb } from './Breadcrumb'; export { default as Button } from './Button';