@comicrelief/component-library 8.7.0 → 8.8.0

package/dist/components/Atoms/Button/Button.js

@@ -12,7 +12,7 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1gm5vj0-0"
-})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}@media ", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
+})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:", ";}@media ", "{width:", ";padding:", " ", ";margin:0 auto ", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -30,23 +30,37 @@ const StyledButton = _styledComponents.default.button.withConfig({
   return theme.allBreakpoints('M');
 }, _ref4 => {
   let {
-    theme
+    fullWidth
   } = _ref4;
+  return fullWidth ? '100%' : 'auto';
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.allBreakpoints('L');
+}, _ref6 => {
+  let {
+    fullWidth
+  } = _ref6;
+  return fullWidth ? '100%' : 'auto';
 }, (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
     wrapper = false,
+    fullWidth = false,
     ...rest
-  } = _ref5;
+  } = _ref7;
   return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
-    ref: ref
+    ref: ref,
+    fullWidth: fullWidth
   }), children);
 });
 Button.propTypes = {
   children: _propTypes.default.node.isRequired,
-  wrapper: _propTypes.default.bool // Buttons as span
+  wrapper: _propTypes.default.bool,
+  // Buttons as span
+  fullWidth: _propTypes.default.bool
 };
 var _default = exports.default = Button;

package/dist/components/Atoms/Button/Button.md

@@ -5,3 +5,7 @@
 ```js
 <Button wrapper>My button as a span</Button>
 ```
+
+```js
+<Button type="button" fullWidth>Full-width button</Button>
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Button/Button.js

@@ -22,26 +22,30 @@ const StyledButton = styled.button`
     text-decoration: none;
   }
   ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+
   @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
   }
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     padding: ${spacing('md')} ${spacing('l')};
     margin: 0 auto ${spacing('l')};
   }
 `;
 
-const Button = React.forwardRef(({ children, wrapper = false, ...rest }, ref) => (
-  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref}>
+const Button = React.forwardRef(({
+  children, wrapper = false, fullWidth = false, ...rest
+}, ref) => (
+  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} fullWidth={fullWidth}>
     {children}
   </StyledButton>
 ));
 
 Button.propTypes = {
   children: PropTypes.node.isRequired,
-  wrapper: PropTypes.bool // Buttons as span
+  wrapper: PropTypes.bool, // Buttons as span
+  fullWidth: PropTypes.bool
 };
 
 export default Button;

package/src/components/Atoms/Button/Button.md

@@ -5,3 +5,7 @@
 ```js
 <Button wrapper>My button as a span</Button>
 ```
+
+```js
+<Button type="button" fullWidth>Full-width button</Button>
+```