From 780814aef980883bc966bf290afff9ca426b529d Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 18 Jan 2018 14:42:55 +0100 Subject: [PATCH] fix(my-joy-beta): create instance - fix image ui fixes #1005 --- packages/my-joy-beta/src/assets/alpine.svg | 2 +- packages/my-joy-beta/src/assets/apache.svg | 2 +- packages/my-joy-beta/src/assets/brocade.svg | 2 +- packages/my-joy-beta/src/assets/cassandra.svg | 2 +- packages/my-joy-beta/src/assets/centos.svg | 2 +- packages/my-joy-beta/src/assets/couchbase.svg | 2 +- packages/my-joy-beta/src/assets/debian.svg | 2 +- packages/my-joy-beta/src/assets/freebsd.svg | 2 +- packages/my-joy-beta/src/assets/ghost.svg | 2 +- packages/my-joy-beta/src/assets/java.svg | 2 +- packages/my-joy-beta/src/assets/mariadb.svg | 2 +- packages/my-joy-beta/src/assets/mongodb.svg | 2 +- packages/my-joy-beta/src/assets/multiarch.svg | 2 +- packages/my-joy-beta/src/assets/mysql.svg | 2 +- packages/my-joy-beta/src/assets/nginx.svg | 2 +- packages/my-joy-beta/src/assets/openbsd.svg | 2 +- packages/my-joy-beta/src/assets/percona.svg | 2 +- .../my-joy-beta/src/assets/placeholder.svg | 2 +- .../my-joy-beta/src/assets/postgresql.svg | 2 +- packages/my-joy-beta/src/assets/redis.svg | 2 +- packages/my-joy-beta/src/assets/scylladb.svg | 2 +- packages/my-joy-beta/src/assets/smart.svg | 2 +- packages/my-joy-beta/src/assets/ubuntu.svg | 2 +- packages/my-joy-beta/src/assets/windows.svg | 2 +- .../__snapshots__/images.spec.js.snap | 27 +++++++------------ .../src/components/create-instance/image.js | 24 ++++++++++++----- .../__tests__/__snapshots__/form.spec.js.snap | 27 +++++++------------ packages/ui-toolkit/src/form/toggle.js | 19 ++++--------- 28 files changed, 67 insertions(+), 78 deletions(-) diff --git a/packages/my-joy-beta/src/assets/alpine.svg b/packages/my-joy-beta/src/assets/alpine.svg index 7c17576d..a592a2e7 100644 --- a/packages/my-joy-beta/src/assets/alpine.svg +++ b/packages/my-joy-beta/src/assets/alpine.svg @@ -1 +1 @@ -Artboard 1 copy 6 \ No newline at end of file +Artboard 1 copy 6 diff --git a/packages/my-joy-beta/src/assets/apache.svg b/packages/my-joy-beta/src/assets/apache.svg index c86491ed..6c9a8557 100644 --- a/packages/my-joy-beta/src/assets/apache.svg +++ b/packages/my-joy-beta/src/assets/apache.svg @@ -1 +1 @@ -Artboard 1 copy 13 \ No newline at end of file +Artboard 1 copy 13 diff --git a/packages/my-joy-beta/src/assets/brocade.svg b/packages/my-joy-beta/src/assets/brocade.svg index 905287f5..ce29348d 100644 --- a/packages/my-joy-beta/src/assets/brocade.svg +++ b/packages/my-joy-beta/src/assets/brocade.svg @@ -1 +1 @@ -Artboard 1 copy 14 \ No newline at end of file +Artboard 1 copy 14 diff --git a/packages/my-joy-beta/src/assets/cassandra.svg b/packages/my-joy-beta/src/assets/cassandra.svg index 811cb510..2c7c2241 100644 --- a/packages/my-joy-beta/src/assets/cassandra.svg +++ b/packages/my-joy-beta/src/assets/cassandra.svg @@ -1 +1 @@ -Artboard 1 copy 15 \ No newline at end of file +Artboard 1 copy 15 diff --git a/packages/my-joy-beta/src/assets/centos.svg b/packages/my-joy-beta/src/assets/centos.svg index a73f2240..49e5147c 100644 --- a/packages/my-joy-beta/src/assets/centos.svg +++ b/packages/my-joy-beta/src/assets/centos.svg @@ -1 +1 @@ -Artboard 1 \ No newline at end of file +Artboard 1 diff --git a/packages/my-joy-beta/src/assets/couchbase.svg b/packages/my-joy-beta/src/assets/couchbase.svg index d5522aa9..8635fb90 100644 --- a/packages/my-joy-beta/src/assets/couchbase.svg +++ b/packages/my-joy-beta/src/assets/couchbase.svg @@ -1 +1 @@ -Artboard 1 copy 7 \ No newline at end of file +Artboard 1 copy 7 diff --git a/packages/my-joy-beta/src/assets/debian.svg b/packages/my-joy-beta/src/assets/debian.svg index e0e44bb4..abf4cb00 100644 --- a/packages/my-joy-beta/src/assets/debian.svg +++ b/packages/my-joy-beta/src/assets/debian.svg @@ -1 +1 @@ -Artboard 1 copy \ No newline at end of file +Artboard 1 copy diff --git a/packages/my-joy-beta/src/assets/freebsd.svg b/packages/my-joy-beta/src/assets/freebsd.svg index d3133098..dcfdb7de 100644 --- a/packages/my-joy-beta/src/assets/freebsd.svg +++ b/packages/my-joy-beta/src/assets/freebsd.svg @@ -1 +1 @@ -Artboard 1 copy 3 \ No newline at end of file +Artboard 1 copy 3 diff --git a/packages/my-joy-beta/src/assets/ghost.svg b/packages/my-joy-beta/src/assets/ghost.svg index 5042e1ab..c0a69bf3 100644 --- a/packages/my-joy-beta/src/assets/ghost.svg +++ b/packages/my-joy-beta/src/assets/ghost.svg @@ -1 +1 @@ -Artboard 1 copy 16 \ No newline at end of file +Artboard 1 copy 16 diff --git a/packages/my-joy-beta/src/assets/java.svg b/packages/my-joy-beta/src/assets/java.svg index fa4beb77..1e0b7e7a 100644 --- a/packages/my-joy-beta/src/assets/java.svg +++ b/packages/my-joy-beta/src/assets/java.svg @@ -1 +1 @@ -Artboard 1 copy 17 \ No newline at end of file +Artboard 1 copy 17 diff --git a/packages/my-joy-beta/src/assets/mariadb.svg b/packages/my-joy-beta/src/assets/mariadb.svg index ee5018cb..a514e5e7 100644 --- a/packages/my-joy-beta/src/assets/mariadb.svg +++ b/packages/my-joy-beta/src/assets/mariadb.svg @@ -1 +1 @@ -Artboard 1 copy 18 \ No newline at end of file +Artboard 1 copy 18 diff --git a/packages/my-joy-beta/src/assets/mongodb.svg b/packages/my-joy-beta/src/assets/mongodb.svg index 666da605..45d0d70a 100644 --- a/packages/my-joy-beta/src/assets/mongodb.svg +++ b/packages/my-joy-beta/src/assets/mongodb.svg @@ -1 +1 @@ -Artboard 1 copy 8 \ No newline at end of file +Artboard 1 copy 8 diff --git a/packages/my-joy-beta/src/assets/multiarch.svg b/packages/my-joy-beta/src/assets/multiarch.svg index d4cea682..ec7c989f 100644 --- a/packages/my-joy-beta/src/assets/multiarch.svg +++ b/packages/my-joy-beta/src/assets/multiarch.svg @@ -1 +1 @@ -Artboard 1 copy 43 \ No newline at end of file +Artboard 1 copy 43 diff --git a/packages/my-joy-beta/src/assets/mysql.svg b/packages/my-joy-beta/src/assets/mysql.svg index 0cf2aa5a..febd4b5c 100644 --- a/packages/my-joy-beta/src/assets/mysql.svg +++ b/packages/my-joy-beta/src/assets/mysql.svg @@ -1 +1 @@ -Artboard 1 copy 19 \ No newline at end of file +Artboard 1 copy 19 diff --git a/packages/my-joy-beta/src/assets/nginx.svg b/packages/my-joy-beta/src/assets/nginx.svg index 7450dca1..7e833f7c 100644 --- a/packages/my-joy-beta/src/assets/nginx.svg +++ b/packages/my-joy-beta/src/assets/nginx.svg @@ -1 +1 @@ -Artboard 1 copy 9 \ No newline at end of file +Artboard 1 copy 9 diff --git a/packages/my-joy-beta/src/assets/openbsd.svg b/packages/my-joy-beta/src/assets/openbsd.svg index 546bf941..09b50623 100644 --- a/packages/my-joy-beta/src/assets/openbsd.svg +++ b/packages/my-joy-beta/src/assets/openbsd.svg @@ -1 +1 @@ -Artboard 1 copy 46 \ No newline at end of file +Artboard 1 copy 46 diff --git a/packages/my-joy-beta/src/assets/percona.svg b/packages/my-joy-beta/src/assets/percona.svg index bd3f5312..cc9778a0 100644 --- a/packages/my-joy-beta/src/assets/percona.svg +++ b/packages/my-joy-beta/src/assets/percona.svg @@ -1 +1 @@ -Artboard 1 copy 11 \ No newline at end of file +Artboard 1 copy 11 diff --git a/packages/my-joy-beta/src/assets/placeholder.svg b/packages/my-joy-beta/src/assets/placeholder.svg index 5f0d674d..3e8734b6 100644 --- a/packages/my-joy-beta/src/assets/placeholder.svg +++ b/packages/my-joy-beta/src/assets/placeholder.svg @@ -1 +1 @@ -Artboard 1 copy 45 \ No newline at end of file +Artboard 1 copy 45 diff --git a/packages/my-joy-beta/src/assets/postgresql.svg b/packages/my-joy-beta/src/assets/postgresql.svg index 1c0db9e8..673b52af 100644 --- a/packages/my-joy-beta/src/assets/postgresql.svg +++ b/packages/my-joy-beta/src/assets/postgresql.svg @@ -1 +1 @@ -Artboard 1 copy 12 \ No newline at end of file +Artboard 1 copy 12 diff --git a/packages/my-joy-beta/src/assets/redis.svg b/packages/my-joy-beta/src/assets/redis.svg index 988f1723..56887cfa 100644 --- a/packages/my-joy-beta/src/assets/redis.svg +++ b/packages/my-joy-beta/src/assets/redis.svg @@ -1 +1 @@ -Artboard 1 copy 20 \ No newline at end of file +Artboard 1 copy 20 diff --git a/packages/my-joy-beta/src/assets/scylladb.svg b/packages/my-joy-beta/src/assets/scylladb.svg index 3b9ad821..d16985ba 100644 --- a/packages/my-joy-beta/src/assets/scylladb.svg +++ b/packages/my-joy-beta/src/assets/scylladb.svg @@ -1 +1 @@ -Artboard 1 copy 44 \ No newline at end of file +Artboard 1 copy 44 diff --git a/packages/my-joy-beta/src/assets/smart.svg b/packages/my-joy-beta/src/assets/smart.svg index d4cea682..ec7c989f 100644 --- a/packages/my-joy-beta/src/assets/smart.svg +++ b/packages/my-joy-beta/src/assets/smart.svg @@ -1 +1 @@ -Artboard 1 copy 43 \ No newline at end of file +Artboard 1 copy 43 diff --git a/packages/my-joy-beta/src/assets/ubuntu.svg b/packages/my-joy-beta/src/assets/ubuntu.svg index cd1f9f2c..f6e9aaa5 100644 --- a/packages/my-joy-beta/src/assets/ubuntu.svg +++ b/packages/my-joy-beta/src/assets/ubuntu.svg @@ -1 +1 @@ -Artboard 1 copy 4 \ No newline at end of file +Artboard 1 copy 4 diff --git a/packages/my-joy-beta/src/assets/windows.svg b/packages/my-joy-beta/src/assets/windows.svg index 3fa437fb..87d416ca 100644 --- a/packages/my-joy-beta/src/assets/windows.svg +++ b/packages/my-joy-beta/src/assets/windows.svg @@ -1 +1 @@ -Artboard 1 copy 5 \ No newline at end of file +Artboard 1 copy 5 diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap index 3d7d74ee..ca285807 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap @@ -272,7 +272,9 @@ exports[`renders without throwing 1`] = ` } .c9:checked + label:after { - left: 50%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); box-shadow: 0 0 0 0.0625rem rgb(59,70,204); } @@ -280,10 +282,6 @@ exports[`renders without throwing 1`] = ` box-shadow: none; } -.c9:checked + label:active:after { - margin-left: -00.75rem; -} - .c10 { outline: 0; display: block; @@ -312,10 +310,6 @@ exports[`renders without throwing 1`] = ` box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); } -.c10:active:after { - padding-right: 0.75rem; -} - .c10:hover { border: 0.0625rem solid rgb(59,70,204); } @@ -334,11 +328,14 @@ exports[`renders without throwing 1`] = ` } .c10:after { - left: 0; - border-radius: 2em; + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; background: rgb(255,255,255); - -webkit-transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease; - transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease; + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); box-shadow: 0 0 0 0.0625rem rgb(216,216,216); } @@ -346,10 +343,6 @@ exports[`renders without throwing 1`] = ` box-shadow: inset 0 0 0 2em rgb(216,216,216); } -.c10:active:after { - padding-right: 0.75rem; -} - .c10:before { display: none; } diff --git a/packages/my-joy-beta/src/components/create-instance/image.js b/packages/my-joy-beta/src/components/create-instance/image.js index e2ecfabf..7a55fd92 100644 --- a/packages/my-joy-beta/src/components/create-instance/image.js +++ b/packages/my-joy-beta/src/components/create-instance/image.js @@ -63,15 +63,24 @@ const Version = styled(Select)` select { margin: 0; border-bottom-width: 0; - border-radius: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; } `; const getImage = name => { try { - return require(`../../assets/${name}.svg`); + return { + url: require(`../../assets/${name}.svg`), + size: 42, + bottom: 0 + }; } catch (e) { - return require(`../../assets/placeholder.svg`); + return { + url: require(`../../assets/placeholder.svg`), + size: 36, + bottom: 6 + }; } }; @@ -139,9 +148,12 @@ export default ({ } > {image.imageName}

