@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Filter/FilterPopover.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledInput = exports.FilterPopover = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Filter_1 = require("../../components/Filter");
+const Catalog_1 = require("../../components/Catalog");
+const FilterContent_1 = require("../../components/Filter/FilterContent");
+const hooks_1 = require("../../mocks/hooks");
+function FilterPopover({ setIsAddingFilter, filters, filterValuesCasing, }) {
+    const [filterTerm, setFilterTerm] = react_1.default.useState('');
+    const filteredFilters = filters
+        .map((filter) => {
+        const options = filter.options.filter((option) => option.value.toLowerCase().includes(filterTerm.toLowerCase()));
+        return options.length
+            ? Object.assign(Object.assign({}, filter), { filteredOptions: options }) : null;
+    })
+        .filter(Boolean);
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (react_1.default.createElement(FilterPopoverWrapper, null,
+        react_1.default.createElement(FilterPopoverHeader, null,
+            react_1.default.createElement(FilterPopoverHeaderLabel, null, "Add Filter"),
+            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate('theme.catalog.filters.done', 'Done'))),
+        react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: filterValuesCasing, isMobile: true }),
+        react_1.default.createElement(Catalog_1.FilterControls, null,
+            react_1.default.createElement(exports.StyledInput, { placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+        react_1.default.createElement(FilterContent_1.FilterItems, null, filteredFilters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
+}
+exports.FilterPopover = FilterPopover;
+const FilterPopoverWrapper = styled_components_1.default.aside `
+  position: absolute;
+  top: 0;
+  z-index: var(--z-index-popover);
+  height: 100vh;
+  overflow: auto;
+  transition: height 0.2s ease-in-out;
+  width: 100%;
+  background-color: var(--filter-popover-background-color);
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;
+const FilterPopoverHeader = styled_components_1.default.div `
+  height: var(--navbar-height);
+  padding: var(--filter-popover-header-padding);
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+  border-bottom: 1px solid var(--filter-popover-header-border-color);
+  background-color: var(--filter-popover-header-background-color);
+`;
+const FilterPopoverHeaderLabel = styled_components_1.default.div `
+  color: var(--filter-popover-header-label-color);
+  justify-self: center;
+  grid-column-start: 2;
+  font-size: var(--filter-popover-header-label-font-size);
+  font-weight: var(--filter-popover-header-label-font-weight);
+`;
+const FilterPopoverHeaderButton = styled_components_1.default.div.attrs({
+    'data-cy': 'FilterPopover/DoneButton',
+}) `
+  color: var(--filter-popover-header-button-color);
+  justify-self: end;
+  font-size: var(--filter-popover-header-button-font-size);
+  font-weight: var(--filter-popover-header-button-font-weight);
+  height: var(--filter-popover-header-button-height);
+  line-height: var(--filter-popover-header-button-height);
+`;
+exports.StyledInput = styled_components_1.default.input.attrs({ 'data-cy': 'FilterPopover/Input' }) `
+  border: var(--filter-input-border);
+  min-width: var(--filter-input-min-width);
+  width: 100%;
+  outline: none;
+  padding: var(--filter-input-padding);
+  border-radius: var(--filter-input-border-radius);
+  background-color: var(--filter-input-background-color);
+  color: var(--filter-input-color);
+  font-family: var(--filter-input-font-family);
+  font-size: var(--filter-input-font-size);
+  line-height: var(--filter-input-line-height);
+
+  &::placeholder {
+    opacity: var(--filter-input-placeholder-opacity);
+    color: var(--filter-input-placeholder-color);
+  }
+
+  &:hover {
+    color: var(--filter-input-hover-color);
+    border: var(--filter-input-hover-border);
+  }
+
+  &:focus {
+    color: var(--filter-input-focus-color);
+    border: var(--filter-input-focus-border);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--filter-input-background-color);
+  }
+`;
+//# sourceMappingURL=FilterPopover.js.map

package/lib/components/Filter/FilterTag.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FilterTagProps {
+    label: string;
+    onClick: () => void;
+}
+export declare function FilterTag({ label, onClick }: FilterTagProps): React.JSX.Element;
+export {};

package/lib/components/Filter/FilterTag.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTag = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function FilterTag({ label, onClick }) {
+    return (react_1.default.createElement(TagWrapper, { onClick: onClick },
+        react_1.default.createElement(TagLabel, null, label),
+        react_1.default.createElement(ClearIcon_1.ClearIcon, null)));
+}
+exports.FilterTag = FilterTag;
+const TagWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Filter/FilterTag' }) `
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--filter-tag-color);
+  border-radius: var(--filter-tag-border-radius);
+  border: 1px solid var(--filter-tag-border-color);
+  background-color: var(--filter-tag-background-color);
+  padding: var(--filter-tag-padding);
+  font-size: var(--filter-tag-font-size);
+  font-weight: var(--filter-tag-font-weight);
+  margin: var(--filter-tag-margin);
+`;
+const TagLabel = styled_components_1.default.div `
+  margin: var(--filter-tag-label-margin);
+`;
+//# sourceMappingURL=FilterTag.js.map

package/lib/components/Filter/FilterTags.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+interface FilterTagsProps {
+    filters: ResolvedFilter[];
+}
+export declare function FilterTags({ filters }: FilterTagsProps): React.JSX.Element;
+export {};

package/lib/components/Filter/FilterTags.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterTag_1 = require("../../components/Filter/FilterTag");
+function FilterTags({ filters }) {
+    const selectedFilters = [];
+    filters.forEach((filter) => {
+        var _a;
+        if ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) {
+            for (let selectedOption of filter.selectedOptions) {
+                selectedFilters.push({
+                    filter,
+                    selectedOption,
+                });
+            }
+        }
+    });
+    return (react_1.default.createElement(FilterTagsWrapper, null, selectedFilters.map(({ filter, selectedOption }) => (react_1.default.createElement(FilterTag_1.FilterTag, { key: `${filter.title}: ${selectedOption}`, onClick: () => filter.toggleOption(selectedOption), label: `${filter.title}: ${selectedOption}` })))));
+}
+exports.FilterTags = FilterTags;
+const FilterTagsWrapper = styled_components_1.default.div `
+  display: flex;
+`;
+//# sourceMappingURL=FilterTags.js.map

package/lib/components/Filter/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../../components/Filter/Filter';
+export * from '../../components/Filter/FilterContent';
+export * from '../../components/Filter/FilterPopover';
+export * from '../../components/Filter/FilterTags';
+export * from '../../components/Filter/FilterTag';
+export * from '../../components/Filter/styledVariables';

package/lib/components/Filter/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Filter/Filter"), exports);
+__exportStar(require("../../components/Filter/FilterContent"), exports);
+__exportStar(require("../../components/Filter/FilterPopover"), exports);
+__exportStar(require("../../components/Filter/FilterTags"), exports);
+__exportStar(require("../../components/Filter/FilterTag"), exports);
+__exportStar(require("../../components/Filter/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Filter/styledVariables.d.ts

@@ -0,0 +1 @@
+export declare const filter: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Filter/styledVariables.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filter = void 0;
+const styled_components_1 = require("styled-components");
+exports.filter = (0, styled_components_1.css) `
+  /* === Filter === */
+  /**
+  * @tokens Filters
+  */
+  --filter-group-padding: var(--spacing-base) 0 0 0;
+
+  --filter-title-font-weight: var(--font-weight-bold);
+  --filter-title-font-size: var(--font-size-base);
+  --filter-title-margin: 0 0 var(--spacing-xxs) 0;
+
+  --filter-option-font-weight: var(--font-weight-regular);
+  --filter-option-font-size: var(--font-size-base);
+  --filter-option-margin: var(--spacing-xs) 0 0 0;
+
+  --filter-option-label-font-size: var(--font-size-base);
+  --filter-option-label-font-weight: var(--font-weight-regular);
+  --filter-option-label-margin: 0 var(--spacing-xs) 0 0;
+  --filter-option-label-color: var(--text-secondary);
+
+  --filter-option-count-height: 17px;
+  --filter-option-count-color: var(--text-secondary);
+  --filter-option-count-font-size: var(--font-size-sm);
+  --filter-option-count-font-weight: var(--font-weight-regular);
+  --filter-option-count-padding: 0px var(--spacing-xxs);
+  --filter-option-count-border-radius: var(--spacing-sm);
+  --filter-option-count-border: 1px solid var(--border-primary);
+  --filter-option-count-background-color: var(--bg-overlay);
+
+  --filter-content-border-color: var(--border-secondary);
+  --filter-content-items-padding: 0 var(--spacing-lg);
+  --filter-content-clear-button-width: 100%;
+  --filter-controls-background-color: var(--bg-base);
+
+  --filter-popover-background-color: var(--bg-base);
+  --filter-popover-header-padding: var(--mobile-catalog-filter-padding-vertical) var(--mobile-catalog-filter-padding-horizontal);
+  --filter-popover-header-border-color: var(--border-secondary);
+  --filter-popover-header-background-color: var(--navbar-background-color);
+  --filter-popover-header-label-color: var(--navbar-text-color);
+  --filter-popover-header-label-font-size: var(--font-size-lg);
+  --filter-popover-header-label-font-weight: var(--font-weight-bold);
+  --filter-popover-header-button-color: var(--navbar-text-color);
+  --filter-popover-header-button-height: var(--control-height-base);
+  --filter-popover-header-button-font-size: var(--font-size-base);
+  --filter-popover-header-button-font-weight: var(--font-weight-regular);
+
+  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) 0;
+  --filter-tag-color: var(--text-primary);
+  --filter-tag-border-radius: var(--spacing-sm);
+  --filter-tag-border-color: var(--border-primary);
+  --filter-tag-background-color: var(--bg-raised);
+  --filter-tag-padding: 0 var(--spacing-xs);
+  --filter-tag-font-size: var(--font-size-sm);
+  --filter-tag-font-weight: var(--font-weight-regular);
+  --filter-tag-margin: 0 var(--spacing-xxs) 0 0;
+  --filter-tag-label-margin: 0 var(--spacing-xxs) 0 0;
+
+  --filter-input-border: 1px solid var(--border-primary);
+  --filter-input-min-width: 200px;
+  --filter-input-padding: var(--input-padding);
+  --filter-input-border-radius: var(--input-border-radius);
+  --filter-input-background-color: var(--input-background-color);
+  --filter-input-color: var(--text-secondary);
+  --filter-input-font-family: var(--font-family-base);
+  --filter-input-font-size: var(--font-size-base);
+  --filter-input-line-height: var(--input-line-height);
+  --filter-input-placeholder-opacity: 1;
+  --filter-input-placeholder-color: var(--text-placeholder);
+  --filter-input-hover-color: var(--text-primary);
+  --filter-input-hover-border: 1px solid var(--border-primary);
+  --filter-input-focus-color: var(--text-primary);
+  --filter-input-focus-border: 1px solid var(--border-primary);
+
+  --filter-add-button-margin: 0 var(--spacing-sm) 0 0;
+  --filter-add-button-padding: 0;
+  --filter-add-button-font-size: var(--font-size-base);
+  --filter-add-button-font-weight: var(--font-weight-regular);
+
+  --filter-select-min-height: var(--control-height-base);
+  --filter-select-color: var(--text-primary);
+  --filter-select-border-color: var(--border-primary);
+  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-select-padding: 0;
+  --filter-select-hover-border-color: var(--text-primary);
+  --filter-select-option-margin: 0;
+
+  --filter-date-picker-color: var(--text-primary);
+  --filter-date-picker-margin: 0 0 var(--spacing-xxs) 0;
+  --filter-date-picker-gap: var(--spacing-xs);
+  --filter-date-picker-width: 50px;
+  --filter-date-picker-tile-background: var(--color-blue-2);
+  --filter-date-picker-tile-color: var(--text-primary);
+  --filter-date-picker-tile-hover-background: var(--color-blue-3);
+  --filter-date-picker-tile-hover-color: var(--text-primary);
+  --filter-date-picker-input-width: var(--spacing-md);
+  --filter-date-picker-invalid-input-background: var(--bg-raised);
+  --filter-date-picker-button-padding: var(--spacing-xxs);
+  --filter-date-picker-icon-stroke: var(--text-secondary);
+  --filter-date-picker-icon-width: var(--spacing-sm);
+  --filter-date-picker-hover-icon-stroke: var(--text-primary);
+  --filter-date-picker-wrapper-border-color: var(--border-primary);
+  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Footer/CustomFooter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { NavGroupRecord } from '../../types/portal';
+interface FooterProps {
+    data: NavGroupRecord;
+    className?: string;
+}
+export declare function CustomFooter({ data, className }: FooterProps): JSX.Element | null;
+export {};

