@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React__default from 'react';
 import styled from '../../../themes/styled.js';
+import theme from '../../../themes/theme.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
 import 'tslib';
@@ -9,9 +10,9 @@ import FooterContext from '../context/FooterContext.js';
 const ServicesContainer = styled.div `
     display: flex;
     justify-content: space-between;
-    padding: ${props => getMultipliedSize(props.theme.base.baseHeight, 2)};
+    padding: ${getMultipliedSize(theme.base.baseHeight, 2)};
     flex-wrap: wrap;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         flex-wrap: nowrap;
     }
 `;
@@ -20,9 +21,9 @@ const ServiceWrapper = styled.div `
     width: 100%;
     overflow: hidden;
     flex-direction: column;
-    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 2)};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding-left: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 2)};
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        padding-left: ${getMultipliedSize(theme.base.baseHeight, 4)};
         margin-bottom: 0;
         &:first-of-type {
             padding-left: 0;
@@ -34,10 +35,9 @@ const CategoryContainer = styled.div `
     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 => getMultipliedSize(props.theme.base.baseHeight, 2)};
+        margin: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     }
 `;
 const CategoryWrapper = styled.div `
@@ -46,86 +46,94 @@ const CategoryWrapper = styled.div `
     overflow: hidden;
     flex-direction: column;
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding-left: ${props => getMultipliedSize(props.theme.base.baseWidth, 4)};
+    span.dnasg-icon {
+        margin-right: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+    }
+
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        padding-left: ${getMultipliedSize(theme.base.baseWidth, 4)};
         margin: 0;
-        margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 2)};
+        margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 2)};
 
-        svg {
+        span.dnasg-icon {
             display: none;
         }
         &:first-of-type {
+            padding-left: 0;
+
             ul {
-                margin-left: ${props => getMultipliedSize(props.theme.base.baseWidth, 1.6)};
+                margin-left: ${getMultipliedSize(theme.base.baseWidth, 2)};
             }
-            svg {
-                display: inline-block;
+            span.dnasg-icon {
+                display: block;
+                margin-right: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
             }
-            padding-left: 0;
         }
     }
 `;
-const CategoryHeader = styled.h4 `
+const CategoryHeader = styled.button `
     display: flex;
     align-items: center;
-    margin: 0;
-    padding: ${props => 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: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    transition: border-top 0s linear ${({ active }) => (active ? '0s' : '0.3s')};
+    border: 0;
+    border-top: 1px solid ${theme.color.default.white + theme.color.transparency.T20};
+    font-size: ${theme.fontSize.default};
+    font-family: ${theme.fontFamily.default};
+    font-weight: ${theme.fontWeight.bold};
+    line-height: ${theme.lineHeight.default};
+    color: ${theme.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 => getMultipliedSize(props.theme.base.baseWidth, 1.6)} 0 0 0;
-        border: none;
+
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        margin-top: ${getMultipliedSize(theme.base.baseHeight, 1)};
+        padding: 0;
+        border: 0;
     }
 `;
 const CategoryLinks = styled.ul `
