@comicrelief/component-library 8.28.1 → 8.30.0

package/dist/components/Atoms/Input/Input.md

@@ -119,3 +119,15 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
     maxPxWidthLargeBreakpoint={250}
   />
 ```
+
+```js
+  <h4>Input with dark label</h4>
+  <Input
+    name="dark-label"
+    placeholder="£0.00"
+    type="text"
+    label="The label text can be made black rather than the default grey"
+    id="input-example-8"
+    labelProps={{ darkLabel: true }}
+  />
+```

package/dist/components/Atoms/Label/Label.js

@@ -11,16 +11,24 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const LabelElement = _styledComponents.default.label.withConfig({
-  displayName: "Label__LabelElement",
-  componentId: "sc-2nrw50-0"
-})(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], _ref => {
+const getLabelColor = _ref => {
   let {
     theme,
-    errorMsg
+    errorMsg,
+    darkLabel
   } = _ref;
-  return errorMsg ? theme.color('red') : theme.color('grey_label');
-}, _ref2 => {
+  if (errorMsg) {
+    return theme.color('red');
+  }
+  if (darkLabel) {
+    return theme.color('black');
+  }
+  return theme.color('grey_label');
+};
+const LabelElement = _styledComponents.default.label.withConfig({
+  displayName: "Label__LabelElement",
+  componentId: "sc-2nrw50-0"
+})(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], getLabelColor, _ref2 => {
   let {
     optional,
     theme
@@ -63,6 +71,7 @@ const LabelText = _ref3 => {
  * @param children
  * @param label
  * @param hideLabel - Visually hide the label text (without removing it from the document)
+ * @param darkLabel - Make the label text black rather than the default grey
  * @param rest
  * @returns {JSX.Element}
  * @constructor
@@ -72,13 +81,15 @@ const Label = _ref4 => {
     children = null,
     label,
     hideLabel = false,
+    darkLabel = false,
     optional = null,
     errorMsg = '',
     ...rest
   } = _ref4;
   return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
     optional: optional,
-    errorMsg: errorMsg
+    errorMsg: errorMsg,
+    darkLabel: darkLabel
   }, rest), /*#__PURE__*/_react.default.createElement(LabelText, {
     label: label,
     hideLabel: hideLabel
@@ -86,6 +97,7 @@ const Label = _ref4 => {
 };
 LabelElement.propTypes = {
   optional: _propTypes.default.bool,
-  errorMsg: _propTypes.default.string
+  errorMsg: _propTypes.default.string,
+  darkLabel: _propTypes.default.bool
 };
 var _default = exports.default = Label;

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.30.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Input/Input.md

@@ -119,3 +119,15 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
     maxPxWidthLargeBreakpoint={250}
   />
 ```
+
+```js
+  <h4>Input with dark label</h4>
+  <Input
+    name="dark-label"
+    placeholder="£0.00"
+    type="text"
+    label="The label text can be made black rather than the default grey"
+    id="input-example-8"
+    labelProps={{ darkLabel: true }}
+  />
+```

package/src/components/Atoms/Label/Label.js

@@ -6,12 +6,22 @@ import Text from '../Text/Text';
 import spacing from '../../../theme/shared/spacing';
 import hideVisually from '../../../theme/shared/hideVisually';
 
+const getLabelColor = ({ theme, errorMsg, darkLabel }) => {
+  if (errorMsg) {
+    return theme.color('red');
+  }
+  if (darkLabel) {
+    return theme.color('black');
+  }
+  return theme.color('grey_label');
+};
+
 const LabelElement = styled.label`
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
-  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
+  color: ${getLabelColor};
 
   ${({ optional, theme }) => optional === true && `
   :after {
@@ -45,6 +55,7 @@ const LabelText = ({
  * @param children
  * @param label
  * @param hideLabel - Visually hide the label text (without removing it from the document)
+ * @param darkLabel - Make the label text black rather than the default grey
  * @param rest
  * @returns {JSX.Element}
  * @constructor
@@ -53,6 +64,7 @@ const Label = ({
   children = null,
   label,
   hideLabel = false,
+  darkLabel = false,
   optional = null,
   errorMsg = '',
   ...rest
@@ -60,6 +72,7 @@ const Label = ({
   <LabelElement
     optional={optional}
     errorMsg={errorMsg}
+    darkLabel={darkLabel}
     {...rest}
   >
     <LabelText
@@ -78,12 +91,14 @@ Label.propTypes = {
   hideLabel: PropTypes.bool,
   children: PropTypes.node,
   optional: PropTypes.bool,
-  errorMsg: PropTypes.string
+  errorMsg: PropTypes.string,
+  darkLabel: PropTypes.bool
 };
 
 LabelElement.propTypes = {
   optional: PropTypes.bool,
-  errorMsg: PropTypes.string
+  errorMsg: PropTypes.string,
+  darkLabel: PropTypes.bool
 };
 
 LabelText.propTypes = {

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':