Intelligence Community Design System

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="default-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
heading="Are you sure?"
label="Coffee order"
open={openDialog}
// Set state to false if dismiss button is clicked
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want
    to continue?
</IcTypography>
</IcDialog>

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="size-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch sizes dialog</IcButton>
<IcDialog
size="large"// "small" | "medium" | "large"
open={openDialog}
label="Coffee order"
heading="Are you sure?"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want to
    continue?
</IcTypography>
</IcDialog>

<ic-buttononclick="showDialog('#status-dialog')">Launch status dialog</ic-button>
<ic-dialog
id="status-dialog"
heading="Are you sure?"
label="Coffee order"
size="medium"
>
<ic-alert
slot="alert"
heading="They're both good"
message="Some say tea is just as good as coffee."
variant="neutral"
title-above="true"
>
</ic-alert>
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButton
variant="primary"
onClick={handleDialogOpen}
>
  Launch status dialog
</IcButton>
<IcDialog
open={openDialog}
heading="Are you sure?"
label="Coffee order"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
size="medium"
>
<IcAlert
slot="alert"
heading="They're both good"
message="Some say tea is just as good as coffee."
variant="neutral"// "neutral" | "info" | "warn" | "error" | "success" 
titleAbove
/>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want
    to continue?
</IcTypography>
</IcDialog>

<ic-buttononclick="showDialog('#no-button-dialog')">Launch no button dialog</ic-button>
<ic-buttononclick="showDialog('#single-button-dialog')">Launch single button dialog</ic-button>
<ic-buttononclick="showDialog('#three-buttons-dialog')">Launch three button dialog</ic-button>
<ic-buttononclick="showDialog('#destructive-dialog')">Launch destructive button dialog</ic-button>
<ic-dialog
id="no-button-dialog"
buttons="false"
label="None"
heading="This dialog has no default buttons"
>
  Sorry, you cannot place orders at the moment. Please try again later.
</ic-dialog>
<ic-dialogid="single-button-dialog"label="Single"heading="This dialog has a single button">
<ic-typography>
    Your order for an Americano coffee has been placed.
</ic-typography>
</ic-dialog>
<ic-dialogid="three-buttons-dialog"label="Three buttons"heading="This dialog has three default buttons">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</ic-dialog>
<ic-dialog
id="destructive-dialog"
destructive="true"
label="Destructive"
heading="This dialog has a default destructive button"
>
<ic-typography>
    You are about to cancel your order for an Americano. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<divclassName={classes.btnContainer}>
<IcButtononClick={handleNoButtonDialogOpen}>
    Launch no button dialog
</IcButton>
<IcButtononClick={handleSingleButtonDialogOpen}>
    Launch single button dialog
</IcButton>
<IcButtononClick={handleThreeButtonsDialogOpen}>
    Launch three button dialog
</IcButton>
<IcButtononClick={handleDestructiveButtonDialogOpen}>
    Launch destructive button dialog
