Band Component Refactor (API + Demo Updates)

docs-site/src/pages/pattern-lab/_patterns/02-components/00-overview.twig

@@ -1,7 +1,7 @@
 {% embed "@bolt-components-band/band.twig" with {
   size: "none",
   theme: "light",
-  fullBleed: true,
+  full_bleed: true,
   attributes: {
     class: [
       "u-bolt-min-height-screen",

docs-site/src/pages/pattern-lab/_patterns/02-components/20-background/_00-background-band-demo.twig

@@ -2,9 +2,8 @@
 {% embed "@bolt-components-band/band.twig" with {
   size: size | default("large"),
   theme: theme | default("dark"),
-  fullBleed: true,
+  full_bleed: true,
   tag: "figure",
-  contentTag: "figcaption"
 } %}
   {% block band_background %}
     {% if background %}
@@ -62,4 +61,4 @@
     {% endgrid %}
 
   {% endblock band_content %}
-{% endembed %}
+{% endembed %}

docs-site/src/pages/pattern-lab/_patterns/02-components/30-band/10-band-size-variations.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/30-band/15-band-theme-variations.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 %}

docs-site/src/pages/pattern-lab/_patterns/02-components/30-band/20-band-with-pinned-content.twig

@@ -0,0 +1,176 @@
+{% set content %}
+  {% 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-button/button.twig" with {
+    text: "This is a button",
+  } only %}
+{% endset %}
+
+{% set pinned_breadcrumb %}
+  {% include "@bolt-components-breadcrumb/breadcrumb.twig" with {
+    contentItems: [
+      include("@bolt-components-link/link.twig", {
+        "text": "Home",
+        "url": "#!"
+      }),
+      include("@bolt-components-link/link.twig", {
+        "text": "Landing Page",
+        "url": "#!"
+      }),
+      include("@bolt-components-link/link.twig", {
+        "text": "Sub Page",
+        "url": "#!"
+      }),
+      "Current Page"
+    ]
+  } only %}
+{% endset %}
+
+{% set pinned_share %}
+  {% include "@bolt-components-share/share.twig" with {
+    size: "small",
+    opacity: 60,
+    sources: [
+      {
+        name: "facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&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 %}
+
+<div class="u-bolt-margin-bottom-large">
+  <h3>Each pinned area (upper and lower) can have 1 or more items, spacing will be evenly distributed</h3>
+  <div class="u-bolt-margin-bottom-small">
+    {% include "@bolt-components-band/band.twig" with {
+      size: "large",
+      content: content,
+      pinned_content: {
+        upper: [
+          {
+            content: "upper pinned 1",
+          },
+          {
+            content: "upper pinned 2",
+          },
+          {
+            content: "upper pinned 3",
+          },
+        ],
+        lower: [
+          {
+            content: "lower pinned 1",
+          },
+          {
+            content: "lower pinned 2",
+          },
+          {
+            content: "lower pinned 3",
+          },
+        ]
+      }
+    } only %}
+  </div>
+  {% include "@bolt-components-band/band.twig" with {
+    size: "large",
+    content: content,
+    pinned_content: {
+      upper: [
+        {
+          content: pinned_breadcrumb,
+        },
+        {
+          content: pinned_share,
+        },
+      ],
+    }
+  } only %}
+</div>
+
+<div class="u-bolt-margin-bottom-large">
+  <h3>When there is only 1 item, you can set the align prop to your liking (start, center, end)</h3>
+  {% include "@bolt-components-band/band.twig" with {
+    size: "large",
+    content: content,
+    pinned_content: {
+      upper: [
+        {
+          content: pinned_share,
+          align: "end",
+        },
+      ],
+    }
+  } only %}
+</div>
+
+
+
+{# Deprecated items #}
+{% set items_demo %}
+{% verbatim %}{% include "@bolt-components-band/band.twig" with {
+  content: content,
+  items: [
+    {
+      position: {
+        align: "end",
+        valign: "center",
+        row_start: 1,
+        column_start: 1,
+        column_end: 12,
+      },
+      content: pinned_share,
+    },
+  ]
+} only %}{% endverbatim %}
+{% endset %}
+
+{% set pinned_content_demo %}
+{% verbatim %}{% include "@bolt-components-band/band.twig" with {
+  content: content,
+  pinned_content: {
+    upper: [
+      {
+        content: pinned_share,
+        align: "end",
+      },
+    ],
+  }
+} only %}{% endverbatim %}
+{% endset %}
+
+<p><mark>Note: please convert the deprecated items prop to the new pinned_content prop.</mark></p>
+
+<h3>Deprecated items prop usage</h3>
+{% include "@bolt-components-code-snippet/code-snippet.twig" with {
+  display: "block",
+  lang: "twig",
+  content: items_demo
+} only %}
+
+<h3>New pinned_content prop usage</h3>
+{% include "@bolt-components-code-snippet/code-snippet.twig" with {
+  display: "block",
+  lang: "twig",
+  content: pinned_content_demo
+} only %}