init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>

6 files changed, 360 insertions, 0 deletions

diff --git a/components/tag-cloud/_tag-cloud.scss b/components/tag-cloud/_tag-cloud.scss
new file mode 100644
index 0000000..6a94a10
--- /dev/null
+++ b/components/tag-cloud/_tag-cloud.scss
@@ -0,0 +1,116 @@
+.sdc-tag-cloud-new-item-field{
+    display: flex;
+    align-items: flex-end;
+  sdc-input{
+    flex-grow: 1;
+    .sdc-input{
+      margin-bottom: 0;
+      .sdc-input__input{
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+  .not-empty{
+    .sdc-input__input {
+      border-color: $blue;
+    }
+   
+  }
+  .error{
+    .sdc-input__input {
+      border: solid 1px $red;
+      color: $red;
+      outline: none;
+    }
+  }
+  .add-button{
+    cursor: pointer;
+    height: 36px;
+    width: 36px;
+    text-align: center;
+    background-color: $lighter-blue;
+    border: solid 1px $blue;
+    border-left: none;
+    border-top-right-radius: 2px;
+    &.disabled{
+      cursor: default;
+      background-color: $light-silver;
+      border-color: $light-gray;
+      .plus-icon svg g{
+        fill: $gray;
+      }
+    }
+    .plus-icon{
+      line-height: 46px;
+      svg{
+        height: 20px;
+        width: 20px;
+        g{
+          fill: $blue;
+        }
+      }
+    }
+  }
+
+  &.not-empty{
+    .add-button:hover{
+      background-color: $light-blue;
+      svg{
+        g{
+          fill: $white;
+        }
+      }
+    }
+  }
+}
+
+.sdc-list-container{
+  height: 120px;
+  overflow-y: auto;
+  border: solid 1px $light-gray;
+  border-top: none;
+  border-radius: 2px;
+  background-color: $white;
+  padding: 10px 10px 0 0;
+  .sdc-tag-item{
+    padding: 0 0 10px 10px;
+    display: inline-block;
+    .tag-item{
+      min-width: 100px;
+      background-color: $white;
+      border: solid 1px $light-gray;
+      border-radius: 20px;
+      height: 28px;
+      line-height: 28px;
+      padding: 0 10px;
+      color: $text-black;
+      @include body-3;
+      &.view-only{
+        border-color: $silver;
+      }
+      .delete-item{
+        cursor: pointer;
+        padding-left: 10px;
+        float: right;
+        svg{
+          height: 12px;
+          width: 12px;
+          margin-top: 8px;
+          g{
+            fill: $dark-gray;
+          }
+        }
+      }
+      &:hover:not(.view-only){
+        background-color: $lighter-blue;
+        border-color: $lighter-blue;
+        .delete-item{
+          svg g{
+            fill: $blue;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/tag-cloud/disabled-list.html b/components/tag-cloud/disabled-list.html
new file mode 100644
index 0000000..6091525
--- /dev/null
+++ b/components/tag-cloud/disabled-list.html
@@ -0,0 +1,31 @@
+<div class="sdc-tag-cloud-new-item-field">
+    <div class="sdc-input">
+        <label class="sdc-input__label">Please Enter value</label>
+        <input class="sdc-input__input disabled" type="text" name="undefined" placeholder="Type a value and then click enter or '+'" disabled="disabled">
+    </div>
+    <div class="add-button disabled">
+        <span class="plus-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+                <use xlink:href="#add-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>
+<div class="sdc-list-container">
+    <div class="sdc-tag-item">
+        <div class="tag-item view-only">
+            <span>aaa</span>
+        </div>
+    </div>
+
+    <div class="sdc-tag-item">
+        <div class="tag-item view-only">
+            <span>bbb</span>
+        </div>
+    </div>
+</div>
diff --git a/components/tag-cloud/list-with-active-add-button.html b/components/tag-cloud/list-with-active-add-button.html
new file mode 100644
index 0000000..8bde59f
--- /dev/null
+++ b/components/tag-cloud/list-with-active-add-button.html
@@ -0,0 +1,50 @@
+<div class="sdc-tag-cloud-new-item-field">
+     <div class="sdc-input">
+        <label class="sdc-input__label">Please Enter value</label>
+        <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+    </div>
+    <div class="add-button">
+        <span class="plus-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+                <use xlink:href="#add-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>
+<div class="sdc-list-container">
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>aaa</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>bbb</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+</div>
diff --git a/components/tag-cloud/list-with-some-read-only-items.html b/components/tag-cloud/list-with-some-read-only-items.html
new file mode 100644
index 0000000..0db7a07
--- /dev/null
+++ b/components/tag-cloud/list-with-some-read-only-items.html
@@ -0,0 +1,61 @@
+<div class="sdc-tag-cloud-new-item-field">
+    <div class="sdc-input">
+        <label class="sdc-input__label">Please Enter value</label>
+        <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+    </div>
+
+    <div class="add-button disabled">
+        <span class="plus-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+                <use xlink:href="#add-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>
+<div class="sdc-list-container">
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>aaa</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+    <div class="sdc-tag-item">
+        <div class="tag-item view-only">
+            <span>bbb</span>
+        </div>
+    </div>
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>ccc</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+    <tag class="sdc-tag-item">
+        <div class="tag-item view-only">
+            <span>ddd</span>
+        </div>
+    </tag>
+</div>
diff --git a/components/tag-cloud/list-with-unique-error.html b/components/tag-cloud/list-with-unique-error.html
new file mode 100644
index 0000000..14de80c
--- /dev/null
+++ b/components/tag-cloud/list-with-unique-error.html
@@ -0,0 +1,52 @@
+<div class="sdc-tag-cloud-new-item-field">
+    <div class="sdc-input">
+        <label class="sdc-input__label">Please Enter value</label>
+        <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+    </div>
+    <div class="add-button disabled">
+        <span class="plus-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+                <use xlink:href="#add-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>
+<div class="sdc-list-container">
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>aaa</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>bbb</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+</div>
+<div class="error-message">This value is already in the list</div>
+
diff --git a/components/tag-cloud/simple-list.html b/components/tag-cloud/simple-list.html
new file mode 100644
index 0000000..075751f
--- /dev/null
+++ b/components/tag-cloud/simple-list.html
@@ -0,0 +1,50 @@
+<div class="sdc-tag-cloud-new-item-field">
+    <div class="sdc-input">
+        <label class="sdc-input__label">Please Enter value</label>
+        <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+    </div>
+    <div class="add-button disabled">
+        <span class="plus-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+                <use xlink:href="#add-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>
+<div class="sdc-list-container">
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>aaa</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+    <div class="sdc-tag-item">
+        <div class="tag-item">
+            <span>bbb</span>
+            <span class="delete-item">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <use xlink:href="#close-a"/>
+              </g>
+            </svg>
+        </span>
+        </div>
+    </div>
+</div>