Skip to content

Commit

Permalink
Merge pull request #46 from robcresswell/feat/functional-components
Browse files Browse the repository at this point in the history
feat: Make icon components functional
  • Loading branch information
robcresswell authored Sep 8, 2019
2 parents c839ec5 + 319c9dc commit 2420f2f
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 59 deletions.
22 changes: 14 additions & 8 deletions __tests__/icon.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,48 @@
import { shallowMount } from '@vue/test-utils';
import { mount } from '@vue/test-utils';
import AndroidIcon from '../dist/Android';

const WrappedIcon = {
components: {
AndroidIcon,
},
render(h) {
return h(AndroidIcon, {
attrs: this.$attrs,
listeners: this.$listeners,
});
},
};

describe('Icon', () => {
let icon;

beforeEach(() => {
icon = shallowMount(AndroidIcon);
icon = mount(WrappedIcon);
});

it('accepts a "title" property', () => {
expect(icon.vm.title).toEqual('Android icon');
expect(icon.attributes()['aria-label']).toEqual('Android icon');

icon.setProps({ title: 'foo' });

expect(icon.vm.title).toEqual('foo');
expect(icon.attributes()['aria-label']).toEqual('foo');
});

it('accepts a "decorative" property', () => {
expect(icon.vm.decorative).toBe(false);
expect(icon.attributes()['aria-hidden']).toBeFalsy();

icon.setProps({ decorative: true });

expect(icon.vm.decorative).toBe(true);
expect(icon.attributes()['aria-hidden']).toBeTruthy();
});

it('accepts a "fillColor" property', () => {
const svg = icon.find('.material-design-icon__svg');

expect(icon.vm.fillColor).toBe('currentColor');
expect(svg.attributes()['fill']).toEqual('currentColor');

icon.setProps({ fillColor: '#FF0000' });

expect(icon.vm.fillColor).toBe('#FF0000');
expect(svg.attributes()['fill']).toEqual('#FF0000');
});

Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
"material design"
],
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@mdi/js": "4.1.95",
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@mdi/js": "4.3.95",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.8.0",
Expand All @@ -31,7 +31,7 @@
"prettier": "^1.18.2",
"regenerator-runtime": "^0.13.3",
"vue": "^2.6.10",
"vue-jest": "^3.0.4",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.10"
},
"homepage": "https://github.com/robcresswell/vue-material-design-icons",
Expand Down
17 changes: 9 additions & 8 deletions template.mst
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
{{=<% %>=}}
<template>
<span :aria-hidden="decorative"
:aria-label="title"
<template functional>
<span :aria-hidden="props.decorative"
:aria-label="props.title"
:class="[data.class, data.staticClass]"
class="material-design-icon <%title%>-icon"
role="img"
@click="$emit('click', $event)">
<svg :fill="fillColor"
@click="listeners.click ? listeners.click : () => true">
<svg :fill="props.fillColor"
class="material-design-icon__svg"
:width="size"
:height="size"
:width="props.size"
:height="props.size"
viewBox="0 0 24 24">
<path d="<%{svgPathData}%>">
<title>{{ title }}</title>
<title>{{ props.title }}</title>
</path>
</svg>
</span>
Expand Down
156 changes: 117 additions & 39 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
dependencies:
"@babel/highlight" "^7.0.0"

"@babel/core@^7.1.0", "@babel/core@^7.5.5":
"@babel/core@^7.1.0":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30"
integrity sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==
Expand All @@ -29,6 +29,26 @@
semver "^5.4.1"
source-map "^0.5.0"

"@babel/core@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
integrity sha512-FuRhDRtsd6IptKpHXAa+4WPZYY2ZzgowkbLBecEDDSje1X/apG7jQM33or3NdOmjXBKWGOg4JmSiRfUfuTtHXw==
dependencies:
"@babel/code-frame" "^7.5.5"
"@babel/generator" "^7.6.0"
"@babel/helpers" "^7.6.0"
"@babel/parser" "^7.6.0"
"@babel/template" "^7.6.0"
"@babel/traverse" "^7.6.0"
"@babel/types" "^7.6.0"
convert-source-map "^1.1.0"
debug "^4.1.0"
json5 "^2.1.0"
lodash "^4.17.13"
resolve "^1.3.2"
semver "^5.4.1"
source-map "^0.5.0"

"@babel/generator@^7.4.0", "@babel/generator@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf"
Expand All @@ -40,6 +60,17 @@
source-map "^0.5.0"
trim-right "^1.0.1"

