iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: use svg for checkbox component (#10799) 

* use svg for checkbox component

* add vertical align to svg

* use emotion styling

* update import to superset core

Co-authored-by: Elizabeth Thompson <elizabeth@preset.io>
This commit is contained in:
Elizabeth Thompson 2020-09-16 12:03:14 -07:00 committed by GitHub
parent 13cc1a3d2d
commit d3e9c565b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 472 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

312
superset-frontend/package-lock.json generated
View File

@ -6611,6 +6611,21 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/channel-postmessage": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.13.tgz",
"integrity": "sha512-WglkGiX0tAdftQVaNK8xlGW5gOjA9HQ+095G3cPehrPg7Rc7mEMCFvACVL2BlZBUCPljh2DA+fv7aQMcjuW/Xg==",
"dev": true,
"requires": {
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
"telejson": "^5.0.2"
}
},
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz",
@ -6622,6 +6637,31 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/client-api": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.13.tgz",
"integrity": "sha512-AL5YywpZo1LPi8FlIRiUXFBnV1h5039hUAVXMlVlOBud0iZuGlBZTsmgttL3GQUdC2hNQsbwZu7vAO/uqCsfRw==",
"dev": true,
"requires": {
"@storybook/addons": "6.0.13",
"@storybook/channel-postmessage": "6.0.13",
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"qs": "^6.6.0",
"stable": "^0.1.8",
"store2": "^2.7.1",
"ts-dedent": "^1.1.1",
"util-deprecate": "^1.0.2"
}
},
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz",
@ -7321,6 +7361,21 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/channel-postmessage": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.13.tgz",
"integrity": "sha512-WglkGiX0tAdftQVaNK8xlGW5gOjA9HQ+095G3cPehrPg7Rc7mEMCFvACVL2BlZBUCPljh2DA+fv7aQMcjuW/Xg==",
"dev": true,
"requires": {
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
"telejson": "^5.0.2"
}
},
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz",
@ -7332,6 +7387,31 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/client-api": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.13.tgz",
"integrity": "sha512-AL5YywpZo1LPi8FlIRiUXFBnV1h5039hUAVXMlVlOBud0iZuGlBZTsmgttL3GQUdC2hNQsbwZu7vAO/uqCsfRw==",
"dev": true,
"requires": {
"@storybook/addons": "6.0.13",
"@storybook/channel-postmessage": "6.0.13",
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"qs": "^6.6.0",
"stable": "^0.1.8",
"store2": "^2.7.1",
"ts-dedent": "^1.1.1",
"util-deprecate": "^1.0.2"
}
},
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz",
@ -8628,6 +8708,21 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/channel-postmessage": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.13.tgz",
"integrity": "sha512-WglkGiX0tAdftQVaNK8xlGW5gOjA9HQ+095G3cPehrPg7Rc7mEMCFvACVL2BlZBUCPljh2DA+fv7aQMcjuW/Xg==",
"dev": true,
"requires": {
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
"telejson": "^5.0.2"
}
},
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz",
@ -8639,6 +8734,31 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/client-api": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.13.tgz",
"integrity": "sha512-AL5YywpZo1LPi8FlIRiUXFBnV1h5039hUAVXMlVlOBud0iZuGlBZTsmgttL3GQUdC2hNQsbwZu7vAO/uqCsfRw==",
"dev": true,
"requires": {
"@storybook/addons": "6.0.13",
"@storybook/channel-postmessage": "6.0.13",
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"qs": "^6.6.0",
"stable": "^0.1.8",
"store2": "^2.7.1",
"ts-dedent": "^1.1.1",
"util-deprecate": "^1.0.2"
}
},
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz",
@ -9543,6 +9663,21 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/channel-postmessage": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.13.tgz",
"integrity": "sha512-WglkGiX0tAdftQVaNK8xlGW5gOjA9HQ+095G3cPehrPg7Rc7mEMCFvACVL2BlZBUCPljh2DA+fv7aQMcjuW/Xg==",
"dev": true,
"requires": {
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
"telejson": "^5.0.2"
}
},
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz",
@ -9554,6 +9689,31 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/client-api": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.13.tgz",
"integrity": "sha512-AL5YywpZo1LPi8FlIRiUXFBnV1h5039hUAVXMlVlOBud0iZuGlBZTsmgttL3GQUdC2hNQsbwZu7vAO/uqCsfRw==",
"dev": true,
"requires": {
"@storybook/addons": "6.0.13",
"@storybook/channel-postmessage": "6.0.13",
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"qs": "^6.6.0",
"stable": "^0.1.8",
"store2": "^2.7.1",
"ts-dedent": "^1.1.1",
"util-deprecate": "^1.0.2"
}
},
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz",
@ -9917,6 +10077,21 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/channel-postmessage": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.13.tgz",
"integrity": "sha512-WglkGiX0tAdftQVaNK8xlGW5gOjA9HQ+095G3cPehrPg7Rc7mEMCFvACVL2BlZBUCPljh2DA+fv7aQMcjuW/Xg==",
"dev": true,
"requires": {
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
"telejson": "^5.0.2"
}
},
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz",
@ -9928,6 +10103,31 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"@storybook/client-api": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.13.tgz",
"integrity": "sha512-AL5YywpZo1LPi8FlIRiUXFBnV1h5039hUAVXMlVlOBud0iZuGlBZTsmgttL3GQUdC2hNQsbwZu7vAO/uqCsfRw==",
"dev": true,
"requires": {
"@storybook/addons": "6.0.13",
"@storybook/channel-postmessage": "6.0.13",
"@storybook/channels": "6.0.13",
"@storybook/client-logger": "6.0.13",
"@storybook/core-events": "6.0.13",
"@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"qs": "^6.6.0",
"stable": "^0.1.8",
"store2": "^2.7.1",
"ts-dedent": "^1.1.1",
"util-deprecate": "^1.0.2"
}
},
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.13",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz",
@ -10604,14 +10804,14 @@
} }
}, },
"@storybook/channel-postmessage": { "@storybook/channel-postmessage": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.21.tgz",
"integrity": "sha512-WglkGiX0tAdftQVaNK8xlGW5gOjA9HQ+095G3cPehrPg7Rc7mEMCFvACVL2BlZBUCPljh2DA+fv7aQMcjuW/Xg==", "integrity": "sha512-ArRnoaS+b7qpAku/SO27z/yjRDCXb37mCPYGX0ntPbiQajootUbGO7otfnjFkaP44hCEC9uDYlOfMU1hYU1N6A==",
"dev": true, "dev": true,
"requires": { "requires": {
"@storybook/channels": "6.0.13", "@storybook/channels": "6.0.21",
"@storybook/client-logger": "6.0.13", "@storybook/client-logger": "6.0.21",
"@storybook/core-events": "6.0.13", "@storybook/core-events": "6.0.21",
"core-js": "^3.0.1", "core-js": "^3.0.1",
"global": "^4.3.2", "global": "^4.3.2",
"qs": "^6.6.0", "qs": "^6.6.0",
@ -10619,9 +10819,9 @@
}, },
"dependencies": { "dependencies": {
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.21.tgz",
"integrity": "sha512-99qcxeFFPP2FBNA/dSSKGrzuQaU1FQ8BjZlBubvYhWJku2kvXuCkUFHAWSgGc3aqb+lIZCXF3OWUFZ1fYMFmIA==", "integrity": "sha512-G6gjcEotSwDmOlxSmOMgsO3VhQ42RLJK7kFp6D5eg0Q6S8vsypltdT8orxdu+6+AbcBrL+5Sla8lThzaCvXsVQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"core-js": "^3.0.1", "core-js": "^3.0.1",
@ -10630,9 +10830,9 @@
} }
}, },
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.21.tgz",
"integrity": "sha512-9Qt6v5bmec/DKdoj2TU2bL2CIRMFjoXoys7rMf82MX5PgtkaYk9IYa0i2i5tlfsT/Pw+E+Jv26QUwQkTCt++bQ==", "integrity": "sha512-8aUEbhjXV+UMYQWukVYnp+kZafF+LD4Dm7eMo37IUZvt3VIjV1VvhxIDVJtqjk2vv0KZTepESFBkZQLmBzI9Zg==",
"dev": true, "dev": true,
"requires": { "requires": {
"core-js": "^3.0.1", "core-js": "^3.0.1",
@ -10640,9 +10840,9 @@
} }
}, },
"@storybook/core-events": { "@storybook/core-events": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.21.tgz",
"integrity": "sha512-lnHnXXAkProci1G2qkPn3qorWkIiwukT4YSSYfwqZfuvbQZJIA1oiaBmQYpTU8CeQ1F73kHDpk2E2aTnUNJ29g==", "integrity": "sha512-p84fbPcsAhnqDhp+HJ4P8+vI2BqJus4IRoVAemLAwuPjyPElrV9UvOa/RHy1BN8Z6jXwFA+FFzfGl2kPJ3WYcA==",
"dev": true, "dev": true,
"requires": { "requires": {
"core-js": "^3.0.1" "core-js": "^3.0.1"
@ -10712,16 +10912,16 @@
} }
}, },
"@storybook/client-api": { "@storybook/client-api": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.21.tgz",
"integrity": "sha512-AL5YywpZo1LPi8FlIRiUXFBnV1h5039hUAVXMlVlOBud0iZuGlBZTsmgttL3GQUdC2hNQsbwZu7vAO/uqCsfRw==", "integrity": "sha512-emBXd/ml6pc3G8gP3MsR9zQsAq1zZbqof9MxB51tG/jpTXdqWQ8ce1pt1tJS8Xj0QDM072jR6wsY+mmro0GZnA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@storybook/addons": "6.0.13", "@storybook/addons": "6.0.21",
"@storybook/channel-postmessage": "6.0.13", "@storybook/channel-postmessage": "6.0.21",
"@storybook/channels": "6.0.13", "@storybook/channels": "6.0.21",
"@storybook/client-logger": "6.0.13", "@storybook/client-logger": "6.0.21",
"@storybook/core-events": "6.0.13", "@storybook/core-events": "6.0.21",
"@storybook/csf": "0.0.1", "@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0", "@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2", "@types/webpack-env": "^1.15.2",
@ -10737,36 +10937,36 @@
}, },
"dependencies": { "dependencies": {
"@storybook/addons": { "@storybook/addons": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.21.tgz",
"integrity": "sha512-0flK0xe1LxNa3ZVOpFJoTG7PPU0ri+Gb9qHxcGwRMJt/qVQVcuF7BL+CC1R5gg2fa8Z0A867X4quLPfUOJvCmQ==", "integrity": "sha512-yDttNLc3vXqBxwK795ykgzTC6MpvuXDQuF4LHSlHZQe6wsMu1m3fljnbYdafJWdx6cNZwUblU3KYcR11PqhkPg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@storybook/api": "6.0.13", "@storybook/api": "6.0.21",
"@storybook/channels": "6.0.13", "@storybook/channels": "6.0.21",
"@storybook/client-logger": "6.0.13", "@storybook/client-logger": "6.0.21",
"@storybook/core-events": "6.0.13", "@storybook/core-events": "6.0.21",
"@storybook/router": "6.0.13", "@storybook/router": "6.0.21",
"@storybook/theming": "6.0.13", "@storybook/theming": "6.0.21",
"core-js": "^3.0.1", "core-js": "^3.0.1",
"global": "^4.3.2", "global": "^4.3.2",
"regenerator-runtime": "^0.13.3" "regenerator-runtime": "^0.13.3"
} }
}, },
"@storybook/api": { "@storybook/api": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.21.tgz",
"integrity": "sha512-0LU9XWqSCQMFm9+C4JvQsv7reLv61Qc2Ev+btbvps2Bdg0MG6MKT8Qc4dzCc3vSbp0wh9b9DYMx/r7EvTRzUXA==", "integrity": "sha512-cRRGf/KGFwYiDouTouEcDdp45N1AbYnAfvLqYZ3KuUTGZ+CiU/PN/vavkp07DQeM4FIQO8TLhzHdsLFpLT7Lkw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@reach/router": "^1.3.3", "@reach/router": "^1.3.3",
"@storybook/channels": "6.0.13", "@storybook/channels": "6.0.21",
"@storybook/client-logger": "6.0.13", "@storybook/client-logger": "6.0.21",
"@storybook/core-events": "6.0.13", "@storybook/core-events": "6.0.21",
"@storybook/csf": "0.0.1", "@storybook/csf": "0.0.1",
"@storybook/router": "6.0.13", "@storybook/router": "6.0.21",
"@storybook/semver": "^7.3.2", "@storybook/semver": "^7.3.2",
"@storybook/theming": "6.0.13", "@storybook/theming": "6.0.21",
"@types/reach__router": "^1.3.5", "@types/reach__router": "^1.3.5",
"core-js": "^3.0.1", "core-js": "^3.0.1",
"fast-deep-equal": "^3.1.1", "fast-deep-equal": "^3.1.1",
@ -10782,9 +10982,9 @@
} }
}, },
"@storybook/channels": { "@storybook/channels": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.21.tgz",
"integrity": "sha512-99qcxeFFPP2FBNA/dSSKGrzuQaU1FQ8BjZlBubvYhWJku2kvXuCkUFHAWSgGc3aqb+lIZCXF3OWUFZ1fYMFmIA==", "integrity": "sha512-G6gjcEotSwDmOlxSmOMgsO3VhQ42RLJK7kFp6D5eg0Q6S8vsypltdT8orxdu+6+AbcBrL+5Sla8lThzaCvXsVQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"core-js": "^3.0.1", "core-js": "^3.0.1",
@ -10793,9 +10993,9 @@
} }
}, },
"@storybook/client-logger": { "@storybook/client-logger": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.21.tgz",
"integrity": "sha512-9Qt6v5bmec/DKdoj2TU2bL2CIRMFjoXoys7rMf82MX5PgtkaYk9IYa0i2i5tlfsT/Pw+E+Jv26QUwQkTCt++bQ==", "integrity": "sha512-8aUEbhjXV+UMYQWukVYnp+kZafF+LD4Dm7eMo37IUZvt3VIjV1VvhxIDVJtqjk2vv0KZTepESFBkZQLmBzI9Zg==",
"dev": true, "dev": true,
"requires": { "requires": {
"core-js": "^3.0.1", "core-js": "^3.0.1",
@ -10803,18 +11003,18 @@
} }
}, },
"@storybook/core-events": { "@storybook/core-events": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.21.tgz",
"integrity": "sha512-lnHnXXAkProci1G2qkPn3qorWkIiwukT4YSSYfwqZfuvbQZJIA1oiaBmQYpTU8CeQ1F73kHDpk2E2aTnUNJ29g==", "integrity": "sha512-p84fbPcsAhnqDhp+HJ4P8+vI2BqJus4IRoVAemLAwuPjyPElrV9UvOa/RHy1BN8Z6jXwFA+FFzfGl2kPJ3WYcA==",
"dev": true, "dev": true,
"requires": { "requires": {
"core-js": "^3.0.1" "core-js": "^3.0.1"
} }
}, },
"@storybook/router": { "@storybook/router": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.21.tgz",
"integrity": "sha512-aLDMEDsTbqOv1pcOH+ovRVgdf8exqtTRGIcNTbEhBBnaDsbdo2sxoXHJ8n8xHw1TbpYx7zLD0HXbzSSJIlj1lg==", "integrity": "sha512-46SsKJfcd12lRrISnfrWhicJx8EylkgGDGohfH0n5p7inkkGOkKV8QFZoYPRKZueMXmUKpzJ0Z3HmVsLTCrCDw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@reach/router": "^1.3.3", "@reach/router": "^1.3.3",
@ -10844,15 +11044,15 @@
} }
}, },
"@storybook/theming": { "@storybook/theming": {
"version": "6.0.13", "version": "6.0.21",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.13.tgz", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.21.tgz",
"integrity": "sha512-XsiQv0I5NQ2gGcmpIS31zbfAS6HK8IJdAgltSSuF/Yzkwks+guqG4MYWaWGEQPPwYvPDZp+/gproWacQJgrjug==", "integrity": "sha512-n97DfB9kG6WrV1xBGDyeQibTrh8pBBCp3dSL3UTGH+KX3C2+4sm6QHlTgyekbi5FrbFEbnuZOKAS3YbLVONsRQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@emotion/core": "^10.0.20", "@emotion/core": "^10.0.20",
"@emotion/is-prop-valid": "^0.8.6", "@emotion/is-prop-valid": "^0.8.6",
"@emotion/styled": "^10.0.17", "@emotion/styled": "^10.0.17",
"@storybook/client-logger": "6.0.13", "@storybook/client-logger": "6.0.21",
"core-js": "^3.0.1", "core-js": "^3.0.1",
"deep-object-diff": "^1.1.0", "deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19", "emotion-theming": "^10.0.19",

1
superset-frontend/package.json
View File

@ -189,6 +189,7 @@
"@storybook/addon-knobs": "^6.0.13", "@storybook/addon-knobs": "^6.0.13",
"@storybook/addon-links": "^5.3.19", "@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19", "@storybook/addons": "^5.3.19",
"@storybook/client-api": "^6.0.21",
"@storybook/preset-typescript": "^3.0.0", "@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.0.13", "@storybook/react": "^6.0.13",
"@svgr/webpack": "^5.4.0", "@svgr/webpack": "^5.4.0",

55
superset-frontend/spec/javascripts/components/Checkbox_spec.jsx
View File

@ -1,55 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import Checkbox from 'src/components/Checkbox';
describe('Checkbox', () => {
const defaultProps = {
checked: true,
onChange: sinon.spy(),
};
let wrapper;
const factory = o => {
const props = { ...defaultProps, ...o };
return shallow(<Checkbox {...props} />);
};
beforeEach(() => {
wrapper = factory({});
});
it('is a valid element', () => {
expect(React.isValidElement(<Checkbox {...defaultProps} />)).toBe(true);
});
it('inits checked when checked', () => {
expect(wrapper.find('i.fa-check.text-primary')).toExist();
});
it('inits unchecked when not checked', () => {
const el = factory({ checked: false });
expect(el.find('i.fa-check.text-primary')).toHaveLength(0);
expect(el.find('i.fa-check.text-transparent')).toHaveLength(1);
});
it('unchecks when clicked', () => {
expect(wrapper.find('i.fa-check.text-transparent')).not.toExist();
wrapper.find('i').first().simulate('click');
expect(defaultProps.onChange.calledOnce).toBe(true);
});
});

103
superset-frontend/src/components/Button/Button.stories.jsx
View File

@ -17,18 +17,15 @@
* under the License. * under the License.
*/ */
import React from 'react'; import React from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import Button from './index'; import Button from './index';
export default { export default {
title: 'Button', title: 'Button',
component: Button, component: Button,
decorators: [withKnobs], includeStories: ['ButtonGallery', 'InteractiveButton'],
excludeStories: /.*Knob$/,
}; };
export const buttonStyleKnob = { export const STYLES = {
label: 'Types', label: 'Types',
options: { options: {
Primary: 'primary', Primary: 'primary',
@ -46,7 +43,7 @@ export const buttonStyleKnob = {
// groupId: 'ButtonType', // groupId: 'ButtonType',
}; };
export const buttonSizeKnob = { export const SIZES = {
label: 'Sizes', label: 'Sizes',
options: { options: {
XS: 'xsmall', XS: 'xsmall',
@ -76,7 +73,8 @@ export const buttonSizeKnob = {
// }, // },
// defaultValue: null, // defaultValue: null,
// }; // };
const typeKnob = {
const TYPES = {
label: 'Type', label: 'Type',
options: { options: {
Submit: 'submit', Submit: 'submit',
@ -85,7 +83,7 @@ const typeKnob = {
}, },
defaultValue: null, defaultValue: null,
}; };
const targetKnob = { const TARGETS = {
label: 'Target', label: 'Target',
options: { options: {
Blank: '_blank', Blank: '_blank',
@ -93,7 +91,7 @@ const targetKnob = {
}, },
defaultValue: null, defaultValue: null,
}; };
const hrefKnob = { const HREFS = {
label: 'HREF', label: 'HREF',
options: { options: {
Superset: 'http://https://superset.incubator.apache.org/', Superset: 'http://https://superset.incubator.apache.org/',
@ -104,18 +102,16 @@ const hrefKnob = {
export const ButtonGallery = () => ( export const ButtonGallery = () => (
<> <>
{Object.entries(buttonSizeKnob.options).map(([name, size]) => ( {Object.entries(SIZES.options).map(([name, size]) => (
<div key={size}> <div key={size}>
<h4>{name}</h4> <h4>{name}</h4>
{Object.values(buttonStyleKnob.options) {Object.values(STYLES.options)
.filter(o => o) .filter(o => o)
.map(style => ( .map(style => (
<Button <Button
disabled={boolean('Disabled', false)}
cta={boolean('CTA', false)}
buttonStyle={style} buttonStyle={style}
buttonSize={size} buttonSize={size}
onClick={action('clicked')} onClick={() => true}
key={`${style}_${size}`} key={`${style}_${size}`}
> >
{style} {style}
@ -126,43 +122,42 @@ export const ButtonGallery = () => (
</> </>
); );
export const InteractiveButton = () => ( export const InteractiveButton = args => {
<Button const { label, ...btnArgs } = args;
disabled={boolean('Disabled', false)} return <Button {...btnArgs}>{label}</Button>;
cta={boolean('CTA', false)} };
buttonStyle={select(
buttonStyleKnob.label, InteractiveButton.args = {
buttonStyleKnob.options, buttonStyle: STYLES.defaultValue,
buttonStyleKnob.defaultValue, size: SIZES.defaultValue,
buttonStyleKnob.groupId, type: TYPES.defaultValue,
)} target: TARGETS.defaultValue,
size={select( href: HREFS.defaultValue,
buttonSizeKnob.label, label: 'Button!',
buttonSizeKnob.options, };
buttonSizeKnob.defaultValue, InteractiveButton.argTypes = {
buttonSizeKnob.groupId, buttonStyle: {
)} name: STYLES.label,
onClick={action('clicked')} control: { type: 'select', options: Object.values(STYLES.options) },
type={select( },
typeKnob.label, size: {
typeKnob.options, name: SIZES.label,
typeKnob.defaultValue, control: { type: 'select', options: Object.values(SIZES.options) },
typeKnob.groupId, },
)} type: {
target={select( name: TYPES.label,
targetKnob.label, control: { type: 'select', options: Object.values(TYPES.options) },
targetKnob.options, },
targetKnob.defaultValue, target: {
targetKnob.groupId, name: TARGETS.label,
)} control: { type: 'select', options: Object.values(TARGETS.options) },
href={select( },
hrefKnob.label, href: {
hrefKnob.options, name: HREFS.label,
hrefKnob.defaultValue, control: { type: 'select', options: Object.values(HREFS.options) },
hrefKnob.groupId, },
)} onClick: { action: 'clicked' },
tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null} label: { name: 'Label', control: { type: 'text' } },
> };
{text('Label', 'Button!')}
</Button> ButtonGallery.argTypes = { onClick: { action: 'clicked' } };
);

8
superset-frontend/src/components/Button/Button.test.tsx
View File

@ -23,8 +23,8 @@ import { styledMount as mount } from 'spec/helpers/theming';
import Button from '.'; import Button from '.';
import { import {
ButtonGallery, ButtonGallery,
buttonSizeKnob, SIZES as buttonSizes,
buttonStyleKnob, STYLES as buttonStyles,
} from './Button.stories'; } from './Button.stories';
describe('Button', () => { describe('Button', () => {
@ -54,8 +54,8 @@ describe('Button', () => {
wrapper = mount(<ButtonGallery />); wrapper = mount(<ButtonGallery />);
const permutationCount = const permutationCount =
Object.values(buttonStyleKnob.options).filter(o => o).length * Object.values(buttonStyles.options).filter(o => o).length *
Object.values(buttonSizeKnob.options).length; Object.values(buttonSizes.options).length;
expect(wrapper.find(Button).length).toEqual(permutationCount); expect(wrapper.find(Button).length).toEqual(permutationCount);
}); });

63
superset-frontend/src/components/Checkbox/Checkbox.stories.jsx Normal file
View File

@ -0,0 +1,63 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { useArgs } from '@storybook/client-api';
import Checkbox from './';
export default {
title: 'Checkbox',
component: Checkbox,
};
const STATUSES = {
checked: true,
unchecked: false,
};
export const CheckboxGallery = () =>
Object.keys(STATUSES).map(status => (
<div style={{ marginBottom: '16px' }} key={status}>
<Checkbox
onChange={() => {}}
checked={STATUSES[status]}
style={{ marginRight: '8px' }}
/>
{`I'm a${STATUSES[status] ? '' : 'n'} ${status} checkbox`}
</div>
));
// eslint-disable-next-line no-unused-vars
export const InteractiveCheckbox = _args => {
const [{ checked, style }, updateArgs] = useArgs();
const toggleCheckbox = () => {
updateArgs({ checked: !checked });
};
return (
<>
<Checkbox onChange={toggleCheckbox} checked={checked} style={style} />
I'm an interactive checkbox
</>
);
};
InteractiveCheckbox.args = {
checked: false,
style: { marginRight: '8px' },
};

75
superset-frontend/src/components/Checkbox/Checkbox.test.tsx Normal file
View File

@ -0,0 +1,75 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { ReactWrapper } from 'enzyme';
import {
styledMount as mount,
styledShallow as shallow,
} from 'spec/helpers/theming';
import Checkbox from '.';
import { CheckboxChecked, CheckboxUnchecked } from './../CheckboxIcons';
describe('Checkbox', () => {
let wrapper: ReactWrapper;
it('renders the base component', () => {
expect(
React.isValidElement(
<Checkbox style={{}} checked={false} onChange={() => true} />,
),
).toBe(true);
});
describe('when unchecked', () => {
it('renders the unchecked component', () => {
const shallowWrapper = shallow(
<Checkbox style={{}} checked={false} onChange={() => true} />,
);
expect(shallowWrapper.dive().dive().find(CheckboxUnchecked)).toExist();
});
});
describe('when checked', () => {
it('renders the checked component', () => {
const shallowWrapper = shallow(
<Checkbox style={{}} checked onChange={() => true} />,
);
expect(shallowWrapper.dive().dive().find(CheckboxChecked)).toExist();
});
});
it('works with an onChange handler', () => {
const mockAction = jest.fn();
wrapper = mount(
<Checkbox style={{}} checked={false} onChange={mockAction} />,
);
wrapper.find('Checkbox').first().simulate('click');
expect(mockAction).toHaveBeenCalled();
});
it('renders custom Checkbox styles without melting', () => {
wrapper = mount(
<Checkbox onChange={() => true} checked={false} style={{ foo: 'foo' }} />,
);
expect(wrapper.find('Checkbox')).toExist();
expect(wrapper.find('Checkbox')).toHaveStyle({ foo: 'foo' });
});
});

42
superset-frontend/src/components/Checkbox.tsx → superset-frontend/src/components/Checkbox/index.tsx
View File

@ -17,6 +17,11 @@
* under the License. * under the License.
*/ */
import React from 'react'; import React from 'react';
import { styled } from '@superset-ui/core';
import {
CheckboxChecked,
CheckboxUnchecked,
} from 'src/components/CheckboxIcons';
interface CheckboxProps { interface CheckboxProps {
checked: boolean; checked: boolean;
@ -24,25 +29,26 @@ interface CheckboxProps {
style: object; style: object;
} }
const Styles = styled.span`
&,
& svg {
vertical-align: top;
}
`;
export default function Checkbox({ checked, onChange, style }: CheckboxProps) { export default function Checkbox({ checked, onChange, style }: CheckboxProps) {
return ( return (
<span style={style}> <Styles
<i style={style}
role="button" onClick={() => {
aria-label="Checkbox" onChange(!checked);
tabIndex={0} }}
className={`fa fa-check ${ role="checkbox"
checked ? 'text-primary' : 'text-transparent' tabIndex={0}
}`} aria-checked={checked}
onClick={() => { aria-label="Checkbox"
onChange(!checked); >
}} {checked ? <CheckboxChecked /> : <CheckboxUnchecked />}
style={{ </Styles>
border: '1px solid #aaa',
borderRadius: '2px',
cursor: 'pointer',
}}
/>
</span>
); );
} }