@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('../../../themes/styled.js');
+var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
 require('tslib');
@@ -14,229 +15,233 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ServicesContainer = styled['default'].div `
+const ServicesContainer = styled["default"].div `
     display: flex;
     justify-content: space-between;
-    padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
     flex-wrap: wrap;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         flex-wrap: nowrap;
     }
 `;
-const ServiceWrapper = styled['default'].div `
+const ServiceWrapper = styled["default"].div `
     display: inline-flex;
     width: 100%;
     overflow: hidden;
     flex-direction: column;
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
         margin-bottom: 0;
         &:first-of-type {
             padding-left: 0;
         }
     }
 `;
-const CategoryContainer = styled['default'].div `
+const CategoryContainer = styled["default"].div `
     display: flex;
     justify-content: space-between;
     padding: 0;
     flex-wrap: wrap;
-    border-bottom: 1px solid #cfcfcf;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         flex-wrap: nowrap;
-        margin: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
+        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
     }
 `;
-const CategoryWrapper = styled['default'].div `
+const CategoryWrapper = styled["default"].div `
     display: inline-flex;
     width: 100%;
     overflow: hidden;
     flex-direction: column;
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 4)};
+    span.dnasg-icon {
+        margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+    }
+
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
         margin: 0;
-        margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
+        margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
 
-        svg {
+        span.dnasg-icon {
             display: none;
         }
         &:first-of-type {
+            padding-left: 0;
+
             ul {
-                margin-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.6)};
+                margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
             }
-            svg {
-                display: inline-block;
+            span.dnasg-icon {
+                display: block;
+                margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
             }
-            padding-left: 0;
         }
     }
 `;
-const CategoryHeader = styled['default'].h4 `
+const CategoryHeader = styled["default"].button `
     display: flex;
     align-items: center;
-    margin: 0;
-    padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
-    border-top: 1px solid #cfcfcf;
-    transition: border-bottom 0s linear ${props => (props.active ? '0s' : '0.3s')};
-    border-bottom: 1px solid ${props => (props.active ? '#cfcfcf' : '#e7e7e7')};
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
-    color: ${props => props.theme.color.slateGray};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    transition: border-top 0s linear ${({ active }) => (active ? '0s' : '0.3s')};
+    border: 0;
+    border-top: 1px solid ${theme["default"].color.default.white + theme["default"].color.transparency.T20};
+    font-size: ${theme["default"].fontSize.default};
+    font-family: ${theme["default"].fontFamily.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+    line-height: ${theme["default"].lineHeight.default};
+    color: ${theme["default"].color.text.white};
+    background: transparent;
     align-content: center;
 
-    &:hover,
-    &:active {
-        color: ${props => props.theme.color.hotPink};
-    }
     &:hover {
         cursor: pointer;
     }
+
     span.dnasg-icon svg {
         transition: transform 0.2s ease-in;
-        transform: ${props => (props.active ? 'rotate(45deg)' : 'rotate(0deg)')};
+        transform: ${({ active }) => (active ? 'rotate(45deg)' : 'rotate(0deg)')};
     }
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.6)} 0 0 0;
-        border: none;
+
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+        padding: 0;
+        border: 0;
     }
 `;
-const CategoryLinks = styled['default'].ul `
-    background: #efefef;
-    transition: all 0.3s ease-in-out, padding 0s linear ${props => (props.active ? '0s' : '0.3s')};
+const CategoryLinks = styled["default"].ul `
+    display: ${({ active }) => (active ? 'block' : 'none')};
+    background: ${theme["default"].color.background.plum.E01};
+    transition: all 0.3s ease-in-out, padding 0s linear ${({ active }) => (active ? '0s' : '0.3s')};
     margin: 0;
-
     overflow: hidden;
-    padding: ${props => (props.active ? '1' : '0')}rem
-        ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 3.6)};
-    max-height: ${props => (props.active ? '500' : '0')}px;
+    padding: ${({ active }) => (active ? '1' : '0')}rem
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)} ${({ active }) => (active ? '1' : '0')}rem
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+    max-height: ${({ active }) => (active ? '500' : '0')}px;
     list-style-type: none;
     list-style-position: outside;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         background: none;
         padding: 0;
-        padding-top: ${props => (props.active ? '1' : '0')}rem;
+        padding-top: ${({ active }) => (active ? '1' : '0')}rem;
     }
 `;
