@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/es/components/EmptyState/EmptyState.js

@@ -1,42 +1,25 @@
-import React from 'react';
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { getMultipliedSize, media } from '../../utils/styledUtils.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
 import hlInfo from '../Icons/hlInfo.js';
 
-const InfoContainer = styled.div `
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    background: ${theme.color.grayBg};
-    width: 100%;
-    height: ${getMultipliedSize(theme.base.baseWidth, 14)};
-    padding: ${getMultipliedSize(theme.base.baseWidth, 2)}
-        ${getMultipliedSize(theme.base.baseWidth, 1)} ${getMultipliedSize(theme.base.baseWidth, 1)};
-
-    span.dnasg-icon > svg {
-        margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    }
-
-    ${media.md `
-        padding: ${getMultipliedSize(theme.base.baseWidth, 2.5)};
-    `}
+const ContentWrapper = styled.div `
+    display: grid;
+    grid-gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    justify-items: center;
+    line-height: ${theme.lineHeight.default};
 `;
 /** @visibleName Empty State */
-const EmptyState = ({ message, icon = hlInfo, iconSize = '2rem', 'data-testid': dataTestId, }) => {
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const renderIcon = () => {
-        if (typeof icon === 'string') {
-            return React.createElement(Icon, { name: icon, size: iconSize, color: theme.color.hotPink });
-        }
-        return React.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.hotPink });
-    };
-    return (React.createElement(InfoContainer, { "data-testid": dataTestId },
-        renderIcon(),
-        message));
+const EmptyState = (_a) => {
+    var { icon = hlInfo, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["icon", "iconSize", 'data-testid']);
+    return (React__default.createElement(Box, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+        React__default.createElement(ContentWrapper, null,
+            React__default.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.default.pink }),
+            React__default.createElement("div", null, props.children))));
 };
 
-export default EmptyState;
+export { EmptyState as default };

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

@@ -0,0 +1,42 @@
+import React from 'react';
+type Position = 'top' | 'bottom';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to set position of Floater component relative to its nearest scrolling ancestor and containing block
+     *
+     * @param {Position} top Component sticks to the top of its nearest scrolling ancestor
+     * @param {Position} bottom Component sticks to the bottom of its nearest scrolling ancestor
+     *
+     * @default top
+     */
+    position?: Position;
+    /**
+     * Allows to pass a custom offset
+     *
+     * @default '0'
+     */
+    offset?: string;
+    /**
+     * Allows to pass a custom z-index CSS property
+     */
+    zIndex?: string;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Floater: ({ position, offset, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Floater;

package/build/es/components/Floater/Floater.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+
+const getInset = ({ position, offset }) => {
+    const insetConfig = {
+        top: [offset, 'auto', 'auto'],
+        bottom: ['auto', 'auto', offset],
+    };
+    return `inset: ${insetConfig[position].join(' ')};`;
+};
+const Element = styled__default.div `
+    position: sticky;
+    ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
+    ${({ position, offset }) => getInset({ position, offset })}
+`;
+const Floater = (_a) => {
+    var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "offset", 'data-testid']);
+    return (React__default.createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+export { Floater as default };

package/build/es/components/Footer/Components/FooterComponents.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { LangProps } from '../../../types/language.d';
 interface PrincipalProps {
     titles: LangProps;
@@ -13,7 +13,7 @@ interface CategoryArrayProps {
     currentIndex: number;
     category: CategoriesProps;
 }
-declare type CategoryProps = PrincipalProps;
+type CategoryProps = PrincipalProps;
 interface ServicesProps extends PrincipalProps {
     descriptions: LangProps;
 }
@@ -37,7 +37,7 @@ interface LanguageComponentProps {
     languages: LanguageProps[];
 }
 interface GeneralInformationComponentProps {
-    generalInformation: GeneralInformationProps;
+    generalInformation?: GeneralInformationProps;
 }
 interface GeneralInformationProps {
     privacyPolicy: PrincipalProps;
@@ -68,10 +68,10 @@ export declare const mapCorporateSelector: (languagesObject: LanguageSelectorPro
     title: string;
     url: string;
 }[];
-export declare const Services: ({ services }: FooterNavigationProps) => JSX.Element;
-export declare const CategoryDisplay: ({ category, currentIndex }: CategoryArrayProps) => JSX.Element;
-export declare const Categories: ({ categories }: FooterNavigationProps) => JSX.Element;
-export declare const LanguageLinks: ({ languages }: LanguageComponentProps) => JSX.Element;
-export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => JSX.Element;
-export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => JSX.Element;
+export declare const Services: ({ services }: FooterNavigationProps) => React.JSX.Element;
+export declare const CategoryDisplay: ({ category, currentIndex }: CategoryArrayProps) => React.JSX.Element;
+export declare const Categories: ({ categories }: FooterNavigationProps) => React.JSX.Element;
+export declare const LanguageLinks: ({ languages }: LanguageComponentProps) => React.JSX.Element;
+export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element;
+export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => React.JSX.Element;
 export {};

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