Pass more html options through data entry props

This allows for setting the required prop on some entry components
and to specify a URL required format for the basic data entry

app/src/frontend/building/data-components/data-entry-input.tsx

@@ -12,6 +12,8 @@ export interface TextDataEntryInputProps {
     maxLength?: number;
     disabled?: boolean;
     placeholder?: string;
+    isUrl?: boolean;
+    required?: boolean;
     valueTransform?: (val: string) => string;
     confirmOnEnter?: boolean;
 
@@ -52,11 +54,12 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
 
     return (
         <>
-            <input className="form-control" type="text"
+            <input className="form-control" type={props.isUrl? "url" : "text"}
                 id={idAttr}
                 name={nameAttr}
                 value={props.value || ''}
                 maxLength={props.maxLength}
+                required={props.required}
                 disabled={props.disabled}
                 placeholder={props.placeholder}
                 onKeyDown={e => {

app/src/frontend/building/data-components/data-entry.tsx

@@ -12,6 +12,8 @@ interface BaseDataEntryProps {
     disabled?: boolean;
     copy?: CopyProps; // CopyProps clashes with propTypes
     mode?: 'view' | 'edit' | 'multi-edit';
+    isUrl?: boolean;
+    required?: boolean;
     onChange?: (key: string, value: any) => void;
 }
 
@@ -37,6 +39,8 @@ const DataEntry: React.FC<DataEntryProps> = (props) => {
 
                 maxLength={props.maxLength}
                 placeholder={props.placeholder}
+                isUrl={props.isUrl}
+                required={props.required}
                 valueTransform={props.valueTransform}
             />
         </Fragment>

app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx

@@ -109,6 +109,7 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                                 onChange={(key, val) => this.edit(i, val)}
 
                                 maxLength={props.maxLength}
+                                isUrl={props.isUrl}
                                 valueTransform={props.valueTransform}
 
                                 autofill={props.autofill}
@@ -135,11 +136,13 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                             id={`${props.slug}`}
                             value={this.state.newValue}
                             disabled={props.disabled}
+                            required={props.required && values.length < 1}
                             onChange={(key, val) => this.setNewValue(val)}
                             onConfirm={(key, val) => this.addNew(val)}
 
                             maxLength={props.maxLength}
                             placeholder={props.placeholder}
+                            isUrl={props.isUrl}
                             valueTransform={props.valueTransform}
                             confirmOnEnter={props.confirmOnEnter}
 

app/src/frontend/building/data-components/numeric-data-entry.tsx

@@ -33,6 +33,7 @@ const NumericDataEntry: React.FunctionComponent<NumericDataEntryProps> = (props)
                 min={props.min}
                 disabled={props.mode === 'view' || props.disabled}
                 placeholder={props.placeholder}
+                required={props.required}
                 onChange={e =>
                     props.onChange(
                         props.slug,

app/src/frontend/building/data-components/select-data-entry.tsx

@@ -24,6 +24,7 @@ const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) =
                 id={props.slug} name={props.slug}
                 value={props.value || ''}
                 disabled={props.mode === 'view' || props.disabled}
+                required={props.required}
                 onChange={e => 
                     props.onChange(
                         props.slug,