Add Handlebars Demo Starterkit

packages/starterkit-handlebars-demo/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/starterkit-handlebars-demo/README.md

@@ -0,0 +1,17 @@
+# Demo StarterKit for Handlebars
+
+The Demo StarterKit for Handlebars is meant to be used as a demonstration of a Handlebars-based project in Pattern Lab.
+
+## Requirements
+
+The Base StarterKit for Mustache requires the following PatternEngine:
+
+- `@pattern-lab/patternengine-node-handebars`: [npm](https://www.npmjs.com/package/@pattern-lab/patternengine-node-handebars), [Github](https://github.com/pattern-lab/patternengine-node-handlebars)
+
+## Install
+
+[Installation Instructions](http://patternlab.io/docs/advanced-starterkits.html)
+
+## Edit Files
+
+After installation the files for this StarterKit can be found in `source/`.

packages/starterkit-handlebars-demo/dist/_data/blocks.json

@@ -0,0 +1,10 @@
+{
+    "stackedBlockMedia": {
+        "src": "http://via.placeholder.com/600x400"
+    },
+    "stripeField": true,
+    "cartPrice": {
+        "label": "Label",
+        "meta": "meta"
+    }
+}

packages/starterkit-handlebars-demo/dist/_data/buttons.json

@@ -0,0 +1,15 @@
+{
+	"buttonTag" : true,
+	"buttonText" : "Button",
+    "buttonGroup" : [
+        {
+			"buttonTag": true,
+			"buttonText": "Button"
+		},
+        {
+			"styleModifier": "c-btn--bare",
+			"buttonTag": true,
+			"buttonText": "Button"
+		}
+    ]
+}

packages/starterkit-handlebars-demo/dist/_data/colors.json

@@ -0,0 +1,103 @@
+{
+	"brandColors" : [
+		{
+			"colorHex" : "#0000ff",
+			"colorName" : "Brand Blue",
+			"variable" : "$color-brand-blue"
+		}
+	],
+	"neutralColors" : [
+		{
+			"colorHex" : "#ffffff",
+			"colorName" : "White",
+			"variable" : "$color-white"
+		},
+		{
+			"colorHex" : "#f9f9f9",
+			"colorName" : "02% Gray",
+			"variable" : "$color-gray-02"
+		},
+		{
+			"colorHex" : "#eeeeee",
+			"colorName" : "07% Gray",
+			"variable" : "$color-gray-07"
+		},
+		{
+			"colorHex" : "#dddddd",
+			"colorName" : "13% Gray",
+			"variable" : "$color-gray-13"
+		},
+		{
+			"colorHex" : "#bbbbbb",
+			"colorName" : "27% Gray",
+			"variable" : "$color-gray-27"
+		},
+		{
+			"colorHex" : "#808080",
+			"colorName" : "50% Gray",
+			"variable" : "$color-gray-50"
+		},
+		{
+			"colorHex" : "#666666",
+			"colorName" : "60% Gray",
+			"variable" : "$color-gray-60"
+		},
+		{
+			"colorHex" : "#444444",
+			"colorName" : "73% Gray",
+			"variable" : "$color-gray-73"
+		},
+		{
+			"colorHex" : "#131313",
+			"colorName" : "93% Gray",
+			"variable" : "$color-gray-93"
+		},
+		{
+			"colorHex" : "#000000",
+			"colorName" : "Black",
+			"variable" : "$color-black"
+		}
+	],
+	"utilityColors" : [
+		{
+			"colorHex" : "#0192d0",
+			"colorName" : "Info",
+			"variable" : "$color-utility-info"
+		},
+		{
+			"colorHex" : "#d3f2ff",
+			"colorName" : "Info Light",
+			"variable" : "$color-utility-info-light"
+		},
+		{
+			"colorHex" : "#b12a0b",
+			"colorName" : "Error",
+			"variable" : "$color-utility-error"
+		},
+		{
+			"colorHex" : "#fdded8",
+			"colorName" : "Error Light",
+			"variable" : "$color-utility-error-light"
+		},
+		{
+			"colorHex" : "#a59b15",
+			"colorName" : "Warning",
+			"variable" : "$color-utility-warning"
+		},
+		{
+			"colorHex" : "#fffecf",
+			"colorName" : "Warning Light",
+			"variable" : "$color-utility-warning-light"
+		},
+		{
+			"colorHex" : "#03804d",
+			"colorName" : "Success",
+			"variable" : "$color-utility-success"
+		},
+		{
+			"colorHex" : "#d4f3e6",
+			"colorName" : "Success Light",
+			"variable" : "$color-utility-success-light"
+		}
+	]
+}

packages/starterkit-handlebars-demo/dist/_data/data.json

@@ -0,0 +1,24 @@
+{
+	"title": "Soul Soles",
+	"company": {
+		"name": "Soul Soles",
+		"url": "http://soulsoles.com"
+	},
+	"user": {
+		"name": "Thisisauser Withaverylongname",
+		"username": "thisisalongusernamenamename"
+	},
+	"page": {
+		"title": "This is the page title",
+		"description": "This is the page description"
+	},
+	"heading": "Heading ipsum dol (33 characters)",
+	"headline": "Heading ipsum dol (33 characters)",
+	"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
+	"url": "#",
+	"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p><p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p><h2>This is a second-level heading</h2><p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p><ol> <li>Ordered list item</li><li>Another ordered list item</li><li>Yet another ordered list item</li></ol><h3>This is a third-level heading</h3><p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p><h3><a href='#'>This is a linked heading</a></h3><ul> <li>Bulleted list item</li><li>Another bulleted list item</li><li>Yet bulleted list item</li><li>And here's yet another bulleted list item</li></ul><blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote><h4>This is a fourth-level heading</h4><p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p><h5>This is a fifth-level heading</h5><p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p><h6>This is a sixth-level heading</h6> <p>Lorem ipsum dolor sit amet.</p>",
+	"cta": "Call to Action",
+	"sectionTitle": "Section Title",
+	"hero": true,
+	"promoBlock": true
+}

packages/starterkit-handlebars-demo/dist/_data/forms.json

@@ -0,0 +1,127 @@
+{
+    "legend" : "Legend",
+    "label" : "Label",
+    "value" : "",
+    "placeholder" : "Placeholder",
+    "fieldNote" : "This is a note about the field",
+    "id" : "",
+    "selectOptions" : [
+        {
+            "value" : "option-1",
+            "option" : "Option 1"
+        },
+        {
+            "value" : "option-2",
+            "option" : "Option 2"
+        }
+    ],
+    "checkboxes" : [
+        {
+            "label" : "Option 1",
+            "id" : "check-1",
+            "name" : "checkname",
+            "checked" : true
+        },
+        {
+            "label" : "Option 2",
+            "id" : "check-2",
+            "name" : "checkname"
+        }
+    ],
+    "radios" : [
+        {
+            "label" : "Option 1",
+            "id" : "radio-1",
+            "name" : "radioname",
+            "checked" : true
+        },
+        {
+            "label" : "Option 2",
+            "id" : "radio-2",
+            "name" : "radioname"
+        }
+    ],
+    "searchForm": true,
+    "searchFormButton": {
+        "buttonTag": true,
+        "styleModifier": "u-is-vishidden",
+        "buttonText": "Search"
+    },
+    "fields": [
+        {}
+    ],
+    "selectField": [
+        {}
+    ],
+    "formFields": {
+		"items": [
+			{
+				"textField": {
+					"label" : "Name"
+				}
+			},
+			{
+				"selectField": {
+					"label": "Select",
+					"selectOptions" : [
+				        {
+				            "value" : "option-1",
+				            "option" : "Option 1"
+				        },
+				        {
+				            "value" : "option-2",
+				            "option" : "Option 2"
+				        }
+				    ]
+				}
+			},
+			{
+				"checkboxField": {
+					"label": "Checkbox Field",
+					"checkboxes" : [
+				        {
+				            "label" : "Option 1",
+				            "id" : "check-1",
+				            "name" : "checkname",
+				            "checked" : true
+				        },
+				        {
+				            "label" : "Option 2",
+				            "id" : "check-2",
+				            "name" : "checkname"
+				        }
+				    ]
+				}
+			},
+			{
+				"textAreaField": {
+					"label" : "Textarea Field"
+				}
+			},
+			{
+				"radioField": {
+					"label": "Radios",
+					"radios" : [
+				        {
+				            "label" : "Option 1",
+				            "id" : "radio-1",
+				            "name" : "radioname",
+				            "checked" : true
+				        },
+				        {
+				            "label" : "Option 2",
+				            "id" : "radio-2",
+				            "name" : "radioname"
+				        }
+				    ]
+				}
+			}
+		]
+	},
+    "formButtons": [
+        {},
+        {
+            "styleModifier": "c-btn--bare"
+        }
+    ]
+}

packages/starterkit-handlebars-demo/dist/_data/global.json

@@ -0,0 +1,5 @@
+{
+    "footerLogo": {
+        "styleModifier": "c-logo--light"
+    }
+}

packages/starterkit-handlebars-demo/dist/_data/icons.json

@@ -0,0 +1,13 @@
+{
+	"iconPath" : "../../icons.svg",
+	"icon" : "search",
+	"icons" : [
+		{ "icon" : "minus" },
+		{ "icon" : "plus" },
+		{ "icon" : "search" },
+		{ "icon" : "triangle-down" },
+		{ "icon" : "triangle-up" },
+		{ "icon" : "triangle-right" },
+		{ "icon" : "triangle-left" }
+	]
+}

packages/starterkit-handlebars-demo/dist/_data/images.json

@@ -0,0 +1,5 @@
+{
+    "src" : "http://via.placeholder.com/1200x800",
+    "alt": "landscape image",
+    "logoImg" : "../../images/logo.png"
+}

packages/starterkit-handlebars-demo/dist/_data/listitems.json

@@ -0,0 +1,3 @@
+{
+
+}