Intelligence Community Design System

it('fills out values on the chooseCoffee page, tests for an error, and submits',async()=>{
        container.addEventListener("icChange", callbackFn);
// Check the current form step
const stepOne = container.querySelector('ic-step[step-title="Choose coffee"]')asHTMLIcStepElement;
expect(stepOne.stepType).toBe(stepStates.current);
// Select radio-option from ic-radio-group
const coffeeRadio = container.querySelector(
'ic-radio-option[value="house"]'
)asHTMLIcRadioOptionElement;
await user.click(coffeeRadio);
expect(callbackFn).toHaveBeenCalled();
expect(coffeeRadio.selected).toBe(true);
// Try submitting to see error state
const coffeeSubmit = screen.getByShadowTestId("coffee-submit-btn")asHTMLIcButtonElement;
await user.click(coffeeSubmit);
// ic-alert should be visible
const alert = container.querySelector('ic-alert')asHTMLIcAlertElement;
expect(alert).not.toBeNull();
// Select size from ic-select
const sizeSelect = container.querySelector('ic-select[label="Size"]')asHTMLIcSelectElement;
// await user.click(sizeSelect);
// find ic-menu in the shadowRoot of ic-select
const sizeMenuOption =awaitfindByShadowLabelText(sizeSelect,"250g")
await user.click(sizeMenuOption);
expect(callbackFn).toHaveBeenCalled();
// Submit first page of form
await user.click(coffeeSubmit);
expect(logSpy).toHaveBeenNthCalledWith(2,filledForm());
});

