docs: update demo template

BREAKING CHANGE: This is NOT the breaking commit, but the npm namespace has been updated and requires a MAJOR release. Changes to be committed: modified: demo/index.md modified: docs/partials/index.md
AlaskaAirlines · Jan 24, 2024 · 1c550c7 · 1c550c7
1 parent 61d7d98
commit 1c550c7
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 106 deletions.
diff --git a/demo/index.md b/demo/index.md
@@ -37,7 +37,7 @@ Use the `<auro-banner>` element to:
 
 The default `<auro-banner>` element features configuration options when using using the `displayImage`, `contentImage`, `prefix`, `title`, `description`, `action` and `disclaimer` slots for structured content placement.
 
-The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`,`iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute the most common use case.  
+The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`,`iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute the most common use case.
 
 **Note**: See the [auro-banner API page](https://auro.alaskaair.com/components/auro/banner/api) for more information on how to use this component's slots and attributes.
 
@@ -104,82 +104,4 @@ The `<auro-banner>` component must be used in conjunction with one of the follow
 </auro-banner>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Recommended Use and Version Control
-
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-banner` custom element is defined automatically.
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
-
-```js
-import './node_modules/@aurodesignsystem/auro-banner';
-registerComponent('custom-banner');
-```
-
-This will create a new custom element that you can use in your HTML that will function identically to the `auro-banner` element.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
-  <custom-banner billboard>
-    <picture slot="displayImage">
-      <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
-      <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
-      <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
-      <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
-      <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
-      <img src="https://picsum.photos/id/430/225/550" alt="" />
-    </picture>
-    <img
-      slot="contentImage"
-      src="https://sitecore-test-single-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png"
-      alt="Random insert"/>
-    <p slot="description">
-      We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
-    </p>
-    <auro-hyperlink
-      cta
-      secondary
-      href="/"
-      slot="action"
-      target="_blank">
-      More info
-    </auro-hyperlink>
-  </custom-banner>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
-
-```html
-<custom-banner billboard>
-  <picture slot="displayImage">
-    <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
-    <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
-    <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
-    <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
-    <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
-    <img src="https://picsum.photos/id/430/225/550" alt="" />
-  </picture>
-  <img
-    slot="contentImage"
-    src="https://sitecore-test-single-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png"
-    alt="Random insert"/>
-  <p slot="description">
-    We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
-  </p>
-  <auro-hyperlink
-    cta
-    secondary
-    href="/"
-    slot="action"
-    target="_blank">
-    More info
-  </auro-hyperlink>
-</custom-banner>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/docs/partials/index.md b/docs/partials/index.md
@@ -25,7 +25,7 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 
 The default `<auro-banner>` element features configuration options when using using the `displayImage`, `contentImage`, `prefix`, `title`, `description`, `action` and `disclaimer` slots for structured content placement.
 
-The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`,`iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute the most common use case.  
+The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`,`iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute the most common use case.
 
 **Note**: See the [auro-banner API page](https://auro.alaskaair.com/components/auro/banner/api) for more information on how to use this component's slots and attributes.
 
@@ -41,29 +41,3 @@ The `<auro-banner>` component must be used in conjunction with one of the follow
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
-
-## Recommended Use and Version Control
-
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-banner` custom element is defined automatically.
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
-
-```js
-import './node_modules/@aurodesignsystem/auro-banner';
-registerComponent('custom-banner');
-```
-
-This will create a new custom element that you can use in your HTML that will function identically to the `auro-banner` element.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>