@treely/strapi-slices 7.4.0 → 7.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.4.0",
+  "version": "7.4.2",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/slices/Events/Events.stories.tsx

@@ -16,7 +16,7 @@ const Template: StoryFn<typeof Events> = (args) => <Events {...args} />;
 export const Minimal = Template.bind({});
 Minimal.args = {
   slice: {
-    upcomingTitle: 'Tree.ly Events',
+    upcomingTitle: 'Ready to Learn more about Forest Climate Protection?',
     upcomingDescription: 'Join us for these amazing events',
     pastTitle: 'Past Events',
     pastDescription: 'Check out our past events',
@@ -27,7 +27,7 @@ Minimal.args = {
 export const WithFilterSearch = Template.bind({});
 WithFilterSearch.args = {
   slice: {
-    upcomingTitle: 'Tree.ly Events',
+    upcomingTitle: 'Ready to Learn more about Forest Climate Protection?',
     upcomingDescription: 'Join us for these amazing events',
     pastTitle: 'Past Events',
     pastDescription: 'Check out our past events',

package/src/slices/Events/Events.tsx

@@ -236,6 +236,8 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
             <DefaultSectionHeader
               title={slice.upcomingTitle}
               text={slice.upcomingDescription}
+              titleProps={{ maxW: '3xl' }}
+              textProps={{ maxW: '3xl' }}
             />
             <Spacer h="10" />
           </>
@@ -388,11 +390,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
             placeItems="center"
           >
             {upcomingEvents.map((event: IStrapiData<StrapiEvent>) => (
-              <Box
-                key={event.id}
-                width="full"
-                height={['full', null, null, 'xl']}
-              >
+              <Box key={event.id} width="full" height="full">
                 <EventCard event={event.attributes} />
               </Box>
             ))}
@@ -420,6 +418,8 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
           <DefaultSectionHeader
             title={slice.pastTitle}
             text={slice.pastDescription}
+            titleProps={{ maxW: '3xl' }}
+            textProps={{ maxW: '3xl' }}
           />
 
           <Spacer h="10" />
@@ -442,11 +442,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
               mb={['10', null, null, '20']}
             >
               {pastEvents.map((event: IStrapiData<StrapiEvent>) => (
-                <Box
-                  key={event.id}
-                  height={['full', null, null, 'xl']}
-                  width="full"
-                >
+                <Box key={event.id} height="full" width="full">
                   <EventCard event={event.attributes} />
                 </Box>
               ))}

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -105,54 +105,56 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
 
       <CarouselContainer ref={containerRef}>
         <Box position="relative" width="full">
-          <CarouselInnerContainer
-            numberOfItems={slice.slides.length}
-            animate={{
-              x: offsetLeft,
-            }}
-            transition={{
-              duration: 0.3,
-              ease: 'easeInOut',
-            }}
-          >
-            {displaySlides.map(({ id, title, text, icon, image, button }) => (
-              <CardContainer key={id} ref={itemRef}>
-                <TextCardWithIcon
-                  title={title}
-                  text={text}
-                  height="full"
-                  icon={
-                    <Image
-                      src={strapiMediaUrl(icon.img, 'small')}
-                      alt={icon.alt}
-                      fill
-                      style={{ objectFit: icon.objectFit || 'contain' }}
-                    />
-                  }
-                  image={
-                    image && (
+          <Wrapper>
+            <CarouselInnerContainer
+              numberOfItems={slice.slides.length}
+              animate={{
+                x: offsetLeft,
+              }}
+              transition={{
+                duration: 0.3,
+                ease: 'easeInOut',
+              }}
+            >
+              {displaySlides.map(({ id, title, text, icon, image, button }) => (
+                <CardContainer key={id} ref={itemRef}>
+                  <TextCardWithIcon
+                    title={title}
+                    text={text}
+                    height="full"
+                    icon={
                       <Image
-                        src={strapiMediaUrl(image?.img, 'medium')}
-                        alt={image?.alt}
+                        src={strapiMediaUrl(icon.img, 'small')}
+                        alt={icon.alt}
                         fill
-                        style={{
-                          objectFit: image?.objectFit || 'cover',
-                          borderRadius: 'var(--boemly-radii-xl)',
-                        }}
+                        style={{ objectFit: icon.objectFit || 'contain' }}
                       />
-                    )
-                  }
-                  button={
-                    button && {
-                      text: button.text,
-                      onClick: () => push(strapiLinkUrl(button)),
                     }
-                  }
-                  displayAs="column"
-                />
-              </CardContainer>
-            ))}
-          </CarouselInnerContainer>
+                    image={
+                      image && (
+                        <Image
+                          src={strapiMediaUrl(image?.img, 'medium')}
+                          alt={image?.alt}
+                          fill
+                          style={{
+                            objectFit: image?.objectFit || 'cover',
+                            borderRadius: 'var(--boemly-radii-xl)',
+                          }}
+                        />
+                      )
+                    }
+                    button={
+                      button && {
+                        text: button.text,
+                        onClick: () => push(strapiLinkUrl(button)),
+                      }
+                    }
+                    displayAs="column"
+                  />
+                </CardContainer>
+              ))}
+            </CarouselInnerContainer>
+          </Wrapper>
           <Box
             display={['none', null, null, !!allowScroll ? 'flex' : 'none']}
             pointerEvents="none"