<IcPageHeader
heading="Customise your coffee subscription"
subheading="Choose your coffee, enter your details and checkout, easy as 1... 2... 3!"
size="small"
id="top"
sticky
aligned="center"
>
<IcChipslot="heading-adornment"label="V0.0.01"size="large"/>
<IcStepperslot="stepper">
<IcStep
stepTitle="Choose coffee"
stepType={handleSteps(formSteps.chooseCoffee)}
/>
<IcStep
stepTitle="Enter Details"
stepType={handleSteps(formSteps.enterDetails)}
/>
<IcStep
stepTitle="Checkout"
stepType={handleSteps(formSteps.checkout)}
/>
</IcStepper>
</IcPageHeader>
<IcBackToToptarget="top"/>
<formonSubmit={handleSubmit}>
{formSteps.chooseCoffee.current&&(
<IcSectionContaineraligned="left">
{formValidation &&(
<IcAlert
variant="error"
heading="Error"
message="Please fill in all required fields"
announced
/>
)}
<IcTypographyvariant="subtitle-large">
          Please choose your coffee
</IcTypography>
<IcTypographyvariant="body"maxLines={2}>
          Sip back and relax as we embark on a journey through the aromatic
          fields of coffee-inspired lorem ipsum. In the heart of a lush,
          verdant valley kissed by the golden hues of dawn, there lies a
          quaint little plantation where the beans of legend are nurtured.
          Each bean, a tiny vessel of dreams and whispers of faraway lands,
          cradled in the earth's embrace until it bursts forth with a
          promise of warmth and vigor.
</IcTypography>
<divclassName="input-container">
<IcRadioGroup
name="radio-group-1"
label="What variety of coffee would you like?"
helperText="House blend is the default option"
size="small"
required
onIcChange={(ev)=>
handleChange("coffeeForm","variety", ev.detail.value)
}
{...(formValidation&&
formValues.coffeeForm.variety===""&&{
validationText:"Pleasechooseanoption",
validationStatus:"error",
})}
>
<IcRadioOption
value="house"
label="House Blend"
selected={formValues.coffeeForm.variety==="house"}
/>
<IcRadioOption
value="liberica"
label="Liberica"
selected={formValues.coffeeForm.variety==="liberica"}
/>
<IcRadioOption
value="arabica"
label="Arabica"
selected={formValues.coffeeForm.variety==="arabica"}
/>
<IcRadioOption
value="mundo"
label="Mundo Nova"
selected={formValues.coffeeForm.variety==="mundo"}
/>
</IcRadioGroup>
</div>
<divclassName="input-container">
<IcSelect
label="Grind"
helperText="Please select a grind type"
name="grind-select"
options={grindOptions}
size="small"
className="input"
value={formValues.coffeeForm.grind}
onIcChange={(ev)=>
handleChange("coffeeForm","grind", ev.detail.value)
}
{...(formValidation&&
formValues.coffeeForm.grind===""&&{
validationText:"Pleasechooseagrindsize",
validationStatus:"error",
})}
/>
<IcSelect
label="Size"
helperText="Please select a bag size"
name="size-select"
required
options={sizeOptions}
size="small"
className="input"
value={formValues.coffeeForm.size}
onIcChange={(ev)=>
handleChange("coffeeForm","size", ev.detail.value)
}
{...(formValidation&&
formValues.coffeeForm.size===""&&{
validationText:"Pleasechooseasize",
validationStatus:"error",
})}
/>
</div>
<divclassName="input-container">
<IcButton
variant="primary"
className="button"
onClick={(ev)=>handleClick(ev, next)}
data-testid="coffee-submit-btn"
>
            Add to order
</IcButton>
</div>
</IcSectionContainer>
)}
{formSteps.enterDetails.current&&(
<IcSectionContaineraligned="left">
{formValidation &&(
<IcAlert
variant="error"
heading="Error"
message="Please fill in all required fields"
announced
/>
)}
<IcTypographyvariant="subtitle-large">
          Please enter your details
</IcTypography>
<IcTypographyvariant="body">
          Nearly there, we just need a few more details. Purchases must be
          made by an adult over the age of 18. We will never share your
          details with fourth parties.
</IcTypography>
<divclassName="input-container">
<IcTextField
label="Name"
name="name"
required
className="input"
size="small"
value={formValues.detailForm.name}
onIcChange={(ev)=>
handleChange("detailForm","name", ev.detail.value)
}
{...(formValidation&&
formValues.detailForm.name===""&&{
validationText:"Pleaseenteryourname",
validationStatus:"error",
})}
autoFocus
/>
<IcTextField
label="Email"
name="email"
type="email"
required
size="small"
className="input"
value={formValues.detailForm.email}
onIcInput={(ev)=>
handleChange("detailForm","email", ev.detail.value)
}
{...(formValidation&&
(formValues.detailForm.email===""||
!formValues.detailForm.email.includes("@"))&&{
validationText:"Pleaseenteranemail",
validationStatus:"error",
})}
data-test-id="email-text-field"
/>
<IcTextField
label="Phone"
name="phone"
type="number"
required
size="small"
className="input"
value={formValues.detailForm.phone}
onIcInput={(ev)=>
handleChange("detailForm","phone", ev.detail.value)
}
{...(formValidation&&
formValues.detailForm.phone===""&&{
validationText:
"Pleaseenteranumberonwhichwecancontactyou",
validationStatus:"error",
})}
/>
</div>
<divclassName="input-container">
<IcCheckboxGroup
name="signup"
onIcChange={(ev)=>
handleChange("detailForm","contact", ev.detail.value)
}
label="Sign up for notifications about future products?"
className="input"
>
<IcCheckbox
label="SMS"
name="sms"
value="sms"
checked={formValues.detailForm.contact.includes("sms")}
/>
<IcCheckbox
label="Email"
name="email"
value="email"
checked={formValues.detailForm.contact.includes("email")}
/>
</IcCheckboxGroup>
</div>
<divclassName="input-container"></div>
<divclassName="input-container">
<IcButton
variant="secondary"
onClick={(ev)=>handleClick(ev, back)}
className="button"
>
            Go Back
</IcButton>
<IcButton
variant="primary"
onClick={(ev)=>handleClick(ev, next)}
className="button"
data-testid="details-submit-btn"
>
            Add to order
</IcButton>
</div>
</IcSectionContainer>
)}
{formSteps.checkout.current&&(
<IcSectionContaineraligned="left">
{formValidation &&(
<IcAlert
variant="error"
heading="Error"
message="Please fill in all required fields"
announced
/>
)}
<IcTypographyvariant="subtitle-large">Last step!</IcTypography>
<IcTypographyvariant="body">
          Please choose a start date for your subscription and agree to the
          terms and conditions. Feel free to cancel your subscriptions at any time.
</IcTypography>
<divclassName="input-container">
<IcDatePicker
label="When would you like your subscription to start?"
className="input"
disablePast
required
size="small"
data-testid="date-picker"
value={formValues.checkoutForm.dateToStart}
onIcChange={(ev)=>
handleChange("checkoutForm","dateToStart", ev.detail.value)
}
{...(formValidation&&
formValues.checkoutForm.dateToStart===""&&{
validationText:"Pleasechooseadate",
validationStatus:"error",
})}
/>
</div>
<divclassName="input-container">
<IcRadioGroup
label="Please agree to the terms and conditions"
name="terms"
required
className="input"
size="small"
onIcChange={(ev)=>
handleChange("checkoutForm","terms", ev.detail.value)
}
{...(((formValidation&&
formValues.checkoutForm.terms==="")||
(formValidation&&
formValues.checkoutForm.terms==="decline"))&&{
validationText:"Pleaseagreetothetermsandconditions",
validationStatus:"error",
})}
>
<IcRadioOption
label="Agree"
name="agree"
value="agree"
selected={formValues.checkoutForm.terms==="agree"}
/>
<IcRadioOption
label="Decline"
name="decline"
value="decline"
selected={formValues.checkoutForm.terms==="decline"}
/>
</IcRadioGroup>
</div>
<divclassName="input-container">
<IcButton
variant="secondary"
onClick={(ev)=>handleClick(ev, back)}
className="button"
>
            Go Back
</IcButton>
<IcButton
variant="primary"
onClick={handleSubmit}
className="button"
>
            Submit order
</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToast
heading="Thanks for your order!"
ref={toastEl}
dismissMode="automatic"
autoDismissTimeout={3000}
variant="success"
onIcDismiss={()=>resetForm()}
/>
</IcToastRegion>
</div>
</IcSectionContainer>
)}
</form>

