From ea9b36e15e9ee10f4f5fd1b67a5516a759ed2814 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 2 Jan 2024 14:24:21 -0500 Subject: [PATCH 1/4] Bump postcss from 8.4.27 to 8.4.31 (#3) Bumps [postcss](https://github.com/postcss/postcss) from 8.4.27 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.27...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jonathan Abbett From 1b8ac2176bcfbb3079c8c2bbb15ffe3c13a2b5b9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 2 Jan 2024 14:27:13 -0500 Subject: [PATCH 2/4] Bump @babel/traverse from 7.22.8 to 7.23.2 (#5) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.8 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jonathan Abbett From 809e1e5007024d69d707536b36a74f6ecbc22539 Mon Sep 17 00:00:00 2001 From: Jonathan Abbett Date: Thu, 4 Jan 2024 12:24:28 -0500 Subject: [PATCH 3/4] - New "pages" section of Storybook for more comprehensive page-level examples - Added: sharpen-course-description - Added: sharpen-table--pricing - Added: sharpen-wizard-header - Added: Survey-style form inputs (radio, checkbox) - Prototype: Onboarding Wizard --- src/components.d.ts | 42 +++ src/components/sharpen-card/sharpen-card.scss | 3 +- .../sharpen-course-description.scss | 14 + .../sharpen-course-description.stories.ts | 23 ++ .../sharpen-course-description.tsx | 29 ++ .../sharpen-wizard-header.scss | 12 + .../sharpen-wizard-header.stories.ts | 43 +++ .../sharpen-wizard-header.tsx | 27 ++ src/index.html | 4 + src/pages/wizard.mdx | 53 ++++ src/pages/wizard.stories.ts | 281 ++++++++++++++++++ src/prototypes/onboarding-wizard/course.html | 88 ++++++ .../onboarding-wizard/estimate.html | 107 +++++++ src/prototypes/onboarding-wizard/index.html | 148 +++++++++ src/scss/container/container.scss | 6 + src/scss/form/form.mdx | 17 +- src/scss/form/form.scss | 30 ++ src/scss/form/form.stories.ts | 90 ++++++ src/scss/reset.scss | 3 + src/scss/spacing/spacing.scss | 2 + src/scss/table/table.scss | 18 ++ src/scss/table/table.stories.ts | 20 ++ src/scss/tokens/tokens.scss | 28 +- src/scss/typography/typography.scss | 6 + src/scss/typography/typography.stories.ts | 13 + 25 files changed, 1091 insertions(+), 16 deletions(-) create mode 100644 src/components/sharpen-course-description/sharpen-course-description.scss create mode 100644 src/components/sharpen-course-description/sharpen-course-description.stories.ts create mode 100644 src/components/sharpen-course-description/sharpen-course-description.tsx create mode 100644 src/components/sharpen-wizard-header/sharpen-wizard-header.scss create mode 100644 src/components/sharpen-wizard-header/sharpen-wizard-header.stories.ts create mode 100644 src/components/sharpen-wizard-header/sharpen-wizard-header.tsx create mode 100644 src/pages/wizard.mdx create mode 100644 src/pages/wizard.stories.ts create mode 100644 src/prototypes/onboarding-wizard/course.html create mode 100644 src/prototypes/onboarding-wizard/estimate.html create mode 100644 src/prototypes/onboarding-wizard/index.html diff --git a/src/components.d.ts b/src/components.d.ts index 80b350e..3dc5d32 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -54,6 +54,12 @@ export namespace Components { } interface SharpenCardHeader { } + interface SharpenCourseDescription { + /** + * Icon + */ + "icon": string; + } interface SharpenDashboardCard { "heading": string; "imgSrc": string; @@ -124,6 +130,12 @@ export namespace Components { "lowThreshold": number; "progressVal": number; } + interface SharpenWizardHeader { + "backHref": string; + "currentStep": number; + "section": string; + "totalSteps": number; + } } declare global { interface HTMLSharpenAlertElement extends Components.SharpenAlert, HTMLStencilElement { @@ -162,6 +174,12 @@ declare global { prototype: HTMLSharpenCardHeaderElement; new (): HTMLSharpenCardHeaderElement; }; + interface HTMLSharpenCourseDescriptionElement extends Components.SharpenCourseDescription, HTMLStencilElement { + } + var HTMLSharpenCourseDescriptionElement: { + prototype: HTMLSharpenCourseDescriptionElement; + new (): HTMLSharpenCourseDescriptionElement; + }; interface HTMLSharpenDashboardCardElement extends Components.SharpenDashboardCard, HTMLStencilElement { } var HTMLSharpenDashboardCardElement: { @@ -234,6 +252,12 @@ declare global { prototype: HTMLSharpenProgressDialElement; new (): HTMLSharpenProgressDialElement; }; + interface HTMLSharpenWizardHeaderElement extends Components.SharpenWizardHeader, HTMLStencilElement { + } + var HTMLSharpenWizardHeaderElement: { + prototype: HTMLSharpenWizardHeaderElement; + new (): HTMLSharpenWizardHeaderElement; + }; interface HTMLElementTagNameMap { "sharpen-alert": HTMLSharpenAlertElement; "sharpen-assessment-header": HTMLSharpenAssessmentHeaderElement; @@ -241,6 +265,7 @@ declare global { "sharpen-card": HTMLSharpenCardElement; "sharpen-card-content": HTMLSharpenCardContentElement; "sharpen-card-header": HTMLSharpenCardHeaderElement; + "sharpen-course-description": HTMLSharpenCourseDescriptionElement; "sharpen-dashboard-card": HTMLSharpenDashboardCardElement; "sharpen-empty": HTMLSharpenEmptyElement; "sharpen-footer": HTMLSharpenFooterElement; @@ -253,6 +278,7 @@ declare global { "sharpen-profile-card": HTMLSharpenProfileCardElement; "sharpen-progress-bar": HTMLSharpenProgressBarElement; "sharpen-progress-dial": HTMLSharpenProgressDialElement; + "sharpen-wizard-header": HTMLSharpenWizardHeaderElement; } } declare namespace LocalJSX { @@ -296,6 +322,12 @@ declare namespace LocalJSX { } interface SharpenCardHeader { } + interface SharpenCourseDescription { + /** + * Icon + */ + "icon"?: string; + } interface SharpenDashboardCard { "heading": string; "imgSrc": string; @@ -366,6 +398,12 @@ declare namespace LocalJSX { "lowThreshold"?: number; "progressVal"?: number; } + interface SharpenWizardHeader { + "backHref"?: string; + "currentStep": number; + "section": string; + "totalSteps": number; + } interface IntrinsicElements { "sharpen-alert": SharpenAlert; "sharpen-assessment-header": SharpenAssessmentHeader; @@ -373,6 +411,7 @@ declare namespace LocalJSX { "sharpen-card": SharpenCard; "sharpen-card-content": SharpenCardContent; "sharpen-card-header": SharpenCardHeader; + "sharpen-course-description": SharpenCourseDescription; "sharpen-dashboard-card": SharpenDashboardCard; "sharpen-empty": SharpenEmpty; "sharpen-footer": SharpenFooter; @@ -385,6 +424,7 @@ declare namespace LocalJSX { "sharpen-profile-card": SharpenProfileCard; "sharpen-progress-bar": SharpenProgressBar; "sharpen-progress-dial": SharpenProgressDial; + "sharpen-wizard-header": SharpenWizardHeader; } } export { LocalJSX as JSX }; @@ -397,6 +437,7 @@ declare module "@stencil/core" { "sharpen-card": LocalJSX.SharpenCard & JSXBase.HTMLAttributes; "sharpen-card-content": LocalJSX.SharpenCardContent & JSXBase.HTMLAttributes; "sharpen-card-header": LocalJSX.SharpenCardHeader & JSXBase.HTMLAttributes; + "sharpen-course-description": LocalJSX.SharpenCourseDescription & JSXBase.HTMLAttributes; "sharpen-dashboard-card": LocalJSX.SharpenDashboardCard & JSXBase.HTMLAttributes; "sharpen-empty": LocalJSX.SharpenEmpty & JSXBase.HTMLAttributes; "sharpen-footer": LocalJSX.SharpenFooter & JSXBase.HTMLAttributes; @@ -409,6 +450,7 @@ declare module "@stencil/core" { "sharpen-profile-card": LocalJSX.SharpenProfileCard & JSXBase.HTMLAttributes; "sharpen-progress-bar": LocalJSX.SharpenProgressBar & JSXBase.HTMLAttributes; "sharpen-progress-dial": LocalJSX.SharpenProgressDial & JSXBase.HTMLAttributes; + "sharpen-wizard-header": LocalJSX.SharpenWizardHeader & JSXBase.HTMLAttributes; } } } diff --git a/src/components/sharpen-card/sharpen-card.scss b/src/components/sharpen-card/sharpen-card.scss index 5986248..4fd3256 100644 --- a/src/components/sharpen-card/sharpen-card.scss +++ b/src/components/sharpen-card/sharpen-card.scss @@ -37,4 +37,5 @@ sharpen-card-content { &[padding="medium"] { padding: var(--spacing-md); } &[padding="large"] { padding: var(--spacing-lg); } &[padding="xl"] { padding: var(--spacing-xl); } -} \ No newline at end of file +} + diff --git a/src/components/sharpen-course-description/sharpen-course-description.scss b/src/components/sharpen-course-description/sharpen-course-description.scss new file mode 100644 index 0000000..2dbcaee --- /dev/null +++ b/src/components/sharpen-course-description/sharpen-course-description.scss @@ -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); } +} \ No newline at end of file diff --git a/src/components/sharpen-course-description/sharpen-course-description.stories.ts b/src/components/sharpen-course-description/sharpen-course-description.stories.ts new file mode 100644 index 0000000..e0c4159 --- /dev/null +++ b/src/components/sharpen-course-description/sharpen-course-description.stories.ts @@ -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) => ` +
  • Start at Sharpen Level B1
    • +
  • Easily read texts at a Grade 1 level by February 28.
    • +
  • Build increased confidence in reading.
    • +    ` +}; + +export const Example = { }; \ No newline at end of file diff --git a/src/components/sharpen-course-description/sharpen-course-description.tsx b/src/components/sharpen-course-description/sharpen-course-description.tsx new file mode 100644 index 0000000..785e3ae --- /dev/null +++ b/src/components/sharpen-course-description/sharpen-course-description.tsx @@ -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 ( + + + {this.icon} +
    +
      + +
    +
    +     +     + ); + } + +} diff --git a/src/components/sharpen-wizard-header/sharpen-wizard-header.scss b/src/components/sharpen-wizard-header/sharpen-wizard-header.scss new file mode 100644 index 0000000..376c8d9 --- /dev/null +++ b/src/components/sharpen-wizard-header/sharpen-wizard-header.scss @@ -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; } + } +} \ No newline at end of file diff --git a/src/components/sharpen-wizard-header/sharpen-wizard-header.stories.ts b/src/components/sharpen-wizard-header/sharpen-wizard-header.stories.ts new file mode 100644 index 0000000..51e99f5 --- /dev/null +++ b/src/components/sharpen-wizard-header/sharpen-wizard-header.stories.ts @@ -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) => `` +}; + +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 + } +}; + diff --git a/src/components/sharpen-wizard-header/sharpen-wizard-header.tsx b/src/components/sharpen-wizard-header/sharpen-wizard-header.tsx new file mode 100644 index 0000000..9c29259 --- /dev/null +++ b/src/components/sharpen-wizard-header/sharpen-wizard-header.tsx @@ -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 ? arrow_back : ''); + + return ( + + + + + ); + } + +} diff --git a/src/index.html b/src/index.html index 373667f..19a6c19 100644 --- a/src/index.html +++ b/src/index.html @@ -33,6 +33,10 @@

    prototypes.sharpen.com

    + + Onboarding Wizard + Dec 2023 + Responsive Primary Navigation Dec 2023 diff --git a/src/pages/wizard.mdx b/src/pages/wizard.mdx new file mode 100644 index 0000000..dc2e117 --- /dev/null +++ b/src/pages/wizard.mdx @@ -0,0 +1,53 @@ +import { Canvas, Meta } from '@storybook/blocks'; +import * as WizardStories from './wizard.stories'; + + + +# 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. + + + +## 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. + + + +## 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. + + + +## 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. + + + +## Personalized Course (i.e. Shopping Cart) + + \ No newline at end of file diff --git a/src/pages/wizard.stories.ts b/src/pages/wizard.stories.ts new file mode 100644 index 0000000..a4332f3 --- /dev/null +++ b/src/pages/wizard.stories.ts @@ -0,0 +1,281 @@ +export default { + title: 'Pages/Onboarding Wizard' +}; + +export const RadioQuestion = { + render: () => ` +
    + + + +
    + +
    +

    What is your child’s current grade in school?

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    + +
    +` +} + +export const CheckboxQuestion = { + render: () => ` +
    + + + +
    + +
    +

    Has your child ever been formally diagnosed with a learning disability?

    +

    Check all that apply.

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + +
    + +
    +` +} + +export const EmailQuestion = { + render: () => ` +
    + + + +
    + +
    +

    Enter your email address to see when Sharpen Reading can get your child to achieve grade-level reading.

    +
    + +
    + +
    Enter a valid email address.
    +
    + + See my result + +
    +

    Sharpen ensures the confidentiality of all information you provide. We will e-mail you a copy of your result.

    +

    By clicking "See my result," you acknowledge that you have read, understood, and accepted the Terms of Service and Privacy Policy.

    +
    + +
    + +
    +` +} + +export const Estimate = { + render: () => ` + + +
    + +
    +
    We estimate your child will
    + improve by 1 grade level by
    +

    February 28

    + +
    + +
    +

    Great news! Based on Sharpen families like yours who do 3 lessons per week, we estimate your child will improve a full grade level by February 28.

    +

    Next, answers some questions about your child’s skills so we can start Sharpen Reading at just the right level.

    +
    + + Next + +
    + + +` +} + +export const PersonalizedCourse = { + render: () => ` +
    +
    + Jurickson's
    + 3-month personalized course +
    +
    + +
    + + +
  • Start at Sharpen Level B1
    • +
  • Easily read texts at a Grade 1 level by February 28.
    • +
  • Build increased confidence in reading.
    • +     + +

    Course Highlights

    +
      +
    • Evidence-based curriculum
      • +
    • Flexible, parent-led scripted lessons
      • +
    • 15–30 minute lessons, 3–4 times per week, on your schedule
      • +
    • Over 35 fun digital activities
      • +
    + + + + + + + + + + + + + + +
    Price Today
    14-day trial$0.00
    + + + + + + + + + + + + + + +
    Price After Trial
    + 3-month plan +
    $19.99/month
    +     		$59.97
    + + We'll bill you on December 7 unless you cancel before then. You'll receive a reminder email before your trial ends. Cancel your trial anytime. + + + +
    +` +} diff --git a/src/prototypes/onboarding-wizard/course.html b/src/prototypes/onboarding-wizard/course.html new file mode 100644 index 0000000..8e50512 --- /dev/null +++ b/src/prototypes/onboarding-wizard/course.html @@ -0,0 +1,88 @@ + + + + + + Sharpen Prototype: Onboarding + + + + + + + +
    +
    + Jurickson's
    + 3-month personalized course +
    +
    + +
    + + +
  • Start at Sharpen Level B1
    • +
  • Easily read texts at a Grade 1 level by February 28.
    • +
  • Build increased confidence in reading.
    • +     + +

    Course Highlights

    +
      +
    • Evidence-based curriculum
      • +
    • Flexible, parent-led scripted lessons
      • +
    • 15–30 minute lessons, 3–4 times per week, on your schedule
      • +
    • Over 35 fun digital activities
      • +
    + + + + + + + + + + + + + + +
    Price Today
    14-day trial$0.00
    + + + + + + + + + + + + + + +
    Price After Trial
    + 3-month plan +
    $19.99/month
    +     		$59.97
    + + We'll bill you on December 7 unless you cancel before then. You'll receive a reminder email before your trial ends. Cancel your trial anytime. + + + + + +
    + + + diff --git a/src/prototypes/onboarding-wizard/estimate.html b/src/prototypes/onboarding-wizard/estimate.html new file mode 100644 index 0000000..bb6e8f5 --- /dev/null +++ b/src/prototypes/onboarding-wizard/estimate.html @@ -0,0 +1,107 @@ + + + + + + Sharpen Prototype: Onboarding + + + + + + + + +
    + +
    +
    We estimate your child will
    + improve by 1 grade level by
    +

    February 28

    + +
    + +
    +

    Great news! Based on Sharpen families like yours who do 3 lessons per week, we estimate your child will improve a full grade level by February 28.

    +

    Next, answers some questions about your child’s skills so we can start Sharpen Reading at just the right level.

    +
    + + Next + +
    + + + + + + diff --git a/src/prototypes/onboarding-wizard/index.html b/src/prototypes/onboarding-wizard/index.html new file mode 100644 index 0000000..6235b2d --- /dev/null +++ b/src/prototypes/onboarding-wizard/index.html @@ -0,0 +1,148 @@ + + + + + + Sharpen Prototype: Onboarding + + + + + + + +
    + + + +
    + +
    +

    What is your child’s current grade in school?

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    + +
    + + + +
    + +
    +

    What aspect of reading does your child struggle with the most?

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    + +
    + +
    + +
    +

    Has your child ever been formally diagnosed with a learning disability?

    +

    Check all that apply.

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + +
    + +
    +

    Enter your email address to see when Sharpen Reading can get your child to achieve grade-level reading.

    +
    + +
    + +
    + + See my result + +
    +

    Sharpen ensures the confidentiality of all information you provide. We will e-mail you a copy of your result.

    +

    By clicking "See my result," you acknowledge that you have read, understood, and accepted the Terms of Service and Privacy Policy.

    +
    + +
    + +
    + + + + + diff --git a/src/scss/container/container.scss b/src/scss/container/container.scss index 85258e1..d6af647 100644 --- a/src/scss/container/container.scss +++ b/src/scss/container/container.scss @@ -14,4 +14,10 @@ main { padding: var(--spacing-lg) 0; +} + +.sharpen-wizard-container { + padding: var(--spacing-lg); + max-width: 30rem; + margin: 0 auto; } \ No newline at end of file diff --git a/src/scss/form/form.mdx b/src/scss/form/form.mdx index 8fad10d..1f63220 100644 --- a/src/scss/form/form.mdx +++ b/src/scss/form/form.mdx @@ -90,4 +90,19 @@ When you need to present a legal document to a user for their review and approval, use the `sharpen-form-document` class to contain it within a nicely-styled scrollable box. - \ No newline at end of file + + +## Survey-style form questions + +In surveys, wizards, and assessments, where users are providing mostly +one-click responses to questions, we use a button style of radio and checkbox +input that's easier to click and can hold multiple lines of text. + +### Horizontal questions + + + +### Vertical questions + + + \ No newline at end of file diff --git a/src/scss/form/form.scss b/src/scss/form/form.scss index 1def424..19b01ed 100644 --- a/src/scss/form/form.scss +++ b/src/scss/form/form.scss @@ -155,6 +155,36 @@ &:hover { background-color: var(--color-putty); } } + &.sharpen-form-survey-column { + display: block; + + label { + display: block; + width: 100%; + height: auto; + border: none; + background-color: var(--color-ivory); + font-size: var(--font-size-sm); + + &:hover { background-color: var(--color-mint); } + } + + .sharpen-form-survey-option + .sharpen-form-survey-option { + margin-top: 0.75em; + } + + input[type="checkbox"] { + float: left; + width: 2em; + height: 2em; + margin: 1em; + } + + input[type="checkbox"] + label { + text-align: left; + } + } + input[type="radio"] { display: flex; appearance: none; diff --git a/src/scss/form/form.stories.ts b/src/scss/form/form.stories.ts index e83b9d7..a2c0baa 100644 --- a/src/scss/form/form.stories.ts +++ b/src/scss/form/form.stories.ts @@ -182,3 +182,93 @@ export const FormDocument = { ` } + +export const SurveyHorizontal = { + name: 'Survey Style: Horizontal', + render: () => `
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    ` +} + +export const SurveyVerticalRadio = { + name: 'Survey Style: Vertical Radio', + render: () => `
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    ` +} + +export const SurveyVerticalCheckbox = { + name: 'Survey Style: Vertical Checkbox', + render: () => `
    +
    + + +
    +
    + + +
    +
    + + +
    +
    ` +} \ No newline at end of file diff --git a/src/scss/reset.scss b/src/scss/reset.scss index 9412ce9..dc9d3ba 100644 --- a/src/scss/reset.scss +++ b/src/scss/reset.scss @@ -14,6 +14,9 @@ body { -moz-osx-font-smoothing: grayscale; } +.sharpen-background--green { background-color: var(--color-mint); } +.sharpen-background--white { background-color: white; } + a { color: var(--color-pine); } diff --git a/src/scss/spacing/spacing.scss b/src/scss/spacing/spacing.scss index a14185d..97fc61f 100644 --- a/src/scss/spacing/spacing.scss +++ b/src/scss/spacing/spacing.scss @@ -1,4 +1,6 @@ /* Margin */ +.sharpen-mx-auto { margin-left: auto; margin-right: auto; } + .sharpen-m-0 { margin: 0 !important; } .sharpen-mt-0 { margin-top: 0 !important; } .sharpen-mr-0 { margin-right: 0 !important; } diff --git a/src/scss/table/table.scss b/src/scss/table/table.scss index 7178587..4451139 100644 --- a/src/scss/table/table.scss +++ b/src/scss/table/table.scss @@ -20,4 +20,22 @@ .sharpen-table-hover { tbody tr:hover { background-color: var(--color-gray-5); } +} + +// +// Pricing Table +// + +.sharpen-table--pricing { + tr > :first-child { padding-left: 0; } + tr > :last-child { padding-right: 0; } + + thead { + text-transform: uppercase; + font-size: var(--font-size-xs); + } + + tbody td:last-child { + text-align: right; + } } \ No newline at end of file diff --git a/src/scss/table/table.stories.ts b/src/scss/table/table.stories.ts index e128bd5..6f29d2b 100644 --- a/src/scss/table/table.stories.ts +++ b/src/scss/table/table.stories.ts @@ -54,4 +54,24 @@ export default { export const Example = { args: { } +} + +export const PricingTable = { + render: () => ` + + + + + + + + + + + + +
    Price After Trial
    + 3-month plan +
    $19.99/month
    +     		$59.97
    ` } \ No newline at end of file diff --git a/src/scss/tokens/tokens.scss b/src/scss/tokens/tokens.scss index 8707db3..f566eee 100644 --- a/src/scss/tokens/tokens.scss +++ b/src/scss/tokens/tokens.scss @@ -3,21 +3,21 @@ * @tokens Colors * @presenter Color */ - --color-evergreen: #2C5652; - --color-pine: #31776C; - --color-mint: #C8EBD7; - --color-sky: #BFE5F0; - --color-sunrise: #FCE7AE; - --color-ivory: #FDF6EC; - --color-putty: #FFFBF6; + --color-evergreen: #2C5652; + --color-pine: #31776C; // 49, 119, 108 + --color-mint: #C8EBD7; + --color-sky: #BFE5F0; + --color-sunrise: #FCE7AE; + --color-ivory: #FDF6EC; + --color-putty: #FFFBF6; - --color-black: #000000; - --color-gray-1: #626262; - --color-gray-2: #9D9D9D; - --color-gray-3: #AEAEAE; - --color-gray-4: #E6E6E6; - --color-gray-5: #F5F5F5; - --color-white: #FFFFFF; + --color-black: #000000; + --color-gray-1: #626262; + --color-gray-2: #9D9D9D; + --color-gray-3: #AEAEAE; + --color-gray-4: #E6E6E6; + --color-gray-5: #F5F5F5; + --color-white: #FFFFFF; --color-red: #D05050; --color-dark-red: #A11B1B; diff --git a/src/scss/typography/typography.scss b/src/scss/typography/typography.scss index d25b0ce..a35ba2e 100644 --- a/src/scss/typography/typography.scss +++ b/src/scss/typography/typography.scss @@ -122,6 +122,12 @@ strong { font-weight: var(--font-weight-semibold); } color: var(--color-gray-1); } +.sharpen-text--inverse { + background-color: var(--color-pine); + color: white; +} + + // // List styles // diff --git a/src/scss/typography/typography.stories.ts b/src/scss/typography/typography.stories.ts index c7dc81c..00a26a0 100644 --- a/src/scss/typography/typography.stories.ts +++ b/src/scss/typography/typography.stories.ts @@ -167,6 +167,19 @@ export const MutedText = { ` } +/** + * Use inverse text to put white text on a pine background, like in this example + * from the end of our onboarding wizard. + */ +export const InverseText = { + render: () => `
    +
    + Jurickson's
    + 3-month personalized course +
    +
    ` +} + /** * Add the `sharpen-list` class to an `ol` or `ul` to get appropriate list-item * spacing. Margins between lists is your responsibility, unless you lists are From 8c3d508c8bf79d63f23976ccc31de8c6fcaafbf5 Mon Sep 17 00:00:00 2001 From: Jonathan Abbett Date: Thu, 4 Jan 2024 12:34:55 -0500 Subject: [PATCH 4/4] Bumped version number --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9d18366..6c7fc35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@sharpen-com/kezuri", - "version": "0.5.2", + "version": "0.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@sharpen-com/kezuri", - "version": "0.5.2", + "version": "0.6.0", "license": "MIT", "dependencies": { "@stencil/core": "^4.8.1", diff --git a/package.json b/package.json index 16c4411..41991ee 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@sharpen-com/kezuri", "description": "The Sharpen Design System", "license": "MIT", - "version": "0.5.2", + "version": "0.6.0", "main": "dist/index.cjs.js", "module": "dist/index.js", "es2015": "dist/esm/index.mjs",