@treely/strapi-slices 6.0.3 → 6.1.1

package/README.md

@@ -17,7 +17,7 @@ npm install
 Run the app in DEV mode:
 
 ```bash
-npm run dev
+npm run storybook
 ```
 
 Run the linter:

package/dist/models/strapi/StrapiTextCardWithIcons.d.ts

@@ -1,8 +1,11 @@
 import StrapiImage from './StrapiImage';
+import StrapiLink from './StrapiLink';
 interface StrapiTextCardWithIcon {
     id: number;
     title: string;
     text: string;
     icon: StrapiImage;
+    button?: StrapiLink;
+    image?: StrapiImage;
 }
 export default StrapiTextCardWithIcon;

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

@@ -4,3 +4,4 @@ export declare const Minimal: import("@storybook/types").AnnotatedStoryFn<import
 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>;
+export declare const FullProps: 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"])));
@@ -2555,6 +2555,8 @@ var TextCarousel = function TextCarousel(_ref) {
     formatMessage = _useContext.formatMessage;
   var _useWindowSize = reactUse.useWindowSize(),
     windowWidth = _useWindowSize.width;
+  var _useRouter = router.useRouter(),
+    push = _useRouter.push;
   var _useState = React.useState(0),
     sliderIndex = _useState[0],
     setSliderIndex = _useState[1];
@@ -2615,7 +2617,9 @@ var TextCarousel = function TextCarousel(_ref) {
     var id = _ref2.id,
       title = _ref2.title,
       text = _ref2.text,
-      icon = _ref2.icon;
+      icon = _ref2.icon,
+      image = _ref2.image,
+      button = _ref2.button;
     return React__default.default.createElement(CardContainer, {
       key: id,
       ref: itemRef
@@ -2631,6 +2635,21 @@ var TextCarousel = function TextCarousel(_ref) {
           objectFit: icon.objectFit || 'contain'
         }
       }),
+      image: image && React__default.default.createElement(Image__default.default, {
+        src: strapiMediaUrl(image == null ? void 0 : image.img, 'medium'),
+        alt: image == null ? void 0 : image.alt,
+        fill: true,
+        style: {
+          objectFit: (image == null ? void 0 : image.objectFit) || 'cover',
+          borderRadius: 'var(--boemly-radii-xl)'
+        }
+      }),
+      button: button && {
+        text: button.text,
+        onClick: function onClick() {
+          return push(strapiLinkUrl(button));
+        }
+      },
       displayAs: "column"
     }));
   })), React__default.default.createElement(boemly.Box, {