Merge pull request #4 from scriptex/feature/update-implementation

Update implementation
scriptex · Jul 29, 2020 · a632878 · a632878
2 parents 29b5cce + afee5fb
commit a632878
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 114 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,11 @@ In your HTML/JSX markup:
 
 <!-- or with custom color -->
 
-<social-links color="red"></social-links>
+<social-links style="color: red;"></social-links>
+
+<div style="background: black;">
+	<social-links style="color: white;"></social-links>
+</div>
 ```
 
 Currently it includes the following:

diff --git a/assets/npm.svg b/assets/npm.svg
diff --git a/assets/youtube.svg b/assets/youtube.svg
diff --git a/data/README-start.md b/data/README-start.md
@@ -29,7 +29,11 @@ In your HTML/JSX markup:
 
 <!-- or with custom color -->
 
-<social-links color="red"></social-links>
+<social-links style="color: red;"></social-links>
+
+<div style="background: black;">
+	<social-links style="color: white;"></social-links>
+</div>
 ```
 
 Currently it includes the following:
diff --git a/data/sprite.svg b/data/sprite.svg
diff --git a/data/style.css b/data/style.css
@@ -1,7 +1,3 @@
-:host {
-	color: ${this.color};
-}
-
 ul {
 	display: flex;
 	flex-flow: row wrap;
@@ -26,67 +22,60 @@ img {
 	vertical-align: middle;
 }
 
-.svg-email {
-	width: 1.5rem;
-	height: 1.69rem;
+li svg {
 	fill: currentColor;
 }
 
+.svg-npm,
+.svg-email,
 .svg-github,
-.svg-gitlab {
+.svg-gitlab,
+.svg-twitter,
+.svg-codepen,
+.svg-linkedin,
+.svg-google-plus,
+.svg-stackoverflow {
 	width: 1.5rem;
-	height: 1.63rem;
-	fill: currentColor;
 }
 
-.svg-twitter {
-	width: 1.5rem;
-	height: 1.38rem;
-	fill: currentColor;
+.svg-npm,
+.svg-codepen,
+.svg-youtube,
+.svg-codersrank,
+.svg-google-plus,
+.svg-stackoverflow {
+	height: 1.5rem;
 }
 
 .svg-npm {
-	width: 1.5rem;
-	height: 1.5rem;
-	fill: #fff;
-	background-color: currentColor;
 	border-radius: 0.25rem;
 }
 
-.svg-stackoverflow {
-	width: 1.5rem;
-	height: 1.5rem;
-	fill: currentColor;
-}
-
-.svg-youtube {
-	width: 3rem;
-	height: 1.5rem;
-	fill: currentColor;
+.svg-email {
+	height: 1.69rem;
 }
 
+.svg-github,
+.svg-gitlab,
 .svg-linkedin {
-	width: 1.5rem;
 	height: 1.63rem;
-	fill: currentColor;
+}
+
+.svg-twitter {
+	height: 1.38rem;
+}
+
+.svg-youtube {
+	width: 3rem;
 }
 
 .svg-logo {
 	width: 1.75rem;
 	height: 1.75rem;
-	fill: currentColor;
 	stroke: currentColor;
 	stroke-width: 0.325rem;
 }
 
-.svg-codepen,
-.svg-google-plus {
-	width: 1.5rem;
-	height: 1.5rem;
-	fill: currentColor;
-}
-
 .svg-codersrank {
 	width: 2.5rem;
-	height: 1.5rem;
 }
diff --git a/data/template.ts b/data/template.ts
@@ -8,7 +8,6 @@ type Link = {
 };
 
 class Socials extends HTMLElement {
-	private color: string = this.theme || '#000';
 	private items: Link[] = __links__;
 
 	private styleEl: HTMLStyleElement = document.createElement('style');
@@ -20,27 +19,16 @@ class Socials extends HTMLElement {
 
 		this.render();
 
-		const shadowRoot = this.attachShadow({
-			mode: 'closed'
-		});
-
-		this.styleEl.innerHTML = __style__;
+		const shadowRoot = this.attachShadow({ mode: 'open' });
 
 		this.sprite.innerHTML = __sprite__;
+		this.styleEl.innerHTML = __style__;
 
 		shadowRoot.appendChild(this.styleEl.cloneNode(true));
 		shadowRoot.appendChild(this.sprite.content.cloneNode(true));
 		shadowRoot.appendChild(this.template.content.cloneNode(true));
 	}
 
-	get theme(): string {
-		return this.getAttribute('color') || '#000';
-	}
-
-	set theme(color: string) {
-		this.setAttribute('color', color);
-	}
-
 	private render(): void {
 		this.template.innerHTML = `<ul>${this.renderList()}</ul>`;
 	}

diff --git a/demo/index.html b/demo/index.html
@@ -8,7 +8,17 @@
 	<body>
 		<social-links></social-links>
 
-		<social-links color="red"></social-links>
+		<br />
+		<br />
+
+		<social-links style="color: red;"></social-links>
+
+		<br />
+		<br />
+
+		<div style="background: black;">
+			<social-links style="color: white;"></social-links>
+		</div>
 
 		<script src="../dist/index.js"></script>
 	</body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "scriptex-socials",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "A native web component: links to various social media with SVG icons support",
 	"scripts": {
 		"svgo": "svgo -f static/images/svg --config=svgo.yml",

diff --git a/src/index.ts b/src/index.ts