Refactor icon component

Inline svg via data URIs and build out color modifier classes
thomas-lowry · Apr 23, 2020 · 2f1a462 · 2f1a462
1 parent 0990eab
commit 2f1a462
Show file tree

Hide file tree

Showing 94 changed files with 727 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "autoprefixer": "^9.7.6",
     "node-sass": "^4.13.1",
     "npm-run-all": "^4.1.5",
+    "postcss-inline-svg": "^4.1.0",
     "prettier": "^2.0.5",
     "rollup": "^1.16.2",
     "rollup-plugin-postcss": "^2.9.0",

diff --git a/public/figma-plugin-ds.css b/public/figma-plugin-ds.css
diff --git a/public/figma-plugin-ds.js b/public/figma-plugin-ds.js
@@ -1,42 +1,41 @@
-(function () {
-	'use strict';
+'use strict';
 
-	const selector = 'disclosure';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-	const disclosureHandler = function (event) {
-		let disclosureSet = this.parentNode.parentNode;
-		let disclosuresInSet = disclosureSet.querySelectorAll('li');
-		let alreadyActive = this.parentNode.classList.contains(selector + '--expanded');
+const selector = 'disclosure';
 
-		disclosuresInSet.forEach((disclosure) => {
-			disclosure.classList.remove(selector + '--expanded');
-		});
+const disclosureHandler = function (event) {
+	let disclosureSet = this.parentNode.parentNode;
+	let disclosuresInSet = disclosureSet.querySelectorAll('li');
+	let alreadyActive = this.parentNode.classList.contains(selector + '--expanded');
+
+	disclosuresInSet.forEach((disclosure) => {
+		disclosure.classList.remove(selector + '--expanded');
+	});
 
-		this.parentNode.classList.add(selector + '--expanded');
+	this.parentNode.classList.add(selector + '--expanded');
 
-		if (alreadyActive) {
-			this.parentNode.classList.remove(selector + '--expanded');
-		}
-	};
+	if (alreadyActive) {
+		this.parentNode.classList.remove(selector + '--expanded');
+	}
+};
 
-	const disclosure = {
-		init: function () {
-			let disclosures = document.querySelectorAll('.' + selector + '__label');
+const disclosure = {
+	init: function () {
+		let disclosures = document.querySelectorAll('.' + selector + '__label');
 
-			disclosures.forEach((disclosure) => {
-				disclosure.addEventListener('click', disclosureHandler, false);
-			});
-		},
+		disclosures.forEach((disclosure) => {
+			disclosure.addEventListener('click', disclosureHandler, false);
+		});
+	},
 
-		destroy: function () {
-			let disclosures = document.querySelectorAll('.' + selector + '__label');
+	destroy: function () {
+		let disclosures = document.querySelectorAll('.' + selector + '__label');
 
-			disclosures.forEach((disclosure) => {
-				disclosure.removeEventListener('click', disclosureHandler, false);
-			});
-		}
-	};
+		disclosures.forEach((disclosure) => {
+			disclosure.removeEventListener('click', disclosureHandler, false);
+		});
+	}
+};
 
-	// import css to be processed to css file
-	disclosure.init();
-})();
+exports.disclosure = disclosure;
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,24 @@
 <body class="m-medium">
 
 
+<h3>Icons</h3>
+
+<div class="flex row">
+    <div class="icon icon--theme icon"></div>
+    <div class="icon icon--theme icon--black8"></div>
+    <div class="icon icon--theme icon--black3"></div>
+    <div class="icon icon--theme icon--blue"></div>
+    <div class="icon icon--theme icon--purple"></div>
+    <div class="icon icon--theme icon--red"></div>
+    <div class="icon icon--theme icon--yellow"></div>
+    <div class="icon icon--theme icon--hot-pink"></div>
+    <div class="icon icon--theme icon--green"></div>
+</div>
+
+
+</div>
+
+<hr>
 
 <h3>Buttons</h3>
 <button class="button button--primary mb-xxsmall">Label</button>

diff --git a/rollup.config.js b/rollup.config.js
@@ -4,14 +4,15 @@ import { terser } from 'rollup-plugin-terser';
 import prettier from 'rollup-plugin-prettier';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
+import inlineSVG from 'postcss-inline-svg';
 
 const production = !process.env.ROLLUP_WATCH;
 
 export default {
 	input: 'src/js/figma-plugin-ds.js',
 	output: {
 		file: 'public/figma-plugin-ds.js',
-		format: 'iife'
+		format: 'cjs'
 	},
 	plugins: [
 		resolve(),
@@ -23,7 +24,8 @@ export default {
 			extract: true,
 			minimize: production && true, // minify, only on build for prod
 			plugins: [
-				autoprefixer()
+				autoprefixer(),
+				inlineSVG()
 			]
 		}),
 		production && terser() // minify, only on build for prod