@digital-b2c/coreui-kit 0.7.2 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -397,7 +397,8 @@ var Button = (_a) => {
397
397
  }, isLink ? { href, isExternal } : {}), rest);
398
398
  return /* @__PURE__ */ jsxRuntime.jsxs(ConditionalWrapper, __spreadProps(__spreadValues({ wrapper: Anchor, fallback: "button", condition: isLink }, props), { children: [
399
399
  children,
400
- logo ? /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: Button_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon, className: Button_module_default.icon })
400
+ isExternal && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "(opens in a new tab)" }),
401
+ logo ? /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: Button_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon, className: Button_module_default.icon, "aria-hidden": "true" })
401
402
  ] }));
402
403
  };
403
404
 
@@ -1776,6 +1777,7 @@ var UpcomingEventCard_module_default = {
1776
1777
  description: "UpcomingEventCard_module_description",
1777
1778
  "event-card-footer": "UpcomingEventCard_module_event-card-footer",
1778
1779
  horizontal: "UpcomingEventCard_module_horizontal",
1780
+ "event-card-show-image": "UpcomingEventCard_module_event-card-show-image",
1779
1781
  "event-card-cta": "UpcomingEventCard_module_event-card-cta",
1780
1782
  hidden: "UpcomingEventCard_module_hidden",
1781
1783
  "cta-without-image": "UpcomingEventCard_module_cta-without-image",
@@ -1810,27 +1812,38 @@ var UpcomingEventCard = ({
1810
1812
  children: [
1811
1813
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx20__default.default("card-content", UpcomingEventCard_module_default["event-card-content"]), children: [
1812
1814
  showImage && image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx20__default.default("card-image", UpcomingEventCard_module_default["event-card-image"]) })),
1813
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx20__default.default("card-text-content", UpcomingEventCard_module_default["event-card-text-content"]), children: [
1814
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
1815
- title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: clsx20__default.default("card-text-title"), children: title }),
1816
- location && /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
1817
- description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx20__default.default("card-text-description", UpcomingEventCard_module_default.description), children: description }),
1818
- cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
1819
- Button,
1820
- {
1821
- variant: "secondary",
1822
- className: clsx20__default.default(
1823
- "card-cta",
1824
- UpcomingEventCard_module_default["event-card-cta"],
1825
- !hasCTAandImage && UpcomingEventCard_module_default.hidden
1826
- ),
1827
- fullWidth: isBelowMobile,
1828
- href: cta.url,
1829
- icon: cta.icon,
1830
- children: cta.label
1831
- }
1832
- )
1833
- ] })
1815
+ /* @__PURE__ */ jsxRuntime.jsxs(
1816
+ "div",
1817
+ {
1818
+ className: clsx20__default.default(
1819
+ "card-text-content",
1820
+ UpcomingEventCard_module_default["event-card-text-content"],
1821
+ (!showImage || !hasImage) && UpcomingEventCard_module_default["event-card-show-image"]
1822
+ ),
1823
+ children: [
1824
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
1825
+ title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: clsx20__default.default("card-text-title"), children: title }),
1826
+ location && /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
1827
+ description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx20__default.default("card-text-description", UpcomingEventCard_module_default.description), children: description }),
1828
+ cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
1829
+ Button,
1830
+ {
1831
+ variant: "secondary",
1832
+ className: clsx20__default.default(
1833
+ "card-cta",
1834
+ UpcomingEventCard_module_default["event-card-cta"],
1835
+ !hasCTAandImage && UpcomingEventCard_module_default.hidden
1836
+ ),
1837
+ fullWidth: isBelowMobile,
1838
+ href: cta.url,
1839
+ icon: cta.icon,
1840
+ isExternal: cta == null ? void 0 : cta.isExternal,
1841
+ children: cta.label
1842
+ }
1843
+ )
1844
+ ]
1845
+ }
1846
+ )
1834
1847
  ] }),
1835
1848
  cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
1836
1849
  "div",
@@ -1844,6 +1857,7 @@ var UpcomingEventCard = ({
1844
1857
  fullWidth: isBelowMobile,
1845
1858
  href: cta.url,
1846
1859
  icon: cta.icon,
1860
+ isExternal: cta == null ? void 0 : cta.isExternal,
1847
1861
  children: cta.label
1848
1862
  }
1849
1863
  )
