create-sitecore-jss 22.2.0-canary.5 → 22.2.0-canary.51

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-fat.scss

@@ -0,0 +1,58 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/scss/variables';
+
+.navigation.navigation-fat {
+  background: $bg-basic-color;
+  @include border-basic();
+
+  a {
+    text-decoration: none;
+  }
+
+  nav > ul {
+    list-style: none;
+    padding: 10px 0;
+    overflow: hidden;
+  }
+
+  .rel-level1 {
+    margin: $small-margin;
+    padding: 0;
+    display: inline-block;
+    vertical-align: top;
+
+    &.submenu ul a {
+      position: relative;
+      &:before {
+        @include fa-icon();
+        transform: translateY(-50%);
+        position: absolute;
+        content: $fa-var-chevron-right;
+        top: 50%;
+        left: -9px;
+        font-size: 10px;
+      }
+    }
+    > .navigation-title > a {
+      @include border-basic(top, $border-basic-color, 2px);
+      border-bottom: 0;
+      background: $nav-bg-root;
+      padding: 5px 10px;
+      display: block;
+      width: auto;
+      &:hover {
+        border-color: $menu-hover-color;
+      }
+    }
+    > ul {
+      padding: 0;
+    }
+  }
+  .rel-level2 {
+    padding-left: $small-margin;
+    display: block;
+  }
+}
+

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-main-horizontal-vertical.scss

@@ -0,0 +1,176 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/scss/variables';
+
+$borderSize: 2px;
+
+//Drop Down Navigation Common Part
+.navigation.navigation-main {
+  .component-content > nav {
+    position: relative;
+    ul {
+      @include clearfix();
+    }
+  }
+  .rel-level1 {
+    float: left;
+    &.active {
+      > .navigation-title > a {
+        border-color: $nav-border-root;
+      }
+    }
+    > .navigation-title > a {
+      border-width: 2px 0 0 0;
+      border-color: transparent;
+      &:hover {
+        border-color: $nav-border-root;
+      }
+    }
+    &.submenu {
+      > .navigation-title a {
+        position: relative;
+        padding-right: 15px;
+        &:after {
+          @include fa-icon();
+          font-size: 10px;
+          content: $fa-var-chevron-down;
+          position: absolute;
+          transform: translateY(-50%);
+          top: 50%;
+          right: 0;
+        }
+      }
+    }
+    //submenu
+    > ul {
+      overflow: hidden;
+      display: none;
+      z-index: 10;
+      position: absolute;
+      top: 100%;
+      background: $nav-bg-submenu;
+      margin-left: 0;
+      margin-top: -$borderSize;
+      border-top: $borderSize solid $nav-border-submenu;
+      border-left: 1px solid $nav-submenu-item-border;
+      border-bottom: 1px solid $nav-submenu-item-border;
+    }
+    &:active,
+    &:hover {
+      > a {
+        & + ul {
+          display: block !important;
+        }
+      }
+      > ul {
+        display: block !important;
+        min-width: 60px;
+      }
+    }
+    &.active {
+      > .navigation-title > a:link,
+      > .navigation-title > a:visited {
+        color: $text-basic-active;
+      }
+      > span {
+        display: block;
+        padding: 10px 20px;
+        color: $text-white;
+      }
+    }
+    &.submenu.active {
+      border-color: $menu-active-color;
+    }
+  }
+  .rel-level2 {
+    &:hover,
+    &:focus {
+      transition: background 0.2s ease-in;
+      background: $nav-bg-submenu-active;
+    }
+    div > a {
+      display: block;
+      font-weight: normal;
+      font-size: $navigation-font-basic-submenu;
+      text-align: center;
+      &:hover,
+      &:focus {
+        color: $nav-color-submenu;
+      }
+    }
+    &.submenu {
+      box-sizing: border-box;
+      &.navigation-image {
+        text-align: center;
+        > a,
+        .field-navigationtext {
+          text-align: left;
+        }
+      }
+    }
+  }
+  // Additional styles fot drop down horizontal navigation
+  &.navigation-main-horizontal {
+    .submenu > ul {
+      padding-left: 0;
+    }
+    .rel-level1 {
+      &:active,
+      &:hover {
+        > a {
+          & + ul {
+            display: inline-flex !important;
+            flex-wrap: wrap;
+          }
+        }
+        > ul {
+          display: inline-flex !important;
+          flex-wrap: wrap;
+        }
+      }
+      > ul {
+        width: 100%;
+        clear: both;
+        left: 0;
+      }
+    }
+    .rel-level2 {
+      float: left;
+      padding: 10px;
+      @include border-basic(right, $nav-submenu-item-border, 1px);
+      flex-grow: 1;
+      flex-basis: 23%;
+    }
+  }
+  // Additional styles fot drop down vertical navigation
+  &.navigation-main-vertical {
+    .rel-level1 > ul {
+      padding-left: 0;
+      width: auto;
+      left: auto;
+      @include border-basic(right, $nav-submenu-item-border, 1px);
+      > li {
+        padding: 5px 10px;
+      }
+    }
+    .submenu {
+      ul {
+        li {
+          a:before {
+            @include fa-icon();
+            content: $fa-var-chevron-right;
+            display: block;
+            position: absolute;
+            left: 0;
+            font-size: 10px;
+            top: 18px;
+            transform: translateY(-50%);
+            padding-left: 7px;
+          }
+        }
+      }
+    }
+  }
+}
+

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-mobile.scss