-    background: #efefef;
-    transition: all 0.3s ease-in-out, padding 0s linear ${props => (props.active ? '0s' : '0.3s')};
+    display: ${({ active }) => (active ? 'block' : 'none')};
+    background: ${theme.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 => getMultipliedSize(props.theme.base.baseWidth, 3.6)};
-    max-height: ${props => (props.active ? '500' : '0')}px;
+    padding: ${({ active }) => (active ? '1' : '0')}rem
+        ${getMultipliedSize(theme.base.baseWidth, 2)} ${({ active }) => (active ? '1' : '0')}rem
+        ${getMultipliedSize(theme.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.li `
-    padding-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 2.4)};
+    padding-bottom: ${getMultipliedSize(theme.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 => getMultipliedSize(props.theme.base.baseHeight, 2.6)};
-        color: ${props => props.theme.color.slateGray};
+        line-height: ${theme.lineHeight.xl};
+        color: ${theme.color.default.white};
         &:hover,
         &:focus,
         &:active {
-            color: ${props => props.theme.color.hotPink};
+            color: ${theme.color.text.white + theme.color.transparency.T80};
             text-decoration: none;
         }
     }
@@ -133,24 +141,27 @@ const CategoryLinksListEl = styled.li `
 const SmallText = styled.p `
     margin: 0;
     padding: 0;
-    margin-top: ${props => getMultipliedSize(props.theme.base.baseWidth, 0.2)};
-    line-height: ${props => getMultipliedSize(props.theme.base.baseHeight, 2)};
-    color: ${props => props.theme.color.slateGray};
-    font-size: ${props => props.theme.fontSize.xs};
+    margin-top: ${getMultipliedSize(theme.base.baseHeight, 1)};
+    line-height: ${theme.lineHeight.s};
+    font-size: ${theme.fontSize.xs};
 `;
 const LanguageLinksContainer = styled.div `
     text-align: center;
     flex: 1 1 auto;
-    font-weight: ${props => props.theme.fontWeight.black};
+    font-weight: ${theme.fontWeight.black};
+    border-bottom: 1px solid ${theme.color.default.white + theme.color.transparency.T20};
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        border: 0;
+    }
     a {
-        padding: 0 ${props => getMultipliedSize(props.theme.base.baseWidth, 0.8)};
+        padding: 0 ${getMultipliedSize(theme.base.baseWidth, 0.8)};
     }
 `;
 const SocialMediaLinksContainer = styled.div `
     white-space: nowrap;
     text-align: center;
     a {
-        padding: 0 ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
     }
 `;
 const GeneralInformationContainer = styled.div `
@@ -158,77 +169,71 @@ const GeneralInformationContainer = styled.div `
     flex-grow: 1;
     flex-shrink: 1;
 `;
-const CallToActionButton = styled.div `
-    a {
-        position: relative;
-        padding: 0.68rem ${props => getMultipliedSize(props.theme.base.baseHeight, 1)};
-        min-width: ${props => getMultipliedSize(props.theme.base.baseWidth, 11.5)};
-        color: ${props => props.theme.color.black};
+const CallToActionButton = styled.a `
+    display: inline-block;
+    text-align: center;
+    font-family: ${theme.fontFamily.default};
+    font-weight: ${theme.fontWeight.bold};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    min-width: ${getMultipliedSize(theme.base.baseWidth, 12.5)};
+    width: 100%;
+    cursor: pointer;
+    color: ${theme.color.text.white};
+    background-color: transparent;
+    border-radius: ${theme.radius.pill};
+    border: 2px solid ${theme.color.default.white};
+    padding: ${getMultipliedSize(theme.base.baseHeight, 0.6)}
+        ${getMultipliedSize(theme.base.baseWidth, 4)};
+    text-decoration: none;
+
+    &:focus {
+        color: ${theme.color.text.plum};
+        background-color: ${theme.color.default.white};
+        border: 2px solid ${theme.color.focus.dark};
+        outline: 2px solid ${theme.color.focus.light};
+    }
+
+    &:hover {
+        color: ${theme.color.text.plum};
+        background-color: ${theme.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.color.text.plum};
+        background-color: ${theme.color.default.white + theme.color.transparency.T90};
+        border: 2px solid ${theme.color.default.white + theme.color.transparency.T90};
+        outline: none;
     }
 `;
 const GeneralInformationLink = styled.a `
+    text-decoration: underline;
+
     &:after {
         content: '|';
-        padding: ${props => getMultipliedSize(props.theme.base.baseHeight, 1)};
+        padding: ${getMultipliedSize(theme.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.useContext(FooterContext);
-    if (NextJSLinkComponent && !isMenuItemLinkAbsolute(linkUrl)) {
-        return (React.createElement(NextJSLinkComponent, { linkUrl: linkUrl },
-            React.createElement("a", { href: linkUrl }, children)));
-    }
-    return React.createElement("a", { href: linkUrl }, children);
-};
 const Services = ({ services }) => {
-    const { collapseSize, language } = React.useContext(FooterContext);
-    return (React.createElement(ServicesContainer, { collapseSize: collapseSize }, services &&
-        services.map((service, index) => (React.createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
-            React.createElement(CallToActionButton, null,
-                React.createElement(LinkModifier, { linkUrl: service.urls[language] },
-                    React.createElement("span", null, service.titles[language]))),
-            React.createElement(SmallText, null, service.descriptions[language]))))));
+    const { collapseSize, language } = React__default.useContext(FooterContext);
+    return (React__default.createElement(ServicesContainer, { collapseSize: collapseSize }, services === null || services === void 0 ? void 0 : services.map((service, index) => (React__default.createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
+        React__default.createElement(CallToActionButton, { href: service.urls[language] }, service.titles[language]),
+        React__default.createElement(SmallText, null, service.descriptions[language]))))));
 };
 const CategoryDisplay = ({ category, currentIndex }) => {
     const categoryLinkArray = category.category;
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext);
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React__default.useContext(FooterContext);
     const toggleCollapse = () => {
         if (!isMobileFooter) {
             setIsCollapsed({
@@ -241,23 +246,25 @@ const CategoryDisplay = ({ category, currentIndex }) => {
             setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
-    return (React.createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
-        React.createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
-            React.createElement(Icon, { icon: hlPlus, size: "1rem", position: "left" }),
+    return (React__default.createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
+        React__default.createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
+            React__default.createElement(Icon, { icon: hlPlus, size: "1rem" }),
             category.description[language]),
-        React.createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
-            React.createElement(LinkModifier, { linkUrl: categoryLink.urls[language] }, categoryLink.titles[language])))))));
+        React__default.createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React__default.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
+            React__default.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language])))))));
 };
 const Categories = ({ categories }) => {
-    const { collapseSize } = React.useContext(FooterContext);
-    return (React.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories &&
-        categories.map((category, index) => (React.createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
+    const { collapseSize } = React__default.useContext(FooterContext);
+    return (React__default.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
+};
+const LanguageLinks = ({ languages }) => {
+    const { collapseSize } = React__default.useContext(FooterContext);
+    return (React__default.createElement(LanguageLinksContainer, { collapseSize: collapseSize, "data-testid": "language-selector-section" }, languages.map((language, index) => (React__default.createElement("a", { href: language.url, key: `language-link-${index}` }, language.title)))));
 };
-const LanguageLinks = ({ languages }) => (React.createElement(LanguageLinksContainer, { "data-testid": "language-selector-section" }, languages.map((language, index) => (React.createElement(LinkModifier, { linkUrl: language.url, key: `language-link-${index}` }, language.title)))));
 const GeneralInformation = ({ generalInformation }) => {
-    const { language } = React.useContext(FooterContext);
+    const { language } = React__default.useContext(FooterContext);
     if (!generalInformation) {
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }
     const currentYear = new Date().getFullYear();
     const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
@@ -265,23 +272,23 @@ const GeneralInformation = ({ generalInformation }) => {
         cookie: 'ot-sdk-show-settings',
     };
     const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
-    return (React.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
-        React.createElement("span", null,
-            orderedGeneralInformation.map((item, index) => item && (React.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.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
+        React__default.createElement("span", null,
+            orderedGeneralInformation.map((item, index) => item && (React__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.useContext(FooterContext);
+    const { language } = React__default.useContext(FooterContext);
     const socialMediaKeys = Object.keys(socialMedia || {}).filter((key) => key !== '__typename');
-    return (React.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
+    return (React__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.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React.createElement(Icon, { name: socialMediaKey.toLowerCase() })));
+            const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
+            return (React__default.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
+                React__default.createElement(Icon, { name: socialMediaKey.toLowerCase() })));
         })));
 };
 

package/build/es/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>;
+declare const _default: React.FunctionComponent<any>;
 /** @component */
 export default _default;

package/build/es/components/Footer/Footer.js

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
-import withSizes from 'react-sizes';
+import React__default, { useState } from 'react';
+import useWindowSize from '../../hooks/useWindowSize.js';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import breakpoints from '../../themes/themeComponents/breakpoints.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import { mapCorporateSelector, Services, Categories, LanguageLinks, GeneralInformation, SocialMediaLinks } from './Components/FooterComponents.js';
 import FooterContext from './context/FooterContext.js';
@@ -11,41 +13,37 @@ const BottomSection = styled.div `
     align-content: center;
     align-items: center;
     padding: 0;
-    padding-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
+    padding-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
     flex-wrap: wrap;
+    border-top: 1px solid ${theme.color.text.white + theme.color.transparency.T20};
+
     > div {
         width: 100%;
-        padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
-        &:first-of-type {
-            border-bottom: 1px solid #cfcfcf;
-        }
+        padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
     }
     a {
-        color: ${props => props.theme.color.slateGray};
+        color: ${theme.color.text.white};
         &:hover,
         &:focus,
         &:active {
-            color: ${props => props.theme.color.hotPink};
-            text-decoration: none;
+            color: ${theme.color.text.white + theme.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 => getMultipliedSize(props.theme.base.baseWidth, 2)};
-        padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 3)} 0;
+        margin: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 3)} 0;
     }
 `;
 const FooterContainer = styled.footer `
