From 4a36358e23c9d1a690ca917f5e3a0f43786367fb Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Wed, 23 Oct 2024 14:26:38 +0200 Subject: [PATCH] [New docs] Global site and docusaurus theme improvements (#8093) --- packages/docusaurus-theme/package.json | 2 +- .../demo/actions_bar/actions_bar.tsx | 8 ++ .../src/components/demo/actions_bar/index.ts | 8 ++ .../src/components/demo/code_transformer.ts | 8 ++ .../src/components/demo/context.ts | 8 ++ .../src/components/demo/create_demo.tsx | 17 ++++ .../src/components/demo/demo.tsx | 30 ++++-- .../src/components/demo/editor/index.ts | 8 ++ .../src/components/demo/index.ts | 9 ++ .../src/components/demo/preview/index.ts | 8 ++ .../src/components/demo/preview/preview.tsx | 42 ++++++-- .../src/components/demo/scope.ts | 8 ++ .../demo/source/get_source_from_children.ts | 8 ++ .../src/components/demo/source/index.ts | 8 ++ .../src/components/demo/source/source.tsx | 8 ++ .../src/components/guideline/guideline.tsx | 96 +++++++++++++++++++ .../components/guideline/guideline_text.tsx | 41 ++++++++ .../src/components/guideline/index.ts | 2 + .../src/components/guideline/types.ts | 1 + .../docusaurus-theme/src/components/index.ts | 10 ++ .../src/theme/DocItem/Content/index.tsx | 2 +- .../src/theme/DocRoot/Layout/index.tsx | 2 +- .../src/theme/MDXComponents/index.ts | 3 + packages/website/docs/components/index.mdx | 1 + packages/website/docusaurus.config.ts | 14 +-- packages/website/package.json | 3 +- packages/website/sidebars.ts | 8 +- .../src/components/homepage/header/index.tsx | 2 +- .../components/homepage/highlights/index.tsx | 20 ++-- yarn.lock | 87 +++-------------- 30 files changed, 359 insertions(+), 113 deletions(-) create mode 100644 packages/docusaurus-theme/src/components/demo/create_demo.tsx create mode 100644 packages/docusaurus-theme/src/components/guideline/guideline.tsx create mode 100644 packages/docusaurus-theme/src/components/guideline/guideline_text.tsx create mode 100644 packages/docusaurus-theme/src/components/guideline/index.ts create mode 100644 packages/docusaurus-theme/src/components/guideline/types.ts create mode 100644 packages/docusaurus-theme/src/components/index.ts create mode 100644 packages/website/docs/components/index.mdx diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json index 0bdd0f5b122..4765cf70a60 100644 --- a/packages/docusaurus-theme/package.json +++ b/packages/docusaurus-theme/package.json @@ -34,7 +34,7 @@ "@docusaurus/theme-common": "^3.5.2", "@docusaurus/utils-validation": "^3.5.2", "@elastic/datemath": "^5.0.3", - "@elastic/eui": "94.5.0", + "@elastic/eui": "97.2.0", "@elastic/eui-docgen": "workspace:^", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx index 14130537e55..66224acb77c 100644 --- a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx +++ b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx @@ -1,3 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import { EuiButton, EuiButtonIcon, diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/index.ts b/packages/docusaurus-theme/src/components/demo/actions_bar/index.ts index 346ac4183ac..205404df5f2 100644 --- a/packages/docusaurus-theme/src/components/demo/actions_bar/index.ts +++ b/packages/docusaurus-theme/src/components/demo/actions_bar/index.ts @@ -1 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + export { DemoActionsBar, type DemoActionsBarProps } from './actions_bar'; diff --git a/packages/docusaurus-theme/src/components/demo/code_transformer.ts b/packages/docusaurus-theme/src/components/demo/code_transformer.ts index 3097b341a3e..17369630c9d 100644 --- a/packages/docusaurus-theme/src/components/demo/code_transformer.ts +++ b/packages/docusaurus-theme/src/components/demo/code_transformer.ts @@ -1,3 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + const IMPORT_REGEX = /^import [^'"]* from ['"]([^.'"\n ][^'"\n ]*)['"];?/gm; const DEFAULT_EXPORT_REGEX = /export default /; const COMPONENT_ONLY_REGEX = /^\(? component with predefined props. + */ +export const createDemo = + (defaultProps: Partial): typeof Demo => + (props: DemoProps) => + ; diff --git a/packages/docusaurus-theme/src/components/demo/demo.tsx b/packages/docusaurus-theme/src/components/demo/demo.tsx index aae631f5d56..e87d020c346 100644 --- a/packages/docusaurus-theme/src/components/demo/demo.tsx +++ b/packages/docusaurus-theme/src/components/demo/demo.tsx @@ -1,3 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import { Children, PropsWithChildren, @@ -42,6 +50,7 @@ export interface DemoProps extends PropsWithChildren { */ scope?: Record; previewPadding?: DemoPreviewProps['padding']; + previewWrapper?: DemoPreviewProps['wrapperComponent']; } const getDemoStyles = (euiTheme: UseEuiTheme) => ({ @@ -60,6 +69,7 @@ export const Demo = ({ scope, isSourceOpen: _isSourceOpen = false, previewPadding, + previewWrapper, }: DemoProps) => { const styles = useEuiMemoizedStyles(getDemoStyles); const [sources, setSources] = useState([]); @@ -69,16 +79,19 @@ export const Demo = ({ // liveProviderKey restarts the demo to its initial state const [liveProviderKey, setLiveProviderKey] = useState(0); - const finalScope = useMemo(() => ({ - ...demoDefaultScope, - ...scope, - }), [scope]); + const finalScope = useMemo( + () => ({ + ...demoDefaultScope, + ...scope, + }), + [scope] + ); const addSource = useCallback( (source: DemoSourceMeta) => { - setSources((sources) => ([...sources, source])); + setSources((sources) => [...sources, source]); }, - [], + [] ); const onClickCopyToClipboard = useCallback(() => { @@ -104,7 +117,10 @@ export const Demo = ({ theme={prismThemes.dracula} scope={finalScope} > - + ; } const getPreviewStyles = (euiTheme: UseEuiTheme) => ({ @@ -22,11 +41,12 @@ const getPreviewStyles = (euiTheme: UseEuiTheme) => ({ * of the live component preview component. * Due to the limitations of react-live the demo is only rendered client-side. */ -const PreviewLoader = () => ( -
Loading...
-); +const PreviewLoader = () =>
Loading...
; -export const DemoPreview = ({ padding = 'l' }: DemoPreviewProps) => { +export const DemoPreview = ({ + padding = 'l', + wrapperComponent: WrapperComponent = Fragment, +}: DemoPreviewProps) => { const euiTheme = useEuiTheme(); const styles = getPreviewStyles(euiTheme); const paddingSize = euiPaddingSize(euiTheme, padding); @@ -39,9 +59,15 @@ export const DemoPreview = ({ padding = 'l' }: DemoPreviewProps) => { }> {() => ( <> - }> + ( + + )} + >
- + + +
diff --git a/packages/docusaurus-theme/src/components/demo/scope.ts b/packages/docusaurus-theme/src/components/demo/scope.ts index 8c8ab52fd75..ae03620cce1 100644 --- a/packages/docusaurus-theme/src/components/demo/scope.ts +++ b/packages/docusaurus-theme/src/components/demo/scope.ts @@ -1,3 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import React from 'react'; import * as EUI from '@elastic/eui'; import * as EmotionReact from '@emotion/react'; diff --git a/packages/docusaurus-theme/src/components/demo/source/get_source_from_children.ts b/packages/docusaurus-theme/src/components/demo/source/get_source_from_children.ts index 15c04eb03e1..955c2900a29 100644 --- a/packages/docusaurus-theme/src/components/demo/source/get_source_from_children.ts +++ b/packages/docusaurus-theme/src/components/demo/source/get_source_from_children.ts @@ -1,3 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import { Children, ReactElement, ReactNode } from 'react'; import { isElement } from 'react-is'; diff --git a/packages/docusaurus-theme/src/components/demo/source/index.ts b/packages/docusaurus-theme/src/components/demo/source/index.ts index 1773a43a356..1334fb6a80e 100644 --- a/packages/docusaurus-theme/src/components/demo/source/index.ts +++ b/packages/docusaurus-theme/src/components/demo/source/index.ts @@ -1 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + export { DemoSource, type DemoSourceProps } from './source'; diff --git a/packages/docusaurus-theme/src/components/demo/source/source.tsx b/packages/docusaurus-theme/src/components/demo/source/source.tsx index a8f4eafe34e..e80d1b5dd6d 100644 --- a/packages/docusaurus-theme/src/components/demo/source/source.tsx +++ b/packages/docusaurus-theme/src/components/demo/source/source.tsx @@ -1,3 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import { PropsWithChildren, useEffect } from 'react'; import { useDemoContext } from '../context'; import { getSourceFromChildren } from './get_source_from_children'; diff --git a/packages/docusaurus-theme/src/components/guideline/guideline.tsx b/packages/docusaurus-theme/src/components/guideline/guideline.tsx new file mode 100644 index 00000000000..385c59beec3 --- /dev/null +++ b/packages/docusaurus-theme/src/components/guideline/guideline.tsx @@ -0,0 +1,96 @@ +import { PropsWithChildren, ReactNode, useMemo } from 'react'; +import { + EuiFlexItem, + EuiSplitPanel, + EuiPanelProps, + useEuiMemoizedStyles, + UseEuiTheme, +} from '@elastic/eui'; +import { css } from '@emotion/react'; +import { GuidelineType } from './types'; +import { GuidelineText } from './guideline_text'; + +export interface GuidelineProps extends PropsWithChildren { + type: GuidelineType; + text: string | ReactNode; + panelPadding?: EuiPanelProps['paddingSize']; + panelStyle?: EuiPanelProps['style']; +} + +const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({ + root: css` + margin-block: var(--eui-theme-content-vertical-spacing); + `, + wrapper: css` + border-block-end: 2px solid ${euiTheme.colors.lightShade}; + `, + wrapperDo: css` + border-color: ${euiTheme.colors.success}; + `, + wrapperDont: css` + border-color: ${euiTheme.colors.danger}; + `, + textWrapper: css` + margin-block-start: var(--eui-size-xs); + `, +}); + +export const Guideline = ({ + children, + text, + type = 'default', + panelPadding = 'm', + panelStyle, +}: GuidelineProps) => { + const styles = useEuiMemoizedStyles(getGuidelineStyles); + + const panelColor = useMemo((): EuiPanelProps['color'] => { + if (type === 'do') { + return 'success'; + } + + if (type === 'dont') { + return 'danger'; + } + + return 'subdued'; + }, [type]); + + const textElement = useMemo(() => { + if (typeof text === 'string') { + return {text}; + } + + return text; + }, [text]); + + const wrapperStyles = [ + styles.wrapper, + type === 'do' && styles.wrapperDo, + type === 'dont' && styles.wrapperDont, + ]; + + return ( + + +
+ + {children} + + + {textElement} + +
+ + + ); +}; diff --git a/packages/docusaurus-theme/src/components/guideline/guideline_text.tsx b/packages/docusaurus-theme/src/components/guideline/guideline_text.tsx new file mode 100644 index 00000000000..86f1cb9ef04 --- /dev/null +++ b/packages/docusaurus-theme/src/components/guideline/guideline_text.tsx @@ -0,0 +1,41 @@ +import { PropsWithChildren, useMemo } from 'react'; +import { EuiText, EuiTextProps } from '@elastic/eui'; +import { GuidelineType } from './types'; + +export interface GuidelineTextProps extends PropsWithChildren { + type: GuidelineType; +} + +export const GuidelineText = ({ type, children }: GuidelineTextProps) => { + const textPrefix = useMemo(() => { + if (type === 'default') { + return undefined; + } + + return ( + <> + {type === 'do' ? 'Do:' : `Don't:`}  + + ); + }, [type]); + + const textColor = useMemo((): EuiTextProps['color'] => { + if (type === 'do') { + return 'success'; + } + + if (type === 'dont') { + return 'danger'; + } + + return 'text'; + }, [type]); + + return ( + +

+ {textPrefix}{children} +

+ + ); +}; diff --git a/packages/docusaurus-theme/src/components/guideline/index.ts b/packages/docusaurus-theme/src/components/guideline/index.ts new file mode 100644 index 00000000000..4fd9b1a0e66 --- /dev/null +++ b/packages/docusaurus-theme/src/components/guideline/index.ts @@ -0,0 +1,2 @@ +export { Guideline, type GuidelineProps } from './guideline'; +export { GuidelineText, type GuidelineTextProps } from './guideline_text'; diff --git a/packages/docusaurus-theme/src/components/guideline/types.ts b/packages/docusaurus-theme/src/components/guideline/types.ts new file mode 100644 index 00000000000..e38cce883bd --- /dev/null +++ b/packages/docusaurus-theme/src/components/guideline/types.ts @@ -0,0 +1 @@ +export type GuidelineType = 'do' | 'dont' | 'default'; diff --git a/packages/docusaurus-theme/src/components/index.ts b/packages/docusaurus-theme/src/components/index.ts new file mode 100644 index 00000000000..ca5195b8861 --- /dev/null +++ b/packages/docusaurus-theme/src/components/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { createDemo } from './demo'; +export { Guideline, GuidelineText } from './guideline'; diff --git a/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx index 4c692d6b464..8d4b495dfed 100644 --- a/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx @@ -51,7 +51,7 @@ export default function DocItemContent({ children }: Props): JSX.Element { const styles = useEuiMemoizedStyles(getContentStyles); return ( -
+
{syntheticTitle && ( <>
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx index 9bfaf8d8ec8..532a828acd1 100644 --- a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx @@ -40,7 +40,7 @@ export default function DocRootLayout({ children }: Props): JSX.Element { window.location.hash.substring(1), ); element?.scrollIntoView(true); - }, 0); + }, 100); } }, [isBrowser]); diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/index.ts b/packages/docusaurus-theme/src/theme/MDXComponents/index.ts index 6ec35bbe824..ec888aafb86 100644 --- a/packages/docusaurus-theme/src/theme/MDXComponents/index.ts +++ b/packages/docusaurus-theme/src/theme/MDXComponents/index.ts @@ -16,6 +16,7 @@ import { ListItem } from './ListItem'; import { Paragraph } from './Paragraph'; import { UnorderedList } from './UnorderedList'; import { OrderedList } from './OrderedList'; +import { Guideline, GuidelineText } from '../../components'; const MDXComponents = { ...OriginalMDXComponents, @@ -32,6 +33,8 @@ const MDXComponents = { Demo, DemoSource, PropTable, + Guideline, + GuidelineText, }; export default MDXComponents; diff --git a/packages/website/docs/components/index.mdx b/packages/website/docs/components/index.mdx new file mode 100644 index 00000000000..0eac4eb522e --- /dev/null +++ b/packages/website/docs/components/index.mdx @@ -0,0 +1 @@ +# Components diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts index 60ee5e8c665..44df607bc38 100644 --- a/packages/website/docusaurus.config.ts +++ b/packages/website/docusaurus.config.ts @@ -44,11 +44,11 @@ const config: Config = { { docs: { sidebarPath: './sidebars.ts', - editUrl: 'https://github.com/elastic/eui/tree/main/website/', + editUrl: 'https://github.com/elastic/eui/tree/main/packages/website/', }, blog: { showReadingTime: true, - editUrl: 'https://github.com/elastic/eui/tree/main/website/', + editUrl: 'https://github.com/elastic/eui/tree/main/packages/website/', }, googleTagManager: googleTagManagerId && { containerId: googleTagManagerId, @@ -76,25 +76,25 @@ const config: Config = { items: [ { type: 'docSidebar', - sidebarId: 'rootSidebar', + sidebarId: 'components', position: 'left', - label: 'Documentation', + label: 'Components', }, { type: 'docSidebar', - sidebarId: 'patternsSidebar', + sidebarId: 'patterns', position: 'left', label: 'Patterns', }, { type: 'docSidebar', - sidebarId: 'contentSidebar', + sidebarId: 'content', position: 'left', label: 'Content', }, { type: 'docSidebar', - sidebarId: 'datavizSidebar', + sidebarId: 'dataviz', position: 'left', label: 'Data visualization', }, diff --git a/packages/website/package.json b/packages/website/package.json index 959ba6e7b8d..9de4fc3dba7 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -18,11 +18,12 @@ "@docusaurus/core": "^3.5.2", "@docusaurus/preset-classic": "^3.5.2", "@elastic/datemath": "^5.0.3", - "@elastic/eui": "94.5.0", + "@elastic/eui": "97.2.0", "@elastic/eui-docgen": "workspace:^", "@elastic/eui-docusaurus-theme": "workspace:^", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", + "@faker-js/faker": "^8.4.1", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "cross-env": "^7.0.3", diff --git a/packages/website/sidebars.ts b/packages/website/sidebars.ts index 2e11c71d8b8..5f9983ac478 100644 --- a/packages/website/sidebars.ts +++ b/packages/website/sidebars.ts @@ -19,10 +19,10 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; Create as many sidebars as you want. */ const sidebars: SidebarsConfig = { - rootSidebar: [{type: 'autogenerated', dirName: '.'}], - patternsSidebar: [{ type: 'autogenerated', dirName: 'patterns' }], - contentSidebar: [{ type: 'autogenerated', dirName: 'content' }], - datavizSidebar: [{ type: 'autogenerated', dirName: 'data_visualization' }], + components: [{type: 'autogenerated', dirName: 'components'}], + patterns: [{ type: 'autogenerated', dirName: 'patterns' }], + content: [{ type: 'autogenerated', dirName: 'content' }], + dataviz: [{ type: 'autogenerated', dirName: 'data_visualization' }], }; export default sidebars; diff --git a/packages/website/src/components/homepage/header/index.tsx b/packages/website/src/components/homepage/header/index.tsx index 77429c5aaf7..32042eda655 100644 --- a/packages/website/src/components/homepage/header/index.tsx +++ b/packages/website/src/components/homepage/header/index.tsx @@ -23,7 +23,7 @@ import { DecorRight } from './decor_right'; import { DecorLeft } from './decor_left'; const title = 'Meet the EUI framework'; -const tagline = 'powering the Elastic stack'; +const tagline = 'powering the Elastic Stack'; const DESCRIPTION_DATA = [ { diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx index 53b97525d70..e9957110530 100644 --- a/packages/website/src/components/homepage/highlights/index.tsx +++ b/packages/website/src/components/homepage/highlights/index.tsx @@ -31,28 +31,28 @@ import SvgTable from './svg/table.svg'; const CONTENT_DATA = [ { title: 'Flexible layout', - href: '/docs/components/flex', + href: '/docs/layout/flex', svg: SvgFlex, description: 'Flex groups, grids, panels and items to build responsive page layout', }, { title: 'Spacer', - href: '/docs/components/spacer/', + href: '/docs/layout/spacer/', svg: SvgSpacer, description: 'Component with strictly defined height to organise content blocks', }, { title: 'Text', - href: '/docs/components/text', + href: '/docs/display/text', svg: SvgText, description: 'Simple HTML text like paragraphs or lists, wrapped in a single component', }, { title: 'Title', - href: '/docs/components/title', + href: '/docs/display/title', svg: SvgTitle, description: 'Component for styling the page, section, and content headings', @@ -65,39 +65,39 @@ const CONTENT_DATA = [ }, { title: 'Button', - href: '/docs/components/button', + href: '/docs/navigation/button', svg: SvgButton, description: 'Variety of buttons and button groups with different styles and colours', }, { title: 'Link', - href: '/docs/components/link', + href: '/docs/navigation/link', svg: SvgLink, description: 'Component designed to display nicely within a block of text', }, { title: 'Tooltip', - href: '/docs/components/tooltip', + href: '/docs/display/tooltip', svg: SvgTooltip, description: 'Contextual information hint with flexible positioning and behavior', }, { title: 'Panel', - href: '/docs/components/panel', + href: '/docs/layout/panel', svg: SvgPanel, description: 'Layout helper, commonly used as a base for other components', }, { title: 'Callout', - href: '/docs/components/callout', + href: '/docs/display/callout', svg: SvgCallout, description: 'Important message directly related to content on the page', }, { title: 'Card', - href: '/docs/components/card', + href: '/docs/display/card', svg: SvgCard, description: 'Vertical or horizontal cards, containing any custom components needed', diff --git a/yarn.lock b/yarn.lock index ff46d34f168..e8847b6dfb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5719,7 +5719,7 @@ __metadata: "@docusaurus/types": "npm:^3.5.2" "@docusaurus/utils-validation": "npm:^3.5.2" "@elastic/datemath": "npm:^5.0.3" - "@elastic/eui": "npm:94.5.0" + "@elastic/eui": "npm:97.2.0" "@elastic/eui-docgen": "workspace:^" "@emotion/css": "npm:^11.11.2" "@emotion/react": "npm:^11.11.4" @@ -5759,11 +5759,12 @@ __metadata: "@docusaurus/tsconfig": "npm:^3.5.2" "@docusaurus/types": "npm:^3.5.2" "@elastic/datemath": "npm:^5.0.3" - "@elastic/eui": "npm:94.5.0" + "@elastic/eui": "npm:97.2.0" "@elastic/eui-docgen": "workspace:^" "@elastic/eui-docusaurus-theme": "workspace:^" "@emotion/css": "npm:^11.11.2" "@emotion/react": "npm:^11.11.4" + "@faker-js/faker": "npm:^8.4.1" "@mdx-js/react": "npm:^3.0.0" "@types/react": "npm:^18.3.3" "@types/react-dom": "npm:^18.3.0" @@ -5779,58 +5780,7 @@ __metadata: languageName: unknown linkType: soft -"@elastic/eui@npm:94.5.0": - version: 94.5.0 - resolution: "@elastic/eui@npm:94.5.0" - dependencies: - "@hello-pangea/dnd": "npm:^16.6.0" - "@types/lodash": "npm:^4.14.202" - "@types/numeral": "npm:^2.0.5" - "@types/react-window": "npm:^1.8.8" - "@types/refractor": "npm:^3.4.0" - chroma-js: "npm:^2.4.2" - classnames: "npm:^2.5.1" - lodash: "npm:^4.17.21" - mdast-util-to-hast: "npm:^10.2.0" - numeral: "npm:^2.0.6" - prop-types: "npm:^15.8.1" - react-dropzone: "npm:^11.7.1" - react-element-to-jsx-string: "npm:^15.0.0" - react-focus-on: "npm:^3.9.1" - react-is: "npm:^17.0.2" - react-remove-scroll-bar: "npm:^2.3.4" - react-virtualized-auto-sizer: "npm:^1.0.24" - react-window: "npm:^1.8.10" - refractor: "npm:^3.6.0" - rehype-raw: "npm:^5.1.0" - rehype-react: "npm:^6.2.1" - rehype-stringify: "npm:^8.0.0" - remark-breaks: "npm:^2.0.2" - remark-emoji: "npm:^2.1.0" - remark-parse-no-trim: "npm:^8.0.4" - remark-rehype: "npm:^8.1.0" - tabbable: "npm:^5.3.3" - text-diff: "npm:^1.0.1" - unified: "npm:^9.2.2" - unist-util-visit: "npm:^2.0.3" - url-parse: "npm:^1.5.10" - uuid: "npm:^8.3.0" - vfile: "npm:^4.2.1" - peerDependencies: - "@elastic/datemath": ^5.0.2 - "@emotion/css": 11.x - "@emotion/react": 11.x - "@types/react": ^16.9 || ^17.0 || ^18.0 - "@types/react-dom": ^16.9 || ^17.0 || ^18.0 - moment: ^2.13.0 - react: ^16.12 || ^17.0 || ^18.0 - react-dom: ^16.12 || ^17.0 || ^18.0 - typescript: ~4.5.3 - checksum: 10c0/8735217fed4d961f12d4becee674629d5ca5ee80a742fc13ce7c0d66eb04055e17c0259f1d15138a6b4cfe50da76b06cdf3359df3a82c1adec9e9903d2b9acef - languageName: node - linkType: hard - -"@elastic/eui@workspace:packages/eui": +"@elastic/eui@npm:97.2.0, @elastic/eui@workspace:packages/eui": version: 0.0.0-use.local resolution: "@elastic/eui@workspace:packages/eui" dependencies: @@ -6483,6 +6433,13 @@ __metadata: languageName: node linkType: hard +"@faker-js/faker@npm:^8.4.1": + version: 8.4.1 + resolution: "@faker-js/faker@npm:8.4.1" + checksum: 10c0/4f2aecddcfdc2cc8b50b2d15d1e37302a7c7a5bbd184ae910a9d271bc11248533ca74dcdd4a9ccbe20410553e7af0f6a4d334c5b955635e09a32ddf4a64942d4 + languageName: node + linkType: hard + "@fal-works/esbuild-plugin-global-externals@npm:^2.1.2": version: 2.1.2 resolution: "@fal-works/esbuild-plugin-global-externals@npm:2.1.2" @@ -13676,24 +13633,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001517": - version: 1.0.30001564 - resolution: "caniuse-lite@npm:1.0.30001564" - checksum: 10c0/27722fea974fc8d2cd334cdef23e1299465c870c97902cc5c293673e6c3ae5241f36f31ca180c903160f0b1c3b51e2b2e8962c537b0a6ac6518a1113b5b5665e - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001587": - version: 1.0.30001608 - resolution: "caniuse-lite@npm:1.0.30001608" - checksum: 10c0/eb77c78fb5b0f75b0fdfcc7c40b9d7d11aeb9514091347b42dda4c13c81d14579495939e8ee00572b4ce6af21b3ab4b8ceb68c43f0caf8a2c478f3dcc085e74a - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001599": - version: 1.0.30001629 - resolution: "caniuse-lite@npm:1.0.30001629" - checksum: 10c0/e95136a423c0c5e7f9d026ef3f9be8d06cadc4c83ad65eedfaeaba6b5eb814489ea186e90bae1085f3be7348577e25f8fe436b384c2f983324ad8dea4a7dfe1d +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599": + version: 1.0.30001669 + resolution: "caniuse-lite@npm:1.0.30001669" + checksum: 10c0/f125f23440d3dbb6c25ffb8d55f4ce48af36a84d0932b152b3b74f143a4170cbe92e02b0a9676209c86609bf7bf34119ff10cc2bc7c1b7ea40e936cc16598408 languageName: node linkType: hard