@websolutespa/bom-mixer-ui 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.4.0
+
+### Minor Changes
+
+- Added: Main.
+- Modified: Pagination.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -905,6 +905,32 @@ function hasChildOfType(children, type) {
   return hasChildOfType;
 }
 
+const Background = styled__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  // background: var(--color-neutral-900);
+
+  &, & > * {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & > * > * {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${props => getCssResponsive(props)}
+`;
+Background.defaultProps = {
+  className: 'background'
+};
+
 const Badge = styled__default.default.div`
   display: inline-block;
   line-height: 1;
@@ -1620,32 +1646,6 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-const Background = styled__default.default.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  // background: var(--color-neutral-900);
-
-  &, & > * {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  & > * > * {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  ${props => getCssResponsive(props)}
-`;
-Background.defaultProps = {
-  className: 'background'
-};
-
 const CardContent = styled__default.default.div`
   position: relative;
   ${props => getCssResponsive(props)}
@@ -3995,10 +3995,13 @@ const Layout = /*#__PURE__*/React.forwardRef((_a, ref) => {
       as = 'div'
     } = _a,
     props = __rest(_a, ["children", "as"]);
+  const page = bomMixerHooks.usePage();
   return jsxRuntime.jsx(StyledLayout, Object.assign({
     ref: ref,
     as: as
   }, props, {
+    "data-template": page.template,
+    "data-id": page.id,
     children: children
   }));
 });
@@ -4022,6 +4025,26 @@ const List = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 List.displayName = 'List';
 
+const Wrapper = styled__default.default.main`
+  ${props => getCssResponsive(props)}
+`;
+const Main = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      className,
+      children
+    } = _a,
+    props = __rest(_a, ["className", "children"]);
+  const classNames = bomCore.getClassNames('main', className);
+  return jsxRuntime.jsx(Wrapper, Object.assign({
+    ref: ref,
+    className: classNames,
+    role: "main"
+  }, props, {
+    children: children
+  }));
+});
+Main.displayName = 'Main';
+
 const MediaGalleryContext = /*#__PURE__*/React.createContext({});
 function useMediaGalleryContext() {
   return React.useContext(MediaGalleryContext);
@@ -4211,13 +4234,12 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       item,
       onClick,
       className,
-      aspectRatio,
       eager,
       alt,
       title,
       as = 'div'
     } = _a,
