create-sitecore-jss 22.6.0-canary.2 → 22.6.0-canary.21

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 '~font-awesome/scss/mixins';
-@import '~font-awesome/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 '~font-awesome/scss/mixins';
+@import '~font-awesome/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/ColumnSplitter.tsx

@@ -11,7 +11,7 @@ interface ComponentProps {
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd();
+  const styles = `${props?.params?.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd();
   const columnWidths = [
     props.params.ColumnWidth1,
     props.params.ColumnWidth2,

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

@@ -11,12 +11,12 @@ interface ComponentProps {
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  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 containerStyles = 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 backgroundImage = props?.params?.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
   if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {

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

@@ -22,7 +22,7 @@ type ImageProps = {
 };
 
 const ImageDefault = (props: ImageProps): JSX.Element => (
-  <div className={`component image ${props.params.styles}`.trimEnd()}>
+  <div className={`component image ${props?.params?.styles}`.trimEnd()}>
     <div className="component-content">
       <span className="is-empty-hint">Image</span>
     </div>
@@ -49,16 +49,16 @@ export const Banner = (props: ImageProps): JSX.Element => {
           .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
       }
     : {
-      ...props.fields.Image,
-      value: {
-        ...props.fields.Image.value,
-        style: { width: '100%', height: '100%' },
-      },
-    };
+        ...props.fields.Image,
+        value: {
+          ...props.fields.Image.value,
+          style: { width: '100%', height: '100%' },
+        },
+      };
 
   return (
     <div
-      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
+      className={`component hero-banner ${props?.params?.styles} ${classHeroBannerEmpty}`}
       id={id ? id : undefined}
     >
       <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
@@ -76,7 +76,7 @@ export const Default = (props: ImageProps): JSX.Element => {
     const id = props.params.RenderingIdentifier;
 
     return (
-      <div className={`component image ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component image ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           {sitecoreContext.pageState === 'edit' || !props.fields.TargetUrl?.value?.href ? (
             <Image />

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

@@ -52,7 +52,7 @@ const LinkListItem = (props: LinkListItemProps) => {
 
 export const Default = (props: LinkListProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource;
-  const styles = `component link-list ${props.params.styles}`.trimEnd();
+  const styles = `component link-list ${props?.params?.styles}`.trimEnd();
   const id = props.params.RenderingIdentifier;
 
   if (datasource) {