fix(my-joy-beta): display tags number when expanded

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

@@ -394,6 +394,42 @@ Array [
             </p>
         </div>
     </div>
+</div>,
+  .c1 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+.c0 {
+  margin-bottom: 1.5rem;
+}
+
+<div
+    className="c0"
+>
+    <h3
+        className="c1"
+    >
+        0
+         Tag
+        s
+    </h3>
 </div>,
   .c1 {
   margin: 0;
@@ -1900,6 +1936,42 @@ Array [
             </p>
         </div>
     </div>
+</div>,
+  .c1 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+.c0 {
+  margin-bottom: 1.5rem;
+}
+
+<div
+    className="c0"
+>
+    <h3
+        className="c1"
+    >
+        0
+         Tag
+        s
+    </h3>
 </div>,
   .c1 {
   margin: 0;
@@ -2539,6 +2611,42 @@ Array [
             </p>
         </div>
     </div>
+</div>,
+  .c1 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+.c0 {
+  margin-bottom: 1.5rem;
+}
+
+<div
+    className="c0"
+>
+    <h3
+        className="c1"
+    >
+        0
+         Tag
+        s
+    </h3>
 </div>,
   .c1 {
   margin: 0;

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

@@ -34,54 +34,48 @@ export const Tags = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title
+    <Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}>
-      id={step}
-      onClick={!expanded && !proceeded && handleEdit}
-      icon={<TagsIcon />}
-    >
       Tags
     </Title>
     {expanded ? (
       <Description>
-        Tags can be used to identify your instances, group multiple instances
+        Tags can be used to identify your instances, group multiple instances together, define
-        together, define firewall and affinity rules, and more.{' '}
+        firewall and affinity rules, and more.{' '}
         <a
           target="__blank"
           href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
-          rel="noopener noreferrer"
+          rel="noopener noreferrer">
-        >
           Read the docs
         </a>
       </Description>
     ) : null}
-    {proceeded ? (
-      <Margin bottom={4}>
-        <H3>
-          {tags.length} Tag{tags.length === 1 ? '' : 's'}
-        </H3>
-      </Margin>
-    ) : null}
     {proceeded || expanded ? (
-      <Margin bottom={4}>
+      <Fragment>
-        <TagList>
+        <Margin bottom={4}>
-          {tags.map(({ name, value }, index) => (
+          <H3>
-            <Tag
+            {tags.length} Tag{tags.length === 1 ? '' : 's'}
-              key={index}
+          </H3>
-              name={name}
+        </Margin>
-              value={value}
+        <Margin bottom={4}>
-              onRemoveClick={expanded && (() => handleRemoveTag(index))}
+          <TagList>
-            />
+            {tags.map(({ name, value }, index) => (
-          ))}
+              <Tag
-        </TagList>
+                key={index}
-      </Margin>
+                name={name}
+                value={value}
+                onRemoveClick={expanded && (() => handleRemoveTag(index))}
+              />
+            ))}
+          </TagList>
+        </Margin>
+      </Fragment>
     ) : null}
     {expanded && addOpen ? (
       <ReduxForm
         form={FORM_NAME_CREATE}
         destroyOnUnmount={false}
         forceUnregisterOnUnmount={true}
-        onSubmit={handleAddTag}
+        onSubmit={handleAddTag}>
-      >
         {props => (
           <KeyValue
             {...props}
@@ -97,11 +91,7 @@ export const Tags = ({
     <div>
       {expanded ? (
         <Margin bottom={4}>
-          <Button
+          <Button type="button" onClick={() => handleChangeAddOpen(true)} secondary>
-            type="button"
-            onClick={() => handleChangeAddOpen(true)}
-            secondary
-          >
             Add Tag
           </Button>
           <Button type="button" onClick={handleNext}>