@treely/strapi-slices 3.3.0 → 4.1.0

package/src/slices/Timeline/Timeline.tsx

@@ -0,0 +1,331 @@
+import React, { useContext } from 'react';
+import {
+  Button,
+  Box,
+  Container,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Flex,
+  Heading,
+  RichText,
+  SimpleGrid,
+  Spacer,
+  Tag,
+  Text,
+  Wrapper,
+  useMediaQuery,
+} from 'boemly';
+import Image from 'next/image';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import { CDN_URI } from '../../constants/api';
+import { IntlContext } from 'react-intl';
+import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
+import { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import FullScreenImage from '../../components/FullScreenImage';
+
+export interface TimelineProps {
+  slice: {
+    title: string;
+    text?: string;
+    tagline?: string;
+
+    timelineItems: TimelineItem[];
+  };
+}
+
+export interface TimelineItem {
+  id: number;
+  tagline?: string;
+  title: string;
+  text?: string;
+  badge?: { text: string; variant: 'orange' | 'green' | 'red' | 'gray' };
+  logo?: StrapiImage;
+  icon?: StrapiImage;
+  image?: StrapiImage;
+  button?: StrapiLink;
+  backgroundShapes?: boolean;
+}
+
+export const Timeline: React.FC<TimelineProps> = ({ slice }: TimelineProps) => {
+  const { formatMessage } = useContext(IntlContext);
+  const [visibleItems, setVisibleItems] = useState(3);
+  const [mobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const showMoreItems = () => {
+    setVisibleItems((prevVisibleItems) => prevVisibleItems + 3);
+  };
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        <Flex flexDir={['column', null, null, 'row']}>
+          <Box
+            width={['full', null, null, '50%']}
+            position={[null, null, null, 'sticky']}
+            top={['16', null, null, '32']}
+            height="full"
+            paddingRight={[null, null, null, '28']}
+          >
+            <DefaultSectionHeader
+              tagline={slice.tagline}
+              title={slice.title}
+              text={slice.text}
+            />
+            {mobile && (
+              <>
+                <Spacer h="10" />
+                <Flex justifyContent="center">
+                  <Box
+                    borderRadius="full"
+                    width="3"
+                    height="3"
+                    margin="1.5"
+                    backgroundColor="gray"
+                  />
+                </Flex>
+                <Box
+                  overflow="visible"
+                  borderRight="dashed 1px var(--boemly-colors-gray-200)"
+                  transform="translateX(-50%)"
+                  position="relative"
+                  height="20"
+                />
+              </>
+            )}
+          </Box>
+          <Box
+            overflow="visible"
+            maxWidth={['full', null, null, '50%']}
+            borderLeft={[
+              null,
+              null,
+              null,
+              'dashed 1px var(--boemly-colors-gray-200)',
+            ]}
+            position="relative"
+          >
+            <Flex
+              flexDir="column"
+              overflow="visible"
+              gap={[null, null, null, '8']}
+            >
+              {slice.timelineItems.slice(0, visibleItems).map((item, index) => (
+                <SimpleGrid
+                  gap={['none', null, null, '4']}
+                  key={item.id}
+                  columns={[1, null, null, 2]}
+                  alignContent="center"
+                  gridTemplateColumns={[null, null, null, '5% 85%']}
+                  position="relative"
+                >
+                  <Flex
+                    alignItems="center"
+                    justifyContent={['center', null, null, 'flex-start']}
+                  >
+                    <Box
+                      position="absolute"
+                      transform={[null, null, null, 'translateX(-50%)']}
+                      backgroundColor="white"
+                    >
+                      {item.icon ? (
+                        <Box padding="2">
+                          <Image
+                            src={strapiMediaUrl(item.icon.img, 'xSmall')}
+                            alt={item.icon.alt}
+                            width="21"
+                            height="21"
+                          />
+                        </Box>
+                      ) : (
+                        <Box padding="2">
+                          <Box
+                            borderRadius="full"
+                            backgroundColor="primary.800"
+                            width="2"
+                            height="2"
+                          />
+                        </Box>
+                      )}
+                      {mobile && (
+                        <Box
+                          overflow="visible"
+                          borderRight="dashed 1px var(--boemly-colors-gray-200)"
+                          transform="translateX(-50%)"
+                          position="relative"
+                          height="10"
+                        />
+                      )}
+                    </Box>
+                  </Flex>
+                  <Container
+                    p={[null, null, null, '3']}
+                    zIndex="base"
+                    position="relative"
+                    elevation="none"
+                  >
+                    {item.backgroundShapes ? (
+                      <Box
+                        position="absolute"
+                        left="0"
+                        top="0"
+                        width="full"
+                        height="full"
+                        zIndex="-1"
+                      >
+                        <Image
+                          src={`${CDN_URI}/assets/v3/strapi-slices/timeline-shapes.svg`}
+                          alt={formatMessage({
+                            id: 'sections.timeline.backgroundShapes',
+                          })}
+                          fill
+                          style={{
+                            objectFit: 'cover',
+                            borderRadius: 'var(--boemly-radii-xl)',
+                          }}
+                        />
+                      </Box>
+                    ) : (
+                      <></>
+                    )}
+
+                    <Flex flexDir="column">
+                      <Flex
+                        alignItems="flex-start"
+                        justifyContent="space-between"
+                      >
+                        <Box>
+                          {item.tagline && (
+                            <>
+                              <Text color="primary.800" size="smMonoUppercase">
+                                {item.tagline}
+                              </Text>
+                              <Spacer h="2" />
+                            </>
+                          )}
+                        </Box>
+                        <Flex>
+                          {item.badge && (
+                            <Tag
+                              colorScheme={item.badge.variant}
+                              borderRadius="md"
+                            >
+                              {item.badge.text}
+                            </Tag>
+                          )}
+                          {item.logo && (
+                            <Box position="relative" height="8" width="16">
+                              <Image
+                                src={strapiMediaUrl(item.logo.img, 'small')}
+                                alt={item.logo.alt}
+                                fill
+                                style={{
+                                  objectFit: item.logo.objectFit,
+                                }}
+                              />
+                            </Box>
+                          )}
+                        </Flex>
+                      </Flex>
+                      <Heading
+                        size="lg"
+                        mt={['6', null, null, '3']}
+                        maxWidth="xs"
+                      >
+                        {item.title}
+                      </Heading>
+                      {item.text && (
+                        <Box mt="3">
+                          <RichText content={item.text} />
+                        </Box>
+                      )}
+                      {item.button && (
+                        <Box textAlign="left">
+                          <Spacer h="4" />
+                          <StrapiLinkButton
+                            link={item.button}
+                            size="sm"
+                            variant="outline"
+                          />
+                        </Box>
+                      )}
+                      {item.image ? (
+                        <>
+                          <Box
+                            position="relative"
+                            mt="4"
+                            height={['2xs', null, null, null, '48']}
+                            minWidth={[null, null, null, null, '50%']}
+                          >
+                            <Image
+                              src={strapiMediaUrl(item.image.img, 'xLarge')}
+                              alt={item.image.alt}
+                              fill
+                              style={{
+                                cursor: mobile ? 'unset' : 'pointer',
+                                objectFit: item.image.objectFit || 'cover',
+                                borderRadius: 'var(--boemly-radii-xl)',
+                              }}
+                              onClick={() => !mobile && setIsOpen(true)}
+                            />
+                            <FullScreenImage
+                              images={[item.image]}
+                              isOpen={isOpen}
+                              onClose={() => setIsOpen(false)}
+                            />
+                          </Box>
+                        </>
+                      ) : (
+                        <></>
+                      )}
+                    </Flex>
+                  </Container>
+                  {mobile && index + 1 < slice.timelineItems.length && (
+                    <Box
+                      overflow="visible"
+                      borderRight="dashed 1px var(--boemly-colors-gray-200)"
+                      transform="translateX(-50%)"
+                      position="relative"
+                      height="20"
+                    />
+                  )}
+                </SimpleGrid>
+              ))}
+            </Flex>
+            {visibleItems < slice.timelineItems.length && (
+              <>
+                <Box
+                  width="full"
+                  height={['36', null, null, '64']}
+                  position="absolute"
+                  bottom="0"
+                  zIndex="1"
+                  background="linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.98) 76.54%, #FFF 100%)"
+                />
+                <Box
+                  bottom="0"
+                  textAlign="center"
+                  zIndex="overlay"
+                  position="relative"
+                >
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={showMoreItems}
+                    m={[null, null, null, '8']}
+                  >
+                    <FormattedMessage id="sections.timeline.showMoreButton" />
+                  </Button>
+                </Box>
+              </>
+            )}
+          </Box>
+        </Flex>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/Timeline/index.ts

@@ -0,0 +1,3 @@
+import { Timeline } from './Timeline';
+
+export default Timeline;

package/src/slices/Timeline/messages.de.ts

@@ -0,0 +1,5 @@
+const messagesDe = {
+  'sections.timeline.backgroundShapes': 'Hintergrundformen',
+  'sections.timeline.showMoreButton': 'Drei weitere Meilensteine anzeigen',
+};
+export default messagesDe;

package/src/slices/Timeline/messages.en.ts

@@ -0,0 +1,5 @@
+const messagesEn = {
+  'sections.timeline.backgroundShapes': 'Background shapes',
+  'sections.timeline.showMoreButton': 'Show three more milestones',
+};
+export default messagesEn;

package/src/utils/mergeGlobalAndStrapiBlogPostData.ts

@@ -2,14 +2,16 @@ import { GetStaticPropsContext } from 'next';
 import strapiMediaUrl from './strapiMediaUrl';
 import {
   IStrapiData,
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_PROJECTS,
   StrapiBlogPost,
   StrapiBlogPostProps,
   StrapiGlobal,
 } from '..';
 import PortfolioProject from '../models/PortfolioProject';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
+import {
+  SLICES_WITH_BLOG_POSTS,
+  SLICES_WITH_PROJECTS,
+} from '../constants/slicesConfig';
 
 const mergeGlobalAndStrapiBlogPostData = (
   context: GetStaticPropsContext,
@@ -27,10 +29,10 @@ const mergeGlobalAndStrapiBlogPostData = (
     : DEFAULT_SHARE_IMAGE;
 
   const returnBlog = post.attributes.slices.some((slice) =>
-    SECTIONS_WITH_BLOG_POSTS.includes(slice.__component)
+    SLICES_WITH_BLOG_POSTS.includes(slice.__component)
   );
   const returnProjects = post.attributes.slices.some((slice) =>
-    SECTIONS_WITH_PROJECTS.includes(slice.__component)
+    SLICES_WITH_PROJECTS.includes(slice.__component)
   );
 
   return {

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.ts

@@ -2,12 +2,12 @@ import { GetStaticPropsContext } from 'next';
 import strapiMediaUrl from './strapiMediaUrl';
 import {
   IStrapiData,
-  SECTIONS_WITH_CUSTOMER_STORIES,
   StrapiCustomerStory,
   StrapiCustomerStoryProps,
   StrapiGlobal,
 } from '..';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
+import { SLICES_WITH_CUSTOMER_STORIES } from '../constants/slicesConfig';
 
 const mergeGlobalAndStrapiCustomerStoryData = (
   context: GetStaticPropsContext,
@@ -24,7 +24,7 @@ const mergeGlobalAndStrapiCustomerStoryData = (
     : DEFAULT_SHARE_IMAGE;
 
   const returnCustomerStories = customerStory.attributes.slices.some((slice) =>
-    SECTIONS_WITH_CUSTOMER_STORIES.includes(slice.__component)
+    SLICES_WITH_CUSTOMER_STORIES.includes(slice.__component)
   );
 
   return {

package/src/utils/mergeGlobalAndStrapiPageData.ts

@@ -12,10 +12,10 @@ import PortfolioProject from '../models/PortfolioProject';
 import {
   DARK_THEME_HEADER_SECTIONS,
   EXTENDABLE_HEADER_SECTIONS,
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_CUSTOMER_STORIES,
-  SECTIONS_WITH_PROJECTS,
-} from '../constants/sectionsConfig';
+  SLICES_WITH_BLOG_POSTS,
+  SLICES_WITH_CUSTOMER_STORIES,
+  SLICES_WITH_PROJECTS,
+} from '../constants/slicesConfig';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
 
 const mergeGlobalAndStrapiPageData = (
@@ -35,13 +35,13 @@ const mergeGlobalAndStrapiPageData = (
     : DEFAULT_SHARE_IMAGE;
 
   const returnBlogPosts = page.attributes.slices.some((slice) =>
-    SECTIONS_WITH_BLOG_POSTS.includes(slice.__component)
+    SLICES_WITH_BLOG_POSTS.includes(slice.__component)
   );
   const returnCustomerStories = page.attributes.slices.some((slice) =>
-    SECTIONS_WITH_CUSTOMER_STORIES.includes(slice.__component)
+    SLICES_WITH_CUSTOMER_STORIES.includes(slice.__component)
   );
   const returnProjects = page.attributes.slices.some((slice) =>
-    SECTIONS_WITH_PROJECTS.includes(slice.__component)
+    SLICES_WITH_PROJECTS.includes(slice.__component)
   );
 
   return {

package/src/utils/mergeGlobalAndStrapiProjectData.ts

@@ -11,9 +11,9 @@ import PortfolioProject from '../models/PortfolioProject';
 import {
   DARK_THEME_HEADER_SECTIONS,
   EXTENDABLE_HEADER_SECTIONS,
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_PROJECTS,
-} from '../constants/sectionsConfig';
+  SLICES_WITH_BLOG_POSTS,
+  SLICES_WITH_PROJECTS,
+} from '../constants/slicesConfig';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
 
 const mergeGlobalAndStrapiProject = (
@@ -32,10 +32,10 @@ const mergeGlobalAndStrapiProject = (
     : DEFAULT_SHARE_IMAGE;
 
   const returnBlogPosts = project.attributes.slices.some((slice) =>
-    SECTIONS_WITH_BLOG_POSTS.includes(slice.__component)
+    SLICES_WITH_BLOG_POSTS.includes(slice.__component)
   );
   const returnProjects = project.attributes.slices.some((slice) =>
-    SECTIONS_WITH_PROJECTS.includes(slice.__component)
+    SLICES_WITH_PROJECTS.includes(slice.__component)
   );
 
   return {

package/dist/constants/sectionsConfig.d.ts

@@ -1,5 +0,0 @@
-export declare const EXTENDABLE_HEADER_SECTIONS: string[];
-export declare const DARK_THEME_HEADER_SECTIONS: string[];
-export declare const SECTIONS_WITH_BLOG_POSTS: string[];
-export declare const SECTIONS_WITH_CUSTOMER_STORIES: string[];
-export declare const SECTIONS_WITH_PROJECTS: string[];