-const CategoryLinksListEl = styled['default'].li `
-    padding-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2.4)};
+const CategoryLinksListEl = styled["default"].li `
+    padding-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.4)};
     &:last-of-type {
         padding-bottom: 0;
     }
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         padding: 0;
     }
     a {
-        line-height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2.6)};
-        color: ${props => props.theme.color.slateGray};
+        line-height: ${theme["default"].lineHeight.xl};
+        color: ${theme["default"].color.default.white};
         &:hover,
         &:focus,
         &:active {
-            color: ${props => props.theme.color.hotPink};
+            color: ${theme["default"].color.text.white + theme["default"].color.transparency.T80};
             text-decoration: none;
         }
     }
 `;
-const SmallText = styled['default'].p `
+const SmallText = styled["default"].p `
     margin: 0;
     padding: 0;
-    margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 0.2)};
-    line-height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
-    color: ${props => props.theme.color.slateGray};
-    font-size: ${props => props.theme.fontSize.xs};
+    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    line-height: ${theme["default"].lineHeight.s};
+    font-size: ${theme["default"].fontSize.xs};
 `;
-const LanguageLinksContainer = styled['default'].div `
+const LanguageLinksContainer = styled["default"].div `
     text-align: center;
     flex: 1 1 auto;
-    font-weight: ${props => props.theme.fontWeight.black};
+    font-weight: ${theme["default"].fontWeight.black};
+    border-bottom: 1px solid ${theme["default"].color.default.white + theme["default"].color.transparency.T20};
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        border: 0;
+    }
     a {
-        padding: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 0.8)};
+        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.8)};
     }
 `;
-const SocialMediaLinksContainer = styled['default'].div `
+const SocialMediaLinksContainer = styled["default"].div `
     white-space: nowrap;
     text-align: center;
     a {
-        padding: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
     }
 `;
-const GeneralInformationContainer = styled['default'].div `
+const GeneralInformationContainer = styled["default"].div `
     text-align: center;
     flex-grow: 1;
     flex-shrink: 1;
 `;
-const CallToActionButton = styled['default'].div `
-    a {
-        position: relative;
-        padding: 0.68rem ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)};
-        min-width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 11.5)};
-        color: ${props => props.theme.color.black};
+const CallToActionButton = styled["default"].a `
+    display: inline-block;
+    text-align: center;
+    font-family: ${theme["default"].fontFamily.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    min-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 12.5)};
+    width: 100%;
+    cursor: pointer;
+    color: ${theme["default"].color.text.white};
+    background-color: transparent;
+    border-radius: ${theme["default"].radius.pill};
+    border: 2px solid ${theme["default"].color.default.white};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.6)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+    text-decoration: none;
+
+    &:focus {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${theme["default"].color.default.white};
+        border: 2px solid ${theme["default"].color.focus.dark};
+        outline: 2px solid ${theme["default"].color.focus.light};
+    }
+
+    &:hover {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${theme["default"].color.default.white};
         text-decoration: none;
-        text-align: center;
-        font-weight: ${props => props.theme.fontWeight.bold};
-        display: inline-block;
-        border: 1px solid ${props => props.theme.color.black};
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        &:hover,
-        &:active {
-            background: ${props => props.theme.color.black};
-            color: ${props => props.theme.color.white};
-        }
-        &:focus {
-            color: ${props => props.theme.color.black};
-            background: ${props => props.theme.color.white};
-            span {
-                text-decoration: underline;
-                background: none;
-            }
-        }
     }
-    span {
-        white-space: nowrap;
+
+    &:active {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${theme["default"].color.default.white + theme["default"].color.transparency.T90};
+        border: 2px solid ${theme["default"].color.default.white + theme["default"].color.transparency.T90};
+        outline: none;
     }
 `;
-const GeneralInformationLink = styled['default'].a `
+const GeneralInformationLink = styled["default"].a `
+    text-decoration: underline;
+
     &:after {
         content: '|';
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
     }
