@ausbom/card
Advanced tools
@ausbom/card - npm Package Compare versions
Comparing version 0.6.1 to 0.7.0
@@ -6,2 +6,14 @@ # Change Log | ||
| <a name="0.7.0"></a> | ||
| # [0.7.0](https://github.com/AusBOM/bom-design-system/compare/@ausbom/card@0.6.1...@ausbom/card@0.7.0) (2020-05-26) | ||
| ### Features | ||
| * **card:** re-factored card and media-card on component ([415336e](https://github.com/AusBOM/bom-design-system/commit/415336e)) | ||
| <a name="0.6.1"></a> | ||
@@ -8,0 +20,0 @@ ## [0.6.1](https://github.com/AusBOM/bom-design-system/compare/@ausbom/card@0.6.0...@ausbom/card@0.6.1) (2020-05-05) |
@@ -6,2 +6,3 @@ import React from 'react' | ||
| className?: string | ||
| hideImageOnMobile?: boolean // TODO: Remove this later | ||
| horizontal?: boolean | ||
@@ -11,4 +12,4 @@ icon?: React.ElementType | ||
| image?: object | ||
| hideImageOnMobile?: boolean | ||
| innerRef?: React.RefObject<any> | ||
| meta?: Array<string> | ||
| title?: string | ||
@@ -15,0 +16,0 @@ titleTag?: React.ElementType |
@@ -1,1 +0,4 @@ | ||
| "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,hideImageOnMobile=_ref.hideImageOnMobile,title=_ref.title,TitleTag=_ref.titleTag,innerRef=_ref.innerRef,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","children","className","horizontal","id","icon","image","hideImageOnMobile","title","titleTag","innerRef"]);var classes=(0,_classnames["default"])(className,"bom-card ",{"bom-card--stacked":!horizontal,"bom-card--with-image":image,"bom-card--hide-image-mobile":hideImageOnMobile});return _react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,"aria-describedby":children?id:undefined,ref:innerRef},restProps),image&&_react["default"].createElement("div",{className:"bom-card__img"},image),_react["default"].createElement("div",{className:"bom-card__text"},_react["default"].createElement(TitleTag,{className:"bom-card__title"},title,_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",hideImageOnMobile:false});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,hideImageBelow=_ref.hideImageBelow,hideImageOnMobile=_ref.hideImageOnMobile,horizontal=_ref.horizontal,icon=_ref.icon,id=_ref.id,image=_ref.image,innerRef=_ref.innerRef,meta=_ref.meta,title=_ref.title,TitleTag=_ref.titleTag,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","children","className","hideImageBelow","hideImageOnMobile","horizontal","icon","id","image","innerRef","meta","title","titleTag"]);// TODO: remove this when bom-react has been updated | ||
| if(hideImageOnMobile){console.warn("hideImageOnMobile will be depricated the next major release of Card. Use hideImageBelow")}var classes=(0,_classnames["default"])(className,"bom-card ",{"bom-card--hide-image-mobile":hideImageOnMobile,// TODO: remove this when bom-react has been updated | ||
| "bom-card--stacked":!horizontal,"bom-card--with-image":!!image});var imageClasses=(0,_classnames["default"])("bom-card__img",(0,_defineProperty2["default"])({},"bom-hide-below-".concat(hideImageBelow),!!hideImageBelow));var metaItems=_react["default"].Children.map(meta,function(data){return _react["default"].createElement("div",{className:"bom-card-meta__item"},data)});return _react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,"aria-describedby":children?id:undefined,ref:innerRef},restProps),image&&_react["default"].createElement("div",{className:imageClasses},image),_react["default"].createElement("div",{className:"bom-card__text"},_react["default"].createElement(TitleTag,{className:"bom-card__title"},title,_react["default"].createElement(_icon.SystemIcon,{className:"bom-card__icon",size:16,icon:icon||_ArrowRight["default"],"aria-hidden":true})),meta&&meta.length>0&&_react["default"].createElement("div",{className:"bom-card-meta"},metaItems),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",hideImageOnMobile:false// TODO: Remove this later | ||
| });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; |
@@ -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 _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));var MediaCard=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(MediaCard,_React$PureComponent);function MediaCard(){(0,_classCallCheck2["default"])(this,MediaCard);return(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(MediaCard).apply(this,arguments))}(0,_createClass2["default"])(MediaCard,[{key:"render",value:function render(){var _ref=this.props,Tag=_ref.as,className=_ref.className,id=_ref.id,image=_ref.image,hideImageBelow=_ref.hideImageBelow,title=_ref.title,TitleTag=_ref.titleTag,horizontal=_ref.horizontal,meta=_ref.meta,innerRef=_ref.innerRef,children=_ref.children,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","className","id","image","hideImageBelow","title","titleTag","horizontal","meta","innerRef","children"]);// eslint-disable-line no-empty-pattern | ||
| "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 _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));var MediaCard=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(MediaCard,_React$PureComponent);function MediaCard(props){var _this;(0,_classCallCheck2["default"])(this,MediaCard);_this=(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(MediaCard).call(this,props));console.warn("".concat(_this.constructor.name," has been depricated, please import and use the default Card component instead"));return _this}(0,_createClass2["default"])(MediaCard,[{key:"render",value:function render(){var _ref=this.props,Tag=_ref.as,className=_ref.className,id=_ref.id,image=_ref.image,hideImageBelow=_ref.hideImageBelow,title=_ref.title,TitleTag=_ref.titleTag,horizontal=_ref.horizontal,meta=_ref.meta,innerRef=_ref.innerRef,children=_ref.children,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","className","id","image","hideImageBelow","title","titleTag","horizontal","meta","innerRef","children"]);// eslint-disable-line no-empty-pattern | ||
| var classes=(0,_classnames["default"])(className,"bom-media-card",{"bom-media-card--stacked":!horizontal,"bom-media-card--with-image":!!image});var imageClasses=(0,_classnames["default"])("bom-media-card__img",(0,_defineProperty2["default"])({},"bom-hide-below-".concat(hideImageBelow),!!hideImageBelow));var metaItems=_react["default"].Children.map(meta,function(data){return _react["default"].createElement("div",{className:"bom-media-card-meta__item"},data)});return _react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,"aria-describedby":meta?id:undefined,ref:innerRef},restProps),image&&_react["default"].createElement("div",{className:imageClasses},image),_react["default"].createElement("div",{role:"text",className:"bom-media-card__text"},_react["default"].createElement(TitleTag,{className:"bom-media-card__title"},title),meta&&meta.length>0&&_react["default"].createElement("div",{className:"bom-media-card-meta"},metaItems),children&&_react["default"].createElement("div",{id:id,className:"bom-media-card__desc"},children)))}}]);return MediaCard}(_react["default"].PureComponent);(0,_defineProperty2["default"])(MediaCard,"defaultProps",{as:"a",titleTag:"h3",horizontal:false});var MediaCardWithRef=_react["default"].forwardRef(function(props,ref){return _react["default"].createElement(MediaCard,(0,_extends2["default"])({innerRef:ref},props))});MediaCardWithRef.displayName="MediaCard";var _default=MediaCardWithRef;exports["default"]=_default; |
| { | ||
| "name": "@ausbom/card", | ||
| "version": "0.6.1", | ||
| "version": "0.7.0", | ||
| "description": "", | ||
@@ -46,3 +46,3 @@ "keywords": [], | ||
| }, | ||
| "gitHead": "5786d4f1be78f60ae50997e5013dfe7676f6a705" | ||
| "gitHead": "be1e5aab57e3cc9b03b4fbfd1cdba46ec4bb9d3b" | ||
| } |
| # @ausbom/card | ||
| > Cards represent a unit of information and can consist of a title, image and description. | ||
| > Cards represent a unit of information and can consist of a title, image, description and meta data about media. | ||
| 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. | ||
| 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. | ||
@@ -39,26 +39,1 @@ ### Installation | ||
| ``` | ||
| > Media cards represent a piece of media and can consist of a title, image and meta data about the media. | ||
| ### Installation | ||
| ```bash | ||
| npm install @ausbom/card | ||
| ``` | ||
| ### Usage | ||
| ```javascript | ||
| import { MediaCard } from '@ausbom/card' | ||
| import React from 'react' | ||
| import image from './image.png' | ||
| import ExternalLink16 from '@ausbom/icon/lib/icons/system/ExternalLink16' | ||
| <MediaCard | ||
| id="card1" | ||
| title="Card title" | ||
| image={(<img src="/my/image" />)} | ||
| meta={['2 mins read', '25 Jun 2019']} | ||
| href="/link/to/media" | ||
| /> | ||
| ``` |
Sorry, the diff of this file is not supported yet
New alerts
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 2 instances in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.25%
29205
- Lines of code
- increased by38.64%
61
- Number of low quality alerts
- decreased by-20%
4
Worsened metrics
- Number of lines in readme file
- decreased by-39.06%
39
No dependency changes