Skip to content

Commit

Permalink
Document passing of custom components as icons
Browse files Browse the repository at this point in the history
  • Loading branch information
piemonkey committed Mar 19, 2024
1 parent e6413b5 commit 52fef50
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 1 deletion.
28 changes: 28 additions & 0 deletions stories/4-utilities/Icons.stories.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Canvas, Meta, Story } from "@storybook/addon-docs";
import * as iconStories from "../5-components/Brand/AuIcon.stories";

<Meta title="Utilities/Icons" />

# Icons

Appuniversum includes many SVG icons that can be used by passing the name of the icon into the component, e.g.

```
<AuButton @icon="book">Button Text</AuButton>
```

Alternatively, wherever you can pass an icon name you can instead pass an Ember component that will be rendered instead of the default SVG in the AuIcon component.
This can be used, for example, to use inline SVGs or PNG icons.

Although the Ember component will not be passed any arguments, it's possible to pass them using the `component` helper.
See [AuIcon docs](/docs/components-brand-auicon--with-custom-icon) for a live example.

```
<AuButton @icon={{component 'custom-icon' iconName='some-name'}}>Button Text</AuButton>
```

All the available icons are listed here:

<Canvas>
<Story story={iconStories.Icons} />
</Canvas>
19 changes: 19 additions & 0 deletions stories/5-components/Brand/AuIcon.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,17 @@ const Template = (args) => ({
context: args,
});

const CustomIconTemplate = (args) => ({
template: hbs`
<AuIcon
@icon={{component 'au-icon' icon=this.icon}}
@size={{this.size}}
@alignment={{this.alignment}}
@ariaHidden={{this.ariaHidden}}
/>`,
context: args,
});

const IconList = (args) => ({
template: hbs`
<AuIconList />
Expand All @@ -57,5 +68,13 @@ Component.args = {
ariaHidden: true,
};

export const WithCustomIcon = CustomIconTemplate.bind({});
WithCustomIcon.args = {
icon: 'info-circle',
size: 'large',
alignment: '',
ariaHidden: true,
};

export const Icons = IconList.bind({});
IconList.args = {};
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ All these methods have the same API. The only difference is the default icon and
```ts
interface ToastOptions {
type?: "info" | "success" | "warning" | "error"; // Default depends on the used display method
icon?: string; // Any valid Appuniversum icon name, default depends on the used display method
icon?: string | Component<Record<string, never>>; // Any valid Appuniversum icon name, default
// depends on the used display method, or an ember component requiring no arguments
timeOut?: number; // delay in milliseconds after which the toast auto-closes
closable?: boolean; // Can the toast be closed by users, defaults to `true`
}
Expand Down

0 comments on commit 52fef50

Please sign in to comment.