@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/Footer/Components/FooterDropdownLinks.js

@@ -1,25 +1,61 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
-import { SystemIcons } from '../../icons';
-import { ComponentMStyling, ComponentSStyling } from '../../styles';
-import { HyperLink } from '../../HyperLink';
-import { defaultOnMouseDownHandler } from '../../common';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_100);
-var DropdownLinkBlock = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"], ["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) { return (props.width > 768 ? 'none' : 'flex'); }, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
-var LinkBlock = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800);
-var FooterDropdownLinks = function (_a) {
-    var navSection = _a.navSection, width = _a.width;
-    var _b = React.useState(false), dropdownActive = _b[0], setDropdownActive = _b[1];
-    return (React.createElement(Wrapper, null,
-        React.createElement(DropdownLinkBlock, { width: width, className: dropdownActive ? 'open' : '', onMouseDown: defaultOnMouseDownHandler, onClick: function () { return setDropdownActive(!dropdownActive); } },
-            React.createElement("h3", null, navSection.header),
-            dropdownActive ? React.createElement(SystemIcons.ChevronUp, { size: "24px" }) : React.createElement(SystemIcons.ChevronDown, { size: "24px" })),
-        React.createElement(LinkBlock, { width: width, className: dropdownActive ? 'show' : '' }, navSection.links.map(function (item, index) { return (React.createElement(HyperLink, { key: index, id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)), variant: 'inverted', href: item.to, target: item.target || '_blank', rel: "noreferrer noopener" }, item.label)); }))));
-};
-export default FooterDropdownLinks;
-var templateObject_1, templateObject_2, templateObject_3;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3;
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
+import { SystemIcons } from '../../icons';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { HyperLink } from '../../HyperLink';
+import { defaultOnMouseDownHandler } from '../../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_100);
+var DropdownLinkBlock = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) {
+  return props.width > 768 ? 'none' : 'flex';
+}, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
+var LinkBlock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800);
+var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
+  var navSection = _ref.navSection,
+    width = _ref.width;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dropdownActive = _React$useState2[0],
+    setDropdownActive = _React$useState2[1];
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsxs(DropdownLinkBlock, {
+      width: width,
+      className: dropdownActive ? 'open' : '',
+      onMouseDown: defaultOnMouseDownHandler,
+      onClick: function onClick() {
+        return setDropdownActive(!dropdownActive);
+      },
+      children: [/*#__PURE__*/_jsx("h3", {
+        children: navSection.header
+      }), dropdownActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
+        size: "24px"
+      }) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
+        size: "24px"
+      })]
+    }), /*#__PURE__*/_jsx(LinkBlock, {
+      width: width,
+      className: dropdownActive ? 'show' : '',
+      children: navSection.links.map(function (item, index) {
+        return /*#__PURE__*/_jsx(HyperLink, {
+          id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)),
+          variant: 'inverted',
+          href: item.to,
+          target: item.target || '_blank',
+          rel: "noreferrer noopener",
+          children: item.label
+        }, index);
+      })
+    })]
+  });
+};
+FooterDropdownLinks.propTypes = {
+  width: _pt.number.isRequired
+};
+export default FooterDropdownLinks;
+//# sourceMappingURL=FooterDropdownLinks.js.map

package/dist/Footer/Components/FooterNavSection.js

