Jutro Digital Platform

https://docs.guidewire.com/jutro/documentation/10.11
Admin
Jutro Digital Platform provides tools and libraries for building modern web applications for the P&C...
Tokens:201,876
Snippets:975
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Global Header Usage and Code Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/global-header

This snippet demonstrates the basic usage and provides a code example for the Jutro Global Header component. It outlines how to integrate the header into applications within the Guidewire Cloud ecosystem.

```jsx
import React from 'react';
import { GlobalHeader } from '@guidewire/jutro-design-system';

function App() {
  return (
    <div>
      <GlobalHeader
        appName="My Application"
        logoUrl="/path/to/guidewire-logo.svg"
        // Other props as needed
      />
      {/* Main application content */}
    </div>
  );
}
```

--------------------------------

### Guidewire Jutro Floorplan Override Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/page-layouts/appfloorplan

Provides an example of a `FloorPlanOverride` configuration in Guidewire Jutro, specifically disabling the right side navigation for the '/example2' path. This demonstrates how to customize individual page layouts.

```TypeScript
exportconst example2PageDefinition =():FloorPlanOverride{
return{
// Configuration override for the /example2 path only
showRightSide:false,
matches:'/example2'
}
}
```

--------------------------------

### Basic Switch Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/switch

Demonstrates the basic usage of the Switch component with a label. The Switch component allows users to toggle between an on and off state.

```jsx
<Switchlabel="Switch"/>
```

--------------------------------

### Basic TooltipIcon Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/tooltip

Shows the basic implementation of the TooltipIcon component, used when a tooltip is associated with an icon. This example requires importing React and TooltipIcon from '@jutro/components'.

```javascript
import { TooltipIcon } from '@jutro/components';
import React from 'react';

export const TooltipIconBasic = () => {
  return <TooltipIcon context="This is a tooltip" />;
};
```

--------------------------------

### useBreakpoint: Get All Returned Values

Source: https://docs.guidewire.com/jutro/documentation/10.11/responsiveness

This comprehensive example demonstrates retrieving all values from the `useBreakpoint` hook: `breakpointProps`, `breakpoint`, and `applyBreakpoint`. It shows how to use each of these to conditionally style and render `TextInput` components.

```javascript
const{
breakpointProps: textInputPhoneProps,
breakpoint,
applyBreakpoint,
}=useBreakpoint({
phone:{
placeholder:'Phone placeholder',
label:'Phone label',
className:'somePhoneClass',
},
});
return(
<React.Fragment>
<TextInput
label="Text input"
{...textInputPhoneProps}
/>
<TextInput
label={breakpoint ==='phone'?'Phone label 2':'Text input'}
/>
<TextInput
label="Text input"
{...applyBreakpoint({
phone:{
placeholder:'Phone placeholder 3',
label:'Phone label 3',
className:'someOtherPhoneClass',
},
})}
/>
</React.Fragment>
);

```

--------------------------------

### Basic Phase Progress Bar Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/progress-indicator-phase-bar

This example demonstrates a static Phase Progress Bar with predefined phases and steps. It shows how to structure the `phases` array, including icons, titles, and step visitation status, to represent completed and current progress.

```jsx
<PhaseProgressBar  
phases={[  
{
icon:BusinessCenterIcon,
id:'your-business',
steps:[
{
title:'Completed phase first step',
visited:true  
},
{
title:'Completed phase second step',
visited:true  
}
],
title:'Completed Phase'  
},
{
icon:InsertDriveIcon,
id:'final-details',
isError:false,
steps:[
{
active:true,
title:'Active step',
visited:true  
},
{
title:'Next step'  
}
],
title:'Current phase'  
},
{
icon:CreditCardIcon,
id:'payment',
steps:[
{
title:'Next phase step 1'  
},
{
title:'Next phase step 2'  
},
{
title:'Next phase step 3'  
}
],
title:'Next phase'  
}
]}  
/>  


```

--------------------------------

### Typography Component Usage Examples

Source: https://docs.guidewire.com/jutro/documentation/10.11/typography-component

Demonstrates various ways to use the typography component with different variants and semantic tags. Includes examples for headings, body text, blockquotes, and separating visual style from semantic structure.

```html
<!-- Example: Heading variant -->
<Typography variant="heading-1">Page Title</Typography>

<!-- Example: Body variant -->
<Typography variant="body-medium">This is a paragraph of text.</Typography>

<!-- Example: Label variant -->
<Typography variant="label-small">Form Field Label</Typography>

<!-- Example: Eyebrow variant -->
<Typography variant="eyebrow-1">Contextual text above heading</Typography>

<!-- Example: Hero variant -->
<Typography variant="hero-1">Marketing Headline</Typography>

<!-- Example: Blockquote variant -->
<Typography variant="blockquote-medium">This is a quoted text.</Typography>

<!-- Example: Figcaption variant -->
<Typography variant="figcaption-medium">Caption for an image.</Typography>

<!-- Example: Code variant -->
<Typography variant="code-medium">Inline code snippet</Typography>

<!-- Example: Separating style from semantics (Subtle section heading) -->
<Typography variant="body-medium" tag="h2">This is an h2 that is formatted to have medium text.</Typography>

<!-- Example: Separating style from semantics (Visually prominent quote) -->
<Typography variant="heading-3" tag="blockquote">This is a blockquote that is formatted to have the visual weight of a heading.</Typography>
```

--------------------------------

### Render Badge Component

Source: https://docs.guidewire.com/jutro/documentation/10.11/badge

Demonstrates how to render the Badge component with a specified value. This is a basic usage example.

```HTML
<Badge value={5}/>
```

--------------------------------

### Basic Loader Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/loader

A basic loader that displays a Guidewire branded animation until its children are ready. The children can be shown by setting the `loaded` property to `true` or by providing a `Promise`.

```HTML
<Loader>
  <span>Incoming content</span>
</Loader>
```

--------------------------------

### Example Heading Structure

Source: https://docs.guidewire.com/jutro/documentation/10.11/building-accessible-experiences

Illustrates a hierarchical heading structure for clear document organization, prioritizing accessibility for screen reader users. This example demonstrates the correct nesting of heading levels from h1 to h6.

```HTML
<h1>Main Heading</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h3>Subsection 1.2</h3>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<h4>Sub-subsection 2.1.1</h4>
```

--------------------------------

### Basic HeaderPanel Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/page-layouts/components/header-panel

Demonstrates the basic structure of the HeaderPanel component, which wraps content to designate page header elements. It includes a sample heading within the panel.

```HTML
<HeaderPanel>
<h1>Sample heading text</h1>
</HeaderPanel>
```

--------------------------------

### Select Dropdown Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/drop-downs-overall

Demonstrates the implementation of a single-select dropdown component. It requires a label and initial value, and accepts SelectOption children for the available choices.

```jsx
<Select  
label="Your favorite character"  
initialValue={{id:'1',label:'Anakin'}}>  
<SelectOption  
value={{  
id:'1',  
label:'Anakin',  
}}  
/>  
<SelectOption  
value={{  
id:'2',  
label:'Luke',  
}}  
/>  
</Select>
```

--------------------------------

### Text Input Validation Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/text

Provides an example of implementing custom validation logic for the TextInput component. It uses the 'onChange' event and 'stateMessages' prop to handle and display validation errors.

```javascript
functionTextInputValidation(){
const[validationMessages, setValidationMessages]=useState({});

const onChange =useCallback((e, newValue)=>{
if(!newValue || newValue.indexOf('a')==-1){
setValidationMessages({});
}else{
setValidationMessages({
error:['The text cannot contain `a` character'],
});
}
},[]);

return(
<TextInput
label="Do not accept words with 'a'"
secondaryLabel="Will raise an error if contains 'a' character"
stateMessages={validationMessages}
onChange={onChange}
/>
);
}

```

--------------------------------

### Generic Alert Modal Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/modal-component

Provides an example of triggering a generic Alert modal using `showAlert` from `ModalNextContext`. It includes state management to capture the modal's result and demonstrates how to configure various alert properties like status, icon, title, message, and confirm button text.

```javascript
import React, { useState, useContext } from 'react';
import { ModalNextContext } from '@jutro/components';

const AlertModalExample = () => {
  const [result, setResult] = useState(null);
  const { showAlert } = useContext(ModalNextContext);

  async function triggerAlert() {
    const results = await showAlert({
      status: 'info' /* status - 'info', 'warning', 'error', or 'success' */,
      icon: 'gw-error-outline' /* icon - optional icon class name for the icon to display to the left of the title */,
      title:
        'Test Alert' /* title - string/IntlMessageShape for the title of the alert */,
      message:
        'Just testing an Alert!' /* message - string/IntlMessageShape for the message to display within the alert */,
      confirmButtonText:
        'OK' /* confirmButtonText - string/IntlMessageShape for the text to appear on the confirm button */,
    });
    setResult(`modal result was: ${results}`);
  }

  return (
    <div>
      <button onClick={triggerAlert}>Show Alert Modal</button>
      <div>{result}</div>
    </div>
  );
};

```

--------------------------------

### Start Development Server with Live Preview

Source: https://docs.guidewire.com/jutro/documentation/10.11/i18n

Starts the application in live preview mode, allowing immediate reflection of code changes in the browser. Note that changes to existing source strings require a re-run of the extract-merge-pseudo cycle (`npm run i18n`) to be reflected.

```bash
npm start
```

--------------------------------

### Render InfoLabel Component

Source: https://docs.guidewire.com/jutro/documentation/10.11/info-label

This snippet shows how to render the InfoLabel component with basic content. It's a fundamental example of integrating the component into a UI.

```html
<InfoLabel>Lorem ipsum</InfoLabel>
```

--------------------------------

### Basic Checkbox Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/checkboxes

Demonstrates the usage of a single Checkbox component with a label. This component can be used independently.

```HTML
<Checkboxlabel="This is a single checkbox"/>
```

--------------------------------

### Jutro Unit Testing Examples

Source: https://docs.guidewire.com/jutro/documentation/10.11/testing-overview

Unit tests in Jutro verify the functionality of small, isolated parts of the application. Examples include checking for rendering without errors, validating metadata-based components, testing string manipulation functions, verifying callback invocations, and ensuring side effects are triggered correctly.

```javascript
// Example: Check if an app renders without crashing
it('should render without crashing', () => {
  // Assume App is your root component
  render(<App />);
});

// Example: Check if a metadata-based component has valid metadata
it('should have valid metadata', () => {
  const component = render(<MetadataComponent metadata={validMetadata} />);
  // Assertions for valid metadata
});

// Example: Test a function that shortens strings
it('should shorten long descriptions correctly', () => {
  const longString = 'This is a very long description that needs to be shortened.';
  const maxLength = 20;
  const shortenedString = shortenString(longString, maxLength);
  expect(shortenedString.length).toBeLessThanOrEqual(maxLength);
  expect(shortenedString).toBe('This is a very lon...');
});

// Example: Check if a callback is called
it('should call the callback function', () => {
  const mockCallback = jest.fn();
  render(<ComponentWithCallback onClick={mockCallback} />);
  // Simulate an event that triggers the callback
  // e.g., fireEvent.click(screen.getByRole('button'));
  expect(mockCallback).toHaveBeenCalledTimes(1);
});

// Example: Check if a side effect is triggered the appropriate number of times
it('should trigger side effect twice', () => {
  const mockSideEffect = jest.fn();
  render(<ComponentWithSideEffect onMount={mockSideEffect} />);
  expect(mockSideEffect).toHaveBeenCalledTimes(1);
});
```

--------------------------------

### Basic Accordion Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/accordion

Demonstrates the basic structure of an Accordion component with multiple AccordionCard items. Shows how to set titles and initial expanded states.

```HTML
<Accordion>
<AccordionCard title="Card 1">Test card</AccordionCard>
<AccordionCard title="Card 2" initialExpanded>
    Card initially open
</AccordionCard>
<AccordionCard disabled title="Card 3">
    Test card 3
</AccordionCard>
</Accordion>
```

--------------------------------

### React Confirmation Modal Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/modal-component

This React component demonstrates how to use the `showConfirm` function from `ModalNextContext` to display a generic confirmation modal. It allows customization of the modal's status, icon, title, message, and button text. The example captures the modal's result and displays it to the user.

```javascript
import React, { useState, useContext } from 'react';
import { ModalNextContext } from '@jutro/components';

const ConfirmationModalExample = () => {
  const [result, setResult] = useState(null);
  const { showConfirm } = useContext(ModalNextContext);

  async function triggerConfirmation() {
    const results = await showConfirm({
      status: 'info', /* status - 'info', 'warning', 'error', or 'success' */
      icon: 'gw-error-outline', /* icon - optional icon class name for the icon to display to the left of the title */
      title:
        'Test Confirm Modal', /* title - string/IntlMessageShape for the title of the confirm modal */
      message:
        'Just testing a Confirmation Modal!', /* message - string/IntlMessageShape for the message to display within the confirm modal */
      confirmButtonText:
        'OK', /* confirmButtonText - string/IntlMessageShape for the text to appear on the confirm button */
      cancelButtonText:
        'Cancel', /* cancelButtonText - string/IntlMessageShape for the text to appear on the cancel button */
    });
    setResult(`modal result was: ${results}`);
  }

  return (
    <div>
      <button onClick={triggerConfirmation}>Show Confirmation Modal</button>
      <div>{result}</div>
    </div>
  );
};

```

--------------------------------

### Basic Tag Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/tags

A basic tag displays a label formatted to be recognized by the reader. It's a simple string with designated styling.

```HTML
<Taglabel="This is a tag"/>  
```

--------------------------------

### Switch Component Usage

Source: https://docs.guidewire.com/jutro/documentation/10.11/switch

Demonstrates the basic usage of the Switch component with a label. This is a fundamental example for integrating the Switch into an application.

```jsx
<Switch label="Switch"/>
```

--------------------------------

### Basic Overflow Menu Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/overflow-menu

Demonstrates how to create a simple overflow menu using the DropdownMenu component. The trigger is a Button that toggles the menu when clicked.

```jsx
<DropdownMenu  
id="dropdown-menu"  
renderTrigger={(  
{
      id,  
      menuId,  
      ref,
      'aria-haspopup': ariaHasPopup,
      'aria-expanded': ariaExpanded,
      title ='Menu',
      onKeyDown,
},
    )
=>{
return(
<Button  
id={id}
ref={ref}
aria-expanded={ariaExpanded}
aria-controls={menuId}
aria-haspopup={ariaHasPopup}
onClick={()=>toggleMenu()}
onKeyDown={onKeyDown}
label={title}
/>
);
}}>
<DropdownMenuLink>First menu item</DropdownMenuLink>
<DropdownMenuLink>Second menu item</DropdownMenuLink>
<DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenu>
```

--------------------------------

### Combobox with User Input Filtering

Source: https://docs.guidewire.com/jutro/documentation/10.11/drop-downs-combobox

Demonstrates how to use the Combobox component with the `useFilteredOptions` hook to filter options based on user input. This example shows a basic setup for a searchable dropdown.

```javascript
exportfunctionComboWithFilter(){
  constCHARACTERS=[
    {id:'1',label:'Anakin Skywalker'},
    {id:'2',label:'Luke Skywalker'},
    {id:'3',label:'Master Yoda'},
    {id:'4',label:'Han Solo'},
  ];
  
  const{ filteredOptions, onSearch, resetFilter }=
  useFilteredOptions(CHARACTERS);
  
  return(
    <Combobox
      label="Select 1 option"
      secondaryLabel="Options filtered by user input"
      onSearch={onSearch}
      onBlur={resetFilter}>
      {filteredOptions.map(({ id, label })=>(
        <ComboboxOption
          key={id}
          value={{ id, label }}
        />
      ))}
    </Combobox>
  );
}

```

--------------------------------

### AppFloorPlan Basic Configuration Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/floorplans-layouts

Demonstrates the usage of the AppFloorPlan component's props, including how to pass floorplan configurations via the `floorPlans` property. It highlights the need for a `$schema` path in the floorplan JSON for validation and mentions the `rightSide` prop for defining the right panel's content.

```javascript
import React from 'react';
import AppFloorPlan from '@guidewire/jutro';

const floorPlanConfig = {
  // Floorplan configuration details...
};

const App = () => (
  <AppFloorPlan
    floorPlans={{
      default: floorPlanConfig
    }}
    // Other props like rightSide, etc.
  />
);

export default App;
```

```json
{
  "$schema": "/path/to/your/floorplan-schema.json",
  "routes": [
    // ... route definitions
  ],
  "rightSide": {
    // ... right panel presentation metadata
  }
}
```

--------------------------------

### Guidewire Jutro AppFloorPlan Initialization

Source: https://docs.guidewire.com/jutro/documentation/10.11/page-layouts/appfloorplan

Shows how to initialize the `AppFloorPlan` component in Guidewire Jutro with an array of floorplan configurations, including default and overridden settings. This example renders the application's main layout.

```JSX
exportfunctionJutro():JSX.Element{
return<AppFloorPlan
floorPlans={[floorPlanDefinition(),example2PageDefinition()]}/>;
}
```

--------------------------------

### Jutro Toggle Button Group Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/toggle-button

This code snippet demonstrates how to implement a ToggleButtonGroup with two ToggleButton options, 'Yes' and 'No'. It includes basic setup for labels and values.

```jsx
<ToggleButtonGrouplabel="Toggle group">  
<ToggleButton  
label="Yes"  
value="true"  
/>  
<ToggleButton  
label="No"  
value="false"  
/>  
</ToggleButtonGroup>  

```

--------------------------------

### MultipleCombobox with Filtering and Initial Values Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/drop-downs-overall

Demonstrates a MultipleCombobox component that allows filtering and pre-selection of options. It uses the `useFilteredOptions` hook and accepts an array of initial values.

```jsx
exportfunctionMultipleComboWithFilteAndInitial(){
constCHARACTERS=[
{id:'1',label:'Anakin Skywalker'},
{id:'2',label:'Luke Skywalker'},
{id:'3',label:'Master Yoda'},
{id:'4',label:'Han Solo'},
];

const{ filteredOptions, onSearch, resetFilter }=
useFilteredOptions(CHARACTERS);

return(
<MultipleCombobox
label="Select options"
secondaryLabel="Options filtered by user input"
onSearch={onSearch}
onBlur={resetFilter}
initialValue={[CHARACTERS[1],CHARACTERS[2]]}> 
{filteredOptions.map(({ id, label })=>(
<ComboboxOption
key={id}
value={{ id, label }}
/>
))}
</MultipleCombobox>
);
}
```

--------------------------------

### Position Grid Items with colStart and rowStart

Source: https://docs.guidewire.com/jutro/documentation/10.11/grid

Explains and shows how to use `colStart` and `rowStart` props on `GridItem` to precisely position items within the grid. This example demonstrates complex layouts by combining spanning and starting positions.

```jsx
import{Grid,GridItem}from`@jutro/layout`;

<Grid
columns={['1fr','1fr','1fr']}
rows={['1fr','1fr','1fr']}
gap="large"
>
<GridItemcolSpan={2}>
<strong>First Item</strong>
</GridItem>
<GridItemrowSpan={2}colStart={1}>
<strong>Second Item</strong>
</GridItem>
<GridItem>
<strong>Third Item</strong>
</GridItem>
<GridItemrowSpan={2}rowStart={1}colStart={3}>
<strong>Fourth Item</strong>
</GridItem>
<GridItemcolSpan={2}>
<strong>Fifth Item</strong>
</GridItem>
</Grid>
```

--------------------------------

### AppFloorPlan Basic Configuration

Source: https://docs.guidewire.com/jutro/documentation/10.11/page-layouts/appfloorplan

Demonstrates the basic usage of the AppFloorPlan component with header, left and right panels, and navigation routes. It utilizes props like `showHeader`, `header`, `showLeftSide`, `leftSide`, `sideRoutes`, `showRightSide`, `rightSide`, and `showFooter` to define the page layout. The example includes custom components for page content and side panel content.

```javascript
import React from 'react';
import { AppFloorPlan } from '@jutro/floorplan';
import { FloorPlan } from '@jutro/floorplan';
import { ChatIcon, MailIcon } from '@jutro/icons';
import { Card } from '@jutro/components';

export const floorPlanDefinition = (): FloorPlan => {
  return {
    showHeader: true,
    header: {
      showNotifications: true,
      logoSrc: './images/guidewire-logo-dark.svg',
      logoTitle: 'Guidewire',
      showHelp: true,
      showAppSwitcher: true,
      showLanguageSelector: false,
    },
    showSubHeader: false,
    showLeftSide: true,
    leftSide: {
      collapsible: true,
    },
    sideRoutes: [
      {
        path: '/',
        exact: true,
        showOnNavBar: false,
        redirect: '/example',
      },
      {
        title: 'Example page',
        path: '/example',
        exact: true,
        component: PageExample,
      },
      {
        title: 'Example page 2',
        path: '/example2',
        exact: true,
        component: PageExample,
      },
    ],
    showRightSide: true,
    rightSide: {
      collapsible: true,
      isInitiallyCollapsed: true,
      sides: [
        {
          label: "Open chat",
          icon: ChatIcon,
          component: RightSideExample,
        },
        {
          label: "Email",
          icon: MailIcon,
          component: RightSideExample,
        }
      ],
    },
    showFooter: false,
  };
};

export function Jutro(): JSX.Element {
  return <AppFloorPlan floorPlans={[floorPlanDefinition()]}/>;
}

const PageExample = (): JSX.Element => {
  return <Card title="Example page" subTitle="This can be any type of component" isPanel></Card>
}

const RightSideExample = (): JSX.Element => {
  return <Card title="Example page" subTitle="This can be any type of component"></Card>
}
```

--------------------------------

### Align Grid Items Individually with alignSelf

Source: https://docs.guidewire.com/jutro/documentation/10.11/grid

Shows how to use the `alignSelf` property on individual `GridItem` components to control their vertical alignment within the grid. Examples include stretch, center, start, end, and baseline alignment.

```jsx
import{Grid,GridItem}from'@jutro/layout';

<Grid
columns={['1fr','1fr','1fr','1fr','1fr']}>
<GridItem>
<p><strong>alignSelf='stretch'</strong></p><p>&nbsp;</p>
</GridItem>
<GridItemalignSelf='center'>
<strong>alignSelf='center'</strong>
</GridItem>
<GridItemalignSelf='start'>
<strong>alignSelf='start'</strong>
</GridItem>
<GridItemalignSelf='end'>
<strong>alignSelf='end'</strong>
</GridItem>
<GridItemalignSelf='baseline'>
<strong>alignSelf='baseline'</strong>
</GridItem>
</Grid>
```

--------------------------------

### Jutro Components Import Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/api-surface

Demonstrates correct and incorrect import statements for Jutro components. It highlights that only direct exports from defined entry points are part of the contract, and importing from internal type definitions is not supported.

```JavaScript
import{ intlMessageShape }from'@jutro/components/types/types';  
```

```JavaScript
import{Button}from'@jutro/components';  
```

--------------------------------

### useBreakpoint: Get Only Breakpoint Status

Source: https://docs.guidewire.com/jutro/documentation/10.11/responsiveness

This example illustrates using the `useBreakpoint` hook solely to determine the current breakpoint. The `breakpoint` value is then used to conditionally render or modify props, such as changing the `label` of a `TextInput` component when the breakpoint is 'phone'.

```javascript
const{ breakpoint }=useBreakpoint({});
return(
<TextInputlabel={breakpoint ==='phone'?'Phone label':'Text input'}/>
);

```

--------------------------------

### DateInput Validation Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/date-range

Demonstrates how to use the onChange prop in the DateRangePicker component to handle validation errors. The onChange callback receives event, value, and errorCode, with separate start and end properties for each. Error codes include INVALID_DATE, MIN_EXCEEDED, and MAX_EXCEEDED.

```javascript
const handleDateChange = (
  event: React.ChangeEvent<HTMLInputElement>,
  value: {
    start: {
      day: number;
      month: number;
      year: number;
    };
    end: {
      day: number;
      month: number;
      year: number;
    };
  },
  errorCode?: {
    start?: 'INVALID_DATE' | 'MIN_EXCEEDED' | 'MAX_EXCEEDED';
    end?: 'INVALID_DATE' | 'MIN_EXCEEDED' | 'MAX_EXCEEDED';
  }
) => {
  console.log('Date changed:', value);
  if (errorCode?.start) {
    console.error('Start date error:', errorCode.start);
  }
  if (errorCode?.end) {
    console.error('End date error:', errorCode.end);
  }
};
```

--------------------------------

### Simulating User Interactions with RTL

Source: https://docs.guidewire.com/jutro/documentation/10.11/rtl-patterns

Provides examples of simulating user interactions like clicking a button and typing into an input field using the `userEvent` utility in RTL. It also shows how to emulate tab key presses.

```javascript
userEvent.click(button);
```

```javascript
userEvent.clear(input);
userEvent.type(input,'myValue{enter}');
```

```javascript
userEvent.tab();
userEvent.tab();
```

--------------------------------

### Set Focus on CurrencyInput using useRef

Source: https://docs.guidewire.com/jutro/documentation/10.11/currency

This React component example shows how to use the `useRef` hook to get a reference to the `CurrencyInput` component. Clicking the button triggers a function that calls the `focus()` method on the referenced input, setting the focus imperatively.

```jsx
import{ useRef }from'react';
import{CurrencyInput,Button}from'@jutro/components';

exportfunctionCurrencyInputRef(){
const currencyRef =useRef(null);

constsetFocus=(e)=>{
    currencyRef?.current?.focus();
};

return(
<div>
<Button
label="Set focus on currency input"
onClick={setFocus}></Button>
<CurrencyInput
availableCurrencies={['USD']}
label="Get the focus from the button"
ref={currencyRef}
/>
</div>
);
}
```

--------------------------------

### Set Focus on TextArea using ref in React

Source: https://docs.guidewire.com/jutro/documentation/10.11/textarea

This snippet demonstrates how to use the `useRef` hook in React to get a reference to a `TextArea` component. The `setFocus` function then calls the native `focus()` method on the referenced element, allowing programmatic control over the input's focus state. This is useful for guiding user interaction within forms.

```javascript
exportfunction TextAreaRef(){
  const textAreaRef =useRef(null);

  constsetFocus=(e)=>{
    textAreaRef?.current?.focus();
};

  return(
<div>
<Button
label="Set focus on TextArea"
onClick={setFocus}></Button>
<TextArea
label="Get the focus from the button"
ref={textAreaRef}
/>
</div>
);
}
```

--------------------------------

### Basic TextArea Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/textarea

Demonstrates the basic usage of the TextArea component, requiring only a 'label' prop. Additional props like 'placeholder' and 'secondaryLabel' can be used to enhance its functionality.

```jsx
<TextInput  
label="Text area component"  
placeholder="Write something here"  
secondaryLabel="Free text element"  
/>  

```

--------------------------------

### Basic Inline Notification Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/inline-notification

A simple example of an Inline Notification component that displays a message and logs a message to the console when dismissed. It is configured to be non-dismissable.

```jsx
<InlineNotification  
message="Message"  
messageProps={{
success:'Hello',
}}
onClosed={function(){
console.log('Closed');
}}
isDismissable={false}
type="success"
/>  

```

--------------------------------

### Async Modal Example with ModalNext

Source: https://docs.guidewire.com/jutro/documentation/10.11/modal-component

Demonstrates how to use ModalNext, ModalHeader, ModalBody, and ModalFooter to create an asynchronous modal. It includes state management for modal visibility and processing, and handles modal results to trigger an asynchronous action.

```jsx
const MyModal = ({ isOpen, onResolve }) =>
  isOpen ? (
    <ModalNext isOpen>
      <ModalHeader onClose={() => onResolve()} />
      <ModalBody>
        <p>You can put anything you want here!</p>
      </ModalBody>
      <ModalFooter>
        <Button onClick={() => onResolve('Cancel')}>Cancel</Button>
        <Button onClick={() => onResolve('Process request')}>Process request</Button>
      </ModalFooter>
    </ModalNext>
  ) : null;

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [processing, setProcessing] = useState(false);

  const handleOpen = () => setIsOpen(true);

  const processRequest = async () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        alert('Request successful');
        resolve();
      }, [3000]);
    });
  };

  const handleModalResult = async (result) => {
    if (result === 'Process request') {
      if (!processing) {
        setProcessing(true);
        await processRequest();
        setProcessing(false);
        setIsOpen(false);
      }
    } else {
      setIsOpen(false);
    }
  };

  return (
    <div>
      <MyModal isOpen={isOpen} onResolve={handleModalResult} />
      <Button onClick={handleOpen}>Show Modal</Button>
    </div>
  );
};
```

--------------------------------

### Timezone Data Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/time-picker

Provides an example of how to define a list of IANA timezones for use with the TimezonePicker component. This list is crucial for populating the available timezone options.

```javascript
const timeZones = [
  'Africa/Lagos',
  'Africa/Maputo',
  'Africa/Monrovia',
  // ... and so on
];
```

--------------------------------

### Simple Progress Bar Basic Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/progress-indicator-simple-bar

Demonstrates how to display a basic progress bar indicating the completion percentage of a process. It requires 'completed' and 'total' props to define the progress.

```jsx
<SimpleProgressBar  
completed={25}  
total={100}  
/>  

```

--------------------------------

### Controlled Year Picker Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/date-year-picker

Provides an example of using the Year Picker as a controlled component by managing its value with React state. It displays the selected year or a waiting message.

```JavaScript
const[picked, setYear]=React.useState({year:undefined});  
  
functionhandleYearChange(event, value){
setYear(value);
}
  
<YearPicker  
label={{
id:'year-picker-label',
defaultMessage:'Select year',
}}
onChange={handleYearChange}
value={picked}
/>  
<div>  
{picked && picked.year?(
<>
The selected year is {picked.year}.
</>
):(
<>
Waiting for the user to specify year.
</>
)}
</div>  

```

--------------------------------

### Accessible-disabled Button Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/ui-elements-states

An example of a button implementing the accessible-disabled state. This state maintains accessibility compliance by using ARIA attributes instead of the native disabled attribute and muting callbacks.

```html
<button aria-disabled="true" disabled="false" onclick="console.log('This should not be called')">Accessible Disabled Button</button>
```

--------------------------------

### Lookup Component Usage Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/lookup

Demonstrates the basic usage of the Lookup component, allowing users to select values via keyword search. It highlights its role in content discovery and filtering.

```javascript
import Lookup from '@guidewire/jutro-design-system/lookup';

function MyForm() {
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];

  return (
    <Lookup
      label="Select a fruit"
      options={options}
      placeholder="Type to search..."
    />
  );
}
```

--------------------------------

### Radio Group Validation Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/radio-group

Provides an example of implementing custom validation logic for a RadioGroup. It uses the 'onChange' event and 'stateMessages' prop to display error messages based on user selection.

```JavaScript
import React, { useState, useCallback } from 'react';
import { RadioGroup, Radio } from '@guidewire/components'; // Assuming import path

exportfunctionRadioValidation(){
  const[groupValidationMessages, setGroupValidationMessages]=useState({});

  const onChange =useCallback((e, newValue)=>{
    setGroupValidationMessages({});

    if(newValue =='1'){
      setGroupValidationMessages({
        error:['Only second option can be marked'],
      });
    }
  },[]);

  return(
    <RadioGroup
      label="Do not select the forbidden option"
      onChange={onChange}
      stateMessages={groupValidationMessages}>
      <Radio
        label="Do not select the forbidden option"
        value="1"
      />
      <Radio
        label="This option can be selected"
        value="2"
      />
    </RadioGroup>
  );
}
```

--------------------------------

### Basic Burger Menu Implementation

Source: https://docs.guidewire.com/jutro/documentation/10.11/burger-menu

Demonstrates a basic Burger Menu setup within a Header component. It includes sample menu items and links using BurgerMenuItem and BurgerMenuLink components. This is intended for use within Header UX patterns.

```JSX
<Header>
<BurgerMenu
burgerContent={[
<BurgerMenuItemkey="item"id="item"isContainerOnly>Menu Item</BurgerMenuItem>,
<BurgerMenuLinkkey="link"id="link">Menu Link</BurgerMenuLink>,
]}
/>
</Header>
```

--------------------------------

### DateInput Error Handling Example (React)

Source: https://docs.guidewire.com/jutro/documentation/10.11/simple-date-field

Shows how to display an error message for the `DateInput` component using the `stateMessages` prop. This example highlights setting an error state with a custom message.

```jsx
import React from 'react';
import { DateInput } from '@jutro/components/new';

export const ErrorDateInput = () => {
  return (
    <div>
      <DateInput
        label="This is a date input"
        stateMessages={{ error: ['This is an error message'] }}
      />
    </div>
  );
};
```

--------------------------------

### Build React-based Frontends with JDP

Source: https://docs.guidewire.com/jutro/documentation/10.11/platform/getting-started/overview-platform

Jutro Digital Platform (JDP) provides tools and frameworks to build React-based frontends. These applications can be hosted either on Guidewire Cloud or on your own infrastructure, offering flexibility for deployment.

```javascript
/**
 * Example of a Jutro app component structure (conceptual).
 * JDP provides a framework for building React-based frontends.
 */

// Assuming JDP provides a base component or hook
import { useJutroApp } from '@guidewire/jutro-sdk';

function MyCustomExperience() {
  const { data, loading, error } = useJutroApp('/api/customer-data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading data: {error.message}</p>;

  return (
    <div>
      <h1>Welcome, {data.customerName}!</h1>
      <p>Your policy details: {data.policyNumber}</p>
      {/* Render other personalized UI elements */}
    </div>
  );
}

export default MyCustomExperience;

```

--------------------------------

### Controlled Time Picker Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/time-picker