+
     &:hover,
     &:active,
     &:focus {
-        text-decoration: none;
-        &:after {
-            color: ${props => props.theme.color.black};
-        }
+        text-decoration: underline;
     }
 `;
-const isMenuItemLinkAbsolute = (linkUrl) => linkUrl.includes('http') || linkUrl.startsWith('tel:');
 const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
     title: e.toUpperCase(),
     url: languagesObject.urls[e],
 }));
-const LinkModifier = ({ linkUrl, children }) => {
-    const { nextJSLinkComponent: NextJSLinkComponent } = React__default['default'].useContext(FooterContext['default']);
-    if (NextJSLinkComponent && !isMenuItemLinkAbsolute(linkUrl)) {
-        return (React__default['default'].createElement(NextJSLinkComponent, { linkUrl: linkUrl },
-            React__default['default'].createElement("a", { href: linkUrl }, children)));
-    }
-    return React__default['default'].createElement("a", { href: linkUrl }, children);
-};
 const Services = ({ services }) => {
-    const { collapseSize, language } = React__default['default'].useContext(FooterContext['default']);
-    return (React__default['default'].createElement(ServicesContainer, { collapseSize: collapseSize }, services &&
-        services.map((service, index) => (React__default['default'].createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
-            React__default['default'].createElement(CallToActionButton, null,
-                React__default['default'].createElement(LinkModifier, { linkUrl: service.urls[language] },
-                    React__default['default'].createElement("span", null, service.titles[language]))),
-            React__default['default'].createElement(SmallText, null, service.descriptions[language]))))));
+    const { collapseSize, language } = React__default["default"].useContext(FooterContext["default"]);
+    return (React__default["default"].createElement(ServicesContainer, { collapseSize: collapseSize }, services === null || services === void 0 ? void 0 : services.map((service, index) => (React__default["default"].createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
+        React__default["default"].createElement(CallToActionButton, { href: service.urls[language] }, service.titles[language]),
+        React__default["default"].createElement(SmallText, null, service.descriptions[language]))))));
 };
 const CategoryDisplay = ({ category, currentIndex }) => {
     const categoryLinkArray = category.category;
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React__default['default'].useContext(FooterContext['default']);
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React__default["default"].useContext(FooterContext["default"]);
     const toggleCollapse = () => {
         if (!isMobileFooter) {
             setIsCollapsed({
@@ -249,23 +254,25 @@ const CategoryDisplay = ({ category, currentIndex }) => {
             setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
-    return (React__default['default'].createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
-        React__default['default'].createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
-            React__default['default'].createElement(Icon['default'], { icon: hlPlus['default'], size: "1rem", position: "left" }),
+    return (React__default["default"].createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
+        React__default["default"].createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
+            React__default["default"].createElement(Icon["default"], { icon: hlPlus["default"], size: "1rem" }),
             category.description[language]),
-        React__default['default'].createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React__default['default'].createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
-            React__default['default'].createElement(LinkModifier, { linkUrl: categoryLink.urls[language] }, categoryLink.titles[language])))))));
+        React__default["default"].createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React__default["default"].createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
+            React__default["default"].createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language])))))));
 };
 const Categories = ({ categories }) => {
-    const { collapseSize } = React__default['default'].useContext(FooterContext['default']);
-    return (React__default['default'].createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories &&
-        categories.map((category, index) => (React__default['default'].createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
+    const { collapseSize } = React__default["default"].useContext(FooterContext["default"]);
+    return (React__default["default"].createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default["default"].createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
+};
+const LanguageLinks = ({ languages }) => {
+    const { collapseSize } = React__default["default"].useContext(FooterContext["default"]);
+    return (React__default["default"].createElement(LanguageLinksContainer, { collapseSize: collapseSize, "data-testid": "language-selector-section" }, languages.map((language, index) => (React__default["default"].createElement("a", { href: language.url, key: `language-link-${index}` }, language.title)))));
 };
-const LanguageLinks = ({ languages }) => (React__default['default'].createElement(LanguageLinksContainer, { "data-testid": "language-selector-section" }, languages.map((language, index) => (React__default['default'].createElement(LinkModifier, { linkUrl: language.url, key: `language-link-${index}` }, language.title)))));
 const GeneralInformation = ({ generalInformation }) => {
-    const { language } = React__default['default'].useContext(FooterContext['default']);
+    const { language } = React__default["default"].useContext(FooterContext["default"]);
     if (!generalInformation) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
     const currentYear = new Date().getFullYear();
     const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
@@ -273,23 +280,23 @@ const GeneralInformation = ({ generalInformation }) => {
         cookie: 'ot-sdk-show-settings',
     };
     const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
-    return (React__default['default'].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
-        React__default['default'].createElement("span", null,
-            orderedGeneralInformation.map((item, index) => item && (React__default['default'].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
+    return (React__default["default"].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
+        React__default["default"].createElement("span", null,
+            orderedGeneralInformation.map((item, index) => item && (React__default["default"].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
             "DNA \u00A9",
             currentYear)));
 };
 const SocialMediaLinks = ({ socialMedia }) => {
-    const { language } = React__default['default'].useContext(FooterContext['default']);
+    const { language } = React__default["default"].useContext(FooterContext["default"]);
     const socialMediaKeys = Object.keys(socialMedia || {}).filter((key) => key !== '__typename');
-    return (React__default['default'].createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
+    return (React__default["default"].createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
         socialMediaKeys.map((socialMediaKey) => {
             const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
                 socialMediaKey.toLowerCase().slice(1);
             const currentObject = socialMedia[socialMediaKey];
-            const currentMediaUrl = currentObject && currentObject.urls && currentObject.urls[language];
-            return (React__default['default'].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React__default['default'].createElement(Icon['default'], { name: socialMediaKey.toLowerCase() })));
+            const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
+            return (React__default["default"].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
+                React__default["default"].createElement(Icon["default"], { name: socialMediaKey.toLowerCase() })));
         })));
 };
 

package/build/cjs/components/Footer/Footer.d.ts

@@ -4,23 +4,18 @@ interface FooterItemProps {
     businessId: string;
     footerNavigation: FooterNavigationProps;
 }
-interface IsCollapsedProps {
+export interface IsCollapsedProps {
     [key: number]: boolean;
     0: boolean;
     1: boolean;
     2: boolean;
 }
 export interface FooterProps {
-    children?: React.ReactNode;
     items?: FooterItemProps;
-    isMobileFooter?: boolean;
     language: string;
     zIndex?: number;
     collapseSize: number;
-    nextJSLinkComponent?: React.FC<any>;
-    isCollapsed: IsCollapsedProps;
-    setIsCollapsed: (obj: IsCollapsedProps) => void;
 }
-declare const _default: React.ComponentType<any>;
 /** @component */
+declare const _default: React.FunctionComponent<any>;
 export default _default;

package/build/cjs/components/Footer/Footer.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var withSizes = require('react-sizes');
+var useWindowSize = require('../../hooks/useWindowSize.js');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var breakpoints = require('../../themes/themeComponents/breakpoints.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var FooterComponents = require('./Components/FooterComponents.js');
 var FooterContext = require('./context/FooterContext.js');
@@ -12,49 +14,44 @@ var FooterContext = require('./context/FooterContext.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var withSizes__default = /*#__PURE__*/_interopDefaultLegacy(withSizes);
 
-const BottomSection = styled['default'].div `
+const BottomSection = styled["default"].div `
     display: flex;
     justify-content: space-between;
     align-content: center;
     align-items: center;
     padding: 0;
-    padding-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
+    padding-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
     flex-wrap: wrap;
+    border-top: 1px solid ${theme["default"].color.text.white + theme["default"].color.transparency.T20};
+
     > div {
         width: 100%;
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
-        &:first-of-type {
-            border-bottom: 1px solid #cfcfcf;
-        }
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
     }
     a {
-        color: ${props => props.theme.color.slateGray};
+        color: ${theme["default"].color.text.white};
         &:hover,
         &:focus,
         &:active {
-            color: ${props => props.theme.color.hotPink};
-            text-decoration: none;
+            color: ${theme["default"].color.text.white + theme["default"].color.transparency.T80};
         }
     }
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         > div {
             width: auto;
             padding: 0;
-            &:first-of-type {
-                border-bottom: none;
-            }
         }
 
         flex-wrap: nowrap;
-        margin: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 3)} 0;
+        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3)} 0;
     }
 `;
