-
Notifications
You must be signed in to change notification settings - Fork 75
/
navigation-logo.stories.ts
66 lines (56 loc) · 2.14 KB
/
navigation-logo.stories.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { placeholderImage } from "../../../.storybook/placeholderImage";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
import { text } from "@storybook/addon-knobs";
export default {
title: "Components/Navigation/Navigation Logo",
parameters: {
notes: readme,
},
...storyFilters(),
};
export const simple = (): string =>
html`<calcite-navigation-logo
description="${text("description", "City of AcmeCo")}"
heading="${text("heading", "ArcGIS Online")}"
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
${boolean("active", false)}
/>`;
export const heading_TestOnly = (): string => html`<calcite-navigation-logo heading="ArcGIS Online" />`;
export const description_TestOnly = (): string =>
html`<calcite-navigation-logo
description="City of AcmeCo"
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
/>`;
export const thumbnail_TestOnly = (): string =>
html`<calcite-navigation-logo thumbnail="${placeholderImage({ width: 50, height: 50 })}" />`;
export const headingAndThumbnail_TestOnly = (): string => html`<calcite-navigation-logo
heading="ArcGIS Online"
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
/>`;
export const headingAndIcon_TestOnly = (): string => html`<calcite-navigation-logo
heading="ArcGIS Online"
icon="link-chart"
/>`;
export const descriptionAndThumbnail_TestOnly = (): string => html`<calcite-navigation-logo
description="City of AcmeCo"
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
/>`;
export const All_TestOnly = (): string => html`<calcite-navigation-logo
icon="link-chart"
heading="ArcGIS Online"
description="City of AcmeCo"
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
/>`;
export const slottedInNav_TestOnly = (): string =>
html`
<calcite-navigation style="--calcite-ui-brand: #bf390f">
<calcite-navigation-logo
heading="ArcGIS Online"
description="City of AcmeCo"
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
slot="logo"
/>
</calcite-navigation>
`;