@truedat/df 7.0.4 → 7.0.6

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldForm.spec.js.snap

@@ -343,290 +343,609 @@ exports[`<FieldForm /> manages handleCardinalityChange 1`] = `
 `;
 
 exports[`<FieldForm /> matches the latest snapshot 1`] = `
-<Segment>
-  <ButtonGroup
-    basic={true}
-    buttons={
-      [
-        {
-          "disabled": true,
-          "icon": "arrow up",
-          "key": "up",
-          "onClick": [Function],
-        },
-        {
-          "disabled": true,
-          "icon": "arrow down",
-          "key": "down",
-          "onClick": [Function],
-        },
-        {
-          "disabled": false,
-          "icon": "trash alternate outline",
-          "key": "delete",
-          "onClick": [MockFunction],
-        },
-      ]
-    }
-    color="orange"
-    floated="right"
-    size="tiny"
-  />
-  <Divider
-    clearing={true}
-    hidden={true}
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
-  >
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      label="template.field.label"
-      name="undefined.fields[0].label"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="Field 1"
-    />
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      disabled={false}
-      fluid={true}
-      label="template.field.name"
-      name="undefined.fields[0].name"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="field1"
-    />
-  </FormGroup>
-  <FormTextArea
-    as={[Function]}
-    control={[Function]}
-    label="template.field.description"
-    name="undefined.fields[0].description"
-    onChange={[MockFunction]}
-    rows={4}
-    size="small"
-    value="A field for testing"
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
+<div>
+  <div
+    class="ui segment"
   >
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.widget"
-      name="undefined.fields[0].widget"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Identifier",
-            "value": "identifier",
-          },
-          {
-            "icon": "minus",
-            "key": undefined,
-            "text": "Text Input",
-            "value": "string",
-          },
-          {
-            "icon": "align justify",
-            "key": undefined,
-            "text": "Textarea",
-            "value": "textarea",
-          },
-          {
-            "icon": "arrow down",
-            "key": undefined,
-            "text": "Dropdown",
-            "value": "dropdown",
-          },
-          {
-            "icon": "radio",
-            "key": undefined,
-            "text": "Radio",
-            "value": "radio",
-          },
-          {
-            "icon": "check square outline",
-            "key": undefined,
-            "text": "Checkbox",
-            "value": "checkbox",
-          },
-          {
-            "icon": "linkify",
-            "key": undefined,
-            "text": "Links",
-            "value": "pair_list",
-          },
-          {
-            "icon": "tint",
-            "key": undefined,
-            "text": "Colorpicker",
-            "value": "color_picker",
-          },
-          {
-            "icon": "text cursor",
-            "key": undefined,
-            "text": "Enrichedtext",
-            "value": "enriched_text",
-          },
-          {
-            "icon": "table",
-            "key": undefined,
-            "text": "Table",
-            "value": "table",
-          },
-          {
-            "icon": "asterisk",
-            "key": undefined,
-            "text": "Password",
-            "value": "password",
-          },
-          {
-            "icon": "image",
-            "key": undefined,
-            "text": "Image",
-            "value": "image",
-          },
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Number",
-            "value": "number",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date",
-            "value": "date",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date Time",
-            "value": "datetime",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-      value="string"
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.type"
-      name="undefined.fields[0].type"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "key": "string",
-            "text": "template.field.type.string",
-            "value": "string",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-      value="list"
+    <div
+      class="ui orange tiny basic right floated buttons"
+    >
+      <button
+        class="ui icon disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        <i
+          aria-hidden="true"
+          class="arrow up icon"
+        />
+      </button>
+      <button
+        class="ui icon disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        <i
+          aria-hidden="true"
+          class="arrow down icon"
+        />
+      </button>
+      <button
+        class="ui icon button"
+      >
+        <i
+          aria-hidden="true"
+          class="trash alternate outline icon"
+        />
+      </button>
+    </div>
+    <div
+      class="ui clearing hidden divider"
     />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.cardinality"
-      name="undefined.fields[0].cardinality"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "key": "?",
-            "text": "template.field.cardinality.?",
-            "value": "?",
-          },
-          {
-            "key": "1",
-            "text": "template.field.cardinality.1",
-            "value": "1",
-          },
-          {
-            "key": "*",
-            "text": "template.field.cardinality.*",
-            "value": "*",
-          },
-          {
-            "key": "+",
-            "text": "template.field.cardinality.+",
-            "value": "+",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-    />
-  </FormGroup>
-  <ValuesField
-    defaultField="undefined.fields[0].default"
-    field={
-      {
-        "description": "A field for testing",
-        "label": "Field 1",
-        "meta": {
-          "role": "Data Owner",
-        },
-        "name": "field1",
-        "required": true,
-        "type": "list",
-        "values": [
-          "V1",
-          "V2",
-        ],
-        "widget": "string",
-      }
-    }
-    fieldNamePrefix="undefined.fields[0]"
-    fieldType="list"
-    keyType="0"
-    name="undefined.fields[0].values"
-    onChange={[MockFunction]}
-    onSelectionChange={[Function]}
-    subscribableField="undefined.fields[0].subscribable"
-    values={[]}
-  />
-  <ConditionalFieldForm
-    field={
-      {
-        "description": "A field for testing",
-        "label": "Field 1",
-        "meta": {
-          "role": "Data Owner",
-        },
-        "name": "field1",
-        "required": true,
-        "type": "list",
-        "values": [
-          "V1",
-          "V2",
-        ],
-        "widget": "string",
-      }
-    }
-    fieldNamePrefix="undefined.fields[0]"
-    onChange={[MockFunction]}
-  />
-</Segment>
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.label
+        </label>
+        <div
+          class="ui small input"
+        >
+          <input
+            name="undefined.fields[0].label"
+            required=""
+            type="text"
+            value="Field 1"
+          />
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.name
+        </label>
+        <div
+          class="ui small fluid input"
+        >
+          <input
+            name="undefined.fields[0].name"
+            required=""
+            type="text"
+            value="field1"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        template.field.description
+      </label>
+      <textarea
+        name="undefined.fields[0].description"
+        rows="4"
+      >
+        A field for testing
+      </textarea>
+    </div>
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.widget
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="undefined.fields[0].widget"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            Text Input
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="hashtag icon"
+              />
+              <span
+                class="text"
+              >
+                Identifier
+              </span>
+            </div>
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="minus icon"
+              />
+              <span
+                class="text"
+              >
+                Text Input
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="align justify icon"
+              />
+              <span
+                class="text"
+              >
+                Textarea
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="arrow down icon"
+              />
+              <span
+                class="text"
+              >
+                Dropdown
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="radio icon"
+              />
+              <span
+                class="text"
+              >
+                Radio
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="check square outline icon"
+              />
+              <span
+                class="text"
+              >
+                Checkbox
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="linkify icon"
+              />
+              <span
+                class="text"
+              >
+                Links
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="tint icon"
+              />
+              <span
+                class="text"
+              >
+                Colorpicker
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="text cursor icon"
+              />
+              <span
+                class="text"
+              >
+                Enrichedtext
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="table icon"
+              />
+              <span
+                class="text"
+              >
+                Table
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="asterisk icon"
+              />
+              <span
+                class="text"
+              >
+                Password
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="image icon"
+              />
+              <span
+                class="text"
+              >
+                Image
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="hashtag icon"
+              />
+              <span
+                class="text"
+              >
+                Number
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="calendar icon"
+              />
+              <span
+                class="text"
+              >
+                Date
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="calendar icon"
+              />
+              <span
+                class="text"
+              >
+                Date Time
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.type
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="undefined.fields[0].type"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.string
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.cardinality
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="undefined.fields[0].cardinality"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.?
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.1
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.*
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.+
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        template.field.depends
+      </label>
+      <div
+        class="equal width fields"
+      >
+        <div
+          class="field"
+        >
+          <div
+            class="disabled field"
+          >
+            <div
+              aria-disabled="true"
+              aria-expanded="false"
+              class="ui disabled fluid search selection dropdown"
+              name="undefined.fields[0].depends.on"
+              role="combobox"
+            >
+              <input
+                aria-autocomplete="list"
+                autocomplete="off"
+                class="search"
+                tabindex="-1"
+                type="text"
+                value=""
+              />
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider default text"
+                role="alert"
+              >
+                template.field.depends.on
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  class="message"
+                >
+                  No results found.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="field"
+        >
+          <div
+            class="disabled field"
+          >
+            <div
+              aria-disabled="true"
+              aria-expanded="false"
+              class="ui disabled fluid multiple search selection dropdown"
+              name="undefined.fields[0].depends.to_be"
+              role="combobox"
+            >
+              <input
+                aria-autocomplete="list"
+                autocomplete="off"
+                class="search"
+                tabindex="-1"
+                type="text"
+                value=""
+              />
+              <span
+                class="sizer"
+              />
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider default text"
+                role="alert"
+              >
+                template.field.depends.to_be
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                aria-multiselectable="true"
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  class="message"
+                >
+                  No results found.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<FieldForm /> renders MandatoryConditional 1`] = `