box-ui-elements-mlh
Version:
103 lines (102 loc) • 5.9 kB
JavaScript
import * as React from 'react';
import Avatar from '../../avatar/Avatar';
import Button from '../../button/Button';
import MenuItem from '../../menu/MenuItem'; // @ts-ignore TODO: migrate TextArea to typescript
import TextArea from '../../text-area';
import Media from '../Media';
import notes from './Media.stories.md';
import { bdlGreenLight, bdlPurpleRain, bdlWatermelonRed, bdlYellorange } from '../../../styles/variables';
export var example = function example() {
return /*#__PURE__*/React.createElement(Media, {
style: {
width: 300
}
}, /*#__PURE__*/React.createElement(Media.Figure, null, /*#__PURE__*/React.createElement(Avatar, {
size: "large"
})), /*#__PURE__*/React.createElement(Media.Body, null, /*#__PURE__*/React.createElement(Media.Menu, {
"aria-label": "Options"
}, /*#__PURE__*/React.createElement(MenuItem, null, "Edit"), /*#__PURE__*/React.createElement(MenuItem, null, "Delete")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Yo Yo Ma"), " commented on this file"), /*#__PURE__*/React.createElement("div", null, "Please review the notes", /*#__PURE__*/React.createElement("br", null), "a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9")));
};
export var exampleExplanation = function exampleExplanation() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("code", null, /*#__PURE__*/React.createElement("span", {
style: {
color: bdlGreenLight
}
}, "Media"), /*#__PURE__*/React.createElement("span", {
style: {
color: bdlPurpleRain
}
}, "Media.Figure"), /*#__PURE__*/React.createElement("span", {
style: {
color: bdlYellorange
}
}, "Media.Body"), /*#__PURE__*/React.createElement("span", {
style: {
color: bdlWatermelonRed
}
}, "Media.Menu")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Media, {
style: {
width: 300,
boxShadow: "0 0 2px 3px ".concat(bdlGreenLight),
padding: 5
}
}, /*#__PURE__*/React.createElement(Media.Figure, {
style: {
boxShadow: "0 0 2px 3px ".concat(bdlPurpleRain)
}
}, /*#__PURE__*/React.createElement(Avatar, {
size: "large"
})), /*#__PURE__*/React.createElement(Media.Body, {
style: {
boxShadow: "0 0 2px 3px ".concat(bdlYellorange),
padding: 3
}
}, /*#__PURE__*/React.createElement(Media.Menu, {
style: {
boxShadow: "0 0 2px 3px ".concat(bdlWatermelonRed),
margin: 3,
padding: 3
}
}, /*#__PURE__*/React.createElement(MenuItem, null, "Edit"), /*#__PURE__*/React.createElement(MenuItem, null, "Delete")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Yo Yo Ma"), " commented on this file"), /*#__PURE__*/React.createElement("div", null, "Please review the notes", /*#__PURE__*/React.createElement("br", null), "a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9"))));
};
export var withNestedComponents = function withNestedComponents() {
return /*#__PURE__*/React.createElement(Media, {
style: {
width: 300
}
}, /*#__PURE__*/React.createElement(Media.Figure, null, /*#__PURE__*/React.createElement(Avatar, null)), /*#__PURE__*/React.createElement(Media.Body, null, /*#__PURE__*/React.createElement(Media.Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "Edit"), /*#__PURE__*/React.createElement(MenuItem, null, "Delete")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Yo Yo Ma"), " commented on this file"), /*#__PURE__*/React.createElement("div", null, "This is a nested media object"), /*#__PURE__*/React.createElement("ul", {
style: {
margin: 0,
padding: 0
}
}, /*#__PURE__*/React.createElement(Media, {
as: "li",
style: {
marginTop: 10
}
}, /*#__PURE__*/React.createElement(Media.Figure, null, /*#__PURE__*/React.createElement(Avatar, null)), /*#__PURE__*/React.createElement(Media.Body, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Bjork"), " replied"), /*#__PURE__*/React.createElement("div", null, "I must agree!"), /*#__PURE__*/React.createElement(Media, {
as: "li",
style: {
marginTop: 10
}
}, /*#__PURE__*/React.createElement(Media.Figure, null, /*#__PURE__*/React.createElement(Avatar, null)), /*#__PURE__*/React.createElement(Media.Body, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Bono"), " replied"), /*#__PURE__*/React.createElement("div", null, "Me too!"))))))));
};
export var withFormElements = function withFormElements() {
return /*#__PURE__*/React.createElement(Media, {
style: {
width: 300
}
}, /*#__PURE__*/React.createElement(Media.Figure, null, /*#__PURE__*/React.createElement(Avatar, {
size: "large"
})), /*#__PURE__*/React.createElement(Media.Body, null, /*#__PURE__*/React.createElement(Media.Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "Edit"), /*#__PURE__*/React.createElement(MenuItem, null, "Delete")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "W.A. Mozart"), " commented on this file"), /*#__PURE__*/React.createElement("div", null, "Everyone get ready to perform the symphony tonight!"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, null, "Reply"), /*#__PURE__*/React.createElement(Button, null, "Cancel"), /*#__PURE__*/React.createElement(TextArea, {
label: "Response"
}))));
};
export default {
title: 'Components|Media/Media',
component: Media,
parameters: {
notes: notes
}
};
//# sourceMappingURL=Media.stories.js.map