interfaceCoffeeForm{
variety: string;
grind: string;
size: string;
}
interfaceDetailForm{
name: string;
email: string;
phone: string;
contact: string[];
}
interfaceCheckoutForm{
dateToStart: string;
terms: string;
}
exportinterfaceFormValues{
coffeeForm:CoffeeForm;
detailForm:DetailForm;
checkoutForm:CheckoutForm;
}
exportinterfacechooseCoffee{
active: boolean;
completed: boolean;
current: boolean;
disabled: boolean;
}
exportinterfaceenterDetails{
active: boolean;
completed: boolean;
current: boolean;
disabled: boolean;
}
exportinterfacecheckout{
active: boolean;
completed: boolean;
current: boolean;
disabled: boolean;
}
exportinterfacestepTypes{
active: boolean;
completed: boolean;
current: boolean;
disabled: boolean;
}
exportinterfaceFormSteps{
chooseCoffee: chooseCoffee;
enterDetails: enterDetails;
checkout: checkout;
}

import{FormValues,FormSteps}from"./types";
exportconst grindOptions =[
{value:"whole",label:"Whole Bean (default)"},
{
value:"filter",
label:"Filter",
description:"A medium grind ideal for drip and pour-over methods",
},
{
value:"espresso",
label:"Espresso",
description:"The fine grind size ensures a slow, even extraction",
},
{value:"aeropress",label:"Aeropress"},
{
value:"cafetiere",
label:"Cafetiere",
description:
"Coarse grinds work best for brewing methods like the French press and cold brew",
},
];
exportconst sizeOptions =[
{value:"250",label:"250g"},
{value:"500",label:"500g"},
{value:"1000",label:"1000g"},
];
exportconst next ="next";
exportconst back ="back";
exportconstinitialFormValues:FormValues={
coffeeForm:{
variety:"",
grind:"whole",
size:"",
},
detailForm:{
name:"",
email:"",
phone:"",
contact:["",""],
},
checkoutForm:{
dateToStart:"",
terms:"",
},
};
exportconstinitialFormSteps:FormSteps={
chooseCoffee:{
active:true,
completed:false,
current:true,
disabled:false,
},
enterDetails:{
active:true,
completed:false,
current:false,
disabled:false,
},
checkout:{
active:true,
completed:false,
current:false,
disabled:false,
},
};

import{IcStepTypes}from"@ukic/web-components";
import{ stepTypes }from"./types";
exportconst handleSteps =(step: stepTypes):IcStepTypes|undefined=>{
return step.current
?("current"asIcStepTypes)
: step.completed
?("completed"asIcStepTypes)
: step.active
?("active"asIcStepTypes)
: step.disabled
?("disabled"asIcStepTypes)
:undefined;
};