Merge live repo with design changes ccsdk-2309

Issue-ID: CCSDK-2309
Change-Id: Iba91eebc5880a930842e66fa97d20441c52e347b
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>

9 files changed, 218 insertions, 0 deletions

diff --git a/cds-ui/designer-client/src/assets/img/icon-deploy-active.svg b/cds-ui/designer-client/src/assets/img/icon-deploy-active.svg
new file mode 100644
index 000000000..adaf6956e
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-deploy-active.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>deploy</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1.1.1-Packages-List" transform="translate(-678.000000, -229.000000)" fill-rule="nonzero">
+            <g id="Tab-content" transform="translate(80.000000, 155.000000)">
+                <g id="cards" transform="translate(0.000000, 48.000000)">
+                    <g id="row-1">
+                        <g id="1" transform="translate(337.000000, 0.000000)">
+                            <g id="info" transform="translate(20.000000, 20.000000)">
+                                <g id="deploy" transform="translate(241.000000, 6.000000)">
+                                    <path d="M11.30545,8.97628333 L10.0929833,10.7182833 L9.23736667,10.0160667 C9.14506667,9.94001667 9.00835,9.95388333 8.93251667,10.0459667 C8.85646667,10.1384833 8.8699,10.2752 8.96263333,10.3508167 L9.9996,11.2021 C10.0386,11.2341667 10.0871333,11.2515 10.1369667,11.2515 C10.1467167,11.2515 10.1566833,11.25085 10.16665,11.2493333 C10.22645,11.2411 10.2801833,11.2081667 10.31485,11.15855 L11.6612167,9.22393333 C11.7294667,9.12578333 11.7054167,8.9908 11.60705,8.92233333 C11.5086833,8.853 11.3739167,8.8777 11.30545,8.97628333 Z" id="Path" fill="#000000"></path>
+                                    <path d="M10.1833333,7.36666667 C8.63026667,7.36666667 7.36666667,8.63026667 7.36666667,10.1833333 C7.36666667,11.7364 8.63026667,13 10.1833333,13 C11.7364,13 13,11.7364 13,10.1833333 C13,8.63026667 11.7364,7.36666667 10.1833333,7.36666667 Z M10.1833333,12.5666667 C8.86925,12.5666667 7.8,11.4974167 7.8,10.1833333 C7.8,8.86925 8.86925,7.8 10.1833333,7.8 C11.4974167,7.8 12.5666667,8.86925 12.5666667,10.1833333 C12.5666667,11.4974167 11.4974167,12.5666667 10.1833333,12.5666667 Z" id="Shape" fill="#000000"></path>
+                                    <path d="M12.0016,0 L0.9984,0 C0.44785,0 0,0.44785 0,0.9984 L0,3.55138333 C0,3.76241667 0.0680333333,3.95633333 0.180916667,4.11666667 L12.8188667,4.11666667 C12.9319667,3.95633333 13,3.76241667 13,3.5516 L13,0.9984 C13,0.44785 12.55215,0 12.0016,0 Z M2.275,3.25 C1.73745,3.25 1.3,2.81255 1.3,2.275 C1.3,1.73745 1.73745,1.3 2.275,1.3 C2.81255,1.3 3.25,1.73745 3.25,2.275 C3.25,2.81255 2.81255,3.25 2.275,3.25 Z M7.36666667,2.16666667 C7.24706667,2.16666667 7.15,2.0696 7.15,1.95 C7.15,1.8304 7.24706667,1.73333333 7.36666667,1.73333333 C7.48626667,1.73333333 7.58333333,1.8304 7.58333333,1.95 C7.58333333,2.0696 7.48626667,2.16666667 7.36666667,2.16666667 Z M7.8,2.81666667 C7.6804,2.81666667 7.58333333,2.7196 7.58333333,2.6 C7.58333333,2.4804 7.6804,2.38333333 7.8,2.38333333 C7.9196,2.38333333 8.01666667,2.4804 8.01666667,2.6 C8.01666667,2.7196 7.9196,2.81666667 7.8,2.81666667 Z M8.23333333,2.16666667 C8.11373333,2.16666667 8.01666667,2.0696 8.01666667,1.95 C8.01666667,1.8304 8.11373333,1.73333333 8.23333333,1.73333333 C8.35293333,1.73333333 8.45,1.8304 8.45,1.95 C8.45,2.0696 8.35293333,2.16666667 8.23333333,2.16666667 Z M8.66666667,2.81666667 C8.54706667,2.81666667 8.45,2.7196 8.45,2.6 C8.45,2.4804 8.54706667,2.38333333 8.66666667,2.38333333 C8.78626667,2.38333333 8.88333333,2.4804 8.88333333,2.6 C8.88333333,2.7196 8.78626667,2.81666667 8.66666667,2.81666667 Z M9.1,2.16666667 C8.9804,2.16666667 8.88333333,2.0696 8.88333333,1.95 C8.88333333,1.8304 8.9804,1.73333333 9.1,1.73333333 C9.2196,1.73333333 9.31666667,1.8304 9.31666667,1.95 C9.31666667,2.0696 9.2196,2.16666667 9.1,2.16666667 Z M9.53333333,2.81666667 C9.41373333,2.81666667 9.31666667,2.7196 9.31666667,2.6 C9.31666667,2.4804 9.41373333,2.38333333 9.53333333,2.38333333 C9.65293333,2.38333333 9.75,2.4804 9.75,2.6 C9.75,2.7196 9.65293333,2.81666667 9.53333333,2.81666667 Z M9.96666667,2.16666667 C9.84706667,2.16666667 9.75,2.0696 9.75,1.95 C9.75,1.8304 9.84706667,1.73333333 9.96666667,1.73333333 C10.0862667,1.73333333 10.1833333,1.8304 10.1833333,1.95 C10.1833333,2.0696 10.0862667,2.16666667 9.96666667,2.16666667 Z M10.4,2.81666667 C10.2804,2.81666667 10.1833333,2.7196 10.1833333,2.6 C10.1833333,2.4804 10.2804,2.38333333 10.4,2.38333333 C10.5196,2.38333333 10.6166667,2.4804 10.6166667,2.6 C10.6166667,2.7196 10.5196,2.81666667 10.4,2.81666667 Z M10.8333333,2.16666667 C10.7137333,2.16666667 10.6166667,2.0696 10.6166667,1.95 C10.6166667,1.8304 10.7137333,1.73333333 10.8333333,1.73333333 C10.9529333,1.73333333 11.05,1.8304 11.05,1.95 C11.05,2.0696 10.9529333,2.16666667 10.8333333,2.16666667 Z M11.2666667,2.81666667 C11.1470667,2.81666667 11.05,2.7196 11.05,2.6 C11.05,2.4804 11.1470667,2.38333333 11.2666667,2.38333333 C11.3862667,2.38333333 11.4833333,2.4804 11.4833333,2.6 C11.4833333,2.7196 11.3862667,2.81666667 11.2666667,2.81666667 Z" id="Shape" fill="#66BB00"></path>
+                                    <path d="M6.71666667,10.1833333 C6.71666667,9.63906667 6.84623333,9.12556667 7.07091667,8.66666667 L0.180916667,8.66666667 C0.0680333333,8.827 0,9.02091667 0,9.23173333 L0,11.7847167 C0,12.3354833 0.44785,12.7833333 0.9984,12.7833333 L7.89793333,12.7833333 C7.17556667,12.1474167 6.71666667,11.219 6.71666667,10.1833333 Z M2.275,11.4833333 C1.73745,11.4833333 1.3,11.0458833 1.3,10.5083333 C1.3,9.97078333 1.73745,9.53333333 2.275,9.53333333 C2.81255,9.53333333 3.25,9.97078333 3.25,10.5083333 C3.25,11.0458833 2.81255,11.4833333 2.275,11.4833333 Z" id="Shape" fill="#66BB00"></path>
+                                    <path d="M0.180916667,4.55 C0.0680333333,4.71033333 0,4.90425 0,5.11506667 L0,7.66805 C0,7.87908333 0.0680333333,8.073 0.180916667,8.23333333 L7.31921667,8.23333333 C7.94408333,7.31856667 8.99448333,6.71666667 10.1831167,6.71666667 C11.2931,6.71666667 12.28045,7.24316667 12.9152833,8.0574 C12.9679333,7.9378 12.9997833,7.80736667 12.9997833,7.66826667 L12.9997833,5.11506667 C12.9997833,4.90403333 12.93175,4.71033333 12.8188667,4.55 L0.180916667,4.55 Z M2.275,7.36666667 C1.73745,7.36666667 1.3,6.92921667 1.3,6.39166667 C1.3,5.85411667 1.73745,5.41666667 2.275,5.41666667 C2.81255,5.41666667 3.25,5.85411667 3.25,6.39166667 C3.25,6.92921667 2.81255,7.36666667 2.275,7.36666667 Z M7.36666667,6.28333333 C7.24706667,6.28333333 7.15,6.18626667 7.15,6.06666667 C7.15,5.94706667 7.24706667,5.85 7.36666667,5.85 C7.48626667,5.85 7.58333333,5.94706667 7.58333333,6.06666667 C7.58333333,6.18626667 7.48626667,6.28333333 7.36666667,6.28333333 Z M8.23333333,6.28333333 C8.11373333,6.28333333 8.01666667,6.18626667 8.01666667,6.06666667 C8.01666667,5.94706667 8.11373333,5.85 8.23333333,5.85 C8.35293333,5.85 8.45,5.94706667 8.45,6.06666667 C8.45,6.18626667 8.35293333,6.28333333 8.23333333,6.28333333 Z M9.1,6.28333333 C8.9804,6.28333333 8.88333333,6.18626667 8.88333333,6.06666667 C8.88333333,5.94706667 8.9804,5.85 9.1,5.85 C9.2196,5.85 9.31666667,5.94706667 9.31666667,6.06666667 C9.31666667,6.18626667 9.2196,6.28333333 9.1,6.28333333 Z M9.96666667,6.28333333 C9.84706667,6.28333333 9.75,6.18626667 9.75,6.06666667 C9.75,5.94706667 9.84706667,5.85 9.96666667,5.85 C10.0862667,5.85 10.1833333,5.94706667 10.1833333,6.06666667 C10.1833333,6.18626667 10.0862667,6.28333333 9.96666667,6.28333333 Z M10.8333333,6.28333333 C10.7137333,6.28333333 10.6166667,6.18626667 10.6166667,6.06666667 C10.6166667,5.94706667 10.7137333,5.85 10.8333333,5.85 C10.9529333,5.85 11.05,5.94706667 11.05,6.06666667 C11.05,6.18626667 10.9529333,6.28333333 10.8333333,6.28333333 Z" id="Shape" fill="#66BB00"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-deploy-inactive.svg b/cds-ui/designer-client/src/assets/img/icon-deploy-inactive.svg
new file mode 100644
index 000000000..a5fb1a91f
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-deploy-inactive.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>deploy</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Package-Info---View" transform="translate(-268.000000, -29.000000)" fill="#C1CDDD" fill-rule="nonzero">
+            <g id="info">
+                <g transform="translate(56.000000, 24.000000)">
+                    <g id="left-side">
+                        <g id="name" transform="translate(60.000000, 0.000000)">
+                            <g id="deploy" transform="translate(152.000000, 5.000000)">
+                                <path d="M9.56615,7.59531667 L8.54021667,9.06931667 L7.81623333,8.47513333 C7.73813333,8.41078333 7.62245,8.42251667 7.55828333,8.50043333 C7.49393333,8.57871667 7.5053,8.6944 7.58376667,8.75838333 L8.4612,9.4787 C8.4942,9.50583333 8.53526667,9.5205 8.57743333,9.5205 C8.58568333,9.5205 8.59411667,9.51995 8.60255,9.51866667 C8.65315,9.5117 8.69861667,9.48383333 8.72795,9.44185 L9.86718333,7.80486667 C9.92493333,7.72181667 9.90458333,7.6076 9.82135,7.54966667 C9.73811667,7.491 9.62408333,7.5119 9.56615,7.59531667 Z" id="Path"></path>
+                                <path d="M8.61666667,6.23333333 C7.30253333,6.23333333 6.23333333,7.30253333 6.23333333,8.61666667 C6.23333333,9.9308 7.30253333,11 8.61666667,11 C9.9308,11 11,9.9308 11,8.61666667 C11,7.30253333 9.9308,6.23333333 8.61666667,6.23333333 Z M8.61666667,10.6333333 C7.50475,10.6333333 6.6,9.72858333 6.6,8.61666667 C6.6,7.50475 7.50475,6.6 8.61666667,6.6 C9.72858333,6.6 10.6333333,7.50475 10.6333333,8.61666667 C10.6333333,9.72858333 9.72858333,10.6333333 8.61666667,10.6333333 Z" id="Shape"></path>
+                                <path d="M10.1552,0 L0.8448,0 C0.37895,0 0,0.37895 0,0.8448 L0,3.00501667 C0,3.18358333 0.0575666667,3.34766667 0.153083333,3.48333333 L10.8467333,3.48333333 C10.9424333,3.34766667 11,3.18358333 11,3.0052 L11,0.8448 C11,0.37895 10.62105,0 10.1552,0 Z M1.925,2.75 C1.47015,2.75 1.1,2.37985 1.1,1.925 C1.1,1.47015 1.47015,1.1 1.925,1.1 C2.37985,1.1 2.75,1.47015 2.75,1.925 C2.75,2.37985 2.37985,2.75 1.925,2.75 Z M6.23333333,1.83333333 C6.13213333,1.83333333 6.05,1.7512 6.05,1.65 C6.05,1.5488 6.13213333,1.46666667 6.23333333,1.46666667 C6.33453333,1.46666667 6.41666667,1.5488 6.41666667,1.65 C6.41666667,1.7512 6.33453333,1.83333333 6.23333333,1.83333333 Z M6.6,2.38333333 C6.4988,2.38333333 6.41666667,2.3012 6.41666667,2.2 C6.41666667,2.0988 6.4988,2.01666667 6.6,2.01666667 C6.7012,2.01666667 6.78333333,2.0988 6.78333333,2.2 C6.78333333,2.3012 6.7012,2.38333333 6.6,2.38333333 Z M6.96666667,1.83333333 C6.86546667,1.83333333 6.78333333,1.7512 6.78333333,1.65 C6.78333333,1.5488 6.86546667,1.46666667 6.96666667,1.46666667 C7.06786667,1.46666667 7.15,1.5488 7.15,1.65 C7.15,1.7512 7.06786667,1.83333333 6.96666667,1.83333333 Z M7.33333333,2.38333333 C7.23213333,2.38333333 7.15,2.3012 7.15,2.2 C7.15,2.0988 7.23213333,2.01666667 7.33333333,2.01666667 C7.43453333,2.01666667 7.51666667,2.0988 7.51666667,2.2 C7.51666667,2.3012 7.43453333,2.38333333 7.33333333,2.38333333 Z M7.7,1.83333333 C7.5988,1.83333333 7.51666667,1.7512 7.51666667,1.65 C7.51666667,1.5488 7.5988,1.46666667 7.7,1.46666667 C7.8012,1.46666667 7.88333333,1.5488 7.88333333,1.65 C7.88333333,1.7512 7.8012,1.83333333 7.7,1.83333333 Z M8.06666667,2.38333333 C7.96546667,2.38333333 7.88333333,2.3012 7.88333333,2.2 C7.88333333,2.0988 7.96546667,2.01666667 8.06666667,2.01666667 C8.16786667,2.01666667 8.25,2.0988 8.25,2.2 C8.25,2.3012 8.16786667,2.38333333 8.06666667,2.38333333 Z M8.43333333,1.83333333 C8.33213333,1.83333333 8.25,1.7512 8.25,1.65 C8.25,1.5488 8.33213333,1.46666667 8.43333333,1.46666667 C8.53453333,1.46666667 8.61666667,1.5488 8.61666667,1.65 C8.61666667,1.7512 8.53453333,1.83333333 8.43333333,1.83333333 Z M8.8,2.38333333 C8.6988,2.38333333 8.61666667,2.3012 8.61666667,2.2 C8.61666667,2.0988 8.6988,2.01666667 8.8,2.01666667 C8.9012,2.01666667 8.98333333,2.0988 8.98333333,2.2 C8.98333333,2.3012 8.9012,2.38333333 8.8,2.38333333 Z M9.16666667,1.83333333 C9.06546667,1.83333333 8.98333333,1.7512 8.98333333,1.65 C8.98333333,1.5488 9.06546667,1.46666667 9.16666667,1.46666667 C9.26786667,1.46666667 9.35,1.5488 9.35,1.65 C9.35,1.7512 9.26786667,1.83333333 9.16666667,1.83333333 Z M9.53333333,2.38333333 C9.43213333,2.38333333 9.35,2.3012 9.35,2.2 C9.35,2.0988 9.43213333,2.01666667 9.53333333,2.01666667 C9.63453333,2.01666667 9.71666667,2.0988 9.71666667,2.2 C9.71666667,2.3012 9.63453333,2.38333333 9.53333333,2.38333333 Z" id="Shape"></path>
+                                <path d="M5.68333333,8.61666667 C5.68333333,8.15613333 5.79296667,7.72163333 5.98308333,7.33333333 L0.153083333,7.33333333 C0.0575666667,7.469 0,7.63308333 0,7.81146667 L0,9.97168333 C0,10.4377167 0.37895,10.8166667 0.8448,10.8166667 L6.68286667,10.8166667 C6.07163333,10.2785833 5.68333333,9.493 5.68333333,8.61666667 Z M1.925,9.71666667 C1.47015,9.71666667 1.1,9.34651667 1.1,8.89166667 C1.1,8.43681667 1.47015,8.06666667 1.925,8.06666667 C2.37985,8.06666667 2.75,8.43681667 2.75,8.89166667 C2.75,9.34651667 2.37985,9.71666667 1.925,9.71666667 Z" id="Shape"></path>
+                                <path d="M0.153083333,3.85 C0.0575666667,3.98566667 0,4.14975 0,4.32813333 L0,6.48835 C0,6.66691667 0.0575666667,6.831 0.153083333,6.96666667 L6.19318333,6.96666667 C6.72191667,6.19263333 7.61071667,5.68333333 8.61648333,5.68333333 C9.5557,5.68333333 10.39115,6.12883333 10.9283167,6.8178 C10.9728667,6.7166 10.9998167,6.60623333 10.9998167,6.48853333 L10.9998167,4.32813333 C10.9998167,4.14956667 10.94225,3.98566667 10.8467333,3.85 L0.153083333,3.85 Z M1.925,6.23333333 C1.47015,6.23333333 1.1,5.86318333 1.1,5.40833333 C1.1,4.95348333 1.47015,4.58333333 1.925,4.58333333 C2.37985,4.58333333 2.75,4.95348333 2.75,5.40833333 C2.75,5.86318333 2.37985,6.23333333 1.925,6.23333333 Z M6.23333333,5.31666667 C6.13213333,5.31666667 6.05,5.23453333 6.05,5.13333333 C6.05,5.03213333 6.13213333,4.95 6.23333333,4.95 C6.33453333,4.95 6.41666667,5.03213333 6.41666667,5.13333333 C6.41666667,5.23453333 6.33453333,5.31666667 6.23333333,5.31666667 Z M6.96666667,5.31666667 C6.86546667,5.31666667 6.78333333,5.23453333 6.78333333,5.13333333 C6.78333333,5.03213333 6.86546667,4.95 6.96666667,4.95 C7.06786667,4.95 7.15,5.03213333 7.15,5.13333333 C7.15,5.23453333 7.06786667,5.31666667 6.96666667,5.31666667 Z M7.7,5.31666667 C7.5988,5.31666667 7.51666667,5.23453333 7.51666667,5.13333333 C7.51666667,5.03213333 7.5988,4.95 7.7,4.95 C7.8012,4.95 7.88333333,5.03213333 7.88333333,5.13333333 C7.88333333,5.23453333 7.8012,5.31666667 7.7,5.31666667 Z M8.43333333,5.31666667 C8.33213333,5.31666667 8.25,5.23453333 8.25,5.13333333 C8.25,5.03213333 8.33213333,4.95 8.43333333,4.95 C8.53453333,4.95 8.61666667,5.03213333 8.61666667,5.13333333 C8.61666667,5.23453333 8.53453333,5.31666667 8.43333333,5.31666667 Z M9.16666667,5.31666667 C9.06546667,5.31666667 8.98333333,5.23453333 8.98333333,5.13333333 C8.98333333,5.03213333 9.06546667,4.95 9.16666667,4.95 C9.26786667,4.95 9.35,5.03213333 9.35,5.13333333 C9.35,5.23453333 9.26786667,5.31666667 9.16666667,5.31666667 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-discard-sm.svg b/cds-ui/designer-client/src/assets/img/icon-discard-sm.svg
new file mode 100644
index 000000000..96ca98bb1
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-discard-sm.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="18px" viewBox="0 0 26 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Path</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-16.0%" y="-3.0%" width="132.0%" height="106.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.184313725   0 0 0 0 0.325490196   0 0 0 0 0.592156863  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sliding-actions---Package---Active" transform="translate(-37.000000, -120.000000)" fill="#C3CDDB" fill-rule="nonzero">
+            <g id="sliding-actions" filter="url(#filter-1)">
+                <g id="discard" transform="translate(30.000000, 106.000000)">
+                    <g id="btn">
+                        <path d="M20.1847507,17.6842513 C18.3748671,17.6842513 16.7258065,18.3582386 15.4633431,19.4633431 L13,17 L13,23.1583578 L19.1583578,23.1583578 L16.6847507,20.6847507 C17.6324643,19.8875962 18.8470079,19.3949276 20.1847507,19.3949276 C22.6104701,19.3949276 24.663256,20.9721408 25.3817311,23.1583578 L27,22.6246334 C26.0591505,19.7575651 23.3665689,17.6842513 20.1847507,17.6842513 Z" id="Path"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-download-sm.svg b/cds-ui/designer-client/src/assets/img/icon-download-sm.svg
new file mode 100644
index 000000000..11d74860c
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-download-sm.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>download</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-16.0%" y="-3.0%" width="132.0%" height="106.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.184313725   0 0 0 0 0.325490196   0 0 0 0 0.592156863  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sliding-actions---Package---Active" transform="translate(-31.000000, -390.000000)">
+            <g id="sliding-actions" filter="url(#filter-1)">
+                <g id="download" transform="translate(25.000000, 389.000000)">
+                    <g id="btn" transform="translate(5.000000, 0.000000)">
+                        <g id="download" transform="translate(13.000000, 13.000000)"></g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-file-code.svg b/cds-ui/designer-client/src/assets/img/icon-file-code.svg
new file mode 100644
index 000000000..58030f02f
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-file-code.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>file-code</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.3.1-Template-&amp;-Mapping---Upload" transform="translate(-430.000000, -630.000000)" fill="#1273EB" fill-rule="nonzero">
+            <g id="modal-new" transform="translate(380.000000, 254.000000)">
+                <g id="file" transform="translate(30.000000, 354.000000)">
+                    <g id="content" transform="translate(20.000000, 22.000000)">
+                        <g id="file-code">
+                            <path d="M8,0 L0,0 L0,16 L12,16 L12,4 L8,0 Z M7,5 L11,5 L11,15 L1,15 L1,1 L7,1 L7,5 Z M8,4 L8,1 L11,4 L8,4 Z" id="Shape"></path>
+                            <polygon id="Path" points="4.2 13 3.5 13 1.5 10.5 3.5 8 4.2 8 2.2 10.5"></polygon>
+                            <polygon id="Path" points="7.8 13 8.5 13 10.5 10.5 8.5 8 7.8 8 9.8 10.5"></polygon>
+                            <polygon id="Path" points="4.7 14 5.3 14 7.4 7 6.6 7"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-remove-file.svg b/cds-ui/designer-client/src/assets/img/icon-remove-file.svg
new file mode 100644
index 000000000..94da3e0ec
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-remove-file.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>remove</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.3.1-Template-&amp;-Mapping---Upload" transform="translate(-990.000000, -630.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="modal-new" transform="translate(380.000000, 254.000000)">
+                <g id="file" transform="translate(30.000000, 354.000000)">
+                    <g id="content" transform="translate(20.000000, 22.000000)">
+                        <path d="M575.359928,2.63185096 C571.850966,-0.877110575 566.141159,-0.877456729 562.631851,2.63185096 C559.122543,6.14115866 559.122889,11.8506202 562.631851,15.3599279 C566.140813,18.8692356 571.85062,18.8692356 575.359928,15.3599279 C578.868889,11.8506202 578.868889,6.1408125 575.359928,2.63185096 Z M572.545005,12.5450048 C572.274659,12.815351 571.836428,12.815351 571.566082,12.5450048 L568.995889,9.9748125 L566.303505,12.6671971 C566.033159,12.9375433 565.594928,12.9375433 565.324582,12.6671971 C565.054236,12.396851 565.054236,11.9586202 565.324582,11.688274 L568.016966,8.99588942 L565.446774,6.42569712 C565.176428,6.15535096 565.176428,5.71677404 565.446774,5.44677404 C565.71712,5.17642789 566.155351,5.17642789 566.425697,5.44677404 L568.995889,8.01696635 L571.443543,5.5693125 C571.713889,5.29896635 572.15212,5.29896635 572.422466,5.5693125 C572.692813,5.83965866 572.692813,6.27788942 572.422466,6.54823558 L569.974813,8.99588942 L572.545005,11.5660817 C572.815351,11.8364279 572.815351,12.2746587 572.545005,12.5450048 Z" id="remove"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-required-no.svg b/cds-ui/designer-client/src/assets/img/icon-required-no.svg
new file mode 100644
index 000000000..6cbaa5bf4
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-required-no.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>no</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Table-Mapping-2" transform="translate(-83.000000, -244.000000)" fill="#C4CEDB" fill-rule="nonzero">
+            <g id="table">
+                <g id="body" transform="translate(0.000000, 19.000000)">
+                    <g id="columns" transform="translate(26.000000, 0.000000)">
+                        <g id="Required" transform="translate(35.000000, 0.000000)">
+                            <g id="no" transform="translate(22.000000, 225.000000)">
+                                <path d="M8.7350625,17.4706875 C3.918375,17.4706875 0,13.55175 0,8.7350625 C0,3.918375 3.918375,0 8.7350625,0 C13.55175,0 17.470125,3.918375 17.470125,8.7350625 C17.4706875,13.55175 13.55175,17.4706875 8.7350625,17.4706875 Z M8.7350625,0.997875 C4.4685,0.997875 0.997875,4.4690625 0.997875,8.7350625 C0.997875,13.0010625 4.4685,16.4716875 8.7350625,16.4716875 C13.0010625,16.4716875 16.4716875,13.0010625 16.4716875,8.7350625 C16.4716875,4.4690625 13.0010625,0.997875 8.7350625,0.997875 Z" id="Shape"></path>
+                                <path d="M12.17925,9.234 L5.290875,9.234 C5.01525,9.234 4.791375,9.01125 4.791375,8.7350625 C4.791375,8.4594375 5.0146875,8.2355625 5.290875,8.2355625 L12.17925,8.2355625 C12.454875,8.2355625 12.6781875,8.4594375 12.6781875,8.7350625 C12.6781875,9.01125 12.4554375,9.234 12.17925,9.234 Z" id="Path"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-required-yes.svg b/cds-ui/designer-client/src/assets/img/icon-required-yes.svg
new file mode 100644
index 000000000..8adbeed61
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-required-yes.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>yes</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Table-Mapping-2" transform="translate(-83.000000, -76.000000)" fill="#66BB00" fill-rule="nonzero">
+            <g id="table">
+                <g id="body" transform="translate(0.000000, 19.000000)">
+                    <g id="columns" transform="translate(26.000000, 0.000000)">
+                        <g id="Required" transform="translate(35.000000, 0.000000)">
+                            <path d="M37.3639492,59.6360156 C35.6640742,57.9361758 33.4039844,57 31,57 C28.5959805,57 26.3358906,57.9361758 24.6360156,59.6360156 C22.9361758,61.3358906 22,63.5960156 22,66 C22,68.4039844 22.9361758,70.6640742 24.6360156,72.3639492 C26.3358906,74.0638242 28.5960156,75 31,75 C33.4039844,75 35.6640742,74.0638242 37.3639492,72.3639844 C39.0638242,70.6640742 40,68.4039844 40,66 C40,63.5960156 39.0638242,61.3359258 37.3639492,59.6360156 Z M35.2998203,63.8580352 L30.2701914,68.8876992 C30.1672187,68.9906719 30.0322539,69.0421406 29.8973242,69.0421406 C29.7623594,69.0421406 29.6273945,68.9906719 29.5244219,68.8876992 L26.7001797,66.0634922 C26.4942344,65.857582 26.4942344,65.5237031 26.7001797,65.3177227 C26.9060898,65.1117773 27.2400039,65.1117773 27.4459492,65.3177227 L29.8973242,67.7690625 L34.5540508,63.1122656 C34.7599609,62.9063203 35.093875,62.9063203 35.2998203,63.1122656 C35.5057656,63.3182109 35.5057656,63.6520898 35.2998203,63.8580352 Z" id="yes"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/img/icon-save-sm.svg b/cds-ui/designer-client/src/assets/img/icon-save-sm.svg
new file mode 100644
index 000000000..b508f5efc
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-save-sm.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="23px" viewBox="0 0 26 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Path</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-16.0%" y="-3.0%" width="132.0%" height="106.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.184313725   0 0 0 0 0.325490196   0 0 0 0 0.592156863  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sliding-actions---Package---Active" transform="translate(-37.000000, -36.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="sliding-actions" filter="url(#filter-1)">
+                <g id="save" transform="translate(30.000000, 25.000000)">
+                    <g id="btn">
+                        <g id="check" transform="translate(13.000000, 15.000000)">
+                            <path d="M5.36086387,10.6613874 C5.22722513,10.7958115 5.0448953,10.8708115 4.85549738,10.8708115 C4.66609947,10.8708115 4.48376963,10.7958115 4.3501309,10.6613874 L0.314136126,6.62473821 C-0.104712042,6.20589004 -0.104712042,5.52670157 0.314136126,5.10863876 L0.819502609,4.60314136 C1.23848169,4.18429319 1.91688481,4.18429319 2.33573298,4.60314136 L4.85549738,7.12303665 L11.664267,0.314136126 C12.0832461,-0.104712042 12.7623037,-0.104712042 13.1804974,0.314136126 L13.6858639,0.819633525 C14.104712,1.23848169 14.104712,1.91753925 13.6858639,2.33573298 L5.36086387,10.6613874 Z" id="Path"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file