@laerdal/life-react-components 0.0.280-dev.3 → 0.0.280-dev.7

package/dist/esm/Banners/Banner.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 import { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';
-import { Button } from '../Button';
+import { IconButton } from '../Button';
+import { getButtonStyle } from './styles';
 /**
  * Styles for <Banner />
  */
@@ -16,20 +17,30 @@ const BannerContainer = styled.div`
   margin-top: ${props => props.bottom ? 'auto' : '0'};
 
   button:last-child {
-    margin: 0 0 0 auto;
     line-height: 0;
-    cursor: pointer;
-  }
-  button:last-child:hover {
-    margin: 0 0 0 auto;
-    background: ${props => props.hover ? props.hover : COLORS.primary_20};
+    margin: 0 0 0 8px;
+    ${BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${BREAKPOINTS.LARGE} {
+      margin: 0 0 0 32px;
+    }
+    &.small {
+      margin: 0 0 0 8px;
+    }
+    &.medium {
+      margin: 0 0 0 16px;
+    }
+    &.large {
+      margin: 0 0 0 32px;
+    }
   }
 
   a {
     color: ${props => props.link};
     font-weight: bold;
     text-decoration: none;
-    
+
     &:hover {
       text-decoration: underline;
     }
@@ -39,32 +50,50 @@ const BannerContainer = styled.div`
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
-  line-height: 140%;
+  line-height: 20px;
 `;
 const BannerCenter = styled.div`
   color: ${props => props.color};
   font-size: 18px;
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
   width: 100%;
-  margin: 0 8px;
+  margin: 0 6px 0 16px;
   ${BREAKPOINTS.MEDIUM} {
-    margin: 0 32px;
+    margin: 0 22px 0 32px;
   }
   ${BREAKPOINTS.LARGE} {
-    margin: 0 56px;
+    margin: 0 46px 0 56px;
+  }
+  &.small {
+    margin: 0 6px 0 16px;
   }
-  ${BREAKPOINTS.XLARGE} {
-    width: 1120px;
-    margin: 0 auto;
+  &.medium {
+    margin: 0 22px 0 32px;
   }
-  >svg {
-    margin-right:8px;
+  &.large {
+    margin: 0 46px 0 56px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+`;
+const ButtonWrapper = styled.div`
+  margin: 0 0 0 auto;
+  ${props => props.type ? getButtonStyle(props.type) : null};
+`;
+const BannerContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
   }
 `;
 
 const Banner = ({
+  size,
   type,
   children,
   bottom,
@@ -72,7 +101,8 @@ const Banner = ({
   linkText,
   link,
   onClose,
-  icon
+  icon,
+  noIcon
 }) => {
   const formatTypeToLowerCase = type?.toLowerCase();
 
@@ -85,20 +115,25 @@ const Banner = ({
         hover: COLORS.warning_20,
         bottom: bottom
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.warning_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(Help, {
+        color: COLORS.warning_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
         color: COLORS.warning_700,
         size: "24px"
-      }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
         href: link,
         target: "_blank"
-      }, linkText), onClose && /*#__PURE__*/React.createElement(Button, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.warning_500,
         size: "24px"
-      }))));
+      })))));
 
     case 'critical':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -106,22 +141,28 @@ const Banner = ({
         type: COLORS.critical_100,
         link: COLORS.critical_700,
         hover: COLORS.critical_20,
-        bottom: bottom
+        bottom: bottom,
+        className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.critical_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(Attention, {
+        color: COLORS.critical_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Attention, {
         color: COLORS.critical_700,
         size: "24px"
-      }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
         href: link,
         target: "_blank"
-      }, linkText), onClose && /*#__PURE__*/React.createElement(Button, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.critical_500,
         size: "24px"
-      }))));
+      })))));
 
     case 'positive':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -129,22 +170,28 @@ const Banner = ({
         type: COLORS.correct_100,
         link: COLORS.correct_700,
         hover: COLORS.correct_20,
-        bottom: bottom
+        bottom: bottom,
+        className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.correct_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(ThumbsUp, {
+        color: COLORS.correct_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
         color: COLORS.correct_700,
         size: "24px"
-      }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
         href: link,
         target: "_blank"
-      }, linkText), onClose && /*#__PURE__*/React.createElement(Button, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.correct_500,
         size: "24px"
-      }))));
+      })))));
 
     default:
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -152,26 +199,33 @@ const Banner = ({
         type: COLORS.primary_100,
         link: COLORS.primary_700,
         hover: COLORS.primary_20,
-        bottom: bottom
+        bottom: bottom,
+        className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.primary_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(Tip, {
+        color: COLORS.primary_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
         color: COLORS.primary_700,
         size: "24px"
-      }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
         href: link,
         target: "_blank"
-      }, linkText), onClose && /*#__PURE__*/React.createElement(Button, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: "neutral"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.primary_500,
         size: "24px"
-      }))));
+      })))));
   }
 };
 
 Banner.propTypes = {
+  size: _pt.oneOf(['small', 'medium', 'large']),
   type: _pt.string,
   link: _pt.string,
   linkText: _pt.string,
@@ -179,7 +233,8 @@ Banner.propTypes = {
   bottom: _pt.bool,
   testId: _pt.string,
   icon: _pt.node,
-  onClose: _pt.func
+  onClose: _pt.func,
+  noIcon: _pt.bool
 };
 export default Banner;
 //# sourceMappingURL=Banner.js.map

package/dist/esm/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Tip","Attention","ThumbsUp","Help","Close","Button","BannerContainer","div","props","type","correct_100","black","bottom","hover","primary_20","link","BannerCenter","color","MEDIUM","LARGE","XLARGE","Banner","children","testId","linkText","onClose","icon","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';\nimport { Button } from '../Button';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    margin: 0 0 0 auto;\n    line-height: 0;\n    cursor: pointer;\n  }\n  button:last-child:hover {\n    margin: 0 0 0 auto;\n    background: ${(props: BannerProps) => (props.hover ? props.hover : COLORS.primary_20)};\n  }\n\n  a {\n    color: ${(props: BannerProps) => (props.link)};\n    font-weight: bold;\n    text-decoration: none;\n    \n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  font-family: Lato;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 140%;\n`;\n\nconst BannerCenter = styled.div`\n  color: ${(props) => props.color};\n  font-size: 18px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  margin: 0 8px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  ${BREAKPOINTS.XLARGE} {\n    width: 1120px;\n    margin: 0 auto;\n  }\n  >svg {\n    margin-right:8px;\n  }\n`;\n\ntype BannerProps = {\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ type, children, bottom, testId, linkText, link, onClose, icon }) => {\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700}>\n            { icon ? icon : <Help color={COLORS.warning_700} size=\"24px\" /> }\n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.warning_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom}>\n          <BannerCenter color={COLORS.critical_700}>\n            { icon ? icon : <Attention color={COLORS.critical_700} size=\"24px\" /> }\n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.critical_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom}>\n          <BannerCenter color={COLORS.correct_700}>\n            { icon ? icon : <ThumbsUp color={COLORS.correct_700} size=\"24px\" /> }\n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.correct_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom}>\n          <BannerCenter color={COLORS.primary_700}>\n            { icon ? icon : <Tip color={COLORS.primary_700} size=\"24px\" /> }          \n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.primary_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Tip","Attention","ThumbsUp","Help","Close","IconButton","getButtonStyle","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link};\n    font-weight: bold;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  font-family: Lato;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 20px;\n`;\n\nconst BannerCenter = styled.div`\n  color: ${(props) => props.color};\n  font-size: 18px;\n  display: flex;\n  width: 100%;\n  margin: 0 6px 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 22px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 46px 0 56px;\n  }\n  &.small {\n    margin: 0 6px 0 16px;\n  }\n  &.medium {\n    margin: 0 22px 0 32px;\n  }\n  &.large {\n    margin: 0 46px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n  margin: 0 0 0 auto;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.warning_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <Attention color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.critical_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.correct_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type=\"neutral\">\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.primary_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/esm/Banners/styles.js

@@ -0,0 +1,122 @@
+import { css } from 'styled-components';
+import { COLORS } from '../styles';
+export const getButtonStyle = type => {
+  switch (type) {
+    case 'warning':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.warning_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.warning_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.warning_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.warning_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.warning_800};
+          }
+        }
+      `;
+
+    case 'critical':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.critical_600};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.critical_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.critical_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.critical_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.critical_800};
+          }
+        }
+      `;
+
+    case 'positive':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.correct_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.correct_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.correct_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.correct_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.correct_800};
+          }
+        }
+      `;
+
+    default:
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.primary_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.primary_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.primary_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.primary_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.primary_800};
+          }
+        }
+      `;
+  }
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/Banners/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["css","COLORS","getButtonStyle","type","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","primary_500","primary_200","primary_700","primary_300","primary_800"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,MAAMC,cAAc,GAAIC,IAAD,IAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,aAAOH,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACG,WAAY;AACrC;AACA;AACA;AACA,gCAAgCH,MAAM,CAACI,WAAY;AACnD;AACA;AACA;AACA,oBAAoBJ,MAAM,CAACK,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BL,MAAM,CAACM,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBN,MAAM,CAACO,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOR,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACQ,YAAa;AACtC;AACA;AACA;AACA,gCAAgCR,MAAM,CAACS,YAAa;AACpD;AACA;AACA;AACA,oBAAoBT,MAAM,CAACU,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBX,MAAM,CAACY,YAAa;AACxC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOb,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,gCAAgCb,MAAM,CAACc,WAAY;AACnD;AACA;AACA;AACA,oBAAoBd,MAAM,CAACe,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBhB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF;AACE,aAAOlB,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA,gCAAgClB,MAAM,CAACmB,WAAY;AACnD;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BpB,MAAM,CAACqB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBrB,MAAM,CAACsB,WAAY;AACvC;AACA;AACA,OA1BM;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  switch (type) {\n    case 'warning':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.warning_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.warning_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.warning_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_800};\n          }\n        }\n      `;\n    case 'critical':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.critical_600};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.critical_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.critical_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_800};\n          }\n        }\n      `;\n    case 'positive':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.correct_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.correct_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.correct_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_800};\n          }\n        }\n      `;\n    default:\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.primary_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.primary_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.primary_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_800};\n          }\n        }\n      `;\n  }\n};\n"],"file":"styles.js"}