package/lib/components/Footer/CustomFooter.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooter = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CustomFooterNavItem_1 = require("../../components/Footer/CustomFooterNavItem");
+const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
+function CustomFooter({ data, className }) {
+    if (!data) {
+        return null;
+    }
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/CustomFooter", className: className },
+        data.links.map((navItem, index) => {
+            return (react_1.default.createElement(CustomFooterNavItem_1.CustomFooterNavItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+        }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: data.copyrightText })));
+}
+exports.CustomFooter = CustomFooter;
+const FooterContainer = styled_components_1.default.div `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  background-color: var(--footer-background-color);
+  text-align: center;
+  font-family: var(--font-family-base);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+//# sourceMappingURL=CustomFooter.js.map

package/lib/components/Footer/CustomFooterNavItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+interface CustomFooterNavItemProps {
+    navItem: ResolvedNavItem;
+    className?: string;
+}
+export declare function CustomFooterNavItem({ navItem, className }: CustomFooterNavItemProps): JSX.Element;
+export {};

package/lib/components/Footer/CustomFooterNavItem.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooterNavItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+function CustomFooterNavItem({ navItem, className }) {
+    const item = navItem;
+    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem", className: className },
+        react_1.default.createElement(FooterLink, { to: item.link },
+            react_1.default.createElement(FooterLabel, null, item.label))));
+}
+exports.CustomFooterNavItem = CustomFooterNavItem;
+const FooterItem = styled_components_1.default.li `
+  display: inline-block;
+  text-align: center;
+  line-height: var(--line-height-base);
+  font-size: var(--navbar-font-size);
+  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  font-weight: var(--font-weight-regular);
+`;
+const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;
+const FooterLabel = styled_components_1.default.span `
+  cursor: pointer;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=CustomFooterNavItem.js.map

