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, + ] +%} +