Initialize Storybook

web/themes/custom/votegov/components/project/example/example.data.yml

@@ -0,0 +1,7 @@
+---
+heading: 'Welcome to your new Project UI Library with Storybook!'
+text: '<p>Check out the example component:</p>'
+bullets:
+  0: '<strong>example.stories.js:</strong> initializes and configures your component.'
+  1: '<strong>example.html.twig:</strong> the template for rendering your component.'
+  2: '<strong>example.data.yml:</strong> defines the default data used in rendering the component.'

web/themes/custom/votegov/components/project/example/example.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+  * Example
+  *
+  * Available variables:
+  * - heading: String value.
+  * - text: String value.
+  * - bullets: Array of string values.
+**/
+#}
+
+{{ attach_library('project/example') }}
+
+<h2 class="example-heading">{{ heading }}</h2>
+
+{{ text }}
+
+{% if bullets | length %}
+  <ul>
+    {% for bullet in bullets %}
+      <li>{{ bullet }}</li>
+    {% endfor %}
+  </ul>
+{% endif %}

web/themes/custom/votegov/components/project/example/example.stories.js

@@ -0,0 +1,12 @@
+import Example from "./example.html.twig";
+import data from './example.data.yml';
+import "./src/example.style.scss";
+import "./src/example.behavior.js";
+
+export default {
+  title: "Project/Example",
+  args: { ...data },
+  component: Example,
+};
+
+export const Default = {};

web/themes/custom/votegov/components/project/example/src/example.behavior.js

@@ -0,0 +1 @@
+console.log("Don't worry, I'm just an example");

web/themes/custom/votegov/components/project/example/src/example.style.scss

@@ -0,0 +1,3 @@
+h2.example-heading {
+  color: blue;
+}

web/themes/custom/votegov/components/project/test/test.component.yml

@@ -0,0 +1 @@
+name: Test

web/themes/custom/votegov/components/project/test/test.css

@@ -0,0 +1,4 @@
+.mytest {
+  color: blue;
+  font-weight: bold;
+}

web/themes/custom/votegov/components/project/test/test.js

@@ -0,0 +1 @@
+alert('SCD');

web/themes/custom/votegov/components/project/test/test.twig

@@ -0,0 +1 @@
+<span class="mytest">{{ text }}</span>

web/themes/custom/votegov/package.json

@@ -4,6 +4,11 @@
   "description": "",
   "main": "gulpfile.js",
   "scripts": {
+    "copy": "npm run copy:templates",
+    "copy:templates": "cp -rfp node_modules/votestorybook/components/project components",
+    "copy:css": "cp -rfp node_modules/votestorybook/components/dist/css dist/js",
+    "copy:js": "cp -rfp node_modules/votestorybook/components/dist/js dist/css",
+    "copy:assets": "cp -rfp node_modules/votestorybook/components/dist/assets dist/assets",
     "gulp": "gulp watch",
     "dev": "gulp",
     "build": "gulp build"
@@ -15,7 +20,8 @@
     "@uswds/uswds": "^3.9.0",
     "gulp": "^5.0.0",
     "gulp-uglify": "^3.0.2",
-    "uglify-es": "^3.3.9"
+    "uglify-es": "^3.3.9",
+    "votestorybook": "github:rayestrada/votestorybook#main"
   },
   "overrides": {
     "glob-parent": "6.0.2",