-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
27 changed files
with
1,094 additions
and
19 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/components/sharpen-course-description/sharpen-course-description.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| sharpen-course-description sharpen-card { | ||
| display: flex; | ||
| gap: 1em; | ||
| align-items: center; | ||
|
|
||
| .sharpen-icon { | ||
| color: var(--color-orange); | ||
| font-size: var(--font-size-3xl); | ||
| } | ||
|
|
||
| div { flex: 1; } | ||
|
|
||
| li::marker { color: var(--color-orange); } | ||
| } |
23 changes: 23 additions & 0 deletions
23
src/components/sharpen-course-description/sharpen-course-description.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /** | ||
| * Used within our Onboarding Wizard to display the features of a child's | ||
| * personalized Sharpen Reading course. Fill it with list items. | ||
| */ | ||
| export default { | ||
| title: 'Molecules/Course Description', | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| icon: { | ||
| description: 'Icon to display' | ||
| } | ||
| }, | ||
| args: { | ||
| icon: 'trophy' | ||
| }, | ||
| render: (args) => `<sharpen-course-description icon="${args.icon}"> | ||
| <li>Start at Sharpen <strong>Level B1</strong></li> | ||
| <li>Easily read texts at a Grade 1 level by <strong>February 28</strong>.</li> | ||
| <li>Build increased confidence in reading.</li> | ||
| </sharpen-course-description>` | ||
| }; | ||
|
|
||
| export const Example = { }; |
29 changes: 29 additions & 0 deletions
29
src/components/sharpen-course-description/sharpen-course-description.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Component, Host, Prop, h } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'sharpen-course-description', | ||
| styleUrl: 'sharpen-course-description.scss' | ||
| }) | ||
| export class SharpenCourseDescription { | ||
|
|
||
| /** | ||
| * Icon | ||
| */ | ||
| @Prop() icon: string; | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host> | ||
| <sharpen-card padding="medium" border="gray"> | ||
| <i class="sharpen-icon">{this.icon}</i> | ||
| <div> | ||
| <ul class="sharpen-list"> | ||
| <slot></slot> | ||
| </ul> | ||
| </div> | ||
| </sharpen-card> | ||
| </Host> | ||
| ); | ||
| } | ||
|
|
||
| } |
12 changes: 12 additions & 0 deletions
12
src/components/sharpen-wizard-header/sharpen-wizard-header.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| sharpen-wizard-header { | ||
| nav { | ||
| display: flex; | ||
|
|
||
| .sharpen-icon { | ||
| font-size: 14pt; | ||
| vertical-align: 4px; | ||
| } | ||
|
|
||
| h1 { flex: 1; text-align: center; padding-right: 14pt; } | ||
| } | ||
| } |
43 changes: 43 additions & 0 deletions
43
src/components/sharpen-wizard-header/sharpen-wizard-header.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { optional } from '../../utils/utils'; | ||
|
|
||
| /** | ||
| * A title and progress bar tailored for our onboarding wizard. (The progress bar is always green.) | ||
| */ | ||
| export default { | ||
| title: 'Organisms/Wizard Header', | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| section: { | ||
| description: 'The current section.' | ||
| }, | ||
| currentStep: { | ||
| description: 'The number of the current step.' | ||
| }, | ||
| totalSteps: { | ||
| description: 'The total number of steps in the wizard.' | ||
| }, | ||
| backHref: { | ||
| description: 'Optional back button link.' | ||
| } | ||
| }, | ||
| render: (args) => `<sharpen-wizard-header section="${args.section}" current-step="${args.currentStep}" total-steps="${args.totalSteps}"${optional('back-href', args.backHref)}></sharpen-wizard-header>` | ||
| }; | ||
|
|
||
| export const WithBackButton = { | ||
| args: { | ||
| section: 'Learning Profile', | ||
| currentStep: 3, | ||
| totalSteps: 65, | ||
| backHref: 'foo.html' | ||
| } | ||
| } | ||
|
|
||
| /** On the first page of a wizard, we may not want to display a back button. */ | ||
| export const WithoutBackButton = { | ||
| args: { | ||
| section: 'Learning Profile', | ||
| currentStep: 3, | ||
| totalSteps: 65 | ||
| } | ||
| }; | ||
|
|
27 changes: 27 additions & 0 deletions
27
src/components/sharpen-wizard-header/sharpen-wizard-header.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { Component, Host, Prop, h } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'sharpen-wizard-header', | ||
| styleUrl: 'sharpen-wizard-header.scss' | ||
| }) | ||
| export class SharpenWizardHeader { | ||
|
|
||
| @Prop() section!: string; | ||
| @Prop() currentStep!: number; | ||
| @Prop() totalSteps!: number; | ||
| @Prop() backHref: string; | ||
|
|
||
| render() { | ||
| const backButton = (this.backHref ? <a href={this.backHref}><i class="sharpen-icon">arrow_back</i></a> : ''); | ||
|
|
||
| return ( | ||
| <Host> | ||
| <nav class="sharpen-mb-sm"> | ||
| {backButton}<h1 class="sharpen-heading-sm">{this.section}</h1> | ||
| </nav> | ||
| <sharpen-progress-bar progress-val={this.currentStep} high-threshold={this.totalSteps} low-threshold={this.totalSteps} elevated-threshold={this.totalSteps}></sharpen-progress-bar> | ||
| </Host> | ||
| ); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { Canvas, Meta } from '@storybook/blocks'; | ||
| import * as WizardStories from './wizard.stories'; | ||
|
|
||
| <Meta of={WizardStories} /> | ||
|
|
||
| # Onboarding Wizard | ||
|
|
||
| ## Radio Question | ||
|
|
||
| * Note that, in this example, the wizard header is not configured with a | ||
| `back-href` attribute since it is the first question and thus no back button | ||
| should be displayed. | ||
| * Radio questions, unless specified otherwise, should be built to save the | ||
| user's answer and advance to the next question automatically when an option | ||
| is clicked. | ||
|
|
||
| <Canvas of={WizardStories.RadioQuestion} sourceState="hidden" /> | ||
|
|
||
| ## Checkbox Question | ||
|
|
||
| * Because checkbox questions allow the user to select 0, 1, or more options, | ||
| we display a submit button at the bottom and only advance to the next | ||
| question when the user clicks it. | ||
|
|
||
| <Canvas of={WizardStories.CheckboxQuestion} sourceState="hidden" /> | ||
|
|
||
| ## Email Question | ||
|
|
||
| * Even though the Wizard flow has a distinct style, it is still built on top of | ||
| Kezuri; therefore, we can use text input fields and show field-level | ||
| validations as usual. | ||
| * Because the we intend to keep the user focused on one goal during this wizard, | ||
| we try to avoid including links that might take the user elsewhere. We must, | ||
| however, provide access to the Terms and Privacy Policy. These links should | ||
| open in a new browser tab (i.e. `target="_blank"`), so that the wizard flow | ||
| does not get fully interrupted. | ||
|
|
||
| <Canvas of={WizardStories.EmailQuestion} sourceState="hidden" /> | ||
|
|
||
| ## Estimate | ||
|
|
||
| * Apply `sharpen-background--green` to the `body` tag so that the entire page | ||
| appears with the green background color. (Due to the limitations of | ||
| Storybook, the background class in the story below has been applied to the | ||
| container element.) | ||
| * This example uses chart.js to render a simple visualization of how the child | ||
| might progress over three months. | ||
|
|
||
| <Canvas of={WizardStories.Estimate} sourceState="hidden" /> | ||
|
|
||
| ## Personalized Course (i.e. Shopping Cart) | ||
|
|
||
| <Canvas of={WizardStories.PersonalizedCourse} sourceState="hidden" /> |
Oops, something went wrong.