-
+
A banner for displaying information... Click to dismiss!
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
index 478da7da87..e1d00edac0 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
@@ -16,8 +16,8 @@ export default function BreadcrumbDemo({ children, color }) {
return (
-
-
+
External link
- Internal link
+ {!inIndex ? (Internal link ) : null}
Mail link
)
}
diff --git a/examples/ui/client-capabilities/interaction/anchored-region.js b/examples/ui/client-capabilities/interaction/anchored-region.js
index 891615d800..604b6ff834 100644
--- a/examples/ui/client-capabilities/interaction/anchored-region.js
+++ b/examples/ui/client-capabilities/interaction/anchored-region.js
@@ -1,9 +1,11 @@
import { CodeSection } from '../../documentationBase';
import useIsBrowser from '@docusaurus/useIsBrowser';
+import {useWindowSize} from '@site/src/components/Hooks';
-export default function AnchoredRegionDemo({ children, color }) {
-
+export default function AnchoredRegionDemo({}) {
const isBrowser = useIsBrowser();
+ const windowSize = useWindowSize();
+ const isSmall = windowSize.width < 1400;
if (isBrowser) {
const RapidImports = require('../../rapidImports');
@@ -13,14 +15,15 @@ export default function AnchoredRegionDemo({ children, color }) {
return (
)
diff --git a/examples/ui/client-capabilities/interaction/combobox.js b/examples/ui/client-capabilities/interaction/combobox.js
index b5a8a4e161..de72950a0e 100644
--- a/examples/ui/client-capabilities/interaction/combobox.js
+++ b/examples/ui/client-capabilities/interaction/combobox.js
@@ -1,7 +1,7 @@
-import { CodeLabel, CodeSection } from '../../documentationBase';
+import { CodeSection } from '../../documentationBase';
import useIsBrowser from '@docusaurus/useIsBrowser';
-export default function ComboboxDemo({ children, color }) {
+export default function ComboboxDemo({ inIndex = false }) {
const isBrowser = useIsBrowser();
if (isBrowser) {
@@ -9,9 +9,11 @@ export default function ComboboxDemo({ children, color }) {
RapidImports.registerComponents();
}
+ const styles = inIndex ? {minWidth: '0px', marginBottom: '120px', width: '100%'} : {}
+
return (
-
+
Small
Medium
Large
diff --git a/examples/ui/client-capabilities/interaction/modal.js b/examples/ui/client-capabilities/interaction/modal.js
index 6ea5337b2b..20214de06c 100644
--- a/examples/ui/client-capabilities/interaction/modal.js
+++ b/examples/ui/client-capabilities/interaction/modal.js
@@ -2,7 +2,7 @@ import { CodeLabel, CodeSection } from '../../documentationBase';
import React, { useEffect, useRef, useState } from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
-export default function ModalDemo({ children, color }) {
+export default function ModalDemo({ inIndex = false }) {
const isBrowser = useIsBrowser();
@@ -61,6 +61,25 @@ export default function ModalDemo({ children, color }) {
}, []);
+ if (inIndex) {
+ return (
+
+ )
+ }
+
return (Modal:
+
Breadcrumb item 1
Breadcrumb item 2
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
index bc43650233..43e6a9c9d6 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
@@ -11,7 +11,7 @@ function setup() {
}
}
-export default function HorizontalScrollDemo({ children, color }) {
+export default function HorizontalScrollDemo({ inIndex = false }) {
setup();
return (
@@ -30,7 +30,8 @@ export default function HorizontalScrollDemo({ children, color }) {
Card number 3
A button
-
+ {!inIndex ?
+ (<>
Card number 4
A button
@@ -65,7 +66,7 @@ export default function HorizontalScrollDemo({ children, color }) {
Card number 12
A button
-
+ ) : null}
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/index.mdx b/docs/001_develop/03_client-capabilities/009_presentation/index.mdx
index 53b0ad1bb5..99c1bb3c8c 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/index.mdx
+++ b/docs/001_develop/03_client-capabilities/009_presentation/index.mdx
@@ -10,34 +10,7 @@ tags:
sidebar_position: 9
---
-Coming soon...
+import PresentationDemo from './presentation-index.js';
-Avatar
+
-
+
+
+ handleClick(modalRef)}>
+ Open modal
+
+
+ Modal example
+
+
+
diff --git a/examples/ui/client-capabilities/interaction/select.js b/examples/ui/client-capabilities/interaction/select.js
index ecc92da3a4..f5aa588c99 100644
--- a/examples/ui/client-capabilities/interaction/select.js
+++ b/examples/ui/client-capabilities/interaction/select.js
@@ -1,7 +1,7 @@
import { CodeLabel, CodeSection } from '../../documentationBase';
import useIsBrowser from '@docusaurus/useIsBrowser';
-export default function SelectDemo({ children, color }) {
+export default function SelectDemo({inIndex = false}) {
const isBrowser = useIsBrowser();
if (isBrowser) {
@@ -9,5 +9,7 @@ export default function SelectDemo({ children, color }) {
RapidImports.registerComponents();
}
- return (Small Large Small Large {children} )
}
-export default function MenuDemo({ children, color }) {
+export default function MenuDemo({ inIndex = false }) {
const isBrowser = useIsBrowser();
@@ -20,7 +19,7 @@ export default function MenuDemo({ children, color }) {
Appetizers
Entrees
- Desserts
+ {!inIndex ? (Desserts ) : null}
-
+ {!inIndex ?
+ (
+ ) : null}
)
diff --git a/examples/ui/client-capabilities/interaction/toolbar.js b/examples/ui/client-capabilities/interaction/toolbar.js
index a5de07e1ed..9f840b94ce 100644
--- a/examples/ui/client-capabilities/interaction/toolbar.js
+++ b/examples/ui/client-capabilities/interaction/toolbar.js
@@ -1,7 +1,7 @@
import { CodeSection } from '../../documentationBase';
import useIsBrowser from '@docusaurus/useIsBrowser';
-export default function ToolbarDemo({ children, color }) {
+export default function ToolbarDemo({ inIndex = false }) {
const isBrowser = useIsBrowser();
@@ -10,19 +10,21 @@ export default function ToolbarDemo({ children, color }) {
RapidImports.registerComponents();
}
+ const styles = inIndex ? {minWidth: '0px', marginBottom: '50px', width: '100%'} : {}
+
return (
Button
-
+
Option 1
Second option
- Option 3
+ {!inIndex ? Option 3 : null}
One
Two
- Three
+ {!inIndex ? Three : null}
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index 3fac1e1714..41b8620630 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -1,26 +1,44 @@
import React from "react";
import './Card.css'
-export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg' }) {
+export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg', children }) {
+ const wrapperStyle = !children ? {} : {
+ display: 'contents',
+ };
+
+ // Stops the link working when interacting with the live examples
+ const handleChildClick = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ };
+
return (
-
-
-
{items.map((item, index) => item.link && (
-
))}
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Card/LoadingRing.js b/src/components/Card/LoadingRing.js
new file mode 100644
index 0000000000..5c079cca9b
--- /dev/null
+++ b/src/components/Card/LoadingRing.js
@@ -0,0 +1,64 @@
+// Used to show loading ring when bootstraping
+// our live examples because the design system provider
+// takes a second to load. This also means we can't use
+// our own progress ring
+const LoadingRing = () => {
+ const ringStyles = {
+ display: 'flex',
+ position: 'relative',
+ width: '80px',
+ height: '80px',
+ margin: '0 auto',
+ };
+
+ const ringChildStyles = {
+ boxSizing: 'border-box',
+ display: 'block',
+ position: 'absolute',
+ width: '64px',
+ height: '64px',
+ margin: '8px',
+ border: '8px solid #fff',
+ borderRadius: '50%',
+ animation: 'ring-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite',
+ borderColor: '#3498db transparent transparent transparent',
+ };
+
+ const child2Styles = {
+ ...ringChildStyles,
+ animationDelay: '-0.45s',
+ };
+
+ const child3Styles = {
+ ...ringChildStyles,
+ animationDelay: '-0.3s',
+ };
+
+ const child4Styles = {
+ ...ringChildStyles,
+ animationDelay: '-0.15s',
+ };
+
+ return (
+
- { imageUrl && (
- 
- )}
-
-
-
+
+ { heading }
-- { text } -
-
+
+
)
-}
\ No newline at end of file
+}
diff --git a/src/components/Card/CardList.js b/src/components/Card/CardList.js
index a8b3d0ce2e..984d05dcd2 100644
--- a/src/components/Card/CardList.js
+++ b/src/components/Card/CardList.js
@@ -4,18 +4,18 @@ import './CardList.css';
import Card from './Card';
const generateClassNameFromHref = (href) => {
- return href?.replace(/^\/+|\/+$/g, '').toLowerCase().replace(/\//g, '-').replace(/[^a-z0-9-]/g, '');
+ return href?.replace(/^\/+|\/+$/g, '').toLowerCase().replace(/\//g, '-').replace(/[^a-z0-9-]/g, '');
};
export default function CardList({ inRow = 1, xs = 12, sm = 6, md = 4, items }) {
return (
+ {children ? (
+
+ )
+ )}
+
+
+ {children}
+
+ ) : (
+ imageUrl && (
+
+
-
+ {heading}
+{text}
+
+
+
+
+
+
+ );
+};
+
+export default LoadingRing;
diff --git a/src/components/Hooks.jsx b/src/components/Hooks.jsx
new file mode 100644
index 0000000000..5f29b43ba2
--- /dev/null
+++ b/src/components/Hooks.jsx
@@ -0,0 +1,34 @@
+import {useState, useEffect} from 'react';
+
+export function useUpdateCSSVariable(variable, value) {
+ useEffect(() => {
+ document.documentElement.style.setProperty(variable, value);
+
+ return () => {
+ document.documentElement.style.removeProperty(variable);
+ };
+ }, [variable, value]);
+}
+
+export function useWindowSize() {
+ const [windowSize, setWindowSize] = useState({
+ width: typeof window !== 'undefined' ? window.innerWidth : undefined,
+ height: typeof window !== 'undefined' ? window.innerHeight : undefined,
+ });
+
+ useEffect(() => {
+ function handleResize() {
+ setWindowSize({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ }
+
+ window.addEventListener('resize', handleResize);
+ // Initial size is now set in useState, so we don't need to call handleResize here
+
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ return windowSize;
+}
diff --git a/src/components/LiveExampleBuilder.js b/src/components/LiveExampleBuilder.js
new file mode 100644
index 0000000000..2cf251ad4e
--- /dev/null
+++ b/src/components/LiveExampleBuilder.js
@@ -0,0 +1,45 @@
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import CardList from '@site/src/components/Card/CardList';
+import LoadingRing from '@site/src/components/Card/LoadingRing';
+import {useState, useEffect} from 'react';
+
+export default function LiveExampleBuilder({ itemData }) {
+ const isBrowser = useIsBrowser();
+ const [isLoading, setIsLoading] = useState(true);
+
+ const processedItems = itemData.map((item) => ({
+ ...item,
+ ...(item.children ? {children: {...item.children, props: {inIndex: true}}} : {}),
+ }))
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsLoading(false);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (isBrowser) {
+ const RapidImports = require('../../examples/ui/rapidImports');
+ RapidImports.registerComponents();
+ }
+
+ return (
+ <>
+ {isLoading ? (
+
+
+ )}
+
+ );
+}
+
diff --git a/src/css/custom.css b/src/css/custom.css
index 22e2a743ab..eb6b97db27 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -68,7 +68,7 @@
--doc-sidebar-width: 325px !important;
- --toc-sidebar-width: 325px;
+ --toc-sidebar-width: 140px;
}
body {
@@ -216,7 +216,7 @@ h5 {
}
.main-wrapper main article {
- max-width: 100rem;
+ max-width: 120rem;
}
@media (min-aspect-ratio: 1/1) and (min-width: 1512px) {
@@ -224,6 +224,15 @@ h5 {
margin-left: auto;
margin-right: auto;
}
+ :root {
+ --toc-sidebar-width: 220px;
+ }
+}
+
+@media (min-aspect-ratio: 1/1) and (min-width: 2250px) {
+ :root {
+ --toc-sidebar-width: 335px;
+ }
}
@media (min-aspect-ratio: 1/1) and (max-width: 996px) {
diff --git a/src/theme/DocCardList.tsx b/src/theme/DocCardList.tsx
index 6ef007c31d..1c59bb5cec 100644
--- a/src/theme/DocCardList.tsx
+++ b/src/theme/DocCardList.tsx
@@ -21,7 +21,7 @@ export default function DocCardList(props: Props): JSX.Element {
const category = useCurrentSidebarCategory();
const extraCategoryData = sidebarItemsData[category.href];
let enrichedItems = filterDocCardListItems(items);
-
+
if (extraCategoryData?.items) {
enrichedItems = enrichedItems.map((item) => {
const extraData = extraCategoryData.items.find(extraItemData => extraItemData.href === item.href) || {};
@@ -30,7 +30,7 @@ export default function DocCardList(props: Props): JSX.Element {
...extraData,
};
});
- }
+ }
const filteredItems = enrichedItems.map((
{ label: heading, href: link, description: text, imageUrl },
@@ -46,4 +46,4 @@ export default function DocCardList(props: Props): JSX.Element {
/>
);
-}
\ No newline at end of file
+}