Skip to content

Commit

Permalink
perf(docs): add custom reg example
Browse files Browse the repository at this point in the history
  • Loading branch information
jason-capsule42 committed Feb 21, 2024
1 parent 1655778 commit 3464cc3
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 0 deletions.
4 changes: 4 additions & 0 deletions apiExamples/custom.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<custom-lockup>
<span slot="title">Place title text here</span>
<span slot="subtitle">Place subtitle text here</span>
</custom-lockup>
5 changes: 5 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@
});
</script>
<script type="module" data-demo-script="true" src="../index.js"></script>
<script type="module">
import { registerComponent } from '../index.js';

registerComponent('custom-lockup');
</script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
</body>
</html>
36 changes: 36 additions & 0 deletions demo/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,4 +136,40 @@ For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
<auro-lockup onDark standard oneworld></auro-lockup>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-lockup` custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.

```js
import './node_modules/@aurodesignsystem/auro-lockup';
registerComponent('custom-lockup');
```

This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` element.

<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
<!-- The below content is automatically added from ./../../apiExamples/custom.html -->
<custom-lockup>
<span slot="title">Place title text here</span>
<span slot="subtitle">Place subtitle text here</span>
</custom-lockup>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->

```html
<custom-lockup>
<span slot="title">Place title text here</span>
<span slot="subtitle">Place subtitle text here</span>
</custom-lockup>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
23 changes: 23 additions & 0 deletions docs/partials/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,26 @@ For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-lockup` custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.

```js
import './node_modules/@aurodesignsystem/auro-lockup';
registerComponent('custom-lockup');
```

This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` element.

<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

0 comments on commit 3464cc3

Please sign in to comment.