From a8bf02620accc83f0a8527c93e3d45b04f0a18d7 Mon Sep 17 00:00:00 2001
From: Matthieu SCARSET <m@matthieuscarset.com>
Date: Wed, 1 Jun 2022 09:47:36 +0200
Subject: [PATCH] Add usage example

---
 README.md | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5acfb6c..5d3ba63 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,55 @@ If you're wondering, you probably don't need this.
 npm install drupal-attribute
 ```
 
+## Usage
+
+Example of using `drupal-attribute` within a [Storybook](https://storybook.js.org) component, copied [from this tutorial](https://www.intracto.com/en-be/blog/integrating-storybook-drupal).
+
+```JavaScript
+export default { title: 'Blocks' };
+
+import block from './block.twig';
+import drupalAttribute from 'drupal-attribute'
+import './block.css';
+import './block.js';
+export const default_block = () => (
+    block({
+        attributes: new drupalAttribute(),
+        title_attributes: new drupalAttribute(),
+        plugin_id: "Some plugin",
+        title_prefix: "",
+        title_suffix: "",
+        label: "I'm a block!",
+        content: "Lorem ipsum dolor sit amet.",
+        configuration: {
+            provider: "Some module"
+        }
+    })
+);
+```
+
+```twig
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>
+```
+
+
+
 ## License
 
 Apache-2.0 © [Eric MORAND]()
@@ -25,4 +74,4 @@ Apache-2.0 © [Eric MORAND]()
 [daviddm-image]: https://david-dm.org/ericmorand/drupal-attribute.svg?theme=shields.io
 [daviddm-url]: https://david-dm.org/ericmorand/drupal-attribute
 [coveralls-image]: https://coveralls.io/repos/github/ericmorand/drupal-attribute/badge.svg
-[coveralls-url]: https://coveralls.io/github/ericmorand/drupal-attribute
\ No newline at end of file
+[coveralls-url]: https://coveralls.io/github/ericmorand/drupal-attribute