feat(my-joy-beta): create instance step animations

package.json

@@ -65,7 +65,7 @@
     "yargs": "^10.0.3"
   },
   "resolutions": {
-    "styled-components": "3.1.3",
+    "styled-components": "3.1.4",
     "axios": "0.16.2",
     "follow-redirects": "1.4.1",
     "debug": "3.1.0",

packages/icons/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "remcalc": "^1.0.10",
     "rnd-id": "^2.0.2",
-    "styled-components": "^3.1.2"
+    "styled-components": "^3.1.4"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

packages/my-joy-beta/package.json

@@ -55,7 +55,8 @@
     "redux-actions": "^2.2.1",
     "redux-form": "^7.2.1",
     "remcalc": "^1.0.10",
-    "styled-components": "^3.1.2",
+    "scroll-to-element": "^2.0.0",
+    "styled-components": "^3.1.4",
     "styled-components-spacing": "^2.1.3",
     "styled-flex-component": "^2.1.0",
     "title-case": "^2.1.1"

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -100,6 +100,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -257,6 +258,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div
@@ -1789,6 +1791,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div
@@ -2259,6 +2262,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -4614,6 +4618,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap

@@ -100,6 +100,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -257,6 +258,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -413,6 +415,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div
@@ -748,11 +751,6 @@ Array [
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
 }
 
 .c1:focus {
@@ -781,23 +779,6 @@ Array [
   pointer-events: none;
 }
 
-.c1:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c1:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c0 {
   margin-bottom: 1.5rem;
 }
@@ -807,7 +788,6 @@ Array [
 >
     <button
         className="c1 c2 c3"
-        disabled={true}
         href=""
         onClick={undefined}
         type="button"
@@ -918,6 +898,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -1075,6 +1056,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div
@@ -1281,23 +1263,23 @@ Array [
   cursor: not-allowed;
 }
 
-.c17 {
+.c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c17 + p,
+.c16 + p,
-.c17 + small,
+.c16 + small,
-.c17 + h1,
+.c16 + h1,
-.c17 + h2,
+.c16 + h2,
-.c17 + label,
+.c16 + label,
-.c17 + h3,
+.c16 + h3,
-.c17 + h4,
+.c16 + h4,
-.c17 + h5,
+.c16 + h5,
-.c17 + div,
+.c16 + div,
-.c17 + span {
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1329,7 +1311,7 @@ Array [
   padding-left: 0.625rem;
 }
 
-.c13 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1337,20 +1319,20 @@ Array [
   margin: 0;
 }
 
-.c13 + p,
+.c12 + p,
-.c13 + small,
+.c12 + small,
-.c13 + h1,
+.c12 + h1,
-.c13 + h2,
+.c12 + h2,
-.c13 + label,
+.c12 + label,
-.c13 + h3,
+.c12 + h3,
-.c13 + h4,
+.c12 + h4,
-.c13 + h5,
+.c12 + h5,
-.c13 + div,
+.c12 + div,
-.c13 + span {
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c31 {
+.c30 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1360,16 +1342,16 @@ Array [
   color: rgb(255,255,255);
 }
 
-.c31 + p,
+.c30 + p,
-.c31 + small,
+.c30 + small,
-.c31 + h1,
+.c30 + h1,
-.c31 + h2,
+.c30 + h2,
-.c31 + label,
+.c30 + label,
-.c31 + h3,
+.c30 + h3,
-.c31 + h4,
+.c30 + h4,
-.c31 + h5,
+.c30 + h5,
-.c31 + div,
+.c30 + div,
-.c31 + span {
+.c30 + span {
   margin-top: 0.75rem;
 }
 
@@ -1547,7 +1529,7 @@ Array [
   color: inherit;
 }
 
-.c14 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1583,15 +1565,15 @@ Array [
   background-color: transparent;
 }
 
-.c14 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c14 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c24 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1619,7 +1601,7 @@ Array [
   flex: 0 0 2.875rem;
 }
 
-.c25 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1657,12 +1639,12 @@ Array [
   box-shadow: none;
 }
 
-.c25 button {
+.c24 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c26 {
+.c25 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1721,7 +1703,7 @@ Array [
   color: inherit;
 }
 
-.c28 {
+.c27 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1759,12 +1741,12 @@ Array [
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c28 button {
+.c27 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c29 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1820,7 +1802,7 @@ Array [
   box-shadow: none;
 }
 
-.c30 {
+.c29 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1956,7 +1938,7 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c20 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1972,7 +1954,7 @@ Array [
   flex-shrink: 1;
 }
 
-.c22 {
+.c21 {
   margin-right: 0.375rem;
 }
 
@@ -1980,33 +1962,28 @@ Array [
   margin-bottom: 1.5rem;
 }
 
-.c16 {
+.c15 {
   margin-bottom: 1.125rem;
 }
 
-.c19 {
+.c18 {
   margin-right: 1.5rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 1.125rem;
 }
 
-.c12 {
+.c14 {
-  padding-right: 0rem;
-  padding-left: 0rem;
-}
-
-.c15 {
   padding: 1.5rem;
 }
 
-.c27 {
+.c26 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2026,7 +2003,7 @@ Array [
   align-content: stretch;
 }
 
-.c21 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2133,50 +2110,46 @@ Array [
                             disabled={false}
                             name="card-header-meta"
                         >
-                            <div
+                            <h4
                                 className="c12"
                             >
-                                <h4
+                                name
-                                    className="c13"
+                            </h4>
-                                >
-                                    name
-                                </h4>
-                            </div>
                         </div>
                     </div>
                     <div
-                        className="c14"
+                        className="c13"
                         name="card-outlet"
                     >
                         <div
-                            className="c15"
+                            className="c14"
                         >
                             <div
-                                className="c16"
+                                className="c15"
                             >
                                 <p
-                                    className="c17"
+                                    className="c16"
                                 >
                                     description
                                 </p>
                             </div>
                             <div
-                                className="c18"
+                                className="c17"
                             >
                                 <div
-                                    className="c19"
+                                    className="c18"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c21"
+                                            className="c20"
                                         >
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <div
-                                                    className="c22"
+                                                    className="c21"
                                                 >
                                                     <svg
                                                         className=""
@@ -2199,10 +2172,10 @@ Array [
                                                 </div>
                                             </div>
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <p
-                                                    className="c17"
+                                                    className="c16"
                                                 >
                                                     Private
                                                 </p>
@@ -2211,19 +2184,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c19"
+                                    className="c18"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c21"
+                                            className="c20"
                                         >
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <div
-                                                    className="c22"
+                                                    className="c21"
                                                 >
                                                     <svg
                                                         height="16.2"
@@ -2239,10 +2212,10 @@ Array [
                                                 </div>
                                             </div>
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <p
-                                                    className="c17"
+                                                    className="c16"
                                                 >
                                                     Fabric network
                                                 </p>
@@ -2250,165 +2223,31 @@ Array [
                                         </div>
                                     </div>
                                 </div>
-                                <div
-                                    className="c19"
-                                >
-                                    <div
-                                        className="c20"
-                                    >
-                                        <div
-                                            className="c21"
-                                        >
-                                            <div
-                                                className="c20"
-                                            >
-                                                <div
-                                                    className="c22"
-                                                >
-                                                    <svg
-                                                        className=""
-                                                        height="17"
-                                                        innerRef={undefined}
-                                                        style={
-                                                            Object {
-                                                                "transform": "rotate(0deg)",
-                                                              }
-                                                        }
-                                                        version="1.1"
-                                                        viewBox="0 0 17 17"
-                                                        width="17"
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                                                    >
-                                                        <g
-                                                            transform="translate(-1105 974)"
-                                                        >
-                                                            <g>
-                                                                <g>
-                                                                    <use
-                                                                        fill="rgba(73, 73, 73, 1)"
-                                                                        transform="translate(1105 -974)"
-                                                                        xlinkHref="#c"
-                                                                    />
-                                                                </g>
-                                                                <g>
-                                                                    <use
-                                                                        fill="rgba(73, 73, 73, 1)"
-                                                                        transform="translate(1111 -974)"
-                                                                        xlinkHref="#c"
-                                                                    />
-                                                                </g>
-                                                                <g>
-                                                                    <use
-                                                                        fill="rgba(73, 73, 73, 1)"
-                                                                        transform="translate(1117 -974)"
-                                                                        xlinkHref="#c"
-                                                                    />
-                                                                </g>
-                                                                <g>
-                                                                    <use
-                                                                        fill="rgba(73, 73, 73, 1)"
-                                                                        transform="translate(1105 -968)"
-                                                                        xlinkHref="#c"
-                                                                    />
-                                                                </g>
-                                                                <g>
-                                                                    <g>
-                                                                        <use
-                                                                            fill="rgba(73, 73, 73, 1)"
-                                                                            transform="translate(1111 -968)"
-                                                                            xlinkHref="#d"
-                                                                        />
-                                                                    </g>
-                                                                </g>
-                                                                <g>
-                                                                    <g>
-                                                                        <use
-                                                                            fill="rgba(73, 73, 73, 1)"
-                                                                            transform="translate(1117 -968)"
-                                                                            xlinkHref="#d"
-                                                                        />
-                                                                    </g>
-                                                                </g>
-                                                                <g>
-                                                                    <g>
-                                                                        <use
-                                                                            fill="rgba(73, 73, 73, 1)"
-                                                                            transform="translate(1105 -962)"
-                                                                            xlinkHref="#d"
-                                                                        />
-                                                                    </g>
-                                                                </g>
-                                                                <g>
-                                                                    <g>
-                                                                        <use
-                                                                            fill="rgba(73, 73, 73, 1)"
-                                                                            transform="translate(1111 -962)"
-                                                                            xlinkHref="#d"
-                                                                        />
-                                                                    </g>
-                                                                </g>
-                                                                <g>
-                                                                    <g>
-                                                                        <use
-                                                                            fill="rgba(73, 73, 73, 1)"
-                                                                            transform="translate(1117 -962)"
-                                                                            xlinkHref="#d"
-                                                                        />
-                                                                    </g>
-                                                                </g>
-                                                            </g>
-                                                        </g>
-                                                        <defs>
-                                                            <path
-                                                                d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
-                                                                id="c"
-                                                            />
-                                                            <path
-                                                                d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                                                                id="d"
-                                                            />
-                                                        </defs>
-                                                    </svg>
-                                                </div>
-                                            </div>
-                                            <div
-                                                className="c20"
-                                            >
-                                                <p
-                                                    className="c17"
-                                                >
-                                                    0 instances
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
                             </div>
                             <div
-                                className="c23"
+                                className="c22"
                             >
                                 <div
-                                    className="c24"
+                                    className="c23"
                                     disabled={false}
                                     name="card"
                                 >
                                     <div
-                                        className="c25"
+                                        className="c24"
                                         disabled={false}
                                         name="card-header"
                                         onClick={[Function]}
                                     >
                                         <div
-                                            className="c26"
+                                            className="c25"
                                             disabled={false}
                                             name="card-header-meta"
                                         >
                                             <div
-                                                className="c27"
+                                                className="c26"
                                             >
                                                 <p
-                                                    className="c17"
+                                                    className="c16"
                                                 >
                                                     Network information
                                                 </p>
@@ -2462,12 +2301,12 @@ Array [
                     name="card"
                 >
                     <div
-                        className="c28"
+                        className="c27"
                         disabled={false}
                         name="card-header"
                     >
                         <div
-                            className="c29"
+                            className="c28"
                             disabled={false}
                             name="card-header-box"
                         >
@@ -2505,54 +2344,50 @@ Array [
                             </div>
                         </div>
                         <div
-                            className="c30"
+                            className="c29"
                             disabled={false}
                             name="card-header-meta"
                         >
-                            <div
+                            <h4
-                                className="c12"
+                                className="c30"
                             >
-                                <h4
+                                name2
-                                    className="c31"
+                            </h4>
-                                >
-                                    name2
-                                </h4>
-                            </div>
                         </div>
                     </div>
                     <div
-                        className="c14"
+                        className="c13"
                         name="card-outlet"
                     >
                         <div
-                            className="c15"
+                            className="c14"
                         >
                             <div
-                                className="c16"
+                                className="c15"
                             >
                                 <p
-                                    className="c17"
+                                    className="c16"
                                 >
                                     description2
                                 </p>
                             </div>
                             <div
-                                className="c18"
+                                className="c17"
                             >
                                 <div
-                                    className="c19"
+                                    className="c18"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c21"
+                                            className="c20"
                                         >
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <div
-                                                    className="c22"
+                                                    className="c21"
                                                 >
                                                     <svg
                                                         className=""
@@ -2575,10 +2410,10 @@ Array [
                                                 </div>
                                             </div>
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <p
-                                                    className="c17"
+                                                    className="c16"
                                                 >
                                                     Private
                                                 </p>
@@ -2587,19 +2422,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c19"
+                                    className="c18"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c21"
+                                            className="c20"
                                         >
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <div
-                                                    className="c22"
+                                                    className="c21"
                                                 >
                                                     <svg
                                                         height="13"
@@ -2615,10 +2450,10 @@ Array [
                                                 </div>
                                             </div>
                                             <div
-                                                className="c20"
+                                                className="c19"
                                             >
                                                 <p
-                                                    className="c17"
+                                                    className="c16"
                                                 >
                                                     Data center network
                                                 </p>
@@ -2709,11 +2544,6 @@ Array [
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
 }
 
 .c1:focus {
@@ -2742,23 +2572,6 @@ Array [
   pointer-events: none;
 }
 
-.c1:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c1:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c0 {
   margin-bottom: 1.5rem;
 }
@@ -2768,7 +2581,6 @@ Array [
 >
     <button
         className="c1 c2 c3"
-        disabled={true}
         href=""
         onClick={undefined}
         type="button"
@@ -2879,6 +2691,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -100,6 +100,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -250,6 +251,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div
@@ -1755,6 +1757,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div
@@ -2242,6 +2245,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -2392,6 +2396,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap

@@ -100,6 +100,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -1214,6 +1215,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -2634,6 +2636,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -3090,6 +3093,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -4302,6 +4306,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -5656,6 +5661,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={undefined}
 >
     <div
@@ -7010,6 +7016,7 @@ Array [
 
 <div
     className=""
+    id={undefined}
     onClick={false}
 >
     <div

packages/my-joy-beta/src/containers/create-instance/affinity.js

@@ -12,8 +12,9 @@ import { AffinityIcon, Button, H3, Divider } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
 import { Rule, Header } from '@components/create-instance/affinity';
-import Description from '@components/description';
 import KeyValue from '@components/key-value';
+import Description from '@components/description';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
@@ -43,10 +44,12 @@ export const Affinity = ({
   handleChangeAddOpen,
   handleNext,
   handleEdit,
-  rule
+  rule,
+  step
 }) => (
   <Fragment>
     <Title
+      id={step}
       onClick={!expanded && !proceeded && handleEdit}
       icon={<AffinityIcon />}
     >
@@ -149,6 +152,7 @@ export const Affinity = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   connect(({ values, form }, ownProps) => ({
     proceeded: get(values, 'create-instance-affinity-proceeded', false),
     addOpen: get(values, 'create-instance-affinity-add-open', false),

packages/my-joy-beta/src/containers/create-instance/animatedWrapper.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import scrollToElement from 'scroll-to-element';
+import ReactDOM from 'react-dom';
+
+const ANIMATION_TIME = 400;
+
+function slideDown(el, timing) {
+  const { style } = el;
+  const INITIAL = 'initial';
+  const HIDDEN = 'hidden';
+  timing = timing || `${ANIMATION_TIME}ms ease-out`;
+
+  // Get element height
+  style.transition = INITIAL;
+  style.visibility = HIDDEN;
+  style.maxHeight = INITIAL;
+  const height = el.offsetHeight + 'px';
+  style.removeProperty('visibility');
+  style.maxHeight = '0';
+  style.overflow = HIDDEN;
+
+  // Begin transition
+  style.transition = `max-height ${timing}, opacity ${timing}`;
+
+  requestAnimationFrame(() => {
+    style.maxHeight = height;
+    style.opacity = '1';
+  });
+
+  window.setTimeout(() => {
+    style.removeProperty('overflow');
+    style.removeProperty('max-height');
+  }, 300);
+}
+
+const AnimatedWrapper = WrappedComponent =>
+  class AnimatedWrapper extends Component {
+    componentDidUpdate() {
+      const { match, step } = this.props;
+      if (match.params.step === step) {
+        slideDown(this.wrapper);
+        scrollToElement(this.wrapper, {
+          offset: -50
+        });
+      }
+    }
+
+    render() {
+      return (
+        <div
+          ref={w => {
+            this.wrapper = w;
+          }}
+        >
+          <WrappedComponent {...this.props} />
+        </div>
+      );
+    }
+  };
+export default AnimatedWrapper;

packages/my-joy-beta/src/containers/create-instance/cns.js

@@ -14,6 +14,7 @@ import Cns, { Footer, AddServiceForm } from '@components/cns';
 import Tag from '@components/tags';
 import Title from '@components/create-instance/title';
 import Description from '@components/description';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 import GetAccount from '@graphql/get-account.gql';
 
 const CNS_FORM = 'create-instance-cns';
@@ -30,10 +31,15 @@ const CNSContainer = ({
   handleEdit,
   handleToggleCnsEnabled,
   handleAddService,
-  handleRemoveService
+  handleRemoveService,
+  step
 }) => (
   <Fragment>
-    <Title onClick={!expanded && !proceeded && handleEdit} icon={<CnsIcon />}>
+    <Title
+      id={step}
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<CnsIcon />}
+    >
       Container Name Service
     </Title>
     {expanded ? (

packages/my-joy-beta/src/containers/create-instance/firewall.js

@@ -14,6 +14,7 @@ import { StatusLoader, FirewallIcon, H3, Button } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import Description from '@components/description';
 import FirewallForm from '@components/firewall';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 import ListFwRules from '@graphql/list-fw-rules.gql';
 
 const FORM_NAME = 'CREATE-INSTANCE-FIREWALL';
@@ -26,10 +27,12 @@ const Firewall = ({
   loading = false,
   enabled = false,
   handleNext,
-  handleEdit
+  handleEdit,
+  step
 }) => (
   <Fragment>
     <Title
+      id={step}
       onClick={!expanded && !proceeded && handleEdit}
       icon={<FirewallIcon />}
     >
@@ -94,6 +97,7 @@ const Firewall = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   connect(
     ({ form, values }, ownProps) => ({
       ...ownProps,

packages/my-joy-beta/src/containers/create-instance/image.js

@@ -17,6 +17,7 @@ import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
 import Description from '@components/description';
 import Image, { Preview, ImageType } from '@components/create-instance/image';
 import Title from '@components/create-instance/title';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 import imageData from '@data/images-map.json';
 import GetImages from '@graphql/get-images.gql';
 
@@ -29,10 +30,12 @@ const ImageContainer = ({
   handleSelectLatest,
   loading,
   images,
-  vms
+  vms,
+  step
 }) => (
   <Fragment>
     <Title
+      id={step}
       onClick={!expanded && !image.id && handleEdit}
       icon={<InstanceTypeIcon />}
     >
@@ -103,6 +106,7 @@ const ImageContainer = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   connect(
     ({ form, values }, ownProps) => {
       return {

packages/my-joy-beta/src/containers/create-instance/index.js

@@ -36,21 +36,42 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
       <H2>Create Instances</H2>
     </Margin>
     <Margin bottom={4}>
-      <Name history={history} match={match} expanded={step === 'name'} />
+      <Name
+        history={history}
+        match={match}
+        step="name"
+        expanded={step === 'name'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <Image history={history} match={match} expanded={step === 'image'} />
+      <Image
+        history={history}
+        match={match}
+        step="image"
+        expanded={step === 'image'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <Package history={history} match={match} expanded={step === 'package'} />
+      <Package
+        history={history}
+        match={match}
+        step="package"
+        expanded={step === 'package'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <Tags history={history} match={match} expanded={step === 'tags'} />
+      <Tags
+        history={history}
+        match={match}
+        step="tags"
+        expanded={step === 'tags'}
+      />
     </Margin>
     <Margin bottom={4}>
       <Metadata
         history={history}
         match={match}
+        step="metadata"
         expanded={step === 'metadata'}
       />
     </Margin>
@@ -58,6 +79,7 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
       <UserScript
         history={history}
         match={match}
+        step="user-script"
         expanded={step === 'user-script'}
       />
     </Margin>
@@ -65,6 +87,7 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
       <Networks
         history={history}
         match={match}
+        step="networks"
         expanded={step === 'networks'}
       />
     </Margin>
@@ -72,16 +95,23 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
       <Firewall
         history={history}
         match={match}
+        step="firewall"
         expanded={step === 'firewall'}
       />
     </Margin>
     <Margin bottom={4}>
-      <CNS history={history} match={match} expanded={step === 'cns'} />
+      <CNS
+        history={history}
+        match={match}
+        step="cns"
+        expanded={step === 'cns'}
+      />
     </Margin>
     <Margin bottom={4}>
       <Affinity
         history={history}
         match={match}
+        step="affinity"
         expanded={step === 'affinity'}
       />
     </Margin>

packages/my-joy-beta/src/containers/create-instance/metadata.js

@@ -12,6 +12,7 @@ import { MetadataIcon, Button, H3 } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import Description from '@components/description';
 import KeyValue from '@components/key-value';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-METADATA-EDIT-${i}`;
@@ -28,10 +29,13 @@ export const Metadata = ({
   handleCancelEdit,
   handleChangeAddOpen,
   handleNext,
-  handleEdit
+  handleEdit,
+  id,
+  step
 }) => (
   <Fragment>
     <Title
+      id={step}
       onClick={!expanded && !proceeded && handleEdit}
       icon={<MetadataIcon />}
     >
@@ -129,6 +133,7 @@ export const Metadata = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   connect(({ values }, ownProps) => ({
     proceeded: get(values, 'create-instance-metadata-proceeded', false),
     addOpen: get(values, 'create-instance-metadata-add-open', false),

packages/my-joy-beta/src/containers/create-instance/name.js

@@ -14,6 +14,7 @@ import { NameIcon, H3, Button } from 'joyent-ui-toolkit';
 import Name from '@components/create-instance/name';
 import Description from '@components/description';
 import Title from '@components/create-instance/title';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 import GetInstance from '@graphql/get-instance-small.gql';
 import GetRandomName from '@graphql/get-random-name.gql';
 import { client } from '@state/store';
@@ -30,10 +31,15 @@ const NameContainer = ({
   shouldAsyncValidate,
   handleNext,
   handleRandomize,
-  handleEdit
+  handleEdit,
+  step
 }) => (
   <Fragment>
-    <Title onClick={!expanded && !name && handleEdit} icon={<NameIcon />}>
+    <Title
+      id={step}
+      onClick={!expanded && !name && handleEdit}
+      icon={<NameIcon />}
+    >
       Instance name
     </Title>
     {expanded ? (
@@ -73,6 +79,7 @@ const NameContainer = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   graphql(GetRandomName, {
     fetchPolicy: 'network-only',
     props: ({ data }) => ({

packages/my-joy-beta/src/containers/create-instance/networks.js

@@ -10,9 +10,10 @@ import get from 'lodash.get';
 
 import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
 
-import Network from '@components/network';
 import Description from '@components/description';
 import Title from '@components/create-instance/title';
+import Network from '@components/create-instance/network';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 import ListNetworks from '@graphql/list-networks.gql';
 
 const FORM_NAME = 'CREATE-INSTANCE-NETWORKS';
@@ -26,10 +27,12 @@ export const Networks = ({
   setInfoExpanded,
   setMachinesExpanded,
   handleNext,
-  handleEdit
+  handleEdit,
+  step
 }) => (
   <Fragment>
     <Title
+      id={step}
       onClick={!expanded && !proceeded && handleEdit}
       icon={<NetworkIcon />}
     >
@@ -88,7 +91,7 @@ export const Networks = ({
     ) : null}
     <Margin bottom={4}>
       {expanded ? (
-        <Button type="button" disabled={!selected.length} onClick={handleNext}>
+        <Button type="button" onClick={handleNext}>
           Next
         </Button>
       ) : proceeded ? (
@@ -101,6 +104,7 @@ export const Networks = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   graphql(ListNetworks, {
     props: ({ data }) => {
       const { networks = [], loading = false, error = null, refetch } = data;
@@ -142,8 +146,22 @@ export default compose(
 
       return {
         proceeded: get(values, 'create-instance-networks-proceeded', false),
-        selected: _networks.filter(({ selected }) => selected),
+        networks: networks
-        networks: _networks
+          .map(({ id, name, ...network }) => ({
+            ...network,
+            name,
+            selected:
+              empty(id) && name === 'Joyent-SDC-Public'
+                ? true
+                : Boolean(selected[id]),
+            infoExpanded: get(
+              values,
+              `create-instance-networks-${id}-expanded`,
+              false
+            ),
+            id
+          }))
+          .sort((a, b) => a.name < b.name)
       };
     },
     (dispatch, { history }) => ({

packages/my-joy-beta/src/containers/create-instance/package.js

@@ -13,7 +13,6 @@ import constantCase from 'constant-case';
 import { reset } from 'redux-form';
 
 import { PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
-
 import {
   Filters,
   Packages,
@@ -21,6 +20,7 @@ import {
   Overview
 } from '@components/create-instance/package';
 
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 import Title from '@components/create-instance/title';
 import Description from '@components/description';
 import getPackages from '@graphql/get-packages.gql';
@@ -40,10 +40,12 @@ const PackageContainer = ({
   sortOrder,
   handleSortBy,
   sortBy,
-  resetFilters
+  resetFilters,
+  step
 }) => (
   <Fragment>
     <Title
+      id={step}
       onClick={!expanded && !selected.id && handleEdit}
       icon={<PackageIcon />}
     >
@@ -117,6 +119,7 @@ const PackageContainer = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   graphql(getPackages, {
     props: ({ data: { loading, packages = [] } }) => ({
       loading,

packages/my-joy-beta/src/containers/create-instance/tags.js

@@ -10,9 +10,10 @@ import get from 'lodash.get';
 import { TagsIcon, Button, H3, TagList } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
+import Tag from '@components/tags';
 import KeyValue from '@components/key-value';
 import Description from '@components/description';
-import Tag from '@components/tags';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
@@ -29,10 +30,15 @@ export const Tags = ({
   handleCancelEdit,
   handleChangeAddOpen,
   handleNext,
+  step,
   handleEdit
 }) => (
   <Fragment>
-    <Title onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}>
+    <Title
+      id={step}
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<TagsIcon />}
+    >
       Tags
     </Title>
     {expanded ? (
@@ -114,6 +120,7 @@ export const Tags = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   connect(({ values }, ownProps) => ({
     proceeded: get(values, 'create-instance-tags-proceeded', false),
     addOpen: get(values, 'create-instance-tags-add-open', false),

packages/my-joy-beta/src/containers/create-instance/user-script.js

@@ -12,6 +12,7 @@ import { ScriptIcon, Button } from 'joyent-ui-toolkit';
 import KeyValue from '@components/key-value';
 import Description from '@components/description';
 import Title from '@components/create-instance/title';
+import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
 
 const FORM_NAME = 'create-instance-user-script';
 
@@ -26,10 +27,11 @@ export const UserScript = ({
   handleSubmit,
   handleRemove,
   handleNext,
-  handleEdit
+  handleEdit,
+  step
 }) => (
   <Fragment>
-    <Title onClick={!proceeded && handleEdit} icon={<ScriptIcon />}>
+    <Title id={step} onClick={!proceeded && handleEdit} icon={<ScriptIcon />}>
       User Script
     </Title>
     {expanded ? (
@@ -90,6 +92,7 @@ export const UserScript = ({
 );
 
 export default compose(
+  AnimatedWrapper,
   connect(
     ({ values }, ownProps) => {
       const script = get(values, 'create-instance-user-script', {

packages/my-joy-beta/src/mocks/__aliases__.js

@@ -3,5 +3,6 @@ module.exports = {
   '^redux-form$': '<rootDir>/src/mocks/redux-form',
   '^react-responsive$': '<rootDir>/src/mocks/react-responsive',
   '^react-router-dom$': '<rootDir>/src/mocks/react-router-dom',
-  '^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form'
+  '^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form',
+  '^scroll-to-element': '<rootDir>/src/mocks/scroll-to-element'
 };

packages/my-joy-beta/src/mocks/scroll-to-element.js

@@ -0,0 +1 @@
+export default () => null;

packages/ui-toolkit/package.json

@@ -38,7 +38,7 @@
     "react-styled-flexboxgrid": "^2.1.1",
     "remcalc": "^1.0.10",
     "rnd-id": "^2.0.2",
-    "styled-components": "^3.1.2",
+    "styled-components": "^3.1.4",
     "styled-is": "^1.1.2",
     "unitcalc": "^1.1.2"
   },

prototypes/cra-boilerplate/package.json

@@ -28,7 +28,7 @@
     "react-scripts": "1.0.17",
     "redux": "^3.7.2",
     "redux-form": "^7.1.2",
-    "styled-components": "^2.3.0"
+    "styled-components": "^3.1.4"
   },
   "devDependencies": {
     "babel-preset-joyent-portal": "^6.0.1",

yarn.lock

@@ -2565,10 +2565,41 @@ compare-func@^1.3.1:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
 
+component-clone@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/component-clone/-/component-clone-0.2.2.tgz#c7f5979822880fad8cfb0962ba29186d061ee04f"
+  dependencies:
+    component-type "*"
+
+component-emitter@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
+
 component-emitter@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
 
+component-raf@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-raf/-/component-raf-1.2.0.tgz#b2bc72d43f1b014fde7a4b3c447c764bc73ccbaa"
+
+component-tween@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-tween/-/component-tween-1.2.0.tgz#cc39ce5dbab05b52825f41d1947638a0b01b2b8a"
+  dependencies:
+    component-clone "0.2.2"
+    component-emitter "1.2.0"
+    component-type "1.1.0"
+    ease-component "1.0.0"
+
+component-type@*:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.2.1.tgz#8a47901700238e4fc32269771230226f24b415a9"
+
+component-type@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.1.0.tgz#95b666aad53e5c8d1f2be135c45b5d499197c0c5"
+
 compressible@~2.0.11:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
@@ -3518,6 +3549,10 @@ duplicate-package-checker-webpack-plugin@^2.1.0:
     lodash "^4.17.4"
     semver "^5.4.1"
 
+ease-component@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ease-component/-/ease-component-1.0.0.tgz#b375726db0b5b04595b77440396fec7daa5d77c9"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -9694,6 +9729,19 @@ schema-utils@^0.4.2:
     ajv "^5.0.0"
     ajv-keywords "^2.1.0"
 
+scroll-to-element@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/scroll-to-element/-/scroll-to-element-2.0.0.tgz#3467330e3384743b7295ac64b30279990c5ac164"
+  dependencies:
+    scroll-to "0.0.2"
+
+scroll-to@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/scroll-to/-/scroll-to-0.0.2.tgz#936d398a9133660a2492145c2c0081dfcb0728f3"
+  dependencies:
+    component-raf "1.2.0"
+    component-tween "1.2.0"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -10306,9 +10354,9 @@ styled-components-spacing@^2.1.3:
     react-create-component-from-tag-prop "^1.2.1"
     styled-components-breakpoint "^1.0.0-preview.3"
 
-styled-components@2.2.4, styled-components@3.1.3, styled-components@^3.1.2:
+styled-components@2.2.4, styled-components@3.1.4, styled-components@^3.1.4:
-  version "3.1.3"
+  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.3.tgz#dae16953fdfc694b7341c43934145c360da0accb"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.4.tgz#1bdc1409c9bacafee3510c573d23b73039b0d875"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"