@comicrelief/component-library 8.28.1 → 8.29.0

package/dist/components/Atoms/Link/Link.js

@@ -23,6 +23,7 @@ const Link = _ref => {
     underline = true,
     icon = null,
     iconFirst = false,
+    fullWidth = false,
     ...rest
   } = _ref;
   const [documentHost, setDocumentHost] = (0, _react.useState)('');
@@ -61,7 +62,8 @@ const Link = _ref => {
     type: type,
     home: home,
     iconFirst: iconFirst,
-    underline: underline
+    underline: underline,
+    fullWidth: fullWidth
   }), children, window === '_blank' && /*#__PURE__*/_react.default.createElement(_Link.HelperText, null, "(opens in new window)"), hasIcon && /*#__PURE__*/_react.default.createElement(_Link.IconWrapper, {
     type: type
   }, icon));

package/dist/components/Atoms/Link/Link.md

@@ -210,6 +210,11 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
         White button
       </Link>
     </div>
+    <div style={{ display: 'block', marginTop: '10px' }}>
+      <Link color="red" href="/test" target="blank" type="button" fullWidth>
+        Full-width red button
+      </Link>
+    </div>
   </div>
 </div>
 ```

package/dist/components/Atoms/Link/Link.style.js

@@ -9,7 +9,7 @@ exports.default = exports.IconWrapper = exports.HelperText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const buttonStyle = () => (0, _styledComponents.css)(["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;cursor:pointer;", ";", ";@media ", "{width:auto;}@media ", "{", ";}"], _ref => {
+const buttonStyle = () => (0, _styledComponents.css)(["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;cursor:pointer;", ";", ";@media ", "{width:", ";}@media ", "{", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -33,55 +33,60 @@ const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;posit
   return theme.allBreakpoints('M');
 }, _ref5 => {
   let {
-    theme
+    fullWidth
   } = _ref5;
-  return theme.allBreakpoints('L');
+  return fullWidth ? '100%' : 'auto';
 }, _ref6 => {
   let {
-    color,
     theme
   } = _ref6;
+  return theme.allBreakpoints('L');
+}, _ref7 => {
+  let {
+    color,
+    theme
+  } = _ref7;
   return color ? theme.buttonColors(color) : theme.buttonColors('red');
 });
-const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref7 => {
+const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.fontSize('l');
-}, _ref8 => {
+}, _ref9 => {
   let {
     type,
     theme,
     underline
-  } = _ref8;
+  } = _ref9;
   return type ? theme.linkStyles(type, underline) : theme.linkStyles('standard', underline);
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__IconWrapper",
   componentId: "sc-t360tr-0"
-})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref9 => {
+})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref10 => {
   let {
     type
-  } = _ref9;
+  } = _ref10;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
-}, _ref10 => {
+}, _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.allBreakpoints('M');
-}, _ref11 => {
+}, _ref12 => {
   let {
     type
-  } = _ref11;
+  } = _ref12;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
 });
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "sc-t360tr-1"
-})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref12 => {
+})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref13 => {
   let {
     iconFirst
-  } = _ref12;
+  } = _ref13;
   return iconFirst && (0, _styledComponents.css)(["flex-direction:row-reverse;span[type=\"button\"]{margin-left:0;margin-right:1rem;}"]);
 });
 const HelperText = exports.HelperText = _styledComponents.default.span.withConfig({

package/package.json

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

package/src/components/Atoms/Link/Link.js

@@ -18,6 +18,7 @@ const Link = ({
   underline = true,
   icon = null,
   iconFirst = false,
+  fullWidth = false,
   ...rest
 }) => {
   const [documentHost, setDocumentHost] = useState('');
@@ -62,6 +63,7 @@ const Link = ({
       home={home}
       iconFirst={iconFirst}
       underline={underline}
+      fullWidth={fullWidth}
     >
       {children}
       {window === '_blank' && <HelperText>(opens in new window)</HelperText>}
@@ -87,7 +89,8 @@ Link.propTypes = {
   children: PropTypes.node.isRequired,
   iconFirst: PropTypes.bool,
   /** Embed icons */
-  icon: PropTypes.node
+  icon: PropTypes.node,
+  fullWidth: PropTypes.bool
 };
 
 export default Link;

package/src/components/Atoms/Link/Link.md

@@ -210,6 +210,11 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
         White button
       </Link>
     </div>
+    <div style={{ display: 'block', marginTop: '10px' }}>
+      <Link color="red" href="/test" target="blank" type="button" fullWidth>
+        Full-width red button
+      </Link>
+    </div>
   </div>
 </div>
 ```

package/src/components/Atoms/Link/Link.style.js

@@ -22,7 +22,7 @@ const buttonStyle = () => css`
   ${({ mobileColour, theme }) => (mobileColour ? theme.buttonColors(mobileColour) : null)};
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
   }
 
   // Reinstate general styles for 'desktop':