package/lib/components/Footer/Footer.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { LogoConfig, ResolvedNavItem } from '../../types/portal';
+export declare function Footer(): JSX.Element | null;
+interface FooterPresentationalComponentProps {
+    items: ResolvedNavItem[];
+    copyrightText?: string;
+    logo?: LogoConfig;
+    className?: string;
+}
+export declare function FooterPresentationalComponent({ items, copyrightText, logo, className, }: FooterPresentationalComponentProps): JSX.Element | null;
+export {};

package/lib/components/Footer/Footer.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterPresentationalComponent = exports.Footer = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FooterColumns_1 = require("../../components/Footer/FooterColumns");
+const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
+const utils_1 = require("../../utils");
+const hooks_1 = require("../../hooks");
+const ui_1 = require("../../ui");
+const NavbarLogo_1 = require("../../components/NavbarLogo");
+function Footer() {
+    var _a;
+    const { footer, logo } = (0, hooks_1.useThemeConfig)() || {};
+    const { items, copyrightText } = footer || {};
+    if ((0, utils_1.isEmptyArray)(items) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
+        return null;
+    }
+    return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText, logo: ((_a = footer === null || footer === void 0 ? void 0 : footer.logo) === null || _a === void 0 ? void 0 : _a.hide) ? undefined : logo }));
+}
+exports.Footer = Footer;
+function FooterPresentationalComponent({ items, copyrightText, logo, className, }) {
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer", className: className },
+        react_1.default.createElement(ColumnsSection, null,
+            logo && react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
+            react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items })),
+        copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
+}
+exports.FooterPresentationalComponent = FooterPresentationalComponent;
+const ColumnsSection = (0, styled_components_1.default)(ui_1.Flex) `
+  flex-direction: column;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    flex-direction: row;
+  }
+`;
+const FooterContainer = styled_components_1.default.footer `
+  padding: var(--mobile-footer-padding-vertical) var(--mobile-footer-padding-horizontal);
+  border-top: 1px solid var(--footer-border-color);
+  font-size: var(--footer-font-size);
+  flex-shrink: 0;
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-weight: var(--footer-font-weight);
+
+  ${NavbarLogo_1.LogoContainer} {
+    display: var(--footer-logo-display);
+    margin: 0 var(--footer-logo-margin-right) var(--footer-logo-margin-bottom) 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
+  }
+`;
+//# sourceMappingURL=Footer.js.map

