@ausbom/card
Advanced tools
Comparing version 0.1.6 to 0.2.0
@@ -6,2 +6,21 @@ # Change Log | ||
<a name="0.2.0"></a> | ||
# [0.2.0](https://github.com/AusBOM/bom-design-system/compare/@ausbom/card@0.1.6...@ausbom/card@0.2.0) (2019-11-07) | ||
### Bug Fixes | ||
* fix title wrapping on horizontal cards with images ([8e23a81](https://github.com/AusBOM/bom-design-system/commit/8e23a81)) | ||
* remove un-needed media query (fixes template icon placement) ([dabc3a5](https://github.com/AusBOM/bom-design-system/commit/dabc3a5)) | ||
### Features | ||
* cards custom icon, defaults to ArrowRight16 if not provided ([260cd61](https://github.com/AusBOM/bom-design-system/commit/260cd61)) | ||
* update card SASS to account for new hover styles ([f7dd5c7](https://github.com/AusBOM/bom-design-system/commit/f7dd5c7)) | ||
<a name="0.1.6"></a> | ||
@@ -8,0 +27,0 @@ ## [0.1.6](https://github.com/AusBOM/bom-design-system/compare/@ausbom/card@0.1.5...@ausbom/card@0.1.6) (2019-10-31) |
@@ -6,8 +6,9 @@ import React from 'react' | ||
className?: string | ||
horizontal?: boolean | ||
icon?: React.ElementType, | ||
id: string | ||
image?: object | ||
innerRef?: React.RefObject<any> | ||
title?: string | ||
id: string | ||
titleTag?: React.ElementType | ||
image?: object | ||
horizontal?: boolean | ||
[x: string]: any | ||
@@ -14,0 +15,0 @@ } |
@@ -1,2 +0,2 @@ | ||
"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 Card=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Card,_React$PureComponent);function Card(){(0,_classCallCheck2["default"])(this,Card);return(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(Card).apply(this,arguments))}(0,_createClass2["default"])(Card,[{key:"render",value:function render(){var _ref=this.props,Tag=_ref.as,children=_ref.children,className=_ref.className,horizontal=_ref.horizontal,id=_ref.id,image=_ref.image,title=_ref.title,TitleTag=_ref.titleTag,innerRef=_ref.innerRef,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","children","className","horizontal","id","image","title","titleTag","innerRef"]);// eslint-disable-line no-empty-pattern | ||
var classes=(0,_classnames["default"])(className,"bom-card ",{"bom-card--horizontal":horizontal,"bom-card--with-image":image,"bom-card--no-image":!image});return _react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,"aria-label":title,"aria-describedby":id,ref:innerRef},restProps),image&&_react["default"].createElement("div",{className:"bom-card__img"},_react["default"].createElement("div",{className:"bom-card__img-container"},image)),_react["default"].createElement("div",{className:"bom-card__text"},_react["default"].createElement(TitleTag,{className:"bom-card__title"},title,!image&&_react["default"].createElement(_icon.SystemIcon,{className:"bom-card__icon",size:16,icon:_ArrowRight["default"],"aria-hidden":true})),children&&_react["default"].createElement("div",{id:id,className:"bom-card__desc"},children)))}}]);return Card}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Card,"defaultProps",{as:"a",titleTag:"h3"});var CardWithRef=_react["default"].forwardRef(function(props,ref){return _react["default"].createElement(Card,(0,_extends2["default"])({innerRef:ref},props))});CardWithRef.displayName="Card";var _default=CardWithRef;exports["default"]=_default; | ||
"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 Card=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Card,_React$PureComponent);function Card(){(0,_classCallCheck2["default"])(this,Card);return(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(Card).apply(this,arguments))}(0,_createClass2["default"])(Card,[{key:"render",value:function render(){var _ref=this.props,Tag=_ref.as,children=_ref.children,className=_ref.className,horizontal=_ref.horizontal,id=_ref.id,icon=_ref.icon,image=_ref.image,title=_ref.title,TitleTag=_ref.titleTag,innerRef=_ref.innerRef,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","children","className","horizontal","id","icon","image","title","titleTag","innerRef"]);// eslint-disable-line no-empty-pattern | ||
var classes=(0,_classnames["default"])(className,"bom-card ",{"bom-card--horizontal":horizontal,"bom-card--with-image":image,"bom-card--no-image":!image});return _react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,"aria-label":title,"aria-describedby":id,ref:innerRef},restProps),image&&_react["default"].createElement("div",{className:"bom-card__img"},_react["default"].createElement("div",{className:"bom-card__img-container"},image)),_react["default"].createElement("div",{className:"bom-card__text"},_react["default"].createElement(TitleTag,{className:"bom-card__title"},title,!image&&_react["default"].createElement(_icon.SystemIcon,{className:"bom-card__icon",size:16,icon:icon||_ArrowRight["default"],"aria-hidden":true})),children&&_react["default"].createElement("div",{id:id,className:"bom-card__desc"},children)))}}]);return Card}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Card,"defaultProps",{as:"a",titleTag:"h3"});var CardWithRef=_react["default"].forwardRef(function(props,ref){return _react["default"].createElement(Card,(0,_extends2["default"])({innerRef:ref},props))});CardWithRef.displayName="Card";var _default=CardWithRef;exports["default"]=_default; |
{ | ||
"name": "@ausbom/card", | ||
"version": "0.1.6", | ||
"version": "0.2.0", | ||
"description": "", | ||
@@ -44,3 +44,3 @@ "keywords": [], | ||
}, | ||
"gitHead": "047d8c8a58c3e456426ee79050127a02338ca85e" | ||
"gitHead": "7b9c90b1a4384ae448bd2ec60cd1bcdcffc0d7b4" | ||
} |
@@ -5,4 +5,4 @@ # @ausbom/card | ||
> When cards don’t include an image they should use a title with description text as mandatory fields. They also include an arrow to indicate it is clickable. | ||
> Use this card type sparingly for specific components, such as a group of child links. The description has a max of 160 characters. | ||
When cards don’t include an image they should use a title with description text as mandatory fields. They also include an arrow to indicate it is clickable. | ||
Use this card type sparingly for specific components, such as a group of child links. The description has a max of 160 characters. | ||
### Installation | ||
@@ -20,2 +20,3 @@ | ||
import image from './image.png' | ||
import ExternalLink16 from '@ausbom/icon/lib/icons/system/ExternalLink16' | ||
@@ -34,2 +35,3 @@ <Card | ||
titleTag="h4" | ||
icon={ExternalLink16} | ||
> | ||
@@ -36,0 +38,0 @@ <p>The Bureau strives to be the model of an inclusive culture where diversity is valued to provide better outcomes for our people, customers and the community. </p> |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
13493
25
39