@tidy-ui/card
Version:
The Card component gives your website a modern card layout, perfect for showcasing important details in a stylish box. Whether you're displaying products, music albums, movies, or hotel info, the possibilities are endless. Multiple cards can create a cool
2 lines (1 loc) • 5.42 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@tidy-ui/commons");function r(e){return e&&e.__esModule?e:{default:e}}var t=/*#__PURE__*/r(e),a=function(){return a=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var a in n=arguments[r])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e},a.apply(this,arguments)};function o(e,n){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++)n.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(r[t[a]]=e[t[a]])}return r}function d(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var l,i,c,s,u,p,f,h,m,y,v,b,g,x,w,O,S=n.css(s||(s=d(["\n ","\n"],["\n ","\n"])),function(e){var r=e.theme,t=r.palette,a=r.layout,o=e.isSharp,s=e.accent,u=e.accentPosition,p=e.href,f=e.margin,h=e.height,m=e.width;return n.css(c||(c=d(["\n ","\n background-color: ",";\n box-shadow: ",";\n color: ",";\n margin: ",";\n height: ",";\n width: ",";\n ","\n ","\n ","\n "],["\n ","\n background-color: ",";\n box-shadow: ",";\n color: ",";\n margin: ",";\n height: ",";\n width: ",";\n ","\n ","\n ","\n "])),n.createFontStyle(),t.background.card,a.shadow,t.text.primary,f,h,m,!o&&n.css(l||(l=d(["\n border-radius: ",";\n "],["\n border-radius: ",";\n "])),a.radius),s&&"border-".concat(u,": 2px solid ").concat(t[s][600],";"),p&&n.css(i||(i=d(["\n cursor: pointer;\n "],["\n cursor: pointer;\n "]))))}),E=n.styled.a(p||(p=d(["\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(30%, -30%);\n padding: 0.5rem;\n background-color: ",";\n ","\n &:hover {\n background-color: ",";\n }\n"],["\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(30%, -30%);\n padding: 0.5rem;\n background-color: ",";\n ","\n &:hover {\n background-color: ",";\n }\n"])),n.hsla(n.color.slate[400],.1),function(e){var r=e.theme.layout;return n.css(u||(u=d(["\n border-radius: ",";\n "],["\n border-radius: ",";\n "])),r.radius)},n.hsla(n.color.slate[400],.2)),P=n.styled.header(m||(m=d(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(e){var r=e.theme.palette,t=e.isDivided;return n.css(h||(h=d(["\n ","\n position: relative;\n width: 100%;\n ","\n "],["\n ","\n position: relative;\n width: 100%;\n ","\n "])),n.createFontStyle("h5"),t&&n.css(f||(f=d(["\n padding-bottom: 0.25rem;\n border-bottom: 1px solid ",";\n "],["\n padding-bottom: 0.25rem;\n border-bottom: 1px solid ",";\n "])),r.divider))},n.applyStandardOverrideStyles),j=n.styled(n.Icon.Launch)(v||(v=d(["\n ","\n"],["\n ","\n"])),function(e){var r=e.theme,t=r.palette,a=r.isDark;return n.css(y||(y=d(["\n height: 1.25rem;\n width: 1.25rem;\n top: 0.5rem;\n right: 0.5rem;\n color: ",";\n "],["\n height: 1.25rem;\n width: 1.25rem;\n top: 0.5rem;\n right: 0.5rem;\n color: ",";\n "])),a?t.neutral[500]:t.neutral[400])}),k=n.styled.section(b||(b=d(["\n padding: 1rem;\n display: flex;\n flex-direction: column;\n ","\n &:hover "," {\n display: flex;\n }\n ","\n"],["\n padding: 1rem;\n display: flex;\n flex-direction: column;\n ","\n &:hover "," {\n display: flex;\n }\n ","\n"])),S,E,n.applyStandardOverrideStyles),C=n.styled.footer(w||(w=d(["\n ","\n ","\n ","\n"],["\n ","\n ","\n ","\n"])),n.createFontStyle("body2"),function(e){var r=e.theme.palette,t=e.isDivided;return n.css(x||(x=d(["\n ","\n "],["\n ","\n "])),t&&n.css(g||(g=d(["\n padding-top: 0.25rem;\n border-top: 1px solid ",";\n "],["\n padding-top: 0.25rem;\n border-top: 1px solid ",";\n "])),r.divider))},n.applyStandardOverrideStyles),F=n.styled.div(O||(O=d(["\n padding: 0.25rem 0;\n ","\n"],["\n padding: 0.25rem 0;\n ","\n"])),n.applyStandardOverrideStyles),D=t.default.forwardRef(function(e,n){var r=e.children,d=e.ele,l=e.href,i=o(e,["children","ele","href"]),c=d?t.default.cloneElement(d,{},r):r;return t.default.createElement(k,a({role:"article",ref:n,href:l},i),l?t.default.createElement("a",{href:l},c):t.default.createElement(t.default.Fragment,null,c))});D.defaultProps={accentPosition:"top",isSharp:!1},D.displayName="Card";var _=t.default.forwardRef(function(e,n){var r=e.children,d=e.ele,l=o(e,["children","ele"]);return t.default.createElement(F,a({role:"presentation",ref:n},l),d?t.default.cloneElement(d,{},r):r)});_.displayName="CardBody";var N=t.default.forwardRef(function(e,n){var r=e.children,d=e.ele,l=o(e,["children","ele"]);return t.default.createElement(C,a({role:"presentation",ref:n},l),d?t.default.cloneElement(d,{},r):r)});N.defaultProps={isDivided:!1},N.displayName="CardFooter";var R=t.default.forwardRef(function(e,n){var r=e.children,d=e.ele,l=e.href,i=o(e,["children","ele","href"]);return t.default.createElement(P,a({role:"heading",ref:n},i),d?t.default.cloneElement(d,{},r):r,l&&t.default.createElement(E,{href:l,target:"_blank"},t.default.createElement(j,null)))});R.defaultProps={isDivided:!1},R.displayName="CardHeader",exports.Card=D,exports.CardBody=_,exports.CardFooter=N,exports.CardHeader=R;