@roo-ui/components - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="0.8.0"></a>
+# [0.8.0](https://github.com/hooroo/roo-ui/compare/v0.7.0...v0.8.0) (2018-05-11)
+
+
+### Features
+
+* add block button variant ([#19](https://github.com/hooroo/roo-ui/issues/19)) ([c4cb47a](https://github.com/hooroo/roo-ui/commit/c4cb47a))
+
+
+
+
 <a name="0.7.0"></a>
@@ -8,0 +19,0 @@ # [0.7.0](https://github.com/hooroo/roo-ui/compare/v0.6.4...v0.7.0) (2018-05-11)

dist/Button/Button.js

@@ -5,4 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  margin: 0;\n  padding: ', ' ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  letter-spacing: ', ';\n  line-height: ', ';\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  border: ', ';\n  border-color: transparent;\n  border-radius: ', ';\n  outline: 0;\n  transition: ', ';\n  cursor: pointer;\n  appearance: none;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover:not(:disabled) {\n    background-color: ', ';\n  }\n\n  &:focus {\n    box-shadow: ', ';\n  }\n\n  &:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  ', '\n'], ['\n  display: inline-block;\n  margin: 0;\n  padding: ', ' ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  letter-spacing: ', ';\n  line-height: ', ';\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  border: ', ';\n  border-color: transparent;\n  border-radius: ', ';\n  outline: 0;\n  transition: ', ';\n  cursor: pointer;\n  appearance: none;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover:not(:disabled) {\n    background-color: ', ';\n  }\n\n  &:focus {\n    box-shadow: ', ';\n  }\n\n  &:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  ', '\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    border-radius: ', ';\n  '], ['\n    border-radius: ', ';\n  ']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  margin: 0;\n  padding: ', ' ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  letter-spacing: ', ';\n  line-height: ', ';\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  border: ', ';\n  border-color: transparent;\n  border-radius: ', ';\n  outline: 0;\n  transition: ', ';\n  cursor: pointer;\n  appearance: none;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover:not(:disabled) {\n    background-color: ', ';\n  }\n\n  &:focus {\n    box-shadow: ', ';\n  }\n\n  &:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  ', '\n\n  ', '\n'], ['\n  display: inline-block;\n  margin: 0;\n  padding: ', ' ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  letter-spacing: ', ';\n  line-height: ', ';\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  border: ', ';\n  border-color: transparent;\n  border-radius: ', ';\n  outline: 0;\n  transition: ', ';\n  cursor: pointer;\n  appearance: none;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover:not(:disabled) {\n    background-color: ', ';\n  }\n\n  &:focus {\n    box-shadow: ', ';\n  }\n\n  &:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  ', '\n\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n    border-radius: ', ';\n  '], ['\n    border-radius: ', ';\n  ']),
+    _templateObject3 = _taggedTemplateLiteral(['\n    width: 100%;\n  '], ['\n    width: 100%;\n  ']);
 
@@ -37,2 +38,4 @@ var _styledComponents = require('styled-components');
   return props.rounded && (0, _styledComponents.css)(_templateObject2, (0, _styledSystem.themeGet)('radii.rounded'));
+}, function (props) {
+  return props.block && (0, _styledComponents.css)(_templateObject3);
 });
@@ -42,3 +45,4 @@
   primary: _propTypes2['default'].bool,
-  rounded: _propTypes2['default'].bool
+  rounded: _propTypes2['default'].bool,
+  block: _propTypes2['default'].bool
 });
@@ -45,0 +49,0 @@

dist/Button/Button.story.js

@@ -27,2 +27,3 @@ var _react = require('react');
       rounded: (0, _react4.boolean)('Rounded', false),
+      block: (0, _react4.boolean)('Block', false),
       disabled: (0, _react4.boolean)('Disabled', false)
@@ -29,0 +30,0 @@ },

dist/Button/Button.test.js

@@ -57,2 +57,16 @@ var _react = require('react');
   });
+
+  describe('block', function () {
+    beforeEach(function () {
+      wrapper = (0, _testUtils.shallowWithTheme)(_react2['default'].createElement(
+        _2['default'],
+        { block: true },
+        'Hello world'
+      ), _themes.qantas);
+    });
+
+    it('renders correctly', function () {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });

package.json

 {
   "name": "@roo-ui/components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "publishConfig": {

src/Button/Button.js

@@ -50,2 +50,6 @@ import styled, { css } from 'styled-components';
   `}
+
+  ${props => props.block && css`
+    width: 100%;
+  `}
 `;
@@ -60,2 +64,3 @@
   rounded: PropTypes.bool,
+  block: PropTypes.bool,
 };
@@ -62,0 +67,0 @@

src/Button/Button.story.js

@@ -15,2 +15,3 @@ import React from 'react';
       rounded={boolean('Rounded', false)}
+      block={boolean('Block', false)}
       disabled={boolean('Disabled', false)}
@@ -17,0 +18,0 @@ >

src/Button/Button.test.js

@@ -37,2 +37,12 @@ import React from 'react';
   });
+
+  describe('block', () => {
+    beforeEach(() => {
+      wrapper = shallowWithTheme(<Button block>Hello world</Button>, theme);
+    });
+
+    it('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });

src/Button/README.md

@@ -23,7 +23,8 @@ # Button
 
-| Name       | Description           | Type   | Default | Required? |
-|:-----------|:----------------------|:-------|:--------|:----------|
-| `primary`  | use the primary color | `bool` | false   | -         |
-| `rounded`  | use a rounded border  | `bool` | false   | -         |
-| `disabled` | disable the button    | `bool` | false   | -         |
+| Name       | Description                | Type   | Default | Required? |
+|:-----------|:---------------------------|:-------|:--------|:----------|
+| `primary`  | use the primary color      | `bool` | false   | -         |
+| `rounded`  | use a rounded border       | `bool` | false   | -         |
+| `block`    | render a full width button | `bool` | false   | -         |
+| `disabled` | disable the button         | `bool` | false   | -         |
 
@@ -30,0 +31,0 @@ ## Customization

No alert changes

Improved metrics

Total package byte prevSize

132558

increased by2.13%

Lines of code

2535

increased by1.2%

No dependency changes