-    z-index: ${props => props.zIndex};
-    background: #e7e7e7;
+    z-index: ${({ zIndex }) => zIndex};
+    color: ${theme.color.text.white};
+    background: ${theme.color.default.plum};
     margin: 0;
     /* for always placing footer on bottom of the page */
     margin-top: auto;
@@ -60,10 +58,6 @@ const FooterWrapper = styled.div `
     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,
@@ -71,9 +65,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.md, }) => {
+    const { isMobile } = useWindowSize(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;
@@ -94,28 +89,24 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
     };
     if (footerChanged) {
         resetFooter();
-        previousValue = isMobileFooter;
+        previousValue = isMobile;
     }
-    const footerContextData = {
+    const footerContextData = React__default.useMemo(() => ({
         language,
         collapseSize,
         isCollapsed,
         setIsCollapsed,
-        isMobileFooter,
-    };
-    return (React.createElement(FooterContainer, { zIndex: zIndex },
-        React.createElement(FooterWrapper, null,
-            React.createElement(FooterContext.Provider, { value: footerContextData },
-                Boolean(services.length) && React.createElement(Services, { services: services }),
-                Boolean(categories.length) && React.createElement(Categories, { categories: categories }),
-                React.createElement(BottomSection, { collapseSize: collapseSize, "data-testid": "bottom-section" },
-                    Boolean(languages.length) && React.createElement(LanguageLinks, { languages: languages }),
-                    generalInformation && (React.createElement(GeneralInformation, { generalInformation: generalInformation })),
-                    socialMedia && React.createElement(SocialMediaLinks, { socialMedia: socialMedia }))))));
-};
-/** @component */
-// TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
-// @ts-ignore
-var Footer$1 = withSizes(mapSizesToProps)(Footer);
+        isMobileFooter: isMobile,
+    }), [collapseSize, isCollapsed, isMobile, language]);
+    return (React__default.createElement(FooterContainer, { zIndex: zIndex },
+        React__default.createElement(FooterWrapper, null,
+            React__default.createElement(FooterContext.Provider, { value: footerContextData },
+                Boolean(services.length) && React__default.createElement(Services, { services: services }),
+                Boolean(categories.length) && React__default.createElement(Categories, { categories: categories }),
+                React__default.createElement(BottomSection, { collapseSize: collapseSize, "data-testid": "bottom-section" },
+                    Boolean(languages.length) && React__default.createElement(LanguageLinks, { languages: languages }),
+                    generalInformation && (React__default.createElement(GeneralInformation, { generalInformation: generalInformation })),
+                    socialMedia && React__default.createElement(SocialMediaLinks, { socialMedia: socialMedia }))))));
+};
 
-export default Footer$1;
+export { Footer as default };

package/build/es/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;

package/build/es/components/Footer/context/FooterContext.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React__default from 'react';
+import breakpoints from '../../../themes/themeComponents/breakpoints.js';
 
-const FooterContext = React.createContext({
+const FooterContext = React__default.createContext({
     language: 'fi',
-    collapseSize: 767,
+    collapseSize: breakpoints.md,
     isCollapsed: {
         0: false,
         1: false,
@@ -11,4 +12,4 @@ const FooterContext = React.createContext({
     setIsCollapsed: () => null,
 });
 
-export default FooterContext;
+export { FooterContext as default };

package/build/es/components/Helper/Helper.js

@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import * as React from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
@@ -17,8 +17,8 @@ const HelperIcon = styled.span `
     vertical-align: middle;
     text-align: center;
     font-weight: ${p => p.theme.fontWeight.bold};
