create-sitecore-jss 22.2.0-canary.9 → 22.2.0

package/dist/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-sidebar.scss

@@ -1,29 +1,29 @@
-@import "@sass/abstracts/vars";
-@import "@sass/abstracts/mixins";
-
-.navigation.navigation-sidebar {
-    a {
-        text-decoration: none;
-    }
-    nav>ul {
-        .rel-level1 {
-            >.navigation-title {
-                margin-bottom: 0;
-                >a {
-                    padding: 5px 10px;
-                    display: block;
-                    position: relative;
-                    z-index: 1;
-                    margin-right: 0;
-                }
-            }
-            >ul {
-                margin-left: $small-margin;
-                margin-top: $extrasmall-margin;
-            }
-        }
-        .rel-level2 {
-            display: block;
-        }
-    }
-}
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+
+.navigation.navigation-sidebar {
+    a {
+        text-decoration: none;
+    }
+    nav>ul {
+        .rel-level1 {
+            >.navigation-title {
+                margin-bottom: 0;
+                >a {
+                    padding: 5px 10px;
+                    display: block;
+                    position: relative;
+                    z-index: 1;
+                    margin-right: 0;
+                }
+            }
+            >ul {
+                margin-left: $small-margin;
+                margin-top: $extrasmall-margin;
+            }
+        }
+        .rel-level2 {
+            display: block;
+        }
+    }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/navigation/_sitemap-navigation.scss

@@ -1,20 +1,20 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
-
-.navigation.sitemap-navigation {
-  .level2 a {
-    position: relative;
-    padding-left: 10px;
-    &:before {
-      @include font-size(1.4);
-      @include fa-icon();
-      transform: translateY(-50%) scale(1, -1);
-      position: absolute;
-      content: $fa-var-share;
-      top: 50%;
-      left: -8px;
-    }
-  }
-}
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+@import '@fontawesome/scss/mixins';
+@import '@fontawesome/scss/variables';
+
+.navigation.sitemap-navigation {
+  .level2 a {
+    position: relative;
+    padding-left: 10px;
+    &:before {
+      @include font-size(1.4);
+      @include fa-icon();
+      transform: translateY(-50%) scale(1, -1);
+      position: absolute;
+      content: $fa-var-share;
+      top: 50%;
+      left: -8px;
+    }
+  }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/navigation/index.scss

@@ -1,5 +1,5 @@
-@import "navigation-main-horizontal-vertical";
-@import "navigation-mobile";
-@import "navigation-sidebar";
-@import "sitemap-navigation";
-@import "navigation-fat";
+@import "navigation-main-horizontal-vertical";
+@import "navigation-mobile";
+@import "navigation-sidebar";
+@import "sitemap-navigation";
+@import "navigation-fat";

package/dist/templates/nextjs-sxa/src/assets/sass/components/promo/_absolute-bottom-link.scss

@@ -1,8 +1,8 @@
-.promo.absolute-bottom-link {
-    position: relative;
-    .field-promolink {
-        position: absolute;
-        bottom: 10px;
-        right: 10px;
-    }
-}
+.promo.absolute-bottom-link {
+    position: relative;
+    .field-promolink {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+    }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-hero.scss

@@ -1,40 +1,40 @@
-@import "@sass/abstracts/vars";
-@import "@sass/abstracts/mixins";
-
-.promo.promo-hero {
-    position: relative;
-    text-align: center;
-    &.promo-hero-half {
-        float: left;
-        width: 50%;
-        @include respond-to(all-mobile) {
-            float: none;
-            width: 100%;
-        }
-    }
-    .field-promotext {
-        display: inline-block;
-        transform: translateY(-50%);
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        padding: 20px;
-        color: $promo-hero-text-color;
-        background: $promo-bg-hero;
-        >a {
-            color: inherit;
-            text-decoration: none;
-        }
-        @include respond-to(all-mobile) {
-            width: 100%;
-            margin: 0;
-            h1 {
-                @include font-size(2.4);
-            }
-            h2, h3, h4 {
-                @include font-size(2.0);
-            }
-        }
-    }
-}
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+
+.promo.promo-hero {
+    position: relative;
+    text-align: center;
+    &.promo-hero-half {
+        float: left;
+        width: 50%;
+        @include respond-to(all-mobile) {
+            float: none;
+            width: 100%;
+        }
+    }
+    .field-promotext {
+        display: inline-block;
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        padding: 20px;
+        color: $promo-hero-text-color;
+        background: $promo-bg-hero;
+        >a {
+            color: inherit;
+            text-decoration: none;
+        }
+        @include respond-to(all-mobile) {
+            width: 100%;
+            margin: 0;
+            h1 {
+                @include font-size(2.4);
+            }
+            h2, h3, h4 {
+                @include font-size(2.0);
+            }
+        }
+    }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-shadow.scss

@@ -1,42 +1,42 @@
-@import "@sass/abstracts/vars";
-@import "@sass/abstracts/mixins";
-
-.promo-shadow {
-    max-width: 960px;
-    padding: 0;
-    border-top-width: 3px;
-    border-top-color: $promo-shadow-border;
-    border-style: solid;
-    overflow: visible;
-    position: relative;
-    &.promo {
-        float: left;
-    }
-    >.component-content {
-        @include respond-to(all-mobile) {
-            margin: 0 10px 30px 10px;
-        }
-        padding: 15px;
-        margin: 0 0 30px 0;
-        &:before, &:after {
-            opacity: 0.7;
-            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
-            position: absolute;
-            z-index: -1;
-            height: 20%;
-            max-height: 100px;
-            max-width: 460px;
-            width: 47%;
-            content: "";
-            bottom: 10px;
-        }
-        &:before {
-            left: 2%;
-            transform: rotate(-3deg);
-        }
-        &:after {
-            right: 2%;
-            transform: rotate(3deg);
-        }
-    }
-}
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+
+.promo-shadow {
+    max-width: 960px;
+    padding: 0;
+    border-top-width: 3px;
+    border-top-color: $promo-shadow-border;
+    border-style: solid;
+    overflow: visible;
+    position: relative;
+    &.promo {
+        float: left;
+    }
+    >.component-content {
+        @include respond-to(all-mobile) {
+            margin: 0 10px 30px 10px;
+        }
+        padding: 15px;
+        margin: 0 0 30px 0;
+        &:before, &:after {
+            opacity: 0.7;
+            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
+            position: absolute;
+            z-index: -1;
+            height: 20%;
+            max-height: 100px;
+            max-width: 460px;
+            width: 47%;
+            content: "";
+            bottom: 10px;
+        }
+        &:before {
+            left: 2%;
+            transform: rotate(-3deg);
+        }
+        &:after {
+            right: 2%;
+            transform: rotate(3deg);
+        }
+    }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/promo/index.scss

@@ -1,3 +1,3 @@
-@import "absolute-bottom-link";
-@import "promo-hero";
-@import "promo-shadow";
+@import "absolute-bottom-link";
+@import "promo-hero";
+@import "promo-shadow";

package/dist/templates/nextjs-sxa/src/assets/sass/components/rich-text/_rich-text-lists.scss

@@ -1,63 +1,63 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-
-.rich-text-lists,
-.field-featurelist {
-  ul {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    li {
-      @include font-size(1.3);
-      position: relative;
-      line-height: 21px;
-      list-style: none;
-      margin: 0;
-      padding: 5px 0 5px 25px;
-      &:before {
-        display: inline-block;
-        vertical-align: middle;
-        @include font-size(1.2);
-        font-family: 'FontAwesome', sans-serif;
-        position: absolute;
-        top: 3px;
-        left: 0;
-        color: $text-basic;
-        text-align: center;
-        content: '\f00c';
-        width: 20px;
-        margin: 0 5px 0 0;
-        padding: 0;
-      }
-    }
-  }
-}
-.field-featurelist {
-  ul {
-    li {
-      &:before {
-        display: inline-block;
-        vertical-align: middle;
-        @include font-size(1.2);
-        font-family: 'FontAwesome', sans-serif;
-        position: absolute;
-        top: 3px;
-        left: 0;
-        color: $text-basic;
-        text-align: center;
-        content: '\f046';
-        width: 20px;
-        margin: 0 5px 0 0;
-        padding: 0;
-      }
-    }
-  }
-}
-.media-link {
-  &.file-type-icon-media-link {
-    float: left;
-    .field-filetypeicon {
-      text-align: center;
-    }
-  }
-}
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+
+.rich-text-lists,
+.field-featurelist {
+  ul {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    li {
+      @include font-size(1.3);
+      position: relative;
+      line-height: 21px;
+      list-style: none;
+      margin: 0;
+      padding: 5px 0 5px 25px;
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f00c';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.field-featurelist {
+  ul {
+    li {
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f046';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.media-link {
+  &.file-type-icon-media-link {
+    float: left;
+    .field-filetypeicon {
+      text-align: center;
+    }
+  }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/rich-text/index.scss

@@ -1 +1 @@
-@import "rich-text-lists";
+@import "rich-text-lists";

package/dist/templates/nextjs-sxa/src/assets/sass/components/spacing/_background-colors.scss

@@ -1,14 +1,14 @@
-@import '@sass/abstracts/vars';
-
-.container-gray-background {
-  background: $bg-light-gray;
-}
-.container-clean-background {
-  background: $bg-basic-color;
-}
-.container-dark-background {
-  background: $bg-black-active;
-}
-.container-color-background {
-  background: $bg-blue;
-}
+@import '@sass/abstracts/vars';
+
+.container-gray-background {
+  background: $bg-light-gray;
+}
+.container-clean-background {
+  background: $bg-basic-color;
+}
+.container-dark-background {
+  background: $bg-black-active;
+}
+.container-color-background {
+  background: $bg-blue;
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/spacing/_indent.scss

@@ -1,13 +1,13 @@
-@import '@sass/abstracts/vars';
-.indent {
-  margin: 0 $extralarge-margin;
-  &.col-xxl-12, &.col-xl-12, &.col-lg-12, &.col-md-12, &.col-12 {
-    width: calc(100% - ($extralarge-margin * 2));
-  }
-}
-.indent-top {
-  margin-top: $middle-margin;
-}
-.indent-bottom {
-  margin-bottom: $middle-margin;
-}
+@import '@sass/abstracts/vars';
+.indent {
+  margin: 0 $extralarge-margin;
+  &.col-xxl-12, &.col-xl-12, &.col-lg-12, &.col-md-12, &.col-12 {
+    width: calc(100% - ($extralarge-margin * 2));
+  }
+}
+.indent-top {
+  margin-top: $middle-margin;
+}
+.indent-bottom {
+  margin-bottom: $middle-margin;
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/spacing/index.scss

@@ -1,2 +1,2 @@
-@import "background-colors";
-@import "indent";
+@import "background-colors";
+@import "indent";

package/dist/templates/nextjs-sxa/src/assets/sass/components/title/_component-title.scss

@@ -1,30 +1,30 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-
-.title {
-  background: $title-bg;
-
-  h1,
-  .field-title {
-    @include border-basic(bottom, $border-basic-color);
-    font-size: $font-extrabig;
-    margin-bottom: $small-margin;
-    color: $title-color;
-    line-height: normal;
-    padding-bottom: 10px;
-    display: block;
-    text-decoration: none;
-    cursor: pointer;
-
-    &:hover {
-      color: $title-color-active;
-    }
-
-    > a,
-    > span {
-      text-decoration: none;
-    }
-  }
-
-  @import '@sass/variants/title';
-}
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+
+.title {
+  background: $title-bg;
+
+  h1,
+  .field-title {
+    @include border-basic(bottom, $border-basic-color);
+    font-size: $font-extrabig;
+    margin-bottom: $small-margin;
+    color: $title-color;
+    line-height: normal;
+    padding-bottom: 10px;
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $title-color-active;
+    }
+
+    > a,
+    > span {
+      text-decoration: none;
+    }
+  }
+
+  @import '@sass/variants/title';
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/title/index.scss

@@ -1 +1 @@
-@import "component-title";
+@import "component-title";

package/dist/templates/nextjs-sxa/src/assets/sass/main.scss

@@ -1,4 +1,4 @@
-@import "base";
-@import "components";
-@import "variants";
-@import "app";
+@import "base";
+@import "components";
+@import "variants";
+@import "app";

package/dist/templates/nextjs-sxa/src/assets/sass/variants/index.scss

@@ -1,6 +1,6 @@
-@import "link-list";
-@import "navigation";
-@import "page-content";
-@import "promo";
-@import "rich-text";
+@import "link-list";
+@import "navigation";
+@import "page-content";
+@import "promo";
+@import "rich-text";
 @import "title";

package/dist/templates/nextjs-sxa/src/components/Container.tsx

@@ -1,14 +1,9 @@
-import React from 'react';
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
-  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-
-const BACKGROUND_REG_EXP = new RegExp(
-  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
-);
+import React from 'react';
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
@@ -16,22 +11,19 @@ interface ComponentProps {
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext();
   const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
   const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
   const phKey = `container-${props.params.DynamicPlaceholderId}`;
   const id = props.params.RenderingIdentifier;
+  const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
   let backgroundImage = props.params.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
-  if (backgroundImage) {
-    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
-    backgroundImage = `${backgroundImage
-      ?.match(BACKGROUND_REG_EXP)
-      ?.pop()
-      ?.replace(/-/gi, '')}`;
+  if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {
+    const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || '';
+
     backgroundStyle = {
-      backgroundImage: `url('${prefix}${backgroundImage}')`,
+      backgroundImage: `url('${mediaUrl}')`,
     };
   }
 

package/dist/templates/nextjs-xmcloud/.env

@@ -1,19 +1,19 @@
-
-# ========== Sitecore Edge Platform ===========
-
-# Your unified Sitecore Edge Context Id.
-# This will be used over any Sitecore Preview / Delivery Edge variables (above).
-SITECORE_EDGE_CONTEXT_ID=
-
-# ==============================================
-
-# An optional Sitecore Personalize scope identifier.
-# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
-# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
-NEXT_PUBLIC_PERSONALIZE_SCOPE=
-
-# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
-
-# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
+
+# ========== Sitecore Edge Platform ===========
+
+# Your unified Sitecore Edge Context Id.
+# This will be used over any Sitecore Preview / Delivery Edge variables (above).
+SITECORE_EDGE_CONTEXT_ID=
+
+# ==============================================
+
+# An optional Sitecore Personalize scope identifier.
+# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
+# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
+NEXT_PUBLIC_PERSONALIZE_SCOPE=
+
+# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
+
+# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=