refactor: move Format component out of Validations

src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1564,7 +1564,7 @@ exports[`HTML Output should match combiner-schema.json 1`] = `
             <span class=\\"text-darken-7 dark:text-lighten-6\\">or</span>
             <span class=\\"text-orange-5\\">null</span>
           </div>
-          <div>&lt;date-time&gt;</div>
+          <span>&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>
@@ -1576,7 +1576,7 @@ exports[`HTML Output should match combiner-schema.json 1`] = `
         <div>
           <div>created_at</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>
@@ -1588,7 +1588,7 @@ exports[`HTML Output should match combiner-schema.json 1`] = `
         <div>
           <div>updated_at</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>
@@ -1927,7 +1927,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
         <div>
           <div>completed_at</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
         </div>
         <span class=\\"text-darken-7 dark:text-lighten-6\\">write-only</span>
         <div><span class=\\"text-orange-7 dark:text-orange-6\\">required</span></div>
@@ -1963,7 +1963,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
         <div>
           <div>email</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</span>
         </div>
         <span class=\\"text-orange-7 dark:text-orange-6\\">deprecated</span>
         <span class=\\"bp3-popover-wrapper\\">
@@ -2149,7 +2149,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
             <span class=\\"text-darken-7 dark:text-lighten-6\\">or</span>
             <span class=\\"text-green-6 dark:text-green-4\\">array</span>
           </div>
-          <div>&lt;date-time&gt;</div>
+          <span>&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2172,7 +2172,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
         <div>
           <div>id</div>
           <span class=\\"text-red-7 dark:text-red-6\\">number</span>
-          <div class=\\"text-red-7 dark:text-red-6\\">&lt;float&gt;</div>
+          <span class=\\"text-red-7 dark:text-red-6\\">&lt;float&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2200,7 +2200,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
             <span class=\\"text-blue-6 dark:text-blue-4\\">object</span>
           </div>
           <div class=\\"text-darken-7 dark:text-lighten-7\\">{1}</div>
-          <div>&lt;password&gt;</div>
+          <span>&lt;password&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2518,7 +2518,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
         <div>
           <div>orderItemId</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;uuid&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;uuid&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2653,7 +2653,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
         <div>
           <div>ccEmail</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2756,7 +2756,7 @@ exports[`HTML Output should match todo-allof.schema.json 1`] = `
             <span class=\\"text-darken-7 dark:text-lighten-6\\">or</span>
             <span class=\\"text-orange-5\\">null</span>
           </div>
-          <div>&lt;date-time&gt;</div>
+          <span>&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2768,7 +2768,7 @@ exports[`HTML Output should match todo-allof.schema.json 1`] = `
         <div>
           <div>created_at</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>
@@ -2780,7 +2780,7 @@ exports[`HTML Output should match todo-allof.schema.json 1`] = `
         <div>
           <div>updated_at</div>
           <span class=\\"text-green-7 dark:text-green-5\\">string</span>
-          <div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
+          <span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
         </div>
         <div></div>
       </div>

src/components/__tests__/Format.spec.tsx

@@ -0,0 +1,56 @@
+import 'jest-enzyme';
+
+import { TreeState } from '@stoplight/tree-list';
+import { shallow } from 'enzyme';
+import { JSONSchema4 } from 'json-schema';
+import * as React from 'react';
+
+import { SchemaTree } from '../../tree';
+import { SchemaPropertyRow, SchemaRow } from '../SchemaRow';
+import { Format } from '../shared/Format';
+
+describe('Format component', () => {
+  let tree: SchemaTree;
+
+  beforeEach(() => {
+    const schema: JSONSchema4 = require('../../__fixtures__/formats-schema.json');
+
+    tree = new SchemaTree(schema, new TreeState(), {
+      expandedDepth: Infinity,
+      mergeAllOf: false,
+      resolveRef: void 0,
+      shouldResolveEagerly: false,
+      onPopulate: void 0,
+    });
+
+    tree.populate();
+  });
+
+  it('should render next to a single type with and inherit its color', () => {
+    const wrapper = shallow(<SchemaRow node={tree.itemAt(3)!} rowOptions={{}} />)
+      .find(SchemaPropertyRow)
+      .shallow()
+      .find(Format)
+      .shallow();
+
+    expect(wrapper).toHaveProp('className', 'ml-2 text-red-7 dark:text-red-6');
+  });
+
+  it('should render next to an array of types in default (black) color', () => {
+    const wrapper = shallow(<SchemaRow node={tree.itemAt(1)!} rowOptions={{}} />)
+      .find(SchemaPropertyRow)
+      .shallow()
+      .find(Format)
+      .shallow();
+
+    expect(wrapper).toHaveProp('className', 'ml-2');
+  });
+
+  it('should not render when the type(s) is/are missing', () => {
+    const wrapper = shallow(<SchemaRow node={tree.itemAt(4)!} rowOptions={{}} />)
+      .find(SchemaPropertyRow)
+      .shallow();
+
+    expect(wrapper).not.toContain(Format);
+  });
+});