@@ -1,32 +1,62 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
-import FooterDropdownLinks from './FooterDropdownLinks';
-import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
-import { HyperLink } from '../../HyperLink';
-import { hasWindow } from '../../utils/utils';
-var NavSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
-var LinkBlock = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"], ["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"])), function (props) { return (props.width <= 768 ? 'none' : 'flex'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.LARGE, ComponentLStyling(ComponentTextStyle.Regular, 'inherit'), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white));
-var FooterNavSection = function (_a) {
-    var _b;
-    var navOptions = _a.navOptions;
-    var _c = React.useState(hasWindow() ? window.innerWidth : -1), width = _c[0], setWidth = _c[1];
-    React.useEffect(function () {
-        function handleResize() {
-            setWidth(window.innerWidth);
-        }
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    return (React.createElement(NavSection, null, (_b = navOptions.sections) === null || _b === void 0 ? void 0 : _b.map(function (no, index) {
-        return width > 768 ? (React.createElement(LinkBlock, { key: "LinkBlock_".concat(index), width: width },
-            React.createElement("h3", null, no.header),
-            no.links.map(function (link, index) { return (React.createElement(HyperLink, { key: index, id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)), variant: 'inverted', href: link.to, target: link.target || '_blank', rel: "noreferrer noopener" }, link.label)); }))) : (React.createElement(FooterDropdownLinks, { "data-testid": 'footerDropLinks', key: "LinkBlockDropdown_".concat(index), navSection: no, width: width }));
-    })));
-};
-export default FooterNavSection;
-var templateObject_1, templateObject_2;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2;
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
+import FooterDropdownLinks from './FooterDropdownLinks';
+import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
+import { HyperLink } from '../../HyperLink';
+import { hasWindow } from '../../utils/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
+var LinkBlock = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"])), function (props) {
+  return props.width <= 768 ? 'none' : 'flex';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.LARGE, ComponentLStyling(ComponentTextStyle.Regular, 'inherit'), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white));
+var FooterNavSection = function FooterNavSection(_ref) {
+  var _navOptions$sections;
+  var navOptions = _ref.navOptions;
+  var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  React.useEffect(function () {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(NavSection, {
+    children: (_navOptions$sections = navOptions.sections) === null || _navOptions$sections === void 0 ? void 0 : _navOptions$sections.map(function (no, index) {
+      return width > 768 ? /*#__PURE__*/_jsxs(LinkBlock, {
+        width: width,
+        children: [/*#__PURE__*/_jsx("h3", {
+          children: no.header
+        }), no.links.map(function (link, index) {
+          return /*#__PURE__*/_jsx(HyperLink, {
+            id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)),
+            variant: 'inverted',
+            href: link.to,
+            target: link.target || '_blank',
+            rel: "noreferrer noopener",
+            children: link.label
+          }, index);
+        })]
+      }, "LinkBlock_".concat(index)) : /*#__PURE__*/_jsx(FooterDropdownLinks, {
+        "data-testid": 'footerDropLinks',
+        navSection: no,
+        width: width
+      }, "LinkBlockDropdown_".concat(index));
+    })
+  });
+};
+FooterNavSection.propTypes = {
+  mainId: _pt.string.isRequired
+};
+export default FooterNavSection;
+//# sourceMappingURL=FooterNavSection.js.map

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -1,42 +1,95 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, invertedFocusStyles } from '../../styles';
-import { TextField } from '../../InputFields';
-import { SystemIcons } from '../../icons';
-import { IconButton } from '../../Button';
-import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles';
-import { InputFieldStyling } from '../../InputFields';
-var NewsletterAndSocial = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var NewsletterEmailSection = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"], ["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
-var NewsletterEmail = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, InputFieldStyling, invertedFocusStyles);
-var NewsletterButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"], ["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
-var SocialMedia = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"], ["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
-var SocialMediaButtons = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
-var FooterNewsletterAndSocialSection = function (_a) {
-    var actionOnNewsletterSignup = _a.actionOnNewsletterSignup, newsletterLabel = _a.newsletterLabel, placeholderEmail = _a.placeholderEmail;
-    var _b = React.useState(''), emailInput = _b[0], setEmailInput = _b[1];
-    return (React.createElement(NewsletterAndSocial, null,
-        React.createElement(NewsletterEmailSection, null,
-            React.createElement("label", null, newsletterLabel),
-            React.createElement(NewsletterEmail, null,
-                React.createElement(TextField, { id: "NewsletterEmail", withoutBorder: true, placeholder: placeholderEmail, value: emailInput, onChange: function (value) { return setEmailInput(value); } }),
-                React.createElement(NewsletterButton, { "data-testid": 'newsBtn', onClick: function (e) { return actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value); } }, "Sign up"))),
-        React.createElement(SocialMedia, null,
-            React.createElement("h4", null, "Follow us on social media"),
-            React.createElement(SocialMediaButtons, null,
-                React.createElement("a", { href: "https://www.facebook.com/LaerdalMedical/", target: "_blank", rel: "noreferrer noopener" },
-                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
-                        React.createElement(SystemIcons.Facebook, null))),
-                React.createElement("a", { href: "https://twitter.com/laerdalmedical", target: "_blank", rel: "noreferrer noopener" },
-                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
-                        React.createElement(SystemIcons.Twitter, null))),
-                React.createElement("a", { href: "https://www.youtube.com/user/LaerdalMedical", target: "_blank", rel: "noreferrer noopener" },
-                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
-                        React.createElement(SystemIcons.Youtube, null)))))));
-};
-export default FooterNewsletterAndSocialSection;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, invertedFocusStyles } from '../../styles';
+import { TextField } from '../../InputFields';
+import { SystemIcons } from '../../icons';
+import { IconButton } from '../../Button';
+import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles';
+import { InputFieldStyling } from '../../InputFields';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NewsletterAndSocial = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var NewsletterEmailSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
+var NewsletterEmail = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, InputFieldStyling, invertedFocusStyles);
+var NewsletterButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
+var SocialMedia = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
+var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
+  var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
+    newsletterLabel = _ref.newsletterLabel,
+    placeholderEmail = _ref.placeholderEmail;
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    emailInput = _React$useState2[0],
+    setEmailInput = _React$useState2[1];
+  return /*#__PURE__*/_jsxs(NewsletterAndSocial, {
+    children: [/*#__PURE__*/_jsxs(NewsletterEmailSection, {
+      children: [/*#__PURE__*/_jsx("label", {
+        children: newsletterLabel
+      }), /*#__PURE__*/_jsxs(NewsletterEmail, {
+        children: [/*#__PURE__*/_jsx(TextField, {
+          id: "NewsletterEmail",
+          withoutBorder: true,
+          placeholder: placeholderEmail,
+          value: emailInput,
+          onChange: function onChange(value) {
+            return setEmailInput(value);
+          }
+        }), /*#__PURE__*/_jsx(NewsletterButton, {
+          "data-testid": 'newsBtn',
+          onClick: function onClick(e) {
+            return actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value);
+          },
+          children: "Sign up"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(SocialMedia, {
+      children: [/*#__PURE__*/_jsx("h4", {
+        children: "Follow us on social media"
+      }), /*#__PURE__*/_jsxs(SocialMediaButtons, {
+        children: [/*#__PURE__*/_jsx("a", {
+          href: "https://www.facebook.com/LaerdalMedical/",
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            variant: "secondary",
+            action: function action() {},
+            tabIndex: -1,
+            children: /*#__PURE__*/_jsx(SystemIcons.Facebook, {})
+          })
+        }), /*#__PURE__*/_jsx("a", {
+          href: "https://twitter.com/laerdalmedical",
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            variant: "secondary",
+            action: function action() {},
+            tabIndex: -1,
+            children: /*#__PURE__*/_jsx(SystemIcons.Twitter, {})
+          })
+        }), /*#__PURE__*/_jsx("a", {
+          href: "https://www.youtube.com/user/LaerdalMedical",
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            variant: "secondary",
+            action: function action() {},
+            tabIndex: -1,
+            children: /*#__PURE__*/_jsx(SystemIcons.Youtube, {})
+          })
+        })]
+      })]
+    })]
+  });
+};
+FooterNewsletterAndSocialSection.propTypes = {
+  actionOnNewsletterSignup: _pt.func,
+  newsletterLabel: _pt.string.isRequired,
+  placeholderEmail: _pt.string
+};
+export default FooterNewsletterAndSocialSection;
+//# sourceMappingURL=FooterNewsletterAndSocialSection.js.map

