CSDEV-8224 mark rows of required properties (#2)

Add a data attribute to allow styling through CSS *in the application*.

Author: marcelstoer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/json-schema-viewer",
-  "version": "4.16.401",
+  "version": "4.16.402",
   "description": "A beautiful React component for viewing JSON Schema",
   "keywords": [],
   "sideEffects": false,

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

@@ -861,6 +861,7 @@ exports[`HTML Output > given anyOf combiner placed next to allOf > given allOf m
           >
             <div
               class="sl-flex sl-items-center sl-max-w-full"
+              data-required="true"
             >
               <div
                 class="sl-flex sl-items-baseline sl-text-base"
@@ -1381,6 +1382,7 @@ exports[`HTML Output > given oneOf combiner placed next to allOf > given allOf m
           >
             <div
               class="sl-flex sl-items-center sl-max-w-full"
+              data-required="true"
             >
               <div
                 class="sl-flex sl-items-baseline sl-text-base"

src/components/SchemaRow/SchemaRow.tsx

@@ -117,6 +117,11 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(
               maxW="full"
               onClick={isCollapsible ? () => setExpanded(!isExpanded) : undefined}
               cursor={isCollapsible ? 'pointer' : undefined}
+              // The Flex component extends Box.
+              // node_modules/@stoplight/mosaic/components/Box/types.d.ts line 5 defines that all data-xxx attributes must be of type string.
+              // export declare type DatasetProps = Record<`data-${string}`, string>;
+              // --> we can't use the boolean 'required' directly
+              data-required={required ? 'true' : undefined}
             >
               {isCollapsible ? <Caret isExpanded={isExpanded} /> : null}
               <Flex alignItems="baseline" fontSize="base">