"@babel/generator@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.0.tgz#e2c21efbfd3293ad819a2359b448f002bfdfda56"
integrity sha512-Ms8Mo7YBdMMn1BYuNtKuP/z0TgEIhbcyB8HVR6PPNYp4P61lMsABiS4A3VG1qznjXVCf3r+fVHhm4efTYVsySA==
dependencies:
"@babel/types" "^7.6.0"
jsesc "^2.5.1"
lodash "^4.17.13"
source-map "^0.5.0"
trim-right "^1.0.1"

"@babel/helper-annotate-as-pure@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
Expand Down Expand Up @@ -204,6 +235,15 @@
"@babel/traverse" "^7.5.5"
"@babel/types" "^7.5.5"

"@babel/helpers@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.0.tgz#21961d16c6a3c3ab597325c34c465c0887d31c6e"
integrity sha512-W9kao7OBleOjfXtFGgArGRX6eCP0UEcA2ZWEWNkJdRZnHhW4eEbeswbG3EwaRsnQUAEGWYgMq1HsIXuNNNy2eQ==
dependencies:
"@babel/template" "^7.6.0"
"@babel/traverse" "^7.6.0"
"@babel/types" "^7.6.0"

"@babel/highlight@^7.0.0":
version "7.5.0"
resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
Expand All @@ -218,6 +258,11 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b"
integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==

"@babel/parser@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.0.tgz#3e05d0647432a8326cb28d0de03895ae5a57f39b"
integrity sha512-+o2q111WEx4srBs7L9eJmcwi655eD8sXniLqMB93TBK9GrNzGrxDWSjiqz2hLU0Ha8MTXFIP0yd9fNdP+m43ZQ==

"@babel/plugin-proposal-async-generator-functions@^7.2.0":
version "7.2.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
Expand Down Expand Up @@ -326,10 +371,10 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"

"@babel/plugin-transform-block-scoping@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.5.5.tgz#a35f395e5402822f10d2119f6f8e045e3639a2ce"
integrity sha512-82A3CLRRdYubkG85lKwhZB0WZoHxLGsJdux/cOVaJCJpvYFl1LVzAIFyRsa7CvXqW8rBM4Zf3Bfn8PHt5DP0Sg==
"@babel/plugin-transform-block-scoping@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.6.0.tgz#c49e21228c4bbd4068a35667e6d951c75439b1dc"
integrity sha512-tIt4E23+kw6TgL/edACZwP1OUKrjOTyMrFMLoT5IOFrfMRabCgekjqFd5o6PaAMildBu46oFkekIdMuGkkPEpA==
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
lodash "^4.17.13"
Expand All @@ -355,10 +400,10 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"

"@babel/plugin-transform-destructuring@^7.5.0":
version "7.5.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.0.tgz#f6c09fdfe3f94516ff074fe877db7bc9ef05855a"
integrity sha512-YbYgbd3TryYYLGyC7ZR+Tq8H/+bCmwoaxHfJHupom5ECstzbRLTch6gOQbhEY9Z4hiCNHEURgq06ykFv9JZ/QQ==
"@babel/plugin-transform-destructuring@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
integrity sha512-2bGIS5P1v4+sWTCnKNDZDxbGvEqi0ijeqM/YqHtVGrvG2y0ySgnEEhXErvE9dA0bnIzY9bIzdFK0jFA46ASIIQ==
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"

Expand Down Expand Up @@ -424,10 +469,10 @@
"@babel/helper-plugin-utils" "^7.0.0"
babel-plugin-dynamic-import-node "^2.3.0"

"@babel/plugin-transform-modules-commonjs@^7.5.0":
version "7.5.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.5.0.tgz#425127e6045231360858eeaa47a71d75eded7a74"
integrity sha512-xmHq0B+ytyrWJvQTc5OWAC4ii6Dhr0s22STOoydokG51JjWhyYo5mRPXoi+ZmtHQhZZwuXNN+GG5jy5UZZJxIQ==
"@babel/plugin-transform-modules-commonjs@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.6.0.tgz#39dfe957de4420445f1fcf88b68a2e4aa4515486"
integrity sha512-Ma93Ix95PNSEngqomy5LSBMAQvYKVe3dy+JlVJSHEXZR5ASL9lQBedMiCyVtmTLraIDVRE3ZjTZvmXXD2Ozw3g==
dependencies:
"@babel/helper-module-transforms" "^7.4.4"
"@babel/helper-plugin-utils" "^7.0.0"
Expand All @@ -451,12 +496,12 @@
"@babel/helper-module-transforms" "^7.1.0"
"@babel/helper-plugin-utils" "^7.0.0"

