@comicrelief/component-library 8.48.2 → 8.49.0

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

@@ -7,60 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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:", ";}@media ", "{width:", ";padding:", " ", ";margin:0 auto ", ";}"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.fontSize('s');
-}, _ref2 => {
-  let {
-    color,
-    theme
-  } = _ref2;
-  return color ? theme.buttonColors(color) : theme.buttonColors('red');
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.allBreakpoints('M');
-}, _ref4 => {
-  let {
-    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((_ref7, ref) => {
+var _Button = _interopRequireDefault(require("./Button.style"));
+var _buttonTypes = _interopRequireDefault(require("../../../theme/crTheme/buttonTypes"));
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
+    color = 'red',
     wrapper = false,
     fullWidth = false,
+    buttonType = _buttonTypes.default.PRIMARY,
     ...rest
-  } = _ref7;
-  return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
     ref: ref,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    color: color,
+    buttonType: buttonType
   }), children);
 });
 Button.propTypes = {
   children: _propTypes.default.node.isRequired,
   wrapper: _propTypes.default.bool,
   // Buttons as span
-  fullWidth: _propTypes.default.bool
+  fullWidth: _propTypes.default.bool,
+  color: _propTypes.default.string,
+  // Primary will the default for the vast majority of contexts; with
+  // Secondary and Tertirary being manually set by developers where required
+  buttonType: _propTypes.default.oneOf([_buttonTypes.default.PRIMARY, _buttonTypes.default.SECONDARY, _buttonTypes.default.TERTIARY])
 };
 var _default = exports.default = Button;

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

@@ -1,5 +1,95 @@
 ```js
-<Button type="button">My button</Button>
+
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
+
+<>
+    <h1>Primary</h1>
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button">Primary red button (default)</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" disabled>Primary red button (default): disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black">Primary black button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" disabled>Primary black button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white">Primary white button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" disabled>Primary white button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="non-existent-colour">Using a non-existent colour will default to red</Button>
+    </div>
+
+    <br/>
+    <h1>Secondary</h1>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.SECONDARY}>Secondary red button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.SECONDARY} disabled>Secondary red button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.SECONDARY}>Secondary black button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.SECONDARY} disabled>Secondary black button: disabled</Button>
+    </div>
+
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.SECONDARY} buttonType={buttonTypes.SECONDARY}>Secondary white button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.SECONDARY} disabled>Secondary white button: disabled</Button>
+    </div>
+
+    <br/>
+    <h1>Teritary</h1>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.TERTIARY}>Tertiary red button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.TERTIARY} disabled>Tertiary red button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.TERTIARY}>Tertiary black button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.TERTIARY} disabled>Tertiary black button: disabled</Button>
+    </div>
+
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.TERTIARY} buttonType={buttonTypes.TERTIARY}>Tertiary white button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.TERTIARY} disabled>Tertiary white button: disabled</Button>
+    </div>
+</>
+
+
 ```
 
 ```js

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHelper"));
+const StyledButton = _styledComponents.default.button.withConfig({
+  displayName: "Buttonstyle__StyledButton",
+  componentId: "sc-k17brs-0"
+})(["display:inline-flex;position:relative;text-decoration:none;transition:all 0.2s;min-height:2.5rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;padding:0.6rem 1rem;border-radius:0.5rem;> a{text-decoration:none;}", ";", " @media ", "{width:", ";}@media ", "{width:", ";}"], _ref => {
+  let {
+    color,
+    theme,
+    buttonType
+  } = _ref;
+  return theme.buttonColors(color, buttonType);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return (0, _styledComponents.css)(["", ""], (0, _fontHelper.default)(theme, 'button'));
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.allBreakpoints('M');
+}, _ref4 => {
+  let {
+    fullWidth
+  } = _ref4;
+  return fullWidth ? '100%' : 'auto';
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.allBreakpoints('L');
+}, _ref6 => {
+  let {
+    fullWidth
+  } = _ref6;
+  return fullWidth ? '100%' : 'auto';
+});
+var _default = exports.default = StyledButton;

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

@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _Button = _interopRequireDefault(require("./Button"));
-it("renders a standard styled link correctly", () => {
+it('renders a standard styled link correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     type: "submit"
   }, "A standard link")).toJSON();
@@ -16,15 +16,11 @@ it("renders a standard styled link correctly", () => {
       display: -ms-inline-flexbox;
       display: inline-flex;
       position: relative;
-      padding: 0.5rem 1.25rem;
       -webkit-text-decoration: none;
       text-decoration: none;
-      font-weight: 700;
-      font-size: 1rem;
-      border-radius: 2rem;
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s;
-      height: 3.125rem;
+      -webkit-transition: all 0.2s;
+      transition: all 0.2s;
+      min-height: 2.5rem;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;
@@ -36,8 +32,19 @@ it("renders a standard styled link correctly", () => {
       align-items: center;
       border: none;
       cursor: pointer;
+      padding: 0.6rem 1rem;
+      border-radius: 0.5rem;
       background-color: #E52630;
       color: #FFFFFF;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 700;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c0 > a {
@@ -45,9 +52,31 @@ it("renders a standard styled link correctly", () => {
       text-decoration: none;
     }
 
-    .c0:hover {
+    .c0:hover,
+    .c0:focus,
+    .c0:focus-within,
+    .c0:focus-visible {
       background-color: #890B11;
-      color: #FFFFFF;
+      outline-offset: 3px;
+    }
+
+    .c0:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (min-width:740px) {
+      .c0 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
     }
 
     @media (min-width:740px) {
@@ -59,13 +88,12 @@ it("renders a standard styled link correctly", () => {
     @media (min-width:1024px) {
       .c0 {
         width: auto;
-        padding: 1rem 2rem;
-        margin: 0 auto 2rem;
       }
     }
 
     <button
       className="c0"
+      color="red"
       type="submit"
     >
       A standard link

package/dist/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -14,7 +14,7 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 const ButtonWithDisabledState = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "ButtonWithStates__ButtonWithDisabledState",
   componentId: "sc-7gb81g-0"
-})(["&:disabled{cursor:not-allowed;opacity:0.75;}"]);
+})(["&:disabled{cursor:not-allowed;opacity:0.5;}"]);
 const LoaderContainer = _styledComponents.default.div.withConfig({
   displayName: "ButtonWithStates__LoaderContainer",
   componentId: "sc-7gb81g-1"

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

@@ -10,20 +10,22 @@ var _react = _interopRequireWildcard(require("react"));
 var _Link = _interopRequireWildcard(require("./Link.style"));
 var _allowListed = _interopRequireDefault(require("../../../utils/allowListed"));
 var _internalLinkHelper = require("../../../utils/internalLinkHelper");
+var _buttonTypes = _interopRequireDefault(require("../../../theme/crTheme/buttonTypes"));
 let window = '';
 const Link = _ref => {
   let {
+    href,
     children,
     color = 'red',
-    mobileColour = null,
-    href,
-    target = null,
     type = 'standard',
     home = false,
     underline = true,
-    icon = null,
     iconFirst = false,
     fullWidth = false,
+    buttonType = _buttonTypes.default.PRIMARY,
+    target = null,
+    mobileColour = null,
+    icon = null,
     ...rest
   } = _ref;
   const [documentHost, setDocumentHost] = (0, _react.useState)('');
@@ -63,7 +65,8 @@ const Link = _ref => {
     home: home,
     iconFirst: iconFirst,
     underline: underline,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    buttonType: buttonType
   }), 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

@@ -1,28 +1,23 @@
 ```js
 import { External, Download, Favourite, Internal } from '../Icons/index';