-    color: ${p => p.theme.color.white};
-    background-color: ${p => p.theme.color.black};
+    color: ${p => p.theme.color.text.white};
+    background-color: ${p => p.theme.color.default.black};
     border-radius: 50%;
     height: 1rem;
     min-width: 1rem;
@@ -26,7 +26,7 @@ const HelperIcon = styled.span `
     font-size: ${p => p.theme.fontSize.s};
     line-height: ${p => p.theme.lineHeight.xs};
 `;
-const Helper = ({ left, right, className, 'data-tip': dataTip, 'data-for': dataFor, }) => (createElement(Container, { left: left, right: right, className: className, "data-tip": dataTip, "data-for": dataFor },
-    createElement(HelperIcon, null, "?")));
+const Helper = ({ left, right, className, 'data-tip': dataTip, 'data-for': dataFor, }) => (React.createElement(Container, { left: left, right: right, className: className, "data-tip": dataTip, "data-for": dataFor },
+    React.createElement(HelperIcon, null, "?")));
 
-export default Helper;
+export { Helper as default };

package/build/es/components/Icon/Icon.d.ts

@@ -40,21 +40,10 @@ export interface Props extends Partial<IconProps> {
      * @param {Position} left Icon component is on the left side of content, add right margin
      * @param {Position} right Icon component is on the right side of content, add left margin
      * @param {Position} middle Icon component is in the middle of content, add left and right margins
+     *
      * @default false
      */
     position?: Position;
-    /**
-     * Indicates that this component is on left side of other content and adds an appropriate right margin.
-     *
-     * @deprecated Use property `position`
-     */
-    left?: boolean;
-    /**
-     * Indicates that this component is on right side of other contents and adds an appropriate left margin.
-     *
-     * @deprecated Use property `position`
-     */
-    right?: boolean;
     /**
      * Allows to pass a custom className
      */