eui icon indicating copy to clipboard operation
eui copied to clipboard

[Meta] [New docs] Convert components docs text content to MDX

Open tkajtoch opened this issue 1 year ago • 0 comments

Summary

We need to convert component docs content to MDX to be able to load it in docusaurus easily. This meta issue covers components text documentation only, excluding component previews and examples, prop tables, and playgrounds. These code-related elements must be converted to storybook stories first (#6674), then embedded into the MDX files created as deliverables of this meta issue.

Acceptance Criteria

  • All existing component documentation pages available on the current docs site should be converted to MDX and saved to /website/docs/components/<SNAKE CASE COMPONENT NAME>/overview.mdx
  • All text content should be converted to MDX, including but not limited to:
    • headings
    • paragraphs and text formatting (e.g., emphasis)
    • links
    • callouts
    • inline code
  • MDX files should be formatted using built-in Markdown features only. Please don't use EUI components, HTML tags, or CSS to achieve custom text formatting
  • All MDX component docs should have frontmatter defined on top of the file following the format:
    ---
    title: '<HUMAN-READABLE COMPONENT NAME, e.g., Combo box>'
    slug: '<SLUGIFIED, HUMAN-READABLE COMPONENT NAME, e.g., combo-box>'
    export_name: '<COMPONENT EXPORT NAME, e.g., EuiComboBox>'
    ---
    
  • All MDX component docs directories should have the _category_.yml file created and including these properties:
    link:
      type: doc
      id: components/<SNAKE CASE COMPONENT NAME>/overview
    

Example directory structure

/website/docs/
  components/
    combo_box/
      _category_.yml
      overview.mdx

Content conversion script 👈🏻

You may use a script like this to automatically convert EUI page contents to Markdown.


### Converted components
* [x] EuiAccordion
* [x] EuiAspectRatio
* [ ] EuiAutoSizer
* [x] EuiAvatar
* [x] EuiBadge
* [x] EuiBadgeGroup
* [ ] EuiBasicTable
* [ ] EuiBeacon
* [ ] EuiBetaBadge
* [x] EuiBottomBar
* [x] EuiBreadcrumbs
* [x] EuiButton
* [x] EuiButtonEmpty
* [x] EuiButtonGroup
* [x] EuiButtonIcon
* [x] EuiCallOut
* [x] EuiCard
* [x] EuiCheckableCard
* [ ] EuiCheckbox
* [ ] EuiCheckboxGroup
* [ ] EuiCode
* [ ] EuiCodeBlock
* [x] EuiCollapsibleNav
* [x] EuiCollapsibleNavBeta
* [x] EuiCollapsibleNavGroup
* [x] EuiCollapsibleNavItem
* [ ] EuiColorPaletteDisplay
* [ ] EuiColorPalettePicker
* [ ] EuiColorPicker
* [ ] EuiColorPickerSwatch
* [x] EuiComboBox
* [x] EuiComboBoxInput
* [x] EuiComboBoxOption
* [x] EuiComboBoxOptionsList
* [x] EuiComboBoxPill
* [x] EuiComboBoxTitle
* [x] EuiComment
* [x] EuiCommentEvent
* [x] EuiCommentList
* [x] EuiCommentTimeline
* [ ] EuiComponentDefaultsProvider
* [ ] EuiContext
* [x] EuiContextMenu
* [x] EuiContextMenuItem
* [x] EuiContextMenuPanel
* [ ] EuiCopy
* [ ] EuiDataGrid
* [ ] EuiDatePicker
* [ ] EuiDatePickerRange
* [ ] EuiDelayHide
* [ ] EuiDelayRender
* [ ] EuiDescribedFormGroup
* [x] EuiDescriptionList
* [x] EuiDescriptionListDescription
* [x] EuiDescriptionListTitle
* [x] EuiDragDropContext
* [x] EuiDraggable
* [x] EuiDroppable
* [ ] EuiDualRange
* [x] EuiEmptyPrompt
* [ ] EuiErrorBoundary
* [ ] EuiExpression
* [x] EuiFacetButton
* [x] EuiFacetGroup
* [ ] EuiFieldNumber
* [ ] EuiFieldPassword
* [ ] EuiFieldSearch
* [ ] EuiFieldText
* [ ] EuiFilePicker
* [ ] EuiFilterButton
* [ ] EuiFilterGroup
* [x] EuiFlexGrid
* [x] EuiFlexGroup
* [x] EuiFlexItem
* [x] EuiFlyout
* [x] EuiFlyoutBody
* [x] EuiFlyoutFooter
* [x] EuiFlyoutHeader
* [ ] EuiFocusTrap
* [ ] EuiForm
* [ ] EuiFormControlLayout
* [ ] EuiFormControlLayoutDelimited
* [ ] EuiFormErrorText
* [ ] EuiFormFieldset
* [ ] EuiFormHelpText
* [ ] EuiFormLabel
* [ ] EuiFormLegend
* [ ] EuiFormRow
* [ ] EuiGlobalToastList
* [ ] EuiGlobalToastListItem
* [x] EuiHeader
* [x] EuiHeaderAlert
* [x] EuiHeaderBreadcrumbs
* [x] EuiHeaderLink
* [x] EuiHeaderLinks
* [x] EuiHeaderLogo
* [x] EuiHeaderSection
* [x] EuiHeaderSectionItem
* [x] EuiHeaderSectionItemButton
* [x] EuiHealth
* [ ] EuiHideFor
* [ ] EuiHighlight
* [x] EuiHorizontalRule
* [ ] EuiHue
* [ ] EuiI18n
* [ ] EuiI18nNumber
* [x] EuiIcon
* [x] EuiIconTip
* [x] EuiImage
* [ ] EuiInlineEditText
* [ ] EuiInlineEditTitle
* [ ] EuiInMemoryTable
* [ ] EuiInnerText
* [ ] EuiInputPopover
* [x] EuiKeyPadMenu
* [x] EuiKeyPadMenuItem
* [x] EuiLink
* [x] EuiListGroup
* [x] EuiListGroupItem
* [x] EuiLoadingChart
* [x] EuiLoadingElastic
* [x] EuiLoadingLogo
* [x] EuiLoadingSpinner
* [ ] EuiMark
* [ ] EuiMarkdownEditor
* [ ] EuiMarkdownFormat
* [x] EuiModal
* [x] EuiModalBody
* [x] EuiModalFooter
* [x] EuiModalHeader
* [x] EuiModalHeaderTitle
* [ ] EuiMutationObserver
* [ ] EuiNotificationBadge
* [ ] EuiOutsideClickDetector
* [ ] EuiOverlayMask
* [ ] EuiPage
* [ ] EuiPageBody
* [x] EuiPageHeader
* [x] EuiPageHeaderContent
* [x] EuiPageHeaderSection
* [ ] EuiPageSection
* [ ] EuiPageSidebar
* [ ] EuiPageTemplate
* [x] EuiPagination
* [x] EuiPaginationButton
* [x] EuiPanel
* [ ] EuiPinnableListGroup
* [x] EuiPopover
* [x] EuiPopoverFooter
* [x] EuiPopoverTitle
* [ ] EuiPortal
* [x] EuiProgress
* [ ] EuiProvider
* [ ] EuiRadio
* [ ] EuiRadioGroup
* [ ] EuiRange
* [ ] EuiRefreshInterval
* [ ] EuiResizableButton
* [ ] EuiResizableCollapseButton
* [x] EuiResizableContainer
* [ ] EuiResizeObserver
* [ ] EuiSaturation
* [ ] EuiScreenReaderLive
* [ ] EuiScreenReaderOnly
* [ ] EuiSearchBar
* [ ] EuiSearchBarFilters
* [ ] EuiSelect
* [ ] EuiSelectable
* [ ] EuiSelectableList
* [ ] EuiSelectableListItem
* [ ] EuiSelectableMessage
* [ ] EuiSelectableSearch
* [ ] EuiSelectableTemplateSitewide
* [ ] EuiShowFor
* [x] EuiSideNav
* [x] EuiSkeletonCircle
* [x] EuiSkeletonLoading
* [x] EuiSkeletonRectangle
* [x] EuiSkeletonText
* [x] EuiSkeletonTitle
* [ ] EuiSkipLink
* [x] EuiSpacer
* [ ] EuiSplitPanel
* [x] EuiStat
* [ ] EuiStep
* [ ] EuiStepHorizontal
* [ ] EuiStepNumber
* [x] EuiSteps
* [x] EuiStepsHorizontal
* [ ] EuiSubSteps
* [ ] EuiSuperDatePicker
* [ ] EuiSuperSelect
* [ ] EuiSuperUpdateButton
* [ ] EuiSwitch
* [x] EuiTab
* [ ] EuiTable
* [ ] EuiTableBody
* [ ] EuiTableFooter
* [ ] EuiTableFooterCell
* [ ] EuiTableHeader
* [ ] EuiTableHeaderButton
* [ ] EuiTableHeaderCell
* [ ] EuiTableHeaderCellCheckbox
* [ ] EuiTableHeaderMobile
* [ ] EuiTablePagination
* [ ] EuiTableRow
* [ ] EuiTableRowCell
* [ ] EuiTableRowCellCheckbox
* [ ] EuiTableSortMobileItem
* [x] EuiTabs
* [ ] EuiThemeProvider
* [x] EuiText
* [ ] EuiTextArea
* [ ] EuiTextBlockTruncate
* [ ] EuiTextTruncate
* [x] EuiTimeline
* [x] EuiTimelineItem
* [x] EuiTimelineItemEvent
* [x] EuiTimelineItemIcon
* [x] EuiTitle
* [x] EuiToast
* [ ] EuiToken
* [x] EuiToolTip
* [x] EuiTour
* [x] EuiTourStep
* [x] EuiTourStepIndicator
* [x] EuiTreeView
* [ ] EuiValidatableControl
* [ ] EuiWrappingPopover

tkajtoch avatar Dec 07 '23 13:12 tkajtoch