mineral-ui - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

Card/CardTitle.js

@@ -83,15 +83,14 @@ 'use strict';
     var theme = componentTheme(baseTheme);
-    var size = subtitle ? theme.CardTitleAvatarSize_large : theme.CardTitleAvatarSize;
     var rtl = theme.direction === 'rtl';
+    var width = subtitle ? theme.CardTitleAvatarSize_large : theme.CardTitleAvatarSize;
 
     return {
-      borderRadius: parseFloat(size) / 2 + 'em',
       flex: '0 0 auto',
-      height: size,
       marginLeft: rtl ? theme.CardTitleAvatar_margin : null,
       marginRight: rtl ? null : theme.CardTitleAvatar_margin,
-      width: size,
+      width: width,
 
-      '& > *': {
-        maxWidth: '100%'
+      '&[class] > *': {
+        height: 'auto',
+        width: '100%'
       }
@@ -98,0 +97,0 @@ };

Card/index.js

@@ -61,2 +61,11 @@ 'use strict';
 
+var _CardStatus = require('./CardStatus');
+
+Object.defineProperty(exports, 'CardStatus', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CardStatus).default;
+  }
+});
+
 var _CardTitle = require('./CardTitle');
@@ -63,0 +72,0 @@

CHANGELOG.md

@@ -0,1 +1,19 @@
+<a name="0.17.0"></a>
+# [0.17.0](https://github.com/mineral-ui/mineral-ui/compare/v0.16.0...v0.17.0) (2018-01-17)
+
+
+### Features
+
+* **avatar:** New component ([dcfb069](https://github.com/mineral-ui/mineral-ui/commit/dcfb069))
+* **card:** Add CardStatus and associated Icons ([3b84fdd](https://github.com/mineral-ui/mineral-ui/commit/3b84fdd))
+* **card:** Update CardTitle `avatar` prop to accept Avatar ([2f575e0](https://github.com/mineral-ui/mineral-ui/commit/2f575e0))
+* **colors:** Add getColor & getReadableTextColor utilities ([f35beb6](https://github.com/mineral-ui/mineral-ui/commit/f35beb6))
+
+
+### BREAKING CHANGES
+
+* **card:** `avatar` prop only accepts Avatar component rather than a raw `img`
+
+
+
 <a name="0.16.0"></a>
@@ -2,0 +20,0 @@ # [0.16.0](https://github.com/mineral-ui/mineral-ui/compare/v0.15.0...v0.16.0) (2018-01-12)

colors/blue.js

@@ -32,3 +32,5 @@ 'use strict';
   blue_90: '#114091',
-  blue_100: '#0f397d'
+  blue_100: '#0f397d',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

colors/dusk.js

@@ -32,3 +32,5 @@ 'use strict';
   dusk_90: '#2c3247',
-  dusk_100: '#24293b'
+  dusk_100: '#24293b',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

colors/gray.js

@@ -32,3 +32,5 @@ 'use strict';
   gray_90: '#434a54',
-  gray_100: '#333840'
+  gray_100: '#333840',
+
+  a11y_text_light: [80, 90, 100]
 };

colors/green.js

@@ -32,3 +32,5 @@ 'use strict';
   green_90: '#06783f',
-  green_100: '#046132'
+  green_100: '#046132',
+
+  a11y_text_light: [90, 100]
 };

colors/index.js

@@ -151,2 +151,20 @@ 'use strict';
 
+var _getColor = require('./getColor');
+
+Object.defineProperty(exports, 'getColor', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_getColor).default;
+  }
+});
+
+var _getReadableTextColor = require('./getReadableTextColor');
+
+Object.defineProperty(exports, 'getReadableTextColor', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_getReadableTextColor).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

colors/indigo.js

@@ -32,3 +32,5 @@ 'use strict';
   indigo_90: '#2621a6',
-  indigo_100: '#201d8f'
+  indigo_100: '#201d8f',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

colors/lime.js

@@ -21,3 +21,2 @@ 'use strict';
  */
-
 exports.default = {
@@ -33,3 +32,5 @@ lime_10: '#f1fae6',
   lime_90: '#4a8c08',
-  lime_100: '#3d7307'
+  lime_100: '#3d7307',
+
+  a11y_text_light: [100]
 };

colors/magenta.js

@@ -32,3 +32,5 @@ 'use strict';
   magenta_90: '#a1083b',
-  magenta_100: '#8d0633'
+  magenta_100: '#8d0633',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

colors/orange.js

@@ -32,3 +32,5 @@ 'use strict';
   orange_90: '#a83207',
-  orange_100: '#942c06'
+  orange_100: '#942c06',
+
+  a11y_text_light: [70, 80, 90, 100]
 };

colors/purple.js

@@ -32,3 +32,5 @@ 'use strict';
   purple_90: '#5f248f',
-  purple_100: '#511f7a'
+  purple_100: '#511f7a',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

colors/red.js

@@ -32,3 +32,5 @@ 'use strict';
   red_90: '#940909',
-  red_100: '#7d0606'
+  red_100: '#7d0606',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

colors/sky.js

@@ -32,3 +32,5 @@ 'use strict';
   sky_90: '#0a6091',
-  sky_100: '#084d75'
+  sky_100: '#084d75',
+
+  a11y_text_light: [80, 90, 100]
 };

colors/slate.js

@@ -32,3 +32,5 @@ 'use strict';
   slate_90: '#2e444f',
-  slate_100: '#253740'
+  slate_100: '#253740',
+
+  a11y_text_light: [70, 80, 90, 100]
 };

