@ausbom/card 0.8.33 → 0.8.34

package/lib/Card.js

@@ -1 +1 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _ArrowRight=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/ArrowRight16"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));var _excluded=["as","children","className","hideImageBelow","horizontal","icon","imageIcon","id","image","innerRef","meta","title","titleTag"];function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var Card=/*#__PURE__*/function(_React$PureComponent){function Card(){(0,_classCallCheck2["default"])(this,Card);return _callSuper(this,Card,arguments)}(0,_inherits2["default"])(Card,_React$PureComponent);return(0,_createClass2["default"])(Card,[{key:"render",value:function render(){var _ref=this.props,Tag=_ref.as,children=_ref.children,className=_ref.className,hideImageBelow=_ref.hideImageBelow,horizontal=_ref.horizontal,icon=_ref.icon,imageIcon=_ref.imageIcon,id=_ref.id,image=_ref.image,innerRef=_ref.innerRef,meta=_ref.meta,title=_ref.title,TitleTag=_ref.titleTag,restProps=(0,_objectWithoutProperties2["default"])(_ref,_excluded);var classes=(0,_classnames["default"])(className,"bom-card ",(0,_defineProperty2["default"])({"bom-card--stacked":!horizontal,"bom-card--with-image":!!image},"bom-card--hide-image-below-".concat(String(hideImageBelow)),!!hideImageBelow));var metaItems=_react["default"].Children.map(meta,function(data){return/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card-meta__item"},data)});return/*#__PURE__*/_react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,"aria-describedby":children?id:undefined,ref:innerRef},restProps),image&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__img"},image,imageIcon&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__img__overlay"},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{"aria-hidden":true,className:"bom-card__img__overlay-icon",icon:imageIcon,size:16}))),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__text"},/*#__PURE__*/_react["default"].createElement(TitleTag,{className:"bom-card__title"},title,/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{"aria-hidden":true,className:"bom-card__icon",icon:icon||_ArrowRight["default"],size:16})),meta&&meta.length>0&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card-meta"},metaItems),children&&/*#__PURE__*/_react["default"].createElement("div",{id:id,className:"bom-card__desc"},children)))}}])}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Card,"defaultProps",{as:"a",titleTag:"h3"});var CardWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Card,(0,_extends2["default"])({innerRef:ref},props))});CardWithRef.displayName="Card";var _default=exports["default"]=CardWithRef;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _ArrowRight=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/ArrowRight16"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));var _excluded=["as","children","className","hideImageBelow","horizontal","icon","imageIcon","id","image","innerRef","meta","title","titleTag","href","aria-label","data-testid"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){(0,_defineProperty2["default"])(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var Card=/*#__PURE__*/function(_React$PureComponent){function Card(){(0,_classCallCheck2["default"])(this,Card);return _callSuper(this,Card,arguments)}(0,_inherits2["default"])(Card,_React$PureComponent);return(0,_createClass2["default"])(Card,[{key:"render",value:function render(){var _ref=this.props,as=_ref.as,children=_ref.children,className=_ref.className,hideImageBelow=_ref.hideImageBelow,horizontal=_ref.horizontal,icon=_ref.icon,imageIcon=_ref.imageIcon,id=_ref.id,image=_ref.image,innerRef=_ref.innerRef,meta=_ref.meta,title=_ref.title,titleTag=_ref.titleTag,href=_ref.href,ariaLabel=_ref["aria-label"],dataTestId=_ref["data-testid"],restProps=(0,_objectWithoutProperties2["default"])(_ref,_excluded);var Tag=as||"article";var TitleTag=titleTag||"h3";var classes=(0,_classnames["default"])(className,"bom-card",(0,_defineProperty2["default"])({"bom-card--stacked":!horizontal,"bom-card--with-image":!!image},"bom-card--hide-image-below-".concat(String(hideImageBelow)),!!hideImageBelow));var metaItems=_react["default"].Children.map(meta,function(data){return/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card-meta__item"},data)});var renderTitle=function renderTitle(){if(href){return/*#__PURE__*/_react["default"].createElement("a",{className:"bom-card__link",href:href},/*#__PURE__*/_react["default"].createElement(TitleTag,_objectSpread({className:"bom-card__title","aria-label":ariaLabel},restProps),title||href))}return/*#__PURE__*/_react["default"].createElement(TitleTag,_objectSpread({className:"bom-card__title","aria-label":ariaLabel},restProps),title||href)};return/*#__PURE__*/_react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,ref:innerRef,"aria-label":!href&&title?ariaLabel||title:undefined,"data-testid":dataTestId},restProps),image&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__img"},image,imageIcon&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__img__overlay"},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{"aria-hidden":true,className:"bom-card__img__overlay-icon",icon:imageIcon,size:16}))),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__text"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card__title-icon"},renderTitle(),/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{"aria-hidden":true,className:"bom-card__icon",icon:icon||_ArrowRight["default"],size:16})),meta&&meta.length>0&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-card-meta"},metaItems),children&&/*#__PURE__*/_react["default"].createElement("div",{id:id,className:"bom-card__desc"},children)))}}])}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Card,"defaultProps",{as:"div",titleTag:"h3"});var CardWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Card,(0,_extends2["default"])({innerRef:ref},props))});CardWithRef.displayName="Card";var _default=exports["default"]=CardWithRef;

