@xo-union/tk-component-header-nav
Version:
244 lines (243 loc) • 9.1 kB
JavaScript
"use strict";
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.FeaturedUnitCard = exports.FeaturedSection = void 0;
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/instance/map"));
var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/object/entries"));
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _variables = _interopRequireDefault(require("@xo-union/tk-ui-colors/lib/variables.css"));
var _tkUiBreakpoints = require("@xo-union/tk-ui-breakpoints");
var _tkComponentGrid = require("@xo-union/tk-component-grid");
var _tkUiSkeleton = require("@xo-union/tk-ui-skeleton");
var _tkComponentPicture = require("@xo-union/tk-component-picture");
var _tkUiTypography = require("@xo-union/tk-ui-typography");
var _reactCssModules = require("@xo-union/react-css-modules");
var _MegaMenuCoreCjs = require("./MegaMenuCore.cjs.js");
var _ContextCjs = require("../Context.cjs.js");
var _indexCjs = _interopRequireDefault(require("../Link/index.cjs.js"));
var _MenuSectionsCjs = require("./MenuSections.cjs.js");
const FeaturedSectionRow = _ref => {
let {
children,
...props
} = _ref;
const {
classes
} = (0, _ContextCjs.useHeaderNavContext)();
return /*#__PURE__*/_react.default.createElement(_tkComponentGrid.Row, (0, _extends2.default)({
classes: (0, _reactCssModules.compose)({
row: classes['featured-section-row']
})
}, props), children);
};
process.env.NODE_ENV !== "production" ? FeaturedSectionRow.propTypes = {
children: _propTypes.default.node
} : void 0;
const FeaturedSection = _ref2 => {
var _context;
let {
headingContent,
sponsored = true,
children,
className,
isLoading = false,
rowAs = 'ul'
} = _ref2;
const layout = (0, _MegaMenuCoreCjs.useMegaMenuLayout)();
const {
alignSectionsBreakpoint,
featuredSection: {
unitSize,
numberOfColumns,
containerColumnProps
}
} = layout;
const menuID = (0, _MegaMenuCoreCjs.useMegaMenuID)();
const {
classes
} = (0, _ContextCjs.useHeaderNavContext)();
const featuredSectionLabelId = `${menuID}-featured-section-heading`;
const loadingLabel = /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Skeleton, {
"aria-label": "Loading section..."
}, /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Bone, {
className: classes['bone-basic']
}));
const loadedLabel = /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(sponsored ? classes['sponsored-featured-section-label'] : classes['featured-section-label']),
id: featuredSectionLabelId,
role: "heading",
"aria-level": "1"
}, headingContent);
const rightAlignedClass = `featured-section-right-aligned-${alignSectionsBreakpoint}`;
if (containerColumnProps[alignSectionsBreakpoint] === undefined) {
throw new Error(`[${menuID}] Featured section has to shrink at the alignedSectionsBreakpoint so that both sections fit together.`);
}
return /*#__PURE__*/_react.default.createElement(_tkComponentGrid.Column, containerColumnProps, /*#__PURE__*/_react.default.createElement("div", {
className: classes['featured-section']
}, /*#__PURE__*/_react.default.createElement(_MenuSectionsCjs.MenuAside, {
"aria-labelledby": featuredSectionLabelId,
"data-trackable-context-section": "featured",
className: (0, _classnames.default)(sponsored && classes['sponsored-featured-section'], classes['featured-section-core'], ...(0, _map.default)(_context = (0, _entries.default)(numberOfColumns || {})).call(_context, _ref3 => {
let [breakpoint, columnCount] = _ref3;
const key = `featured-section-${breakpoint}-${columnCount}-columns`;
return key in classes && classes[key];
}), (unitSize === 'lg' || unitSize === 'xl') && classes['featured-section-size-lg'], unitSize === 'sm' && classes['featured-section-size-sm'], classes[rightAlignedClass], className)
}, isLoading ? loadingLabel : loadedLabel, /*#__PURE__*/_react.default.createElement(FeaturedSectionRow, {
as: rowAs
}, children))));
};
exports.FeaturedSection = FeaturedSection;
process.env.NODE_ENV !== "production" ? FeaturedSection.propTypes = {
headingContent: _propTypes.default.node,
sponsored: _propTypes.default.bool,
children: _propTypes.default.node,
className: _propTypes.default.string,
isLoading: _propTypes.default.bool,
rowAs: _propTypes.default.elementType
} : void 0;
FeaturedSection.defaultProps = {
rowAs: 'ul',
sponsored: false,
isLoading: false
};
const smallCardImageSizes = {
xs: {
width: 124,
height: 114
},
md: {
width: 144,
height: 132
}
};
const largeCardImageSizes = {
xs: {
width: 260,
height: 124
},
md: {
width: 310,
height: 148
}
};
const extraLargeCardImageSizes = {
xs: {
width: 260,
height: 195
},
md: {
width: 310,
height: 232
}
};
const LoadingPlaceholder = _ref4 => {
let {
width,
height
} = _ref4;
return /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Skeleton, {
"aria-label": "Loading section..."
}, /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Bone, {
style: {
height: `${height}px`,
width: `${width}px`,
borderRadius: '8px',
border: `1px solid var(--tkww-union-header-nav-mega-menu-featured-border-color, ${_variables.default.varBorderDefault})`,
display: 'inline-block'
}
}));
};
process.env.NODE_ENV !== "production" ? LoadingPlaceholder.propTypes = {
width: _propTypes.default.number,
height: _propTypes.default.number
} : void 0;
const FeaturedUnitCard = props => {
const {
classes
} = (0, _ContextCjs.useHeaderNavContext)();
const [isImageLoaded, setIsImageLoaded] = _react.default.useState(false);
const {
linkUrl,
imageId: imageMediaID,
copy,
linkProps,
as: ElementType = 'li',
subtleBorder,
boldCopy = false,
alt = copy
} = props;
const {
featuredSection
} = (0, _MegaMenuCoreCjs.useMegaMenuLayout)();
let sizes;
if (featuredSection.unitSize === 'sm') {
sizes = smallCardImageSizes;
}
if (featuredSection.unitSize === 'lg') {
sizes = largeCardImageSizes;
}
if (featuredSection.unitSize === 'xl') {
sizes = extraLargeCardImageSizes;
}
if (!sizes) {
throw new Error('featuredSection.unitSize in layout not configured correctly');
}
if (typeof alt !== 'string' || alt.length === 0) {
throw new Error('Please pass a string `alt` with some content');
}
const copyIsAriaHidden = copy === alt;
const mobileMedia = (0, _tkUiBreakpoints.useMobileMedia)();
const isMobile = mobileMedia.yes;
return /*#__PURE__*/_react.default.createElement(ElementType, {
className: classes['featured-section-unit']
}, /*#__PURE__*/_react.default.createElement(_indexCjs.default, (0, _extends2.default)({
className: classes['featured-card-link'],
href: linkUrl
}, linkProps), !isImageLoaded && isMobile && /*#__PURE__*/_react.default.createElement(LoadingPlaceholder, {
width: sizes.xs.width,
height: sizes.xs.height
}), !isImageLoaded && !isMobile && /*#__PURE__*/_react.default.createElement(LoadingPlaceholder, {
width: sizes.md.width,
height: sizes.md.height
}), /*#__PURE__*/_react.default.createElement(_tkComponentPicture.Picture, {
id: imageMediaID,
lazy: true
}, /*#__PURE__*/_react.default.createElement(_tkComponentPicture.Source, {
viewport: "md",
width: sizes.md.width,
height: sizes.md.height
}), /*#__PURE__*/_react.default.createElement(_tkComponentPicture.Source, {
viewport: "xs",
width: sizes.xs.width,
height: sizes.xs.height
}), /*#__PURE__*/_react.default.createElement(_tkComponentPicture.Img, {
className: (0, _classnames.default)(subtleBorder && classes['featured-card-image-subtle-border'], !isImageLoaded && classes['featured-card-image-loading']),
width: sizes.md.width,
height: sizes.md.height,
alt: alt,
onLoad: () => {
setIsImageLoaded(true);
}
})), copy && /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body2, {
className: classes['featured-card-copy'],
"aria-hidden": copyIsAriaHidden ? 'true' : null,
bold: boldCopy
}, copy)));
};
exports.FeaturedUnitCard = FeaturedUnitCard;
process.env.NODE_ENV !== "production" ? FeaturedUnitCard.propTypes = {
subtleBorder: _propTypes.default.bool,
boldCopy: _propTypes.default.bool,
as: _propTypes.default.elementType,
linkUrl: _propTypes.default.string,
imageId: _propTypes.default.string,
copy: _propTypes.default.node,
alt: _propTypes.default.string,
linkProps: _propTypes.default.shape()
} : void 0;