@commercetools-uikit/card 17.0.0 → 17.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -7
- package/dist/commercetools-uikit-card.cjs.d.ts +1 -1
- package/dist/commercetools-uikit-card.cjs.dev.js +51 -17
- package/dist/commercetools-uikit-card.cjs.prod.js +45 -16
- package/dist/commercetools-uikit-card.esm.js +52 -18
- package/dist/declarations/src/card.d.ts +5 -0
- package/package.json +9 -6
- package/dist/commercetools-uikit-card.cjs.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -43,10 +43,14 @@ export default Example;
|
|
|
43
43
|
|
|
44
44
|
## Properties
|
|
45
45
|
|
|
46
|
-
| Props
|
|
47
|
-
|
|
|
48
|
-
| `type`
|
|
49
|
-
| `insetScale`
|
|
50
|
-
| `theme`
|
|
51
|
-
| `className`
|
|
52
|
-
| `children`
|
|
46
|
+
| Props | Type | Required | Default | Description |
|
|
47
|
+
| ---------------- | ------------------------------------------------------------------ | :------: | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| `type` | `union`<br/>Possible values:<br/>`'raised' , 'flat'` | | `'raised'` | Determines the visual effect of the card. A raised card has a box shadow while a flat card has just a border. |
|
|
49
|
+
| `insetScale` | `union`<br/>Possible values:<br/>`'none' , 's' , 'm' , 'l' , 'xl'` | | `'m'` | Determines the spacing (padding) that the content should have from the card borders. In case there is no space needed, you can pass `none`. |
|
|
50
|
+
| `theme` | `union`<br/>Possible values:<br/>`'light' , 'dark'` | | `'light'` | Determines the background color of the card. |
|
|
51
|
+
| `className` | `string` | | | Pass a custom CSS class, useful to override the styles.
<br>
NOTE: This is not recommended and should only be used for building new components
that require special style adjustments. |
|
|
52
|
+
| `children` | `ReactNode` | | | |
|
|
53
|
+
| `onClick` | `() => void` | | | The callback function to be executed when the Card component is clicked. Prefer this for managing side effects rather than navigation. |
|
|
54
|
+
| `to` | `union`<br/>Possible values:<br/>`string , LocationDescriptor` | | | The URL that the Card should point to. When provided, the Card will render as a react-router `<Link>`. Use with `isExternal` to determine if an internal or external link should be used. |
|
|
55
|
+
| `isExternalLink` | `boolean` | | | A flag to indicate if the Card points to an external source. When true, the Card will render as an `<a>` tag with appropriate attributes for external links. |
|
|
56
|
+
| `isDisabled` | `boolean` | | | Indicates that a clickable Card should not allow clicks. This is useful for temporarily disabling a clickable Card. Use in conjunction with `to` and/or `onClick`. |
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from "./declarations/src/index";
|
|
2
2
|
export { default } from "./declarations/src/index";
|
|
3
|
-
//# sourceMappingURL=
|
|
3
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy11aWtpdC1jYXJkLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
|
|
@@ -17,6 +17,7 @@ var react = require('@emotion/react');
|
|
|
17
17
|
var designSystem = require('@commercetools-uikit/design-system');
|
|
18
18
|
var utils = require('@commercetools-uikit/utils');
|
|
19
19
|
var Inset = require('@commercetools-uikit/spacings-inset');
|
|
20
|
+
var reactRouterDom = require('react-router-dom');
|
|
20
21
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
21
22
|
|
|
22
23
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -32,32 +33,65 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
|
|
|
32
33
|
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
33
34
|
var Inset__default = /*#__PURE__*/_interopDefault(Inset);
|
|
34
35
|
|
|
35
|
-
function ownKeys(
|
|
36
|
-
function _objectSpread(
|
|
37
|
-
const Card = props =>
|
|
38
|
-
|
|
39
|
-
//
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
jsxRuntime.jsx("div", {
|
|
36
|
+
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
37
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
38
|
+
const Card = props => {
|
|
39
|
+
const isClickable = Boolean(!props.isDisabled && (props.onClick || props.to));
|
|
40
|
+
// Only disable styling if the card is not clickable
|
|
41
|
+
const shouldBeDisabled = props.isDisabled && (props.onClick || props.to);
|
|
42
|
+
const commonProps = _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
43
|
+
onClick: isClickable ? props.onClick : undefined,
|
|
44
|
+
'aria-disabled': props.isDisabled ? true : undefined,
|
|
45
|
+
css: /*#__PURE__*/react.css("box-sizing:border-box;width:100%;font-size:1rem;box-shadow:", props.type === 'raised' ? designSystem.designTokens.shadowForCardWhenRaised : 'none', ";border-radius:", designSystem.designTokens.borderRadiusForCard, ";border:", props.type === 'raised' ? designSystem.designTokens.borderForCardWhenRaised : 'none', ";background:", props.theme === 'dark' ? designSystem.designTokens.colorNeutral95 : designSystem.designTokens.colorSurface, ";cursor:", shouldBeDisabled ? 'not-allowed' : isClickable ? 'pointer' : 'default', ";:hover{background:", props.theme === 'dark' ? isClickable ? designSystem.designTokens.colorNeutral90 : undefined : isClickable ? designSystem.designTokens.colorNeutral98 : undefined, ";}color:inherit;&>div{opacity:", shouldBeDisabled ? 0.5 : 1, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:css;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdEWSIsImZpbGUiOiJjYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEtleWJvYXJkRXZlbnQsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZmlsdGVyRGF0YUF0dHJpYnV0ZXMsIHdhcm5pbmcgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgSW5zZXQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MtaW5zZXQnO1xuaW1wb3J0IHsgTGluayB9IGZyb20gJ3JlYWN0LXJvdXRlci1kb20nO1xuaW1wb3J0IHR5cGUgeyBMb2NhdGlvbkRlc2NyaXB0b3IgfSBmcm9tICdoaXN0b3J5JztcblxuZXhwb3J0IHR5cGUgVENhcmRQcm9wcyA9IHtcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIHZpc3VhbCBlZmZlY3Qgb2YgdGhlIGNhcmQuIEEgcmFpc2VkIGNhcmQgaGFzIGEgYm94IHNoYWRvdyB3aGlsZSBhIGZsYXQgY2FyZCBoYXMganVzdCBhIGJvcmRlci5cbiAgICovXG4gIHR5cGU6ICdyYWlzZWQnIHwgJ2ZsYXQnO1xuICAvKipcbiAgICogRGV0ZXJtaW5lcyB0aGUgc3BhY2luZyAocGFkZGluZykgdGhhdCB0aGUgY29udGVudCBzaG91bGQgaGF2ZSBmcm9tIHRoZSBjYXJkIGJvcmRlcnMuIEluIGNhc2UgdGhlcmUgaXMgbm8gc3BhY2UgbmVlZGVkLCB5b3UgY2FuIHBhc3MgYG5vbmVgLlxuICAgKi9cbiAgaW5zZXRTY2FsZTogJ25vbmUnIHwgJ3MnIHwgJ20nIHwgJ2wnIHwgJ3hsJztcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIGNhcmQuXG4gICAqL1xuICB0aGVtZTogJ2xpZ2h0JyB8ICdkYXJrJztcbiAgLyoqXG4gICAqIFBhc3MgYSBjdXN0b20gQ1NTIGNsYXNzLCB1c2VmdWwgdG8gb3ZlcnJpZGUgdGhlIHN0eWxlcy5cbiAgICogPGJyPlxuICAgKiBOT1RFOiBUaGlzIGlzIG5vdCByZWNvbW1lbmRlZCBhbmQgc2hvdWxkIG9ubHkgYmUgdXNlZCBmb3IgYnVpbGRpbmcgbmV3IGNvbXBvbmVudHNcbiAgICogdGhhdCByZXF1aXJlIHNwZWNpYWwgc3R5bGUgYWRqdXN0bWVudHMuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICAvKipcbiAgICogVGhlIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJlIGV4ZWN1dGVkIHdoZW4gdGhlIENhcmQgY29tcG9uZW50IGlzIGNsaWNrZWQuIFByZWZlciB0aGlzIGZvciBtYW5hZ2luZyBzaWRlIGVmZmVjdHMgcmF0aGVyIHRoYW4gbmF2aWdhdGlvbi5cbiAgICovXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICAvKipcbiAgICogVGhlIFVSTCB0aGF0IHRoZSBDYXJkIHNob3VsZCBwb2ludCB0by4gSWYgcHJvdmlkZWQsIHRoZSBDYXJkIHdpbGwgYmUgcmVuZGVyZWQgYXMgYW4gYW5jaG9yIGVsZW1lbnQuXG4gICAqL1xuICB0bz86IHN0cmluZyB8IExvY2F0aW9uRGVzY3JpcHRvcjtcbiAgLyoqXG4gICAqIEEgZmxhZyB0byBpbmRpY2F0ZSBpZiB0aGUgQ2FyZCBwb2ludHMgdG8gYW4gZXh0ZXJuYWwgc291cmNlLlxuICAgKi9cbiAgaXNFeHRlcm5hbExpbms/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgYSBjbGlja2FibGUgQ2FyZCBzaG91bGQgbm90IGFsbG93IGNsaWNrcy4gVGhpcyBhbGxvd3MgY29uc3VtZXJzIHRvIHRlbXBvcmFyaWx5IGRpc2FibGUgYSBjbGlja2FibGUgQ2FyZC5cbiAgICovXG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xufTtcblxuY29uc3QgQ2FyZCA9IChwcm9wczogVENhcmRQcm9wcykgPT4ge1xuICBjb25zdCBpc0NsaWNrYWJsZSA9IEJvb2xlYW4oIXByb3BzLmlzRGlzYWJsZWQgJiYgKHByb3BzLm9uQ2xpY2sgfHwgcHJvcHMudG8pKTtcbiAgLy8gT25seSBkaXNhYmxlIHN0eWxpbmcgaWYgdGhlIGNhcmQgaXMgbm90IGNsaWNrYWJsZVxuICBjb25zdCBzaG91bGRCZURpc2FibGVkID0gcHJvcHMuaXNEaXNhYmxlZCAmJiAocHJvcHMub25DbGljayB8fCBwcm9wcy50byk7XG5cbiAgY29uc3QgY29tbW9uUHJvcHMgPSB7XG4gICAgLi4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpLFxuICAgIG9uQ2xpY2s6IGlzQ2xpY2thYmxlID8gcHJvcHMub25DbGljayA6IHVuZGVmaW5lZCxcbiAgICAnYXJpYS1kaXNhYmxlZCc6IHByb3BzLmlzRGlzYWJsZWQgPyB0cnVlIDogdW5kZWZpbmVkLFxuICAgIGNzczogY3NzYFxuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgZm9udC1zaXplOiAxcmVtO1xuICAgICAgYm94LXNoYWRvdzogJHtwcm9wcy50eXBlID09PSAncmFpc2VkJ1xuICAgICAgICA/IGRlc2lnblRva2Vucy5zaGFkb3dGb3JDYXJkV2hlblJhaXNlZFxuICAgICAgICA6ICdub25lJ307XG4gICAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JDYXJkfTtcbiAgICAgIGJvcmRlcjogJHtwcm9wcy50eXBlID09PSAncmFpc2VkJ1xuICAgICAgICA/IGRlc2lnblRva2Vucy5ib3JkZXJGb3JDYXJkV2hlblJhaXNlZFxuICAgICAgICA6ICdub25lJ307XG4gICAgICBiYWNrZ3JvdW5kOiAke3Byb3BzLnRoZW1lID09PSAnZGFyaydcbiAgICAgICAgPyBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTVcbiAgICAgICAgOiBkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgIGN1cnNvcjogJHtzaG91bGRCZURpc2FibGVkXG4gICAgICAgID8gJ25vdC1hbGxvd2VkJ1xuICAgICAgICA6IGlzQ2xpY2thYmxlXG4gICAgICAgID8gJ3BvaW50ZXInXG4gICAgICAgIDogJ2RlZmF1bHQnfTtcbiAgICAgIDpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQ6ICR7cHJvcHMudGhlbWUgPT09ICdkYXJrJ1xuICAgICAgICAgID8gaXNDbGlja2FibGVcbiAgICAgICAgICAgID8gZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwXG4gICAgICAgICAgICA6IHVuZGVmaW5lZFxuICAgICAgICAgIDogaXNDbGlja2FibGVcbiAgICAgICAgICA/IGRlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5OFxuICAgICAgICAgIDogdW5kZWZpbmVkfTtcbiAgICAgIH1cbiAgICAgIC8vIERpc2FibGVzIGxpbmsgdGV4dCBzdHlsaW5nXG4gICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgIC8vIENoYW5nZXMgdGhlIG9wYWNpdHkgb2YgdGhlIGNvbnRlbnQsIG5vdCB0aGUgY2FyZCBpdHNlbGZcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBvcGFjaXR5OiAke3Nob3VsZEJlRGlzYWJsZWQgPyAwLjUgOiAxfTtcbiAgICAgIH1cbiAgICBgLFxuICAgIGNsYXNzTmFtZTogcHJvcHMuY2xhc3NOYW1lLFxuICB9O1xuXG4gIGNvbnN0IGNvbnRlbnQgPVxuICAgIHByb3BzLmluc2V0U2NhbGUgPT09ICdub25lJyA/IChcbiAgICAgIDxkaXY+e3Byb3BzLmNoaWxkcmVufTwvZGl2PlxuICAgICkgOiAoXG4gICAgICA8SW5zZXQgc2NhbGU9e3Byb3BzLmluc2V0U2NhbGV9IGhlaWdodD1cImV4cGFuZGVkXCI+XG4gICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgIDwvSW5zZXQ+XG4gICAgKTtcblxuICBpZiAoaXNDbGlja2FibGUpIHtcbiAgICBpZiAocHJvcHMudG8pIHtcbiAgICAgIGlmIChwcm9wcy5pc0V4dGVybmFsTGluaykge1xuICAgICAgICB3YXJuaW5nKFxuICAgICAgICAgIHR5cGVvZiBwcm9wcy50byA9PT0gJ3N0cmluZycsXG4gICAgICAgICAgJ3VpLWtpdC9DYXJkOiBcInRvXCIgcHJvcGVydHkgbXVzdCBiZSBhIHN0cmluZyB3aGVuIFwiaXNFeHRlcm5hbFwiIHZhbHVlIGlzIHRydWUnXG4gICAgICAgICk7XG5cbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8YVxuICAgICAgICAgICAgey4uLmNvbW1vblByb3BzfVxuICAgICAgICAgICAgaHJlZj17cHJvcHMudG8gYXMgc3RyaW5nfVxuICAgICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICAgIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjb250ZW50fVxuICAgICAgICAgIDwvYT5cbiAgICAgICAgKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPExpbmsgey4uLmNvbW1vblByb3BzfSB0bz17cHJvcHMudG99PlxuICAgICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgICAgPC9MaW5rPlxuICAgICAgICApO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgey4uLmNvbW1vblByb3BzfVxuICAgICAgLy8gU3VwcG9ydCBhY2Nlc3NpYmlsaXR5IGFzIGEgYnV0dG9uIHdoZW4gdGhlIGBvbkNsaWNrYCBwcm9wIGlzIHByb3ZpZGVkXG4gICAgICByb2xlPXtpc0NsaWNrYWJsZSA/ICdidXR0b24nIDogdW5kZWZpbmVkfVxuICAgICAgdGFiSW5kZXg9e2lzQ2xpY2thYmxlID8gMCA6IHVuZGVmaW5lZH1cbiAgICAgIG9uS2V5RG93bj17KGV2ZW50OiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgICAgICBpZiAoaXNDbGlja2FibGUgJiYgcHJvcHMub25DbGljayAmJiBldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICBwcm9wcy5vbkNsaWNrKCk7XG4gICAgICAgIH1cbiAgICAgIH19XG4gICAgPlxuICAgICAge2NvbnRlbnR9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8VENhcmRQcm9wcywgJ3R5cGUnIHwgJ3RoZW1lJyB8ICdpbnNldFNjYWxlJz4gPSB7XG4gIHR5cGU6ICdyYWlzZWQnLFxuICB0aGVtZTogJ2xpZ2h0JyxcbiAgaW5zZXRTY2FsZTogJ20nLFxufTtcblxuQ2FyZC5kaXNwbGF5TmFtZSA9ICdDYXJkJztcbkNhcmQuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBDYXJkO1xuIl19 */"),
|
|
46
|
+
className: props.className
|
|
47
|
+
});
|
|
48
|
+
const content = props.insetScale === 'none' ? jsxRuntime.jsx("div", {
|
|
48
49
|
children: props.children
|
|
49
50
|
}) : jsxRuntime.jsx(Inset__default["default"], {
|
|
50
51
|
scale: props.insetScale,
|
|
51
52
|
height: "expanded",
|
|
52
53
|
children: props.children
|
|
53
|
-
})
|
|
54
|
-
|
|
54
|
+
});
|
|
55
|
+
if (isClickable) {
|
|
56
|
+
if (props.to) {
|
|
57
|
+
if (props.isExternalLink) {
|
|
58
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.to === 'string', 'ui-kit/Card: "to" property must be a string when "isExternal" value is true') : void 0;
|
|
59
|
+
return jsxRuntime.jsx("a", _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
60
|
+
href: props.to,
|
|
61
|
+
target: "_blank",
|
|
62
|
+
rel: "noopener noreferrer",
|
|
63
|
+
children: content
|
|
64
|
+
}));
|
|
65
|
+
} else {
|
|
66
|
+
return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
67
|
+
to: props.to,
|
|
68
|
+
children: content
|
|
69
|
+
}));
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
74
|
+
// Support accessibility as a button when the `onClick` prop is provided
|
|
75
|
+
role: isClickable ? 'button' : undefined,
|
|
76
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
77
|
+
onKeyDown: event => {
|
|
78
|
+
if (isClickable && props.onClick && event.key === 'Enter') {
|
|
79
|
+
props.onClick();
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
children: content
|
|
83
|
+
}));
|
|
84
|
+
};
|
|
55
85
|
Card.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
56
86
|
type: _pt__default["default"].oneOf(['raised', 'flat']).isRequired,
|
|
57
87
|
insetScale: _pt__default["default"].oneOf(['none', 's', 'm', 'l', 'xl']).isRequired,
|
|
58
88
|
theme: _pt__default["default"].oneOf(['light', 'dark']).isRequired,
|
|
59
89
|
className: _pt__default["default"].string,
|
|
60
|
-
children: _pt__default["default"].node
|
|
90
|
+
children: _pt__default["default"].node,
|
|
91
|
+
onClick: _pt__default["default"].func,
|
|
92
|
+
to: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].any]),
|
|
93
|
+
isExternalLink: _pt__default["default"].bool,
|
|
94
|
+
isDisabled: _pt__default["default"].bool
|
|
61
95
|
} : {};
|
|
62
96
|
const defaultProps = {
|
|
63
97
|
type: 'raised',
|
|
@@ -69,7 +103,7 @@ Card.defaultProps = defaultProps;
|
|
|
69
103
|
var Card$1 = Card;
|
|
70
104
|
|
|
71
105
|
// NOTE: This string will be replaced on build time with the package version.
|
|
72
|
-
var version = "17.
|
|
106
|
+
var version = "17.1.0";
|
|
73
107
|
|
|
74
108
|
exports["default"] = Card$1;
|
|
75
109
|
exports.version = version;
|
|
@@ -17,6 +17,7 @@ var react = require('@emotion/react');
|
|
|
17
17
|
var designSystem = require('@commercetools-uikit/design-system');
|
|
18
18
|
var utils = require('@commercetools-uikit/utils');
|
|
19
19
|
var Inset = require('@commercetools-uikit/spacings-inset');
|
|
20
|
+
var reactRouterDom = require('react-router-dom');
|
|
20
21
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
21
22
|
|
|
22
23
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -31,26 +32,54 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
|
|
|
31
32
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
32
33
|
var Inset__default = /*#__PURE__*/_interopDefault(Inset);
|
|
33
34
|
|
|
34
|
-
function ownKeys(
|
|
35
|
-
function _objectSpread(
|
|
36
|
-
const Card = props =>
|
|
37
|
-
|
|
38
|
-
//
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
jsxRuntime.jsx("div", {
|
|
35
|
+
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
36
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
37
|
+
const Card = props => {
|
|
38
|
+
const isClickable = Boolean(!props.isDisabled && (props.onClick || props.to));
|
|
39
|
+
// Only disable styling if the card is not clickable
|
|
40
|
+
const shouldBeDisabled = props.isDisabled && (props.onClick || props.to);
|
|
41
|
+
const commonProps = _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
42
|
+
onClick: isClickable ? props.onClick : undefined,
|
|
43
|
+
'aria-disabled': props.isDisabled ? true : undefined,
|
|
44
|
+
css: /*#__PURE__*/react.css("box-sizing:border-box;width:100%;font-size:1rem;box-shadow:", props.type === 'raised' ? designSystem.designTokens.shadowForCardWhenRaised : 'none', ";border-radius:", designSystem.designTokens.borderRadiusForCard, ";border:", props.type === 'raised' ? designSystem.designTokens.borderForCardWhenRaised : 'none', ";background:", props.theme === 'dark' ? designSystem.designTokens.colorNeutral95 : designSystem.designTokens.colorSurface, ";cursor:", shouldBeDisabled ? 'not-allowed' : isClickable ? 'pointer' : 'default', ";:hover{background:", props.theme === 'dark' ? isClickable ? designSystem.designTokens.colorNeutral90 : undefined : isClickable ? designSystem.designTokens.colorNeutral98 : undefined, ";}color:inherit;&>div{opacity:", shouldBeDisabled ? 0.5 : 1, ";}" + ("" ), "" ),
|
|
45
|
+
className: props.className
|
|
46
|
+
});
|
|
47
|
+
const content = props.insetScale === 'none' ? jsxRuntime.jsx("div", {
|
|
47
48
|
children: props.children
|
|
48
49
|
}) : jsxRuntime.jsx(Inset__default["default"], {
|
|
49
50
|
scale: props.insetScale,
|
|
50
51
|
height: "expanded",
|
|
51
52
|
children: props.children
|
|
52
|
-
})
|
|
53
|
-
|
|
53
|
+
});
|
|
54
|
+
if (isClickable) {
|
|
55
|
+
if (props.to) {
|
|
56
|
+
if (props.isExternalLink) {
|
|
57
|
+
return jsxRuntime.jsx("a", _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
58
|
+
href: props.to,
|
|
59
|
+
target: "_blank",
|
|
60
|
+
rel: "noopener noreferrer",
|
|
61
|
+
children: content
|
|
62
|
+
}));
|
|
63
|
+
} else {
|
|
64
|
+
return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
65
|
+
to: props.to,
|
|
66
|
+
children: content
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
72
|
+
// Support accessibility as a button when the `onClick` prop is provided
|
|
73
|
+
role: isClickable ? 'button' : undefined,
|
|
74
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
75
|
+
onKeyDown: event => {
|
|
76
|
+
if (isClickable && props.onClick && event.key === 'Enter') {
|
|
77
|
+
props.onClick();
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
children: content
|
|
81
|
+
}));
|
|
82
|
+
};
|
|
54
83
|
Card.propTypes = {};
|
|
55
84
|
const defaultProps = {
|
|
56
85
|
type: 'raised',
|
|
@@ -62,7 +91,7 @@ Card.defaultProps = defaultProps;
|
|
|
62
91
|
var Card$1 = Card;
|
|
63
92
|
|
|
64
93
|
// NOTE: This string will be replaced on build time with the package version.
|
|
65
|
-
var version = "17.
|
|
94
|
+
var version = "17.1.0";
|
|
66
95
|
|
|
67
96
|
exports["default"] = Card$1;
|
|
68
97
|
exports.version = version;
|
|
@@ -11,36 +11,70 @@ import _pt from 'prop-types';
|
|
|
11
11
|
import 'react';
|
|
12
12
|
import { css } from '@emotion/react';
|
|
13
13
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
14
|
-
import { filterDataAttributes } from '@commercetools-uikit/utils';
|
|
14
|
+
import { filterDataAttributes, warning } from '@commercetools-uikit/utils';
|
|
15
15
|
import Inset from '@commercetools-uikit/spacings-inset';
|
|
16
|
+
import { Link } from 'react-router-dom';
|
|
16
17
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
17
18
|
|
|
18
|
-
function ownKeys(
|
|
19
|
-
function _objectSpread(
|
|
20
|
-
const Card = props =>
|
|
21
|
-
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
jsx("div", {
|
|
19
|
+
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
|
+
const Card = props => {
|
|
22
|
+
const isClickable = Boolean(!props.isDisabled && (props.onClick || props.to));
|
|
23
|
+
// Only disable styling if the card is not clickable
|
|
24
|
+
const shouldBeDisabled = props.isDisabled && (props.onClick || props.to);
|
|
25
|
+
const commonProps = _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
26
|
+
onClick: isClickable ? props.onClick : undefined,
|
|
27
|
+
'aria-disabled': props.isDisabled ? true : undefined,
|
|
28
|
+
css: /*#__PURE__*/css("box-sizing:border-box;width:100%;font-size:1rem;box-shadow:", props.type === 'raised' ? designTokens.shadowForCardWhenRaised : 'none', ";border-radius:", designTokens.borderRadiusForCard, ";border:", props.type === 'raised' ? designTokens.borderForCardWhenRaised : 'none', ";background:", props.theme === 'dark' ? designTokens.colorNeutral95 : designTokens.colorSurface, ";cursor:", shouldBeDisabled ? 'not-allowed' : isClickable ? 'pointer' : 'default', ";:hover{background:", props.theme === 'dark' ? isClickable ? designTokens.colorNeutral90 : undefined : isClickable ? designTokens.colorNeutral98 : undefined, ";}color:inherit;&>div{opacity:", shouldBeDisabled ? 0.5 : 1, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:css;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdEWSIsImZpbGUiOiJjYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEtleWJvYXJkRXZlbnQsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZmlsdGVyRGF0YUF0dHJpYnV0ZXMsIHdhcm5pbmcgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgSW5zZXQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MtaW5zZXQnO1xuaW1wb3J0IHsgTGluayB9IGZyb20gJ3JlYWN0LXJvdXRlci1kb20nO1xuaW1wb3J0IHR5cGUgeyBMb2NhdGlvbkRlc2NyaXB0b3IgfSBmcm9tICdoaXN0b3J5JztcblxuZXhwb3J0IHR5cGUgVENhcmRQcm9wcyA9IHtcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIHZpc3VhbCBlZmZlY3Qgb2YgdGhlIGNhcmQuIEEgcmFpc2VkIGNhcmQgaGFzIGEgYm94IHNoYWRvdyB3aGlsZSBhIGZsYXQgY2FyZCBoYXMganVzdCBhIGJvcmRlci5cbiAgICovXG4gIHR5cGU6ICdyYWlzZWQnIHwgJ2ZsYXQnO1xuICAvKipcbiAgICogRGV0ZXJtaW5lcyB0aGUgc3BhY2luZyAocGFkZGluZykgdGhhdCB0aGUgY29udGVudCBzaG91bGQgaGF2ZSBmcm9tIHRoZSBjYXJkIGJvcmRlcnMuIEluIGNhc2UgdGhlcmUgaXMgbm8gc3BhY2UgbmVlZGVkLCB5b3UgY2FuIHBhc3MgYG5vbmVgLlxuICAgKi9cbiAgaW5zZXRTY2FsZTogJ25vbmUnIHwgJ3MnIHwgJ20nIHwgJ2wnIHwgJ3hsJztcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIGNhcmQuXG4gICAqL1xuICB0aGVtZTogJ2xpZ2h0JyB8ICdkYXJrJztcbiAgLyoqXG4gICAqIFBhc3MgYSBjdXN0b20gQ1NTIGNsYXNzLCB1c2VmdWwgdG8gb3ZlcnJpZGUgdGhlIHN0eWxlcy5cbiAgICogPGJyPlxuICAgKiBOT1RFOiBUaGlzIGlzIG5vdCByZWNvbW1lbmRlZCBhbmQgc2hvdWxkIG9ubHkgYmUgdXNlZCBmb3IgYnVpbGRpbmcgbmV3IGNvbXBvbmVudHNcbiAgICogdGhhdCByZXF1aXJlIHNwZWNpYWwgc3R5bGUgYWRqdXN0bWVudHMuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICAvKipcbiAgICogVGhlIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJlIGV4ZWN1dGVkIHdoZW4gdGhlIENhcmQgY29tcG9uZW50IGlzIGNsaWNrZWQuIFByZWZlciB0aGlzIGZvciBtYW5hZ2luZyBzaWRlIGVmZmVjdHMgcmF0aGVyIHRoYW4gbmF2aWdhdGlvbi5cbiAgICovXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICAvKipcbiAgICogVGhlIFVSTCB0aGF0IHRoZSBDYXJkIHNob3VsZCBwb2ludCB0by4gSWYgcHJvdmlkZWQsIHRoZSBDYXJkIHdpbGwgYmUgcmVuZGVyZWQgYXMgYW4gYW5jaG9yIGVsZW1lbnQuXG4gICAqL1xuICB0bz86IHN0cmluZyB8IExvY2F0aW9uRGVzY3JpcHRvcjtcbiAgLyoqXG4gICAqIEEgZmxhZyB0byBpbmRpY2F0ZSBpZiB0aGUgQ2FyZCBwb2ludHMgdG8gYW4gZXh0ZXJuYWwgc291cmNlLlxuICAgKi9cbiAgaXNFeHRlcm5hbExpbms/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgYSBjbGlja2FibGUgQ2FyZCBzaG91bGQgbm90IGFsbG93IGNsaWNrcy4gVGhpcyBhbGxvd3MgY29uc3VtZXJzIHRvIHRlbXBvcmFyaWx5IGRpc2FibGUgYSBjbGlja2FibGUgQ2FyZC5cbiAgICovXG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xufTtcblxuY29uc3QgQ2FyZCA9IChwcm9wczogVENhcmRQcm9wcykgPT4ge1xuICBjb25zdCBpc0NsaWNrYWJsZSA9IEJvb2xlYW4oIXByb3BzLmlzRGlzYWJsZWQgJiYgKHByb3BzLm9uQ2xpY2sgfHwgcHJvcHMudG8pKTtcbiAgLy8gT25seSBkaXNhYmxlIHN0eWxpbmcgaWYgdGhlIGNhcmQgaXMgbm90IGNsaWNrYWJsZVxuICBjb25zdCBzaG91bGRCZURpc2FibGVkID0gcHJvcHMuaXNEaXNhYmxlZCAmJiAocHJvcHMub25DbGljayB8fCBwcm9wcy50byk7XG5cbiAgY29uc3QgY29tbW9uUHJvcHMgPSB7XG4gICAgLi4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpLFxuICAgIG9uQ2xpY2s6IGlzQ2xpY2thYmxlID8gcHJvcHMub25DbGljayA6IHVuZGVmaW5lZCxcbiAgICAnYXJpYS1kaXNhYmxlZCc6IHByb3BzLmlzRGlzYWJsZWQgPyB0cnVlIDogdW5kZWZpbmVkLFxuICAgIGNzczogY3NzYFxuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgZm9udC1zaXplOiAxcmVtO1xuICAgICAgYm94LXNoYWRvdzogJHtwcm9wcy50eXBlID09PSAncmFpc2VkJ1xuICAgICAgICA/IGRlc2lnblRva2Vucy5zaGFkb3dGb3JDYXJkV2hlblJhaXNlZFxuICAgICAgICA6ICdub25lJ307XG4gICAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JDYXJkfTtcbiAgICAgIGJvcmRlcjogJHtwcm9wcy50eXBlID09PSAncmFpc2VkJ1xuICAgICAgICA/IGRlc2lnblRva2Vucy5ib3JkZXJGb3JDYXJkV2hlblJhaXNlZFxuICAgICAgICA6ICdub25lJ307XG4gICAgICBiYWNrZ3JvdW5kOiAke3Byb3BzLnRoZW1lID09PSAnZGFyaydcbiAgICAgICAgPyBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTVcbiAgICAgICAgOiBkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgIGN1cnNvcjogJHtzaG91bGRCZURpc2FibGVkXG4gICAgICAgID8gJ25vdC1hbGxvd2VkJ1xuICAgICAgICA6IGlzQ2xpY2thYmxlXG4gICAgICAgID8gJ3BvaW50ZXInXG4gICAgICAgIDogJ2RlZmF1bHQnfTtcbiAgICAgIDpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQ6ICR7cHJvcHMudGhlbWUgPT09ICdkYXJrJ1xuICAgICAgICAgID8gaXNDbGlja2FibGVcbiAgICAgICAgICAgID8gZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwXG4gICAgICAgICAgICA6IHVuZGVmaW5lZFxuICAgICAgICAgIDogaXNDbGlja2FibGVcbiAgICAgICAgICA/IGRlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5OFxuICAgICAgICAgIDogdW5kZWZpbmVkfTtcbiAgICAgIH1cbiAgICAgIC8vIERpc2FibGVzIGxpbmsgdGV4dCBzdHlsaW5nXG4gICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgIC8vIENoYW5nZXMgdGhlIG9wYWNpdHkgb2YgdGhlIGNvbnRlbnQsIG5vdCB0aGUgY2FyZCBpdHNlbGZcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBvcGFjaXR5OiAke3Nob3VsZEJlRGlzYWJsZWQgPyAwLjUgOiAxfTtcbiAgICAgIH1cbiAgICBgLFxuICAgIGNsYXNzTmFtZTogcHJvcHMuY2xhc3NOYW1lLFxuICB9O1xuXG4gIGNvbnN0IGNvbnRlbnQgPVxuICAgIHByb3BzLmluc2V0U2NhbGUgPT09ICdub25lJyA/IChcbiAgICAgIDxkaXY+e3Byb3BzLmNoaWxkcmVufTwvZGl2PlxuICAgICkgOiAoXG4gICAgICA8SW5zZXQgc2NhbGU9e3Byb3BzLmluc2V0U2NhbGV9IGhlaWdodD1cImV4cGFuZGVkXCI+XG4gICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgIDwvSW5zZXQ+XG4gICAgKTtcblxuICBpZiAoaXNDbGlja2FibGUpIHtcbiAgICBpZiAocHJvcHMudG8pIHtcbiAgICAgIGlmIChwcm9wcy5pc0V4dGVybmFsTGluaykge1xuICAgICAgICB3YXJuaW5nKFxuICAgICAgICAgIHR5cGVvZiBwcm9wcy50byA9PT0gJ3N0cmluZycsXG4gICAgICAgICAgJ3VpLWtpdC9DYXJkOiBcInRvXCIgcHJvcGVydHkgbXVzdCBiZSBhIHN0cmluZyB3aGVuIFwiaXNFeHRlcm5hbFwiIHZhbHVlIGlzIHRydWUnXG4gICAgICAgICk7XG5cbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8YVxuICAgICAgICAgICAgey4uLmNvbW1vblByb3BzfVxuICAgICAgICAgICAgaHJlZj17cHJvcHMudG8gYXMgc3RyaW5nfVxuICAgICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICAgIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjb250ZW50fVxuICAgICAgICAgIDwvYT5cbiAgICAgICAgKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPExpbmsgey4uLmNvbW1vblByb3BzfSB0bz17cHJvcHMudG99PlxuICAgICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgICAgPC9MaW5rPlxuICAgICAgICApO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgey4uLmNvbW1vblByb3BzfVxuICAgICAgLy8gU3VwcG9ydCBhY2Nlc3NpYmlsaXR5IGFzIGEgYnV0dG9uIHdoZW4gdGhlIGBvbkNsaWNrYCBwcm9wIGlzIHByb3ZpZGVkXG4gICAgICByb2xlPXtpc0NsaWNrYWJsZSA/ICdidXR0b24nIDogdW5kZWZpbmVkfVxuICAgICAgdGFiSW5kZXg9e2lzQ2xpY2thYmxlID8gMCA6IHVuZGVmaW5lZH1cbiAgICAgIG9uS2V5RG93bj17KGV2ZW50OiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgICAgICBpZiAoaXNDbGlja2FibGUgJiYgcHJvcHMub25DbGljayAmJiBldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICBwcm9wcy5vbkNsaWNrKCk7XG4gICAgICAgIH1cbiAgICAgIH19XG4gICAgPlxuICAgICAge2NvbnRlbnR9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8VENhcmRQcm9wcywgJ3R5cGUnIHwgJ3RoZW1lJyB8ICdpbnNldFNjYWxlJz4gPSB7XG4gIHR5cGU6ICdyYWlzZWQnLFxuICB0aGVtZTogJ2xpZ2h0JyxcbiAgaW5zZXRTY2FsZTogJ20nLFxufTtcblxuQ2FyZC5kaXNwbGF5TmFtZSA9ICdDYXJkJztcbkNhcmQuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBDYXJkO1xuIl19 */"),
|
|
29
|
+
className: props.className
|
|
30
|
+
});
|
|
31
|
+
const content = props.insetScale === 'none' ? jsx("div", {
|
|
31
32
|
children: props.children
|
|
32
33
|
}) : jsx(Inset, {
|
|
33
34
|
scale: props.insetScale,
|
|
34
35
|
height: "expanded",
|
|
35
36
|
children: props.children
|
|
36
|
-
})
|
|
37
|
-
|
|
37
|
+
});
|
|
38
|
+
if (isClickable) {
|
|
39
|
+
if (props.to) {
|
|
40
|
+
if (props.isExternalLink) {
|
|
41
|
+
process.env.NODE_ENV !== "production" ? warning(typeof props.to === 'string', 'ui-kit/Card: "to" property must be a string when "isExternal" value is true') : void 0;
|
|
42
|
+
return jsx("a", _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
43
|
+
href: props.to,
|
|
44
|
+
target: "_blank",
|
|
45
|
+
rel: "noopener noreferrer",
|
|
46
|
+
children: content
|
|
47
|
+
}));
|
|
48
|
+
} else {
|
|
49
|
+
return jsx(Link, _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
50
|
+
to: props.to,
|
|
51
|
+
children: content
|
|
52
|
+
}));
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return jsx("div", _objectSpread(_objectSpread({}, commonProps), {}, {
|
|
57
|
+
// Support accessibility as a button when the `onClick` prop is provided
|
|
58
|
+
role: isClickable ? 'button' : undefined,
|
|
59
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
60
|
+
onKeyDown: event => {
|
|
61
|
+
if (isClickable && props.onClick && event.key === 'Enter') {
|
|
62
|
+
props.onClick();
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
children: content
|
|
66
|
+
}));
|
|
67
|
+
};
|
|
38
68
|
Card.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
39
69
|
type: _pt.oneOf(['raised', 'flat']).isRequired,
|
|
40
70
|
insetScale: _pt.oneOf(['none', 's', 'm', 'l', 'xl']).isRequired,
|
|
41
71
|
theme: _pt.oneOf(['light', 'dark']).isRequired,
|
|
42
72
|
className: _pt.string,
|
|
43
|
-
children: _pt.node
|
|
73
|
+
children: _pt.node,
|
|
74
|
+
onClick: _pt.func,
|
|
75
|
+
to: _pt.oneOfType([_pt.string, _pt.any]),
|
|
76
|
+
isExternalLink: _pt.bool,
|
|
77
|
+
isDisabled: _pt.bool
|
|
44
78
|
} : {};
|
|
45
79
|
const defaultProps = {
|
|
46
80
|
type: 'raised',
|
|
@@ -52,6 +86,6 @@ Card.defaultProps = defaultProps;
|
|
|
52
86
|
var Card$1 = Card;
|
|
53
87
|
|
|
54
88
|
// NOTE: This string will be replaced on build time with the package version.
|
|
55
|
-
var version = "17.
|
|
89
|
+
var version = "17.1.0";
|
|
56
90
|
|
|
57
91
|
export { Card$1 as default, version };
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import type { LocationDescriptor } from 'history';
|
|
2
3
|
export type TCardProps = {
|
|
3
4
|
type: 'raised' | 'flat';
|
|
4
5
|
insetScale: 'none' | 's' | 'm' | 'l' | 'xl';
|
|
5
6
|
theme: 'light' | 'dark';
|
|
6
7
|
className?: string;
|
|
7
8
|
children?: ReactNode;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
to?: string | LocationDescriptor;
|
|
11
|
+
isExternalLink?: boolean;
|
|
12
|
+
isDisabled?: boolean;
|
|
8
13
|
};
|
|
9
14
|
declare const Card: {
|
|
10
15
|
(props: TCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/card",
|
|
3
3
|
"description": "Cards are used to display content and actions on a single topic.",
|
|
4
|
-
"version": "17.
|
|
4
|
+
"version": "17.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,17 +21,20 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/design-system": "17.
|
|
25
|
-
"@commercetools-uikit/spacings-inset": "17.
|
|
26
|
-
"@commercetools-uikit/utils": "17.
|
|
24
|
+
"@commercetools-uikit/design-system": "17.1.0",
|
|
25
|
+
"@commercetools-uikit/spacings-inset": "17.1.0",
|
|
26
|
+
"@commercetools-uikit/utils": "17.1.0",
|
|
27
27
|
"@emotion/react": "^11.10.5",
|
|
28
28
|
"@emotion/styled": "^11.10.5",
|
|
29
|
+
"@types/react-router-dom": "^5.3.3",
|
|
29
30
|
"prop-types": "15.8.1"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|
|
32
|
-
"react": "17.0.2"
|
|
33
|
+
"react": "17.0.2",
|
|
34
|
+
"react-router-dom": "5.3.4"
|
|
33
35
|
},
|
|
34
36
|
"peerDependencies": {
|
|
35
|
-
"react": "17.x"
|
|
37
|
+
"react": "17.x",
|
|
38
|
+
"react-router-dom": "5.x"
|
|
36
39
|
}
|
|
37
40
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"commercetools-uikit-card.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|