@stoplight/elements-core 9.0.12-beta-0.1 → 9.0.13

package/src/components/TableOfContents/TableOfContents.spec.tsx

@@ -1,301 +0,0 @@
-import { screen } from '@testing-library/dom';
-import { render } from '@testing-library/react';
-import * as React from 'react';
-
-import { withMosaicProvider } from '../../hoc/withMosaicProvider';
-import { TableOfContents as TOC } from './TableOfContents';
-import { TableOfContentsItem } from './types';
-import { findFirstNode } from './utils';
-
-const TableOfContents = withMosaicProvider(TOC);
-
-const Link: React.FC = ({ children }) => <>{children}</>;
-
-describe('TableOfContents', () => {
-  describe('Group', () => {
-    it('should only render group contents when open', () => {
-      const { unmount } = render(
-        <TableOfContents
-          activeId=""
-          tree={[
-            {
-              title: 'Root',
-              items: [
-                {
-                  id: 'targetId',
-                  title: 'Target',
-                  slug: 'target',
-                  type: 'article',
-                  meta: '',
-                },
-              ],
-            },
-          ]}
-          Link={Link}
-        />,
-      );
-
-      expect(screen.queryByTitle('Root')).toBeInTheDocument();
-      expect(screen.queryByTitle('Target')).not.toBeInTheDocument();
-
-      unmount();
-    });
-
-    it('it renders group contents if maxDepthOpenByDefault > 0', () => {
-      const { unmount } = render(
-        <TableOfContents
-          activeId=""
-          tree={[
-            {
-              title: 'Root',
-              items: [
-                {
-                  id: 'targetId',
-                  title: 'Target',
-                  slug: 'target',
-                  type: 'article',
-                  meta: '',
-                },
-              ],
-            },
-          ]}
-          Link={Link}
-          maxDepthOpenByDefault={1}
-        />,
-      );
-
-      expect(screen.queryByTitle('Root')).toBeInTheDocument();
-      expect(screen.queryByTitle('Target')).toBeInTheDocument();
-
-      unmount();
-    });
-
-    it('should default open when nested child is active', () => {
-      const { unmount } = render(
-        <TableOfContents
-          activeId="targetId"
-          tree={[
-            {
-              title: 'Root',
-              items: [
-                {
-                  title: 'Group',
-                  items: [
-                    {
-                      id: 'targetId',
-                      title: 'Target',
-                      slug: 'target',
-                      type: 'article',
-                      meta: '',
-                    },
-                  ],
-                },
-              ],
-            },
-          ]}
-          Link={Link}
-        />,
-      );
-
-      expect(screen.queryByTitle(/Root/)).toBeInTheDocument();
-      expect(screen.queryByTitle(/Group/)).toBeInTheDocument();
-      expect(screen.queryByTitle(/Target/)).toBeInTheDocument();
-
-      unmount();
-    });
-
-    it('should close an opened group on click, with active highlighting', () => {
-      const { unmount } = render(
-        <TableOfContents
-          maxDepthOpenByDefault={1}
-          activeId="targetId"
-          tree={[
-            {
-              title: 'Root',
-              items: [
-                {
-                  id: 'targetId',
-                  title: 'Target',
-                  slug: 'target',
-                  type: 'article',
-                  meta: '',
-                },
-              ],
-            },
-          ]}
-          Link={Link}
-        />,
-      );
-
-      const Root = screen.queryByTitle(/Root/);
-
-      expect(Root).toBeInTheDocument();
-      expect(Root).toHaveClass('sl-bg-canvas-100');
-      expect(screen.queryByTitle('Target')).toBeInTheDocument();
-
-      Root?.click();
-      expect(Root).toHaveClass('sl-bg-primary-tint');
-      expect(screen.queryByTitle('Target')).not.toBeInTheDocument();
-
-      unmount();
-    });
-
-    it('should open a closed group on click', () => {
-      const { unmount } = render(
-        <TableOfContents
-          activeId=""
-          tree={[
-            {
-              title: 'Root',
-              items: [
-                {
-                  id: 'targetId',
-                  title: 'Target',
-                  slug: 'target',
-                  type: 'article',
-                  meta: '',
-                },
-              ],
-            },
-          ]}
-          Link={Link}
-        />,
-      );
-
-      const Root = screen.queryByTitle(/Root/);
-
-      expect(Root).toBeInTheDocument();
-      expect(screen.queryByTitle(/Target/)).not.toBeInTheDocument();
-
-      Root?.click();
-
-      expect(screen.queryByTitle(/Target/)).toBeInTheDocument();
-
-      unmount();
-    });
-
-    it('should display item version', () => {
-      const { unmount } = render(
-        <TableOfContents
-          activeId=""
-          maxDepthOpenByDefault={1}
-          tree={[
-            {
-              title: 'Root',
-              items: [
-                {
-                  id: 'abc',
-                  title: 'Todo Api',
-                  slug: 'abc-todo-api',
-                  type: 'http_service',
-                  items: [],
-                  meta: '',
-                  version: '2',
-                },
-                {
-                  id: 'def',
-                  title: 'Todo',
-                  slug: 'def-todo',
-                  type: 'model',
-                  meta: '',
-                  version: '1.0.1',
-                },
-                {
-                  id: 'ghi',
-                  title: 'Get Todo',
-                  slug: 'ghi-get-todo',
-                  type: 'http_operation',
-                  meta: 'get',
-                  version: '1.0.2',
-                },
-              ],
-            },
-          ]}
-          Link={Link}
-        />,
-      );
-
-      expect(screen.queryByText(/v2/)).toBeInTheDocument();
-      expect(screen.queryByText(/v1.0.1/)).toBeInTheDocument();
-
-      expect(screen.queryByText(/v1.0.2/)).not.toBeInTheDocument();
-
-      unmount();
-    });
-  });
-});
-
-describe('utils', () => {
-  describe('findFirstNode', () => {
-    it('should find the first node', () => {
-      const items: TableOfContentsItem[] = [
-        {
-          title: 'group',
-          items: [
-            {
-              id: 'abc',
-              title: 'Doc',
-              type: 'article',
-              slug: 'abc-doc',
-              meta: '',
-            },
-            {
-              id: 'targetId',
-              title: 'Target',
-              slug: 'target',
-              type: 'article',
-              meta: '',
-            },
-          ],
-        },
-      ];
-
-      const firstNode = findFirstNode(items);
-
-      expect(firstNode).toEqual({
-        id: 'abc',
-        title: 'Doc',
-        type: 'article',
-        slug: 'abc-doc',
-        meta: '',
-      });
-    });
-
-    it('should ignore group node if slug is empty', () => {
-      const items: TableOfContentsItem[] = [
-        {
-          id: 'abc',
-          title: 'Todo API',
-          type: 'http_service',
-          meta: '',
-          slug: '',
-          items: [
-            {
-              id: 'def',
-              title: 'Get Todo',
-              slug: 'def-get-todo',
-              type: 'http_operation',
-              meta: 'get',
-            },
-            {
-              id: 'ghi',
-              title: 'Add Todo',
-              slug: 'ghi-add-todo',
-              type: 'http_operation',
-              meta: 'post',
-            },
-          ],
-        },
-      ];
-
-      const firstNode = findFirstNode(items);
-      expect(firstNode).toEqual({
-        id: 'def',
-        title: 'Get Todo',
-        slug: 'def-get-todo',
-        type: 'http_operation',
-        meta: 'get',
-      });
-    });
-  });
-});

