@treely/strapi-slices 4.0.0 → 4.1.1

package/README.md

@@ -62,7 +62,7 @@ Find the build in the `dist` folder.
 Install the package:
 
 ```bash
-npm install @tree-ly/strapi-slices
+npm install @treely/strapi-slices
 ```
 
 Use the slices:
@@ -73,7 +73,7 @@ import {
   SliceRenderer,
   StrapiBlogPost,
   StrapiCustomerStory,
-} from '@tree-ly/strapi-slices';
+} from '@treely/strapi-slices';
 
 // Get the slices, blog posts, and customer stories from Strapi
 // Get the projects from the FPM API

package/dist/rootMessages.de.d.ts

@@ -1,6 +1,8 @@
 declare const rootMessagesDe: {
     'unit.formatter.tonsCo2': string;
     'unit.formatter.tonsCo2PerYear': string;
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
     'sections.shopCheckout.intro.price': string;
     'sections.shopCheckout.contributionValue.label.EUR': string;
     'sections.shopCheckout.contributionValue.label.CHF': string;

package/dist/rootMessages.en.d.ts

@@ -1,6 +1,8 @@
 declare const rootMessagesEn: {
     'unit.formatter.tonsCo2': string;
     'unit.formatter.tonsCo2PerYear': string;
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
     'sections.shopCheckout.intro.price': string;
     'sections.shopCheckout.contributionValue.label.EUR': string;
     'sections.shopCheckout.contributionValue.label.CHF': string;

package/dist/slices/Timeline/Timeline.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
+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 declare const Timeline: React.FC<TimelineProps>;

package/dist/slices/Timeline/index.d.ts

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

package/dist/slices/Timeline/messages.de.d.ts

@@ -0,0 +1,5 @@
+declare const messagesDe: {
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
+};
+export default messagesDe;

package/dist/slices/Timeline/messages.en.d.ts

@@ -0,0 +1,5 @@
+declare const messagesEn: {
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
+};
+export default messagesEn;

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

@@ -2171,35 +2171,35 @@ var FORMAT_AS_PERCENT_CONFIG = {
   maximumFractionDigits: 2
 };
 
-var messagesDe$b = {
+var messagesDe$c = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
 
-var messagesDe$a = {
+var messagesDe$b = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen'
 };
 
-var messagesDe$9 = {
+var messagesDe$a = {
   'sections.customerStories.more': 'Weiterlesen'
 };
 
-var messagesDe$8 = {
+var messagesDe$9 = {
   'sections.glossary.copyButtonLabel': 'Kopiere den Link zu diesem Abschnitt in die Zwischenablage',
   'sections.glossary.copySuccessMessage': 'Link in die Zwischenablage kopiert',
   'sections.glossary.copyFailureMessage': 'Link konnte nicht in die Zwischenablage kopiert werden'
 };
 
-var messagesDe$7 = {
+var messagesDe$8 = {
   'sections.projectFacts.projectInfo.value': 'Projekt Infos',
   'projects.projectFacts.properties.area': 'Fläche'
 };
 
-var messagesDe$6 = {
+var messagesDe$7 = {
   'sections.projectsMap.link.text': 'Mehr Infos'
 };
 
-var messagesDe$5 = {
+var messagesDe$6 = {
   'sections.shopCheckout.intro.price': 'Preis',
   'sections.shopCheckout.contributionValue.label.EUR': 'Geben sie einen Betrag in € ein',
   'sections.shopCheckout.contributionValue.label.CHF': 'Geben sie einen Betrag in CHF ein',
@@ -2214,19 +2214,19 @@ var messagesDe$5 = {
   'sections.shopCheckout.submit': 'Kaufen'
 };
 
-var messagesDe$4 = {
+var messagesDe$5 = {
   'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
   'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
   'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
   'components.creditsAvailableBadge.text.notYet': 'Noch keine Credits verfügbar'
 };
 
-var messagesDe$3 = {
+var messagesDe$4 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
 };
 
-var messagesDe$2 = {
+var messagesDe$3 = {
   'features.projectInfo.projectInfo.value': 'Projekt Infos',
   'features.projectInfo.properties.area': 'Projekt Fläche',
   'features.projectInfo.properties.location': 'Standort',
@@ -2241,7 +2241,7 @@ var messagesDe$2 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {Jahr} other {Jahre} }'
 };
 
-var messagesDe$1 = {
+var messagesDe$2 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Geben Sie den Beitrag in Fr. ein',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Geben Sie den Beitrag in € ein',
   'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
@@ -2257,49 +2257,54 @@ var messagesDe$1 = {
   'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren'
 };
 
-var messagesDe = {
+var messagesDe$1 = {
   'components.portfolioProjectCard.text.yes': 'Credits verfügbar',
   'components.portfolioProjectCard.text.some': 'Einige verbleibende Credits',
   'components.portfolioProjectCard.text.no': 'Keine verbleibenden Credits',
   'components.portfolioProjectCard.text.notYet': 'Noch keine Credits verfügbar'
 };
 
+var messagesDe = {
+  'sections.timeline.backgroundShapes': 'Hintergrundformen',
+  'sections.timeline.showMoreButton': 'Drei weitere Meilensteine anzeigen'
+};
+
 var unitMessagesEn = {
   'unit.formatter.tonsCo2': '{number} /tCO₂',
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year'
 };
 
-var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$4, messagesDe$3, messagesDe, messagesDe$2, messagesDe$1, messagesDe$b, messagesDe$a, messagesDe$9, messagesDe$8, messagesDe$7, messagesDe$6, messagesDe$5, unitMessagesEn);
+var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$5, messagesDe$4, messagesDe$1, messagesDe$3, messagesDe$2, messagesDe$c, messagesDe$b, messagesDe$a, messagesDe$9, messagesDe$8, messagesDe$7, messagesDe$6, messagesDe, unitMessagesEn);
 
-var messagesEn$b = {
+var messagesEn$c = {
   'sections.comparison.backgroundShapes': 'Background shapes'
 };
 
-var messagesEn$a = {
+var messagesEn$b = {
   'sections.cta.backgroundShapesDark': 'Dark background shapes',
   'sections.cta.backgroundShapesLight': 'Light background shapes'
 };
 
-var messagesEn$9 = {
+var messagesEn$a = {
   'sections.customerStories.more': 'Read more'
 };
 
-var messagesEn$8 = {
+var messagesEn$9 = {
   'sections.glossary.copyButtonLabel': 'Copy a link to this section to your clipboard',
   'sections.glossary.copySuccessMessage': 'Copied the link to your clipboard',
   'sections.glossary.copyFailureMessage': 'Could not copy link to clipboard'
 };
 
-var messagesEn$7 = {
+var messagesEn$8 = {
   'sections.projectFacts.projectInfo.value': 'Project Infos',
   'projects.projectFacts.properties.area': 'Area'
 };
 
-var messagesEn$6 = {
+var messagesEn$7 = {
   'sections.projectsMap.link.text': 'Show more info'
 };
 
-var messagesEn$5 = {
+var messagesEn$6 = {
   'sections.shopCheckout.intro.price': 'Price',
   'sections.shopCheckout.contributionValue.label.EUR': 'Enter contribution value in €',
   'sections.shopCheckout.contributionValue.label.CHF': 'Enter contribution value in CHF',
@@ -2314,19 +2319,19 @@ var messagesEn$5 = {
   'sections.shopCheckout.submit': 'Checkout'
 };
 
-var messagesEn$4 = {
+var messagesEn$5 = {
   'components.creditsAvailableBadge.text.yes': 'Credits available',
   'components.creditsAvailableBadge.text.some': 'Some remaining credits',
   'components.creditsAvailableBadge.text.no': 'No remaining credits',
   'components.creditsAvailableBadge.text.notYet': 'No credits available yet'
 };
 
-var messagesEn$3 = {
+var messagesEn$4 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Project documents',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Download document'
 };
 
-var messagesEn$2 = {
+var messagesEn$3 = {
   'features.projectInfo.projectInfo.value': 'Project Infos',
   'features.projectInfo.properties.area': 'Project Area',
   'features.projectInfo.properties.location': 'Location',
@@ -2341,7 +2346,7 @@ var messagesEn$2 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {year} other {years} }'
 };
 
-var messagesEn$1 = {
+var messagesEn$2 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Contribution Amount in CHF',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Contribution Amount in €',
   'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
@@ -2357,14 +2362,19 @@ var messagesEn$1 = {
   'portfolio.smallCheckout.cta.button': 'Contact our Sales Team'
 };
 
-var messagesEn = {
+var messagesEn$1 = {
   'components.portfolioProjectCard.text.yes': 'Credits available',
   'components.portfolioProjectCard.text.some': 'Some remaining credits',
   'components.portfolioProjectCard.text.no': 'No remaining credits',
   'components.portfolioProjectCard.text.notYet': 'No credits available yet'
 };
 
-var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$4, messagesEn$3, messagesEn, messagesEn$2, messagesEn$1, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$7, messagesEn$6, messagesEn$5, unitMessagesEn);
+var messagesEn = {
+  'sections.timeline.backgroundShapes': 'Background shapes',
+  'sections.timeline.showMoreButton': 'Show three more milestones'
+};
+
+var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$5, messagesEn$4, messagesEn$1, messagesEn$3, messagesEn$2, messagesEn$c, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$7, messagesEn$6, messagesEn, unitMessagesEn);
 
 var _templateObject$4;
 var GLOBAL_STYLE = /*#__PURE__*/react$1.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  // GintoNord\n  @font-face {\n    font-family: 'GintoNord';\n    src: url('", "/assets/v3/fonts/ABCGintoNord-Bold.woff2')\n      format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n  // Inter\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Regular.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 400;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Medium.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 500;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-SemiBold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 600;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Bold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n  // SpaceMono\n  @font-face {\n    font-family: 'SpaceMono';\n    src: url('", "/assets/v3/fonts/SpaceMono-Bold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n\n  :root {\n    --default-hero-height: calc(100vh - var(--boemly-space-24));\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), CDN_URI, CDN_URI, CDN_URI, CDN_URI, CDN_URI, CDN_URI);
@@ -4720,6 +4730,210 @@ var Comparison = function Comparison(_ref) {
   }))));
 };
 
+var Timeline = function Timeline(_ref) {
+  var slice = _ref.slice;
+  var _useContext = React.useContext(reactIntl.IntlContext),
+    formatMessage = _useContext.formatMessage;
+  var _useState = React.useState(3),
+    visibleItems = _useState[0],
+    setVisibleItems = _useState[1];
+  var _useMediaQuery = boemly.useMediaQuery(BREAKPOINT_MD_QUERY),
+    mobile = _useMediaQuery[0];
+  var _useState2 = React.useState(false),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var showMoreItems = function showMoreItems() {
+    setVisibleItems(function (prevVisibleItems) {
+      return prevVisibleItems + 3;
+    });
+  };
+  return React__default.default.createElement(boemly.DefaultSectionContainer, null, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.Flex, {
+    flexDir: ['column', null, null, 'row']
+  }, React__default.default.createElement(boemly.Box, {
+    width: ['full', null, null, '50%'],
+    position: [null, null, null, 'sticky'],
+    top: ['16', null, null, '32'],
+    height: "full",
+    paddingRight: [null, null, null, '28']
+  }, React__default.default.createElement(boemly.DefaultSectionHeader, {
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.text
+  }), mobile && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Spacer, {
+    h: "10"
+  }), React__default.default.createElement(boemly.Flex, {
+    justifyContent: "center"
+  }, React__default.default.createElement(boemly.Box, {
+    borderRadius: "full",
+    width: "3",
+    height: "3",
+    margin: "1.5",
+    backgroundColor: "gray"
+  })), React__default.default.createElement(boemly.Box, {
+    overflow: "visible",
+    borderRight: "dashed 1px var(--boemly-colors-gray-200)",
+    transform: "translateX(-50%)",
+    position: "relative",
+    height: "20"
+  }))), React__default.default.createElement(boemly.Box, {
+    overflow: "visible",
+    maxWidth: ['full', null, null, '50%'],
+    borderLeft: [null, null, null, 'dashed 1px var(--boemly-colors-gray-200)'],
+    position: "relative",
+    width: "full"
+  }, React__default.default.createElement(boemly.Flex, {
+    flexDir: "column",
+    overflow: "visible",
+    gap: [null, null, null, '8']
+  }, slice.timelineItems.slice(0, visibleItems).map(function (item, index) {
+    return React__default.default.createElement(boemly.SimpleGrid, {
+      gap: ['none', null, null, '4'],
+      key: item.id,
+      columns: [1, null, null, 2],
+      alignContent: "center",
+      gridTemplateColumns: [null, null, null, '5% 85%'],
+      position: "relative"
+    }, React__default.default.createElement(boemly.Flex, {
+      alignItems: "center",
+      justifyContent: ['center', null, null, 'flex-start']
+    }, React__default.default.createElement(boemly.Box, {
+      position: "absolute",
+      transform: [null, null, null, 'translateX(-50%)'],
+      backgroundColor: "white"
+    }, item.icon ? React__default.default.createElement(boemly.Box, {
+      padding: "2"
+    }, React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(item.icon.img, 'xSmall'),
+      alt: item.icon.alt,
+      width: "21",
+      height: "21"
+    })) : React__default.default.createElement(boemly.Box, {
+      padding: "2"
+    }, React__default.default.createElement(boemly.Box, {
+      borderRadius: "full",
+      backgroundColor: "primary.800",
+      width: "2",
+      height: "2"
+    })), mobile && React__default.default.createElement(boemly.Box, {
+      overflow: "visible",
+      borderRight: "dashed 1px var(--boemly-colors-gray-200)",
+      transform: "translateX(-50%)",
+      position: "relative",
+      height: "10"
+    }))), React__default.default.createElement(boemly.Container, {
+      p: [null, null, null, '3'],
+      zIndex: "base",
+      position: "relative",
+      elevation: "none"
+    }, item.backgroundShapes ? React__default.default.createElement(boemly.Box, {
+      position: "absolute",
+      left: "0",
+      top: "0",
+      width: "full",
+      height: "full",
+      zIndex: "-1"
+    }, React__default.default.createElement(Image__default.default, {
+      src: CDN_URI + "/assets/v3/strapi-slices/timeline-shapes.svg",
+      alt: formatMessage({
+        id: 'sections.timeline.backgroundShapes'
+      }),
+      fill: true,
+      style: {
+        objectFit: 'cover',
+        borderRadius: 'var(--boemly-radii-xl)'
+      }
+    })) : React__default.default.createElement(React__default.default.Fragment, null), React__default.default.createElement(boemly.Flex, {
+      flexDir: "column"
+    }, React__default.default.createElement(boemly.Flex, {
+      alignItems: "flex-start",
+      justifyContent: "space-between"
+    }, React__default.default.createElement(boemly.Box, null, item.tagline && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Text, {
+      color: "primary.800",
+      size: "smMonoUppercase"
+    }, item.tagline), React__default.default.createElement(boemly.Spacer, {
+      h: "2"
+    }))), React__default.default.createElement(boemly.Flex, null, item.badge && React__default.default.createElement(boemly.Tag, {
+      colorScheme: item.badge.variant,
+      borderRadius: "md"
+    }, item.badge.text), item.logo && React__default.default.createElement(boemly.Box, {
+      position: "relative",
+      height: "8",
+      width: "16"
+    }, React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(item.logo.img, 'small'),
+      alt: item.logo.alt,
+      fill: true,
+      style: {
+        objectFit: item.logo.objectFit
+      }
+    })))), React__default.default.createElement(boemly.Heading, {
+      size: "lg",
+      mt: ['6', null, null, '3'],
+      maxWidth: "xs"
+    }, item.title), item.text && React__default.default.createElement(boemly.Box, {
+      mt: "3"
+    }, React__default.default.createElement(boemly.RichText, {
+      content: item.text
+    })), item.button && React__default.default.createElement(boemly.Box, {
+      textAlign: "left"
+    }, React__default.default.createElement(boemly.Spacer, {
+      h: "4"
+    }), React__default.default.createElement(StrapiLinkButton, {
+      link: item.button,
+      size: "sm",
+      variant: "outline"
+    })), item.image ? React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Box, {
+      position: "relative",
+      mt: "4",
+      height: ['2xs', null, null, null, '48'],
+      minWidth: [null, null, null, null, '50%']
+    }, React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(item.image.img, 'xLarge'),
+      alt: item.image.alt,
+      fill: true,
+      style: {
+        cursor: mobile ? 'unset' : 'pointer',
+        objectFit: item.image.objectFit || 'cover',
+        borderRadius: 'var(--boemly-radii-xl)'
+      },
+      onClick: function onClick() {
+        return !mobile && setIsOpen(true);
+      }
+    }), React__default.default.createElement(FullScreenImage, {
+      images: [item.image],
+      isOpen: isOpen,
+      onClose: function onClose() {
+        return setIsOpen(false);
+      }
+    }))) : React__default.default.createElement(React__default.default.Fragment, null))), mobile && index + 1 < slice.timelineItems.length && React__default.default.createElement(boemly.Box, {
+      overflow: "visible",
+      borderRight: "dashed 1px var(--boemly-colors-gray-200)",
+      transform: "translateX(-50%)",
+      position: "relative",
+      height: "20"
+    }));
+  })), visibleItems < slice.timelineItems.length && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.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%)"
+  }), React__default.default.createElement(boemly.Box, {
+    bottom: "0",
+    textAlign: "center",
+    zIndex: "overlay",
+    position: "relative"
+  }, React__default.default.createElement(boemly.Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: showMoreItems,
+    m: [null, null, null, '8']
+  }, React__default.default.createElement(reactIntl.FormattedMessage, {
+    id: "sections.timeline.showMoreButton"
+  }))))))));
+};
+
 var SliceRenderer = function SliceRenderer(_ref) {
   var slices = _ref.slices,
     blogPosts = _ref.blogPosts,
@@ -4924,6 +5138,11 @@ var SliceRenderer = function SliceRenderer(_ref) {
           key: slice.__component + "-" + slice.id,
           slice: slice
         });
+      case 'sections.timeline':
+        return React__default.default.createElement(Timeline, {
+          key: slice.__component + "-" + slice.id,
+          slice: slice
+        });
       default:
         if (CustomSlice) {
           return React__default.default.createElement(CustomSlice, {