Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP

17 files changed, 977 insertions, 0 deletions

diff --git a/test/react/__snapshots__/Accordion.spec.js.snap b/test/react/__snapshots__/Accordion.spec.js.snap
new file mode 100644
index 0000000..fe75ada
--- /dev/null
+++ b/test/react/__snapshots__/Accordion.spec.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion Accordion - Default 1`] = `
+<div
+  className="sdc-accordion "
+>
+  <div
+    className="sdc-accordion-header"
+    data-test-id={undefined}
+    onClick={[Function]}
+  >
+    <div
+      className="svg-icon-wrapper     bottom"
+      disabled={undefined}
+      onClick={undefined}
+    >
+      <svg />
+      
+    </div>
+    <div
+      className="title"
+    >
+      Accordion
+    </div>
+  </div>
+  <div
+    className="sdc-accordion-body "
+  >
+    Accordion body
+  </div>
+</div>
+`;
diff --git a/test/react/__snapshots__/Button.spec.js.snap b/test/react/__snapshots__/Button.spec.js.snap
new file mode 100644
index 0000000..16e13bc
--- /dev/null
+++ b/test/react/__snapshots__/Button.spec.js.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Button - Default - Gray 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  color="gray"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Default - Negative 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  color="negative"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Default - Positive 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  color="positive"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Default - Primary - Disabled 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  disabled={true}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Default - Primary 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Default - Warning 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  color="warning"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Default - White 1`] = `
+<button
+  className="sdc-button sdc-button__primary   "
+  color="white"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Link - Primary - Disabled 1`] = `
+<button
+  className="sdc-button sdc-button__link   "
+  color="primary"
+  disabled={true}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Link - Primary - With Icon 1`] = `
+<button
+  className="sdc-button sdc-button__link   plus"
+  color="primary"
+  disabled={false}
+  onClick={undefined}
+>
+  <div
+    className="svg-icon-wrapper     right"
+    disabled={undefined}
+    onClick={undefined}
+  >
+    <svg />
+    <span
+      className="svg-icon-label "
+    >
+      Click Me
+    </span>
+  </div>
+</button>
+`;
+
+exports[`Button Button - Link - Primary 1`] = `
+<button
+  className="sdc-button sdc-button__link   "
+  color="primary"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Outline - Gray 1`] = `
+<button
+  className="sdc-button sdc-button__outline   "
+  color="gray"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Outline - Negative 1`] = `
+<button
+  className="sdc-button sdc-button__outline   "
+  color="negative"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Outline - Positive 1`] = `
+<button
+  className="sdc-button sdc-button__outline   "
+  color="positive"
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
+
+exports[`Button Button - Outline - Primary 1`] = `
+<button
+  className="sdc-button sdc-button__outline   "
+  disabled={false}
+  onClick={undefined}
+>
+  Click Me
+</button>
+`;
diff --git a/test/react/__snapshots__/Checkbox.spec.js.snap b/test/react/__snapshots__/Checkbox.spec.js.snap
new file mode 100644
index 0000000..fa6239b
--- /dev/null
+++ b/test/react/__snapshots__/Checkbox.spec.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox Checkbox - disabled 1`] = `
+<div
+  className="sdc-checkbox "
+>
+  <label>
+    <input
+      checked={false}
+      className="sdc-checkbox__input"
+      data-test-id={undefined}
+      disabled={true}
+      name={undefined}
+      onChange={[Function]}
+      type="checkbox"
+      value={undefined}
+    />
+    <span
+      className="sdc-checkbox__label"
+    >
+      This is the checkbox label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Checkbox Checkbox - unchecked 1`] = `
+<div
+  className="sdc-checkbox "
+>
+  <label>
+    <input
+      checked={false}
+      className="sdc-checkbox__input"
+      data-test-id={undefined}
+      disabled={undefined}
+      name={undefined}
+      onChange={[Function]}
+      type="checkbox"
+      value={undefined}
+    />
+    <span
+      className="sdc-checkbox__label"
+    >
+      This is the checkbox label
+    </span>
+  </label>
+</div>
+`;
diff --git a/test/react/__snapshots__/Checklist.spec.js.snap b/test/react/__snapshots__/Checklist.spec.js.snap
new file mode 100644
index 0000000..707e910
--- /dev/null
+++ b/test/react/__snapshots__/Checklist.spec.js.snap
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checklist Checklist - Default  1`] = `
+<div
+  className={undefined}
+>
+  <div
+    className="checkbox-item"
+  >
+    <div
+      className="sdc-checkbox "
+    >
+      <label>
+        <input
+          checked={true}
+          className="sdc-checkbox__input"
+          data-test-id="apple"
+          disabled={undefined}
+          name={undefined}
+          onChange={[Function]}
+          type="checkbox"
+          value="apple"
+        />
+        <span
+          className="sdc-checkbox__label"
+        >
+          apple
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    className="checkbox-item"
+  >
+    <div
+      className="sdc-checkbox "
+    >
+      <label>
+        <input
+          checked={false}
+          className="sdc-checkbox__input"
+          data-test-id="banana"
+          disabled={undefined}
+          name={undefined}
+          onChange={[Function]}
+          type="checkbox"
+          value="banana"
+        />
+        <span
+          className="sdc-checkbox__label"
+        >
+          banana
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    className="checkbox-item"
+  >
+    <div
+      className="sdc-checkbox "
+    >
+      <label>
+        <input
+          checked={true}
+          className="sdc-checkbox__input"
+          data-test-id="orange"
+          disabled={undefined}
+          name={undefined}
+          onChange={[Function]}
+          type="checkbox"
+          value="orange"
+        />
+        <span
+          className="sdc-checkbox__label"
+        >
+          orange
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Checklist Checklist - With disabled items  1`] = `
+<div
+  className={undefined}
+>
+  <div
+    className="checkbox-item"
+  >
+    <div
+      className="sdc-checkbox "
+    >
+      <label>
+        <input
+          checked={true}
+          className="sdc-checkbox__input"
+          data-test-id="apple"
+          disabled={true}
+          name={undefined}
+          onChange={[Function]}
+          type="checkbox"
+          value="apple"
+        />
+        <span
+          className="sdc-checkbox__label"
+        >
+          apple
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    className="checkbox-item"
+  >
+    <div
+      className="sdc-checkbox "
+    >
+      <label>
+        <input
+          checked={false}
+          className="sdc-checkbox__input"
+          data-test-id="banana"
+          disabled={true}
+          name={undefined}
+          onChange={[Function]}
+          type="checkbox"
+          value="banana"
+        />
+        <span
+          className="sdc-checkbox__label"
+        >
+          banana
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    className="checkbox-item"
+  >
+    <div
+      className="sdc-checkbox "
+    >
+      <label>
+        <input
+          checked={false}
+          className="sdc-checkbox__input"
+          data-test-id="orange"
+          disabled={undefined}
+          name={undefined}
+          onChange={[Function]}
+          type="checkbox"
+          value="orange"
+        />
+        <span
+          className="sdc-checkbox__label"
+        >
+          orange
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/react/__snapshots__/Input.spec.js.snap b/test/react/__snapshots__/Input.spec.js.snap
new file mode 100644
index 0000000..62c3e2e
--- /dev/null
+++ b/test/react/__snapshots__/Input.spec.js.snap
@@ -0,0 +1,179 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Input - default 1`] = `
+<div
+  className="sdc-input "
+>
+  <label
+    className="sdc-input__label  "
+    htmlFor="clickme"
+  >
+    label for input
+  </label>
+  <input
+    className="sdc-input__input  "
+    data-test-id={undefined}
+    disabled={false}
+    id="clickme"
+    name="clickme"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder={undefined}
+    readOnly={false}
+    type="text"
+    value={undefined}
+  />
+</div>
+`;
+
+exports[`Input Input - error 1`] = `
+<div
+  className="sdc-input "
+>
+  <label
+    className="sdc-input__label  "
+    htmlFor="clickme"
+  >
+    label for input
+  </label>
+  <input
+    className="sdc-input__input error "
+    data-test-id={undefined}
+    disabled={false}
+    id="clickme"
+    name="clickme"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder={undefined}
+    readOnly={false}
+    type="text"
+    value={undefined}
+  />
+  <div
+    className="sdc-label__error"
+  >
+    <div
+      className="svg-icon-wrapper   __negative  right"
+      disabled={undefined}
+      onClick={undefined}
+    >
+      <svg />
+      <span
+        className="svg-icon-label "
+      >
+        this is an error
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Input Input - number 1`] = `
+<div
+  className="sdc-input "
+>
+  <label
+    className="sdc-input__label  "
+    htmlFor="clickme"
+  >
+    label for input
+  </label>
+  <input
+    className="sdc-input__input  "
+    data-test-id={undefined}
+    disabled={false}
+    id="clickme"
+    name="clickme"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder={undefined}
+    readOnly={false}
+    type="number"
+    value={undefined}
+  />
+</div>
+`;
+
+exports[`Input Input - placeholder 1`] = `
+<div
+  className="sdc-input "
+>
+  <label
+    className="sdc-input__label  "
+    htmlFor="clickme"
+  >
+    label for input
+  </label>
+  <input
+    className="sdc-input__input  "
+    data-test-id={undefined}
+    disabled={false}
+    id="clickme"
+    name="clickme"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder="hint"
+    readOnly={false}
+    type="text"
+    value={undefined}
+  />
+</div>
+`;
+
+exports[`Input Input - readonly 1`] = `
+<div
+  className="sdc-input "
+>
+  <label
+    className="sdc-input__label view-only "
+    htmlFor="clickme"
+  >
+    label for input
+  </label>
+  <input
+    className="sdc-input__input  view-only"
+    data-test-id={undefined}
+    disabled={false}
+    id="clickme"
+    name="clickme"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder={undefined}
+    readOnly={true}
+    type="text"
+    value={undefined}
+  />
+</div>
+`;
+
+exports[`Input Input - required 1`] = `
+<div
+  className="sdc-input "
+>
+  <label
+    className="sdc-input__label  "
+    htmlFor="clickme"
+  >
+    label for input
+  </label>
+  <input
+    className="sdc-input__input  "
+    data-test-id={undefined}
+    disabled={false}
+    id="clickme"
+    name="clickme"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder={undefined}
+    readOnly={false}
+    type="text"
+    value={undefined}
+  />
+</div>
+`;
diff --git a/test/react/__snapshots__/Modal.spec.js.snap b/test/react/__snapshots__/Modal.spec.js.snap
new file mode 100644
index 0000000..c22da8d
--- /dev/null
+++ b/test/react/__snapshots__/Modal.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal alert modal 1`] = `"<div><div class=\\"sdc-modal sm\\"><div class=\\"sdc-modal__wrapper sdc-modal-type-alert\\"><div class=\\"sdc-alert__header sdc-modal__header\\"><div class=\\"svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use   bottom\\"><svg></svg><!-- react-text: 7 --><!-- /react-text --></div><div class=\\"title \\">Title</div><div class=\\"svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button   bottom\\"><svg></svg><!-- react-text: 11 --><!-- /react-text --></div></div><div class=\\"sdc-modal__content \\">Message</div><div class=\\"sdc-modal__footer\\"><div><button class=\\"sdc-button sdc-button__primary   \\">Ok</button></div></div></div></div><div class=\\"modal-background\\"></div></div>"`;
+
+exports[`Modal custom modal 1`] = `"<div><div class=\\"sdc-modal md\\"><div class=\\"sdc-modal__wrapper sdc-modal-type-custom\\"><div class=\\"sdc-custom__header sdc-modal__header\\"><div class=\\"title \\">Title</div><div class=\\"svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button   bottom\\"><svg></svg><!-- react-text: 8 --><!-- /react-text --></div></div><div class=\\"sdc-modal__content \\">Message</div><div class=\\"sdc-modal__footer\\"><div><button class=\\"sdc-button sdc-button__primary   \\">Ok</button><button class=\\"sdc-button sdc-button__secondary   \\">Close</button></div></div></div></div><div class=\\"modal-background\\"></div></div>"`;
+
+exports[`Modal standard modal - not displayed 1`] = `"<div></div>"`;
+
+exports[`Modal standard modal 1`] = `"<div><div class=\\"sdc-modal sm\\"><div class=\\"sdc-modal__wrapper sdc-modal-type-info\\"><div class=\\"sdc-info__header sdc-modal__header\\"><div class=\\"svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use   bottom\\"><svg></svg><!-- react-text: 7 --><!-- /react-text --></div><div class=\\"title \\">Standard Modal</div><div class=\\"svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button   bottom\\"><svg></svg><!-- react-text: 11 --><!-- /react-text --></div></div><div class=\\"sdc-modal__content \\">Message</div><div class=\\"sdc-modal__footer\\"><div><button class=\\"sdc-button sdc-button__primary   \\">Yes</button><button class=\\"sdc-button sdc-button__secondary   \\">Close</button></div></div></div></div><div class=\\"modal-background\\"></div></div>"`;
diff --git a/test/react/__snapshots__/ModalBody.spec.js.snap b/test/react/__snapshots__/ModalBody.spec.js.snap
new file mode 100644
index 0000000..d0fda4d
--- /dev/null
+++ b/test/react/__snapshots__/ModalBody.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBody basic test 1`] = `
+<div
+  className="sdc-modal__content "
+/>
+`;
diff --git a/test/react/__snapshots__/ModalFooter.spec.js.snap b/test/react/__snapshots__/ModalFooter.spec.js.snap
new file mode 100644
index 0000000..ee98355
--- /dev/null
+++ b/test/react/__snapshots__/ModalFooter.spec.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalFooter basic test 1`] = `
+<div
+  className="sdc-modal__footer"
+>
+  <div>
+    <button
+      className="sdc-button sdc-button__primary   "
+      disabled={false}
+      onClick={undefined}
+    >
+      Ok
+    </button>
+  </div>
+</div>
+`;
diff --git a/test/react/__snapshots__/ModalHeader.spec.js.snap b/test/react/__snapshots__/ModalHeader.spec.js.snap
new file mode 100644
index 0000000..8559925
--- /dev/null
+++ b/test/react/__snapshots__/ModalHeader.spec.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalHeader basic test 1`] = `
+<div
+  className="sdc-info__header sdc-modal__header"
+>
+  <div
+    className="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use   bottom"
+    disabled={undefined}
+    onClick={undefined}
+  >
+    <svg />
+    
+  </div>
+  <div
+    className="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button   bottom"
+    disabled={undefined}
+    onClick={undefined}
+  >
+    <svg />
+    
+  </div>
+</div>
+`;
diff --git a/test/react/__snapshots__/ModalTitle.spec.js.snap b/test/react/__snapshots__/ModalTitle.spec.js.snap
new file mode 100644
index 0000000..69a7734
--- /dev/null
+++ b/test/react/__snapshots__/ModalTitle.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalTitle basic test 1`] = `
+<div
+  className="title "
+>
+  Title
+</div>
+`;
diff --git a/test/react/__snapshots__/Panel.spec.js.snap b/test/react/__snapshots__/Panel.spec.js.snap
new file mode 100644
index 0000000..b31dda7
--- /dev/null
+++ b/test/react/__snapshots__/Panel.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panel Panel - Default 1`] = `
+<div
+  className="sdc-panel "
+>
+  Panel
+</div>
+`;
diff --git a/test/react/__snapshots__/PopupMenu.spec.js.snap b/test/react/__snapshots__/PopupMenu.spec.js.snap
new file mode 100644
index 0000000..7a9060f
--- /dev/null
+++ b/test/react/__snapshots__/PopupMenu.spec.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PopupMenu check relative menu rendered 1`] = `
+<ul
+  className="sdc-menu-list relative"
+  style={
+    Object {
+      "left": 10,
+      "top": 10,
+    }
+  }
+/>
+`;
+
+exports[`PopupMenu check separator rendered 1`] = `
+<li
+  className="separator"
+/>
+`;
+
+exports[`PopupMenu check static menu rendered 1`] = `
+<ul
+  className="sdc-menu-list "
+  style={Object {}}
+/>
+`;
diff --git a/test/react/__snapshots__/PopupMenuItem.spec.js.snap b/test/react/__snapshots__/PopupMenuItem.spec.js.snap
new file mode 100644
index 0000000..3334afb
--- /dev/null
+++ b/test/react/__snapshots__/PopupMenuItem.spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PopupMenuItem check disabled 1`] = `
+<li
+  className="sdc-menu-item disabled"
+  onClick={[Function]}
+>
+  item 2
+</li>
+`;
+
+exports[`PopupMenuItem check selected 1`] = `
+<li
+  className="sdc-menu-item selected"
+  onClick={[Function]}
+>
+  item 1
+</li>
+`;
diff --git a/test/react/__snapshots__/Radio.spec.js.snap b/test/react/__snapshots__/Radio.spec.js.snap
new file mode 100644
index 0000000..a878d3a
--- /dev/null
+++ b/test/react/__snapshots__/Radio.spec.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio Radio - disabled 1`] = `
+<div
+  className="sdc-radio "
+>
+  <label>
+    <input
+      checked={false}
+      className="sdc-radio__input"
+      data-test-id={undefined}
+      disabled={true}
+      name="grp2"
+      onChange={[Function]}
+      type="radio"
+      value="1"
+    />
+    <span
+      className="sdc-radio__label"
+    >
+      This is the radio label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Radio Radio - unchecked 1`] = `
+<div
+  className="sdc-radio "
+>
+  <label>
+    <input
+      checked={false}
+      className="sdc-radio__input"
+      data-test-id={undefined}
+      disabled={undefined}
+      name="grp4"
+      onChange={[Function]}
+      type="radio"
+      value="1"
+    />
+    <span
+      className="sdc-radio__label"
+    >
+      This is the radio label
+    </span>
+  </label>
+</div>
+`;
diff --git a/test/react/__snapshots__/RadioGroup.spec.js.snap b/test/react/__snapshots__/RadioGroup.spec.js.snap
new file mode 100644
index 0000000..caf729d
--- /dev/null
+++ b/test/react/__snapshots__/RadioGroup.spec.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RadioGroup RadioGroup - basic rendering 1`] = `
+<div
+  className="sdc-radio-group "
+  data-test-id="grp1"
+>
+  <label
+    className="sdc-radio-group__legend"
+  >
+    Group A
+  </label>
+  <div
+    className="sdc-radio-group__radios"
+  >
+    <div
+      className="sdc-radio "
+    >
+      <label>
+        <input
+          checked={true}
+          className="sdc-radio__input"
+          data-test-id="grp1_1"
+          disabled={undefined}
+          name="grp1"
+          onChange={[Function]}
+          type="radio"
+          value="1"
+        />
+        <span
+          className="sdc-radio__label"
+        >
+          option 1
+        </span>
+      </label>
+    </div>
+    <div
+      className="sdc-radio "
+    >
+      <label>
+        <input
+          checked={false}
+          className="sdc-radio__input"
+          data-test-id="grp1_2"
+          disabled={undefined}
+          name="grp1"
+          onChange={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          className="sdc-radio__label"
+        >
+          option 2
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/react/__snapshots__/Tabs.spec.js.snap b/test/react/__snapshots__/Tabs.spec.js.snap
new file mode 100644
index 0000000..9a4d0a1
--- /dev/null
+++ b/test/react/__snapshots__/Tabs.spec.js.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs Tabs - basic rendering 1`] = `
+<form>
+  <fieldset
+    disabled={false}
+  >
+    <div
+      className="sdc-tabs sdc-tabs-menu "
+    >
+      <ul
+        className="sdc-tabs-list"
+        role="tablist"
+      >
+        <li
+          className="sdc-tab sdc-tab-active "
+          data-test-id="1"
+          disabled={undefined}
+          onClick={[Function]}
+          role="tab"
+        >
+          tab 1
+        </li>
+        <li
+          className="sdc-tab  "
+          data-test-id="2"
+          disabled={undefined}
+          onClick={[Function]}
+          role="tab"
+        >
+          tab 2
+        </li>
+        <li
+          className="sdc-tab  "
+          data-test-id="3"
+          disabled={undefined}
+          onClick={[Function]}
+          role="tab"
+        >
+          tab 3
+        </li>
+      </ul>
+      <div
+        className="sdc-tab-content"
+        role="tabpanel"
+      >
+        Tab #1
+      </div>
+    </div>
+  </fieldset>
+</form>
+`;
diff --git a/test/react/__snapshots__/Tile.spec.js.snap b/test/react/__snapshots__/Tile.spec.js.snap
new file mode 100644
index 0000000..e38ffa2
--- /dev/null
+++ b/test/react/__snapshots__/Tile.spec.js.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tile Empty tile 1`] = `
+<div
+  className="sdc-tile "
+  data-test-id={undefined}
+  onClick={undefined}
+>
+  <div
+    className="sdc-tile-header "
+  />
+  <div
+    className="sdc-tile-content"
+  >
+    <div
+      className="sdc-tile-content-icon "
+    />
+  </div>
+</div>
+`;
+
+exports[`Tile Tile with content info 1`] = `
+<div
+  className="sdc-tile "
+  data-test-id={undefined}
+  onClick={undefined}
+>
+  <div
+    className="sdc-tile-header "
+  />
+  <div
+    className="sdc-tile-content"
+  >
+    <div
+      className="sdc-tile-content-icon "
+    />
+    <div
+      className="sdc-tile-content-info centered"
+    >
+      <div
+        className="sdc-tile-info-line title "
+        data-test-id={undefined}
+      >
+        Info
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tile Tile with footer 1`] = `
+<div
+  className="sdc-tile "
+  data-test-id={undefined}
+  onClick={undefined}
+>
+  <div
+    className="sdc-tile-header "
+  />
+  <div
+    className="sdc-tile-content"
+  >
+    <div
+      className="sdc-tile-content-icon "
+    />
+  </div>
+  <div
+    className="sdc-tile-footer centered"
+  >
+    <span
+      className="sdc-tile-footer-cell "
+      data-test-id={undefined}
+    >
+      Footer
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Tile Tile with props 1`] = `
+<div
+  className="sdc-tile "
+  data-test-id={undefined}
+  onClick={undefined}
+>
+  <div
+    className="sdc-tile-header blue"
+  >
+    header
+  </div>
+  <div
+    className="sdc-tile-content"
+  >
+    <div
+      className="sdc-tile-content-icon blue"
+    >
+      <div
+        className="svg-icon-wrapper     bottom"
+        disabled={undefined}
+        onClick={undefined}
+      >
+        <svg />
+        
+      </div>
+    </div>
+  </div>
+</div>
+`;