package/lib/scss/module.scss

@@ -63,13 +63,12 @@ $_transition: 250ms ease-in-out;
   border: none;
   box-shadow: inset 0 1px get-palette-color('neutral.greyMedium');
   color: get-palette-color('neutral.charcoalDark');
-  cursor: pointer;
   display: flex;
   flex-direction: row-reverse;
   margin-bottom: 16px;
   padding-top: 16px;
-  text-decoration: none;
   transition: box-shadow $_transition;
+  position: relative;
 
   &:first-child {
     margin-top: 0;
@@ -93,7 +92,7 @@ $_transition: 250ms ease-in-out;
     }
   }
 
-  &:focus {
+  &:focus-within {
     @include bom-focus-outline;
   }
 
@@ -103,11 +102,18 @@ $_transition: 250ms ease-in-out;
   }
 }
 
+.bom-card__link {
+  text-decoration: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
 .bom-card__title {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  text-decoration: none;
   color: get-palette-color('primary.electricBlue');
   margin: 0;
   margin-bottom: 12px;
@@ -115,18 +121,22 @@ $_transition: 250ms ease-in-out;
   transition: color $_transition;
   font-weight: 500;
 
-  @include bom-type-scale(
-    $size: 'type-18',
-    $line: 'display'
-  );
+  // Make the whole card clickable.
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+  }
+
+  @include bom-type-scale($size: 'type-18', $line: 'display');
 
   @include bp(m) {
     margin-bottom: 16px;
 
-    @include bom-type-scale(
-      $size: 'type-22',
-      $line: 'display'
-    );
+    @include bom-type-scale($size: 'type-22', $line: 'display');
   }
 }
 
@@ -147,10 +157,7 @@ $_transition: 250ms ease-in-out;
   display: flex;
   color: get-palette-color('neutral.charcoalMedium');
 
-  @include bom-type-scale(
-    $size: 'type-12',
-    $line: 'display'
-  );
+  @include bom-type-scale($size: 'type-12', $line: 'display');
 
   &::after {
     content: '';
@@ -194,21 +201,22 @@ $_transition: 250ms ease-in-out;
   width: 100%;
   color: get-palette-color('neutral.charcoalMedium');
 
-  @include bom-type-scale(
-    $size: 'type-16',
-    $line: 'paragraph'
-  );
+  .bom-card__title-icon {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @include bom-type-scale($size: 'type-16', $line: 'paragraph');
 
   @include bp(m) {
-    @include bom-type-scale(
-      $size: 'type-18',
-      $line: 'paragraph'
-    );
+    @include bom-type-scale($size: 'type-18', $line: 'paragraph');
   }
 }
 
 .bom-card__desc {
   padding-right: 16px;
+  position: relative;
+  z-index: 2;
 }
 
 .bom-card__img__overlay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/card",
-  "version": "0.8.33",
+  "version": "0.8.34",
   "description": "",
   "keywords": [],
   "author": "",
@@ -43,5 +43,5 @@
     "@ausbom/styles": "^0.14.3",
     "@ausbom/typography": "^0.5.3"
   },
-  "gitHead": "87c9965ca0e0d4f1172829c9ecd33113aace8fa1"
+  "gitHead": "24d81eaf82bd54f943a2976a31aa63cea4d1e9fb"
 }