@treely/strapi-slices 6.1.0 → 6.2.0

package/dist/slices/TextCarousel/TextCarousel.d.ts

@@ -5,6 +5,7 @@ import StrapiTextCardWithIcon from '../../models/strapi/StrapiTextCardWithIcons'
 interface TextCarouselSlice extends StrapiDefaultHeader {
     slides: StrapiTextCardWithIcon[];
     button?: StrapiLink;
+    isShuffled?: boolean;
 }
 export interface TextCarouselProps {
     slice: TextCarouselSlice;

package/dist/slices/TextCarousel/TextCarousel.stories.d.ts

@@ -1,6 +1,7 @@
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./TextCarousel").TextCarouselProps>;
 export default _default;
 export declare const Minimal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./TextCarousel").TextCarouselProps>;
+export declare const WithShuffledCards: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./TextCarousel").TextCarouselProps>;
 export declare const WithTagline: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./TextCarousel").TextCarouselProps>;
 export declare const WithTaglineAndText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./TextCarousel").TextCarouselProps>;
 export declare const WithButton: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./TextCarousel").TextCarouselProps>;

package/dist/strapi-slices.cjs.development.js

@@ -2272,14 +2272,14 @@ var TextCardGrid = function TextCardGrid(_ref) {
 
 var _templateObject$5, _templateObject2$2, _templateObject3$1;
 var CarouselContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n    width: var(--boemly-sizes-full);\n  }\n\n  width: var(--boemly-sizes-full);\n\n  overflow-x: hidden;\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n  }\n"])), BREAKPOINT_MD, BREAKPOINT_MD);
-var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--boemly-space-6);\n  justify-content: center;\n\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-6)) *\n      ", " +\n      var(--boemly-space-6)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
+var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--boemly-space-6);\n  justify-content: center;\n\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-6)) *\n      ", " +\n      var(--boemly-space-6)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    gap: var(--boemly-space-1);\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
   var numberOfItems = _ref.numberOfItems;
   return numberOfItems;
 }, BREAKPOINT_MD, function (_ref2) {
   var numberOfItems = _ref2.numberOfItems;
   return numberOfItems;
 });
-var CardContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--boemly-sizes-sm);\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-2xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), BREAKPOINT_MD);
+var CardContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--boemly-sizes-sm);\n\n  @media screen and (max-width: ", ") {\n    min-width: var(--boemly-sizes-sm);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), BREAKPOINT_MD);
 
 var _templateObject$4;
 var GLOBAL_STYLE = /*#__PURE__*/react$1.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :root {\n    --default-hero-height: calc(100vh - var(--boemly-space-24));\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])));
@@ -2541,6 +2541,17 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
+var shuffleElements = function shuffleElements(slides) {
+  var slidesCopy = [].concat(slides); // Create a copy to avoid mutating the original array
+  for (var i = slidesCopy.length - 1; i > 0; i--) {
+    var j = Math.floor(Math.random() * (i + 1));
+    var _ref = [slidesCopy[j], slidesCopy[i]];
+    slidesCopy[i] = _ref[0];
+    slidesCopy[j] = _ref[1];
+  }
+  return slidesCopy;
+};
+
 var ITEM_GAP$1 = 24;
 var MAX_OFFSET_RIGHT$1 = 55;
 var TextCarousel = function TextCarousel(_ref) {
@@ -2579,6 +2590,13 @@ var TextCarousel = function TextCarousel(_ref) {
   var canMoveLeft = React.useMemo(function () {
     return sliderIndex !== 0;
   }, [sliderIndex]);
+  var shuffleSlides = React.useMemo(function () {
+    return shuffleElements(slice.slides);
+  }, [slice.slides]);
+  var slides = slice.slides,
+    _slice$isShuffled = slice.isShuffled,
+    isShuffled = _slice$isShuffled === void 0 ? false : _slice$isShuffled;
+  var displaySlides = isShuffled ? shuffleSlides : slides;
   return React__default.default.createElement(boemly.DefaultSectionContainer, {
     backgroundColor: primary50,
     title: slice.title
@@ -2613,7 +2631,7 @@ var TextCarousel = function TextCarousel(_ref) {
       duration: 0.3,
       ease: 'easeInOut'
     }
-  }, slice.slides.map(function (_ref2) {
+  }, displaySlides.map(function (_ref2) {
     var id = _ref2.id,
       title = _ref2.title,
       text = _ref2.text,