diff --git a/clayui.com/content/docs/components/api-alert.mdx b/clayui.com/content/docs/components/api-alert.mdx new file mode 100644 index 0000000000..02d3a1b1c0 --- /dev/null +++ b/clayui.com/content/docs/components/api-alert.mdx @@ -0,0 +1,23 @@ +--- +title: 'Alert' +description: 'Alerts are used to capture the attention of the user in an intrusive way.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/alerts/' +mainTabURL: 'docs/components/alert.html' +--- + +
+
+ +- [Alert](#alert) +- [Alert.ToastContainer](#alert.toastcontainer) + +
+
+ +## Alert + +
[APITable "clay-alert/src/index.tsx"]
+ +## Alert.ToastContainer + +
[APITable "clay-alert/src/ToastContainer.tsx"]
diff --git a/clayui.com/content/docs/components/api-autocomplete.mdx b/clayui.com/content/docs/components/api-autocomplete.mdx new file mode 100644 index 0000000000..b6421627f5 --- /dev/null +++ b/clayui.com/content/docs/components/api-autocomplete.mdx @@ -0,0 +1,40 @@ +--- +title: 'Autocomplete' +description: 'An autocomplete text field is an input that offers the user text suggestions while they type.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input-variations/' +mainTabURL: 'docs/components/autocomplete.html' +--- + +
+
+ +- [Autocomplete](#autocomplete) +- [Autocomplete.DropDown](#autocomplete.dropdown) +- [Autocomplete.Input](#autocomplete.input) +- [Autocomplete.Item](#autocomplete.item) +- [Autocomplete.LoadingIndicator](#autocomplete.loadingindicator) + +
+
+ +## Autocomplete + +
[APITable "clay-autocomplete/src/index.tsx"]
+ +## Autocomplete.DropDown + +
[APITable "clay-autocomplete/src/DropDown.tsx"]
+ +## Autocomplete.Input + +Extends from `ClayForm.Input` + +## Autocomplete.Item + +`ClayAutocomplete.Item` is a wrapper around `ClayDropDown.Item` but also underlines the bold characters that are matched. Feel free to create your own match rule using `ClayDropDown.Item`'s API. + +
[APITable "clay-autocomplete/src/Item.tsx"]
+ +## Autocomplete.LoadingIndicator + +
[APITable "clay-autocomplete/src/LoadingIndicator.tsx"]
diff --git a/clayui.com/content/docs/components/api-badge.mdx b/clayui.com/content/docs/components/api-badge.mdx new file mode 100644 index 0000000000..75e5e8f4dd --- /dev/null +++ b/clayui.com/content/docs/components/api-badge.mdx @@ -0,0 +1,8 @@ +--- +title: 'Badge' +description: 'Badges help highlight important information, such as notifications or new and unread messages.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/badges/' +mainTabURL: 'docs/components/badge.html' +--- + +
[APITable "clay-badge/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-breadcrumb.mdx b/clayui.com/content/docs/components/api-breadcrumb.mdx new file mode 100644 index 0000000000..f1f3a7ef63 --- /dev/null +++ b/clayui.com/content/docs/components/api-breadcrumb.mdx @@ -0,0 +1,8 @@ +--- +title: 'Breadcrumb' +description: 'Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/breadcrumb/' +mainTabURL: 'docs/components/breadcrumb.html' +--- + +
[APITable "clay-breadcrumb/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-button-group.mdx b/clayui.com/content/docs/components/api-button-group.mdx new file mode 100644 index 0000000000..b7c2971af4 --- /dev/null +++ b/clayui.com/content/docs/components/api-button-group.mdx @@ -0,0 +1,8 @@ +--- +title: 'Button Group' +description: 'Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, "Change and Cancel" actions, or "Save and Cancel" actions. In those cases, single buttons are the correct solution.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/' +mainTabURL: 'docs/components/button-group.html' +--- + +
[APITable "clay-button/src/Group.tsx"]
diff --git a/clayui.com/content/docs/components/api-button.mdx b/clayui.com/content/docs/components/api-button.mdx new file mode 100644 index 0000000000..4e716b7e1b --- /dev/null +++ b/clayui.com/content/docs/components/api-button.mdx @@ -0,0 +1,28 @@ +--- +title: 'Button' +description: 'Buttons communicate an action to happen on user interaction.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/' +mainTabURL: 'docs/components/button.html' +--- + +
+
+ +- [Button](#button) +- [Button.Group](#button.group) +- [ButtonWithIcon](#buttonwithicon) + +
+
+ +## Button + +
[APITable "clay-button/src/Button.tsx"]
+ +## Button.Group + +
[APITable "clay-button/src/Group.tsx"]
+ +## ButtonWithIcon + +
[APITable "clay-button/src/ButtonWithIcon.tsx"]
diff --git a/clayui.com/content/docs/components/api-card.mdx b/clayui.com/content/docs/components/api-card.mdx new file mode 100644 index 0000000000..9979645620 --- /dev/null +++ b/clayui.com/content/docs/components/api-card.mdx @@ -0,0 +1,74 @@ +--- +title: 'Card' +description: 'Cards are a specific form of data visualization focused mainly on displaying images.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/cards/' +mainTabURL: 'docs/components/card.html' +--- + +
+
+ +- [Card](#card) +- [Card.AspectRatio](#card.aspectratio) +- [Card.Body](#card.body) +- [Card.Caption](#card.caption) +- [Card.Description](#card.description) +- [Card.Group](#card.group) +- [Card.Row](#card.row) +- [CardWithHorizontal](#cardwithhorizontal) +- [CardWithInfo](#cardwithinfo) +- [CardWithNavigation](#cardwithnavigation) +- [CardWithUser](#cardwithuser) + +
+
+ +## Card + +
[APITable "clay-card/src/Card.tsx"]
+ +## Card.AspectRatio + +
[APITable "clay-card/src/AspectRatio.tsx"]
+ +## Card.Body + + + Extends from {`React.HTMLAttributes`} + + +## Card.Caption + + + Extends from {`React.HTMLAttributes`} + + +## Card.Description + +
[APITable "clay-card/src/Description.tsx"]
+ +## Card.Group + +
[APITable "clay-card/src/Group.tsx"]
+ +## Card.Row + + + Extends from {`React.HTMLAttributes`} + + +## CardWithHorizontal + +
[APITable "clay-card/src/CardWithHorizontal.tsx"]
+ +## CardWithInfo + +
[APITable "clay-card/src/CardWithInfo.tsx"]
+ +## CardWithNavigation + +
[APITable "clay-card/src/CardWithNavigation.tsx"]
+ +## CardWithUser + +
[APITable "clay-card/src/CardWithUser.tsx"]
diff --git a/clayui.com/content/docs/components/api-checkbox-radio.mdx b/clayui.com/content/docs/components/api-checkbox-radio.mdx new file mode 100644 index 0000000000..c335a816b1 --- /dev/null +++ b/clayui.com/content/docs/components/api-checkbox-radio.mdx @@ -0,0 +1,8 @@ +--- +title: 'Checkbox' +description: 'A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-check-toggle/' +mainTabURL: 'docs/components/checkbox.html' +--- + +
[APITable "clay-form/src/Checkbox.tsx"]
diff --git a/clayui.com/content/docs/components/api-color-picker.mdx b/clayui.com/content/docs/components/api-color-picker.mdx new file mode 100644 index 0000000000..cf4a07120e --- /dev/null +++ b/clayui.com/content/docs/components/api-color-picker.mdx @@ -0,0 +1,8 @@ +--- +title: 'Color Picker' +description: 'Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-color/' +mainTabURL: 'docs/components/color-picker.html' +--- + +
[APITable "clay-color-picker/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-date-and-time-pickers.mdx b/clayui.com/content/docs/components/api-date-and-time-pickers.mdx new file mode 100644 index 0000000000..0da9162e22 --- /dev/null +++ b/clayui.com/content/docs/components/api-date-and-time-pickers.mdx @@ -0,0 +1,8 @@ +--- +title: 'Date Picker' +description: 'Date and Time pickers let users select a date and time for a form.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-date-time/' +mainTabURL: 'docs/components/date-picker.html' +--- + +
[APITable "clay-date-picker/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-dropdown.mdx b/clayui.com/content/docs/components/api-dropdown.mdx new file mode 100644 index 0000000000..7c87a53b15 --- /dev/null +++ b/clayui.com/content/docs/components/api-dropdown.mdx @@ -0,0 +1,78 @@ +--- +title: 'Drop Down' +description: 'A dropdown menu displays a list of options for the element that triggers it.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/dropdowns/' +mainTabURL: 'docs/components/drop-down.html' +--- + +
+
+ +- [DropDown](#dropdown) +- [DropDown.Action](#dropdown.action) +- [DropDown.Caption](#dropdown.caption) +- [DropDown.Divider](#dropdown.divider) +- [DropDown.Group](#dropdown.group) +- [DropDown.Help](#dropdown.help) +- [DropDown.Item](#dropdown.item) +- [DropDown.ItemList](#dropdown.itemlist) +- [DropDown.Menu](#dropdown.menu) +- [DropDown.Search](#dropdown.search) +- [DropDownWithItems](#dropdownwithitems) + +
+
+ +## DropDown + +
[APITable "clay-drop-down/src/DropDown.tsx"]
+ +## DropDown.Action + + + Extends from {`React.HTMLAttributes`} + + +## DropDown.Caption + + + Extends from {`React.HTMLAttributes`} + + +## DropDown.Divider + + + Extends from {`React.HTMLAttributes`} + + +## DropDown.Group + +
[APITable "clay-drop-down/src/Group.tsx"]
+ +## DropDown.Help + + + Extends from {`React.HTMLAttributes`} + + +## DropDown.Item + +
[APITable "clay-drop-down/src/Item.tsx"]
+ +## DropDown.ItemList + + + Extends from {`React.HTMLAttributes`} + + +## DropDown.Menu + +
[APITable "clay-drop-down/src/Menu.tsx"]
+ +## DropDown.Search + +
[APITable "clay-drop-down/src/Search.tsx"]
+ +## DropDownWithItems + +
[APITable "clay-drop-down/src/DropDownWithItems.tsx"]
diff --git a/clayui.com/content/docs/components/api-dual-list-box.mdx b/clayui.com/content/docs/components/api-dual-list-box.mdx new file mode 100644 index 0000000000..eaa80080c4 --- /dev/null +++ b/clayui.com/content/docs/components/api-dual-list-box.mdx @@ -0,0 +1,8 @@ +--- +title: 'Dual List Box' +description: 'Dual List Box provides users with two Select Boxes with the ability to move items between lists.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/' +mainTabURL: 'docs/components/dual-list_box.html' +--- + +
[APITable "clay-form/src/DualListBox.tsx"]
diff --git a/clayui.com/content/docs/components/api-empty-state.mdx b/clayui.com/content/docs/components/api-empty-state.mdx new file mode 100644 index 0000000000..97d78d718d --- /dev/null +++ b/clayui.com/content/docs/components/api-empty-state.mdx @@ -0,0 +1,8 @@ +--- +title: 'Empty State' +description: 'Empty states provide users with feedback on the reasons behind the empty state and what they can do to move out of the empty state.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/empty-states/' +mainTabURL: 'docs/components/empty-state.html' +--- + +
[APITable "clay-empty-state/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-form-group.mdx b/clayui.com/content/docs/components/api-form-group.mdx new file mode 100644 index 0000000000..22e7d5c376 --- /dev/null +++ b/clayui.com/content/docs/components/api-form-group.mdx @@ -0,0 +1,51 @@ +--- +title: 'Form' +description: 'Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/' +mainTabURL: 'docs/components/form.html' +--- + +
+
+ +- [Form.FeedbackIndicator](#form.feedbackindicator) +- [Form.Group](#form.group) +- [Form](#form) +- [Form.FeedbackGroup](#form.feedbackgroup) +- [Form.FeedbackItem](#form.feedbackitem) +- [Form.Text](#form.text) + +
+
+ +## Form.FeedbackIndicator + +
[APITable "clay-form/src/Form.tsx#ClayFormFeedbackIndicator"]
+ +## Form.Group + +
[APITable "clay-form/src/Form.tsx#ClayFormGroup"]
+ +## Form + + + Extends from {`React.HTMLAttributes`} + + +## Form.FeedbackGroup + + + Extends from {`React.HTMLAttributes`} + + +## Form.FeedbackItem + + + Extends from {`React.HTMLAttributes`} + + +## Form.Text + + + Extends from {`React.HTMLAttributes`} + diff --git a/clayui.com/content/docs/components/api-icon.mdx b/clayui.com/content/docs/components/api-icon.mdx new file mode 100644 index 0000000000..83a3dba7e2 --- /dev/null +++ b/clayui.com/content/docs/components/api-icon.mdx @@ -0,0 +1,8 @@ +--- +title: 'Icon' +description: 'Icons are a visual representation of an idea and/or action.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/icons/' +mainTabURL: 'docs/components/icon.html' +--- + +
[APITable "clay-icon/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-label.mdx b/clayui.com/content/docs/components/api-label.mdx new file mode 100644 index 0000000000..d2d7ba258b --- /dev/null +++ b/clayui.com/content/docs/components/api-label.mdx @@ -0,0 +1,8 @@ +--- +title: 'Label' +description: 'Labels are a visual pattern used to categorize information providing quick and easy recognition.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/labels/' +mainTabURL: 'docs/components/label.html' +--- + +
[APITable "clay-label/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-layout.mdx b/clayui.com/content/docs/components/api-layout.mdx new file mode 100644 index 0000000000..2f6f97bb9e --- /dev/null +++ b/clayui.com/content/docs/components/api-layout.mdx @@ -0,0 +1,68 @@ +--- +title: 'Layout' +description: 'A set of utilities for layouting out a page or content on a page' +lexiconDefinition: 'https://liferay.design/lexicon/foundations/grid/' +mainTabURL: 'docs/components/layout.html' +--- + +
+
+ +- [Container](#container) +- [ContainerFluid](#containerfluid) +- [Col](#col) +- [ContentCol](#contentcol) +- [ContentRow](#contentrow) +- [ContentSection](#contentsection) +- [Row](#row) +- [Sheet](#sheet) +- [SheetHeader](#sheetheader) +- [SheetFooter](#sheetfooter) +- [SheetSection](#sheetsection) + +
+
+ +## Container + +
[APITable "clay-layout/src/Container.tsx"]
+ +## ContainerFluid + +
[APITable "clay-layout/src/ContainerFluid.tsx"]
+ +## Col + +
[APITable "clay-layout/src/Col.tsx"]
+ +## ContentCol + +
[APITable "clay-layout/src/Content.tsx#ClayContentCol"]
+ +## ContentRow + +
[APITable "clay-layout/src/Content.tsx#ClayContentRow"]
+ +## ContentSection + +
[APITable "clay-layout/src/Content.tsx#ClayContentSection"]
+ +## Row + +
[APITable "clay-layout/src/Row.tsx"]
+ +## Sheet + +
[APITable "clay-layout/src/Sheet.tsx#ClaySheet"]
+ +## SheetHeader + +
[APITable "clay-layout/src/Sheet.tsx#ClaySheetHeader"]
+ +## SheetFooter + +
[APITable "clay-layout/src/Sheet.tsx#ClaySheetFooter"]
+ +## SheetSection + +
[APITable "clay-layout/src/Sheet.tsx#ClaySheetSection"]
diff --git a/clayui.com/content/docs/components/api-link.mdx b/clayui.com/content/docs/components/api-link.mdx new file mode 100644 index 0000000000..a93a0cc19e --- /dev/null +++ b/clayui.com/content/docs/components/api-link.mdx @@ -0,0 +1,8 @@ +--- +title: 'Link' +description: 'Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/link/' +mainTabURL: 'docs/components/link.html' +--- + +
[APITable "clay-link/src/index.tsx#ClayLink"]
diff --git a/clayui.com/content/docs/components/api-list.mdx b/clayui.com/content/docs/components/api-list.mdx new file mode 100644 index 0000000000..f5c4a33675 --- /dev/null +++ b/clayui.com/content/docs/components/api-list.mdx @@ -0,0 +1,64 @@ +--- +title: 'List' +description: 'Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/list/' +mainTabURL: 'docs/components/list.html' +--- + +
+
+ +- [List](#list) +- [List.Header](#list.header) +- [List.Item](#list.item) +- [List.ItemField](#list.itemfield) +- [List.ItemText](#list.itemtext) +- [List.ItemTitle](#list.itemtitle) +- [List.QuickActionMenu](#list.quickactionmenu) +- [List.QuickActionMenu.Item](#list.quickactionmenu.item) +- [ListWithItems](#listwithitems) + +
+
+ +## List + +
[APITable "clay-list/src/List.tsx"]
+ +## List.Header + + + Extends from {`React.HTMLAttributes`} + + +## List.Item + +
[APITable "clay-list/src/Item.tsx"]
+ +## List.ItemField + +
[APITable "clay-list/src/ItemField.tsx"]
+ +## List.ItemText + +
[APITable "clay-list/src/ItemText.tsx"]
+ +## List.ItemTitle + + + Extends from {`React.HTMLAttributes`} + + +## List.QuickActionMenu + + + Extends from {`React.HTMLAttributes`} + + +## List.QuickActionMenu.Item + +
[APITable "clay-list/src/QuickActionMenuItem.tsx"]
+ +## ListWithItems + +
[APITable "clay-list/src/ListWithItems.tsx"]
diff --git a/clayui.com/content/docs/components/api-loading-indicator.mdx b/clayui.com/content/docs/components/api-loading-indicator.mdx new file mode 100644 index 0000000000..64758ee421 --- /dev/null +++ b/clayui.com/content/docs/components/api-loading-indicator.mdx @@ -0,0 +1,8 @@ +--- +title: 'Loading Indicator' +description: 'The loading indicator shows the user that an external process, like a connection, is being executed.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/loading-indicator/' +mainTabURL: 'docs/components/loading-indicator.html' +--- + +
[APITable "clay-loading-indicator/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-management-toolbar.mdx b/clayui.com/content/docs/components/api-management-toolbar.mdx new file mode 100644 index 0000000000..c5fb296d51 --- /dev/null +++ b/clayui.com/content/docs/components/api-management-toolbar.mdx @@ -0,0 +1,47 @@ +--- +title: 'Management Toolbar' +description: 'Management toolbar is an extension of Toolbar. It is a combination of different components, including filters, orders, search, visualization select, and other actions that let users manage a dataset.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/toolbars/management-bar/' +mainTabURL: 'docs/components/management-toolbar.html' +--- + +
+
+ +- [ManagementToolbar](#managementtoolbar) +- [ItemList](#itemlist) +- [Item](#item) +- [ResultsBar](#resultsbar) + - [ResultsBar.Item](#resultsbar.item) +- [Search](#search) + +
+
+ +## ManagementToolbar + +
[APITable "clay-management-toolbar/src/ManagementToolbar.tsx"]
+ +## ItemList + +
[APITable "clay-management-toolbar/src/ItemList.tsx"]
+ +## Item + + + Extends from {`React.HTMLAttributes`} + + +## ResultsBar + + + Extends from {`React.HTMLAttributes`} + + +### ResultsBar.Item + +
[APITable "clay-management-toolbar/src/ResultsBarItem.tsx"]
+ +## Search + +
[APITable "clay-management-toolbar/src/Search.tsx"]
diff --git a/clayui.com/content/docs/components/api-modal.mdx b/clayui.com/content/docs/components/api-modal.mdx new file mode 100644 index 0000000000..0a3c3e9952 --- /dev/null +++ b/clayui.com/content/docs/components/api-modal.mdx @@ -0,0 +1,80 @@ +--- +title: 'Modal' +description: 'A modal is a secondary window that communicates or provides an action inside the same process.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/modals/' +mainTabURL: 'docs/components/modal.html' +--- + +
+
+ +- [Modal](#modal) +- [Modal.Body](#modal.body) +- [Modal.Footer](#modal.footer) +- [Modal.Header](#modal.header) +- [Modal.Item](#modal.item) +- [Modal.ItemGroup](#modal.itemgroup) +- [Modal.Subtitle](#modal.subtitle) +- [Modal.SubtitleSection](#modal.subtitlesection) +- [Modal.Title](#modal.title) +- [Modal.TitleSection](#modal.titlesection) +- [Modal.TitleIndicator](#modal.titleindicator) + +
+
+ +## Modal + +
[APITable "clay-modal/src/Modal.tsx"]
+ +## Modal.Body + +
[APITable "clay-modal/src/Body.tsx"]
+ +## Modal.Footer + +
[APITable "clay-modal/src/Footer.tsx"]
+ +## Modal.Header + +
[APITable "clay-modal/src/Header.tsx#ClayModalHeaderHybrid"]
+ +## Modal.Item + +
[APITable "clay-modal/src/Header.tsx#Item"]
+ +## Modal.ItemGroup + + + Extends from {`React.HTMLAttributes`} + + +## Modal.Subtitle + + + Extends from {`React.HTMLAttributes`} + + +## Modal.SubtitleSection + + + Extends from {`React.HTMLAttributes`} + + +## Modal.Title + + + Extends from {`React.HTMLAttributes`} + + +## Modal.TitleSection + + + Extends from {`React.HTMLAttributes`} + + +## Modal.TitleIndicator + + + Extends from {`React.HTMLAttributes`} + diff --git a/clayui.com/content/docs/components/api-multi-step-form.mdx b/clayui.com/content/docs/components/api-multi-step-form.mdx new file mode 100644 index 0000000000..0fd474271e --- /dev/null +++ b/clayui.com/content/docs/components/api-multi-step-form.mdx @@ -0,0 +1,47 @@ +--- +title: 'Multi Step Nav' +description: 'A multi step nav, also known as a wizard, is a determinate progress bar used in long processes that divides the main task into subtasks. The wizard lets the user quickly identify their current progress in completing the task and navigate forwards and backwards between steps if needed.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/multi-step-form/' +mainTabURL: 'docs/components/multi-step-nav.html' +--- + +
+
+ +- [MultiStepNav](#multistepnav) +- [MultiStepNav.Divider](#multistepnav.divider) +- [MultiStepNav.Item](#multistepnav.item) +- [MultiStepNav.Indicator](#multistepnav.indicator) +- [MultiStepNav.Title](#multistepnav.title) +- [MultiStepNavWithBasicItems](#multistepnavwithbasicitems) + +
+
+ +### MultiStepNav + +
[APITable "clay-multi-step-nav/src/MultiStepNav.tsx"]
+ +### MultiStepNav.Divider + + + Extends from {`React.HTMLAttributes`} + + +### MultiStepNav.Item + +
[APITable "clay-multi-step-nav/src/Item.tsx"]
+ +### MultiStepNav.Indicator + +
[APITable "clay-multi-step-nav/src/Indicator.tsx"]
+ +### MultiStepNav.Title + + + Extends from {`React.HTMLAttributes`} + + +### MultiStepNavWithBasicItems + +
[APITable "clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx"]
diff --git a/clayui.com/content/docs/components/api-nav.mdx b/clayui.com/content/docs/components/api-nav.mdx new file mode 100644 index 0000000000..7907dfb301 --- /dev/null +++ b/clayui.com/content/docs/components/api-nav.mdx @@ -0,0 +1,41 @@ +--- +title: 'Nav' +description: 'Clay Nav provides a clear and semantic navigation for your site' +mainTabURL: 'docs/components/nav.html' +--- + +
+
+ +- [Nav](#nav) +- [Nav.Item](#nav.item) +- [Nav.Link](#nav.link) +- [VerticalNav](#verticalnav) +- [VerticalNav.Trigger](#verticalnav.trigger) + +
+
+ +## Nav + +
[APITable "clay-nav/src/Nav.tsx"]
+ +## Nav.Item + + + Extends from {`React.HTMLAttributes`} + + +## Nav.Link + +
[APITable "clay-nav/src/NavLink.tsx"]
+ +## VerticalNav + +
[APITable "clay-nav/src/Vertical.tsx"]
+ +## VerticalNav.Trigger + + + Extends from {`React.ComponentProps`} + diff --git a/clayui.com/content/docs/components/api-navigation-bar.mdx b/clayui.com/content/docs/components/api-navigation-bar.mdx new file mode 100644 index 0000000000..880b93e341 --- /dev/null +++ b/clayui.com/content/docs/components/api-navigation-bar.mdx @@ -0,0 +1,23 @@ +--- +title: 'Navigation Bar' +description: 'A navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/horizontal-nav/' +mainTabURL: 'docs/components/navigation-bar.html' +--- + +
+
+ +- [NavigationBar](#navigationbar) +- [NavigationBar.Item](#navigationbar.item) + +
+
+ +## NavigationBar + +
[APITable "clay-navigation-bar/src/index.tsx"]
+ +## NavigationBar.Item + +
[APITable "clay-navigation-bar/src/Item.tsx"]
diff --git a/clayui.com/content/docs/components/api-pagination-bar.mdx b/clayui.com/content/docs/components/api-pagination-bar.mdx new file mode 100644 index 0000000000..3f111ad4b6 --- /dev/null +++ b/clayui.com/content/docs/components/api-pagination-bar.mdx @@ -0,0 +1,33 @@ +--- +title: 'Pagination Bar' +description: 'Pagination bar provides navigation through datasets' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/pagination/' +mainTabURL: 'docs/components/pagination-bar.html' +--- + +
+
+ +- [PaginationBar](#paginationbar) +- [PaginationBar.DropDown](#paginationbar.dropdown) +- [PaginationBar.Results](#paginationbar.results) +- [PaginationBarWithBasicItems](#paginationbarwithbasicitems) + +
+
+ +## PaginationBar + +
[APITable "clay-pagination-bar/src/PaginationBar.tsx"]
+ +## PaginationBar.DropDown + +
[APITable "clay-pagination-bar/src/DropDown.tsx"]
+ +## PaginationBar.Results + +
[APITable "clay-pagination-bar/src/Results.tsx"]
+ +## PaginationBarWithBasicItems + +
[APITable "clay-pagination-bar/src/PaginationBarWithBasicItems.tsx"]
diff --git a/clayui.com/content/docs/components/api-pagination.mdx b/clayui.com/content/docs/components/api-pagination.mdx new file mode 100644 index 0000000000..0899fd66a9 --- /dev/null +++ b/clayui.com/content/docs/components/api-pagination.mdx @@ -0,0 +1,33 @@ +--- +title: 'Pagination' +description: 'Pagination provides horizontal navigation between chunks(pages) of a dataset.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/pagination/' +mainTabURL: 'docs/components/pagination.html' +--- + +
+
+ +- [Pagination](#pagination) +- [Pagination.Ellipsis](#pagination.ellipsis) +- [Pagination.Item](#pagination.item) +- [PaginationWithBasicItems](#paginationwithbasicitems) + +
+
+ +## Pagination + +
[APITable "clay-pagination/src/Pagination.tsx"]
+ +## Pagination.Ellipsis + +
[APITable "clay-pagination/src/Ellipsis.tsx"]
+ +## Pagination.Item + +
[APITable "clay-pagination/src/Item.tsx"]
+ +## PaginationWithBasicItems + +
[APITable "clay-pagination/src/PaginationWithBasicItems.tsx"]
diff --git a/clayui.com/content/docs/components/api-panel.mdx b/clayui.com/content/docs/components/api-panel.mdx new file mode 100644 index 0000000000..f371808a90 --- /dev/null +++ b/clayui.com/content/docs/components/api-panel.mdx @@ -0,0 +1,50 @@ +--- +title: 'Panel' +description: 'Toggle content visibility using Panel.' +mainTabURL: 'docs/components/panel.html' +--- + +
+
+ +- [Panel](#panel) +- [Panel.Body](#panel.body) +- [Panel.Footer](#panel.footer) +- [Panel.Group](#panel.group) +- [Panel.Header](#panel.header) +- [Panel.Title](#panel.title) + +
+
+ +## Panel + +
[APITable "clay-panel/src/index.tsx"]
+ +## Panel.Body + + + Extends from {`React.HTMLAttributes`} + + +## Panel.Footer + + + Extends from {`React.HTMLAttributes`} + + +## Panel.Group + +
[APITable "clay-panel/src/Group.tsx"]
+ +## Panel.Header + + + Extends from {`React.HTMLAttributes`} + + +## Panel.Title + + + Extends from {`React.HTMLAttributes`} + diff --git a/clayui.com/content/docs/components/api-popover.mdx b/clayui.com/content/docs/components/api-popover.mdx new file mode 100644 index 0000000000..0f477c0b15 --- /dev/null +++ b/clayui.com/content/docs/components/api-popover.mdx @@ -0,0 +1,8 @@ +--- +title: 'Popover' +description: 'Popovers contain helpful information such as an explanation of a context.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/' +mainTabURL: 'docs/components/popover.html' +--- + +
[APITable "clay-popover/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-progress-bar.mdx b/clayui.com/content/docs/components/api-progress-bar.mdx new file mode 100644 index 0000000000..890754a945 --- /dev/null +++ b/clayui.com/content/docs/components/api-progress-bar.mdx @@ -0,0 +1,8 @@ +--- +title: 'Progress Bar' +description: 'Progress bar indicates the percentage completed of a task.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/progress-bars/' +mainTabURL: 'docs/components/progress-bar.html' +--- + +
[APITable "clay-progress-bar/src/index.tsx"]
diff --git a/clayui.com/content/docs/components/api-radio-group.mdx b/clayui.com/content/docs/components/api-radio-group.mdx new file mode 100644 index 0000000000..a8556cf722 --- /dev/null +++ b/clayui.com/content/docs/components/api-radio-group.mdx @@ -0,0 +1,22 @@ +--- +title: 'Radio Group' +description: 'Radios provide users with different selection and activation tools.' +mainTabURL: 'docs/components/radio-group.html' +--- + +
+
+ +- [Form.RadioGroup](#form.radiogroup) +- [Form.Radio](#form.radio) + +
+
+ +## Form.RadioGroup + +
[APITable "clay-form/src/RadioGroup.tsx"]
+ +## Form.Radio + +
[APITable "clay-form/src/Radio.tsx"]
diff --git a/clayui.com/content/docs/components/api-select-box.mdx b/clayui.com/content/docs/components/api-select-box.mdx new file mode 100644 index 0000000000..0b6fdad384 --- /dev/null +++ b/clayui.com/content/docs/components/api-select-box.mdx @@ -0,0 +1,8 @@ +--- +title: 'Select Box' +description: 'Select Box allows users to select multiple options and if needed the ability to reorder selected options.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/' +mainTabURL: 'docs/components/select-box.html' +--- + +
[APITable "clay-form/src/SelectBox.tsx"]
diff --git a/clayui.com/content/docs/components/api-select.mdx b/clayui.com/content/docs/components/api-select.mdx new file mode 100644 index 0000000000..04e5e9204e --- /dev/null +++ b/clayui.com/content/docs/components/api-select.mdx @@ -0,0 +1,12 @@ +--- +title: 'Select' +description: 'A form control element used to select from several provided options and enter data.' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/selector/' +mainTabURL: 'docs/components/select.html' +--- + +ClaySelect have the same React API of `` element. Also, `ClaySelect.Option` has the same API of `