@@ -0,0 +1,85 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/scss/variables';
+
+.navigation.navigation-mobile {
+  nav > ul {
+    border: none;
+    @include border-basic();
+  }
+  .rel-level1 {
+    cursor: pointer;
+    margin: 0;
+    background: $bg-basic-color;
+    > .navigation-title {
+      border-bottom: 1px solid $border-basic-color;
+      margin: 0;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+    .navigation-title {
+      padding: 10px;
+      > a {
+        text-decoration: none;
+        color: $text-basic;
+        display: inline;
+      }
+    }
+  }
+  .rel-level2 {
+    display: list-item;
+    .navigation-title > a {
+      font-weight: 500;
+    }
+  }
+  .submenu {
+    > ul {
+      li {
+        position: relative;
+        a:before {
+          @include fa-icon();
+          content: $fa-var-chevron-right;
+          display: block;
+          position: absolute;
+          left: 0;
+          font-size: 10px;
+          top: 20px;
+          transform: translateY(-50%);
+        }
+      }
+      padding-left: 25px;
+      background: $nav-bg-submenu;
+    }
+    > ul {
+      display: none;
+    }
+    &.active{
+      > .navigation-title:before {
+        transform: rotate(180deg);
+        transition: 0.6s;
+        transform-style: preserve-3d;
+      }
+      > ul {
+        display: block;
+      }
+    }
+    > .navigation-title {
+      position: relative;
+      &:before {
+        @include fa-icon();
+        content: $fa-var-chevron-down;
+        display: block;
+        position: absolute;
+        right: 10px;
+        font-size: 10px;
+        top: 20px;
+        transform: translateY(-50%);
+        transform: rotate(0);
+        transition: 0.6s;
+        transform-style: preserve-3d;
+      }
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-sidebar.scss

@@ -0,0 +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;
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_sitemap-navigation.scss

@@ -0,0 +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;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_absolute-bottom-link.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-hero.scss

@@ -0,0 +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);
+            }
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss

@@ -0,0 +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);
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss

@@ -0,0 +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;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss

@@ -0,0 +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;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss

@@ -0,0 +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;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/title/_component-title.scss

@@ -0,0 +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';
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/title/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/main.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/variants/index.scss

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

package/dist/templates/nextjs/package.json

@@ -28,7 +28,7 @@
     "@sitecore-jss/sitecore-jss-nextjs": "~22.2.0-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
-    "next": "^14.1.0",
+    "next": "^14.2.7",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/dist/templates/nextjs/scripts/config/plugins/fallback.ts

@@ -13,7 +13,6 @@ class FallbackPlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
       publicUrl: config.publicUrl || getPublicUrl(),
     });

package/dist/templates/nextjs/scripts/generate-config.ts

@@ -29,6 +29,11 @@ generateConfig(defaultConfig);
  * @param {JssConfig} defaultConfig Default configuration.
  */
 function generateConfig(defaultConfig: JssConfig): void {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach(prop => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  }, {});
+
   jssConfigFactory
     .create(defaultConfig)
     .then(config => {
@@ -53,7 +58,9 @@ const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]?.trim()}';\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(prop)} || '${value.trim()}';\n`;
   });
 
   configText += `module.exports = config;`;