@ausbom/typography - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+<a name="0.2.0"></a>
+# [0.2.0](https://github.com/AusBOM/bom-design-system/compare/@ausbom/typography@0.1.3...@ausbom/typography@0.2.0) (2019-10-21)
+
+
+### Bug Fixes
+
+* fixes issues identified by pa11y ([31b5a60](https://github.com/AusBOM/bom-design-system/commit/31b5a60))
+
+
+### Features
+
+* adds body (rich text) styling ([9df2967](https://github.com/AusBOM/bom-design-system/commit/9df2967))
+* adds JSX and HTML example component to design system website ([2a232b5](https://github.com/AusBOM/bom-design-system/commit/2a232b5))
+* adds new typography and sass patterns ([c037f6b](https://github.com/AusBOM/bom-design-system/commit/c037f6b))
+* adds type scale mixin and updates typography mixin to use it ([a3bb8b6](https://github.com/AusBOM/bom-design-system/commit/a3bb8b6))
+* refactors sass structure ([eeaef5b](https://github.com/AusBOM/bom-design-system/commit/eeaef5b))
+* updates plop generator ([bf9fbd4](https://github.com/AusBOM/bom-design-system/commit/bf9fbd4))
+* **header:** adds first pass at header components ([7d5e083](https://github.com/AusBOM/bom-design-system/commit/7d5e083))
+
+
+
+
+
 ## [0.1.3](https://github.com/AusBOM/bom-design-system/compare/@ausbom/typography@0.1.2...@ausbom/typography@0.1.3) (2019-07-12)
@@ -8,0 +31,0 @@

lib/fontProvider.js

@@ -1,2 +0,2 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.loadFonts=exports["default"]=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _defaultTheme=require("./defaultTheme");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){keys.push.apply(keys,Object.getOwnPropertySymbols(object))}if(enumerableOnly)keys=keys.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(source,true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}var fontProvider=/*#__PURE__*/function(){function fontProvider(){(0,_classCallCheck2["default"])(this,fontProvider)}(0,_createClass2["default"])(fontProvider,null,[{key:"getStatus",value:function getStatus(){return fontProvider.status}},{key:"setStatus",value:function setStatus(nextStatus){return Object.assign(fontProvider.status,_objectSpread({},nextStatus))}},{key:"checkFonts",value:function checkFonts(){var _fontProvider$getStat=fontProvider.getStatus(),active=_fontProvider$getStat.active,inactive=_fontProvider$getStat.inactive,loading=_fontProvider$getStat.loading;if(typeof Window==="undefined"){console.warn("Typography: can not load fonts, window is not defined");return false}if(inactive){return false}if(!active&&!loading){fontProvider.loadFonts()}return true}},{key:"loadFonts",value:function(){var _loadFonts=(0,_asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(){return _regenerator["default"].wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:return _context.abrupt("return",new Promise(function(resolve,reject){var WebFont=require("webfontloader");// eslint-disable-line global-require
-var WebFontTypographyConfig=Object.assign({active:function active(){resolve(fontProvider.setStatus({active:true,inactive:false,loading:false}))},inactive:function inactive(){reject(fontProvider.setStatus({active:false,inactive:true,loading:false}))},loading:function loading(){fontProvider.setStatus({active:false,inactive:false,loading:true})}},_defaultTheme.WebFontConfig);WebFont.load(WebFontTypographyConfig)}));case 1:case"end":return _context.stop();}}},_callee)}));function loadFonts(){return _loadFonts.apply(this,arguments)}return loadFonts}()}]);return fontProvider}();exports["default"]=fontProvider;(0,_defineProperty2["default"])(fontProvider,"status",{active:false,inactive:false,loading:false});var loadFonts=function loadFonts(){return fontProvider.loadFonts()};exports.loadFonts=loadFonts;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.loadFonts=exports["default"]=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){keys.push.apply(keys,Object.getOwnPropertySymbols(object))}if(enumerableOnly)keys=keys.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(source,true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}var webFontConfig={custom:{families:["Inter:n4,n6"],urls:["https://rsms.me/inter/inter.css"]},google:{families:["Rubik:300,400,500,600","Open Sans"]}};var fontProvider=/*#__PURE__*/function(){function fontProvider(){(0,_classCallCheck2["default"])(this,fontProvider)}(0,_createClass2["default"])(fontProvider,null,[{key:"getStatus",value:function getStatus(){return fontProvider.status}},{key:"setStatus",value:function setStatus(nextStatus){return Object.assign(fontProvider.status,_objectSpread({},nextStatus))}},{key:"checkFonts",value:function checkFonts(){var _fontProvider$getStat=fontProvider.getStatus(),active=_fontProvider$getStat.active,inactive=_fontProvider$getStat.inactive,loading=_fontProvider$getStat.loading;if(typeof Window==="undefined"){console.warn("Typography: can not load fonts, window is not defined");return false}if(inactive){return false}if(!active&&!loading){fontProvider.loadFonts()}return true}},{key:"loadFonts",value:function(){var _loadFonts=(0,_asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(){return _regenerator["default"].wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:return _context.abrupt("return",new Promise(function(resolve,reject){var WebFont=require("webfontloader");// eslint-disable-line global-require
+var WebFontTypographyConfig=Object.assign({active:function active(){resolve(fontProvider.setStatus({active:true,inactive:false,loading:false}))},inactive:function inactive(){reject(fontProvider.setStatus({active:false,inactive:true,loading:false}))},loading:function loading(){fontProvider.setStatus({active:false,inactive:false,loading:true})}},webFontConfig);WebFont.load(WebFontTypographyConfig)}));case 1:case"end":return _context.stop();}}},_callee)}));function loadFonts(){return _loadFonts.apply(this,arguments)}return loadFonts}()}]);return fontProvider}();exports["default"]=fontProvider;(0,_defineProperty2["default"])(fontProvider,"status",{active:false,inactive:false,loading:false});var loadFonts=function loadFonts(){return fontProvider.loadFonts()};exports.loadFonts=loadFonts;

lib/index.d.ts

 export { default } from './Typography'
-export { fontGrid } from './defaultTheme'
 export { loadFonts } from './fontProvider'

lib/index.js

@@ -1,1 +0,1 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function get(){return _Typography["default"]}});Object.defineProperty(exports,"fontGrid",{enumerable:true,get:function get(){return _defaultTheme.fontGrid}});Object.defineProperty(exports,"loadFonts",{enumerable:true,get:function get(){return _fontProvider.loadFonts}});var _Typography=_interopRequireDefault(require("./Typography"));var _defaultTheme=require("./defaultTheme");var _fontProvider=require("./fontProvider");
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function get(){return _Typography["default"]}});Object.defineProperty(exports,"loadFonts",{enumerable:true,get:function get(){return _fontProvider.loadFonts}});var _Typography=_interopRequireDefault(require("./Typography"));var _fontProvider=require("./fontProvider");