package/dist/Footer/Components/FooterTop.js

@@ -1,34 +1,60 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import animateScrollTo from 'animated-scroll-to';
-import { COLORS, invertedFocusStyles } from '../../styles';
-import Logo from '../../GlobalNavigationBar/Logo';
-import { SystemIcons } from '../../icons';
-import { ComponentTextStyle, ComponentXSStyling } from '../../styles';
-var FooterTopSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"], ["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
-var ToTop = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
-var FooterTop = function (_a) {
-    var sitename = _a.sitename, showBetaTag = _a.showBetaTag, toTopText = _a.toTopText;
-    var isPressingEnter = function (e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.stopPropagation();
-            return true;
-        }
-        return false;
-    };
-    var action = function () {
-        animateScrollTo(0);
-    };
-    return (React.createElement(FooterTopSection, null,
-        React.createElement(Logo, { name: sitename || '', showBetaTag: showBetaTag, color: COLORS.white, inverted: true, betaTagBackgroundColor: COLORS.white, betaTagColor: COLORS.neutral_800 }),
-        React.createElement(ToTop, { "data-testid": 'toTopNavigation', tabIndex: 0, onKeyDown: function (e) { return (isPressingEnter(e) ? action() : null); }, onClick: action },
-            React.createElement(SystemIcons.ArrowLineUp, { size: "24px", color: COLORS.white }),
-            React.createElement("span", null, toTopText))));
-};
-export default FooterTop;
-var templateObject_1, templateObject_2;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2;
+import * as React from 'react';
+import styled from 'styled-components';
+import animateScrollTo from 'animated-scroll-to';
+import { COLORS, invertedFocusStyles } from '../../styles';
+import Logo from '../../GlobalNavigationBar/Logo';
+import { SystemIcons } from '../../icons';
+import { ComponentTextStyle, ComponentXSStyling } from '../../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FooterTopSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
+var ToTop = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
+var FooterTop = function FooterTop(_ref) {
+  var sitename = _ref.sitename,
+    showBetaTag = _ref.showBetaTag,
+    toTopText = _ref.toTopText;
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+    return false;
+  };
+  var action = function action() {
+    animateScrollTo(0);
+  };
+  return /*#__PURE__*/_jsxs(FooterTopSection, {
+    children: [/*#__PURE__*/_jsx(Logo, {
+      name: sitename || '',
+      showBetaTag: showBetaTag,
+      color: COLORS.white,
+      inverted: true,
+      betaTagBackgroundColor: COLORS.white,
+      betaTagColor: COLORS.neutral_800
+    }), /*#__PURE__*/_jsxs(ToTop, {
+      "data-testid": 'toTopNavigation',
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        return isPressingEnter(e) ? action() : null;
+      },
+      onClick: action,
+      children: [/*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
+        size: "24px",
+        color: COLORS.white
+      }), /*#__PURE__*/_jsx("span", {
+        children: toTopText
+      })]
+    })]
+  });
+};
+FooterTop.propTypes = {
+  sitename: _pt.string,
+  showBetaTag: _pt.bool,
+  toTopText: _pt.string.isRequired
+};
+export default FooterTop;
+//# sourceMappingURL=FooterTop.js.map

package/dist/Footer/Footer.js

@@ -1,17 +1,20 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-var FooterContainer = styled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
-var FooterGlobalContent = styled.section(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"], ["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), COLORS.primary_700);
-var Footer = function (_a) {
-    var children = _a.children;
-    return (React.createElement(FooterContainer, { role: "contentinfo" },
-        children,
-        React.createElement(FooterGlobalContent, { "data-testid": 'footer-content' })));
-};
-export default Footer;
-var templateObject_1, templateObject_2;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n"])));
+var FooterGlobalContent = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), COLORS.primary_700);
+var Footer = function Footer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsxs(FooterContainer, {
+    role: "contentinfo",
+    children: [children, /*#__PURE__*/_jsx(FooterGlobalContent, {
+      "data-testid": 'footer-content'
+    })]
+  });
+};
+export default Footer;
+//# sourceMappingURL=Footer.js.map