Skip to content

Commit b362dda

Browse files
b3008b3008
committed
fix aa-choose and storybook
1 parent 020a02a commit b362dda

7 files changed

Lines changed: 853 additions & 60 deletions

File tree

‎src/customElements/aa-choose/aa-choose.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AABaseElement, type AAPropertiesMap } from '../aa-base-element/aa-base-element';
22
import './aa-when/aa-when';
33
import './aa-otherwise/aa-otherwise';
4-
import * as jsep from 'jsep';
4+
import jsep from 'jsep';
55
export class AAChoose extends AABaseElement {
66

77
static get category(): string {

‎src/customElements/aa-variable/aa-variable.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AABaseElement, type AAPropertiesMap } from '../aa-base-element/aa-base-element'
2-
import * as jsep from 'jsep';
2+
import jsep from 'jsep';
33

44
export class AAVariable extends AABaseElement {
55

‎src/stories/Choose.stories.ts‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import type { Meta, StoryObj } from "@storybook/web-components";
22
import { html } from "lit";
3+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
4+
5+
const sourceCode = `<aa-session name="choose-demo" debug>
6+
<aa-variable name="score" value="75"></aa-variable>
7+
<aa-choose name="grade" debug>
8+
<aa-when test="score >= 90">
9+
<aa-label>Grade: A — Excellent!</aa-label>
10+
</aa-when>
11+
<aa-when test="score >= 70">
12+
<aa-label>Grade: B — Good job!</aa-label>
13+
</aa-when>
14+
<aa-otherwise>
15+
<aa-label>Grade: C — Keep trying!</aa-label>
16+
</aa-otherwise>
17+
</aa-choose>
18+
</aa-session>`;
319

420
const meta = {
521
title: "Control Flow/Choose",
622
tags: ["autodocs"],
7-
render: () => html`
8-
<aa-session name="choose-demo" debug>
9-
<aa-variable name="score" value="75"></aa-variable>
10-
<aa-choose name="grade" debug>
11-
<aa-when test="score >= 90">
12-
<aa-label>Grade: A — Excellent!</aa-label>
13-
</aa-when>
14-
<aa-when test="score >= 70">
15-
<aa-label>Grade: B — Good job!</aa-label>
16-
</aa-when>
17-
<aa-otherwise>
18-
<aa-label>Grade: C — Keep trying!</aa-label>
19-
</aa-otherwise>
20-
</aa-choose>
21-
</aa-session>
22-
`,
23+
render: () => html`${unsafeHTML(sourceCode)}`,
24+
parameters: {
25+
docs: {
26+
source: { code: sourceCode, language: "html" },
27+
},
28+
},
2329
} satisfies Meta;
2430

2531
export default meta;

‎src/stories/Sequence.stories.ts‎

Lines changed: 54 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,69 @@
11
import type { Meta, StoryObj } from "@storybook/web-components";
22
import { html } from "lit";
3+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
34

4-
const meta = {
5-
title: "Control Flow/Sequence",
6-
tags: ["autodocs"],
7-
render: () => html`
8-
<aa-sequence name="demo-sequence" debug>
5+
const defaultSource = `<aa-session>
6+
<aa-sequence id="demo-seq" name="demo-sequence" debug>
7+
<aa-screen submit-button-hidden>
98
<aa-label>Step 1: Welcome</aa-label>
9+
</aa-screen>
10+
<aa-screen submit-button-hidden>
1011
<aa-label>Step 2: Instructions</aa-label>
12+
</aa-screen>
13+
<aa-screen submit-button-hidden>
1114
<aa-label>Step 3: Complete</aa-label>
12-
</aa-sequence>
13-
`,
15+
</aa-screen>
16+
</aa-sequence>
17+
</aa-session>
18+
<button onclick="document.getElementById('demo-seq').next()">Next Step</button>`;
19+
20+
const meta = {
21+
title: "Control Flow/Sequence",
22+
tags: ["autodocs"],
23+
render: () => html`${unsafeHTML(defaultSource)}`,
24+
parameters: {
25+
docs: {
26+
source: { code: defaultSource, language: "html" },
27+
},
28+
},
1429
} satisfies Meta;
1530

1631
export default meta;
1732
type Story = StoryObj;
1833

1934
export const Default: Story = {};
2035

36+
const withScreensSource = `<aa-session>
37+
<aa-sequence name="survey-sequence" debug>
38+
<aa-screen submit-button-text="Next">
39+
<aa-label>Question 1</aa-label>
40+
<aa-text-answer
41+
name="q1"
42+
label="What is your name?"
43+
type="text"
44+
></aa-text-answer>
45+
</aa-screen>
46+
<aa-screen submit-button-text="Next">
47+
<aa-label>Question 2</aa-label>
48+
<aa-slider
49+
name="q2"
50+
min="1"
51+
max="10"
52+
min-label="Low"
53+
max-label="High"
54+
></aa-slider>
55+
</aa-screen>
56+
<aa-screen submit-button-text="Finish">
57+
<aa-label>Thank you!</aa-label>
58+
</aa-screen>
59+
</aa-sequence>
60+
</aa-session>`;
61+
2162
export const WithScreens: Story = {
22-
render: () => html`
23-
<aa-sequence name="survey-sequence" debug>
24-
<aa-screen submit-button-text="Next">
25-
<aa-label>Question 1</aa-label>
26-
<aa-text-answer name="q1" label="What is your name?" type="text"></aa-text-answer>
27-
</aa-screen>
28-
<aa-screen submit-button-text="Next">
29-
<aa-label>Question 2</aa-label>
30-
<aa-slider name="q2" min="1" max="10" min-label="Low" max-label="High"></aa-slider>
31-
</aa-screen>
32-
<aa-screen submit-button-text="Finish">
33-
<aa-label>Thank you!</aa-label>
34-
</aa-screen>
35-
</aa-sequence>
36-
`,
63+
render: () => html`${unsafeHTML(withScreensSource)}`,
64+
parameters: {
65+
docs: {
66+
source: { code: withScreensSource, language: "html" },
67+
},
68+
},
3769
};

‎src/stories/Session.stories.ts‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
import type { Meta, StoryObj } from "@storybook/web-components";
22
import { html } from "lit";
3+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
4+
5+
const sourceCode = `<aa-session name="demo-survey" debug>
6+
<aa-memory></aa-memory>
7+
<aa-sequence name="survey-flow">
8+
<aa-screen submit-button-text="Next">
9+
<aa-label>What is your favorite color?</aa-label>
10+
<aa-multiple-choice name="favColor">
11+
<aa-choice-item value="red">Red</aa-choice-item>
12+
<aa-choice-item value="blue">Blue</aa-choice-item>
13+
<aa-choice-item value="green">Green</aa-choice-item>
14+
</aa-multiple-choice>
15+
</aa-screen>
16+
<aa-screen submit-button-text="Submit">
17+
<aa-label>How much do you like it?</aa-label>
18+
<aa-slider name="liking" min="0" max="100" min-label="Not at all" max-label="Love it"></aa-slider>
19+
</aa-screen>
20+
</aa-sequence>
21+
</aa-session>`;
322

423
const meta = {
524
title: "Data & Utility/Session",
625
tags: ["autodocs"],
7-
render: () => html`
8-
<aa-session name="demo-survey" debug>
9-
<aa-memory></aa-memory>
10-
<aa-sequence name="survey-flow">
11-
<aa-screen submit-button-text="Next">
12-
<aa-label>What is your favorite color?</aa-label>
13-
<aa-multiple-choice name="favColor">
14-
<aa-choice-item value="red">Red</aa-choice-item>
15-
<aa-choice-item value="blue">Blue</aa-choice-item>
16-
<aa-choice-item value="green">Green</aa-choice-item>
17-
</aa-multiple-choice>
18-
</aa-screen>
19-
<aa-screen submit-button-text="Submit">
20-
<aa-label>How much do you like it?</aa-label>
21-
<aa-slider name="liking" min="0" max="100" min-label="Not at all" max-label="Love it"></aa-slider>
22-
</aa-screen>
23-
</aa-sequence>
24-
</aa-session>
25-
`,
26+
render: () => html`${unsafeHTML(sourceCode)}`,
27+
parameters: {
28+
docs: {
29+
source: { code: sourceCode, language: "html" },
30+
},
31+
},
2632
} satisfies Meta;
2733

2834
export default meta;

0 commit comments

Comments
 (0)