@comicrelief/component-library 8.7.0 → 8.9.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/dist/theme/crTheme/colors.js

@@ -26,14 +26,21 @@ const colors = {
   green: '#49D267',
   green_dark: '#1B651D',
   green_light: '#F4F2F4',
-  grey: '#969598',
-  grey_dark: '#222222',
   grey_stone: '#CEDCDA',
   grey_extra_light: '#f0f0f0',
   grey_for_forms: '#666',
   grey_label: '#5C5C5E',
+  // this is the Curtis approved list of 5 greys that will be later numbered grey_1 thru grey_5
+  // grey_1
   grey_light: '#F4F3F5',
+  // grey_2
   grey_medium: '#E1E2E3',
+  // grey_3
+  grey: '#969598',
+  // grey_4
+  grey_4: '#6E6E6E',
+  // grey_5
+  grey_dark: '#222222',
   magenta: '#FC59CE',
   magenta_dark: '#821C5D',
   magenta_light: '#FEB4DC',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.7.0",
+  "version": "8.9.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>
+```

package/src/theme/crTheme/colors.js

@@ -20,14 +20,21 @@ const colors = {
   green: '#49D267',
   green_dark: '#1B651D',
   green_light: '#F4F2F4',
-  grey: '#969598',
-  grey_dark: '#222222',
   grey_stone: '#CEDCDA',
   grey_extra_light: '#f0f0f0',
   grey_for_forms: '#666',
   grey_label: '#5C5C5E',
+  // this is the Curtis approved list of 5 greys that will be later numbered grey_1 thru grey_5
+  // grey_1
   grey_light: '#F4F3F5',
+  // grey_2
   grey_medium: '#E1E2E3',
+  // grey_3
+  grey: '#969598',
+  // grey_4
+  grey_4: '#6E6E6E',
+  // grey_5
+  grey_dark: '#222222',
   magenta: '#FC59CE',
   magenta_dark: '#821C5D',
   magenta_light: '#FEB4DC',