Skip to content

Commit

Permalink
set generic variable when a dropdown item is hovered
Browse files Browse the repository at this point in the history
  • Loading branch information
Charlie committed Nov 26, 2018
1 parent 01b98b4 commit a977365
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 27 deletions.
3 changes: 2 additions & 1 deletion design-system/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"jest-environment-node": "^23.4.0",
"puppeteer": "1.8.0",
"surge": "^0.20.1",
"watch": "^1.0.2"
"watch": "^1.0.2",
"workbox-build": "3.4.1"
},
"contributors": [
"Charlie L <[email protected]>",
Expand Down
9 changes: 3 additions & 6 deletions design-system/src/components/dropdown/dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,21 @@ export class Dropdown {
@State()
isOpen: boolean = false;

dropdownTrigger: any;
dropdownMenu: any;
dropdownTrigger: Element;
dropdownMenu: HTMLElement;
popper: Popper;

componentDidLoad() {
this.dropdownMenu = this.dropdown.querySelector('wz-dropdown-menu');
// get the first element from the slot
this.dropdownTrigger = this.dropdown.firstElementChild;
this.dropdownMenu.style.display = 'none';

this.dropdownTrigger.addEventListener('click', () => {
this.toggleOpenDropdown();
});

this.closeOnClick();

this.popper = new Popper(this.dropdownTrigger, this.dropdownMenu, {
placement: 'bottom',
placement: 'bottom-start',
});
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
wz-dropdown-menu-item {
.dropdown-menu-item-container {
--dropdown-menu-item-color: var(--ink-base);
display: flex;
align-items: center;
height: 32px;
width: 100%;
padding: 0 8px;
background-color: var(--ink-clear);
color: var(--ink-base);
&.selected {
background-color: var(--background-base);
}
&:hover:not(.selected) {
background-color: var(--primary-base);
cursor: pointer;
wz-text span {
color: var(--ink-clear);
}
--dropdown-menu-item-color: var(--ink-clear);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ export class DropdownMenuItem {
const dropdownMenuItemClass = [baseClass, selectedClass].join(' ');
return (
<div class={dropdownMenuItemClass} data-value={this.value}>
<wz-text>
<slot />
</wz-text>
<slot />
</div>
);
}
Expand Down
9 changes: 1 addition & 8 deletions design-system/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,6 @@
<script src="/build/wizeline-tea.js"></script>
</head>
<body>
<wz-dropdown>
<wz-button small>test</wz-button>
<wz-dropdown-menu>
<wz-dropdown-menu-item selected>a</wz-dropdown-menu-item>
<wz-dropdown-menu-item>b</wz-dropdown-menu-item>
<wz-dropdown-menu-item>c</wz-dropdown-menu-item>
</wz-dropdown-menu>
</wz-dropdown>

</body>
</html>
205 changes: 200 additions & 5 deletions design-system/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -894,6 +894,11 @@ [email protected], combined-stream@~1.0.5, combined-stream@~1.0.6:
dependencies:
delayed-stream "~1.0.0"

common-tags@^1.4.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==

compare-versions@^3.1.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.4.0.tgz#e0747df5c9cb7f054d6d3dc3e1dbc444f9e92b26"
Expand Down Expand Up @@ -1477,6 +1482,15 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"

fs-extra@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
dependencies:
graceful-fs "^4.1.2"
jsonfile "^4.0.0"
universalify "^0.1.0"

fs-minipass@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
Expand Down Expand Up @@ -1628,6 +1642,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=

graceful-fs@^4.1.6:
version "4.1.15"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==

growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
Expand Down Expand Up @@ -2126,6 +2145,13 @@ [email protected], isarray@~1.0.0:
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

[email protected]:
version "3.2.0"
resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
integrity sha512-zKqkK+O+dGqevc93KNsbZ/TqTUFd46MwWjYOoMrjIMZ51eU7DtQG3Wmd9SQQT7i7RVnuTPEiYEWHU3MSbxC1Tg==
dependencies:
punycode "2.x.x"

isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
Expand Down Expand Up @@ -2554,6 +2580,15 @@ [email protected]:
import-local "^1.0.0"
jest-cli "^23.6.0"

joi@^11.1.1:
version "11.4.0"
resolved "https://registry.yarnpkg.com/joi/-/joi-11.4.0.tgz#f674897537b625e9ac3d0b7e1604c828ad913ccb"
integrity sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==
dependencies:
hoek "4.x.x"
isemail "3.x.x"
topo "2.x.x"

js-base64@^2.1.8:
version "2.4.9"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
Expand Down Expand Up @@ -2681,6 +2716,13 @@ json5@^0.5.1:
resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=

jsonfile@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
optionalDependencies:
graceful-fs "^4.1.6"

jsprim@^1.2.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
Expand Down Expand Up @@ -2779,6 +2821,11 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"

lodash._reinterpolate@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=

lodash.assign@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
Expand All @@ -2799,6 +2846,21 @@ lodash.sortby@^4.7.0:
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=

lodash.template@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
integrity sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=
dependencies:
lodash._reinterpolate "~3.0.0"
lodash.templatesettings "^4.0.0"

lodash.templatesettings@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
integrity sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=
dependencies:
lodash._reinterpolate "~3.0.0"

lodash@^3.10.1:
version "3.10.1"
resolved "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
Expand Down Expand Up @@ -3540,6 +3602,11 @@ preserve@^0.2.0:
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=

pretty-bytes@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
integrity sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=

pretty-format@^23.6.0:
version "23.6.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
Expand Down Expand Up @@ -3602,16 +3669,16 @@ psl@^1.1.24:
resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
integrity sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==

[email protected], punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

punycode@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=

punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

[email protected]:
version "1.8.0"
resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.8.0.tgz#9e8bbd2f5448cc19cac220efc0512837104877ad"
Expand Down Expand Up @@ -4490,6 +4557,13 @@ to-regex@^3.0.1, to-regex@^3.0.2:
regex-not "^1.0.2"
safe-regex "^1.1.0"

[email protected]:
version "2.0.2"
resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
integrity sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=
dependencies:
hoek "4.x.x"

tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.4.3:
version "2.4.3"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
Expand Down Expand Up @@ -4588,6 +4662,11 @@ union-value@^1.0.0:
is-extendable "^0.1.1"
set-value "^0.4.3"

universalify@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==

unset-value@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
Expand Down Expand Up @@ -4785,6 +4864,122 @@ wordwrap@~1.0.0:
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=

workbox-background-sync@^3.4.1, workbox-background-sync@^3.6.3:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-3.6.3.tgz#6609a0fac9eda336a7c52e6aa227ba2ae532ad94"
integrity sha512-ypLo0B6dces4gSpaslmDg5wuoUWrHHVJfFWwl1udvSylLdXvnrfhFfriCS42SNEe5lsZtcNZF27W/SMzBlva7Q==
dependencies:
workbox-core "^3.6.3"

workbox-broadcast-cache-update@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.6.3.tgz#3f5dff22ada8c93e397fb38c1dc100606a7b92da"
integrity sha512-pJl4lbClQcvp0SyTiEw0zLSsVYE1RDlCPtpKnpMjxFtu8lCFTAEuVyzxp9w7GF4/b3P4h5nyQ+q7V9mIR7YzGg==
dependencies:
workbox-core "^3.6.3"

[email protected]:
version "3.4.1"
resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-3.4.1.tgz#65af4c81b05dac6a1819c88b8a2a944ddf5cec04"
integrity sha512-Qi04XdHjkXbRN0CV5XO1oqDWbJSIm7VYhxmxjtnVcKK8PrMT6rOUFUi9ziDI+8UQgcXbLK4ZChWf2ptZS1/MbA==
dependencies:
babel-runtime "^6.26.0"
common-tags "^1.4.0"
fs-extra "^4.0.2"
glob "^7.1.2"
joi "^11.1.1"
lodash.template "^4.4.0"
pretty-bytes "^4.0.2"
workbox-background-sync "^3.4.1"
workbox-broadcast-cache-update "^3.4.1"
workbox-cache-expiration "^3.4.1"
workbox-cacheable-response "^3.4.1"
workbox-core "^3.4.1"
workbox-google-analytics "^3.4.1"
workbox-navigation-preload "^3.4.1"
workbox-precaching "^3.4.1"
workbox-range-requests "^3.4.1"
workbox-routing "^3.4.1"
workbox-strategies "^3.4.1"
workbox-streams "^3.4.1"
workbox-sw "^3.4.1"

workbox-cache-expiration@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-cache-expiration/-/workbox-cache-expiration-3.6.3.tgz#4819697254a72098a13f94b594325a28a1e90372"
integrity sha512-+ECNph/6doYx89oopO/UolYdDmQtGUgo8KCgluwBF/RieyA1ZOFKfrSiNjztxOrGJoyBB7raTIOlEEwZ1LaHoA==
dependencies:
workbox-core "^3.6.3"

workbox-cacheable-response@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-3.6.3.tgz#869f1a68fce9063f6869ddbf7fa0a2e0a868b3aa"
integrity sha512-QpmbGA9SLcA7fklBLm06C4zFg577Dt8u3QgLM0eMnnbaVv3rhm4vbmDpBkyTqvgK/Ly8MBDQzlXDtUCswQwqqg==
dependencies:
workbox-core "^3.6.3"

workbox-core@^3.4.1, workbox-core@^3.6.3:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-3.6.3.tgz#69abba70a4f3f2a5c059295a6f3b7c62bd00e15c"
integrity sha512-cx9cx0nscPkIWs8Pt98HGrS9/aORuUcSkWjG25GqNWdvD/pSe7/5Oh3BKs0fC+rUshCiyLbxW54q0hA+GqZeSQ==

workbox-google-analytics@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-3.6.3.tgz#99df2a3d70d6e91961e18a6752bac12e91fbf727"
integrity sha512-RQBUo/6SXtIaQTRFj4RQZ9e1gAl7D8oS5S+Hi173Kk70/BgJjzPwXpC5A249Jv5YfkCOLMQCeF9A27BiD0b0ig==
dependencies:
workbox-background-sync "^3.6.3"
workbox-core "^3.6.3"
workbox-routing "^3.6.3"
workbox-strategies "^3.6.3"

workbox-navigation-preload@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-3.6.3.tgz#a2c34eb7c17e7485b795125091215f757b3c4964"
integrity sha512-dd26xTX16DUu0i+MhqZK/jQXgfIitu0yATM4jhRXEmpMqQ4MxEeNvl2CgjDMOHBnCVMax+CFZQWwxMx/X/PqCw==
dependencies:
workbox-core "^3.6.3"

workbox-precaching@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-3.6.3.tgz#5341515e9d5872c58ede026a31e19bafafa4e1c1"
integrity sha512-aBqT66BuMFviPTW6IpccZZHzpA8xzvZU2OM1AdhmSlYDXOJyb1+Z6blVD7z2Q8VNtV1UVwQIdImIX+hH3C3PIw==
dependencies:
workbox-core "^3.6.3"

workbox-range-requests@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-3.6.3.tgz#3cc21cba31f2dd8c43c52a196bcc8f6cdbcde803"
integrity sha512-R+yLWQy7D9aRF9yJ3QzwYnGFnGDhMUij4jVBUVtkl67oaVoP1ymZ81AfCmfZro2kpPRI+vmNMfxxW531cqdx8A==
dependencies:
workbox-core "^3.6.3"

workbox-routing@^3.4.1, workbox-routing@^3.6.3:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-3.6.3.tgz#659cd8f9274986cfa98fda0d050de6422075acf7"
integrity sha512-bX20i95OKXXQovXhFOViOK63HYmXvsIwZXKWbSpVeKToxMrp0G/6LZXnhg82ijj/S5yhKNRf9LeGDzaqxzAwMQ==
dependencies:
workbox-core "^3.6.3"

workbox-strategies@^3.4.1, workbox-strategies@^3.6.3:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-3.6.3.tgz#11a0dc249a7bc23d3465ec1322d28fa6643d64a0"
integrity sha512-Pg5eulqeKet2y8j73Yw6xTgLdElktcWExGkzDVCGqfV9JCvnGuEpz5eVsCIK70+k4oJcBCin9qEg3g3CwEIH3g==
dependencies:
workbox-core "^3.6.3"

workbox-streams@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-3.6.3.tgz#beaea5d5b230239836cc327b07d471aa6101955a"
integrity sha512-rqDuS4duj+3aZUYI1LsrD2t9hHOjwPqnUIfrXSOxSVjVn83W2MisDF2Bj+dFUZv4GalL9xqErcFW++9gH+Z27w==
dependencies:
workbox-core "^3.6.3"

workbox-sw@^3.4.1:
version "3.6.3"
resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-3.6.3.tgz#278ea4c1831b92bbe2d420da8399176c4b2789ff"
integrity sha512-IQOUi+RLhvYCiv80RP23KBW/NTtIvzvjex28B8NW1jOm+iV4VIu3VXKXTA6er5/wjjuhmtB28qEAUqADLAyOSg==

wrap-ansi@^2.0.0:
version "2.1.0"
resolved "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
Expand Down

0 comments on commit a977365

Please sign in to comment.