-    props = __rest(_a, ["children", "item", "onClick", "className", "aspectRatio", "eager", "alt", "title", "as"]);
+    props = __rest(_a, ["children", "item", "onClick", "className", "eager", "alt", "title", "as"]);
   const {
     id,
     open
@@ -4226,7 +4248,6 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     'media--gallery': id
   });
   const mediaChildren = item && !children ? getMediaItems(item, {
-    aspectRatio,
     eager,
     galleryId: id,
     alt,
@@ -5293,26 +5314,26 @@ const defaultContext$5 = {};
 const PaginationContext = /*#__PURE__*/React__default.default.createContext(defaultContext$5);
 const usePaginationContext = () => React__default.default.useContext(PaginationContext);
 
-const StyledPaginationItem$1 = styled__default.default.div`
+const StyledPaginationItem$1 = styled__default.default.li`
   margin-right: 0.428em;
   display: inline-block;
 
   button {
-    border: none;
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
-    text-transform: capitalize;
+    height: var(--pagination-size);
+    min-width: var(--pagination-size);
     user-select: none;
     white-space: nowrap;
     text-align: center;
     vertical-align: middle;
+    font-size: inherit;
+    text-transform: capitalize;
     box-shadow: none;
     outline: none;
-    height: var(--pagination-size);
-    min-width: var(--pagination-size);
-    font-size: inherit;
+    border: none;
     cursor: pointer;
     color: var(--color-primary-500);
     border-radius: var(--border-radius);
@@ -5352,25 +5373,26 @@ const StyledPaginationItem$1 = styled__default.default.div`
 `;
 const PaginationItem = _a => {
   var {
+      className,
       children,
       active,
       disabled,
       onClick
     } = _a,
-    props = __rest(_a, ["children", "active", "disabled", "onClick"]);
+    props = __rest(_a, ["className", "children", "active", "disabled", "onClick"]);
   const onClick_ = event => {
     if (disabled) {
       return;
     }
     onClick && onClick(event);
   };
-  const classNames = bomCore.getClassNames({
+  const classNames = bomCore.getClassNames('pagination-item', className, {
     active,
     disabled
   });
   return jsxRuntime.jsx(StyledPaginationItem$1, {
-    as: "li",
-    children: jsxRuntime.jsx("button", Object.assign({
+    children: jsxRuntime.jsx(Button, Object.assign({
+      "aria-label": props['aria-label'],
       className: classNames,
       onClick: onClick_
     }, props, {
@@ -5390,7 +5412,10 @@ const PaginationNext = _a => {
     isLast
   } = usePaginationContext();
   return jsxRuntime.jsx(PaginationItem, Object.assign({
+    className: "pagination-next",
     disabled: isLast,
+    "aria-disabled": isLast,
+    "aria-label": "next page",
     onClick: () => update && update('next')
   }, props, {
     children: children
@@ -5405,38 +5430,40 @@ const StyledPaginationItem = styled__default.default(PaginationItem)`
     width: 1em;
     height: 1em;
   }
-  .more.before {
-    transform: rotate(180deg);
+
+  .pagination-ellipsis__more {
+    &.before {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:hover {
+    .pagination-ellipsis__ellipsis {
+      display: none;
+    }
+  }
+
+  &:not(:hover) {
+    .pagination-ellipsis__more {
+      display: none;
+    }
   }
 `;
-const PaginationEllipsis = _ref => {
-  let {
-    isBefore,
-    onClick
-  } = _ref;
-  const [showMore, setShowMore] = React.useState(false);
-  const moreClassNames = bomCore.getClassNames('more', {
+const PaginationEllipsis = _a => {
+  var {
+      isBefore,
+      onClick
+    } = _a,
+    props = __rest(_a, ["isBefore", "onClick"]);
+  const moreClassNames = bomCore.getClassNames('pagination-ellipsis__more', {
     before: isBefore
   });
-  return jsxRuntime.jsx(StyledPaginationItem, {
-    onClick: e => onClick && onClick(e),
-    onMouseEnter: () => setShowMore(true),
-    onMouseLeave: () => setShowMore(false),
-    children: showMore ? jsxRuntime.jsxs("svg", {
-      className: moreClassNames,
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      children: [jsxRuntime.jsx("path", {
-        d: "M13 17l5-5-5-5"
-      }), jsxRuntime.jsx("path", {
-        d: "M6 17l5-5-5-5"
-      })]
-    }) : jsxRuntime.jsxs("svg", {
+  return jsxRuntime.jsxs(StyledPaginationItem, {
+    className: "pagination-ellipsis",
+    "aria-label": props['aria-label'],
+    onClick: event => onClick && onClick(event),
+    children: [jsxRuntime.jsxs("svg", {
+      className: "pagination-ellipsis__ellipsis",
       viewBox: "0 0 24 24",
       strokeWidth: "1.5",
       strokeLinecap: "round",
@@ -5459,7 +5486,21 @@ const PaginationEllipsis = _ref => {
         r: "1",
         fill: "currentColor"
       })]
-    })
+    }), jsxRuntime.jsxs("svg", {
+      className: moreClassNames,
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      children: [jsxRuntime.jsx("path", {
+        d: "M13 17l5-5-5-5"
+      }), jsxRuntime.jsx("path", {
+        d: "M6 17l5-5-5-5"
+      })]
+    })]
   });
 };
 PaginationEllipsis.displayName = 'PaginationEllipsis';
@@ -5482,6 +5523,7 @@ const PaginationPages = _ref => {
   }, [current, middleNumber, count, limit]);
   const pagesArray = React.useMemo(() => [...new Array(showPages)], [showPages]);
   const renderItem = React.useCallback((value, active) => jsxRuntime.jsx(PaginationItem, {
+    "aria-label": `page ${value}`,
     active: value === active,
     onClick: () => setPage(value),
     children: value
@@ -5494,6 +5536,7 @@ const PaginationPages = _ref => {
     const middleIndexNumber = middleNumber - (index + 1);
     const value = current - middleIndexNumber;
     return jsxRuntime.jsx(PaginationItem, {
+      "aria-label": `page ${value}`,
       active: index + 1 === middleNumber,
       onClick: () => setPage(value),
       children: value
@@ -5509,6 +5552,7 @@ const PaginationPages = _ref => {
       children: [...new Array(count)].map((_, index) => {
         const value = index + 1;
         return jsxRuntime.jsx(PaginationItem, {
+          "aria-label": `page ${value}`,
           active: value === current,
           onClick: () => setPage(value),
           children: value
@@ -5520,9 +5564,11 @@ const PaginationPages = _ref => {
 
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [renderItem(1, current), showBeforeEllipsis && jsxRuntime.jsx(PaginationEllipsis, {
+      "aria-label": "previous pages",
       isBefore: true,
       onClick: () => setPage(last => last - 5 >= 1 ? last - 5 : 1)
     }, "pagination-ellipsis-before"), showBeforeEllipsis && showAfterEllipsis ? renderMiddleItems : showBeforeEllipsis ? renderEndItems : renderStartItems, showAfterEllipsis && jsxRuntime.jsx(PaginationEllipsis, {
+      "aria-label": "next pages",
       onClick: () => setPage(last => last + 5 <= count ? last + 5 : count)
     }, "pagination-ellipsis-after"), renderItem(count, current)]
   });
@@ -5539,7 +5585,11 @@ const PaginationPrevious = _a => {
     isFirst
   } = usePaginationContext();
   return jsxRuntime.jsx(PaginationItem, Object.assign({
+    className: "pagination-previous",
     disabled: isFirst,
+    "aria-disabled": isFirst,
+    "aria-label": "previous page",
+    title: "previous page",
     onClick: () => update && update('prev')
   }, props, {
     children: children
@@ -5548,18 +5598,29 @@ const PaginationPrevious = _a => {
 PaginationPrevious.displayName = 'PaginationPrevious';
 
 const StyledPagination = styled__default.default.div`
+  --pagination-size: 2rem;
   display: flex;
   justify-content: center;
+  ${props => getCssResponsive(props)}
+`;
+const StyledNav = styled__default.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-variant: tabular-nums;
   font-feature-settings: 'tnum';
   font-size: 0.875rem;
-  --pagination-size: 2rem;
+
+  &>li {
+    padding: 0;
+  }
 
   :global(button:last-of-type) {
     margin-right: 0;
   }
-
-  ${props => getCssResponsive(props)}
 `;
 const PaginationBase = _a => {
   var {
@@ -5572,6 +5633,7 @@ const PaginationBase = _a => {
       onChange
     } = _a,
     props = __rest(_a, ["className", "initialPage", "count", "limit", "page", "children", "onChange"]);
+  const label = bomMixerHooks.useLabel();
   const [page, setPage, pageRef] = bomMixerHooks.useCurrentState(initialPage);
   const [, prevChildren] = pickChild(children, PaginationPrevious);
   const [, nextChildren] = pickChild(children, PaginationNext);
@@ -5613,16 +5675,20 @@ const PaginationBase = _a => {
   }, [customPage]);
   return jsxRuntime.jsx(PaginationContext.Provider, {
     value: values,
-    children: jsxRuntime.jsxs(StyledPagination, Object.assign({
-      as: "nav",
+    children: jsxRuntime.jsx(StyledPagination, Object.assign({
       className: className
     }, props, {
-      children: [prevItem, jsxRuntime.jsx(PaginationPages, {
-        count: count,
-        current: page,
-        limit: limit,
-        setPage: setPage
-      }), nextItem]
+      as: "nav",
+      role: "navigation",
+      "aria-label": label('landmark.pagination'),
+      children: jsxRuntime.jsxs(StyledNav, {
+        children: [prevItem, jsxRuntime.jsx(PaginationPages, {
+          count: count,
+          current: page,
+          limit: limit,
+          setPage: setPage
+        }), nextItem]
+      })
     }))
   });
 };
@@ -7753,7 +7819,7 @@ const CssFieldDefault = styled.css`
     &.touched {
       label {
         &:after {
-          color: var(--form-error-color, transparent);
+          color: var(--form-error-color, inherit);
         }
       }
     }
@@ -7794,7 +7860,7 @@ const CssFormErrorDefault = styled.css`
   line-height: var(--form-error-line-height, 1.2);
   border: var(--form-error-border, none);
   background: var(--form-error-background-color, transparent);
-  color: var(--form-error-color, transparent);
+  color: var(--form-error-color, inherit);
 
   padding: var(--form-control-padding);
   text-align: center;
@@ -9221,14 +9287,14 @@ const TextArea = /*#__PURE__*/React.forwardRef((_a, ref) => {
 TextArea.displayName = 'TextArea';
 
 const CssFieldErrorDefault = styled.css`
-  margin: var(--form-error-margin, 0.5em 0);
-  padding: var(--form-error-padding, 0.2em 0.4em);
+  margin: var(--form-error-margin, 0);
+  padding: var(--form-error-padding, 0);
   font-size: var(--form-error-font-size, 0.9rem);
   font-weight: var(--form-error-font-weight, 500);
   line-height: var(--form-error-line-height, 1.2);
   border: var(--form-error-border, none);
   background: var(--form-error-background-color, transparent);
-  color: var(--form-error-color, transparent);
+  color: var(--form-error-color, inherit);
 `;
 const fieldErrorVariants = {
   default: CssFieldErrorDefault
@@ -14260,7 +14326,7 @@ const ContactHero = _ref => {
   });
 };
 
-const FooterContainer = styled__default.default.div`
+const FooterContainer = styled__default.default.footer`
   padding: 6rem 0 4rem 0;
   background: var(--color-neutral-900);
   color: var(--color-neutral-100);
@@ -14275,6 +14341,9 @@ const Footer = props => {
     }, props, {
       children: jsxRuntime.jsxs(Container.Fluid, {
         children: [jsxRuntime.jsxs(Grid.Row, {
+          as: "nav",
+          role: "navigation",
+          "aria-label": "Footer",
           children: [jsxRuntime.jsxs(Grid, {
             sm: 12,
             md: 4,
@@ -14750,7 +14819,7 @@ function useOnClickOutside(ref, handler, mouseEvent) {
   });
 }
 
-const HeaderContainer = styled__default.default.div`
+const HeaderContainer = styled__default.default.header`
   display: flex;
   align-items: center;
   min-height: 120px;
@@ -14934,6 +15003,9 @@ const Header = props => {
           gap: "1rem",
           gapMd: "2rem",
           gapLg: "3rem",
+          as: "nav",
+          role: "navigation",
+          "arial-label": "Main menu",
           children: [jsxRuntime.jsx(Flex, {
             children: jsxRuntime.jsx(NavLink, {
               href: layout.topLevelHrefs.homepage || '/',
@@ -19207,8 +19279,21 @@ function LayoutDefault(_ref) {
   let {
     children
   } = _ref;
-  return jsxRuntime.jsxs(Layout, {
-    children: [jsxRuntime.jsx(Meta, {}), jsxRuntime.jsxs(Page, {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(Meta, {}), jsxRuntime.jsxs(Layout, {
+      children: [jsxRuntime.jsx(Header, {
+        sticky: true
+      }), children, jsxRuntime.jsx(Footer, {})]
+    })]
+  });
+}
+
+function LayoutFixed(_ref) {
+  let {
+    children
+  } = _ref;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(Meta, {}), jsxRuntime.jsxs(Layout, {
       children: [jsxRuntime.jsx(Header, {
         fixed: true
       }), children, jsxRuntime.jsx(Footer, {})]
@@ -19859,6 +19944,7 @@ exports.AuthProvider = AuthProvider;
 exports.AuthUpdate = AuthUpdate;
 exports.Autocomplete = Autocomplete;
 exports.AutocompleteContext = AutocompleteContext;
+exports.Background = Background;
 exports.Badge = Badge;
 exports.BlogCard = BlogCard;
 exports.BlogMore = BlogMore;
@@ -19974,6 +20060,7 @@ exports.InputGroup = InputGroup;
 exports.Label = Label;
 exports.Layout = Layout;
 exports.LayoutDefault = LayoutDefault;
+exports.LayoutFixed = LayoutFixed;
 exports.LazyLoader = LazyLoader;
 exports.Link = Link;
 exports.List = List;
@@ -19984,6 +20071,7 @@ exports.MagazineSearch = MagazineSearch;
 exports.MagazineSearchCard = MagazineSearchCard;
 exports.MagazineSearchFilters = MagazineSearchFilters;
 exports.MagazineSearchFiltersModal = MagazineSearchFiltersModal;
+exports.Main = Main;
 exports.MarketsAndLanguagesDrawer = MarketsAndLanguagesDrawer;
 exports.Media = Media;
 exports.MediaGallery = MediaGallery;