"@babel/plugin-transform-named-capturing-groups-regex@^7.4.5":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.5.tgz#9d269fd28a370258199b4294736813a60bbdd106"
integrity sha512-z7+2IsWafTBbjNsOxU/Iv5CvTJlr5w4+HGu1HovKYTtgJ362f7kBcQglkfmlspKKZ3bgrbSGvLfNx++ZJgCWsg==
"@babel/plugin-transform-named-capturing-groups-regex@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.6.0.tgz#1e6e663097813bb4f53d42df0750cf28ad3bb3f1"
integrity sha512-jem7uytlmrRl3iCAuQyw8BpB4c4LWvSpvIeXKpMb+7j84lkx4m4mYr5ErAcmN5KM7B6BqrAvRGjBIbbzqCczew==
dependencies:
regexp-tree "^0.1.6"
regexp-tree "^0.1.13"

"@babel/plugin-transform-new-target@^7.4.4":
version "7.4.4"
Expand Down Expand Up @@ -549,10 +594,10 @@
"@babel/helper-regex" "^7.4.4"
regexpu-core "^4.5.4"

"@babel/preset-env@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.5.tgz#bc470b53acaa48df4b8db24a570d6da1fef53c9a"
integrity sha512-GMZQka/+INwsMz1A5UEql8tG015h5j/qjptpKY2gJ7giy8ohzU710YciJB5rcKsWGWHiW3RUnHib0E5/m3Tp3A==
"@babel/preset-env@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
integrity sha512-1efzxFv/TcPsNXlRhMzRnkBFMeIqBBgzwmZwlFDw5Ubj0AGLeufxugirwZmkkX/ayi3owsSqoQ4fw8LkfK9SYg==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/helper-plugin-utils" "^7.0.0"
Expand All @@ -570,10 +615,10 @@
"@babel/plugin-transform-arrow-functions" "^7.2.0"
"@babel/plugin-transform-async-to-generator" "^7.5.0"
"@babel/plugin-transform-block-scoped-functions" "^7.2.0"
"@babel/plugin-transform-block-scoping" "^7.5.5"
"@babel/plugin-transform-block-scoping" "^7.6.0"
"@babel/plugin-transform-classes" "^7.5.5"
"@babel/plugin-transform-computed-properties" "^7.2.0"
"@babel/plugin-transform-destructuring" "^7.5.0"
"@babel/plugin-transform-destructuring" "^7.6.0"
"@babel/plugin-transform-dotall-regex" "^7.4.4"
"@babel/plugin-transform-duplicate-keys" "^7.5.0"
"@babel/plugin-transform-exponentiation-operator" "^7.2.0"
Expand All @@ -582,10 +627,10 @@
"@babel/plugin-transform-literals" "^7.2.0"
"@babel/plugin-transform-member-expression-literals" "^7.2.0"
"@babel/plugin-transform-modules-amd" "^7.5.0"
"@babel/plugin-transform-modules-commonjs" "^7.5.0"
"@babel/plugin-transform-modules-commonjs" "^7.6.0"
"@babel/plugin-transform-modules-systemjs" "^7.5.0"
"@babel/plugin-transform-modules-umd" "^7.2.0"
"@babel/plugin-transform-named-capturing-groups-regex" "^7.4.5"
"@babel/plugin-transform-named-capturing-groups-regex" "^7.6.0"
"@babel/plugin-transform-new-target" "^7.4.4"
"@babel/plugin-transform-object-super" "^7.5.5"
"@babel/plugin-transform-parameters" "^7.4.4"
Expand All @@ -598,7 +643,7 @@
"@babel/plugin-transform-template-literals" "^7.4.4"
"@babel/plugin-transform-typeof-symbol" "^7.2.0"
"@babel/plugin-transform-unicode-regex" "^7.4.4"
"@babel/types" "^7.5.5"
"@babel/types" "^7.6.0"
browserslist "^4.6.0"
core-js-compat "^3.1.1"
invariant "^2.2.2"
Expand All @@ -614,6 +659,15 @@
"@babel/parser" "^7.4.4"
"@babel/types" "^7.4.4"

"@babel/template@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
integrity sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==
dependencies:
"@babel/code-frame" "^7.0.0"
"@babel/parser" "^7.6.0"
"@babel/types" "^7.6.0"

"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb"
Expand All @@ -629,6 +683,21 @@
globals "^11.1.0"
lodash "^4.17.13"

