UNPKG

15.6 kBJavaScriptView Raw
1"use strict";
2
3var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5Object.defineProperty(exports, "__esModule", {
6 value: true
7});
8exports["default"] = void 0;
9
10var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
12var _react = _interopRequireDefault(require("react"));
13
14var _random = _interopRequireDefault(require("lodash/random"));
15
16var _Story = _interopRequireDefault(require("@lskjs/dev/Story"));
17
18var _Avatar = _interopRequireDefault(require("./Avatar"));
19
20var rndNum = (0, _random["default"])(99);
21var avatarImg = "https://randomuser.me/api/portraits/men/".concat(rndNum, ".jpg");
22var smallImg = 'http://placeimg.com/32/32/people';
23var largeImg = 'http://placeimg.com/1920/1920/people';
24var noProportionalImg = 'http://placeimg.com/640/320/people';
25
26var user = function user() {
27 return {
28 id: (0, _random["default"])(99),
29 title: 'John Smith',
30 src: "https://randomuser.me/api/portraits/men/".concat((0, _random["default"])(99), ".jpg")
31 };
32};
33
34var _default = function _default(_ref) {
35 var storiesOf = _ref.storiesOf;
36 return storiesOf('avatar/Avatar').add('Default as img (title,src)', function () {
37 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
38 title: "John Smith",
39 src: avatarImg
40 }));
41 }).add('Alternative as User (name,avatar)', function () {
42 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
43 name: "John Smith",
44 avatar: avatarImg
45 }));
46 }).add('Empty', function () {
47 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null));
48 }).add('props.backgroundColor', function () {
49 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
50 backgroundColor: "#A7226E",
51 title: "Purple"
52 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
53 backgroundColor: "#EC2049",
54 title: "Pink"
55 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
56 backgroundColor: "#F26B38",
57 title: "Orange"
58 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
59 backgroundColor: "#F7DB4F",
60 title: "Yellow"
61 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
62 backgroundColor: "#2F9599",
63 title: "Blue"
64 }));
65 }).add('Empty avatar, colored by random ', function () {
66 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null));
67 }).add('Colored by title', function () {
68 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Any titles:"), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
69 title: "user 1"
70 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
71 title: "user 2"
72 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
73 title: "user 3"
74 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
75 title: "user 4"
76 }), /*#__PURE__*/_react["default"].createElement("p", null, "Same titles:"), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
77 title: "user 1"
78 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
79 title: "user 2"
80 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
81 title: "user 3"
82 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
83 title: "user 4"
84 }));
85 }).add('Colored by id', function () {
86 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Any users:"), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
87 title: "user 1",
88 id: 1
89 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
90 title: "user 2",
91 id: 2
92 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
93 title: "user 3",
94 id: "user3"
95 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
96 title: "user 4",
97 id: null
98 }), /*#__PURE__*/_react["default"].createElement("p", null, "Same ids:"), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
99 title: "name 1",
100 id: 1
101 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
102 title: "name 2",
103 id: 1
104 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
105 title: "name 3",
106 id: 1
107 }));
108 }).add('No image', function () {
109 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
110 title: "John Smith"
111 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
112 title: "John Smith",
113 textScale: 0.5
114 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
115 title: "John Smith",
116 textScale: 2
117 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
118 title: "John Smith",
119 textScale: 4
120 }));
121 }).add('Size', function () {
122 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], user()), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
123 size: 32
124 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
125 size: 64
126 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
127 size: 100
128 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
129 width: 100,
130 height: 50
131 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
132 width: 50,
133 height: 100
134 })));
135 }).add('Custom styles', function () {
136 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
137 style: {
138 margin: 10
139 }
140 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
141 style: {
142 padding: 10
143 }
144 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
145 style: {
146 border: '4px solid rgb(244, 67, 54)'
147 }
148 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
149 style: {
150 border: '4px solid rgba(128, 128, 128, 0.5)'
151 }
152 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
153 style: {
154 border: '4px solid rgba(128, 128, 128, 0.5)'
155 },
156 src: "//broken.site/img.png"
157 }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
158 innerStyle: {
159 boxShadow: '1px 1px 10px 2px #333'
160 }
161 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
162 innerStyle: {
163 filter: 'grayscale(100%)'
164 }
165 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
166 id: (0, _random["default"])(99),
167 title: 'John Smith',
168 innerStyle: {
169 border: '4px solid rgb(244, 67, 54)'
170 }
171 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
172 innerStyle: {
173 border: '4px solid rgba(128, 128, 128, 0.5)'
174 },
175 src: "//broken.site/img.png"
176 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
177 innerStyle: {
178 border: '2px solid #4CAF50'
179 }
180 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
181 innerStyle: {
182 border: '4px solid #F44336'
183 }
184 }))));
185 }).add('Badge', function () {
186 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], user(), /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
187 left: true,
188 top: true
189 }, /*#__PURE__*/_react["default"].createElement("div", {
190 style: {
191 width: 10,
192 height: 10,
193 backgroundColor: '#4CAF50',
194 borderRadius: '50%',
195 border: '2px solid #fff'
196 }
197 }))), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
198 title: "Offline Smith"
199 }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
200 right: true,
201 bottom: true
202 }, /*#__PURE__*/_react["default"].createElement("div", {
203 style: {
204 width: 10,
205 height: 10,
206 backgroundColor: '#F44336',
207 borderRadius: '50%',
208 border: '2px solid #fff'
209 }
210 }))), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
211 size: 100,
212 title: "Offline Smith"
213 }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
214 right: true,
215 bottom: true
216 }, /*#__PURE__*/_react["default"].createElement("div", {
217 style: {
218 width: 10,
219 height: 10,
220 backgroundColor: '#F44336',
221 borderRadius: '50%',
222 border: '2px solid #fff'
223 }
224 }))), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
225 size: 200,
226 title: "Offline Smith"
227 }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
228 right: true,
229 bottom: true
230 }, /*#__PURE__*/_react["default"].createElement("div", {
231 style: {
232 width: 10,
233 height: 10,
234 backgroundColor: '#F44336',
235 borderRadius: '50%',
236 border: '2px solid #fff'
237 }
238 }))), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
239 left: true,
240 top: true
241 }, /*#__PURE__*/_react["default"].createElement("div", {
242 style: {
243 width: 10,
244 height: 10,
245 backgroundColor: '#4CAF50',
246 borderRadius: '50%',
247 border: '2px solid #fff'
248 }
249 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
250 right: true,
251 top: true
252 }, /*#__PURE__*/_react["default"].createElement("div", {
253 style: {
254 width: 10,
255 height: 10,
256 backgroundColor: '#F44336',
257 borderRadius: '50%',
258 border: '2px solid #fff'
259 }
260 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
261 left: true,
262 bottom: true
263 }, /*#__PURE__*/_react["default"].createElement("div", {
264 style: {
265 width: 10,
266 height: 10,
267 backgroundColor: '#574caf',
268 borderRadius: '50%',
269 border: '2px solid #fff'
270 }
271 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"].Badge, {
272 right: true,
273 bottom: true
274 }, /*#__PURE__*/_react["default"].createElement("div", {
275 style: {
276 width: 10,
277 height: 10,
278 backgroundColor: '#c6972f',
279 borderRadius: '50%',
280 border: '2px solid #fff'
281 }
282 }))), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
283 style: {
284 width: 10,
285 height: 10,
286 backgroundColor: '#F44336',
287 borderRadius: '50%',
288 position: 'absolute',
289 right: '24px',
290 bottom: '24px',
291 border: '2px solid #fff'
292 }
293 })));
294 }).add('Shape', function () {
295 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
296 shape: "circle"
297 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
298 shape: "square"
299 })), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
300 shape: "rounded"
301 })));
302 }).add('Failed img', function () {
303 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
304 title: "John Smith",
305 src: "/failed-img.png"
306 }));
307 }).add('No proportional', function () {
308 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
309 title: "John Smith",
310 src: smallImg
311 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
312 title: "John Smith",
313 src: largeImg
314 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
315 title: "John Smith",
316 src: noProportionalImg
317 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
318 title: "John Smith",
319 src: noProportionalImg,
320 width: 128,
321 height: 64
322 }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
323 title: "John Smith",
324 src: noProportionalImg,
325 shape: "rounded",
326 width: 128,
327 height: 64
328 }));
329 }).add('With tag a', function () {
330 return /*#__PURE__*/_react["default"].createElement(_Story["default"], null, /*#__PURE__*/_react["default"].createElement("a", {
331 href: "#"
332 }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], user())));
333 }); // .add('Knobs', () => (
334 // <Story>
335 // <Avatar
336 // name={knob.text('Name')}
337 // title={knob.text('Title')}
338 // avatar={knob.text('Avatar')}
339 // src={knob.text('Src')}
340 // size={knob.number('Size', 64)}
341 // width={knob.number('Width')}
342 // height={knob.number('Height')}
343 // shape={knob.select('Shape', { cirlce: 'circle', rounded: 'rounded', square: 'square' }, 'circle')}
344 // border={knob.boolean('Border')}
345 // borderColor={knob.color('Border color')}
346 // borderWidth={knob.number('Border width')}
347 // borderPadding={knob.number('Border padding')}
348 // bgColor={knob.color('Background color')}
349 // textColor={knob.color('Text color')}
350 // textScale={knob.number('Text size scale')}
351 // shadow={knob.boolean('Shadow')}
352 // inactive={knob.boolean('Inactive')}
353 // style={knob.object('Custom styles', { padding: '10px' })}
354 // />
355 // </Story>
356 // ));
357};
358
359exports["default"] = _default;
360//# sourceMappingURL=Avatar.story.js.map
\No newline at end of file