src/components/__tests__/Validations.spec.tsx

@@ -1,16 +1,12 @@
 import 'jest-enzyme';
 
-import { TreeState } from '@stoplight/tree-list';
 import { Dictionary } from '@stoplight/types';
 import { Popover } from '@stoplight/ui-kit';
 import { shallow } from 'enzyme';
-import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
-import { SchemaTree } from '../../tree';
 import { getValidations } from '../../utils/getValidations';
-import { SchemaPropertyRow, SchemaRow } from '../SchemaRow';
-import { Format, Validations } from '../shared/Validations';
+import { Validations } from '../shared/Validations';
 
 describe('Validations component', () => {
   describe('when property is deprecated', () => {
@@ -34,49 +30,3 @@ describe('Validations component', () => {
     });
   });
 });
-
-describe('Format', () => {
-  let tree: SchemaTree;
-
-  beforeEach(() => {
-    const schema: JSONSchema4 = require('../../__fixtures__/formats-schema.json');
-
-    tree = new SchemaTree(schema, new TreeState(), {
-      expandedDepth: Infinity,
-      mergeAllOf: false,
-      resolveRef: void 0,
-      shouldResolveEagerly: false,
-      onPopulate: void 0,
-    });
-
-    tree.populate();
-  });
-
-  it('should render next to a single type with and inherit its color', () => {
-    const wrapper = shallow(<SchemaRow node={tree.itemAt(3)!} rowOptions={{}} />)
-      .find(SchemaPropertyRow)
-      .shallow()
-      .find(Format)
-      .shallow();
-
-    expect(wrapper).toHaveProp('className', 'ml-2 text-red-7 dark:text-red-6');
-  });
-
-  it('should render next to an array of types in default (black) color', () => {
-    const wrapper = shallow(<SchemaRow node={tree.itemAt(1)!} rowOptions={{}} />)
-      .find(SchemaPropertyRow)
-      .shallow()
-      .find(Format)
-      .shallow();
-
-    expect(wrapper).toHaveProp('className', 'ml-2');
-  });
-
-  it('should not render when the type(s) is/are missing', () => {
-    const wrapper = shallow(<SchemaRow node={tree.itemAt(4)!} rowOptions={{}} />)
-      .find(SchemaPropertyRow)
-      .shallow();
-
-    expect(wrapper).not.toContain(Format);
-  });
-});

src/components/shared/Format.tsx

@@ -0,0 +1,16 @@
+import { JSONSchema4 } from 'json-schema';
+import * as React from 'react';
+
+import { PropertyTypeColors } from './Types';
+
+export const Format: React.FunctionComponent<{ schema: JSONSchema4 }> = ({ schema }) => {
+  return (
+    <span
+      {...(typeof schema.type === 'string' && schema.type in PropertyTypeColors
+        ? { className: `ml-2 ${PropertyTypeColors[schema.type as string]}` }
+        : { className: 'ml-2' })}
+    >
+      {`<${schema.format}>`}
+    </span>
+  );
+};

src/components/shared/Validations.tsx

@@ -1,11 +1,9 @@
 import { safeStringify } from '@stoplight/json';
 import { Dictionary } from '@stoplight/types';
 import { Popover } from '@stoplight/ui-kit';
-import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
 import { ViewModeContext } from '../JsonSchemaViewer';
-import { PropertyTypeColors } from './Types';
 
 export interface IValidations {
   required: boolean;
@@ -93,15 +91,3 @@ export const Validations: React.FunctionComponent<IValidations> = ({
     </>
   );
 };
-
-export const Format: React.FunctionComponent<{ schema: JSONSchema4 }> = ({ schema }) => {
-  return (
-    <div
-      {...(typeof schema.type === 'string' && schema.type in PropertyTypeColors
-        ? { className: `ml-2 ${PropertyTypeColors[schema.type as string]}` }
-        : { className: 'ml-2' })}
-    >
-      {`<${schema.format}>`}
-    </div>
-  );
-};

src/components/shared/index.ts

@@ -1,6 +1,7 @@
 export * from './Caret';
 export * from './Description';
 export * from './Divider';
+export * from './Format';
 export * from './Property';
 export * from './Types';
 export * from './Validations';