feat: new JSV design

src/components/SchemaRow.tsx

@@ -2,7 +2,6 @@ import { isReferenceNode, isRegularNode, ReferenceNode, SchemaNode, SchemaNodeKi
 import { IRowRendererOptions, isParentNode, Tree } from '@stoplight/tree-list';
 import { Optional } from '@stoplight/types';
 import { Box, Flex, Icon } from '@stoplight/mosaic'
-import cn from 'classnames';
 import * as React from 'react';
 
 import { CARET_ICON_BOX_DIMENSION, CARET_ICON_SIZE, SCHEMA_ROW_OFFSET } from '../consts';

src/components/__tests__/SchemaRow.spec.tsx

@@ -1,42 +1,16 @@
 import 'jest-enzyme';
 
 import { TreeState } from '@stoplight/tree-list';
-import { Popover, Tooltip } from '@stoplight/ui-kit';
-import { mount, shallow } from 'enzyme';
+import { Icon } from '@stoplight/mosaic';
+import { mount } from 'enzyme';
 import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
 import { SchemaTreeListTree } from '../../tree';
-import { SchemaPropertyRow, SchemaRow } from '../SchemaRow';
-import { Validations } from '../shared/Validations';
+import { SchemaRow } from '../SchemaRow';
+import { Properties } from '../shared/Properties';
 
 describe('SchemaRow component', () => {
-  it('should render falsy validations', () => {
-    const tree = new SchemaTreeListTree(
-      {
-        enum: [null, 0, false, ''],
-      },
-      new TreeState(),
-      {
-        expandedDepth: Infinity,
-        mergeAllOf: false,
-        resolveRef: void 0,
-      },
-    );
-
-    tree.populate();
-
-    const wrapper = shallow(
-      mount(<SchemaRow treeListNode={tree.itemAt(0)!} rowOptions={{}} />)
-        .find(SchemaPropertyRow)
-        .find(Validations)
-        .find(Popover)
-        .prop('content') as React.ReactElement,
-    );
-
-    expect(wrapper).toHaveText('enum:null,0,false,');
-  });
-
   describe('resolving error', () => {
     let tree: SchemaTreeListTree;
     let schema: JSONSchema4;
@@ -62,7 +36,7 @@ describe('SchemaRow component', () => {
 
     it('given no custom resolver, should render a generic error message', () => {
       const wrapper = mount(<SchemaRow treeListNode={tree.itemAt(1)!} rowOptions={{}} />);
-      expect(wrapper.find(Tooltip)).toHaveProp('content', `Could not resolve '#/properties/foo'`);
+      expect(wrapper.find(Icon)).toHaveProp('title', `Could not resolve '#/properties/foo'`);
       wrapper.unmount();
     });
 
@@ -80,7 +54,7 @@ describe('SchemaRow component', () => {
       tree.populate();
 
       const wrapper = mount(<SchemaRow treeListNode={tree.itemAt(1)!} rowOptions={{}} />);
-      expect(wrapper.find(Tooltip)).toHaveProp('content', message);
+      expect(wrapper.find(Icon)).toHaveProp('title', message);
       wrapper.unmount();
     });
   });
@@ -98,7 +72,7 @@ describe('SchemaRow component', () => {
       tree.populate();
 
       const wrapper = mount(<SchemaRow treeListNode={tree.itemAt(pos)!} rowOptions={{}} />);
-      expect(wrapper.find(Validations)).toHaveProp('required', value);
+      expect(wrapper.find(Properties)).toHaveProp('required', value);
       wrapper.unmount();
     }
 

src/components/shared/Caret.tsx

@@ -19,7 +19,7 @@ export const Caret: React.FunctionComponent<ICaret> = ({ style, size, isExpanded
     color="muted"
   >
     <Icon
-      iconSize={size}
+      size={size}
       icon={isExpanded ? faChevronDown : faChevronRight}
     />
   </Flex>

src/components/shared/Types.tsx

@@ -6,7 +6,6 @@ import {
   SchemaNodeKind,
 } from '@stoplight/json-schema-tree';
 import { Box, Text } from '@stoplight/mosaic';
-import cn from 'classnames';
 import * as React from 'react';
 
 import { PROPERTY_TYPE_COLORS } from '../../consts';

src/components/shared/Validations.tsx

@@ -1,5 +1,5 @@
 import { Dictionary, Primitive } from '@stoplight/types';
-import { Box, Flex, Text } from '@stoplight/mosaic';
+import { Flex, Text } from '@stoplight/mosaic';
 import { capitalize, keys, omit, pick, pickBy, uniq } from 'lodash';
 import * as React from 'react';
 import { RegularNode } from '@stoplight/json-schema-tree';

src/components/shared/__tests__/Format.spec.tsx

@@ -24,21 +24,21 @@ describe('Format component', () => {
     tree.populate();
   });
 
-  it('should render next to a single type with and inherit its color', () => {
+  it('should render next to a single type', () => {
     const wrapper = mount(<SchemaRow treeListNode={tree.itemAt(3)!} rowOptions={{}} />);
-    expect(wrapper.find(Format)).toHaveHTML('<span class="ml-2 text-red-7 dark:text-red-6">&lt;float&gt;</span>');
+    expect(wrapper.find(Format)).toHaveHTML('<span class="sl-ml-2 sl-text-muted">&lt;float&gt;</span>');
     wrapper.unmount();
   });
 
-  it('should render next to an array of types in default (black) color', () => {
+  it('should render next to an array of types', () => {
     const wrapper = mount(<SchemaRow treeListNode={tree.itemAt(1)!} rowOptions={{}} />);
-    expect(wrapper.find(Format)).toHaveHTML('<span class="ml-2">&lt;date-time&gt;</span>');
+    expect(wrapper.find(Format)).toHaveHTML('<span class="sl-ml-2 sl-text-muted">&lt;date-time&gt;</span>');
     wrapper.unmount();
   });
 
   it('should render even when the type(s) is/are missing', () => {
     const wrapper = mount(<SchemaRow treeListNode={tree.itemAt(4)!} rowOptions={{}} />);
-    expect(wrapper.find(Format)).toHaveHTML('<span class="ml-2">&lt;date-time&gt;</span>');
+    expect(wrapper.find(Format)).toHaveHTML('<span class="sl-ml-2 sl-text-muted">&lt;date-time&gt;</span>');
     wrapper.unmount();
   });
 });

src/components/shared/__tests__/Properties.spec.tsx

@@ -0,0 +1,32 @@
+import 'jest-enzyme';
+
+import { RegularNode } from '@stoplight/json-schema-tree';
+import { Dictionary } from '@stoplight/types';
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { Properties } from '../Properties';
+
+describe('Properties component', () => {
+  describe('when property is deprecated', () => {
+    let validations: Dictionary<unknown>;
+    let deprecated: boolean;
+
+    beforeEach(() => {
+      ({ validations, deprecated } = new RegularNode({
+        'x-deprecated': true,
+        type: 'string',
+        minLength: 2,
+        default: 'foo',
+      }));
+    });
+
+    it('should render deprecated box', () => {
+      const wrapper = shallow(
+        <Properties deprecated={deprecated} required={false} validations={validations} />,
+      ).childAt(0);
+
+      expect(wrapper).toHaveText('deprecated');
+    });
+  });
+});

src/components/shared/__tests__/Property.spec.tsx

@@ -64,7 +64,7 @@ describe('Property component', () => {
 
     const wrapper = render(schema);
     expect(wrapper.find(Types)).toHaveHTML(
-      '<span class="text-green-6 dark:text-green-4 truncate">array[string]</span>',
+      '<span class="sl-truncate sl-text-muted">array[string]</span>',
     );
   });
 
@@ -75,7 +75,7 @@ describe('Property component', () => {
     };
 
     const wrapper = render(schema);
-    expect(wrapper.find(Types)).toHaveHTML('<span class="text-green-6 dark:text-green-4 truncate">array</span>');
+    expect(wrapper.find(Types)).toHaveHTML('<span class="sl-truncate sl-text-muted">array</span>');
   });
 
   it('should handle nullish $ref', () => {
@@ -84,7 +84,7 @@ describe('Property component', () => {
     };
 
     const wrapper = render(schema);
-    expect(wrapper.find(Types)).toHaveHTML('<span class="text-purple-6 dark:text-purple-4 truncate">$ref</span>');
+    expect(wrapper.find(Types)).toHaveHTML('<span class="sl-truncate">$ref</span>');
   });
 
   describe('properties counter', () => {
@@ -199,7 +199,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema, 0);
       expect(wrapper).toHaveHTML(
-        '<span class="text-green-6 dark:text-green-4 truncate">array[oneOf]</span><div class="ml-2 text-darken-7 dark:text-lighten-7">{2}</div>',
+        '<span class="sl-truncate sl-text-muted">array[oneOf]</span><div class="sl-ml-2 sl-text-muted">{2}</div>',
       );
     });
 
@@ -222,7 +222,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema, 0);
       expect(wrapper).toHaveHTML(
-        '<span class="text-green-6 dark:text-green-4 truncate">array[object]</span><div class="ml-2 text-darken-7 dark:text-lighten-7">{3}</div>',
+        '<span class="sl-truncate sl-text-muted">array[object]</span><div class="sl-ml-2 sl-text-muted">{3}</div>',
       );
     });
 
@@ -257,12 +257,12 @@ describe('Property component', () => {
 
       let wrapper = render(schema, 3);
       expect(wrapper).toHaveHTML(
-        '<div class="mr-2">foo</div><span class="text-green-7 dark:text-green-5 truncate">string</span>',
+        '<div class="sl-font-mono sl-font-bold sl-mr-2">foo</div><span class="sl-truncate sl-text-muted">string</span>',
       );
 
       wrapper = render(schema, 5);
       expect(wrapper).toHaveHTML(
-        '<div class="mr-2">bar</div><span class="text-green-7 dark:text-green-5 truncate">string</span>',
+        '<div class="sl-font-mono sl-font-bold sl-mr-2">bar</div><span class="sl-truncate sl-text-muted">string</span>',
       );
     });
 
@@ -297,7 +297,7 @@ describe('Property component', () => {
           </SchemaNodeContext.Provider>
         </SchemaTreeContext.Provider>,
       );
-      expect(wrapper.find('div')).toHaveHTML('<div class="mr-2">foo</div>');
+      expect(wrapper.find('div')).toHaveHTML('<div class="sl-font-mono sl-font-bold sl-mr-2">foo</div>');
       wrapper.unmount();
     });
   });
@@ -315,7 +315,7 @@ describe('Property component', () => {
       };
 
       const wrapper = render(schema);
-      expect(wrapper.find(Types)).toHaveHTML('<span class="text-blue-6 dark:text-blue-4 truncate">User</span>');
+      expect(wrapper.find(Types)).toHaveHTML('<span class="sl-truncate sl-text-muted">User</span>');
     });
 
     it('given array type with non-array items, should render title', () => {
@@ -333,7 +333,7 @@ describe('Property component', () => {
       };
 
       const wrapper = render(schema);
-      expect(wrapper.find(Types)).toHaveHTML('<span class="text-green-6 dark:text-green-4 truncate">User[]</span>');
+      expect(wrapper.find(Types)).toHaveHTML('<span class="sl-truncate sl-text-muted">User[]</span>');
     });
 
     it('given array with no items, should render title', () => {
@@ -343,7 +343,7 @@ describe('Property component', () => {
       };
 
       const wrapper = render(schema);
-      expect(wrapper.find(Types)).toHaveHTML('<span class="text-green-6 dark:text-green-4 truncate">User</span>');
+      expect(wrapper.find(Types)).toHaveHTML('<span class="sl-truncate sl-text-muted">User</span>');
     });
 
     it('given array with defined items, should not render title', () => {
@@ -362,7 +362,7 @@ describe('Property component', () => {
       };
 
       const wrapper = render(schema);
-      expect(wrapper.find(Types)).toHaveHTML('<span class="text-green-6 dark:text-green-4 truncate">array</span>');
+      expect(wrapper.find(Types)).toHaveHTML('<span class="sl-truncate sl-text-muted">array</span>');
     });
   });