@elastic/eui-docusaurus-theme 2.6.0 → 2.7.0

package/lib/components/figma_asset/index.d.ts

@@ -0,0 +1,25 @@
+import { IframeHTMLAttributes, ImgHTMLAttributes } from 'react';
+type FigmaAssetBase = {
+    /** Figma file/node URL (used for embed mode; kept as source reference for images). */
+    url: string;
+    /** Required accessible text: iframe `title` / image `alt`. */
+    title: string;
+};
+export type FigmaAssetImageProps = FigmaAssetBase & Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'title' | 'alt'> & {
+    /**
+     * Renders a static image (default). Pass any image URL string (SVG preferred;
+     * WebP/PNG also work). Prefer a colocated URL import, e.g.
+     * `import asset from '!url-loader!./assets/….svg'` then `src={asset}`.
+     * (Plain `.svg` imports become React components via SVGR and are not valid `img` URLs.)
+     */
+    type?: 'image';
+    src: string;
+};
+export type FigmaAssetEmbedProps = FigmaAssetBase & Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'src' | 'title'> & {
+    /** Renders an interactive Figma iframe from `url`. */
+    type: 'embed';
+    src?: never;
+};
+export type FigmaAssetProps = FigmaAssetImageProps | FigmaAssetEmbedProps;
+export declare const FigmaAsset: (props: FigmaAssetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/figma_asset/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/*
+ * 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 { useMemo, } from 'react';
+import { useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+const getFigmaAssetStyles = (euiTheme) => ({
+    wrapper: css `
+    border: 1px solid ${euiTheme.euiTheme.colors.borderBasePlain};
+    border-radius: ${euiTheme.euiTheme.size.s};
+    margin: ${euiTheme.euiTheme.size.xl} 0;
+    overflow: hidden;
+    background-color: ${euiTheme.euiTheme.colors.backgroundLightText};
+  `,
+    iframe: css `
+    border-radius: ${euiTheme.euiTheme.size.s};
+    display: block;
+  `,
+    image: css `
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+  `,
+});
+export const FigmaAsset = (props) => {
+    const { url, title } = props;
+    const baseUrl = useBaseUrl('/', { absolute: true });
+    const imageSrcProp = props.type === 'embed' ? undefined : props.src;
+    const imageSrcString = typeof imageSrcProp === 'string' ? imageSrcProp : undefined;
+    const baseImageSrc = useBaseUrl(imageSrcString?.startsWith('/') ? imageSrcString : '/');
+    // Imported assets are already resolved URLs; only site-root paths need useBaseUrl.
+    const imageSrc = imageSrcString?.startsWith('/')
+        ? baseImageSrc
+        : (imageSrcString ?? '');
+    const styles = useEuiMemoizedStyles(getFigmaAssetStyles);
+    const embedSrc = useMemo(() => {
+        const params = new URLSearchParams({
+            embed_host: 'eui.elastic.co',
+            embed_origin: baseUrl,
+            url,
+        });
+        return `https://www.figma.com/embed?${params.toString()}`;
+    }, [url, baseUrl]);
+    if (props.type === 'embed') {
+        const { url: _url, title: _title, type: _type, ...iframeRest } = props;
+        return (_jsx("div", { css: styles.wrapper, children: _jsx("iframe", { ...iframeRest, css: styles.iframe, title: title, height: "450", width: "100%", src: embedSrc, allowFullScreen: true }) }));
+    }
+    const { url: _url, title: _title, type: _type, src: _src, ...imgRest } = props;
+    if (typeof props.src !== 'string') {
+        throw new Error('FigmaAsset: `src` must be a URL string. Import SVGs with `!url-loader!` (e.g. `import asset from \'!url-loader!./assets/foo.svg\'`), not as a bare `.svg` module (SVGR returns a React component).');
+    }
+    return (_jsx("div", { css: styles.wrapper, children: _jsx("img", { ...imgRest, css: styles.image, src: imageSrc, alt: title }) }));
+};

package/lib/components/index.d.ts

@@ -1,6 +1,7 @@
 export { AppThemeContext, useAppTheme } from './theme_context';
 export { Badge } from './badge';
-export { FigmaEmbed } from './figma_embed';
+export { FigmaAsset } from './figma_asset';
+export type { FigmaAssetProps, FigmaAssetImageProps, FigmaAssetEmbedProps, } from './figma_asset';
 export { Guideline, GuidelineText } from './guideline';
 export { Icon } from './icon';
 export { PropTable } from './prop_table';

package/lib/components/index.js

@@ -7,7 +7,7 @@
  */
 export { AppThemeContext, useAppTheme } from './theme_context';
 export { Badge } from './badge';
-export { FigmaEmbed } from './figma_embed';
+export { FigmaAsset } from './figma_asset';
 export { Guideline, GuidelineText } from './guideline';
 export { Icon } from './icon';
 export { PropTable } from './prop_table';

package/lib/theme/MDXComponents/index.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import OriginalMDXComponents from '@theme-init/MDXComponents';
-import { Badge, Demo, DemoSource, FigmaEmbed, Guideline, GuidelineText, Icon, PropTable, } from '../../components';
+import { Badge, Demo, DemoSource, FigmaAsset, Guideline, GuidelineText, Icon, PropTable, } from '../../components';
 import { ListItem } from './ListItem';
 import { Blockquote } from './Blockquote';
 import { Paragraph } from './Paragraph';
@@ -37,7 +37,7 @@ const MDXComponents = {
     Badge,
     Demo,
     DemoSource,
-    FigmaEmbed,
+    FigmaAsset,
     Guideline,
     GuidelineText,
     Icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "EUI theme for Docusaurus",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -40,7 +40,7 @@
     "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/utils-validation": "^3.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^117.1.0",
+    "@elastic/eui": "^118.0.0",
     "@elastic/eui-theme-borealis": "^8.0.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",

package/src/components/figma_asset/index.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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 {
+  IframeHTMLAttributes,
+  ImgHTMLAttributes,
+  useMemo,
+} from 'react';
+import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+type FigmaAssetBase = {
+  /** Figma file/node URL (used for embed mode; kept as source reference for images). */
+  url: string;
+  /** Required accessible text: iframe `title` / image `alt`. */
+  title: string;
+};
+
+export type FigmaAssetImageProps = FigmaAssetBase &
+  Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'title' | 'alt'> & {
+    /**
+     * Renders a static image (default). Pass any image URL string (SVG preferred;
+     * WebP/PNG also work). Prefer a colocated URL import, e.g.
+     * `import asset from '!url-loader!./assets/….svg'` then `src={asset}`.
+     * (Plain `.svg` imports become React components via SVGR and are not valid `img` URLs.)
+     */
+    type?: 'image';
+    src: string;
+  };
+
+export type FigmaAssetEmbedProps = FigmaAssetBase &
+  Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'src' | 'title'> & {
+    /** Renders an interactive Figma iframe from `url`. */
+    type: 'embed';
+    src?: never;
+  };
+
+export type FigmaAssetProps = FigmaAssetImageProps | FigmaAssetEmbedProps;
+
+const getFigmaAssetStyles = (euiTheme: UseEuiTheme) => ({
+  wrapper: css`
+    border: 1px solid ${euiTheme.euiTheme.colors.borderBasePlain};
+    border-radius: ${euiTheme.euiTheme.size.s};
+    margin: ${euiTheme.euiTheme.size.xl} 0;
+    overflow: hidden;
+    background-color: ${euiTheme.euiTheme.colors.backgroundLightText};
+  `,
+  iframe: css`
+    border-radius: ${euiTheme.euiTheme.size.s};
+    display: block;
+  `,
+  image: css`
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+  `,
+});
+
+export const FigmaAsset = (props: FigmaAssetProps) => {
+  const { url, title } = props;
+  const baseUrl = useBaseUrl('/', { absolute: true });
+  const imageSrcProp = props.type === 'embed' ? undefined : props.src;
+  const imageSrcString =
+    typeof imageSrcProp === 'string' ? imageSrcProp : undefined;
+  const baseImageSrc = useBaseUrl(
+    imageSrcString?.startsWith('/') ? imageSrcString : '/'
+  );
+  // Imported assets are already resolved URLs; only site-root paths need useBaseUrl.
+  const imageSrc = imageSrcString?.startsWith('/')
+    ? baseImageSrc
+    : (imageSrcString ?? '');
+  const styles = useEuiMemoizedStyles(getFigmaAssetStyles);
+
+  const embedSrc = useMemo(() => {
+    const params = new URLSearchParams({
+      embed_host: 'eui.elastic.co',
+      embed_origin: baseUrl,
+      url,
+    });
+
+    return `https://www.figma.com/embed?${params.toString()}`;
+  }, [url, baseUrl]);
+
+  if (props.type === 'embed') {
+    const { url: _url, title: _title, type: _type, ...iframeRest } = props;
+
+    return (
+      <div css={styles.wrapper}>
+        <iframe
+          {...iframeRest}
+          css={styles.iframe}
+          title={title}
+          height="450"
+          width="100%"
+          src={embedSrc}
+          allowFullScreen
+        />
+      </div>
+    );
+  }
+
+  const { url: _url, title: _title, type: _type, src: _src, ...imgRest } =
+    props;
+
+  if (typeof props.src !== 'string') {
+    throw new Error(
+      'FigmaAsset: `src` must be a URL string. Import SVGs with `!url-loader!` (e.g. `import asset from \'!url-loader!./assets/foo.svg\'`), not as a bare `.svg` module (SVGR returns a React component).'
+    );
+  }
+
+  return (
+    <div css={styles.wrapper}>
+      <img {...imgRest} css={styles.image} src={imageSrc} alt={title} />
+    </div>
+  );
+};

package/src/components/index.ts

@@ -8,7 +8,12 @@
 
 export { AppThemeContext, useAppTheme } from './theme_context';
 export { Badge } from './badge';
-export { FigmaEmbed } from './figma_embed';
+export { FigmaAsset } from './figma_asset';
+export type {
+  FigmaAssetProps,
+  FigmaAssetImageProps,
+  FigmaAssetEmbedProps,
+} from './figma_asset';
 export { Guideline, GuidelineText } from './guideline';
 export { Icon } from './icon';
 export { PropTable } from './prop_table';

package/src/theme/MDXComponents/index.ts

@@ -11,7 +11,7 @@ import {
   Badge,
   Demo,
   DemoSource,
-  FigmaEmbed,
+  FigmaAsset,
   Guideline,
   GuidelineText,
   Icon,
@@ -51,7 +51,7 @@ const MDXComponents = {
   Badge,
   Demo,
   DemoSource,
-  FigmaEmbed,
+  FigmaAsset,
   Guideline,
   GuidelineText,
   Icon,

package/lib/components/figma_embed/index.d.ts

@@ -1,5 +0,0 @@
-import { IframeHTMLAttributes } from 'react';
-export interface FigmaEmbedProps extends IframeHTMLAttributes<HTMLIFrameElement> {
-    url: string;
-}
-export declare const FigmaEmbed: ({ url, ...rest }: FigmaEmbedProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/components/figma_embed/index.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-/*
- * 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 { useMemo } from 'react';
-import { useEuiMemoizedStyles } from '@elastic/eui';
-import { css } from '@emotion/react';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-const getFigmaEmbedStyles = (euiTheme) => ({
-    wrapper: css `
-    border: 1px solid ${euiTheme.euiTheme.colors.lightShade};
-    border-radius: ${euiTheme.euiTheme.size.s};
-    margin: ${euiTheme.euiTheme.size.xl} 0;
-  `,
-    iframe: css `
-    border-radius: ${euiTheme.euiTheme.size.s};
-    display: block;
-  `,
-});
-export const FigmaEmbed = ({ url, ...rest }) => {
-    const baseUrl = useBaseUrl('/', { absolute: true });
-    const styles = useEuiMemoizedStyles(getFigmaEmbedStyles);
-    const src = useMemo(() => {
-        const params = new URLSearchParams({
-            embed_host: 'eui.elastic.co',
-            embed_origin: baseUrl,
-            url,
-        });
-        return `https://www.figma.com/embed?${params.toString()}`;
-    }, [url, baseUrl]);
-    return (_jsx("div", { css: styles.wrapper, children: _jsx("iframe", { ...rest, css: styles.iframe, height: "450", width: "100%", src: src, allowFullScreen: true }) }));
-};

package/src/components/figma_embed/index.tsx

@@ -1,57 +0,0 @@
-/*
- * 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 { IframeHTMLAttributes, useMemo } from 'react';
-import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-export interface FigmaEmbedProps
-  extends IframeHTMLAttributes<HTMLIFrameElement> {
-  url: string;
-}
-
-const getFigmaEmbedStyles = (euiTheme: UseEuiTheme) => ({
-  wrapper: css`
-    border: 1px solid ${euiTheme.euiTheme.colors.lightShade};
-    border-radius: ${euiTheme.euiTheme.size.s};
-    margin: ${euiTheme.euiTheme.size.xl} 0;
-  `,
-  iframe: css`
-    border-radius: ${euiTheme.euiTheme.size.s};
-    display: block;
-  `,
-});
-
-export const FigmaEmbed = ({ url, ...rest }: FigmaEmbedProps) => {
-  const baseUrl = useBaseUrl('/', { absolute: true });
-  const styles = useEuiMemoizedStyles(getFigmaEmbedStyles);
-
-  const src = useMemo(() => {
-    const params = new URLSearchParams({
-      embed_host: 'eui.elastic.co',
-      embed_origin: baseUrl,
-      url,
-    });
-
-    return `https://www.figma.com/embed?${params.toString()}`;
-  }, [url, baseUrl]);
-
-  return (
-    <div css={styles.wrapper}>
-      <iframe
-        {...rest}
-        css={styles.iframe}
-        height="450"
-        width="100%"
-        src={src}
-        allowFullScreen
-      />
-    </div>
-  );
-};