Skip to content

Commit

Permalink
Add Prefill Pattern Components to Storybook (#1361)
Browse files Browse the repository at this point in the history 
* Added prefill alert and pattern

* Added usage examples with locked card, fixed unauthenticated alert

* Added padding in the usage examples

* Updated all instances of unlocked & locked with editable & uneditable

* Addressed PR comments, cleaned up code, removed unneeded props from alerts, used a tags with va-link & va-link-action

* Deleted all instances of data-testid and schemaform classes

---------

Co-authored-by: Belle P <[email protected]>
  • Loading branch information
@bellepx0
bellepx0 and Belle P authored Oct 22, 2024
1 parent d86b902 commit ad2c161
Show file tree
Hide file tree
Showing 6 changed files with 462 additions and 6 deletions.
109 changes: 109 additions & 0 deletions packages/storybook/stories/pattern-prefill/va-card.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
/* eslint-disable react/prop-types */
import React from 'react';
import { getWebComponentDocs, StoryDocs } from '../wc-helpers';

const cardDocs = getWebComponentDocs('va-card');

export default {
title: 'Patterns/Prefill/Components/Card',
id: 'patterns/components/card',
parameters: {
componentSubtitle: 'Prefill card variations',
docs: {
page: () => <StoryDocs storyDefault={Editable} data={cardDocs} />,
},
},
};

const defaultArgs = {
'show-shadow': false,
'background': false,
'canEdit': false,
};

const Template = ({
'show-shadow': showShadow,
'background': background,
canEdit,
}) => (
<va-card show-shadow={showShadow} background={background} class="hydrated">
<div class="vads-u-padding-left--1 vads-u-padding-y--1">
<dl class="vads-u-padding-y--0 vads-u-margin-y--0">
<div class="vads-u-margin-bottom--2">
<dt class="vads-u-visibility--screen-reader">Full name:</dt>
<dd
class="vads-u-font-weight--bold dd-privacy-mask vads-u-font-family--serif"
data-dd-action-name="Full name"
>
Maverick P Mitchell
</dd>
</div>
<div class="vads-u-margin-bottom--2">
<dt class="vads-u-display--inline-block vads-u-font-weight--bold vads-u-margin-right--0p5">
Social Security:
</dt>
<dd
class="vads-u-display--inline-block dd-privacy-mask vads-u-font-family--sans"
data-dd-action-name="Social Security:"
>
<span>
<span aria-hidden="true">●●●–●●–8321</span>
<span class="sr-only">ending with 8 3 2 1</span>
</span>
</dd>
</div>
<div>
<dt class="vads-u-display--inline-block vads-u-margin-right--0p5 vads-u-font-weight--bold">
Date of birth:
</dt>
<dd
class="dd-privacy-mask medium-screen:vads-u-display--inline-block vads-u-display--none"
data-dd-action-name="Date of birth"
>
March 04, 1949
</dd>
<dd
class="dd-privacy-mask vads-u-display--inline-block medium-screen:vads-u-display--none"
data-dd-action-name="Date of birth"
>
Mar 04, 1949
</dd>
</div>
<div>
<dt class="vads-u-display--inline-block vads-u-margin-right--0p5 vads-u-font-weight--bold vads-u-margin-top--2">
Gender:
</dt>
<dd
class="vads-u-display--inline-block dd-privacy-mask"
data-dd-action-name="Gender"
>
Male
</dd>
</div>
</dl>
{!canEdit && (
<div class="vads-u-margin-y--1">
<va-link
active
label="Edit mailing address"
href="/mock-form-ae-design-patterns/1/task-yellow/veteran-information/edit-mailing-address"
text="Edit"
/>
</div>
)}
</div>
</va-card>
);

export const Editable = Template.bind(null);
Editable.args = {
...defaultArgs,
canEdit: false,
};

export const Uneditable = Template.bind(null);
Uneditable.args = {
...defaultArgs,
background: true,
canEdit: true,
};
104 changes: 104 additions & 0 deletions packages/storybook/stories/pattern-prefill/va-prefill-alert-with-editable-card.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import React from 'react';
import {
VaAlert,
} from '@department-of-veterans-affairs/web-components/react-bindings';

export default {
title: 'Patterns/Prefill/Usage Examples/Prefill alert with editable card',
id: 'patterns/va-prefill-alert-with-editable-card',
parameters: {
componentSubtitle: 'va prefill alert with editable card',
},
};

const Template = ({
slim,
status,
headline,
children,
}) => {
return (
<>
<div style={{ padding: '20px' }}>
<div>
<h1 data-testid="form-title">
Update your VA health benefits information
</h1>
<div>
Health Benefits Update Form (VA Form 10-10EZR)
</div>
</div>
<div className="vads-u-padding-top--3">
<va-segmented-progress-bar
current={1}
heading-text="Veteran Information"
total={5}
/>
</div>
<div class="nav-header">
<div class="vads-u-font-size--h4">
<span class="vads-u-display--block vads-u-font-family--sans vads-u-font-weight--normal vads-u-font-size--base">
We’ll save your application on every change.{' '}
</span>
</div>
</div>
<div className="vads-u-padding-y--2">
<VaAlert
slim={slim}
status={status}
>
{headline}
{children}
</VaAlert>
</div>
<h3>Mailing address</h3>
<p>
We’ll send any important information about your application to this
address.
</p>
<va-card background="false" class="vads-u-padding-left--3 hydrated">
<p class="vads-u-font-weight--bold vads-u-font-family--serif vads-u-margin-y--1">
Current mailing address
</p>
<div
class="dd-privacy-hidden vads-u-padding-bottom--1"
data-dd-action-name="street"
>
123 Mailing Address St.
</div>
<div
class="dd-privacy-hidden"
data-dd-action-name="city, state and zip code"
>
Fulton, NY 97063
</div>
<div class="vads-u-margin-y--1">
<va-link
active
label="Edit mailing address"
href="/mock-form-ae-design-patterns/1/task-yellow/veteran-information/edit-mailing-address"
text="Edit"
/>
</div>
</va-card>
</div>
</>
);
};

const defaultArgs = {
'slim': true,
'status': 'info',
'children': (
<p className="vads-u-margin-y--0">
<strong>Note:</strong> We've prefilled some of your information from your
account. If you need to correct anything, you can select edit below. All
updates will be made only to this form.
</p>
),
};

export const Default = Template.bind(null);
Default.args = {
...defaultArgs,
};
122 changes: 122 additions & 0 deletions packages/storybook/stories/pattern-prefill/va-prefill-alert.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import React from 'react';
import { VaAlert } from '@department-of-veterans-affairs/web-components/react-bindings';
import { getWebComponentDocs, propStructure, StoryDocs } from '../wc-helpers';

const alertDocs = getWebComponentDocs('va-alert');
// Remove backgroundOnly prop, this code and prop should be removed with the v1 version
alertDocs.props = alertDocs.props.filter(
prop => prop.name !== 'backgroundOnly',
);

export default {
title: 'Patterns/Prefill/Components/Prefill Alert',
id: 'patterns/components/prefill-alert',
argTypes: {
headline: {
table: {
disable: true,
},
},
children: {
table: {
disable: true,
},
},
},
parameters: {
componentSubtitle: 'va prefill alert',
docs: {
page: () => (
<StoryDocs storyDefault={SignedInPrefillAlert} data={alertDocs} />
),
},
},
};

// Fix for displaying component name when using bindings in 'Show code'
VaAlert.displayName = 'VaAlert';

const defaultArgs = {
'slim': false,
'status': 'info',
'children': (
<p className="vads-u-margin-y--0">
<strong>Note:</strong> Since you’re signed in to your account, we can
prefill part of your form based on your account details. You can also save
your form in progress and come back later to finish filling it out.
</p>
),
};

const Template = ({
slim,
status,
headline,
children,
}) => {
return (
<va-alert
slim={slim}
status={status}
>
{headline}
{children}
</va-alert>
);
};


export const SignedInPrefillAlert = Template.bind(null);
SignedInPrefillAlert.args = {
...defaultArgs,
};
SignedInPrefillAlert.argTypes = propStructure(alertDocs);

export const UnauthenticatedPrefillAlert = Template.bind(null);
UnauthenticatedPrefillAlert.args = {
...defaultArgs,
headline: (
<h2 slot="headline">
Sign in now to save time and save your work in progress
</h2>
),
children: (
<div>
<p className="vads-u-margin-top--2">
Here’s how signing in now helps you:
</p>
<ul>
<li>
We can fill in some of your information for you to save you time.
</li>
<li>
You can save your work in progress. You’ll have 60 days from when you
start or make updates to your application to come back and finish it.
</li>
</ul>
<p>
<strong>Note:</strong> You can sign in after you start your application.
But you'll lose any information you already filled in.
</p>
<va-button text="Sign in to start your application" />
<p>
<va-link
href="#start"
text="Start your application without signing in"
/>
</p>
</div>
),
};

export const PrefilledInfoAlert = Template.bind(null);
PrefilledInfoAlert.args = {
...defaultArgs,
children: (
<p className="vads-u-margin-y--0">
<strong>Note:</strong> We've prefilled some of your information from your
account. If you need to correct anything, you can select edit below. All
updates will be made only to this form.
</p>
),
};
Loading

0 comments on commit ad2c161

Please sign in to comment.