package/src/components/TableOfContents/TableOfContents.stories.tsx

@@ -1,121 +0,0 @@
-import { Flex } from '@stoplight/mosaic';
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { TableOfContents } from './TableOfContents';
-import { TableOfContentsProps } from './types';
-
-export default {
-  title: 'Internal/TableOfContents',
-  component: TableOfContents,
-  argTypes: {
-    tree: { table: { category: 'Input' } },
-  },
-};
-
-export const Playground: Story<TableOfContentsProps> = args => (
-  <Flex justifyContent="center" style={{ width: '300px' }}>
-    <TableOfContents {...args} />
-  </Flex>
-);
-Playground.storyName = 'Todo API';
-Playground.args = {
-  tree: [
-    {
-      id: '/',
-      slug: '/',
-      title: 'Overview',
-      type: 'overview',
-      meta: '',
-    },
-    {
-      title: 'Endpoints',
-    },
-    {
-      id: '/operations/get-todos',
-      slug: '/operations/get-todos',
-      title: 'List Todos',
-      type: 'http_operation',
-      meta: 'get',
-    },
-    {
-      id: '/operations/post-todos',
-      slug: '/operations/post-todos',
-      title: 'Create Todo',
-      type: 'http_operation',
-      meta: 'post',
-    },
-    {
-      id: '/operations/get-todos-id',
-      slug: '/operations/get-todos-id',
-      title: 'Get Todo',
-      type: 'http_operation',
-      meta: 'get',
-    },
-    {
-      id: '/operations/put-todos-id',
-      slug: '/operations/put-todos-id',
-      title: 'Replace Todo',
-      type: 'http_operation',
-      meta: 'put',
-    },
-    {
-      id: '/operations/delete-todos-id',
-      slug: '/operations/delete-todos-id',
-      title: 'Delete Todo',
-      type: 'http_operation',
-      meta: 'delete',
-    },
-    {
-      id: '/operations/patch-todos-id',
-      slug: '/operations/patch-todos-id',
-      title: 'Update Todo',
-      type: 'http_operation',
-      meta: 'patch',
-    },
-    {
-      title: 'Users',
-      items: [
-        {
-          id: '/operations/get-users',
-          slug: '/operations/get-users',
-          title: 'Get User',
-          type: 'http_operation',
-          meta: 'get',
-        },
-        {
-          id: '/operations/delete-users-userID',
-          slug: '/operations/delete-users-userID',
-          title: 'Delete User',
-          type: 'http_operation',
-          meta: 'delete',
-        },
-        {
-          id: '/operations/post-users-userID',
-          slug: '/operations/post-users-userID',
-          title: 'Create User',
-          type: 'http_operation',
-          meta: 'post',
-        },
-      ],
-    },
-    {
-      title: 'Schemas',
-    },
-    {
-      id: '/schemas/Todos',
-      slug: '/schemas/Todos',
-      title: 'Todo',
-      type: 'model',
-      meta: '',
-      version: '1.0.2',
-    },
-    {
-      id: '/schemas/User',
-      slug: '/schemas/User',
-      title: 'User',
-      type: 'model',
-      meta: '',
-    },
-  ],
-};