colors/teal.js

@@ -32,3 +32,5 @@ 'use strict';
   teal_90: '#0c7567',
-  teal_100: '#0a6358'
+  teal_100: '#0a6358',
+
+  a11y_text_light: [90, 100]
 };

colors/yellow.js

@@ -32,3 +32,5 @@ 'use strict';
   yellow_90: '#a67305',
-  yellow_100: '#916504'
+  yellow_100: '#916504',
+
+  a11y_text_light: [100]
 };

es/Card/CardTitle.js

@@ -60,15 +60,14 @@ var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();
     var theme = componentTheme(baseTheme);
-    var size = subtitle ? theme.CardTitleAvatarSize_large : theme.CardTitleAvatarSize;
     var rtl = theme.direction === 'rtl';
+    var width = subtitle ? theme.CardTitleAvatarSize_large : theme.CardTitleAvatarSize;
 
     return {
-      borderRadius: parseFloat(size) / 2 + 'em',
       flex: '0 0 auto',
-      height: size,
       marginLeft: rtl ? theme.CardTitleAvatar_margin : null,
       marginRight: rtl ? null : theme.CardTitleAvatar_margin,
-      width: size,
+      width: width,
 
-      '& > *': {
-        maxWidth: '100%'
+      '&[class] > *': {
+        height: 'auto',
+        width: '100%'
       }
@@ -75,0 +74,0 @@ };

es/Card/index.js

@@ -23,3 +23,4 @@ /**
 export { default as CardImage } from './CardImage';
+export { default as CardStatus } from './CardStatus';
 export { default as CardTitle } from './CardTitle';
 export { default as CardTitleMenu } from './CardTitleMenu';

es/colors/blue.js

@@ -27,3 +27,5 @@ /**
   blue_90: '#114091',
-  blue_100: '#0f397d'
+  blue_100: '#0f397d',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

es/colors/dusk.js

@@ -27,3 +27,5 @@ /**
   dusk_90: '#2c3247',
-  dusk_100: '#24293b'
+  dusk_100: '#24293b',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

es/colors/gray.js

@@ -27,3 +27,5 @@ /**
   gray_90: '#434a54',
-  gray_100: '#333840'
+  gray_100: '#333840',
+
+  a11y_text_light: [80, 90, 100]
 };

es/colors/green.js

@@ -27,3 +27,5 @@ /**
   green_90: '#06783f',
-  green_100: '#046132'
+  green_100: '#046132',
+
+  a11y_text_light: [90, 100]
 };

es/colors/index.js

@@ -32,2 +32,5 @@ /**
 export { default as teal } from './teal';
-export { default as yellow } from './yellow';
+export { default as yellow } from './yellow';
+
+export { default as getColor } from './getColor';
+export { default as getReadableTextColor } from './getReadableTextColor';

es/colors/indigo.js

@@ -27,3 +27,5 @@ /**
   indigo_90: '#2621a6',
-  indigo_100: '#201d8f'
+  indigo_100: '#201d8f',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

es/colors/lime.js

@@ -16,3 +16,2 @@ /**
  */
-
 export default {
@@ -28,3 +27,5 @@ lime_10: '#f1fae6',
   lime_90: '#4a8c08',
-  lime_100: '#3d7307'
+  lime_100: '#3d7307',
+
+  a11y_text_light: [100]
 };

es/colors/magenta.js

@@ -27,3 +27,5 @@ /**
   magenta_90: '#a1083b',
-  magenta_100: '#8d0633'
+  magenta_100: '#8d0633',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

es/colors/orange.js

@@ -27,3 +27,5 @@ /**
   orange_90: '#a83207',
-  orange_100: '#942c06'
+  orange_100: '#942c06',
+
+  a11y_text_light: [70, 80, 90, 100]
 };

es/colors/purple.js

@@ -27,3 +27,5 @@ /**
   purple_90: '#5f248f',
-  purple_100: '#511f7a'
+  purple_100: '#511f7a',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

es/colors/red.js

@@ -27,3 +27,5 @@ /**
   red_90: '#940909',
-  red_100: '#7d0606'
+  red_100: '#7d0606',
+
+  a11y_text_light: [60, 70, 80, 90, 100]
 };

es/colors/sky.js

@@ -27,3 +27,5 @@ /**
   sky_90: '#0a6091',
-  sky_100: '#084d75'
+  sky_100: '#084d75',
+
+  a11y_text_light: [80, 90, 100]
 };

es/colors/slate.js

@@ -27,3 +27,5 @@ /**
   slate_90: '#2e444f',
-  slate_100: '#253740'
+  slate_100: '#253740',
+
+  a11y_text_light: [70, 80, 90, 100]
 };

es/colors/teal.js

@@ -27,3 +27,5 @@ /**
   teal_90: '#0c7567',
-  teal_100: '#0a6358'
+  teal_100: '#0a6358',
+
+  a11y_text_light: [90, 100]
 };

es/colors/yellow.js

@@ -27,3 +27,5 @@ /**
   yellow_90: '#a67305',
-  yellow_100: '#916504'
+  yellow_100: '#916504',
+
+  a11y_text_light: [100]
 };

es/index.js

@@ -17,4 +17,5 @@ /**
 
+export { default as Avatar } from './Avatar';
 export { default as Button } from './Button';
-export { default as Card, CardBlock, CardImage, CardTitle } from './Card';
+export { default as Card, CardBlock, CardImage, CardStatus, CardTitle } from './Card';
 export { default as Dropdown } from './Dropdown';
@@ -21,0 +22,0 @@ export { FormField, FormFieldset, FormFieldDivider } from './Form';

index.js

@@ -7,2 +7,11 @@ 'use strict';
 
+var _Avatar = require('./Avatar');
+
+Object.defineProperty(exports, 'Avatar', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Avatar).default;
+  }
+});
+
 var _Button = require('./Button');
@@ -37,2 +46,8 @@
 });
+Object.defineProperty(exports, 'CardStatus', {
+  enumerable: true,
+  get: function get() {
+    return _Card.CardStatus;
+  }
+});
 Object.defineProperty(exports, 'CardTitle', {
@@ -39,0 +54,0 @@ enumerable: true,

package.json

@@ -5,3 +5,3 @@ {
   "description": "Mineral UI component library",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
@@ -8,0 +8,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

818809

increased by8.16%

Number of package files

190

increased by10.47%

Lines of code

13268

increased by7.35%

No dependency changes