+ Bolt Design System
+
+ Bolt Design System
+{{ key }}
diff --git a/apps/pattern-lab/src/_meta/_00-head.twig b/apps/pattern-lab/src/_meta/_00-head.twig
index fcd302844d..fb1488d173 100644
--- a/apps/pattern-lab/src/_meta/_00-head.twig
+++ b/apps/pattern-lab/src/_meta/_00-head.twig
@@ -47,8 +47,22 @@
-
- {% include "@bolt-components-share/src/_share-meta-example.twig" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/60-band-w-pinned-content--via-embed-example.twig b/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/60-band-w-pinned-content--via-embed-example.twig
new file mode 100644
index 0000000000..b0d27b7a79
--- /dev/null
+++ b/apps/pattern-lab/src/_patterns/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 content field, uses band_content Twig block.",
+ tag: "p",
+ attributes: {
+ class: [
+ "u-bolt-margin-top-medium"
+ ]
+ }
+ } only %}
+
+ {% endblock %}
+{% endembed %}
+
+
diff --git a/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/60-band-w-pinned-content--via-separate-content-and-items.twig b/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/60-band-w-pinned-content--via-separate-content-and-items.twig
new file mode 100644
index 0000000000..da3af3cf96
--- /dev/null
+++ b/apps/pattern-lab/src/_patterns/02-components/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 content 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/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/70-band-w-pinned-content--via-combined-content-and-items-data-example.twig b/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/70-band-w-pinned-content--via-combined-content-and-items-data-example.twig
new file mode 100644
index 0000000000..c4e079672b
--- /dev/null
+++ b/apps/pattern-lab/src/_patterns/02-components/band/band-w-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 content field",
+ tag: "p",
+ attributes: {
+ class: [
+ "u-bolt-margin-top-medium"
+ ]
+ }
+ }),
+ ] | join("")
+ ]
+} only %}
\ No newline at end of file
diff --git a/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/_band-for-event-example.twig b/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/_band-for-event-example.twig
new file mode 100644
index 0000000000..e8328a7465
--- /dev/null
+++ b/apps/pattern-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 %}
\ No newline at end of file
diff --git a/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/_share-component-for-event-example.twig b/apps/pattern-lab/src/_patterns/02-components/band/band-w-pinned-content/_share-component-for-event-example.twig
new file mode 100644
index 0000000000..d02ca14c76
--- /dev/null
+++ b/apps/pattern-lab/src/_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&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"
+ }
+} %}
\ No newline at end of file
diff --git a/apps/pattern-lab/src/_patterns/02-components/copy-to-clipboard/00-copy-to-clipboard-docs.twig b/apps/pattern-lab/src/_patterns/02-components/copy-to-clipboard/00-copy-to-clipboard-docs.twig
index 8241546796..572948c375 100644
--- a/apps/pattern-lab/src/_patterns/02-components/copy-to-clipboard/00-copy-to-clipboard-docs.twig
+++ b/apps/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
index e5a5e0d9b4..e25f0e511f 100644
--- 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 @@
-Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.
+ +{% for opacity in schema.properties.opacity.enum %} +<bolt-grid-item> in the nested <bolt-grid> component.. Defaults to small when there's more than than 1 item in the items array, otherwise defaults to none. Shares the same row_gutter config options as the grid component."
+ type: string
+ default: "small / none"
+ enum:
+ - none
+ - small
+ - medium
+ - large
+ items:
+ type: array
+ description: "Array of content items to display inside the band component. Internally this uses the new <bolt-grid> component to handle layout."
+ properties:
+ content:
+ type: [string, object, array]
+ description: "Content to render inside each <bolt-grid-item>"
+ position:
+ type: object
+ ref: '@bolt-components-grid/grid-item.schema.yml'
+ description: "Layout-specific config options for each internal <bolt-grid-item>"
diff --git a/packages/components/bolt-band/package.json b/packages/components/bolt-band/package.json
index 540b64b539..0d31612845 100644
--- a/packages/components/bolt-band/package.json
+++ b/packages/components/bolt-band/package.json
@@ -34,6 +34,9 @@
"dependencies": {
"@bolt/core": "^2.0.0-beta.3"
},
+ "peerDependencies": {
+ "@bolt/components-grid": "0.0.0"
+ },
"schema": "band.schema.yml",
"gitHead": "cf9fabf0b3fcdac226af9503c052913db15592d7"
}
diff --git a/packages/components/bolt-band/src/band.scss b/packages/components/bolt-band/src/band.scss
index 439d3e2840..40eb7fdda0 100644
--- a/packages/components/bolt-band/src/band.scss
+++ b/packages/components/bolt-band/src/band.scss
@@ -16,20 +16,20 @@
.c-bolt-band--large {
- @include bolt-padding-top(xlarge);
- @include bolt-padding-bottom(xlarge);
-}
-
-.c-bolt-band--medium {
@include bolt-padding-top(large);
@include bolt-padding-bottom(large);
}
-.c-bolt-band--small {
+.c-bolt-band--medium {
@include bolt-padding-top(medium);
@include bolt-padding-bottom(medium);
}
+.c-bolt-band--small {
+ @include bolt-padding-top(small);
+ @include bolt-padding-bottom(small);
+}
+
.c-bolt-band--xsmall {
@include bolt-padding-top(xsmall);
@include bolt-padding-bottom(xsmall);
diff --git a/packages/components/bolt-band/src/band.twig b/packages/components/bolt-band/src/band.twig
index 3011a97979..45e12abbdf 100644
--- a/packages/components/bolt-band/src/band.twig
+++ b/packages/components/bolt-band/src/band.twig
@@ -32,7 +32,7 @@
<bolt-grid-item>"
+ position:
+ type: object
+ ref: '@bolt-components-grid/grid-item.schema.yml'
+ description: "Layout-specific config options for each internal <bolt-grid-item>"
diff --git a/packages/components/bolt-grid/package.json b/packages/components/bolt-grid/package.json
new file mode 100644
index 0000000000..8bba716d8e
--- /dev/null
+++ b/packages/components/bolt-grid/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@bolt/components-grid",
+ "description": "Grid Component",
+ "keywords": [
+ "bolt design system"
+ ],
+ "version": "0.0.0",
+ "author": "Salem Ghoweri",
+ "homepage": "https://boltdesignsystem.com",
+ "license": "MIT",
+ "repository": "https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-grid",
+ "bugs": "https://github.com/bolt-design-system/bolt/issues",
+ "publishConfig": {
+ "access": "public"
+ },
+ "dependencies": {
+ "@bolt/core": "^2.0.0-beta.2"
+ },
+ "scripts": {},
+ "style": "src/grid.scss",
+ "schema": "grid.schema.yml",
+ "gitHead": "92b24ab7ae9f391e903a3f349f82aa0011fb32fb"
+}
diff --git a/packages/components/bolt-grid/src/grid-item.twig b/packages/components/bolt-grid/src/grid-item.twig
new file mode 100644
index 0000000000..42e029258b
--- /dev/null
+++ b/packages/components/bolt-grid/src/grid-item.twig
@@ -0,0 +1,33 @@
+{# @todo: continue troubleshooting why components specifying multiple schemas don't show up in the global bolt.data.components.COMPONENT_NAME.schemas.PRETTY_NAME #}
+{# {% set schema = bolt.data.components['@bolt-components-grid'].schema["bolt-grid-item"] %} #}
+
+{% set row_start = position.row_start ? position.row_start : row_start | default(null) %}
+{% set row_end = position.row_end ? position.row_end : row_end | default(null) %}
+{% set row_span = position.row_span ? position.row_span : row_span | default(null) %}
+
+{% set column_start = position.column_start ? position.column_start : column_start | default(1) %}
+{% set column_end = position.column_end ? position.column_end : column_end | default(null) %}
+{% set column_span = position.column_span ? position.column_span : column_span | default(12) %}
+
+{% set align = position.align ? position.align : align | default(null) %}
+{% set valign = position.valign ? position.valign : valign | default(null) %}
+
+{% set attributes = create_attribute(attributes|default({})) %}
+
+