@spaced-out/ui-design-system 0.0.25 → 0.0.26

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.26](https://github.com/spaced-out/ui-design-system/compare/v0.0.25...v0.0.26) (2023-02-16)
+
+
+### Features
+
+* clickable card ([3dcebb1](https://github.com/spaced-out/ui-design-system/commit/3dcebb1fbf0af5bded4e1816a7b89f33b4cd8748))
+
 ### [0.0.25](https://github.com/spaced-out/ui-design-system/compare/v0.0.24...v0.0.25) (2023-02-15)
 
 

package/lib/components/Card/Card.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PADDING_SIZES = exports.Card = void 0;
+exports.PADDING_SIZES = exports.ClickableCard = exports.Card = void 0;
 var React = _interopRequireWildcard(require("react"));
 var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -12,7 +12,7 @@ var _CardModule = _interopRequireDefault(require("./Card.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const PADDING_SIZES = Object.freeze({
   small: 'small',
   medium: 'medium',
@@ -30,9 +30,10 @@ const Card = _ref => {
     paddingTop = 'medium',
     paddingRight = 'medium',
     paddingBottom = 'medium',
-    paddingLeft = 'medium'
+    paddingLeft = 'medium',
+    ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     "data-testid": "Card",
     className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
     style: {
@@ -41,6 +42,19 @@ const Card = _ref => {
       paddingBottom: getPaddingValue(paddingBottom),
       paddingLeft: getPaddingValue(paddingLeft)
     }
-  }, children);
+  }), children);
+};
+exports.Card = Card;
+const ClickableCard = _ref2 => {
+  let {
+    classNames,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+    classNames: {
+      wrapper: (0, _classify.default)(_CardModule.default.clickableCard, classNames?.wrapper)
+    },
+    tabindex: "0"
+  }));
 };
-exports.Card = Card;
+exports.ClickableCard = ClickableCard;

package/lib/components/Card/Card.js.flow

@@ -26,6 +26,13 @@ export type CardProps = {
   paddingRight?: PaddingSizeType,
   paddingBottom?: PaddingSizeType,
   paddingLeft?: PaddingSizeType,
+  ...
+};
+
+export type ClickableCardProps = {
+  ...CardProps,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ...
 };
 
 const getPaddingValue = (size: PaddingSizeType): string => {
@@ -40,8 +47,10 @@ export const Card = ({
   paddingRight = 'medium',
   paddingBottom = 'medium',
   paddingLeft = 'medium',
+  ...props
 }: CardProps): React.Node => (
   <div
+    {...props}
     data-testid="Card"
     className={classify(css.cardWrapper, classNames?.wrapper)}
     style={{
@@ -54,3 +63,14 @@ export const Card = ({
     {children}
   </div>
 );
+
+export const ClickableCard = ({
+  classNames,
+  ...props
+}: ClickableCardProps): React.Node => (
+  <Card
+    {...props}
+    classNames={{wrapper: classify(css.clickableCard, classNames?.wrapper)}}
+    tabindex="0"
+  />
+);

package/lib/components/Card/Card.module.css

@@ -1,5 +1,5 @@
-@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
-@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';
+@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
 
 .cardWrapper {
   display: flex;
@@ -7,3 +7,18 @@
   background-color: colorBackgroundTertiary;
   border-radius: borderRadiusMedium;
 }
+
+.clickableCard {
+  cursor: pointer;
+  outline: none;
+}
+
+.clickableCard:hover {
+  border-color: colorBorderSecondary;
+}
+
+.clickableCard:focus-within {
+  border-color: colorFillPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {