### Basic Burger Menu Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/page-layouts/components/burger-menu
Provides a basic example of the Burger Menu component, showing how to manage its open/closed state via the 'open' prop and 'onOpenChange' callback.
```javascript
function BurgerMenuBasic() {
const [open, setOpen] = useState(false);
const onOpenChange = (isOpen: boolean) => setOpen(isOpen);
return (
Menu
); }
```
--------------------------------
### WizardPage Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Demonstrates how to import and use the WizardPage component from the '@jutro/wizard-next' package in a React application. It shows basic setup with navigation paths and passing children.
```javascript
import { WizardPage } from '@jutro/wizard-next';
import { useLocation } from 'react-router-dom';
const myWizardPage = () => {
const location = useLocation();
return (
Account wizard page
);
};
```
--------------------------------
### Switch Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/switch
Demonstrates the basic usage of the Switch component by rendering it with a label.
```jsx
```
--------------------------------
### Basic Switch Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/switch
Demonstrates the fundamental usage of the Switch component with a label. This is the simplest way to render a switch.
```jsx
```
--------------------------------
### Notification Action Component Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/notification-action
This example showcases the basic implementation of the NotificationAction component. It includes a renderTrigger prop to control visibility, and defines links for the header and footer, demonstrating how to integrate custom logic and navigation.
```javascript
(
)}
footerLink={{
href: '/',
label: 'Footer link',
}}
headerLink={{
label: 'Header link',
}}
id="notification-action"
title="This is a popover">
lorem ipsum dolor sit amet
```
--------------------------------
### Button Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/buttons
A basic example demonstrating how to use the Button component with common properties like label, onClick handler, and variant.
```React
```
--------------------------------
### Jutro CurrencyInput Component Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/i18n
Example of using the CurrencyInput component, specifying available currencies and a label. The component handles locale-based formatting for monetary values.
```JavaScript
```
--------------------------------
### Wizard Layout Customization Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Demonstrates how to customize the layout of the Wizard component for different screen sizes (desktop, tablet, phone) using the `layout` prop.
```javascript
return (
);
```
--------------------------------
### Use Jutro CurrencyInput Component
Source: https://docs.guidewire.com/jutro/documentation/10.10/currency
Provides an example of how to use the CurrencyInput component with basic configuration, including available currencies and an initial value.
```javascript
```
--------------------------------
### Slider Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/slider
Demonstrates the basic instantiation of the Jutro Slider component with essential labels.
```jsx
```
--------------------------------
### Basic Grid Usage
Source: https://docs.guidewire.com/jutro/documentation/10.10/grid
A simple example showcasing the `Grid` component with basic `GridItem` children, illustrating fundamental layout structure.
```javascript
import { Grid, GridItem } from '@jutro/layout';
First ItemSecond ItemThird Item
```
--------------------------------
### Basic TooltipIcon Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/tooltip
Shows a simple implementation of the Jutro TooltipIcon component, which is used when a tooltip is associated with an icon.
```javascript
import { TooltipIcon } from '@jutro/components';
import React from 'react';
export const TooltipIconBasic = () => {
return ;
};
```
--------------------------------
### Floorplan Override Configuration Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/page-layouts/appfloorplan
Demonstrates how to create a FloorplanOverride configuration to customize specific pages. Overrides are merged with the default configuration, and the first matching override takes precedence.
```typescript
export const example2PageDefinition = (): FloorPlanOverride => {
return {
// Configuration override for the /example2 path only
showRightSide: false,
matches: '/example2'
}
}
export const floorPlanDefinition = (): FloorPlan => {
return {
// Default `AppFloorPlan` configuration definition
contentLayout: 'canvas',
showRightSide: true,
rightSide: { ... }
}
}
export function Jutro(): JSX.Element {
return ;
}
```
--------------------------------
### Jutro Accordion: Simple Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/accordion
Demonstrates the basic structure of the Jutro Accordion component, showcasing how to render multiple AccordionCard elements. It includes examples of an initially expanded card and a disabled card, highlighting the requirement for a 'title' prop on AccordionCard.
```html
Test card
Card initially open
Test card 3
```
--------------------------------
### Simple Button Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/buttons
Demonstrates the basic usage of the Button component from the '@jutro/components' package. It highlights essential properties such as label, icon, variant, and the onClick event handler.
```JavaScript
import Button from '@jutro/components';
// ...
;
```
--------------------------------
### Basic Flex Component Usage
Source: https://docs.guidewire.com/jutro/documentation/10.10/flex
A fundamental example showcasing the Flex and FlexItem components without specific styling properties, demonstrating their basic structure.
```HTML
First itemSecond itemThird item
```
--------------------------------
### ToolsSidePanel Basic Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/page-layouts/components/tools-side-panel
Demonstrates the basic implementation of the ToolsSidePanel component in React. It shows how to use the `useState` hook to manage the collapsed state of the `ToolsSidePanelContent` and includes child components `ToolsSidePanelContent` and `ToolsSidePanelBar`. The example assumes `HomeIcon` is imported from '@jutro/icons' and `styles` from a CSS module.
```typescript
import React, { useState } from 'react';
import { ToolsSidePanel, ToolsSidePanelContent, ToolsSidePanelBar } from '@jutro/layout';
import HomeIcon from '@jutro/icons'; // Assuming HomeIcon is imported from '@jutro/icons'
import styles from './YourComponent.module.css'; // Assuming styles are imported from a CSS module
const MyComponent = () => {
const [collapsed, setCollapsed] = useState(false);
return (
Sample side panel text
{/* Home icon imported from '@jutro/icons' */}
);
};
export default MyComponent;
```
--------------------------------
### TimePicker Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/time-picker
This example demonstrates how to integrate the Jutro TimePicker component into an application. It shows how to import the component, configure it with a label and name, and handle user input via an onChange event handler. The handler receives the selected time as an object with hours and minutes.
```javascript
import { TimePicker } from '@jutro/components/new';
export function DinnerTimeSelector() {
function handleTimeChange(event, value) {
console.log('The user selected the following time for dinner:', value);
// displays: { hours: 19, minutes: 30 }
}
return (
);
}
```
--------------------------------
### Basic Tooltip Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/tooltip
Demonstrates the basic usage of the Jutro Tooltip component with a Button. The tooltip content is displayed when the button is hovered or focused.
```javascript
import React from 'react';
import { Tooltip, Button } from '@jutro/components';
export const BasicTooltip = () => {
return (
);
};
```
--------------------------------
### Text Area Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/textarea
Demonstrates the basic usage of the Text Area component with a label property.
```HTML
```
--------------------------------
### Jutro Grid Multi-Column Layout Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/grid
Shows how to create a multi-column grid by defining column widths. Items fill columns before moving to the next row.
```javascript
import { Grid, GridItem } from '@jutro/layout';
First ItemSecond ItemThird Item
```
--------------------------------
### Select Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/drop-downs-select
Demonstrates the basic structure for using the Select component with SelectOption children.
```jsx
```
--------------------------------
### Deploy Action Terminology
Source: https://docs.guidewire.com/jutro/documentation/10.10/common-actions
Describes the 'Deploy' action, which installs and configures an application and its components, making software available for use. The opposite action is 'Undeploy'.
```APIDOC
Deploy:
- Description: Installs and configures an application and its components on a planet. Makes the software available for use by users and other programs.
- Opposite: Undeploy
```
--------------------------------
### React Select Component Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/drop-downs-overall
Demonstrates the implementation of a basic Select component in React, allowing a single option selection. It includes a label and initial value.
```jsx
```
--------------------------------
### Jutro Grid Basic Layout Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/grid
Demonstrates a basic Jutro Grid container with default single-column behavior. Each GridItem is placed on a new row.
```javascript
import { Grid, GridItem } from '@jutro/layout';
First ItemSecond ItemThird Item
```
--------------------------------
### Jutro Wizard Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Demonstrates how to import and use the Jutro Wizard component with a defined set of steps, base routes, and navigation paths. It shows the basic structure for configuring a multi-step wizard.
```javascript
import { Wizard } from '@jutro/wizard-next';
const steps = [
{
key: 'one',
route: 'step1',
component: PageOne,
},
{
key: 'two',
route: 'step2',
component: PageTwo,
},
{
key: 'three',
route: 'step3',
component: PageThree,
},
];
;
```
--------------------------------
### Example Usage of DateRangePicker
Source: https://docs.guidewire.com/jutro/documentation/10.10/date-range
Demonstrates how to use the DateRangePicker component with label and onChange props. The onChange handler logs the selected start and end dates.
```javascript
console.log('The dates chosen are', value.start, value.end)
}
/>
```
--------------------------------
### Basic DateRangePicker Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/date-range
Demonstrates how to use the DateRangePicker component to allow users to select a start and end date. It includes configuration for labels and an onChange handler to capture the selected dates.
```jsx
console.log('The dates chosen are', value.start, value.end)
}
/>
```
--------------------------------
### Uncontrolled TextInput Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/controlled
Shows an uncontrolled TextInput component where the internal state is managed by the component itself. The `onChange` callback is used to react to user input, and `initialValue` can set the starting state.
```javascript
{
console.log(e.target.value);
}}
/>
```
--------------------------------
### Combobox Filtered by User Input
Source: https://docs.guidewire.com/jutro/documentation/10.10/drop-downs-combobox
Demonstrates how to use the Combobox component with the `useFilteredOptions` hook to filter options dynamically based on user input. The example shows a basic setup for selecting a character from a predefined list.
```javascript
import React from 'react';
import { Combobox, ComboboxOption } from '@jutro/components'; // Assuming these are the correct imports
import { useFilteredOptions } from './hooks'; // Assuming hook location
export function ComboWithFilter() {
const CHARACTERS = [
{ 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 (
{filteredOptions.map(({ id, label }) => (
))}
);
}
```
--------------------------------
### Jutro AppFloorPlan Initialization in React
Source: https://docs.guidewire.com/jutro/documentation/10.10/floorplans-layouts
Demonstrates how to import and use the AppFloorPlan component in a React application, loading floor plan configurations from a JSON file.
```jsx
import config from './config.json5';
import { AppFloorPlan } from '@jutro/floorplan';
export default function MyApp() {
const floorPlans = Object.values(floorPlanConfig).filter(isObject);
return ;
}
```
--------------------------------
### HeaderPanel Basic Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/page-layouts/components/header-panel
Demonstrates the fundamental usage of the HeaderPanel component, which acts as a wrapper to designate the elements that constitute the page header. The header spans the full viewport width and is a persistent element for consistent navigation across products.
```html
Sample heading text
```
--------------------------------
### PhoneNumberValue: Basic Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/phone-number-value
A standard example of how to use the PhoneNumberValue component with a phone number object. This demonstrates the primary way to pass data to the component.
```jsx
```
--------------------------------
### Jutro Platform CLI Help and Usage
Source: https://docs.guidewire.com/jutro/documentation/10.10/platform/jutro-platform-cli/overview-cli
This documentation block details the output of the Jutro Platform CLI's help command (`jutro --help`). It provides the CLI version, general usage instructions, and lists available command topics like 'generate' and 'validate', along with brief descriptions of their functionality. This helps users understand the CLI's capabilities and how to invoke its commands.
```APIDOC
The CLI tool for the Jutro Platform
VERSION
@jutro/cli-platform/0.17.1 darwin-x64 node-v16.14.2
USAGE
$ jutro [COMMAND]
TOPICS
generate Generates i18n translations, components and product metadata for your Jutro app
validate Validates your Jutro app to ensure that it follows Guidewire standards
```
--------------------------------
### Jutro Timezone List Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/time-picker
Provides an example array of IANA timezones, illustrating the structure for the 'JutroTimezone' type used by Jutro components. This defines the possible values for timezone-related properties.
```javascript
const timeZones = [
'Africa/Lagos',
'Africa/Maputo',
'Africa/Monrovia',
// ... and so on
];
```
--------------------------------
### Controlled Select Component Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/drop-downs-select
Provides an example of a controlled Select component where the selected value is managed by component state. The `value` prop is used to bind the state, and an `onChange` handler updates it.
```javascript
import React, { useState } from 'react';
import { Select, SelectOption } from '@guidewire/design-system'; // Assuming import path
export function SelectControlled() {
const [updatedValue, setNewValue] = useState(null);
const onChange = (e, newValue) => {
setNewValue(newValue);
};
const options = [
,
,
,
,
,
];
return (
);
}
```
--------------------------------
### Jutro Test: Component Test Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/testing-philosophy
Provides an example of a component test using `render` and `screen.getByRole` from the `@jutro/test` package. This snippet illustrates testing a React component's output by querying for a heading with specific accessible name.
```javascript
import { render, screen } from '@jutro/test';
test('has correct welcome text', () => {
render(
);
expect(
screen.getByRole('heading', { name: 'Welcome, John Doe' })
).toBeInTheDocument();
});
```
--------------------------------
### Jutro Micro Frontend Development Guidance
Source: https://docs.guidewire.com/jutro/documentation/10.10/mfe-overview
Provides essential guidance on developing micro frontends within the Jutro ecosystem, including best practices and recommendations.
```APIDOC
Jutro Micro Frontend Development:
- Core Concept: A micro frontend is a Jutro app built from a micro frontend app template, designed for a single purpose (e.g., transaction flow).
- Embedding: These apps are exposed as micro frontends and can be embedded into consuming shell applications.
- Props: Shell apps can pass properties (props) to the embedded micro frontends.
- Shell App Examples: Composite applications serving end-users, such as those for insurance quote generation or claim processing.
- Recommendation:
- Guidewire does not recommend using apps created from standalone app templates as micro frontends.
- Embedding standalone apps may lead to unexpected results and is discouraged.
```
--------------------------------
### Jutro Icons Package Introduction
Source: https://docs.guidewire.com/jutro/documentation/10.10/icon
Announces the introduction of the new `@jutro/icons` package, which contains all Guidewire icon components. It also mentions an environment variable to disable legacy icons.
```bash
New package: `@jutro/icons`
Environment variable to opt-out of deprecated icons:
`JUTRO_DISABLE_LEGACY_ICONS=true`
```
--------------------------------
### ColumnsLayout with Variant Prop Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/columns-layout
Demonstrates the usage of the 'variant' prop within the ColumnsLayout component to control how child columns are stacked or merged based on screen breakpoints. The example shows merging columns to the first column on tablet.
```jsx
```
--------------------------------
### RadioGroup Input Validation Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/radio-group
Shows how to implement custom validation logic for the RadioGroup component using the `onChange` event and `stateMessages` property to display error messages. The example handles validation when a specific option is selected.
```javascript
export function RadioValidation() {
const [groupValidationMessages, setGroupValidationMessages] = useState({});
const onChange = useCallback((e, newValue) => {
setGroupValidationMessages({});
if (newValue == '1') {
setGroupValidationMessages({
error: ['Only second option can be marked'],
});
}
}, []);
return (
);
}
```
--------------------------------
### Uncontrolled Accordion Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/controlled
Demonstrates an Accordion component in uncontrolled mode. The visibility of cards is managed internally, with initial expansion controlled by the `initialExpanded` prop. This example shows how to display content in tabs without affecting application state.
```javascript
const UncontrolledAccordion = () => {
return (
Test card 1
Test card 2
);
};
```
--------------------------------
### RadioGroup Component Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/radio-group
Demonstrates how to use the RadioGroup component with multiple Radio children. This example shows passing standard HTML attributes like 'id' to the Radio components, which are then applied to the underlying HTML input elements.
```jsx
```
--------------------------------
### DatePicker Validation Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/date-picker
Demonstrates how to use the `onChange` property of the DatePicker component to handle validation. It parses error codes like 'INVALID_DATE', 'MIN_EXCEEDED', and 'MAX_EXCEEDED' to display user-friendly messages via `stateMessages`. This example utilizes React's `useState` and `useCallback` hooks.
```javascript
function DatePickerMinMaxValidation() {
const [validationMessages, setValidationMessages] = useState({});
const minDate = { day: 1, month: 1, year: 2022 }
const maxDate = { day: 31, month: 12, year: 2022 }
function JutroDateToString (date) {
return `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`
}
const parseErrorCode = (errorObject: {errorCode?:string}) => {
if (!errorObject){
return
}
const { errorCode } = errorObject
if (errorCode === 'INVALID_DATE') {
return { error: ['Please enter a valid date.'] };
}
if (errorCode === 'MIN_EXCEEDED') {
return { error: [`Please enter a date after ${JutroDateToString(minDate)}.`] };
}
if (errorCode === 'MAX_EXCEEDED') {
return { error: [`Please enter a date before ${JutroDateToString(maxDate)}.`] };
}
};
const onChange = useCallback((e, newValue, errorObject) => {
setValidationMessages({});
const errorDetected = parseErrorCode(errorObject)
if (errorDetected) {
setValidationMessages(errorDetected);
}
}, []);
return (
);
}
```
--------------------------------
### Jutro Wizard Component API Documentation
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Comprehensive API documentation for the Jutro Wizard component, detailing all available props, their types, descriptions, and usage requirements. This includes configuration for routing, navigation, actions, and styling.
```APIDOC
Wizard Component:
Manages the rendering of wizard steps and navigation.
Props:
basePath: string (required)
Description: Base path for the wizard; used when building step links.
baseRoute: string (required)
Description: Base route for the wizard; used when building step routes.
location: object (required)
Description: Current path location, provided by react-router. See [react-router props](https://github.com/Javascript-Ninja/react-router-prop-types/blob/master/src/index.ts#L3).
actionBarLayout: 'default' | 'spaceEvenly'
Description: The type of layout applied to action bar items: 'default' - keeps items with visual separation, 'spaceEvenly' - distributes items evenly in available grid space.
bodyClassName: string
Description: CSS class name for the body of this component.
buttonProps: object
Description: Overrides for action buttons. Expected structure: { cancel:{}, previous: {}, next: {}, finish: {} }.
callbackMap: object
Description: Callback map for the resolver. Expected structure: {onStartWizard: func, onFinishWizard: func, onCancelWizard: func,}.
cancelPath: string
Description: Path to navigate on 'cancel'; if none provided, the 'cancel' button will not be displayed.
className: string
Description: CSS class name for this component.
componentMap: object
Description: Component map for page component resolver.
finishPath: string
Description: Path to navigate on 'finish'; if none provided, the 'finish' button will not be displayed.
history: object
Description: React-Router history object. See [react-router props](https://github.com/el-psy-k/react-router-prop-types/blob/master/src/index.ts#L17).
initialStepPath: string
Description: Path to the initial step (will be appended to 'basePath'); if not provided, the first step will be displayed.
```
--------------------------------
### Jutro Translation Workflow Commands
Source: https://docs.guidewire.com/jutro/documentation/10.10/i18n
Commands for managing the translation process in a Jutro application. `npm start` enables live preview mode, reflecting code changes instantly. `npm run i18n` is crucial for extracting new strings from the codebase and merging them into translation files, a process also triggered by rebuilding the application.
```bash
npm start
# Enters live preview mode.
npm run i18n
# Extracts and merges translation strings. Also called during build.
```
--------------------------------
### Step Progress Bar Examples (React)
Source: https://docs.guidewire.com/jutro/documentation/10.10/progress-indicator-step-bar
Provides examples of how to implement the Step progress bar component. It demonstrates basic horizontal usage and a vertical layout option using the `isVertical` prop. The component accepts a `steps` array, where each step object can define its state (visited, active, disabled) and title.
```React
```
```React
```
--------------------------------
### Header Configuration Properties
Source: https://docs.guidewire.com/jutro/documentation/10.10/page-layouts/appfloorplan
Details properties for configuring the main header component, including application switcher behavior, footer content, avatar display, and navigation routes.
```APIDOC
appSwitcherCollapsibleGroupsThreshold: number
Description: Number of items from which the groups in AppSwitcher are collapsible and the search field is displayed.
appSwitcherFooterText: IntlMessageShape | LinkPropTypes
Description: Text displayed on the footer link in AppSwitcher. See IntlMessageShape and Link for more detailed information on the accepted types.
appSwitcherFooterUrl: Record void>
Description: URL to which the footer link in the AppSwitcher leads.
appSwitcherHideFooter: boolean
Description: If set to true, the footer in the AppSwitcher is hidden.
appSwitcherItems: AppSwitcherItems
Description: Array of items to be displayed in the App Switcher menu.
appSwitcherSearchEnabled: boolean
Description: If set to true, enables the search field in AppSwitcher if the number of items are equal to or above the appSwitcherCollapsibleGroupsThreshold value.
avatarChildren: React.ReactNode
Description: Avatar content to be rendered before routes links.
avatarProps: AvatarPropTypes
Description: Avatar props to be passed down if not using auth info (username, imageSource, title, subtitle).
burgerMenuRoutes: Route[]
Description: Routes to be rendered in the burger menu, for breakpoints smaller than desktop.
callbackMap: Record void>
Description: Map to resolve callbacks on avatar links.
className: string
Description: CSS class name for this component.
```
--------------------------------
### GridItem with colStart and rowStart
Source: https://docs.guidewire.com/jutro/documentation/10.10/grid
Demonstrates using `colStart` and `rowStart` props on `GridItem` for precise layout control within a `Grid`. These props, combined with `colSpan` and `rowSpan`, allow for granular customization of the Grid layout.
```javascript
import { Grid, GridItem } from `@jutro/layout`;
First ItemSecond ItemThird ItemFourth ItemFifth Item
```
--------------------------------
### PhoneNumberInput Component Usage
Source: https://docs.guidewire.com/jutro/documentation/10.10/phone-number
Example of how to use the PhoneNumberInput component with its initial value and label.
```jsx
```
--------------------------------
### WizardPage Component API Documentation
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Comprehensive API documentation for the WizardPage component, detailing all available props, their types, descriptions, and whether they are required.
```APIDOC
WizardPage Component Props:
- children: required
- Type: `node`
- Description: The content to be displayed in the page.
- id: required
- Type: `string`
- Description: Unique identifier for the component.
- location: required
- Type: `object`
- Description: The location object with pathname of current url. Usually provided from the location.pathname prop passed from the router.
- buttonProps
- Type: `object`
- Description: Overrides for action buttons.
- className
- Type: `string`
- Description: CSS class name for this component.
- headerClass
- Type: `string`
- Description: CSS class passed to wizard page header.
- knockoutPath
- Type: `string`
- Description: Path to navigate on fail of 'next'; if none is provided, no default failTo will be added to the 'next' button.
- onLoad
- Type: `function`
- Description: The callback to invoke when page is loaded; returns true, false or a promise.
- onNext
- Type: `function`
- Description: The callback to invoke when the 'next' button is clicked; returns true, false or a promise.
- onPageEventInfo
- Type: `function`
- Description: The callback to get page event info to send with a wizard event.
- onPrevious
- Type: `function`
- Description: Callback to invoke when the 'back' button is clicked; returns true, false or a promise.
- pageEventInfo
- Type: `function | object`
- Description: Object or callback to get page event info to send with a wizard event.
- panelClassName
- Type: `string`
- Description: Additional class name for the panel.
- renderHeader
- Type: `function`
- Description: Function which renders a custom panel header element.
- renderPanel
- Type: `function`
- Description: The callback to the render panel method; if null then renders without a panel.
General Component Properties (also applicable to WizardPage):
- icon
- Type: `string | Icon`
- Description: An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, `CheckIcon` or `'gw-check'`.
- iconClassName
- Type: `string`
- Description: CSS class name for the icon.
- iconPosition
- Type: `left | right`
- Description: Where the icon is placed relative to the text.
- message
- Type: `IntlMessageShape`
- Description: The message shown when executing the trigger/promise.
- size
- Type: `small | medium`
- Description: Allows you to select the smaller or larger variant.
- to
- Type: `IntlMessageShape | IntlRouterLocation`
- Description: The destination path when the promise is resolved; can be an object like ``.
- toMessage
- Type: `string`
- Description: The message shown when the promise is resolved; shown if 'to' is not provided.
```
--------------------------------
### Basic TreeView Structure
Source: https://docs.guidewire.com/jutro/documentation/10.10/tree-view
A fundamental example illustrating the basic structure of the TreeView component with nested TreeNode elements.
```jsx
```
--------------------------------
### Wizard Component API Documentation
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Comprehensive API documentation for core Jutro wizard components, detailing their properties, types, and descriptions for customization.
```APIDOC
WizardActionBar:
Props:
actions: required
Type: []
Description: The list of actions to be rendered in the .
className:
Type: string
Description: CSS class name for this component.
layout:
Type: 'default' | 'spaceEvenly' | 'center'
Description: Type of layout applied to action bar items: 'default' - keeps items with visual separation, 'spaceEvenly' - distributes items evenly in available grid space, 'center' - center button horizontally, will vertically stack multiple buttons.
WizardProgress:
Props:
basePath:
Type: string
Description: Path to be used when composing the steps urls.
location:
Type: 'none' | 'small' | 'medium' | 'large'
Description: To look for matching subroutes.
progressBarClassName (deprecated):
Type: string
Description: Class to override progress bar step styles.
WizardPrompt:
Props:
cancelPrompt:
Type: object
Description: Configuration for the cancel prompt, including 'when' condition and 'message'.
previousPrompt:
Type: object
Description: Configuration for the previous prompt, including 'when' condition and 'message'.
```
--------------------------------
### DropdownMenuButton Usage Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/dropdown-menu-button
Demonstrates how to use the DropdownMenuButton component with child DropdownMenuLink items.
```jsx
First menu itemSecond menu itemThird menu item
```
--------------------------------
### Import Jutro Wizard Components
Source: https://docs.guidewire.com/jutro/documentation/10.10/wizard
Illustrates the primary import statement for accessing Wizard-related features from the `@jutro/wizard-next` package. It lists the main components provided by the package, including `Wizard`, `WizardPage`, `WizardProgress`, `WizardActionBar`, and `WizardPrompt`.
```javascript
import { * } from '@jutro/wizard-next';
```
--------------------------------
### Info Label Component Examples
Source: https://docs.guidewire.com/jutro/documentation/10.10/info-label
Demonstrates various ways to use the InfoLabel component, including basic text display, adding an icon, and applying different type styles for visual distinction.
```jsx
Lorem ipsum
```
```jsx
Lorem ipsum
```
```jsx
Lorem ipsum
```
--------------------------------
### Configure localeSettings in config.json
Source: https://docs.guidewire.com/jutro/documentation/10.10/i18n
Example configuration for `localeSettings` in `src/config/config.json` to define available locales, languages, and default preferences.
```JSON
{
"localeSettings": {
"availableLocales": ["en-US", "es-ES", "es-MX", "de-DE", "pl"],
"availableLanguages": ["en", "es", "de", "pl", "yy"],
"preferredLocale": "en-US",
"preferredLanguage": "en",
"defaultCountryCode": "US",
"defaultCurrency": "USD"
}
}
```
--------------------------------
### MultipleSelect Component Example
Source: https://docs.guidewire.com/jutro/documentation/10.10/drop-downs-multiselect
Demonstrates the basic usage of the MultipleSelect component with SelectOption children in JSX.
```jsx
```