Create A New Origami Component - Part 4 Demos

The “Create A New Origami Component” tutorial is split into nine parts and is intended to be followed sequentially from start to finish:

1. Intro & Boilerplate
2. Base Styles
3. Themes & Brands
4. Demos
5. JavaScript
6. Storybook
7. Testing
8. Documentation
9. Component Lifecycle

In part four we will create new demos to showcase the themes we created in part three. The demos we will create in this part are for the Origami Registry. In the near future all demos will be moved to Storybook, which we will cover in part six.

Add More Demos

In part three we added an inverse theme for each brand and a b2c theme for the core brand but no demos for these. That means there is no visual preview for potential users of our component, and no ability to copy the html for these themes from the Origami component registry.

To add new demos we will update origami.json. This file contains lots of information about our components, including its name, description, demos, and more — see the Origami Manifest specification for full details.

We’ll add a new object to the demos array which will represent our new demo. Demos must have at least the following properties:

• title: A descriptive title for the component registry.
• name: The outputted html file name.
• template: The path to the demo mustache template.
• description: A descriptive for the component registry.

We could create a new mustache template for our new theme demo, but as our theme demo uses almost the same markup as our current demo we will reuse our current template demos/src/demo.mustache. To do that, we will pass the theme name to the template using the demo data property as shown below:

// origami.json

"demos": [
	{
-		"title": "A Useful Demo",
+		"title": "Basic Example",
		"name": "demo",
		"template": "demos/src/demo.mustache",
-		"description": "Description of the demo"
+		"description": "This demo shows a basic o-example component."
	},
+	{
+		"title": "Inverse Example",
+		"name": "demo-inverse",
+		"template": "demos/src/demo.mustache",
+		"data": { "theme": "inverse" },
+		"description": "This demo shows an o-example component with the inverse theme."
+	}
]

Now if you refresh your browser you should be able to find demo-inverse.html generated next to other assets of the component. To actually show the inverse theme we need to update the template demos/src/demo.mustache to use the data { "theme": "inverse" } we have passed to it. In the code snippet below, we output the theme modifier class if a theme variable is found (see the mustache documentation)

<!-- demos/src/demo.mustache -->

-<div class="o-example" data-o-component="o-example">
+<div class="o-example {{#theme}}o-example--{{theme}}{{/theme}}" data-o-component="o-example">
    Hello world, I am a component named o-example!
    <button class="o-example__button">count</button>
</div>

We also need to create a demo for the b2c theme. However the b2c theme we created only supports the core brand. It should not be displayed in Storybook for the internal or whitelabel brands. To avoid that, we will set the brands demo property.

// origami.json

"demos": [
	{
		"title": "Basic Example",
		"name": "demo",
		"template": "demos/src/demo.mustache",
		"description": "This demo shows a basic o-example component."
	},
	{
		"title": "Inverse Example",
		"name": "demo-inverse",
		"template": "demos/src/demo.mustache",
		"data": { "theme": "inverse" },
		"description": "This demo shows an o-example component with the inverse theme."
	},
+	{
+		"title": "B2C Example",
+		"name": "demo-b2c",
+		"template": "demos/src/demo.mustache",
+		"data": { "theme": "b2c" },
+		"brands": ["core"],
+		"description": "This demo shows an o-example component with the b2c theme."
+	}
]

Other Demo Options

There are other demo options we haven’t covered so far. For example as well as the demos array origami.json may include demosDefaults, which describe options to be applied to all demos. Among other settings we can specify the demo Mustache template, Sass, and JavaScript file. To learn more see the Origami Manifest specification which has a full list of all demo options.

Part Five: JavaScript

In part four we learnt:

• How to add or update demos to a component.
• How to use origami.json properties to make it easier to configure multiple demos.

Although our component is starting to look good it has a button which doesn’t do anything. So next we’ll learn how to add interactivity to our component with JavaScript. Continue to part five.