Illustrates how to use the TimePicker as a controlled component by managing its state with the `value` prop. The example uses React's useState hook to store and update the selected time.

```JavaScript
import{TimePicker}from'@jutro/components/new';

functionDinnerTimeSelector(){
const[time, setTime]=React.useState({hour:19,minute:30});

functionhandleTimeChange(event, value){
setTime(value);
}

return(
<TimePicker
label={{
id:'time-picker-label',
defaultMessage:'Enter dinner time',
}}
name="Dinner time picker"
onChange={handleTimeChange}
value={time}
/>
);
}
```

--------------------------------

### Import Jutro TextInput Component

Source: https://docs.guidewire.com/jutro/documentation/10.11/text

Demonstrates how to import the TextInput component from the '@jutro/components' library.

```JavaScript
import{TextInput}from'@jutro/components';
```

--------------------------------

### NotificationAction Component Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/notification-action

This example demonstrates how to use the NotificationAction component to display a notification with a header link, footer link, and a trigger button. It includes the necessary import statement and the component's JSX structure.

```JSX
<NotificationAction  
footerLink={{
href:'/',  
label:'Footer link',
}}  
headerLink={{
label:'Mark all as read',
}}  
id="notification-action"  
renderTrigger={(toggle, ref, isShown)=>(  
<Button  
onClick={toggle}  
ref={ref}  
aria-expanded={isShown}  
label="Show Example"  
/>  
)}  
title="This is popover">  
  lorem ipsum dolor sit amet  
</NotificationAction>
```

```JavaScript
import{NotificationAction}from'@jutro/components';
```

--------------------------------

### Jutro Digital SDK: Building Guidewire Cloud Apps

Source: https://docs.guidewire.com/jutro/documentation/10.11/platform/getting-started/overview-platform

The Jutro Digital SDK and helper libraries simplify the process of building React-based web applications on Guidewire Cloud. They provide functionalities for integration with InsuranceSuite APIs, handling validation, authentication, and other essential features for cloud-based development.

```javascript
import { useInsuranceSuiteApi } from '@jutro/sdk';

function DataFetcher() {
  const api = useInsuranceSuiteApi();

  const fetchData = async () => {
    const data = await api.get('/some-resource');
    console.log(data);
  };

  return <button onClick={fetchData}>Fetch Data</button>;
}
```

--------------------------------

### GridItem Clone Option Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/grid-layout

Provides an example of using `clone={false}` with GridItem when the wrapped component does not pass down the `style` prop correctly. This ensures proper styling by wrapping the component in an extra `<div>`.

```jsx
<GridItem
colSpan={2}
clone={false}>
<SomeElement/>
</GridItem>
```

--------------------------------

### Basic Rendering with RTL

Source: https://docs.guidewire.com/jutro/documentation/10.11/rtl-patterns

Demonstrates the basic usage of the `render` function from `@jutro/test` for mounting components in React Testing Library tests. This replaces standard `mount` or `shallow` functions.

```javascript
render(<Component/>);
```

```javascript
render(<Component/>);
```

--------------------------------

### Basic Slider Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/slider

Demonstrates the basic usage of the Slider component to allow users to select a numeric value by sliding a handle across a bar. It includes a label and a secondary label for clarity.

```HTML
<Slider  
label="Slider"  
secondaryLabel="Choose Value"  
/>  
```

--------------------------------

### Filterable Combobox Example

Source: https://docs.guidewire.com/jutro/documentation/10.11/drop-downs-combobox

This example demonstrates how to use the Combobox component with filtering functionality. It utilizes the `useFilteredOptions` hook to manage the list of options based on user input. The component displays a label and a secondary label indicating the filtering behavior.

```TypeScript
exportfunctionComboWithFilter(){
constCHARACTERS=[
{id:'1',label:'Anakin Skywalker'},
{id:'2',label:'Luke Skywalker'},
{id:'3',label:'Master Yoda'},
{id:'4',label:'Han Solo'},
];
const{ filteredOptions, onSearch, resetFilter }=
useFilteredOptions(CHARACTERS);
return(
<Combobox
label="Select 1 option"
secondaryLabel="Options filtered by user input"
onSearch={onSearch}
onBlur={resetFilter}>
{filteredOptions.map(({ id, label })=>(
<ComboboxOption
key={id}
value={{ id, label }}
/>
))}
</Combobox>
);
}
```

--------------------------------

### MicroFrontend Component Usage

Source: https://docs.guidewire.com/jutro/documentation/10.11/api-surface

Illustrates the usage of the `MicroFrontend` component from the `@jutro/micro-frontends` package. It shows how to configure the source, mode, and routing for a micro frontend, emphasizing that properties and their accepted values can be extended while maintaining support for existing ones.

```JavaScript
import{MicroFrontend}from'@jutro/micro-frontends'  
  
<MicroFrontend  
    src='claimMicroFrontend@http://localhost:3001'  
    jutro ={
mode:'isolated'
router={
basename:'/welcome',
}
...
}
>

```
Tokens:
Raw