@stoplight/elements-core 9.0.15-beta-0.3 → 9.0.16-beta-0.1

package/src/components/Docs/Sections.tsx

@@ -0,0 +1,54 @@
+import { Box, Flex, HeadingProps, Panel, PanelProps } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { slugify } from '../../utils/string';
+import { LinkHeading } from '../LinkHeading';
+
+export interface ISectionTitle {
+  title: string;
+  id?: string;
+  size?: HeadingProps['size'];
+  isCompact?: boolean;
+}
+
+export const SectionTitle: React.FC<ISectionTitle> = ({ title, id, size = 2, isCompact = false, children }) => {
+  return (
+    <Flex w="full">
+      <Box py={1} pr={6} as={LinkHeading} size={size} aria-label={title} id={id || slugify(title)}>
+        {title}
+      </Box>
+      <Flex alignSelf={'center'} py={1} flexGrow style={{ minWidth: 0 }} justify={isCompact ? 'end' : undefined}>
+        {children}
+      </Flex>
+    </Flex>
+  );
+};
+
+export const SectionSubtitle: React.FC<ISectionTitle> = props => {
+  return <SectionTitle {...props} size={3} />;
+};
+
+type SubSectionPanelProps = {
+  title: React.ReactNode;
+  hasContent?: boolean;
+  rightComponent?: React.ReactNode;
+};
+
+export const SubSectionPanel: React.FC<SubSectionPanelProps & Pick<PanelProps, 'defaultIsOpen' | 'onChange'>> = ({
+  title,
+  children,
+  hasContent,
+  rightComponent,
+  defaultIsOpen = true,
+  onChange,
+}) => {
+  return (
+    <Panel isCollapsible={hasContent} defaultIsOpen={defaultIsOpen} onChange={onChange} appearance="outlined">
+      <Panel.Titlebar fontWeight="medium" rightComponent={rightComponent}>
+        <div role="heading">{title}</div>
+      </Panel.Titlebar>
+
+      {hasContent !== false && <Panel.Content>{children}</Panel.Content>}
+    </Panel>
+  );
+};

package/src/components/Docs/Security/PanelContent.tsx