"@babel/traverse@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.0.tgz#389391d510f79be7ce2ddd6717be66d3fed4b516"
integrity sha512-93t52SaOBgml/xY74lsmt7xOR4ufYvhb5c5qiM6lu4J/dWGMAfAh6eKw4PjLes6DI6nQgearoxnFJk60YchpvQ==
dependencies:
"@babel/code-frame" "^7.5.5"
"@babel/generator" "^7.6.0"
"@babel/helper-function-name" "^7.1.0"
"@babel/helper-split-export-declaration" "^7.4.4"
"@babel/parser" "^7.6.0"
"@babel/types" "^7.6.0"
debug "^4.1.0"
globals "^11.1.0"
lodash "^4.17.13"

"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a"
Expand All @@ -638,6 +707,15 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"

"@babel/types@^7.6.0":
version "7.6.1"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.1.tgz#53abf3308add3ac2a2884d539151c57c4b3ac648"
integrity sha512-X7gdiuaCmA0uRjCmRtYJNAVCc/q+5xSgsfKJHqMN4iNLILX39677fJE1O40arPMh0TTtS9ItH67yre6c7k6t0g==
dependencies:
esutils "^2.0.2"
lodash "^4.17.13"
to-fast-properties "^2.0.0"

"@cnakazawa/watch@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
Expand Down Expand Up @@ -794,10 +872,10 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0"

"@mdi/js@4.1.95":
version "4.1.95"
resolved "https://registry.yarnpkg.com/@mdi/js/-/js-4.1.95.tgz#2339bc40766c7c030e8b1ee3738117bfa695bcc5"
integrity sha512-yWJrAa7rAzGEAQQ4gvb6dpzoOXF+bvQI53TQaV4YNWDoCVkfJD6tIGbou06UJH+ZFZ6Rlo7kA+xWn4E3kPJlvw==
"@mdi/js@4.3.95":
version "4.3.95"
resolved "https://registry.yarnpkg.com/@mdi/js/-/js-4.3.95.tgz#79e3253eeaa6e0cf02733c4c1f65c801d9d4b42c"
integrity sha512-dYJX1q1aDBIpHtTReCnmL4zigvmEPuXdVsw3Sn7190+k8vWaAc8UWMOlMag7S+Ym1C+jeO1S7zE5fdb1gBOB5A==

"@types/babel__core@^7.1.0":
version "7.1.2"
Expand Down Expand Up @@ -3671,10 +3749,10 @@ regex-not@^1.0.0, regex-not@^1.0.2:
extend-shallow "^3.0.2"
safe-regex "^1.1.0"

regexp-tree@^0.1.6:
version "0.1.11"
resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.11.tgz#c9c7f00fcf722e0a56c7390983a7a63dd6c272f3"
integrity sha512-7/l/DgapVVDzZobwMCCgMlqiqyLFJ0cduo/j+3BcDJIB+yJdsYCfKuI3l/04NV+H/rfNRdPIDbXNZHM9XvQatg==
regexp-tree@^0.1.13:
version "0.1.13"
resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.13.tgz#5b19ab9377edc68bc3679256840bb29afc158d7f"
integrity sha512-hwdV/GQY5F8ReLZWO+W1SRoN5YfpOKY6852+tBFcma72DKBIcHjPRIlIvQN35bCOljuAfP2G2iB0FC/w236mUw==

regexpu-core@^4.5.4:
version "4.5.5"
Expand Down Expand Up @@ -4374,10 +4452,10 @@ [email protected]:
core-util-is "1.0.2"
extsprintf "^1.2.0"

vue-jest@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.4.tgz#b6a2b0d874968f26fa775ac901903fece531e08b"
integrity sha512-PY9Rwt4OyaVlA+KDJJ0614CbEvNOkffDI9g9moLQC/2DDoo0YrqZm7dHi13Q10uoK5Nt5WCYFdeAheOExPah0w==
vue-jest@^3.0.5:
version "3.0.5"
resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.5.tgz#d6f124b542dcbff207bf9296c19413f4c40b70c9"
integrity sha512-xWDxde91pDqYBGDlODENZ3ezPgw+IQFoVDtf+5Awlg466w3KvMSqWzs8PxcTeTr+wmAHi0j+a+Lm3R7aUJa1jA==
dependencies:
babel-plugin-transform-es2015-modules-commonjs "^6.26.0"
chalk "^2.1.0"
Expand Down

0 comments on commit 2420f2f

Please sign in to comment.