package/lib/components/Footer/FooterColumn.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+interface FooterColumnProps {
+    column: ResolvedNavItem;
+    className?: string;
+}
+export declare function FooterColumn({ column, className }: FooterColumnProps): JSX.Element;
+export declare const FooterLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterColumnItems: import("styled-components").StyledComponent<"div", any, {
+    iconsOnly: boolean;
+}, never>;
+export {};

package/lib/components/Footer/FooterColumn.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterColumnItems = exports.FooterLinkIcon = exports.FooterColumn = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const hooks_1 = require("../../mocks/hooks");
+const Image_1 = require("../../components/Image/Image");
+const telemetry_1 = require("../../mocks/telemetry");
+const icons_1 = require("../../icons");
+function FooterColumn({ column, className }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const { items = [] } = column;
+    const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
+    const label = translate(column.labelTranslationKey, column.label);
+    const labelOrLink = column.type === 'link' ? (react_1.default.createElement(Link_1.Link, { to: column.link, external: column.external, target: column.target }, label)) : (label);
+    return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn", className: className },
+        react_1.default.createElement(FooterColumnTitle, null, labelOrLink),
+        react_1.default.createElement(exports.FooterColumnItems, { iconsOnly: iconsOnly }, items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => {
+            if (columnItem.type === 'error') {
+                return null;
+            }
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, iconsOnly: iconsOnly, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
+                columnItem.icon || columnItem.srcSet ? (react_1.default.createElement(exports.FooterLinkIcon, null,
+                    react_1.default.createElement(Image_1.Image, { src: columnItem.icon, srcSet: columnItem.srcSet }))) : null,
+                !iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label),
+                columnItem.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null));
+        }))));
+}
+exports.FooterColumn = FooterColumn;
+const FooterColumnTitle = styled_components_1.default.p `
+  display: inline-block;
+  font-weight: var(--footer-title-font-weight);
+  font-size: var(--footer-title-font-size);
+  margin-top: 0;
+  margin-bottom: var(--mobile-footer-title-margin-bottom);
+  color: var(--footer-title-text-color);
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    margin-bottom: var(--footer-title-margin-bottom);
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--footer-title-text-color);
+
+    &:hover {
+      color: var(--footer-title-hover-color);
+    }
+  }
+`;
+const FooterSeparator = styled_components_1.default.div `
+  opacity: 0.75;
+  margin: 10px 0 5px 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+`;
+const FooterColumnContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  word-break: break-word;
+  flex: 1;
+  margin: 0 0 var(--mobile-footer-column-margin-bottom) 0;
+  min-width: var(--footer-column-min-width);
+  align-content: center;
+  flex-wrap: wrap;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    text-align: left;
+    margin: 0 var(--footer-column-margin-horizontal);
+    border-right: 1px solid var(--footer-dividing-border-color);
+    margin-bottom: var(--footer-column-margin-bottom);
+  }
+`;
+exports.FooterLinkIcon = styled_components_1.default.div `
+  display: inline-flex;
+  width: var(--footer-item-icon-width);
+  height: var(--footer-item-icon-height);
+  margin-right: var(--footer-item-icon-margin-right);
+  vertical-align: middle;
+  border: 1px solid var(--footer-item-icon-border-color);
+  border-radius: var(--footer-item-icon-border-radius);
+  padding: var(--footer-item-icon-padding);
+`;
+const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
+  padding: var(--footer-link-padding-vertical) var(--footer-link-padding-horizontal);
+  color: var(--footer-link-text-color);
+  text-decoration: none;
+  &:hover {
+    color: var(--footer-link-hover-color);
+  }
+
+  &:last-child ${exports.FooterLinkIcon} {
+    margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
+  }
+`;
+exports.FooterColumnItems = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    justify-content: flex-start;
+  }
+`;
+//# sourceMappingURL=FooterColumn.js.map

package/lib/components/Footer/FooterColumns.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+interface FooterColumnsProps {
+    columns: ResolvedNavItem[];
+    className?: string;
+}
+export declare function FooterColumns({ columns, className }: FooterColumnsProps): JSX.Element | null;
+export declare const FooterColumnsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};