boltdesignsystem · sghoweri · Sep 27, 2018 · Aug 16, 2018 · Aug 16, 2018 · Aug 22, 2018
diff --git a/README.md b/README.md
@@ -1,22 +1,25 @@
-[![Known Vulnerabilities](https://snyk.io/test/github/pega-digital/bolt/badge.svg)](https://snyk.io/test/github/pega-digital/bolt)
+<h1>
+  <img align="left" width="40" src="https://raw.githubusercontent.com/bolt-design-system/bolt/master/apps/bolt-site/images/bolt-logo.png">
+  Bolt Design System
+</h1>
 
-# Bolt Design System
+**Check out our new [Bolt Docs site!](https://boltdesignsystem.com)**
 
-**Please see the [Bolt Docs here](https://bolt-design-system.com)**
-
-## Quick Start Setup
-
-*If this doesn't work, please check the actual docs linked above*
+## ~60 Second Quick Start Guide
 
 ```bash
-yarn install
+git clone https://github.com/bolt-design-system/bolt.git ~/sites/bolt
+cd ~/sites/bolt
 npm run setup
 cd apps/pattern-lab
 npm start
 ```
 
-### Big Thanks
+> *Don't already have Homebrew, Yarn, Composer and NPM setup on your local machine? Need a little help getting started? Check out our [in-depth getting started guide](https://boltdesignsystem.com/docs/guides/preparing-your-environment.html) to help get you up and running in no time!*
+
+
+### Huge Thanks!
 
-Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs][homepage]
+Cross-browser Testing Platform and Open Source ❤️ Provided by [Sauce Labs][homepage]
 
 [homepage]: https://saucelabs.com
diff --git a/apps/bolt-site/.boltrc.js b/apps/bolt-site/.boltrc.js
@@ -39,6 +39,7 @@ const config = {
       '@bolt/components-placeholder',
       '@bolt/components-action-blocks',
       '@bolt/components-dropdown',
+      '@bolt/components-grid',
       '@bolt/components-background',
       '@bolt/components-background-shapes',
       '@bolt/components-band',

diff --git a/apps/bolt-site/templates/_site-head.twig b/apps/bolt-site/templates/_site-head.twig
@@ -38,8 +38,22 @@
     <meta name="msapplication-config" content="/browserconfig.xml?v=LbyzAXRqNz">
     <meta name="theme-color" content="#1f2656">
 
-    <!-- Default OG Tag examples (related to Bolt Share Component) -->
-    {% include "@bolt-components-share/src/_share-meta-example.twig" %}
+    <!-- OG Tags -->
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="Bolt Design System: Page Title" />
+    <meta property="og:description" content="Sample description" />
+    <meta property="og:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="480" />
+    <meta property="og:image:height" content="480" />
+    <meta property="og:url" content="https://boltdesignsystem.com/some-page-title-here" />
+    <meta property="og:site_name" content="Bolt Design System" />
+    <!-- Twitter specific tags -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Bolt Design System: Page Title" />
+    <meta name="twitter:description" content="Sample description" />
+    <meta name="twitter:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
+    <meta name="twitter:site" content="@pega" />
 
     <link rel="stylesheet" href="{{ assets["bolt-global.css"] | default("/build/bolt-global.css") }}" media="all" />
 
@@ -54,4 +68,4 @@
     </script>
 
   </head>
-  <body class="c-bds-layout c-bolt-site {% if currentUrl == 'index.html' %} t-bolt-xdark {% endif %} c-bds-layout--{{ urlChunks | length >= 2 ? urlChunks|first : 'parent' }} {{ hasSidebar ? 'c-bds-layout--has-sidebar' : ''}}">
+  <body class="c-bds-layout c-bolt-site {% if currentUrl == 'index.html' %} t-bolt-xdark {% endif %} c-bds-layout--{{ urlChunks | length >= 2 ? urlChunks|first : 'parent' }} {{ hasSidebar ? 'c-bds-layout--has-sidebar' : ''}}">
diff --git a/apps/pattern-lab/.boltrc.js b/apps/pattern-lab/.boltrc.js
@@ -117,6 +117,7 @@ const config = {
       '@bolt/components-tooltip',
       '@bolt/components-unordered-list',
       '@bolt/components-video',
+      '@bolt/components-grid',
       /**
        * note: resolving these paths isn't typically required when
        * the .boltrc config is run through the bolt CLI tool (ie.

diff --git a/apps/pattern-lab/package.json b/apps/pattern-lab/package.json
@@ -67,6 +67,7 @@
     "@bolt/components-tooltip": "^2.0.0-beta.3",
     "@bolt/components-unordered-list": "^2.0.0-beta.3",
     "@bolt/components-video": "^2.0.0-beta.3",
+    "@bolt/components-grid": "0.0.0",
     "@bolt/core": "^2.0.0-beta.3",
     "@bolt/global": "^2.0.0-beta.3",
     "@bolt/internal-schema-form": "^2.0.0-beta.3",

diff --git a/apps/pattern-lab/src/_includes/utils/schema-docs.twig b/apps/pattern-lab/src/_includes/utils/schema-docs.twig
@@ -23,7 +23,7 @@
 
       {% if prop.enum %}{{ enum }}{% endif -%}
 
-      {% if prop.type == 'object' and prop.properties or prop.ref %}
+      {% if (prop.type == 'object' or prop.type == 'array') and prop.properties or prop.ref %}
         {% if prop.ref %}
           {% set reference = get_data(prop.ref).properties %}
           <details>
@@ -68,7 +68,7 @@
 {% macro object(properties, isRef) %}
   {% import _self as macros %}
   {% set isRef = isRef|default(false) %}
-  <ul>
+  <ul class="c-bolt-docs-list__child">
     {% for key, prop in properties %}
       <li>
         <code>{{ key }}</code>

diff --git a/apps/pattern-lab/src/_meta/_00-head.twig b/apps/pattern-lab/src/_meta/_00-head.twig
@@ -47,8 +47,22 @@
     <meta name="msapplication-config" content="/browserconfig.xml?v=LbyzAXRqNz">
     <meta name="theme-color" content="#1f2656">
 
-    <!-- Default OG Tag examples (related to Bolt Share Component) -->
-    {% include "@bolt-components-share/src/_share-meta-example.twig" %}
+    <!-- OG Tags -->
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="Bolt Design System: Page Title" />
+    <meta property="og:description" content="Sample description" />
+    <meta property="og:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="480" />
+    <meta property="og:image:height" content="480" />
+    <meta property="og:url" content="https://boltdesignsystem.com/some-page-title-here" />
+    <meta property="og:site_name" content="Bolt Design System" />
+    <!-- Twitter specific tags -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Bolt Design System: Page Title" />
+    <meta name="twitter:description" content="Sample description" />
+    <meta name="twitter:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
+    <meta name="twitter:site" content="@pega" />
 
     <!-- async load PL's CSS -->
     <link rel="preload" href="/pattern-lab/styleguide/css/pattern-lab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

diff --git a/...02-components/band/band-w-pinned-content/60-band-w-pinned-content--via-embed-example.twig b/...02-components/band/band-w-pinned-content/60-band-w-pinned-content--via-embed-example.twig
@@ -0,0 +1,33 @@
+{% embed "@bolt-components-band/band.twig" with {
+  size: "medium",
+  theme: "dark",
+  items: [
+    {
+      position: {
+        align: "end",
+        valign: "center",
+        row_start: 1,
+        column_start: 1,
+        column_end: 12,
+      },
+      content: include("@pl/_share-component-for-event-example.twig"),
+    }, 
+  ]
+} only %}
+  {% block band_content %}
+    {% include "@pl/_band-for-event-example.twig" only %}
+
+    {% include "@bolt-components-headline/text.twig" with {
+      text: "^ via Twig embed, separate <code>content</code> field, uses <code>band_content</code> Twig block.",
+      tag: "p",
+      attributes: {
+        class: [
+          "u-bolt-margin-top-medium"
+        ]
+      }
+    } only %}
+
+  {% endblock %}
+{% endembed %}
+
+
diff --git a/.../band/band-w-pinned-content/60-band-w-pinned-content--via-separate-content-and-items.twig b/.../band/band-w-pinned-content/60-band-w-pinned-content--via-separate-content-and-items.twig
@@ -0,0 +1,49 @@
+{% include "@bolt-components-band/band.twig" with {
+  size: "medium",
+  theme: "dark",
+  background: {
+    opacity: "heavy",
+    fill: "color",
+    focalPoint: {
+      vertical: "center",
+      horizontal: "center"
+    },
+    contentItems: [
+      {
+        pattern: "image",
+        src: "/pattern-lab/images/content/backgrounds/background-short-1.jpg",
+        lazyload: false
+      }
+    ]
+  },
+  content: [
+    include("@pl/_band-for-event-example.twig"),
+    include("@bolt-components-headline/text.twig", {
+      text: "^ via Twig Include, items array separate from <code>content</code> field",
+      tag: "p",
+      attributes: {
+        class: [
+          "u-bolt-margin-top-medium"
+        ]
+      }
+    }),
+  ] | join(""),
+  items: [
+    {
+      position: {
+        align: "end",
+        valign: "center",
+        row_start: 1,
+        column_start: 1,
+        column_end: 12,
+      },
+      content: include("@pl/_share-component-for-event-example.twig", {
+        size: "small",
+        opacity: 80
+      }),
+    },
+  ]
+} only %}
+
+
+
diff --git a/...pinned-content/70-band-w-pinned-content--via-combined-content-and-items-data-example.twig b/...pinned-content/70-band-w-pinned-content--via-combined-content-and-items-data-example.twig
@@ -0,0 +1,29 @@
+{% include "@bolt-components-band/band.twig" with {
+  size: "medium",
+  theme: "dark",
+  items: [
+    {
+      position: {
+        align: "end",
+        valign: "center",
+        row_start: 1,
+        row_end: 1,
+        column_start: 1,
+        column_end: 12,
+      },
+      content: include("@pl/_share-component-for-event-example.twig"),
+    },
+    [
+      include("@pl/_band-for-event-example.twig"),
+      include("@bolt-components-headline/text.twig", {
+        text: "^ via Twig Include, combined content into single items array, doesn't use <code>content</code> field",
+        tag: "p",
+        attributes: {
+          class: [
+            "u-bolt-margin-top-medium"
+          ]
+        }
+      }),
+    ] | join("")
+  ]
+} only %}
diff --git a/...n-lab/src/_patterns/02-components/band/band-w-pinned-content/_band-for-event-example.twig b/...n-lab/src/_patterns/02-components/band/band-w-pinned-content/_band-for-event-example.twig
@@ -0,0 +1,66 @@
+{% grid "o-bolt-grid--flex o-bolt-grid--large o-bolt-grid--middle o-bolt-grid--matrix" %}
+  {% cell 'u-bolt-width-1/1 u-bolt-width-2/3@medium' %}
+    {% include "@bolt/headline.twig" with {
+        text: "Pega Events",
+        size: "xsmall",
+        tag: "span",
+        url: "/events",
+        icon: {
+          name: "arrow-left",
+          position: "before"
+        }
+    } only %}
+
+    {% include "@bolt/headline.twig" with {
+        text: "Customer Engagement Summit Detroit",
+        size: "xxxlarge",
+        tag: "h1",
+    } only %}
+
+    {% include "@bolt/subheadline.twig" with {
+      text: "Hear insights. Make connections. Drive innovation.",
+      size: "xlarge",
+      tag: "p",
+    } only %}
+
+    {% include "@bolt-components-list/list.twig" with {
+      spacing: "small",
+      display: "inline@xsmall",
+      items: [
+        include("@bolt-components-headline/headline.twig", {
+          text: "January 25, 2018",
+          size: "large",
+          tag: "span",
+          url: "#!",
+          icon: {
+            name: "calendar",
+            position: "before",
+            size: "medium"
+          },
+        }),
+        include("@bolt-components-headline/headline.twig", {
+          text: "10:00 AM EST",
+          size: "large",
+          tag: "span",
+          url: "#!",
+          icon: {
+            name: "watch",
+            position: "before",
+            size: "medium"
+          }
+        }),
+        include("@bolt-components-headline/headline.twig", {
+          text: "New York, NY",
+          size: "large",
+          tag: "span",
+          url: "#!",
+          icon: {
+            name: "map-pin",
+            position: "before",
+            size: "medium"
+          }
+        }),
+      ]
+    } only %}
+  {% endcell %}
+{% endgrid %}
diff --git a/...patterns/02-components/band/band-w-pinned-content/_share-component-for-event-example.twig b/...patterns/02-components/band/band-w-pinned-content/_share-component-for-event-example.twig
@@ -0,0 +1,23 @@
+{% include '@bolt-components-share/share.twig' with {
+  sources: [
+    {
+      name: "facebook",
+      url: "https://www.facebook.com/sharer/sharer.php?u=https://5abd3062df99537b79e29496--bolt-design-system.netlify.com/pattern-lab/patterns/02-components-action-blocks-05-action-blocks/02-components-action-blocks-05-action-blocks.html&amp;src=sdkpreparse"
+    },
+    {
+      name: "twitter",
+      url: "https://twitter.com/intent/tweet?url=https://bolt-design-system.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
+    },
+    {
+      name: "linkedin",
+      url: "https://www.linkedin.com/shareArticle?url=https://5abd3062df99537b79e29496--bolt-design-system.netlify.com/pattern-lab/patterns/02-components-action-blocks-05-action-blocks/02-components-action-blocks-05-action-blocks.html"
+    },
+    {
+      name: "email",
+      url: "mailto:?&body=Sample%20Text%20--%20https%3A//bolt-design-system.com"
+    }
+  ],
+  copy_to_clipboard: {
+    text_to_copy: "http://pega.com"
+  }
+} %}
diff --git a/.../pattern-lab/src/_patterns/02-components/copy-to-clipboard/00-copy-to-clipboard-docs.twig b/.../pattern-lab/src/_patterns/02-components/copy-to-clipboard/00-copy-to-clipboard-docs.twig
@@ -1,6 +1,6 @@
 {% set usage %}{% verbatim %}
 {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
-  url: "http://bolt-design-system.com"
+  text_to_copy: "http://bolt-design-system.com"
 } only %}
 {% endverbatim %}{% endset %}
 

diff --git a/apps/pattern-lab/src/_patterns/02-components/copy-to-clipboard/05-copy-to-clipboard.twig b/apps/pattern-lab/src/_patterns/02-components/copy-to-clipboard/05-copy-to-clipboard.twig
@@ -1,5 +1,3 @@
-<div style="text-align: center; padding: 3rem;">
 {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
-  url: "http://bolt-design-system.com"
+  text_to_copy: "http://bolt-design-system.com"
 } only %}
-</div>
diff --git a/...ern-lab/src/_patterns/02-components/copy-to-clipboard/10--multiple-copy-to-clipboard.twig b/...ern-lab/src/_patterns/02-components/copy-to-clipboard/10--multiple-copy-to-clipboard.twig
diff --git a/...rc/_patterns/02-components/copy-to-clipboard/10-copy-to-clipboard-multiple-instances.twig b/...rc/_patterns/02-components/copy-to-clipboard/10-copy-to-clipboard-multiple-instances.twig
@@ -0,0 +1,8 @@
+{% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
+  trigger_text: "Copy Link #1",
+  text_to_copy: "http://bolt-design-system.com/#link-1"
+} only %}
+{% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
+  trigger_text: "Copy Link #2",
+  text_to_copy: "http://bolt-design-system.com/#link-2"
+} only %}