@@ -1857,22 +1871,35 @@ var UpcomingEventCard = ({
1857
1871
  // src/components/Carousel/Carousel.module.scss
1858
1872
  var Carousel_module_default = {};
1859
1873
  var Carousel = (_a) => {
1860
- var _b = _a, { slides, className } = _b, props = __objRest(_b, ["slides", "className"]);
1874
+ var _b = _a, {
1875
+ slides,
1876
+ className,
1877
+ ariaLabel = "Carousel"
1878
+ } = _b, props = __objRest(_b, [
1879
+ "slides",
1880
+ "className",
1881
+ "ariaLabel"
1882
+ ]);
1861
1883
  return /* @__PURE__ */ jsxRuntime.jsx(
1862
1884
  react$1.Swiper,
1863
1885
  __spreadProps(__spreadValues({
1886
+ a11y: {
1887
+ enabled: true,
1888
+ containerMessage: ariaLabel,
1889
+ containerRoleDescriptionMessage: "carousel"
1890
+ },
1891
+ role: "region",
1892
+ "aria-label": ariaLabel,
1864
1893
  className: clsx20__default.default(Carousel_module_default.carousel, className),
1865
1894
  spaceBetween: 0,
1866
1895
  slidesPerView: "auto",
1867
- modules: [modules.FreeMode],
1896
+ modules: [modules.FreeMode, modules.A11y],
1868
1897
  freeMode: { enabled: true, sticky: false, momentum: true },
1869
- wrapperTag: "ul",
1870
1898
  loop: false
1871
1899
  }, props), {
1872
1900
  children: slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
1873
1901
  react$1.SwiperSlide,
1874
1902
  {
1875
- tag: "li",
1876
1903
  className: clsx20__default.default(Carousel_module_default["carousel-item"], props.slideClass),
1877
1904
  children: slide
1878
1905
  },
@@ -1886,11 +1913,13 @@ var Carousel = (_a) => {
1886
1913
  var EventList_module_default = {
1887
1914
  "event-list-module": "EventList_module_event-list-module",
1888
1915
  "event-list-header-container": "EventList_module_event-list-header-container",
1916
+ "event-list-title": "EventList_module_event-list-title",
1889
1917
  "event-list-wrapper": "EventList_module_event-list-wrapper",
1890
1918
  vertical: "EventList_module_vertical",
1891
- grey: "EventList_module_grey",
1892
1919
  "card-list-item": "EventList_module_card-list-item",
1893
1920
  "card-item": "EventList_module_card-item",
1921
+ internalEventList: "EventList_module_internalEventList",
1922
+ "events-page": "EventList_module_events-page",
1894
1923
  horizontal: "EventList_module_horizontal",
1895
1924
  "carousel-wrapper": "EventList_module_carousel-wrapper",
1896
1925
  "carousel-list-item": "EventList_module_carousel-list-item",
@@ -1899,35 +1928,52 @@ var EventList_module_default = {
1899
1928
  var EventListTitle = ({ children }) => {
1900
1929
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
1901
1930
  };
1902
- var EventList = ({ className, title, items, cta, variant, children }) => {
1931
+ var EventList = ({
1932
+ className,
1933
+ title,
1934
+ items,
1935
+ cta,
1936
+ backgroundColor,
1937
+ variant,
1938
+ children
1939
+ }) => {
1903
1940
  var _a;
1904
1941
  const { is } = useViewPort_default();
1905
1942
  const slots = resolveCompoundSlots(children, {
1906
1943
  title: EventListTitle
1907
1944
  });
1908
1945
  const titleNode = (_a = slots.title) != null ? _a : title;
1909
- const isGrey = variant === "grey";
1910
1946
  const isBelowTablet = is("tablet", "below");
1911
1947
  const cardDirection = isBelowTablet ? "vertical" : "horizontal";
1912
- const listDirection = isGrey ? "horizontal" : "vertical";
1948
+ const isInternalEventList = variant === "internalEventList";
1949
+ const listDirection = isInternalEventList ? "horizontal" : "vertical";
1913
1950
  return /* @__PURE__ */ jsxRuntime.jsx(
1914
1951
  "div",
1915
1952
  {
1916
- className: clsx20__default.default(
1917
- "event-list-module",
1918
- EventList_module_default["event-list-module"],
1919
- isGrey && EventList_module_default[variant],
1920
- className
1921
- ),
1953
+ className: clsx20__default.default("event-list-module", EventList_module_default["event-list-module"], className),
1954
+ style: {
1955
+ backgroundColor
1956
+ },
1922
1957
  children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: clsx20__default.default(EventList_module_default["event-list-container"]), children: [
1923
1958
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EventList_module_default["event-list-header-container"], children: [
1924
- titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
1925
- cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(Button, { className: EventList_module_default.cta, variant: "nofillblack", href: cta.url, icon: cta.icon, children: cta.label })
1959
+ titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: clsx20__default.default(EventList_module_default["event-list-title"]), children: titleNode }),
1960
+ cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
1961
+ Button,
1962
+ {
1963
+ className: EventList_module_default.cta,
1964
+ variant: "nofillblack",
1965
+ href: cta.url,
1966
+ icon: cta.icon,
1967
+ isExternal: cta == null ? void 0 : cta.isExternal,
1968
+ children: cta.label
1969
+ }
1970
+ )
1926
1971
  ] }),
1927
- isGrey && isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx(
1972
+ isInternalEventList && isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx(
1928
1973
  Carousel,
1929
1974
  {
1930
- wrapperClass: clsx20__default.default(EventList_module_default["carousel-wrapper"]),
1975
+ "aria-label": "Upcoming events",
1976
+ wrapperClass: clsx20__default.default(EventList_module_default["carousel-wrapper"], EventList_module_default[variant]),
1931
1977
  slideClass: EventList_module_default["carousel-list-item"],
1932
1978
  spaceBetween: 16,
1933
1979
  slides: items.map((item) => {
@@ -1935,7 +1981,7 @@ var EventList = ({ className, title, items, cta, variant, children }) => {
1935
1981
  return /* @__PURE__ */ jsxRuntime.jsx(
1936
1982
  UpcomingEventCard,
1937
1983
  __spreadValues({
1938
- className: isGrey && EventList_module_default["event-card"],
1984
+ className: clsx20__default.default(EventList_module_default["event-card"]),
1939
1985
  direction: "vertical",
1940
1986
  showImage: false
1941
1987
  }, item),
@@ -1944,28 +1990,42 @@ var EventList = ({ className, title, items, cta, variant, children }) => {
1944
1990
  })
1945
1991
  }
1946
1992
  ),
1947
- isGrey && !isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx20__default.default(EventList_module_default["event-list-wrapper"], EventList_module_default["horizontal"], EventList_module_default[variant]), children: items == null ? void 0 : items.map((item, index) => {
1948
- var _a2, _b, _c;
1949
- return /* @__PURE__ */ jsxRuntime.jsx(
1950
- "li",
1951
- {
1952
- className: clsx20__default.default(EventList_module_default["card-list-item"]),
1953
- children: /* @__PURE__ */ jsxRuntime.jsx(
1954
- UpcomingEventCard,
1955
- __spreadProps(__spreadValues({}, item), {
1956
- className: isGrey && EventList_module_default["card-item"],
1957
- showImage: false,
1958
- direction: "vertical"
1959
- })
1960
- )
1961
- },
1962
- (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index
1963
- );
1964
- }) }),
1965
- !isGrey && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx20__default.default(EventList_module_default["event-list-wrapper"], EventList_module_default[listDirection]), children: items == null ? void 0 : items.map((item, index) => {
1966
- var _a2, _b, _c;
1967
- return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { direction: cardDirection })) }, (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index);
1968
- }) })
1993
+ isInternalEventList && !isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx(
1994
+ "ul",
1995
+ {
1996
+ "aria-label": "Upcoming events",
1997
+ className: clsx20__default.default(EventList_module_default["event-list-wrapper"], EventList_module_default["horizontal"], EventList_module_default[variant]),
1998
+ children: items == null ? void 0 : items.map((item, index) => {
1999
+ var _a2, _b, _c;
2000
+ return /* @__PURE__ */ jsxRuntime.jsx(
2001
+ "li",
2002
+ {
2003
+ className: clsx20__default.default(EventList_module_default["card-list-item"]),
2004
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2005
+ UpcomingEventCard,
2006
+ __spreadProps(__spreadValues({}, item), {
2007
+ className: clsx20__default.default(EventList_module_default["card-item"]),
2008
+ showImage: false,
2009
+ direction: "vertical"
2010
+ })
2011
+ )
2012
+ },
2013
+ (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index
2014
+ );
2015
+ })
2016
+ }
2017
+ ),
2018
+ !isInternalEventList && /* @__PURE__ */ jsxRuntime.jsx(
2019
+ "ul",
2020
+ {
2021
+ "aria-label": "Upcoming events",
2022
+ className: clsx20__default.default(EventList_module_default["event-list-wrapper"], EventList_module_default[listDirection]),
2023
+ children: items == null ? void 0 : items.map((item, index) => {
2024
+ var _a2, _b, _c;
2025
+ return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { direction: cardDirection })) }, (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index);
2026
+ })
2027
+ }
2028
+ )
1969
2029
  ] })
1970
2030
  }
1971
2031
  );