The “Create A New Origami Component” tutorial is split into nine parts and is intended to be followed sequentially from start to finish:
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.
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."
+ }
]
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.
In part four we learnt:
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.