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

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

@@ -1,14 +1,14 @@
-@import '@sass/abstracts/vars';
-
-.row.column-splitter {
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: $default-padding * 0.5;
-    padding-right: $default-padding * 0.5;
-    max-width: none;
-
-    > div {
-       padding-left: $default-padding;
-       padding-right: $default-padding;
-    }
-}
+@import '@sass/abstracts/vars';
+
+.row.column-splitter {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: $default-padding * 0.5;
+    padding-right: $default-padding * 0.5;
+    max-width: none;
+
+    > div {
+       padding-left: $default-padding;
+       padding-right: $default-padding;
+    }
+}

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 {
-        padding: 15px;
-        margin: 0 0 30px 0;
-        @include respond-to(all-mobile) {
-            margin: 0 10px 30px 10px;
-        }
-        &: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 {
+        padding: 15px;
+        margin: 0 0 30px 0;
+        @include respond-to(all-mobile) {
+            margin: 0 10px 30px 10px;
+        }
+        &: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/react/data/component-content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml

@@ -1,9 +1,9 @@
-# We can reuse this content definition in multiple places because it:
-# - has an ID
-# - is under component-content (normally) or content
-# Reuse is accomplished by referencing the content by ID in a route definition.
-id: lorem-ipsum-content-block
-componentName: ContentBlock
-displayName: Lorem Ipsum Dolor Sit Amet
-fields:
-  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>
+# We can reuse this content definition in multiple places because it:
+# - has an ID
+# - is under component-content (normally) or content
+# Reuse is accomplished by referencing the content by ID in a route definition.
+id: lorem-ipsum-content-block
+componentName: ContentBlock
+displayName: Lorem Ipsum Dolor Sit Amet
+fields:
+  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>

package/dist/templates/react/data/content/Styleguide/ContentListField/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-content-list-field-shared-1
-displayName: Styleguide Content List Item 1 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
-fields:
-  textField: ContentList Demo (Shared) Item 1 Text Field
+id: styleguide-content-list-field-shared-1
+displayName: Styleguide Content List Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 1 Text Field

package/dist/templates/react/data/content/Styleguide/ContentListField/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-content-list-field-shared-2
-displayName: Styleguide Content List Item 2 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
-fields:
-  textField: ContentList Demo (Shared) Item 2 Text Field
+id: styleguide-content-list-field-shared-2
+displayName: Styleguide Content List Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 2 Text Field

package/dist/templates/react/data/content/Styleguide/EditFrameDemo/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-edit-frame-list-item-1
-displayName: EditFrame Demo List Item 1
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
-fields:
-  title: Edit Frame Demo List Item 1
+id: styleguide-edit-frame-list-item-1
+displayName: EditFrame Demo List Item 1
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
+fields:
+  title: Edit Frame Demo List Item 1

package/dist/templates/react/data/content/Styleguide/EditFrameDemo/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-edit-frame-list-item-2
-displayName: EditFrame Demo List Item 2
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
-fields:
-  title: Edit Frame Demo List Item 2
+id: styleguide-edit-frame-list-item-2
+displayName: EditFrame Demo List Item 2
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
+fields:
+  title: Edit Frame Demo List Item 2

package/dist/templates/react/data/content/Styleguide/ItemLinkField/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-item-link-field-shared-1
-displayName: Styleguide Item Link Item 1 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
-fields:
-  textField: ItemLink Demo (Shared) Item 1 Text Field
+id: styleguide-item-link-field-shared-1
+displayName: Styleguide Item Link Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+fields:
+  textField: ItemLink Demo (Shared) Item 1 Text Field

package/dist/templates/react/data/content/Styleguide/ItemLinkField/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-item-link-field-shared-2
-displayName: Styleguide Item Link Item 2 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
-fields:
-  textField: ItemLink Demo (Shared) Item 2 Text Field
+id: styleguide-item-link-field-shared-2
+displayName: Styleguide Item Link Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+fields:
+  textField: ItemLink Demo (Shared) Item 2 Text Field

package/dist/templates/react/data/dictionary/en.yml

@@ -1,4 +1,4 @@
-styleguide-sample: This is a dictionary entry in English as a demonstration
-Documentation: Documentation
-Styleguide: Styleguide
-GraphQL: GraphQL
+styleguide-sample: This is a dictionary entry in English as a demonstration
+Documentation: Documentation
+Styleguide: Styleguide
+GraphQL: GraphQL

package/dist/templates/react/data/dictionary/{{language}}.yml

@@ -1,4 +1,4 @@
-styleguide-sample: '[<%- language %>] This is a dictionary entry in English as a demonstration'
-Documentation: '[<%- language %>] Documentation'
-Styleguide: '[<%- language %>] Styleguide'
-GraphQL: '[<%- language %>] GraphQL'
+styleguide-sample: '[<%- language %>] This is a dictionary entry in English as a demonstration'
+Documentation: '[<%- language %>] Documentation'
+Styleguide: '[<%- language %>] Styleguide'
+GraphQL: '[<%- language %>] GraphQL'

package/dist/templates/react/data/routes/en.yml

@@ -1,61 +1,61 @@
-# This is a route layout definition.
-# The route definition defines which Sitecore components are present on a route,
-# what their content data is, and which _placeholder_ they are placed in.
-
-# This particular route definition is for the home route - '/', so it defines the
-# components shown on the initial page of the app.
-
-# You may use equivalent JSON files instead of YAML if you prefer;
-# however YAML is simpler to read and allows comments like this one :)
-
-# Setting an ID is optional, but it will allow referring to this item in internal links
-# the ID can be a app-wide-unique string, or a GUID value.
-id: home-page
-
-# Route-level fields are appropriate for page level data like <title> contents
-# Define route level fields in /sitecore/definitions/routes.sitecore
-fields:
-  pageTitle: Welcome to Sitecore JSS
-# Define the page layout starting at the root placeholder - in this case, '<%- helper.getAppPrefix(appPrefix, appName) %>main'
-# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-    - componentName: ContentBlock
-      fields:
-        heading: Welcome to Sitecore JSS
-        # to author content in YAML, use _multi-line values_ (prefixed with | + endline)
-        # as long as the same indent is preserved at the beginning of each line, no escaping
-        # is required at all in the value, making it easy to read
-        content: |
-          <p>Thanks for using JSS!! Here are some resources to get you started:</p>
-
-          <h3><a href="https://jss.sitecore.com" rel="noopener noreferrer">Documentation</a></h3>
-          <p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>
-
-          <h3><a href="/styleguide">Styleguide</a></h3>
-          <p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.
-          It demonstrates most of the common patterns that JSS implementations may need to use,
-          as well as useful architectural patterns.</p>
-
-          <h3><a href="/graphql">GraphQL</a></h3>
-          <p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.
-          This route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>
-
-          <div class="alert alert-dark">
-            <h4>This app is a boilerplate</h4>
-            <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>
-            <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>
-          </div>
-
-          <div class="alert alert-dark">
-            <h4>How to start with an empty app</h4>
-            <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
-            <ol>
-              <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>
-              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
-              <li>Delete <code>/data/component-content/Styleguide</code></li>
-              <li>Delete <code>/data/content/Styleguide</code></li>
-              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
-              <li>Delete <code>/data/dictionary/*.yml</code></li>
-            </ol>
-          </div>
+# This is a route layout definition.
+# The route definition defines which Sitecore components are present on a route,
+# what their content data is, and which _placeholder_ they are placed in.
+
+# This particular route definition is for the home route - '/', so it defines the
+# components shown on the initial page of the app.
+
+# You may use equivalent JSON files instead of YAML if you prefer;
+# however YAML is simpler to read and allows comments like this one :)
+
+# Setting an ID is optional, but it will allow referring to this item in internal links
+# the ID can be a app-wide-unique string, or a GUID value.
+id: home-page
+
+# Route-level fields are appropriate for page level data like <title> contents
+# Define route level fields in /sitecore/definitions/routes.sitecore
+fields:
+  pageTitle: Welcome to Sitecore JSS
+# Define the page layout starting at the root placeholder - in this case, '<%- helper.getAppPrefix(appPrefix, appName) %>main'
+# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: Welcome to Sitecore JSS
+        # to author content in YAML, use _multi-line values_ (prefixed with | + endline)
+        # as long as the same indent is preserved at the beginning of each line, no escaping
+        # is required at all in the value, making it easy to read
+        content: |
+          <p>Thanks for using JSS!! Here are some resources to get you started:</p>
+
+          <h3><a href="https://jss.sitecore.com" rel="noopener noreferrer">Documentation</a></h3>
+          <p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>
+
+          <h3><a href="/styleguide">Styleguide</a></h3>
+          <p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.
+          It demonstrates most of the common patterns that JSS implementations may need to use,
+          as well as useful architectural patterns.</p>
+
+          <h3><a href="/graphql">GraphQL</a></h3>
+          <p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.
+          This route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>
+
+          <div class="alert alert-dark">
+            <h4>This app is a boilerplate</h4>
+            <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>
+            <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>
+          </div>
+
+          <div class="alert alert-dark">
+            <h4>How to start with an empty app</h4>
+            <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
+            <ol>
+              <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>
+              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
+              <li>Delete <code>/data/component-content/Styleguide</code></li>
+              <li>Delete <code>/data/content/Styleguide</code></li>
+              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
+              <li>Delete <code>/data/dictionary/*.yml</code></li>
+            </ol>
+          </div>

package/dist/templates/react/data/routes/graphql/en.yml

@@ -1,27 +1,27 @@
-fields:
-  pageTitle: GraphQL | Sitecore JSS
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: ContentBlock
-    fields:
-      heading: Using GraphQL with JSS
-      content: |
-        <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
-        For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
-  - componentName: GraphQL-Layout
-    placeholders:
-      <%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout:
-      - componentName: GraphQL-IntegratedDemo
-        fields:
-          sample1: Hello integrated GraphQL world!
-          sample2:
-            href: https://www.sitecore.com
-            target: _blank
-            text: GraphQL lets you get structured field data too
-      - componentName: GraphQL-ConnectedDemo
-        fields:
-          sample1: Hello connected GraphQL world!
-          sample2:
-            href: https://www.sitecore.com
-            target: _blank
-            text: GraphQL lets you get structured field data too
+fields:
+  pageTitle: GraphQL | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: ContentBlock
+    fields:
+      heading: Using GraphQL with JSS
+      content: |
+        <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
+        For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
+  - componentName: GraphQL-Layout
+    placeholders:
+      <%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout:
+      - componentName: GraphQL-IntegratedDemo
+        fields:
+          sample1: Hello integrated GraphQL world!
+          sample2:
+            href: https://www.sitecore.com
+            target: _blank
+            text: GraphQL lets you get structured field data too
+      - componentName: GraphQL-ConnectedDemo
+        fields:
+          sample1: Hello connected GraphQL world!
+          sample2:
+            href: https://www.sitecore.com
+            target: _blank
+            text: GraphQL lets you get structured field data too

package/dist/templates/react/data/routes/graphql/sample-1/en.yml

@@ -1,9 +1,9 @@
-fields:
-  pageTitle: Sample 1 Page Title
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: ContentBlock
-    fields:
-      heading: GraphQL Sample 1
-      content: |
-        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>
+fields:
+  pageTitle: Sample 1 Page Title
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: ContentBlock
+    fields:
+      heading: GraphQL Sample 1
+      content: |
+        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>

package/dist/templates/react/data/routes/graphql/sample-2/en.yml

@@ -1,9 +1,9 @@
-fields:
-  pageTitle: Sample 2 Page Title
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: ContentBlock
-    fields:
-      heading: GraphQL Sample 2
-      content: |
-        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>
+fields:
+  pageTitle: Sample 2 Page Title
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: ContentBlock
+    fields:
+      heading: GraphQL Sample 2
+      content: |
+        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>

package/dist/templates/react/data/routes/styleguide/custom-route-type/en.yml

@@ -1,12 +1,12 @@
-# Using a Custom Route Type enables adding more field data to the route level.
-template: <%- helper.getAppPrefix(appPrefix, appName) %>ExampleCustomRouteType
-fields:
-  # Note that custom route types inherit from the default route type automatically.
-  # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
-  pageTitle: Custom Route Type | Sitecore JSS
-  headline: A Treatise on Route-Level Fields in JSS
-  author: Myrtle
-  content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: Styleguide-CustomRouteType
+# Using a Custom Route Type enables adding more field data to the route level.
+template: <%- helper.getAppPrefix(appPrefix, appName) %>ExampleCustomRouteType
+fields:
+  # Note that custom route types inherit from the default route type automatically.
+  # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
+  pageTitle: Custom Route Type | Sitecore JSS
+  headline: A Treatise on Route-Level Fields in JSS
+  author: Myrtle
+  content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: Styleguide-CustomRouteType