diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-add-open-expanded-1-snap.png b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-add-open-expanded-1-snap.png index e49d0532..c1a040f0 100644 Binary files a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-add-open-expanded-1-snap.png and b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-add-open-expanded-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-expanded-1-snap.png b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-expanded-1-snap.png index 56194b1f..db8e9fee 100644 Binary files a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-expanded-1-snap.png and b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-expanded-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-metadata-expanded-1-snap.png b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-metadata-expanded-1-snap.png index 56194b1f..db8e9fee 100644 Binary files a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-metadata-expanded-1-snap.png and b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/tag-ui-js-tags-metadata-expanded-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap index 3fe86296..f2751cd1 100644 --- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap @@ -394,6 +394,42 @@ Array [

+, + .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; +} + +
+

+ 0 + Tag + s +

, .c1 { margin: 0; @@ -1900,6 +1936,42 @@ Array [

+, + .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; +} + +
+

+ 0 + Tag + s +

, .c1 { margin: 0; @@ -2539,6 +2611,42 @@ Array [

+, + .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; +} + +
+

+ 0 + Tag + s +

, .c1 { margin: 0; diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js index c3278e5c..37e8d324 100644 --- a/packages/my-joy-beta/src/containers/create-instance/tags.js +++ b/packages/my-joy-beta/src/containers/create-instance/tags.js @@ -34,54 +34,48 @@ export const Tags = ({ handleEdit }) => ( - } - > + <Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}> Tags {expanded ? ( - Tags can be used to identify your instances, group multiple instances - together, define firewall and affinity rules, and more.{' '} + Tags can be used to identify your instances, group multiple instances together, define + firewall and affinity rules, and more.{' '} + rel="noopener noreferrer"> Read the docs ) : null} - {proceeded ? ( - -

- {tags.length} Tag{tags.length === 1 ? '' : 's'} -

-
- ) : null} {proceeded || expanded ? ( - - - {tags.map(({ name, value }, index) => ( - handleRemoveTag(index))} - /> - ))} - - + + +

+ {tags.length} Tag{tags.length === 1 ? '' : 's'} +

+
+ + + {tags.map(({ name, value }, index) => ( + handleRemoveTag(index))} + /> + ))} + + +
) : null} {expanded && addOpen ? ( + onSubmit={handleAddTag}> {props => ( {expanded ? ( -