@@ -0,0 +1,38 @@
+import { MarkdownViewer } from '@stoplight/markdown-viewer';
+import { Box, NodeAnnotation } from '@stoplight/mosaic';
+import { HttpSecurityScheme } from '@stoplight/types';
+import * as React from 'react';
+
+import { useOptionsCtx } from '../../../context/Options';
+import { getReadableSecurityName, shouldIncludeKey } from '../../../utils/oas/security';
+import { getDefaultDescription } from '../../../utils/securitySchemes';
+
+export const PanelContent: React.FC<{ schemes: HttpSecurityScheme[] }> = ({ schemes }) => {
+  const { nodeHasChanged } = useOptionsCtx();
+
+  if (!schemes || !schemes.length) {
+    return null;
+  }
+
+  const collection = schemes.length > 1;
+
+  return (
+    <Box>
+      {schemes.map(scheme => (
+        <Box key={scheme.key} p={2} m={2} border>
+          {collection && (
+            <MarkdownViewer
+              style={{ fontWeight: 'bold', fontSize: 12, marginBottom: 10 }}
+              markdown={getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type))}
+            />
+          )}
+          <MarkdownViewer
+            style={{ fontSize: 12 }}
+            markdown={`${scheme.description ?? ''}\n\n` + getDefaultDescription(scheme)}
+          />
+          <NodeAnnotation change={nodeHasChanged?.({ nodeId: scheme.id })} />
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/components/Docs/Security/index.ts

@@ -0,0 +1 @@
+export * from './PanelContent';

package/src/components/Docs/Skeleton.tsx

@@ -0,0 +1,12 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+export const DocsSkeleton = ({ className, padding = '12' }: { className?: string; padding?: string }) => {
+  return (
+    <div className={cn('PageSkeleton', className, `sl-p-${padding}`, 'sl-flex sl-flex-col sl-h-full')}>
+      <div className={cn('DocsSkeleton sl-h-12 sl-w-1/5')} />
+      <div className={cn('DocsSkeleton sl-h-12 sl-my-6')} />
+      <div className={cn('DocsSkeleton sl-flex-1 sl-my-6')} />
+    </div>
+  );
+};

package/src/components/Docs/TwoColumnLayout.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex, VStack } from '@stoplight/mosaic';
+import React from 'react';
+
+export interface TwoColumnLayoutProps {
+  header: React.ReactNode;
+  right: React.ReactNode;
+  left: React.ReactNode;
+  className?: string;
+}
+
+export const TwoColumnLayout = React.forwardRef<HTMLDivElement, TwoColumnLayoutProps>(
+  ({ header, right, left, className }, ref) => (
+    <VStack ref={ref} w="full" className={className} spacing={8}>
+      {header}
+      <Flex>
+        <Box data-testid="two-column-left" w={0} flex={1}>
+          {left}
+        </Box>
+
+        {right && (
+          <Box data-testid="two-column-right" ml={16} pos="relative" w="2/5" style={{ maxWidth: 500 }}>
+            {right}
+          </Box>
+        )}
+      </Flex>
+    </VStack>
+  ),
+);

package/src/components/Docs/index.ts

@@ -0,0 +1 @@
+export * from './Docs';

package/src/components/Docs/story-helper.ts

@@ -0,0 +1,46 @@
+import type { ErrorBoundaryProps } from '@stoplight/react-error-boundary';
+import type { Meta, StoryFn } from '@storybook/react';
+import * as React from 'react';
+
+import { ExtensionAddonRenderer } from './Docs';
+import { wrapOptionsContext } from './story-renderer-helper';
+
+type DocsProps = { data: any; renderExtensionAddon?: ExtensionAddonRenderer } & ErrorBoundaryProps;
+
+type storyOptions = DocsProps & { layoutOptions?: object };
+
+interface HelperReturn<P extends DocsProps> {
+  meta: Meta<DocsProps>;
+  createStory(name: string, input: storyOptions): StoryFn<P>;
+  createHoistedStory(input: storyOptions): StoryFn<P>;
+}
+
+export const createStoriesForDocsComponent = (
+  Component: React.ComponentType<DocsProps>,
+  title?: string,
+): HelperReturn<DocsProps> => {
+  const createStory = (name: string, input: storyOptions) => {
+    const story: StoryFn<DocsProps> = (args: any) => {
+      const component = React.createElement(Component, args);
+      return wrapOptionsContext(component);
+    };
+    story.args = input;
+    story.storyName = name;
+    return story;
+  };
+  return {
+    meta: {
+      title: `Internal/Docs/${title || Component.displayName}`,
+      component: Component,
+      argTypes: <HelperReturn<DocsProps>['meta']['argTypes']>{
+        data: {
+          control: { type: 'object' },
+        },
+        FallbackComponent: { table: { disable: true } },
+        recoverableProps: { table: { disable: true } },
+      },
+    },
+    createStory: createStory,
+    createHoistedStory: input => createStory(title ?? Component.displayName ?? Component.name ?? '_unknown_', input),
+  };
+};

package/src/components/Docs/story-renderer-helper.tsx

@@ -0,0 +1,56 @@
+import { isPlainObject } from '@stoplight/json';
+import { isRegularNode } from '@stoplight/json-schema-tree';
+import { MarkdownViewer } from '@stoplight/markdown-viewer';
+import { Box } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { ElementsOptionsProvider } from '../../context/Options';
+import { ExtensionAddonRenderer, ExtensionRowProps } from './Docs';
+
+/**
+ * Renders the known x-enum-Description vendor extension
+ * @returns React.ReactElement
+ */
+// eslint-disable-next-line storybook/prefer-pascal-case
+export const renderExtensionRenderer: ExtensionAddonRenderer = (props: ExtensionRowProps) => {
+  const { nestingLevel, schemaNode, vendorExtensions } = props;
+  const { 'x-enum-descriptions': enumDescriptions = {} } = vendorExtensions;
+
+  // If the nesting level is 0, we are at the root of the schema and should not render anything
+  if (nestingLevel === 0) {
+    return null;
+  }
+
+  // This implementation of the extension renderer only supports the `x-enum-descriptions`-extension
+  if ('x-enum-descriptions' in vendorExtensions && isRegularNode(schemaNode) && isPlainObject(enumDescriptions)) {
+    let value = `| Enum value | Description |\n|---|---|\n`;
+
+    for (const enumValue of schemaNode.enum ?? []) {
+      const description = enumDescriptions[String(enumValue)];
+      value += `| ${enumValue} | ${description} |\n`;
+    }
+
+    return (
+      <Box mb={2}>
+        <Box
+          mt={2}
+          as={MarkdownViewer}
+          markdown={value}
+          style={{
+            fontSize: 12,
+          }}
+        />
+      </Box>
+    );
+  }
+
+  return null;
+};
+
+/**
+ * @private
+ * Helper function to wrap the options context for the Docs subcomponents
+ */
+export const wrapOptionsContext = (story: any) => {
+  return <ElementsOptionsProvider renderExtensionAddon={renderExtensionRenderer}>{story}</ElementsOptionsProvider>;
+};

package/src/components/Layout/MobileTopNav.tsx

@@ -0,0 +1,78 @@
+import { faBars, faX } from '@fortawesome/free-solid-svg-icons';
+import { Box, Button, Drawer, Flex, Icon } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { LogoProps } from '../../types';
+import type { TableOfContentsItem } from '../TableOfContents';
+import { Sidebar } from './ResponsiveSidebarLayout';
+
+export const MobileTopNav = ({
+  name,
+  logo,
+  tree,
+  pathname,
+  onTocClick,
+}: {
+  name: string;
+  logo?: string | LogoProps;
+  tree: TableOfContentsItem[];
+  pathname: string;
+  onTocClick(): void;
+}): JSX.Element => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState<boolean>(false);
+
+  const handleTocClick = () => {
+    onTocClick();
+    setIsSidebarOpen(false);
+  };
+  return (
+    <Flex className="TopNav--mosaic" alignItems="center" h="3xl" pl={4} pr={4} bg="canvas" borderB pos="fixed" w="full">
+      <Flex data-test="mobile-top-nav" w="full" alignItems="center" justifyContent="between">
+        <Button data-test="show-left-sidebar-btn" onPress={() => setIsSidebarOpen(true)} appearance="minimal">
+          <Icon size="lg" icon={faBars} />
+        </Button>
+        <NavHeading heading={name} />
+      </Flex>
+
+      <Drawer isOpen={isSidebarOpen} position="left" onClose={() => setIsSidebarOpen(false)} w="5/6">
+        <Flex justifyContent="end">
+          <Button
+            className="sl-mr-4 sl-mt-2"
+            onPress={() => setIsSidebarOpen(false)}
+            appearance="minimal"
+            justifySelf="end"
+          >
+            <Icon size="lg" icon={faX} />
+          </Button>
+        </Flex>
+        <Box tabIndex={-1}>
+          <Sidebar
+            name={name}
+            logo={logo}
+            tree={tree}
+            pathname={pathname}
+            onTocClick={handleTocClick}
+            isInResponsiveMode={true}
+          />
+        </Box>
+      </Drawer>
+    </Flex>
+  );
+};
+
+const NavHeading = ({ heading }: { heading?: string }): JSX.Element => (
+  <Flex flex={1} data-test="mobile-project-top-nav" style={{ minWidth: 0 }}>
+    <Box
+      fontSize="xl"
+      fontWeight="semibold"
+      whitespace="nowrap"
+      textOverflow="overflow-ellipsis"
+      overflowX="hidden"
+      overflowY="hidden"
+      w="full"
+      textAlign="center"
+    >
+      {heading}
+    </Box>
+  </Flex>
+);

package/src/components/Layout/ResponsiveSidebarLayout.tsx

@@ -0,0 +1,175 @@
+import { Box, Flex, Heading } from '@stoplight/mosaic';
+import * as React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
+import { LogoProps } from '../../types';
+import { Logo } from '../Logo';
+import { PoweredByLink } from '../PoweredByLink';
+import type { CustomLinkComponent, TableOfContentsItem } from '../TableOfContents';
+import { TableOfContents } from '../TableOfContents';
+import { MobileTopNav } from './MobileTopNav';
+
+type ResponsiveSidebarLayoutProps = {
+  maxContentWidth?: number;
+  sidebarWidth?: number;
+  children?: React.ReactNode;
+  name: string;
+  logo?: string | LogoProps;
+  tree?: TableOfContentsItem[];
+  onTocClick?(): void;
+};
+
+const MAX_CONTENT_WIDTH = 1800;
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+
+export const ResponsiveSidebarLayout = React.forwardRef<HTMLDivElement, ResponsiveSidebarLayoutProps>(
+  (
+    { children, name, logo, tree, onTocClick, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH },
+    ref,
+  ) => {
+    const scrollRef = React.useRef<HTMLDivElement | null>(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
+    const { pathname } = useLocation();
+
+    React.useEffect(() => {
+      // Scroll to top on page change
+      scrollRef.current?.scrollTo(0, 0);
+    }, [pathname]);
+
+    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
+
+    return (
+      <Flex ref={ref} className="sl-elements-api" pin h="full">
+        {!isResponsiveLayoutEnabled && (
+          <Flex
+            ref={sidebarRef}
+            onMouseDown={(e: React.MouseEvent<HTMLElement>) => e.preventDefault()}
+            style={{ maxWidth: `${SIDEBAR_MAX_WIDTH}px` }}
+          >
+            <Flex
+              direction="col"
+              bg="canvas-100"
+              borderR
+              pt={8}
+              pos="sticky"
+              pinY
+              overflowY="auto"
+              style={{
+                paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
+                width: `${currentSidebarWidth}px`,
+                minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+              }}
+            >
+              <Sidebar
+                name={name}
+                logo={logo}
+                tree={tree!}
+                pathname={pathname}
+                onTocClick={onTocClick}
+                isInResponsiveMode={false}
+              />
+            </Flex>
+            <Flex
+              justifySelf="end"
+              flexGrow={0}
+              flexShrink={0}
+              resize="x"
+              onMouseDown={startResizing}
+              style={{ width: '1em', flexBasis: '6px', cursor: 'ew-resize' }}
+            />
+          </Flex>
+        )}
+
+        <Box ref={scrollRef} bg="canvas" px={!isResponsiveLayoutEnabled ? 24 : 6} flex={1} w="full" overflowY="auto">
+          <Box style={{ maxWidth: `${maxContentWidth - currentSidebarWidth}px` }} py={16}>
+            {children}
+          </Box>
+        </Box>
+
+        {isResponsiveLayoutEnabled && (
+          <MobileTopNav onTocClick={onTocClick!} name={name} logo={logo} tree={tree!} pathname={pathname} />
+        )}
+      </Flex>
+    );
+  },
+);
+
+type SidebarRef = React.Ref<HTMLDivElement>;
+type SidebarWidth = number;
+type StartResizingFn = () => void;
+
+export const Sidebar = ({
+  name,
+  logo,
+  tree,
+  pathname,
+  onTocClick,
+  isInResponsiveMode,
+}: {
+  name: string;
+  logo?: string | LogoProps;
+  tree: TableOfContentsItem[];
+  pathname: string;
+  onTocClick?(): void;
+  isInResponsiveMode: boolean;
+}) => {
+  return (
+    <>
+      <Flex ml={4} mb={5} alignItems="center">
+        {typeof logo === 'string' ? (
+          <Logo logo={{ url: logo, altText: 'logo' }} />
+        ) : (
+          typeof logo === 'object' && <Logo logo={logo} />
+        )}
+        <Heading size={4}>{name}</Heading>
+      </Flex>
+      <Flex flexGrow flexShrink overflowY="auto" direction="col">
+        <TableOfContents
+          tree={tree}
+          activeId={pathname}
+          Link={Link as CustomLinkComponent}
+          onLinkClick={onTocClick}
+          isInResponsiveMode={isInResponsiveMode}
+        />
+      </Flex>
+      <PoweredByLink source={name} pathname={pathname} packageType="elements" />
+    </>
+  );
+};
+
+function useResizer(sidebarWidth: number): [SidebarRef, SidebarWidth, StartResizingFn] {
+  const sidebarRef = React.useRef<HTMLDivElement | null>(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+
+  const startResizing = React.useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = React.useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = React.useCallback(
+    mouseMoveEvent => {
+      if (isResizing) {
+        const value = mouseMoveEvent.clientX - sidebarRef.current!.getBoundingClientRect().left;
+        setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+      }
+    },
+    [isResizing],
+  );
+
+  React.useEffect(() => {
+    window?.addEventListener('mousemove', resize);
+    window?.addEventListener('mouseup', stopResizing, { passive: true });
+    return () => {
+      window?.removeEventListener('mousemove', resize);
+      window?.removeEventListener('mouseup', stopResizing);
+    };
+  }, [resize, stopResizing]);
+
+  return [sidebarRef, currentSidebarWidth, startResizing];
+}

package/src/components/Layout/SidebarLayout.tsx

@@ -0,0 +1,107 @@
+import { Box, Flex } from '@stoplight/mosaic';
+import * as React from 'react';
+import { useLocation } from 'react-router-dom';
+
+type SidebarLayoutProps = {
+  sidebar: React.ReactNode;
+  maxContentWidth?: number;
+  sidebarWidth?: number;
+  children?: React.ReactNode;
+};
+
+const MAX_CONTENT_WIDTH = 1800;
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+
+export const SidebarLayout = React.forwardRef<HTMLDivElement, SidebarLayoutProps>(
+  ({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
+    const scrollRef = React.useRef<HTMLDivElement | null>(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
+    const { pathname } = useLocation();
+
+    React.useEffect(() => {
+      // Scroll to top on page change
+      scrollRef.current?.scrollTo(0, 0);
+    }, [pathname]);
+
+    return (
+      <Flex ref={ref} className="sl-elements-api" pin h="full">
+        <Flex
+          ref={sidebarRef}
+          onMouseDown={(e: React.MouseEvent<HTMLElement>) => e.preventDefault()}
+          style={{ maxWidth: `${SIDEBAR_MAX_WIDTH}px` }}
+        >
+          <Flex
+            direction="col"
+            bg="canvas-100"
+            borderR
+            pt={8}
+            pos="sticky"
+            pinY
+            overflowY="auto"
+            style={{
+              paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
+              width: `${currentSidebarWidth}px`,
+              minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+            }}
+          >
+            {sidebar}
+          </Flex>
+          <Flex
+            justifySelf="end"
+            flexGrow={0}
+            flexShrink={0}
+            resize="x"
+            onMouseDown={startResizing}
+            style={{ width: '1em', flexBasis: '6px', cursor: 'ew-resize' }}
+          />
+        </Flex>
+
+        <Box ref={scrollRef} bg="canvas" px={24} flex={1} w="full" overflowY="auto">
+          <Box style={{ maxWidth: `${maxContentWidth - currentSidebarWidth}px` }} py={16}>
+            {children}
+          </Box>
+        </Box>
+      </Flex>
+    );
+  },
+);
+
+type SidebarRef = React.Ref<HTMLDivElement>;
+type SidebarWidth = number;
+type StartResizingFn = () => void;
+
+function useResizer(sidebarWidth: number): [SidebarRef, SidebarWidth, StartResizingFn] {
+  const sidebarRef = React.useRef<HTMLDivElement | null>(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+
+  const startResizing = React.useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = React.useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = React.useCallback(
+    mouseMoveEvent => {
+      if (isResizing) {
+        const value = mouseMoveEvent.clientX - sidebarRef.current!.getBoundingClientRect().left;
+        setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+      }
+    },
+    [isResizing],
+  );
+
+  React.useEffect(() => {
+    window.addEventListener('mousemove', resize);
+    window.addEventListener('mouseup', stopResizing, { passive: true });
+    return () => {
+      window.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [resize, stopResizing]);
+
+  return [sidebarRef, currentSidebarWidth, startResizing];
+}

package/src/components/LinkHeading.tsx

@@ -0,0 +1,21 @@
+import { LinkHeading as MosaicLinkHeading, LinkHeadingProps } from '@stoplight/mosaic';
+import * as React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { RouterTypeContext, useRouterType } from '../context/RouterType';
+
+export const LinkHeading = React.memo<LinkHeadingProps>(function LinkHeading(props) {
+  const isUsingRouter = !!useRouterType();
+  const Comp = isUsingRouter ? CustomLinkHeading : MosaicLinkHeading;
+
+  return <Comp {...props} />;
+});
+
+const CustomLinkHeading = React.memo<LinkHeadingProps>(function LinkHeading({ id: _id, ...props }) {
+  const { pathname } = useLocation();
+  const routerKind = React.useContext(RouterTypeContext);
+  const route = pathname.split('#')[0];
+  const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
+
+  return <MosaicLinkHeading id={id} {...props} />;
+});

package/src/components/LoadMore.tsx

@@ -0,0 +1,20 @@
+import { Button, Flex, Text } from '@stoplight/mosaic';
+import * as React from 'react';
+
+interface LoadMoreProps {
+  loading: boolean;
+  onClick: () => void;
+}
+
+export const LoadMore: React.FC<LoadMoreProps> = ({ loading, onClick }) => {
+  return (
+    <Flex flexDirection="col" justifyContent="center" alignItems="center" style={{ height: '400px' }}>
+      <Button aria-label="load-example" onPress={onClick} appearance="minimal" loading={loading} disabled={loading}>
+        {loading ? 'Loading...' : 'Load examples'}
+      </Button>
+      <Text fontSize="base" textAlign="center">
+        Large examples are not rendered by default.
+      </Text>
+    </Flex>
+  );
+};

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,9 @@
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import { Flex, Icon } from '@stoplight/mosaic';
+import React from 'react';
+
+export const Loading = () => (
+  <Flex justify="center" alignItems="center" w="full" minH="screen" color="muted">
+    <Icon icon={faCircleNotch} size="3x" spin />
+  </Flex>
+);

package/src/components/Logo.tsx

@@ -0,0 +1,25 @@
+import { Box } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { LogoProps } from '../types';
+
+export const Logo: React.FC<{ logo: LogoProps }> = ({ logo }) => {
+  return (
+    <Box
+      display="inline"
+      mr={3}
+      rounded="lg"
+      overflowY="hidden"
+      overflowX="hidden"
+      style={{ backgroundColor: logo.backgroundColor ?? 'transparent' }}
+    >
+      {logo.href ? (
+        <a href={logo.href} target="_blank" rel="noopener noreferrer">
+          <img src={logo.url} height="30px" width="30px" alt={logo.altText} />
+        </a>
+      ) : (
+        <img src={logo.url} height="30px" width="30px" alt={logo.altText} />
+      )}
+    </Box>
+  );
+};