{# LIBRARIES #}
{{ attach_library('ui_patterns/test_component.component_lib') }}

{# TEMPLATE #}
<div class="my-component">
  <h1>I have custom SCSS</h1>
  <p>This is some paragraph text.</p>
</div>

<div class="my-component">
  <h2>I have custom JS</h2>
  <p>This is some paragraph text.</p>
</div>
<hr>

<h4>Library in .yml</h4>
<pre>
  test_component:
  label: Test component
  description: Test component with libraries
  visibility: storybook
  namespace: "Tests/Component"
  use: "@tests/component/component.twig"
  libraries:
    - component_lib:
        js:
          ../behaviors/component.js: { }
        css:
          component:
            ../styles/component.css: { weight: 10 }
</pre>

<h4>Library in template</h4>
<pre>
  { # LIBRARIES # }
  { { attach_library('ui_patterns/test_component.component_lib') } }
</pre>

<h4>Folder contents</h4>
<pre>
  component.behavior.js
  component.stories.jsx
  component.style.scss
  component.twig
  component.wingsuit.yml
</pre>
