import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Customization/Schema Component Types" />

# Schema Component Types
<br />

<ul>
    <li><a href="#input">INPUT</a></li>
    <li><a href="#textarea">TEXTAREA</a></li>
    <li><a href="#dropdown">DROPDOWN</a></li>
    <li><a href="#toggle">TOGGLE</a></li>
    <li><a href="#toggle_check">TOGGLE_CHECK</a></li>
    <li><a href="#colorpicker">COLORPICKER</a></li>
    <li><a href="#radio">RADIO</a></li>
    <li><a href="#checkbox">CHECKBOX</a></li>
    <li><a href="#slider">SLIDER</a></li>
    <li><a href="#group_header">GROUP_HEADER</a></li>
    <li><a href="#spacer">SPACER</a></li>
    <li><a href="#slides">SLIDES</a></li>
    <li><a href="#product_list">PRODUCTS_LIST</a></li>
    <li><a href="#image_uploader">IMAGE_UPLOADER</a></li>
    <li><a href="#tabs_list">TABS_LIST</a></li>
    <li><a href="#conditional-rendering-of-schema-form-settings">Conditional rendering of schema form settings</a></li>
</ul>

### INPUT

#### Description

INPUT types display an input field.

#### Screenshot

<img src="/INPUT.png" alt="INPUT" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the input field.</td>
    </tr>
    <tr>
        <td>placeholder</td>
        <td>The placeholder text for the input field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default value text for the input field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>INPUT</b>.</td>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the input field value is required. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>validation.pattern</td>
        <td>The regex expression to validate the input field value.</td>
    </tr>
    <tr>
        <td>validation.message</td>
        <td>The error validation message text.</td>
    </tr>
</table>

#### Form Schema Example

```js
sliderTitle: {
    title: 'Slider Title',
    placeholder: 'Slider title',
    defaultValue: 'Slider title',
    type: INPUT,
    required: true,
    validation: {
        pattern: /^[a-zA-Z0-9 ]+$/gm,
        message: 'This field is invalid'
    }
},
```

### TEXTAREA

#### Description

TEXTAREA types display a multi-line plain-text editing control.

#### Screenshot

<img src="/TEXTAREA.png" alt="TEXTAREA" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the multi-line plain-text field.</td>
    </tr>
    <tr>
        <td>placeholder</td>
        <td>The placeholder text for multi-line plain-text field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default value text for multi-line plain-text field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>TEXTAREA</b>.</td>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the multi-line plain-text field value is required. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>validation.pattern</td>
        <td>The regex expression to validate the multi-line plain-text field value.</td>
    </tr>
    <tr>
        <td>validation.message</td>
        <td>The error validation message text.</td>
    </tr>
</table>

#### Form Schema Example

```js
description: {
    title: 'Description',
    placeholder: 'Description',
    defaultValue: 'Description',
    type: TEXTAREA,
    required: true,
    validation: {
        pattern: /^[a-zA-Z0-9 ]+$/gm,
        message: 'This field is invalid'
    }
}
```

### DROPDOWN

#### Description

DROPDOWN types display a control that provides a menu of options through a dropdown list. One option can be selected.

#### Screenshot

<img src="/DROPDOWN.png" alt="DROPDOWN" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the dropdown list field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default option value for the dropdown list field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>DROPDOWN</b>.</td>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the dropdown list field value is required. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>options</td>
        <td>The menu of options for the dropdown list.</td>
    </tr>
    <tr>
        <td>validation.default</td>
        <td>The default option text to display when no options were selected</td>
    </tr>
</table>

#### Form Schema Example

```js
const HEIGHT_OPTIONS = [
    { value: 400, label: 'Small 400px' },
    { value: 555, label: 'Medium 555px' },
    { value: 660, label: 'Large 660px' }
];

height: {
    title: 'Height',
    type: DROPDOWN,
    required: false,
    defaultValue: HEIGHT_OPTIONS[1].value,
    options: HEIGHT_OPTIONS,
    validation: {
        default: 'Select'
    }
}
```

### TOGGLE

#### Description

TOGGLE types display a control that provides a switch between two different options.

#### Screenshot

<img src="/TOGGLE.png" alt="TOGGLE" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>labelOn</td>
        <td>The label text to display when the switch is on.</td>
    </tr>
    <tr>
        <td>labelOdd</td>
        <td>The label text to display when the switch is off.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default switch option. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>TOGGLE</b>.</td>
    </tr>
</table>

#### Form Schema Example

```js
showRatings: {
    labelOn: 'uieditor.sfbComponent.productBanner.showRatings.labelOn',
    labelOff: 'uieditor.sfbComponent.productBanner.showRatings.labelOff',
    defaultValue: true,
    type: TOGGLE
}
```

### TOGGLE_CHECK

#### Description

TOGGLE_CHECK types display a control that provides a checkbox to switch between two different options.

#### Screenshot