{titleCase(image.imageName)}

diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap index e3a72f7f..f0ce75b4 100644 --- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap +++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap @@ -826,7 +826,9 @@ exports[`Form Toggle 1`] = ` } .c2:checked + label:after { - left: 50%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); box-shadow: 0 0 0 0.0625rem rgb(59,70,204); } @@ -834,10 +836,6 @@ exports[`Form Toggle 1`] = ` box-shadow: none; } -.c2:checked + label:active:after { - margin-left: -00.75rem; -} - .c3 { outline: 0; display: block; @@ -867,10 +865,6 @@ exports[`Form Toggle 1`] = ` box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); } -.c3:active:after { - padding-right: 0.75rem; -} - .c3:hover { border: 0.0625rem solid rgb(59,70,204); } @@ -889,11 +883,14 @@ exports[`Form Toggle 1`] = ` } .c3:after { - left: 0; - border-radius: 2em; + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; background: rgb(255,255,255); - -webkit-transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275), padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease; - transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275), padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease; + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); box-shadow: 0 0 0 0.0625rem rgb(216,216,216); } @@ -901,10 +898,6 @@ exports[`Form Toggle 1`] = ` box-shadow: inset 0 0 0 2em rgb(216,216,216); } -.c3:active:after { - padding-right: 0.75rem; -} - .c3:before { display: none; } diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js index ab76f483..08569aa6 100644 --- a/packages/ui-toolkit/src/form/toggle.js +++ b/packages/ui-toolkit/src/form/toggle.js @@ -23,15 +23,12 @@ const Input = styled.input` border: ${remcalc(1)} solid ${props => props.theme.primary}; &:after { - left: 50%; + transform: translateX(100%); box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary}; } &:active { box-shadow: none; - &:after { - margin-left: -0${remcalc(12)} - } } } } @@ -58,9 +55,6 @@ const InputLabel = styled.label` &:active { box-shadow: inset 0 0 0 ${remcalc(24)} ${props => props.theme.grey}; - &:after { - padding-right: ${remcalc(12)}; - } } &:hover { @@ -81,25 +75,22 @@ const InputLabel = styled.label` } &:after { - left: 0; - border-radius: 2em; + transform: translateX(0%); + border-radius: 50%; background: ${props => props.theme.white}; - transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), - padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease; + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey}; } &:active { box-shadow: inset 0 0 0 2em ${props => props.theme.grey}; - &:after { - padding-right: ${remcalc(12)}; - } } &:before { display: none; } + ${is('disabled')` cursor: not-allowed;