grommet
Version:
focus on the essential experience
102 lines • 3.92 kB
JavaScript
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { Anchor, Box, Button, Card, CardBody, CardFooter, Collapsible, Heading, Grommet, Image, Paragraph } from 'grommet';
import { FormDown } from "grommet-icons/es6/icons/FormDown";
import { FormUp } from "grommet-icons/es6/icons/FormUp";
import { Favorite } from "grommet-icons/es6/icons/Favorite";
import { ShareOption } from "grommet-icons/es6/icons/ShareOption";
var theme = {
global: {
font: {
family: "Comic Sans MS, -apple-system,\n BlinkMacSystemFont, \n \"Segoe UI\", \n Roboto"
}
},
card: {
elevation: 'none',
background: 'light-2',
footer: {
pad: 'medium'
}
}
};
export var RichFooter = function RichFooter() {
var _React$useState = React.useState(false),
open = _React$useState[0],
setOpen = _React$useState[1];
var _React$useState2 = React.useState(false),
favorite = _React$useState2[0],
setFavorite = _React$useState2[1];
var ExpandButton = function ExpandButton(_ref) {
var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
var Icon = open ? FormUp : FormDown;
return /*#__PURE__*/React.createElement(Button, _extends({
hoverIndicator: "light-4",
icon: /*#__PURE__*/React.createElement(Icon, {
color: "brand"
})
}, rest));
};
return /*#__PURE__*/React.createElement(Grommet, {
theme: theme
}, /*#__PURE__*/React.createElement(Box, {
pad: "medium",
align: "start"
}, /*#__PURE__*/React.createElement(Card, {
elevation: "large",
width: "medium"
}, /*#__PURE__*/React.createElement(CardBody, {
height: "small"
}, /*#__PURE__*/React.createElement(Image, {
fit: "cover",
src: "//v2.grommet.io/assets/IMG_4245.jpg",
a11yTitle: "bridge"
})), /*#__PURE__*/React.createElement(Box, {
pad: {
horizontal: 'medium'
},
responsive: false
}, /*#__PURE__*/React.createElement(Heading, {
level: "3",
margin: {
vertical: 'medium'
}
}, "Bridge"), /*#__PURE__*/React.createElement(Paragraph, {
margin: {
top: 'none'
}
}, "A structure carrying a road, path, railroad, or canal across a river, ravine, road, railroad, or other obstacle.")), /*#__PURE__*/React.createElement(CardFooter, null, /*#__PURE__*/React.createElement(Box, {
direction: "row",
align: "center",
gap: "small"
}, /*#__PURE__*/React.createElement(Button, {
icon: /*#__PURE__*/React.createElement(Favorite, {
color: favorite ? 'red' : undefined
}),
hoverIndicator: true,
onClick: function onClick() {
setFavorite(!favorite);
}
}), /*#__PURE__*/React.createElement(Button, {
icon: /*#__PURE__*/React.createElement(ShareOption, {
color: "plain"
}),
hoverIndicator: true
}), /*#__PURE__*/React.createElement(Anchor, {
href: "https://www.collinsdictionary.com/us/dictionary/english/bridge",
label: "Learn More"
})), /*#__PURE__*/React.createElement(ExpandButton, {
onClick: function onClick() {
return setOpen(!open);
}
})), /*#__PURE__*/React.createElement(Collapsible, {
open: open
}, /*#__PURE__*/React.createElement(Paragraph, {
margin: "medium",
color: "dark-3"
}, "The greatest bridge builders of antiquity were the ancient Romans. The Romans built arch bridges and aqueducts that could stand in conditions that would damage or destroy earlier designs. Some stand today.")))));
};
RichFooter.storyName = 'Rich footer';
export default {
title: "Layout/Card/Custom Themed/Rich footer"
};