- {isLoading &&
- (
+
+
+ )}
+
+
+```jsx
+
+ Your content goes here
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Transitions
+
+ (
+ <>
+ setData({ ...data, transition: v })}
+ options={[
+ { value: 'slideFade', label: 'Slide and fade', subtitle: 'Default' },
+ { value: 'scaleFade', label: 'Scale and fade' },
+ { value: 'scaleRotateFade', label: 'Scale, rotate, and fade' },
+ ]}
+ type='menu'
+ wrapperProps={{
+ keepOpen: false,
+ }}
+ />
+
+ setData({ ...data, checked: v })}
+ label='Visible'
+ />
+
+ )}
+>
+ {(data) => (
+
+
+ )}
+
+
+```jsx
+
+ This is demo content
+
+```
+
+### Skipping initial transition
+
+If you want to skip the initial transition (when the component mounts), and just want to transition
+when the visibility changes afterwards, you can use the `noInitial` prop.
+
+```jsx
+
+ Your content goes here
+
+```
diff --git a/website/ui-components/es-ui-components/async-multi-select.mdx b/website/ui-components/es-ui-components/async-multi-select.mdx
new file mode 100644
index 000000000..c13df9745
--- /dev/null
+++ b/website/ui-components/es-ui-components/async-multi-select.mdx
@@ -0,0 +1,35 @@
+# Async multi-select
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { AsyncMultiSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { demoGetData } from './select-helpers';
+
+
+ {(data, setData) => (
+
+
+```jsx
+const getOptions = async () => {
+ ...
+};
+
+ setValue(value)}
+ loadOptions={getOptions}
+/>
+```
+
+:::note
+Props are mostly the same as for the [Single select](/components/es-ui-components/select),
+with the exceptions of `options` (which is replaced with `loadOptions`) and `simpleValue`, which is not supported.
+:::
+
+For the complete list of props, use your IDE's autocomplete functionality.
diff --git a/website/ui-components/es-ui-components/async-select.mdx b/website/ui-components/es-ui-components/async-select.mdx
new file mode 100644
index 000000000..c10de79f5
--- /dev/null
+++ b/website/ui-components/es-ui-components/async-select.mdx
@@ -0,0 +1,35 @@
+# Async single select
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { AsyncSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { demoGetData } from './select-helpers';
+
+
+ {(data, setData) => (
+
+
+```jsx
+const getOptions = async () => {
+ ...
+};
+
+ setValue(value)}
+ loadOptions={getOptions}
+/>
+```
+
+:::note
+Props are mostly the same as for the [Single select](/components/es-ui-components/select),
+with the exceptions of `options` (which is replaced with `loadOptions`) and `simpleValue`, which is not supported.
+:::
+
+For the complete list of props, use your IDE's autocomplete functionality.
diff --git a/website/ui-components/es-ui-components/base-control.mdx b/website/ui-components/es-ui-components/base-control.mdx
new file mode 100644
index 000000000..1718a02da
--- /dev/null
+++ b/website/ui-components/es-ui-components/base-control.mdx
@@ -0,0 +1,132 @@
+# Control base
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { BaseControl, Button } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { globalManifest, responsiveOptions, breakpointNames } from './responsive-helpers';
+
+The base for a lot of Eightshift UI components controls.
+
+Allows creating your controls that will fit in nicely with Eightshift UI components
+
+
+
+
+
+
+```jsx
+
+ This is demo content
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Help text
+
+
+
+
+
+
+```jsx
+
+ This is demo content
+
+```
+
+### Actions
+
+
+
+
+
+
+ }
+ >
+
+
+
+```jsx
+
+
+
+
+ }
+ // highlight-end
+>
+ This is demo content
+
+```
+
+### Inline label
+
+
+
+
+
+
+```jsx
+
+ This is demo content
+
+```
diff --git a/website/ui-components/es-ui-components/block-icons.mdx b/website/ui-components/es-ui-components/block-icons.mdx
new file mode 100644
index 000000000..a5d088351
--- /dev/null
+++ b/website/ui-components/es-ui-components/block-icons.mdx
@@ -0,0 +1,44 @@
+# Block icons
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { Button, InputField } from '@eightshift/ui-components';
+import { icons, blockIcons, BlockIcon } from '@eightshift/ui-components/icons';
+
+ (
+
diff --git a/website/ui-components/es-ui-components/breakpoint-preview.mdx b/website/ui-components/es-ui-components/breakpoint-preview.mdx
new file mode 100644
index 000000000..d596646b1
--- /dev/null
+++ b/website/ui-components/es-ui-components/breakpoint-preview.mdx
@@ -0,0 +1,148 @@
+# Breakpoint preview
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { BreakpointPreview } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+
+```jsx
+
+```
+
+
+
+
+
+```jsx
+
+```
+
+
+
+
+
+```jsx
+
+```
+
+## Button groups
+
+If buttons are related, they can be grouped with a `ButtonGroup`.
+
+
+
+
+
+
+
+
+
+```jsx
+// highlight-next-line
+
+
+
+
+// highlight-next-line
+
+```
+
+Button groups improve focus behavior - instead of having to `Tab` through each button,
+the group is treated as a single focusable element that can be navigated with left/right arrows.
+
+### Vertical group
+
+
+
+
+
+
+
+
+
+In this case, the focus navigation is handled with up/down arrows.
+
+```jsx
+
+
+
+
+
+```
+
+:::note
+By default, vertical button groups take up the full width of their container.
+:::
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Sizes
+
+ (
+
+
+```jsx
+
+```
+
+### Types
+
+ (
+
+
+```jsx
+
+```
+
+### Tooltip
+
+
+
+
+
+```jsx
+
+```
diff --git a/website/ui-components/es-ui-components/checkbox.mdx b/website/ui-components/es-ui-components/checkbox.mdx
new file mode 100644
index 000000000..f279639d8
--- /dev/null
+++ b/website/ui-components/es-ui-components/checkbox.mdx
@@ -0,0 +1,84 @@
+# Checkbox
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { Checkbox } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+/>
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Align checkbox to the end
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ // highlight-next-line
+ indeterminate={data === null}
+/>
+```
diff --git a/website/ui-components/es-ui-components/color-picker-helpers.js b/website/ui-components/es-ui-components/color-picker-helpers.js
new file mode 100644
index 000000000..21852c22d
--- /dev/null
+++ b/website/ui-components/es-ui-components/color-picker-helpers.js
@@ -0,0 +1,80 @@
+export const defaultColors = [
+ {
+ name: 'Red',
+ slug: 'red',
+ color: '#FF0000',
+ },
+ {
+ name: 'Green',
+ slug: 'green',
+ color: '#00FF00',
+ },
+ {
+ name: 'Blue',
+ slug: 'blue',
+ color: '#0000FF',
+ },
+ {
+ name: 'Yellow',
+ slug: 'yellow',
+ color: '#FFFF00',
+ },
+ {
+ name: 'Black',
+ slug: 'black',
+ color: '#000000',
+ },
+ {
+ name: 'White',
+ slug: 'white',
+ color: '#FFFFFF',
+ },
+];
+
+export const groupedColors = [
+ {
+ name: 'Red 50',
+ slug: 'red-50',
+ color: '#fef2f2',
+ },
+ {
+ name: 'Red 500',
+ slug: 'red-500',
+ color: '#ef4444',
+ },
+ {
+ name: 'Red 800',
+ slug: 'red-800',
+ color: '#991b1b',
+ },
+ {
+ name: 'Blue 100',
+ slug: 'blue100',
+ color: '#dbeafe',
+ },
+ {
+ name: 'Blue 500',
+ slug: 'blue500',
+ color: '#3b82f6',
+ },
+ {
+ name: 'Blue 700',
+ slug: 'blue700',
+ color: '#1d4ed8',
+ },
+ {
+ name: 'Green 500',
+ slug: 'green-500',
+ color: '#22c55e',
+ },
+ {
+ name: 'Black',
+ slug: 'black',
+ color: '#000000',
+ },
+ {
+ name: 'White',
+ slug: 'white',
+ color: '#FFFFFF',
+ },
+];
diff --git a/website/ui-components/es-ui-components/color-picker.mdx b/website/ui-components/es-ui-components/color-picker.mdx
new file mode 100644
index 000000000..bc1d03b23
--- /dev/null
+++ b/website/ui-components/es-ui-components/color-picker.mdx
@@ -0,0 +1,185 @@
+# Color picker
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { ColorPicker, OptionSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { defaultColors, groupedColors } from './color-picker-helpers';
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+const defaultColors = [
+ {
+ name: 'Red',
+ slug: 'red',
+ color: '#FF0000',
+ },
+ {
+ name: 'Green',
+ slug: 'green',
+ color: '#00FF00',
+ },
+ {
+ name: 'Blue',
+ slug: 'blue',
+ color: '#0000FF',
+ },
+ ...
+];
+
+ setData(value)}
+ colors={myColors}
+/>
+```
+
+:::tip
+In Frontend libs and Frontend libs Tailwind you can use the `getOption` helper to fetch the color data based on the list in the manifes.
+:::
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Allow deselecting a color
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ colors={myColors}
+ // highlight-next-line
+ clearable
+/>
+```
+
+### Disable color grouping
+
+By default, colors are grouped by their names, e.g. `red-100`, `red-200`, `red-300`...
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ colors={myColors}
+ // highlight-next-line
+ noColorGroups
+/>
+```
+
+### Show color hex code in the dropdown
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ colors={myColors}
+ // highlight-next-line
+ showColorCode
+/>
+```
+
+### Picker type
+
+ (
+ setData({ ...data, type: value })}
+ options={[
+ { value: 'default', label: 'Default', subtitle: default },
+ { value: 'fillColor', label: 'Fill color', subtitle: fillColor },
+ { value: 'textColor', label: 'Text color', subtitle: textColor },
+ {
+ value: 'textHighlightColor',
+ label: 'Text highlight color',
+ subtitle: textHighlightColor,
+ },
+ {
+ value: 'listMarkerColor',
+ label: 'List marker color',
+ subtitle: listMarkerColor,
+ },
+ ]}
+ type='menu'
+ />
+ )}
+>
+ {(data, setData) => {
+ return (
+ setData({ ...data, color: value })}
+ aria-label='Color picker'
+ colors={groupedColors}
+ type={data.type}
+ />
+ );
+ }}
+
+
+```jsx
+ setData(value)}
+ colors={myColors}
+ // highlight-next-line
+ type='textColor'
+/>
+```
diff --git a/website/ui-components/es-ui-components/color-swatch.mdx b/website/ui-components/es-ui-components/color-swatch.mdx
new file mode 100644
index 000000000..433b0f22e
--- /dev/null
+++ b/website/ui-components/es-ui-components/color-swatch.mdx
@@ -0,0 +1,90 @@
+# Color swatch
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { ColorSwatch } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+/>
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Change number of columns
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ // highlight-next-line
+ columns={14}
+/>
+```
+
+### Mark outer columns as "gutter"
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ columns={14}
+ // highlight-next-line
+ showOuterAsGutter
+/>
+```
+
+### No offset thumb
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ // highlight-next-line
+ disableOffset
+/>
+```
+
+### No width thumb
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+ // highlight-next-line
+ disableWidth
+/>
+```
diff --git a/website/ui-components/es-ui-components/component-toggle.mdx b/website/ui-components/es-ui-components/component-toggle.mdx
new file mode 100644
index 000000000..f5d01b5ee
--- /dev/null
+++ b/website/ui-components/es-ui-components/component-toggle.mdx
@@ -0,0 +1,144 @@
+# Component toggle
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { ComponentToggle, OptionSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+ {(data, setData) => (
+
+
+ )}
+
+
+```jsx
+ setValue(value)}
+>
+ Component options go here
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Hide the use toggle
+
+
+ {(data, setData) => (
+
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ noUseToggle
+>
+ Component options go here
+
+```
+
+### Disable expand button
+
+
+ {(data, setData) => (
+
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ expandButtonDisabled
+>
+ Component options go here
+
+```
+
+### Styles
+
+ (
+ setData({ ...data, design: value })}
+ options={[
+ { value: 'default', label: 'Default', subtitle: default },
+ { value: 'compact', label: 'Compact', subtitle: compact },
+ { value: 'compactIcon', label: 'Compact (icon only)', subtitle: compactIcon },
+ { value: 'compactLabel', label: 'Compact (label only)', subtitle: compactLabel },
+ ]}
+ type='menu'
+ />
+ )}
+>
+ {(data, setData) => (
+ setData({ ...data, use: value })}
+ design={data.design}
+ >
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ design='compact'
+>
+ Component options go here
+
+```
diff --git a/website/ui-components/es-ui-components/container-panel.mdx b/website/ui-components/es-ui-components/container-panel.mdx
new file mode 100644
index 000000000..cdad16cbe
--- /dev/null
+++ b/website/ui-components/es-ui-components/container-panel.mdx
@@ -0,0 +1,190 @@
+# Container panel
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { ContainerPanel, Checkbox, Button } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+A perfect shell for options within the Block editor sidebar. Replaces the default WordPress `` component.
+
+
+
+
+
+
+```jsx
+
+ This is demo content
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Closable
+
+
+
+
+
+
+```jsx
+
+ This is demo content
+
+```
+
+### Use toggle
+
+
+ {(data, setData) => (
+
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ // highlight-end
+>
+ This is demo content
+
+```
+
+### Use toggle and closable
+
+
+ {(data, setData) => (
+
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ closable
+ // highlight-end
+>
+ This is demo content
+
+```
+
+### Externally toggle use
+
+ (
+
+
+ )}
+
+
+```jsx
+
+ This is demo content
+
+```
+
+### Actions
+
+
+ {(data, setData) => (
+
+
+
+
+ }
+ closable
+ >
+
+ )}
+
+
+```jsx
+
+
+
+
+ }
+ // highlight-end
+>
+ This is demo content
+
+```
diff --git a/website/ui-components/es-ui-components/draggable-list-helpers.js b/website/ui-components/es-ui-components/draggable-list-helpers.js
new file mode 100644
index 000000000..0591f8972
--- /dev/null
+++ b/website/ui-components/es-ui-components/draggable-list-helpers.js
@@ -0,0 +1,46 @@
+import { DraggableList, DraggableListItem, Switch } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+export const draggableListDefaultItems = [
+ {
+ toggle: false,
+ title: 'Item 1',
+ icon: icons.num1Circle,
+ },
+ {
+ toggle: true,
+ title: 'Item 2',
+ icon: icons.num2Circle,
+ },
+ {
+ toggle: true,
+ icon: icons.num3Circle,
+ },
+];
+
+export const DraggableListDemo = ({ data, setData, ...rest }) => {
+ return (
+
+ {(item) => {
+ const { toggle, title, icon, updateData } = item;
+
+ return (
+
+ updateData({ toggle: value })}
+ />
+
+ );
+ }}
+
+ );
+};
diff --git a/website/ui-components/es-ui-components/draggable-list.mdx b/website/ui-components/es-ui-components/draggable-list.mdx
new file mode 100644
index 000000000..4dd9b19f9
--- /dev/null
+++ b/website/ui-components/es-ui-components/draggable-list.mdx
@@ -0,0 +1,40 @@
+# Draggable list
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { icons } from '@eightshift/ui-components/icons';
+import { DraggableListDemo, draggableListDefaultItems } from './draggable-list-helpers';
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+>
+ {(item) => {
+ const { toggle, title, icon, updateData } = item;
+
+ return (
+
+ updateData({ toggle: value })}
+ />
+
+ );
+ }}
+
+```
+
+For the complete list of props, use your IDE's autocomplete functionality.
diff --git a/website/ui-components/es-ui-components/expandable.mdx b/website/ui-components/es-ui-components/expandable.mdx
new file mode 100644
index 000000000..32e8dceff
--- /dev/null
+++ b/website/ui-components/es-ui-components/expandable.mdx
@@ -0,0 +1,118 @@
+# Expandable
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { Expandable, Button } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+
+
+
+
+```jsx
+
+ This is demo content
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Actions
+
+Add extra controls to the right of the label.
+
+
+
+
+```jsx
+
+
+
+```jsx
+
+ This is demo content
+
+```
diff --git a/website/ui-components/es-ui-components/getting-started.mdx b/website/ui-components/es-ui-components/getting-started.mdx
new file mode 100644
index 000000000..7e04cdf53
--- /dev/null
+++ b/website/ui-components/es-ui-components/getting-started.mdx
@@ -0,0 +1,47 @@
+# Getting started
+
+## Installation
+
+It's easy to get started!
+
+### Get the package
+Install the `@eightshift/ui-components` package with your package manager of choice.
+
+### Import the styles
+
+At the minimum you have to import
+```scss
+@import '~@eightshift/ui-components/dist/assets/style.css';
+```
+
+We strongly recommend importing the font as well. This will ensure consistency between platforms and improve the overall look and feel.
+```scss
+@import '~@eightshift/ui-components/dist/assets/fonts.css';
+```
+
+To expand the font coverage to the Block editor (even the Gutenberg components), import:
+```scss
+@import '~@eightshift/ui-components/dist/assets/wp-font-enhancements.css';
+```
+
+Optionally, import the WordPress UI enhancements, which correct some of the inconsistencies in the default components.
+
+```scss
+@import '~@eightshift/ui-components/dist/assets/wp-ui-enhancements.css';
+```
+
+:::caution
+If using Frontend libs version 12 or older, skip the WordPress UI enhancements, as they will conflict with the styles included there.
+:::
+
+#### Recommended setup
+```scss
+@import '~@eightshift/ui-components/dist/assets/fonts.css';
+@import '~@eightshift/ui-components/dist/assets/wp-font-enhancements.css';
+@import '~@eightshift/ui-components/dist/assets/wp-ui-enhancements.css';
+@import '~@eightshift/ui-components/dist/assets/style.css';
+```
+
+### Enjoy!
+
+That's all! You are ready to use Eightshift UI components in your project.
diff --git a/website/ui-components/es-ui-components/gradient-editor.mdx b/website/ui-components/es-ui-components/gradient-editor.mdx
new file mode 100644
index 000000000..9ef2ee824
--- /dev/null
+++ b/website/ui-components/es-ui-components/gradient-editor.mdx
@@ -0,0 +1,24 @@
+# Gradient editor
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { GradientEditor } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+ {(data, setData) => {
+ return (
+
+
+```jsx
+ setData(value)}
+/>
+```
diff --git a/website/ui-components/es-ui-components/input-field.mdx b/website/ui-components/es-ui-components/input-field.mdx
new file mode 100644
index 000000000..2c2bad72d
--- /dev/null
+++ b/website/ui-components/es-ui-components/input-field.mdx
@@ -0,0 +1,65 @@
+# Input field
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { InputField, OptionSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ placeholder='Basic text input'
+/>
+```
+
+:::note
+If you're not setting a `label`, add an `aria-label` to help describe the field to users that use screen readers.
+:::
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Field type
+
+ (
+ setData({ ...data, type: value })}
+ options={[
+ { value: 'text', label: 'Text', subtitle: text },
+ { value: 'search', label: 'Search field', subtitle: search },
+ { value: 'url', label: 'URL', subtitle: url },
+ { value: 'tel', label: 'Phone number', subtitle: tel },
+ { value: 'email', label: 'E-mail', subtitle: email },
+ { value: 'password', label: 'Password', subtitle: password },
+ { value: 'multiline', label: 'Multi-line text', subtitle: multiline },
+ ]}
+ type='menu'
+ />
+ )}
+>
+ {(data, setData) => (
+ setData({ ...data, text: value })}
+ type={data.type}
+ aria-label='Demo field'
+ />
+ )}
+
diff --git a/website/ui-components/es-ui-components/link-input-helpers.js b/website/ui-components/es-ui-components/link-input-helpers.js
new file mode 100644
index 000000000..7e183d64b
--- /dev/null
+++ b/website/ui-components/es-ui-components/link-input-helpers.js
@@ -0,0 +1,72 @@
+import { icons } from '@eightshift/ui-components/icons';
+
+const linkData = [
+ { label: 'Eightshift', value: 'https://eightshift.com', metadata: { subtype: 'url' } },
+ {
+ label: 'This is a demo post',
+ value: 'https://your-website.com/blog/demo-post',
+ metadata: { subtype: 'post' },
+ },
+ {
+ label: 'This is a demo page',
+ value: 'https://your-website.com/demo-page',
+ metadata: { subtype: 'page' },
+ },
+ { label: 'Homepage', value: 'https://your-website.com/', metadata: { subtype: 'page' } },
+ {
+ label: '2023 top secret report',
+ value: 'https://your-website.com/2023-top-secret-report.pdf',
+ metadata: { subtype: 'attachment' },
+ },
+ {
+ label: 'Services archive',
+ value: 'https://your-website.com/services/',
+ metadata: { subtype: 'category' },
+ },
+ {
+ label: 'Sign up form',
+ value: 'https://your-website.com/forms/signup',
+ metadata: { subtype: 'eightshift-forms' },
+ },
+ {
+ label: 'How to lorem ipsum?',
+ value: 'https://your-website.com/help-articles/how-to-lorem-ipsum',
+ metadata: { subtype: 'help-article' },
+ },
+];
+
+export const getLinkData = async (searchTerm) => {
+ if (!searchTerm) {
+ return linkData;
+ }
+
+ const filtered = linkData.filter(
+ ({ label, value }) =>
+ label.toLowerCase().includes(searchTerm.toLowerCase().trim()) ||
+ value.toLowerCase().includes(searchTerm.toLowerCase().trim())
+ );
+
+ await new Promise((resolve) => setTimeout(resolve, 500));
+
+ if (filtered.length > 0) {
+ return filtered;
+ }
+
+ return [];
+};
+
+export const getIconOverrides = (type) => {
+ if (type === 'page') {
+ return icons.magicAltFillTransparent;
+ }
+
+ if (type === 'post') {
+ return icons.newspaper;
+ }
+
+ if (type === 'help-article') {
+ return icons.troubleshootAlt;
+ }
+
+ return null;
+}
diff --git a/website/ui-components/es-ui-components/link-input.mdx b/website/ui-components/es-ui-components/link-input.mdx
new file mode 100644
index 000000000..cd9b25eb8
--- /dev/null
+++ b/website/ui-components/es-ui-components/link-input.mdx
@@ -0,0 +1,90 @@
+# Link input
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { LinkInput } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { getLinkData, getIconOverrides } from './link-input-helpers';
+
+
+ {(data, setData) => (
+ setData(url)}
+ fetchSuggestions={getLinkData}
+ />
+ )}
+
+
+```jsx
+const getSearchSuggestions = async (search) => {
+ // Do your thing, and return an array of suggestions.
+ // Each item should have a `label` and a `value`.
+ // Optionally, you can include a `subtype` within
+ // `metadata` to show a different icon in the suggestions.
+};
+
+ setAttributes({ myUrl: url })}
+ fetchSuggestions={getSearchSuggestions}
+/>;
+```
+
+## Frontend libs integration
+
+If using Frontend libs (v13+) or Frontend libs Tailwind, for the `fetchSuggestions` callback you can import the included `wpSearchRoute` function.
+
+```jsx
+// highlight-next-line
+import { wpSearchRoute } from '@eightshift/frontend-libs-tailwind/scripts';
+
+...
+
+ setAttributes({ myUrl: url })}
+ // highlight-next-line
+ fetchSuggestions={getSearchSuggestions}
+/>
+```
+
+## Providing custom metadata icons
+
+If you want to provide custom icons for the search suggestions, you can provide a mapping list with the `suggestionTypeIconOverride` prop to map the `subtype` to the icon.
+
+
+ {(data, setData) => (
+ setData(url)}
+ fetchSuggestions={getLinkData}
+ suggestionTypeIconOverride={getIconOverrides}
+ help='Try searching for "demo"'
+ />
+ )}
+
+
+```jsx
+const overrides = {
+ post: icons.newspaper,
+ page: icons.magicAltFillTransparent,
+ 'help-article': icons.troubleshootAlt,
+};
+
+ setAttributes({ myUrl: url })}
+ fetchSuggestions={getSearchSuggestions}
+ // highlight-next-line
+ suggestionTypeIconOverride={(type) => overrides[type]}
+/>;
+```
+
+```jsx
+
+```
diff --git a/website/ui-components/es-ui-components/matrix-align.mdx b/website/ui-components/es-ui-components/matrix-align.mdx
new file mode 100644
index 000000000..67738f6ab
--- /dev/null
+++ b/website/ui-components/es-ui-components/matrix-align.mdx
@@ -0,0 +1,70 @@
+# Matrix align
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { MatrixAlign } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setData(value)}
+ value={data}
+/>
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Matrix size
+
+`3x3` is the default size. If needed, `2x2` can be set with the `size` prop.
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setData(value)}
+ value={data}
+/>
+```
+
+### Label
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setData(value)}
+ value={data}
+ // highlight-start
+ label='Alignment'
+ icon={icons.emptyRect}
+ // highlight-end
+/>
+```
diff --git a/website/ui-components/es-ui-components/menu.mdx b/website/ui-components/es-ui-components/menu.mdx
new file mode 100644
index 000000000..71f48336a
--- /dev/null
+++ b/website/ui-components/es-ui-components/menu.mdx
@@ -0,0 +1,459 @@
+# Menu
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { Menu, MenuItem, MenuSeparator, MenuSection, SubMenuItem } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+
+
+
+```jsx
+
+```
+
+## Menu separator
+
+
+
+
+
+```jsx
+
+```
+
+## Menu with sections
+
+:::caution
+If using sections, you **do not** mix menu sections and regular menu items.
+:::
+
+
+
+
+
+```jsx
+
+```
+
+If you need to have a top-level menu item outside of any sections you can either add a section without a label, or use `MenuSeparator` elements with a disabled `MenuItem` to act as the section label.
+
+## Menu with a sub-menu
+
+
+
+
+
+```jsx
+
+```
+
+## Menu item customization
+
+
+
+
+
+```jsx
+
+```
+
+:::note
+The `shortcut` prop is used to display additional text on the right side of the menu item.
+It will not handle keyboard shortcut management.
+:::
+
+## Single/multi-select menu items
+
+
+ {(data, setData) => (
+
+ )}
+
+
+```jsx
+
+```
+
+```jsx
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Trigger button customization
+
+
+
+
+
+```jsx
+
+```
+
+
+
+
+
+```jsx
+
+```
+
+#### Advanced customizations
+
+`triggerProps` accepts all [`Button`](/components/es-ui-components/button) props.
+
+
+
+
+
+```jsx
+
+```
+
+### Keep open after item selection
+
+By default, the menu will close after an item is selected. If you want to keep it open, use the `keepOpen` prop.
+
+
+ {(data, setData) => (
+
+ )}
+
+
+```jsx
+
+```
+
+### Open on long press
+
+If you want the menu to open on long press instead of click, use the `openOnLongPress` prop.
+
+
+
+
+
+```jsx
+
+```
+
+This allows implementing a button that can, for example, act as a toggle button by default, but open a menu on long press.
+
+**Be careful about UX and discoverability in those cases.**
+
+ (
+
+
+_Click to toggle 'bold', press and hold for more font weights._
+
+```jsx
+
+```
diff --git a/website/ui-components/es-ui-components/multi-select.mdx b/website/ui-components/es-ui-components/multi-select.mdx
new file mode 100644
index 000000000..659568926
--- /dev/null
+++ b/website/ui-components/es-ui-components/multi-select.mdx
@@ -0,0 +1,34 @@
+# Multi-select
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { MultiSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { demoOptions } from './select-helpers';
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ options={[
+ { value: 'option-1', label: 'Option 1' },
+ { value: 'option-2', label: 'Option 2' },
+ { value: 'option-3', label: 'Option 3' },
+ ]}
+/>
+```
+
+:::note
+Props are the same as for the [Single select](/components/es-ui-components/select).
+:::
+
+For the complete list of props, use your IDE's autocomplete functionality.
diff --git a/website/ui-components/es-ui-components/notice.mdx b/website/ui-components/es-ui-components/notice.mdx
new file mode 100644
index 000000000..0b547545c
--- /dev/null
+++ b/website/ui-components/es-ui-components/notice.mdx
@@ -0,0 +1,125 @@
+# Notice
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { Notice, OptionSelect, Checkbox } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+
+
+
+```jsx
+
+
+
+```jsx
+ (
+ default },
+ { value: 'error', label: 'Error', subtitle: error },
+ { value: 'info', label: 'Info', subtitle: info },
+ { value: 'placeholder', label: 'Placeholder', subtitle: placeholder },
+ { value: 'success', label: 'Success', subtitle: success },
+ { value: 'warning', label: 'Warning', subtitle: warning },
+ ]}
+ type='menu'
+ />
+ )}
+>
+ {(data) => (
+
+
+```jsx
+
+
+
+```jsx
+ (
+
+
+```jsx
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+/>
+```
+
+:::tip
+When focused inside the input field, use the up/down arrows to change the value.
+:::
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Min, max, step
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-start
+ min={-40}
+ max={40}
+ step={2}
+ // highlight-end
+/>
+```
+
+### Fixed width
+
+By default, the picker will try to calculate maximum width based on the `max` value.
+If it's not set, the width defaults to 4 characters.
+
+In cases where `min` is less than `0`, the width is slightly increased to account for the `-` sign.
+
+If you set the width to a certain number of characters, you can use the `fixedWidth` prop.
+Decimal numbers are allowed.
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ max={999}
+ // highlight-next-line
+ fixedWidth={12}
+/>
+```
+
+### Prefix and suffix
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ prefix='€'
+/>
+```
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ suffix='item(s)'
+/>
+```
+
+### Additional controls
+
+
+ {(data, setData) => (
+
+
+ )}
+
+
+```jsx
+ setValue(value)}
+>
+ // highlight-start
+
+```
+
+### Label, icon, subtitle, help, inline
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-start
+ label='Pick a number'
+ icon={icons.emptyCircle}
+ help='Help text'
+ // highlight-end
+/>
+```
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-start
+ label='Pick a number'
+ icon={icons.emptyCircle}
+ subtitle='Subtitle text'
+ inline
+ // highlight-end
+/>
+```
diff --git a/website/ui-components/es-ui-components/options-panel.mdx b/website/ui-components/es-ui-components/options-panel.mdx
new file mode 100644
index 000000000..e63e51d34
--- /dev/null
+++ b/website/ui-components/es-ui-components/options-panel.mdx
@@ -0,0 +1,92 @@
+# Options panel
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { OptionsPanel, OptionsPanelSection } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+An elegant way to display options in an options page, with a contained width and options for label and help text.
+
+
+
+
+
+
+
+
+```jsx
+
+
+ This is demo content
+
+
+```
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+## Multiple sections
+
+
+
+
+
+
+
+
+
+
+```jsx
+
+
+ Section 1 content
+
+
+ Section 2 content
+
+
+```
+
+## Title and help text
+
+
+
+
+
+
+
+
+```jsx
+
+
+ Section content
+
+
+```
diff --git a/website/ui-components/es-ui-components/placeholders.mdx b/website/ui-components/es-ui-components/placeholders.mdx
new file mode 100644
index 000000000..2c3530a34
--- /dev/null
+++ b/website/ui-components/es-ui-components/placeholders.mdx
@@ -0,0 +1,233 @@
+# Placeholders
+
+import { ComponentShowcase } from '../components/component-showcase';
+import {
+ ImagePlaceholder,
+ FilePlaceholder,
+ MediaPlaceholder,
+ Checkbox,
+ OptionSelect,
+ RichLabel,
+} from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+## Image placeholder
+
+ (
+
+
+```jsx
+ (
+ contain },
+ { value: 'cover', label: 'Cover', subtitle: cover },
+ { value: 'fill', label: 'Fill', subtitle: fill },
+ ]}
+ type='menu'
+ />
+ )}
+>
+ {(data) => (
+
+
+```jsx
+ (
+ default },
+ { value: 'auto', label: 'Auto', subtitle: auto },
+ { value: 'large', label: 'Large', subtitle: large },
+ { value: 'fullWidth', label: 'Full width', subtitle: fullWidth },
+ { value: 'fullHeight', label: 'Full height', subtitle: fullHeight },
+ { value: 'full', label: 'Full width and height', subtitle: full },
+ { value: 'video', label: 'Video (16:9)', subtitle: video },
+ ]}
+ type='menu'
+ help='Preview in docs may not be fully accurate for all sizes'
+ />
+ )}
+>
+ {(data) => (
+
+
+```jsx
+ (
+ default },
+ { value: 'simple', label: 'Simple', subtitle: simple },
+ ]}
+ type='menu'
+ />
+ )}
+>
+ {(data) => (
+
+
+```jsx
+![]()
` without a source.
+
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+
+ {(data, setData) => {
+ return (
+
+
+ );
+ }}
+
+
+```jsx
+ setData(value)}
+>
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Horizontal layout
+
+
+ {(data, setData) => {
+ return (
+
+
+ );
+ }}
+
+
+```jsx
+ setData(value)}
+ // highlight-next-line
+ orientation='horizontal'
+>
+
+```
+
+### Segmented design
+
+
+ {(data, setData) => {
+ return (
+
+
+ );
+ }}
+
+
+```jsx
+ setData(value)}
+ // highlight-next-line
+ design='segmented'
+>
+
+```
+
+### Disable certain items
+
+
+ {(data, setData) => {
+ return (
+
+
+ );
+ }}
+
+
+```jsx
+ setData(value)}
+>
+
+```
diff --git a/website/ui-components/es-ui-components/repeater-helpers.js b/website/ui-components/es-ui-components/repeater-helpers.js
new file mode 100644
index 000000000..d2bcb927c
--- /dev/null
+++ b/website/ui-components/es-ui-components/repeater-helpers.js
@@ -0,0 +1,41 @@
+import { Repeater, RepeaterItem, InputField, Toggle } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+export const RepeaterDemo = ({ data, setData, ...rest }) => {
+ return (
+
+ {(item) => {
+ const { title, toggledOption, updateData, itemIndex } = item;
+
+ return (
+
+ updateData({ toggledOption: value })}
+ />
+
+ updateData({ title: value })}
+ />
+
+ );
+ }}
+
+ );
+};
diff --git a/website/ui-components/es-ui-components/repeater.mdx b/website/ui-components/es-ui-components/repeater.mdx
new file mode 100644
index 000000000..d0add1cfe
--- /dev/null
+++ b/website/ui-components/es-ui-components/repeater.mdx
@@ -0,0 +1,179 @@
+# Repeater
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { RepeaterDemo } from './repeater-helpers';
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+>
+ {(item) => {
+ const { title, toggledOption, updateData } = item;
+
+ return (
+
+ updateData({ toggledOption: value })}
+ />
+
+ updateData({ title: value })}
+ />
+
+ );
+ }}
+
+```
+
+:::tip
+Besides the item attributes, every `item` in the render function will also include a function for updating the current item (`updateData`), the current item's index (`itemIndex`), and a function for deleting the current item (`deleteItem`).
+:::
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Set default value for newly added items
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-start
+ addDefaultItem={{
+ title: 'My new item',
+ }}
+ // highlight-end
+>
+ {...}
+
+```
+
+### Prevent item deletion when below a certain count
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ minItems={3}
+>
+ {...}
+
+```
+
+### Replace the default empty state
+
+
+ {(data, setData) => (
+ Nothing to see here...}
+ />
+ )}
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ emptyState={Nothing to see here...}
+>
+ {...}
+
+```
+
+### Don't show the empty state
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ hideEmptyState
+>
+ {...}
+
+```
+
+### Prevent adding items
+
+
+ {(data, setData) => (
+
+
+```jsx
+ setValue(value)}
+ // highlight-next-line
+ addDisabled
+>
+ {...}
+
+```
diff --git a/website/ui-components/es-ui-components/responsive-helpers.js b/website/ui-components/es-ui-components/responsive-helpers.js
new file mode 100644
index 000000000..6f889b0a7
--- /dev/null
+++ b/website/ui-components/es-ui-components/responsive-helpers.js
@@ -0,0 +1,45 @@
+export const responsiveOptions = [
+ {
+ label: 'Sans',
+ value: 'sans',
+ },
+ {
+ label: 'Serif',
+ value: 'serif',
+ },
+ {
+ label: 'Monospace',
+ value: 'mono',
+ },
+];
+
+export const globalManifest = {
+ globalVariables: {
+ breakpoints: {
+ mobile: 480,
+ tablet: 960,
+ desktop: 1440,
+ large: 1920,
+ },
+ },
+};
+
+export const globalManifest2 = {
+ globalVariables: {
+ breakpoints: {
+ sm: 480,
+ md: 960,
+ lg: 1440,
+ xl: 1920,
+ },
+ },
+};
+
+export const breakpointNames = ['mobile', 'tablet', 'desktop', 'large'];
+
+export const responsiveLegacyAttr = {
+ large: 'myAttrLarge',
+ desktop: 'myAttrDesktop',
+ tablet: 'myAttrTablet',
+ mobile: 'myAttrMobile',
+};
diff --git a/website/ui-components/es-ui-components/responsive-preview.mdx b/website/ui-components/es-ui-components/responsive-preview.mdx
new file mode 100644
index 000000000..1b85a8e85
--- /dev/null
+++ b/website/ui-components/es-ui-components/responsive-preview.mdx
@@ -0,0 +1,35 @@
+# Responsive preview
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { ResponsivePreview } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { globalManifest, responsiveOptions, breakpointNames } from './responsive-helpers';
+
+
+
+
+```jsx
+
+ Toggle me
+
+```
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
diff --git a/website/ui-components/es-ui-components/responsive.mdx b/website/ui-components/es-ui-components/responsive.mdx
new file mode 100644
index 000000000..27bba1ed8
--- /dev/null
+++ b/website/ui-components/es-ui-components/responsive.mdx
@@ -0,0 +1,437 @@
+# Responsive
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { Responsive, ResponsiveLegacy, Button, OptionSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { globalManifest, responsiveOptions, breakpointNames, responsiveLegacyAttr } from './responsive-helpers';
+
+Easily manage values that can be set per-breakpoint.
+
+:::note
+If using Frontend libs (that has **one attribute per breakpoint**), use the [ResponsiveLegacy](#responsivelegacy) component.
+:::
+
+ (
+ {JSON.stringify(data, null, 2)}
+ )}
+>
+ {(data, setData) => (
+
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ options={[
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ ]}
+ breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ breakpointData={{
+ mobile: 480,
+ tablet: 960,
+ desktop: 1440,
+ large: 1920,
+ }}
+>
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+```
+
+:::tip
+In Frontend libs Tailwind you can use the `getResponsiveData` helper to fetch breakpoint data.
+:::
+
+## Highlighted props
+
+For the complete list of props, use your IDE's autocomplete functionality.
+
+### Inline
+
+ (
+ {JSON.stringify(data, null, 2)}
+ )}
+>
+ {(data, setData) => (
+
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ options={[
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ ]}
+ breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ breakpointData={{
+ mobile: 480,
+ tablet: 960,
+ desktop: 1440,
+ large: 1920,
+ }}
+ // highlight-next-line
+ inline
+>
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+```
+
+### Different control when inline (collapsed view)
+
+:::note
+Only applies to the control for the default breakpoint.
+:::
+
+ (
+ {JSON.stringify(data, null, 2)}
+ )}
+>
+ {(data, setData) => (
+
+ {({ currentValue, handleChange, options, isInlineCollapsedView }) => (
+ handleChange(value)}
+ value={currentValue}
+ type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
+ />
+ )}
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ options={[
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ ]}
+ breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ breakpointData={{
+ mobile: 480,
+ tablet: 960,
+ desktop: 1440,
+ large: 1920,
+ }}
+ inline
+>
+ // highlight-next-line
+ {({ currentValue, handleChange, options, isInlineCollapsedView }) => (
+ handleChange(value)}
+ value={currentValue}
+ // highlight-next-line
+ type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
+ />
+ )}
+
+```
+
+### Different control when inline (expanded view)
+
+:::note
+Only applies to the control for the default breakpoint.
+:::
+
+ (
+ {JSON.stringify(data, null, 2)}
+ )}
+>
+ {(data, setData) => (
+
+ {({ currentValue, handleChange, options, isInlineExpandedView }) => (
+ handleChange(value)}
+ value={currentValue}
+ type={isInlineExpandedView ? 'radiosSegmented' : 'toggleButtons'}
+ />
+ )}
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ options={[
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ ]}
+ breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ breakpointData={{
+ mobile: 480,
+ tablet: 960,
+ desktop: 1440,
+ large: 1920,
+ }}
+ inline
+>
+ // highlight-next-line
+ {({ currentValue, handleChange, options, isInlineExpandedView }) => (
+ handleChange(value)}
+ value={currentValue}
+ // highlight-next-line
+ type={isInlineExpandedView ? 'radiosSegmented' : 'toggleButtons'}
+ />
+ )}
+
+```
+
+### Disable desktop-first/mobile-first picker
+
+ (
+ {JSON.stringify(data, null, 2)}
+ )}
+>
+ {(data, setData) => (
+
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+ )}
+
+
+```jsx
+ setValue(value)}
+ options={[
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ ]}
+ breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ breakpointData={{
+ mobile: 480,
+ tablet: 960,
+ desktop: 1440,
+ large: 1920,
+ }}
+ // highlight-next-line
+ noModeSelect
+>
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+```
+
+## `ResponsiveLegacy`
+
+:::caution
+This component is meant to be used in projects that have **one attribute per breakpoint**, e.g. regular Frontend libs. If using Frontend libs **Tailwind**, use the [Responsive](/components/es-ui-components/responsive) component.
+:::
+
+Props are mostly the same as in the `Responsive` component.
+
+Main differences:
+
+- there is not desktop-first/mobile-first mode switcher
+- there is no _Responsive preview_
+
+ (
+ {JSON.stringify(data, null, 2)}
+ )}
+>
+ {(data, setData) => (
+ {
+ setData({
+ ...data,
+ [attrName]: newVal,
+ });
+ }}
+ options={responsiveOptions}
+ breakpointData={globalManifest.globalVariables.breakpoints}
+
+ >
+ {({ currentValue, options, handleChange }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+ )}
+
+
+
+```jsx
+ {
+ setAttributes({
+ ...attributes,
+ [attributeName]: newValue,
+ });
+ }}
+ options={[
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ ]}
+ breakpointData={globalManifest.globalVariables.breakpoints}
+>
+ {({ currentValue, handleChange, options }) => (
+ handleChange(value)}
+ value={currentValue}
+ />
+ )}
+
+```
+
+### Inherited values
+
+The default value that marks an attribute as _inherited_ from the breakpoint above is an empty string.
+To set a custom one, use the `inheritValue` prop.
+
+If you need the inherited value to be `undefined`, set the `allowUndefined` prop instead.
diff --git a/website/ui-components/es-ui-components/rich-label.mdx b/website/ui-components/es-ui-components/rich-label.mdx
new file mode 100644
index 000000000..072eb51e7
--- /dev/null
+++ b/website/ui-components/es-ui-components/rich-label.mdx
@@ -0,0 +1,93 @@
+# Rich label
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { RichLabel } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { globalManifest, responsiveOptions, breakpointNames } from './responsive-helpers';
+
+Upgrade your basic labels with an optional icon and subtitle.
+
+
+
+
+```jsx
+
+
+
+```jsx
+
+
+
+```jsx
+// The container has a red text color applied.
+
+
+
+```jsx
+// The container has a red text color applied.
+
+ {(data, setData) => (
+
+ )}
+
+
+```jsx
+const CustomDropdownIndicator = (props) => {
+ return (
+
+
+ );
+};
+
+
-
+ {isLoading && (
+
);
};
diff --git a/website/ui-components/es-ui-components/animated-visibility.mdx b/website/ui-components/es-ui-components/animated-visibility.mdx
new file mode 100644
index 000000000..ce0df7417
--- /dev/null
+++ b/website/ui-components/es-ui-components/animated-visibility.mdx
@@ -0,0 +1,113 @@
+# Animated visibility
+
+import { ComponentShowcase } from '../components/component-showcase';
+import { AnimatedVisibility, Checkbox, OptionSelect } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+Allows showing/hiding content in an animated way. After hiding, the content is unmounted from the DOM.
+
+
+
- }
-
+ )}
+ Preparing component docs
{loadingStep}
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ Component options go here
+
+
+ Component options go here
+
+
+ Component options go here
+
+
+ Component options go here
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+ This is demo content
+
+
+
+ This is demo content
+
+
+
+ Font weight
+
+ {data}
+
+ This is demo content
+
+
+ Section 1 content
+
+
+ Section 2 content
+
+
+ Section content
+
+
+ {props.selectProps.menuIsOpen ? icons.arrowUpCircleAlt : icons.arrowDownCircleAlt}
+
+