lib/Typography.d.ts

 import React from 'react'
 
-import {
-  LineTypes, // eslint-disable-line no-unused-vars
-  SizeTypes, // eslint-disable-line no-unused-vars
-} from './defaultTheme.d'
+export type Styles =
+  'heading-xxl' |
+  'heading-xl' |
+  'heading-l' |
+  'heading-m' |
+  'heading-s' |
+  'heading-xs' |
+  'heading-xxs' |
+  'intro' |
+  'body' |
+  'body-bold' |
+  'body-s' |
+  'body-s-bold' |
+  'caption'
 
-export { ITypographyOverrideTheme as ITypographyThemeProps } from './defaultTheme.d'
-
 export interface IState {
@@ -14,10 +22,11 @@ }
 export interface IProps {
-  children?: JSX.Element[] | string
-  className?: string
-  line?: LineTypes
-  size?: SizeTypes
+  as: React.ElementType,
+  styleName: Styles,
+  dark: boolean,
+  isLarge: boolean,
+  isResponsive: boolean,
+  children: React.ReactNode,
 }
 
 export interface IDefaultProps {
-  theme?: any
 }
@@ -24,0 +33,0 @@

lib/Typography.js

@@ -1,2 +0,2 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;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 _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _defaultTheme=require("./defaultTheme");var _fontProvider=_interopRequireDefault(require("./fontProvider"));var Style=_styledComponents["default"].div.withConfig({displayName:"Typography__Style",componentId:"x23726-0"})(["",""],function(props){var line=props.line,size=props.size,theme=props.theme;var typography=theme.typography;return(0,_defaultTheme.fontGrid)(size,line,typography)});var Typography=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Typography,_React$PureComponent);function Typography(){var _getPrototypeOf2;var _this;(0,_classCallCheck2["default"])(this,Typography);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=(0,_possibleConstructorReturn2["default"])(this,(_getPrototypeOf2=(0,_getPrototypeOf3["default"])(Typography)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"displayName","Typography");return _this}(0,_createClass2["default"])(Typography,[{key:"componentDidMount",value:function componentDidMount(){// eslint-disable-line class-methods-use-this
-_fontProvider["default"].checkFonts()}},{key:"render",value:function render(){var _ref=this.props,children=_ref.children,className=_ref.className,line=_ref.line,size=_ref.size;return _react["default"].createElement(Style,{className:className,size:size,line:line},children)}}]);return Typography}(_react["default"].PureComponent);exports["default"]=Typography;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.styles=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 styles=["heading-xxl","heading-xl","heading-l","heading-m","heading-s","heading-xs","heading-xxs","intro","body","body-bold","body-s","body-s-bold","caption"];exports.styles=styles;var Typography=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Typography,_React$PureComponent);function Typography(){(0,_classCallCheck2["default"])(this,Typography);return(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(Typography).apply(this,arguments))}(0,_createClass2["default"])(Typography,[{key:"render",value:function render(){var _ref=this.props,Tag=_ref.as,styleName=_ref.styleName,isLarge=_ref.isLarge,isResponsive=_ref.isResponsive,dark=_ref.dark,children=_ref.children,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","styleName","isLarge","isResponsive","dark","children"]);// eslint-disable-line no-empty-pattern
+var classes=(0,_classnames["default"])("bom-typo","bom-typo--s-".concat(styleName),{"bom-typo--dark":dark,"bom-typo--large":isLarge,"bom-typo--responsive":isResponsive});return _react["default"].createElement(Tag,(0,_extends2["default"])({className:classes},restProps),children)}}]);return Typography}(_react["default"].PureComponent);exports["default"]=Typography;(0,_defineProperty2["default"])(Typography,"defaultProps",{as:"div",styleName:"body",isLarge:false,isResponsive:false});

