@ausbom/card 0.8.33 → 0.8.35

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.
Files changed (3) hide show
  1. package/lib/Card.js +1 -1
  2. package/lib/scss/module.scss +32 -24
  3. package/package.json +2 -2
package/lib/Card.js CHANGED
@@ -1 +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;
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","href","target","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,target=_ref.target,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,target:target},/*#__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 CHANGED
@@ -63,13 +63,12 @@ $_transition: 250ms ease-in-out;
63
63
  border: none;
64
64
  box-shadow: inset 0 1px get-palette-color('neutral.greyMedium');
65
65
  color: get-palette-color('neutral.charcoalDark');
66
- cursor: pointer;
67
66
  display: flex;
68
67
  flex-direction: row-reverse;
69
68
  margin-bottom: 16px;
70
69
  padding-top: 16px;
71
- text-decoration: none;
72
70
  transition: box-shadow $_transition;
71
+ position: relative;
73
72
 
74
73
  &:first-child {
75
74
  margin-top: 0;
@@ -93,7 +92,7 @@ $_transition: 250ms ease-in-out;
93
92
  }
94
93
  }
95
94
 
96
- &:focus {
95
+ &:focus-within {
97
96
  @include bom-focus-outline;
98
97
  }
99
98
 
@@ -103,11 +102,18 @@ $_transition: 250ms ease-in-out;
103
102
  }
104
103
  }
105
104
 
105
+ .bom-card__link {
106
+ text-decoration: none;
107
+
108
+ &:focus {
109
+ outline: none;
110
+ }
111
+ }
112
+
106
113
  .bom-card__title {
107
114
  display: flex;
108
115
  align-items: flex-start;
109
116
  justify-content: space-between;
110
- text-decoration: none;
111
117
  color: get-palette-color('primary.electricBlue');
112
118
  margin: 0;
113
119
  margin-bottom: 12px;
@@ -115,18 +121,22 @@ $_transition: 250ms ease-in-out;
115
121
  transition: color $_transition;
116
122
  font-weight: 500;
117
123
 
118
- @include bom-type-scale(
119
- $size: 'type-18',
120
- $line: 'display'
121
- );
124
+ // Make the whole card clickable.
125
+ &::after {
126
+ position: absolute;
127
+ top: 0;
128
+ right: 0;
129
+ bottom: 0;
130
+ left: 0;
131
+ content: '';
132
+ }
133
+
134
+ @include bom-type-scale($size: 'type-18', $line: 'display');
122
135
 
123
136
  @include bp(m) {
124
137
  margin-bottom: 16px;
125
138
 
126
- @include bom-type-scale(
127
- $size: 'type-22',
128
- $line: 'display'
129
- );
139
+ @include bom-type-scale($size: 'type-22', $line: 'display');
130
140
  }
131
141
  }
132
142
 
@@ -147,10 +157,7 @@ $_transition: 250ms ease-in-out;
147
157
  display: flex;
148
158
  color: get-palette-color('neutral.charcoalMedium');
149
159
 
150
- @include bom-type-scale(
151
- $size: 'type-12',
152
- $line: 'display'
153
- );
160
+ @include bom-type-scale($size: 'type-12', $line: 'display');
154
161
 
155
162
  &::after {
156
163
  content: '';
@@ -194,21 +201,22 @@ $_transition: 250ms ease-in-out;
194
201
  width: 100%;
195
202
  color: get-palette-color('neutral.charcoalMedium');
196
203
 
197
- @include bom-type-scale(
198
- $size: 'type-16',
199
- $line: 'paragraph'
200
- );
204
+ .bom-card__title-icon {
205
+ display: flex;
206
+ justify-content: space-between;
207
+ }
208
+
209
+ @include bom-type-scale($size: 'type-16', $line: 'paragraph');
201
210
 
202
211
  @include bp(m) {
203
- @include bom-type-scale(
204
- $size: 'type-18',
205
- $line: 'paragraph'
206
- );
212
+ @include bom-type-scale($size: 'type-18', $line: 'paragraph');
207
213
  }
208
214
  }
209
215
 
210
216
  .bom-card__desc {
211
217
  padding-right: 16px;
218
+ position: relative;
219
+ z-index: 2;
212
220
  }
213
221
 
214
222
  .bom-card__img__overlay {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ausbom/card",
3
- "version": "0.8.33",
3
+ "version": "0.8.35",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "",
@@ -43,5 +43,5 @@
43
43
  "@ausbom/styles": "^0.14.3",
44
44
  "@ausbom/typography": "^0.5.3"
45
45
  },
46
- "gitHead": "87c9965ca0e0d4f1172829c9ecd33113aace8fa1"
46
+ "gitHead": "af0ef57ae226bab9db39a5d03f3b9d4f50c4343e"
47
47
  }