refactor: cherry picking template updates from #1090 and #1088

docs-site/src/pages/pattern-lab/_patterns/02-components/band/-deprecated-band.twig

@@ -0,0 +1,201 @@
+<mark style="display: block;" class="u-bolt-margin-bottom-large">
+  <div class="u-bolt-padding-small">
+    <p>These is how the old band's data was structured, these examples should not be used going forward, there are equivalent demo pages for each of these scenarios with the current band. You can look at all the @pl twigs being used here to see how those old twigs were structured.</p>
+  </div>
+</mark>
+
+<h3>Deprecated Collection Band</h3>
+<div class="u-bolt-margin-bottom-large">
+  {% include "@pl/_band--collection.twig" with {
+    contentItems: [
+      {
+        pattern: "card",
+        contentItems: [
+          {
+            pattern: "image",
+            lazyload: false,
+            src: "/images/placeholders/1200x660.jpg"
+          },
+          {
+            pattern: "headline",
+            text: "2017 Forrester Wave Report",
+            size: "large",
+            tag: "h3"
+          },
+          {
+            pattern: "text",
+            text: "Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.",
+            tag: "p"
+          },
+          {
+            pattern: "button",
+            text: "Get the report",
+            tag: "a",
+            style: "secondary",
+            width: "full"
+          }
+        ]
+      },
+      {
+        pattern: "card-w-teaser",
+        image: {
+          src: "/images/placeholders/1200x660.jpg",
+          lazyload: false,
+        },
+        teaser: {
+          headlines: [
+            {
+              type: "headline",
+              text: "Pega 7 for Operations",
+              size: "large"
+            },
+            {
+              type: "text",
+              text: "Simplify and automate to reduce costs and improve agility.",
+              size: "medium",
+              tag: "p"
+            }
+          ],
+          buttons: [
+            {
+              text: "Learn More About Pega 7",
+              style: "secondary",
+              url: "#!"
+            }
+          ]
+        }
+      },
+      {
+        pattern: "teaser",
+        logo: {
+          src: "/images/content/logos/logo-paypal.svg",
+          lazyload: false,
+        },
+        eyebrow: {
+          text: "Who is Pega?"
+        },
+        headlines: [
+          {
+            text: "Pega is #1 in software for customer engagement and operational excellence.",
+            size: "xlarge",
+            tag: "h3"
+          }
+        ],
+        buttons: [
+          {
+            text: "Example button #1",
+            style: "primary"
+          }
+        ]
+      }
+    ]
+  } only %}
+</div>
+
+<h3>Deprecated Feature Band</h3>
+<div class="u-bolt-margin-bottom-large">
+  {% include "@pl/_band--feature.twig" with {
+    primaryTeaser: {
+      headlines: [
+        {
+          type: "headline",
+          text: "Example Headline",
+          size: "xxlarge"
+        },
+        {
+          type: "subheadline",
+          text: "Example Subheadline"
+        }
+      ]
+    }
+  } only %}
+</div>
+
+<h3>Deprecated Flag Band</h3>
+<div class="u-bolt-margin-bottom-large">
+  {% include "@pl/_band--flag.twig" with {
+    eyebrow: {
+      text: "Who is Pega?"
+    },
+    headline: {
+      text: "Pega is #1 in software for customer engagement and operational excellence."
+    },
+    buttons: [
+      {
+        text: "Learn More",
+        style: "primary"
+      },
+      {
+        text: "About Pega",
+        style: "secondary"
+      }
+    ]
+  } only %}
+</div>
+
+<h3>Deprecated Band Items</h3>
+{% set band_content %}
+  {% include "@bolt-components-headline/eyebrow.twig" with {
+    text: "This Is an Eyebrow",
+  } only %}
+  {% include "@bolt-components-headline/headline.twig" with {
+    size: "xxxlarge",
+    text: "This Is a Headline",
+  } only %}
+  {% include "@bolt-components-headline/subheadline.twig" with {
+    size: "xxlarge",
+    text: "This Is a Subheadline",
+  } only %}
+  {% include "@bolt-components-headline/text.twig" with {
+    text: "This is a paragraph.",
+  } only %}
+  {% include "@bolt-components-logo/logo.twig" with {
+    src: "/images/content/logos/logo-paypal.svg",
+    lazyload: false,
+  } only %}
+  {% include "@bolt-components-button/button.twig" with {
+    text: "This is a button",
+  } only %}
+{% endset %}
+{% set pinned_share %}
+  {% include "@bolt-components-share/share.twig" with {
+    opacity: 60,
+    sources: [
+      {
+        name: "facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse"
+      },
+      {
+        name: "twitter",
+        url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
+      },
+      {
+        name: "linkedin",
+        url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
+      },
+      {
+        name: "email",
+        url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
+      }
+    ],
+    copy_to_clipboard: {
+      text_to_copy: "https://boltdesignsystem.com"
+    }
+  } only %}
+{% endset %}
+
+{% include "@bolt-components-band/band.twig" with {
+  content: band_content,
+  items: [
+    {
+      position: {
+        align: "end",
+        valign: "center",
+        row_start: 1,
+        column_start: 1,
+        column_end: 12,
+      },
+      content: pinned_share,
+    },
+  ]
+} only %}

docs-site/src/pages/pattern-lab/_patterns/02-components/band/10-band-feature-variation.twig

@@ -1,4 +1,4 @@
-{% include "@bolt-components-band/band--feature.twig" with {
+{% include "@pl/_band--feature.twig" with {
   primaryTeaser: {
     headlines: [
       {

docs-site/src/pages/pattern-lab/_patterns/02-components/band/10-band-size-variation.twig

@@ -0,0 +1,10 @@
+{% set schema = bolt.data.components["@bolt-components-band"].schema %}
+
+{% for size in schema.properties.size.enum %}
+  <div class="u-bolt-margin-bottom-xsmall">
+    {% include "@bolt-components-band/band.twig" with {
+      size: size,
+      content: "This is a band with size set to " ~ size ~ ".",
+    } only %}
+  </div>
+{% endfor %}

docs-site/src/pages/pattern-lab/_patterns/02-components/band/15-band-theme-variation.twig

@@ -0,0 +1,8 @@
+{% set schema = bolt.data.components["@bolt-components-band"].schema %}
+
+{% for theme in schema.properties.theme.enum %}
+  {% include "@bolt-components-band/band.twig" with {
+    theme: theme,
+    content: "This is a band with theme set to " ~ theme ~ ".",
+  } only %}
+{% endfor %}