package.json

 {
   "name": "@ausbom/typography",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "",
-  "keywords": [
-    "fonts",
-    "typography"
-  ],
+  "keywords": [],
   "author": "",
@@ -28,3 +25,3 @@ "homepage": "https://beta.design.bom.gov.au/components/typography",
     "build:readme": "../generate-readme.sh",
-    "postbuild": "cp -r ./src/*.d.* ./lib"
+    "postbuild": "copyfiles -u 1 ./src/**/{*.d.*,**/*.scss} ./lib"
   },
@@ -38,14 +35,15 @@ "bugs": {
   "devDependencies": {
-    "@ausbom/babel-preset": "^0.1.1",
+    "@ausbom/babel-preset": "^0.2.0",
+    "@types/classnames": "2.2.9",
     "@types/webfontloader": "1.6.29"
   },
   "peerDependencies": {
-    "react": ">= 16.3.x",
-    "styled-components": ">= 4"
+    "react": ">= 16.3.x"
   },
   "dependencies": {
-    "deepmerge": "4.0.0",
+    "@ausbom/styles": "^0.3.0",
+    "classnames": "2.2.6",
     "webfontloader": "1.6.28"
   },
-  "gitHead": "23b28ea2c23aba31e7b1963ebb4796bc59cba9cc"
+  "gitHead": "f328498dc7f4fd60332199530cfaf5b2113a790e"
 }

README.md

 # @ausbom/typography
+
+> Typography is an important part of creating visual hierarchy. The way information is presented to users is as important as the information itself.
+
 ### Installation
@@ -8,6 +11,54 @@
 
-### Import
+### Usage
 
-```javascript
+Typography can be used via the `bom-typography` Sass mixin or the `Typography` React component. A combination of the two might also suit your project.
+
+#### Sass mixin
+
+```scss
+.my-heading {
+  @include bom-typography(
+    $style-name: 'heading-l',
+    $dark: true,
+    $large: false
+  )
+}
+```
+
+##### Properties
+
+<Property
+  name="$style-name"
+  type="string"
+  required
+  description="The name of the style to be applied"
+  list={styles.join(',')}
+/>
+<Property
+  name="$dark"
+  type="boolean"
+  default="false"
+  description="Dark styles will be applied if true"
+/>
+<Property
+  name="$large"
+  type="boolean"
+  default="false"
+  description="Applies the large screen styles"
+/>
+
+#### React component
+
+```jsx
 import Typography from '@ausbom/typography'
+import React from 'react'
+
+<Typography
+  as="h3"
+  styleName="heading-l"
+  dark
+  isLarge
+>
+  My heading text
+</Typography>
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This 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

Number of package files

12

increased by9.09%

Number of low quality alerts

5

decreased by-16.67%

Number of lines in readme file

64

increased by392.31%

Worsened metrics

Total package byte prevSize

16889

decreased by-1.2%

Dev dependency count

3

increased by50%

Lines of code

65

decreased by-41.96%

Dependency changes

• + Added@ausbom/styles@^0.3.0

• + Addedclassnames@2.2.6

• + Added@ausbom/styles@0.3.0(transitive)

• + Addedclassnames@2.2.6(transitive)

• + Addedddbreakpoints@1.1.3(transitive)

• - Removeddeepmerge@4.0.0

• - Removed@emotion/is-prop-valid@1.2.2(transitive)

• - Removed@emotion/memoize@0.8.1(transitive)

• - Removed@emotion/unitless@0.8.1(transitive)

• - Removed@types/stylis@4.2.5(transitive)

• - Removedcamelize@1.0.1(transitive)

• - Removedcss-color-keywords@1.0.0(transitive)

• - Removedcss-to-react-native@3.2.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.4.38(transitive)

• - Removedpostcss-value-parser@4.2.0(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedshallowequal@1.1.0(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedstyled-components@6.1.13(transitive)

• - Removedstylis@4.3.2(transitive)

• - Removedtslib@2.6.2(transitive)