</IcButton>
</div>
<IcDialog
open={openNoButtonDialog}
buttons={false}
label="None"
heading="This dialog has no default buttons"
onIcDialogClosed={openNoButtonDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>
<IcDialog
open={openSingleButtonDialog}
label="Single"
heading="This dialog has a single button"
buttonProps={[
{ label:"Confirm", onclick:"alert('Confirmed'); this.hideDialog()"},
]}
onIcDialogClosed={openSingleButtonDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>
<IcDialog
open={openThreeButtonsDialog}
label="Triple"
heading="This dialog has three default buttons"
buttonProps={[
{ label:"Close", onclick:"this.hideDialog()"},
{ label:"Options", onclick:"alert('Options...')"},
{ label:"Confirm", onclick:"alert('Confirmed'); this.hideDialog()"},
]}
onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>
<IcDialog
open={openDestructiveButtonDialog}
destructive
label="Destructive"
heading="This dialog has a default destructive button"
buttonProps={[
{ label:"Confirm", onclick:"alert('Confirmed'); this.hideDialog()"},
]}
onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="slotted-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
<ic-buttonslot="dialog-controls"variant="secondary"onclick="hideDialog()">
    Go back
</ic-button>
<ic-buttonslot="dialog-controls"onclick="addToBasket()">
    Add to basket
</ic-button>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch slotted buttons dialog</IcButton>
<IcDialog
heading="Are you sure?"
label="Coffee order"
open={openDialog}
onIcDialogClosed={openDialog && handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want
    to continue?
</IcTypography>
<IcButtonslot="dialog-controls"variant="secondary"onClick={handleDialogClose}>
    Go back
</IcButton>
<IcButtonslot="dialog-controls"onClick={handleAddToBasket}>
    Add to basket
</IcButton>
</IcDialog>

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialog
id="interactive-content-dialog"
label="Coffee order"
heading="Please agree to our terms and conditions"
>
<ic-typography>
    Before continuing, please agree to our terms and conditions.
</ic-typography>
<ic-checkbox-group
name="terms"
label="terms and conditions"
hide-label="true"
>
<ic-checkboxlabel="I agree to the terms and conditions."value="agree"></ic-checkbox>
</ic-checkbox-group>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
open={openDialog}
label="Coffee order"
heading="Please agree to our terms and conditions"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={termsDialogConfirmed}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Before continuing, please agree to our terms and conditions.
</IcTypography>
<IcCheckboxGroup
name="terms"
label="terms and conditions"
hideLabel
onIcChange={toggleTermsAgreed}
className={classes.checkboxGroup}
>
<IcCheckbox
label="I agree to the terms and conditions."
value="agree"
/>
</IcCheckboxGroup>
</IcDialog>

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialog
id="no-close-dialog"
close-on-backdrop-click="false"
label="Background close prevented"
heading="This dialog can't be closed by clicking the background"
>
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
open={openDialog}
closeOnBackdropClick={false}
label="Background close prevented"
heading="This dialog can't be closed by clicking the background"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleConfirmDialog}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</IcTypography>
</IcDialog>

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="ev-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
<ic-buttonvariant="tertiary"onclick="cancelDialog()"slot="dialog-controls">
    Cancel
</ic-button>
<ic-buttononclick="confirmDialog()"slot="dialog-controls">
    Confirm
</ic-button>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
open={openDialog}
heading="This dialog utilises events"
label="Events"
onIcDialogOpened={handleDialogOpened}
onIcDialogConfirmed={handleDialogConfirmed}
onIcDialogCancelled={handleDialogCancelled}
onIcDialogClosed={handleDialogClosed}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</IcTypography>
<IcButtonvariant="tertiary"onClick={handleSlottedCancel}slot="dialog-controls">
    Cancel
</IcButton>
<IcButtononClick={handleSlottedConfirm}slot="dialog-controls">
    Confirm
</IcButton>
</IcDialog>

<ic-buttononclick='showDialog()'>Launch disabled height constraint dialog</ic-button>
<ic-dialog
label='Coffee order'
heading='Please add your milk?'
disable-height-constraint='true'
>
<ic-typography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</ic-typography><br/>
<ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>
<ic-selectlabel='Please select a type of milk'></ic-select>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch disabled height constraint dialog</IcButton>
<IcDialog
label='Coffee order'
heading="Please add your milk"
disableHeightConstraint
open={openDialog}
onIcDialogConfirmed={openDialog && handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Sure, let's dive into the delightful world of milk, where dairy dreams
    and coffee collide in the harmonious dance of a flat white. Picture
    this: you stroll into your favorite coffee haunt, the aroma of freshly
    ground beans tickling your senses. You approach the counter, ready to
    make a crucial decision – what kind of milk will accompany your flat
    white?
</IcTypography>
<br/>
<IcTypography>
    In the end, whether you go for the classic, embrace the trendy, or opt
    for the exotic, the flat white remains a canvas waiting to be painted
    with your milk of choice. So, next time you're at the coffee counter,
    let your taste buds embark on a journey – a journey where milk and
    coffee meet, and every sip tells a story, sprinkled with a dash of
    humor and a whole lot of flavor. Cheers to the caffeinated adventure!
</IcTypography>
<br/>
<IcSelect
label='Select a type of milk'
options={[
{ value:'whole', label:'Whole'},
{ value:'semiskinned', label:'Semi Skinned'},
{ value:'oat', label:'Oat'},
{ value:'almond', label:'Almond'}
]}
/>
</IcDialog>