<img src="/TOGGLE_CHECK.png" alt="TOGGLE_CHECK" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>label</td>
        <td>The label text for the checkbox field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default option value for the checkbox field. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>TOGGLE_CHECK</b>.</td>
    </tr>
    <tr>
        <td>marginSize</td>
        <td>The margin between the checkbox field in pixel (px).</td>
    </tr>
    <tr>
        <td>indentSize</td>
        <td>The left padding for the checkbox field. The value is multiplied by 25 pixels (px).</td>
    </tr>
</table>

#### Form Schema Example

```js
isDisplayCarets: {
    label: 'Display carets',
    defaultValue: true,
    type: TOGGLE_CHECK,
    marginSize: 10,
    indentSize: 0
},
```

### COLORPICKER

#### Description

COLORPICKER types display a control that provides a color palette to select a specific color.

#### Screenshot

<img src="/COLORPICKER.png" alt="COLORPICKER" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the color picker field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default color value in hex code for the color picker field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>COLORPICKER</b>.</td>
    </tr>
</table>

#### Form Schema Example

```js
backgroundColor: {
    title: 'Backround color',
    defaultValue: '#474747',
    type: COLORPICKER
},
```

### RADIO

#### Description

RADIO types display a control that provides a menu of options (also known as radio buttons). One option can be selected.

#### Screenshot

<img src="/RADIO.png" alt="RADIO" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the radio button group field.</td>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the radio button group field value is required. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default value the radio button group field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>RADIO</b>.</td>
    </tr>
</table>

#### Form Schema Example

```js
const SLIDE_SIZES = [
    { value: 'xsmall', label: 'X-Small' },
    { value: 'small', label: 'Small' },
    { value: 'medium', label: 'Medium' },
    { value: 'large', label: 'Large' },
];

size: {
    title: 'Size',
    required: true,
    defaultValue: SLIDE_SIZES[0].value,
    options: SLIDE_SIZES,
    type: RADIO
}
```

### CHECKBOX

#### Description

CHECKBOX types display a control that provides a menu of options through checkboxes group. Multiple options can be selected.

#### Screenshot

<img src="/CHECKBOX.png" alt="CHECKBOX" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the checkbox group field value is required. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default value the checkbox group field.</td>
    </tr>
    <tr>
        <td>options</td>
        <td>The menu of options for the checkbox group field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>CHECKBOX</b>.</td>
    </tr>
    <tr>
        <td>marginSize</td>
        <td>The margin between the checkbox group field in pixel (px).</td>
    </tr>
    <tr>
        <td>indentSize</td>
        <td>The left padding for the checkbox group field. The value is multiplied by 25 pixels (px).</td>
    </tr>
</table>

#### Form Schema Example

### SLIDER

#### Description

SLIDER types display a control that provides a slider to specify a numeric value between a specified minimum and maximum value.

#### Screenshot

<img src="/SLIDER.png" alt="SLIDER" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the slider field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default value of the slider field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>CHECKBOX</b>.</td>
    </tr>
    <tr>
        <td>options.min</td>
        <td>The minimum numeric value</td>
    </tr>
    <tr>
        <td>options.max</td>
        <td>The maximum numeric value</td>
    </tr>
    <tr>
        <td>options.step</td>
        <td>The step numeric value</td>
    </tr>
</table>

#### Form Schema Example

```js
borderRadius: {
    title: 'uieditor.sfbComponent.sliderComponent.borderRadius.title',
    type: SLIDER,
    defaultValue: 8,
    options: {
        min: 0,
        max: 35,
        step: 1
    }
}
```

### GROUP_HEADER

#### Description

GROUP_HEADER types display a group header text.

#### Screenshot

<img src="/GROUP_HEADER.png" alt="GROUP_HEADER" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the group header.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>GROUP_HEADER</b>.</td>
    </tr>
</table>

#### Form Schema Example

```js
sliderSettings: {
    title: 'Settings',
    type: GROUP_HEADER
},
```

### SPACER

#### Description

SPACER types display a vertical space of 24px.

#### Screenshot

N/A

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>SPACER</b>.</td>
    </tr>
</table>

#### Form Schema Example

### SLIDES

#### Description

SLIDES types display a control that manages slides for the Carousel component.

#### Screenshot

<img src="/SLIDES.png" alt="SLIDES" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the checkbox group field value is required. <b>true</b> or <b>false</b>.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>The default value the checkbox group field.</td>
    </tr>
    <tr>
        <td>options</td>
        <td>The menu of options for the checkbox group field.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>CHECKBOX</b>.</td>
    </tr>
    <tr>
        <td>marginSize</td>
        <td>The margin between the checkbox group field in pixels (px).</td>
    </tr>
    <tr>
        <td>indentSize</td>
        <td>The left padding for the checkbox group field. The value is multiplied by 25 pixels (px).</td>
    </tr>
</table>

#### Form Schema Example