package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../../styles';
 import { TextField } from '../../InputFields';
 import { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';
+import { IconButton } from '../../Button';
 const NewsletterAndSocial = styled.section`
   display: flex;
   flex-direction: column;
@@ -104,36 +105,44 @@ const SocialMediaButtons = styled.div`
   display: flex;
   justify-content: center;
 
-  a {
+  button div {
     display: flex;
-    width: 32px;
-    height: 32px;
     background-color: transparent;
     color: ${COLORS.white};
     margin: 0 0 0 20px;
-    border-radius: 4px;
+
+    svg {
+      fill: ${COLORS.white};
+      path {
+        fill: ${COLORS.white};
+      }
+    }
 
     &:first-child {
       margin: 0;
     }
-    svg {
-      margin: auto;
-    }
     &:hover {
       background-color: ${COLORS.white};
       color: ${COLORS.neutral_600};
-      cursor: pointer;
     }
     &:active {
       background-color: ${COLORS.primary_800};
       color: ${COLORS.primary_100};
-      cursor: pointer;
     }
+  }
+  a {
     &:focus {
-      background-color: ${COLORS.white};
-      color: ${COLORS.neutral_600};
-      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
       outline: none;
+      div {
+        background-color: ${COLORS.white};
+        color: ${COLORS.neutral_600};
+        outline: none;
+        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+      }
+      div svg path,
+      div svg {
+        fill: ${COLORS.neutral_600};
+      }
     }
   }
 
@@ -161,17 +170,29 @@ const FooterNewsletterAndSocialSection = ({
     href: "https://www.facebook.com/LaerdalMedical/",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(Facebook, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    action: () => {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Facebook, null))), /*#__PURE__*/React.createElement("a", {
     key: `socialmedia_${Math.floor(Math.random() * 999999999999)}`,
     href: "https://twitter.com/laerdalmedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(Twitter, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    action: () => {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Twitter, null))), /*#__PURE__*/React.createElement("a", {
     key: `socialmedia_${Math.floor(Math.random() * 999999999999)}`,
     href: "https://www.youtube.com/user/LaerdalMedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(Youtube, null)))));
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    action: () => {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Youtube, null))))));
 };
 
 FooterNewsletterAndSocialSection.propTypes = {