-const FooterContainer = styled['default'].footer `
-    z-index: ${props => props.zIndex};
-    background: #e7e7e7;
+const FooterContainer = styled["default"].footer `
+    z-index: ${({ zIndex }) => zIndex};
+    color: ${theme["default"].color.text.white};
+    background: ${theme["default"].color.default.plum};
     margin: 0;
     /* for always placing footer on bottom of the page */
     margin-top: auto;
@@ -63,16 +60,12 @@ const FooterContainer = styled['default'].footer `
         outline: none;
     }
 `;
-const FooterWrapper = styled['default'].div `
+const FooterWrapper = styled["default"].div `
     max-width: 1290px;
     padding: 0;
     margin-left: auto;
     margin-right: auto;
 `;
-// TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
-const mapSizesToProps = ({ width }, { collapseSize }) => ({
-    isMobileFooter: Boolean(width) && width <= collapseSize,
-});
 let previousValue = false;
 const initialCollapse = {
     0: false,
@@ -80,9 +73,10 @@ const initialCollapse = {
     2: false,
 };
 /** @visibleName Footer */
-const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, isMobileFooter = false, collapseSize = 767, }) => {
+const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, collapseSize = breakpoints["default"].md, }) => {
+    const { isMobile } = useWindowSize["default"](collapseSize);
     // Resets menu states when menu content alters between mobile and desktop
-    const footerChanged = previousValue !== isMobileFooter;
+    const footerChanged = previousValue !== isMobile;
     const services = items.footerNavigation.services || [];
     const categories = items.footerNavigation.categories || [];
     const { generalInformation } = items.footerNavigation;
@@ -103,28 +97,24 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
     };
     if (footerChanged) {
         resetFooter();
-        previousValue = isMobileFooter;
+        previousValue = isMobile;
     }
-    const footerContextData = {
+    const footerContextData = React__default["default"].useMemo(() => ({
         language,
         collapseSize,
         isCollapsed,
         setIsCollapsed,
-        isMobileFooter,
-    };
-    return (React__default['default'].createElement(FooterContainer, { zIndex: zIndex },
-        React__default['default'].createElement(FooterWrapper, null,
-            React__default['default'].createElement(FooterContext['default'].Provider, { value: footerContextData },
-                Boolean(services.length) && React__default['default'].createElement(FooterComponents.Services, { services: services }),
-                Boolean(categories.length) && React__default['default'].createElement(FooterComponents.Categories, { categories: categories }),
-                React__default['default'].createElement(BottomSection, { collapseSize: collapseSize, "data-testid": "bottom-section" },
-                    Boolean(languages.length) && React__default['default'].createElement(FooterComponents.LanguageLinks, { languages: languages }),
-                    generalInformation && (React__default['default'].createElement(FooterComponents.GeneralInformation, { generalInformation: generalInformation })),
-                    socialMedia && React__default['default'].createElement(FooterComponents.SocialMediaLinks, { socialMedia: socialMedia }))))));
-};
-/** @component */
-// TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
-// @ts-ignore
-var Footer$1 = withSizes__default['default'](mapSizesToProps)(Footer);
+        isMobileFooter: isMobile,
+    }), [collapseSize, isCollapsed, isMobile, language]);
+    return (React__default["default"].createElement(FooterContainer, { zIndex: zIndex },
+        React__default["default"].createElement(FooterWrapper, null,
+            React__default["default"].createElement(FooterContext["default"].Provider, { value: footerContextData },
+                Boolean(services.length) && React__default["default"].createElement(FooterComponents.Services, { services: services }),
+                Boolean(categories.length) && React__default["default"].createElement(FooterComponents.Categories, { categories: categories }),
+                React__default["default"].createElement(BottomSection, { collapseSize: collapseSize, "data-testid": "bottom-section" },
+                    Boolean(languages.length) && React__default["default"].createElement(FooterComponents.LanguageLinks, { languages: languages }),
+                    generalInformation && (React__default["default"].createElement(FooterComponents.GeneralInformation, { generalInformation: generalInformation })),
+                    socialMedia && React__default["default"].createElement(FooterComponents.SocialMediaLinks, { socialMedia: socialMedia }))))));
+};
 
-exports.default = Footer$1;
+exports["default"] = Footer;

package/build/cjs/components/Footer/context/FooterContext.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
-import type { FooterProps } from '../Footer';
-declare const FooterContext: React.Context<FooterProps>;
+import type { FooterProps, IsCollapsedProps } from '../Footer';
+interface FooterContextProps extends Pick<FooterProps, 'collapseSize' | 'language'> {
+    isCollapsed: IsCollapsedProps;
+    setIsCollapsed: React.Dispatch<React.SetStateAction<IsCollapsedProps>>;
+    isMobileFooter?: boolean;
+}
+declare const FooterContext: React.Context<FooterContextProps>;
 export default FooterContext;