### PRODUCTS_LIST

#### Description

PRODUCTS_LIST types display a control that manages the product list of the Slider component for product curation.

#### Screenshot

<img src="/PRODUCT_LIST.png" alt="PRODUCT_LIST" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The product list title.</td>
    </tr>
    <tr>
        <td>defaultValue.items</td>
        <td>The array of product list.</td>
    </tr>
    <tr>
        <td>defaultValue.contentType</td>
        <td>The product list curated type. <b>manual</b> or <b>dynamic</b>.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>PRODUCT_LIST</b>.</td>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the product list is required. <b>true</b> or <b>false</b>.</td>
    </tr>
</table>

#### Form Schema Example

```js
productsList: {
    title: 'Products',
    defaultValue: {
        items: [],
        contentType: DYNAMICALLY_CURATED_CONTENT_TYPE
    },
    type: PRODUCTS_LIST,
    required: true
}
```

### IMAGE_UPLOADER

#### Description

IMAGE_UPLOADER types displays a control that allows image uploading.

#### Screenshot

<img src="/IMAGE_UPLOADER.png" alt="IMAGE_UPLOADER" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>title</td>
        <td>The label text for the image upload field.</td>
    </tr>
    <tr>
        <td>caption</td>
        <td>The caption text to display below the image upload field.</td>
    </tr>
    <tr>
        <td>placeholder</td>
        <td>The placeholder text to display inside the image upload field.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>
            The default value of the image upload field. An object with <b>filename</b>, <b>type</b>, <b>url</b>.
        </td>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>IMAGE_UPLOADER</b>.</td>
    </tr>
    <tr>
        <td>required</td>
        <td>Specify whether the image upload field is required. <b>true</b> or <b>false</b>.</td>
    </tr>
</table>

#### Form Schema Example

```js
backgroundImg: {
    title: 'Background Image',
    caption: 'Supports JPG and PNG formats up to 2MB.',
    placeholder: 'Choose File',
    defaultValue: {},
    type: IMAGE_UPLOADER,
    required: false,
}
```

### TABS_LIST

#### Description

TABS_LIST types display a control that manages the tab list of the ProductTabMenu component.

#### Screenshot

<img src="/TABS_LIST.png" alt="TABS_LIST" />

#### Properties

<table>
    <tr>
        <th>Property name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>type</td>
        <td>The schema component type: <b>IMAGE_UPLOADER</b>.</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>Specify an array of tab items.</td>
    </tr>
</table>

#### Form Schema Example

```js
const PROFILE_TABS = {
    overview: {
        label: '',
        defaultLabel: 'uieditor.tabs.overview',
        href: '/en-US/apps/163915/talech/overview',
        value: 'overview',
        selected: true,
        isEditMode: false,
        isVisible: true
    },
    features: {
        label: '',
        defaultLabel: 'uieditor.tabs.features',
        href: '/en-US/apps/163915/talech/features',
        value: 'features',
        selected: false,
        isEditMode: false,
        isVisible: true
    },
    reviews: {
        label: '',
        defaultLabel: 'uieditor.tabs.review',
        href: '/en-US/apps/163915/talech/reviews',
        value: 'reviews',
        selected: false,
        isEditMode: false,
        isVisible: true
    }
};

pageTabs: {
    type: TABS_LIST,
    defaultValue: [
        PROFILE_TABS.overview, PROFILE_TABS.features, PROFILE_TABS.reviews
    ]
}
```

### Conditional rendering of schema form settings

If you want to disable/hide one schema form setting based on the value of another schema form setting, you can use the `conditionalAttributes` property.

#### Properties

Right now, the conditional type is `isDisabled` or `isVisible`:

<table>
    <tr>
        <th>Conditional types</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>conditionalAttributes.isDisabled</td>
        <td>Disable this schema form setting based on the child condition.</td>
    </tr>
    <tr>
        <td>conditionalAttributes.isVisible</td>
        <td>Make this schema form setting visible based on the child condition.</td>
    </tr>
</table>

The child condition:

<table>
    <tr>
        <th>Condition properties</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>when</td>
        <td>The name of the schema form setting that the condition depends on</td>
    </tr>
    <tr>
        <td>connector</td>
        <td>The connector condition. <b>equals</b> or <b>notInclude</b></td>
    </tr>
    <tr>
        <td>value</td>
        <td>The value to apply</td>
    </tr>
</table>

#### Form Schema Example

```js
isDisplayCarets: {
    label: 'Display Carets',
    defaultValue: true,
    type: TOGGLE_CHECK,
    marginSize: 10
},
isDisplayCaretsOnHover: {
    label: 'Display Carets On Hover',
    defaultValue: false,
    type: TOGGLE_CHECK,
    conditionalAttributes: {
        isVisible: {
            when: 'isDisplayCarets',
            connector: 'equals',
            value: true
        }
    },
    indentSize: 1,
    marginSize: 10
}
```