+
 <div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link href="#anchor" target="blank" type="standard">
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link href="#anchor" target="blank">
       Link standard
     </Link>
   </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       href="#anchor"
       target="blank"
-      type="standard"
       icon={<Download colour="black" />}
     >
       Link standard icon
     </Link>
   </div>
   <div
-    style={{
-      display: 'block',
-      padding: '10px',
-      marginBottom: '10px',
-      backgroundColor: '#000'
-    }}
+    style={{backgroundColor:"#000", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}
   >
     <Link href="#anchor" type="standard_white">
       Link standard white
@@ -31,13 +26,78 @@ import { External, Download, Favourite, Internal } from '../Icons/index';
 </div>;
 ```
 
-## Iconography
+```js
+
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
+
+<div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="black" href="#anchor" target="self" type="button">
+      Link as button
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="red" href="/test" target="self" type="button">
+      Link as button
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="yellow" href="/test" target="blank" type="button">
+      Link as button
+    </Link>
+  </div>
+
+
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="red" href="#anchor" target="self" type="button" buttonType={buttonTypes.SECONDARY}>
+      Link as button (secondary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="black" href="/test" target="self" type="button"buttonType={buttonTypes.SECONDARY}>
+      Link as button (secondary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="white" href="/test" target="blank" type="button" buttonType={buttonTypes.SECONDARY}>
+      Link as button (secondary)
+    </Link>
+  </div>
+
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="red" href="#anchor" target="self" type="button" buttonType={buttonTypes.TERTIARY}>
+      Link as button (tertiary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="black" href="/test" target="self" type="button"buttonType={buttonTypes.TERTIARY}>
+      Link as button (tertiary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="white" href="/test" target="blank" type="button" buttonType={buttonTypes.TERTIARY}>
+      Link as button (tertiary)
+    </Link>
+  </div>
+
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+
+    <div style={{ display: 'block', marginTop: '10px' }}>
+      <Link color="red" href="/test" target="blank" type="button" fullWidth>
+        Link as full-width red button
+      </Link>
+    </div>
+  </div>
+</div>
+```
+
 
+## Iconography
 ```js
 import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from '../Icons/index';
 
 <div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       mobileColour="blue"
@@ -50,7 +110,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="blue"
       mobileColour="black"
@@ -63,7 +123,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -75,7 +135,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -87,7 +147,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-    <div style={{ display: 'block', marginBottom: '10px' }}>
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -99,7 +159,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -111,7 +171,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -123,7 +183,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -135,7 +195,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -148,7 +208,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -161,60 +221,3 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
   </div>
 </div>;
 ```
-
-```js
-<div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="black" href="#anchor" target="self" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="red" href="/test" target="self" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="yellow" href="/test" target="blank" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="yellow_light" href="/test" target="blank" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="yellow_dark" href="/test" target="blank" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div
-    style={{
-      display: 'block',
-      padding: '10px',
-      marginBottom: '10px',
-      backgroundColor: '#22CFD8'
-    }}
-  >
-    <div style={{ display: 'block', marginBottom: '10px' }}>
-      <Link color="grey" href="/test" target="blank" type="button">
-        Link as button
-      </Link>
-    </div>
-    <Link color="transparent" href="/test" target="blank" type="button">
-      Link as transparent button
-    </Link>
-    <div style={{ display: 'block', marginTop: '10px' }}>
-      <Link color="white" href="/test" target="blank" type="button">
-        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>
-```