Skip to content

WIP: Include Font Awesome and Material Icons #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nogalpaulina wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WIP: Include Font Awesome and Material Icons #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 12 additions & 49 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
body {
background: #cccccc;
}

.demo__container {
display: grid;
grid-template-columns: repeat(auto-fit, 290px);
Expand All @@ -13,58 +14,20 @@
<script type="module" src="dist/myuw-card.mjs"></script>
<div class="demo__container">
<myuw-card-frame size="full">
<myuw-card-header
slot="myuw-card-header"
title="Icon Link"
></myuw-card-header>
<myuw-icon-link
icon="face"
icon-type="md"
href="https://www.google.com"
></myuw-icon-link>
<myuw-card-footer
slot="myuw-card-footer"
text="Launch app"
href="https://www.google.com"
></myuw-card-footer>
<myuw-card-header slot="myuw-card-header" title="Icon Link"></myuw-card-header>
Copy link
Member

@apetro apetro Jan 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't necessarily need to have an opinion about code style and white space.

I do suggest that if we're going to do automated reformatting of code that's not otherwise being changed,

  1. it can help to do it in separate commits so it's clearer what's a substantive change and what's a style change, and
  2. it can help to codify what style rules and automation we're using. What tools or plugins, configured how? Might be something to document in CONTRIBUTING.md, might even be possible to include tool configuration metadata in this repository.

In other contexts some MyUW projects have tried to "adopt Google style". This has some advantages in tooling support, being three words long, applying across a variety of languages, consisting entirely of a reference to external style so there's less surface to internally argue about and customize style, etc.

<myuw-icon-link icon="face" icon-type="md" href="https://www.google.com"></myuw-icon-link>
<myuw-card-footer slot="myuw-card-footer" text="Launch app" href="https://www.google.com"></myuw-card-footer>
</myuw-card-frame>
<myuw-card-frame size="full">
<myuw-card-header
slot="myuw-card-header"
title="Icon Link and Message"
></myuw-card-header>
<myuw-card-message
message="You've got mail!"
></myuw-card-message>
<myuw-icon-link
icon="fa-bookmark-o"
icon-type="fa"
href="https://www.google.com"
></myuw-icon-link>
<myuw-card-footer
slot="myuw-card-footer"
text="Launch app"
href="https://www.google.com"
></myuw-card-footer>
<myuw-card-header slot="myuw-card-header" title="Icon Link and Message"></myuw-card-header>
<myuw-card-message message="You've got mail!"></myuw-card-message>
<myuw-icon-link icon="far fa-bookmark" icon-type="fa" href="https://www.google.com"></myuw-icon-link>
<myuw-card-footer slot="myuw-card-footer" text="Launch app" href="https://www.google.com"></myuw-card-footer>
</myuw-card-frame>
<myuw-card-frame size="full">
<myuw-card-header
slot="myuw-card-header"
title="Icon Link and Warn Message"
></myuw-card-header>
<myuw-card-message
message="Time to wake up!"
variant="warn"
></myuw-card-message>
<myuw-icon-link
icon="alarm"
icon-type="md"
href="https://www.google.com"
></myuw-icon-link>
<myuw-card-footer
slot="myuw-card-footer"
text="Launch app"
href="https://www.google.com"
></myuw-card-footer>
<myuw-card-header slot="myuw-card-header" title="Icon Link and Warn Message"></myuw-card-header>
<myuw-card-message message="Time to wake up!" variant="warn"></myuw-card-message>
<myuw-icon-link icon="alarm" icon-type="md" href="https://www.google.com"></myuw-icon-link>
<myuw-card-footer slot="myuw-card-footer" text="Launch app" href="https://www.google.com"></myuw-card-footer>
</myuw-card-frame>
</div>
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@myuw-web-components/myuw-card",
"version": "1.3.1",
"version": "1.3.2",
"description": "",
"module": "dist/myuw-card.min.mjs",
"browser": "dist/myuw-card.js",
Expand Down
16 changes: 8 additions & 8 deletions src/content/myuw-icon-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export class MyUWIconLink extends HTMLElement {
}

static get template() {
if (this._template === undefined) {
this._template = document.createElement("template");
this._template.innerHTML = `
if (this._template===undefined) {
this._template=document.createElement("template");
this._template.innerHTML=`
<style>
a {
text-decoration: none;
Expand All @@ -24,7 +24,7 @@ export class MyUWIconLink extends HTMLElement {
.material-icons {
font-family: "Material Icons" !important;
}
.material-icons.md-70, .fa.fa-70 {
.material-icons.md-70, .fa-70 {
font-size: 70px;
}
</style>
Expand All @@ -44,19 +44,19 @@ export class MyUWIconLink extends HTMLElement {
this.shadowRoot
.getElementById("container")
.appendChild(createIconElement(this.iconType, this.icon));
this.shadowRoot.getElementById("link").href = this.href;
this.shadowRoot.getElementById("link").href=this.href;
}

get icon() {
return this.getAttribute("icon") || "";
return this.getAttribute("icon")||"";
}

get iconType() {
return this.getAttribute("icon-type") || "";
return this.getAttribute("icon-type")||"";
}

get href() {
return this.getAttribute("href") || "#";
return this.getAttribute("href")||"#";
}
}

Expand Down
14 changes: 7 additions & 7 deletions src/content/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export const iconMap = {
export const iconMap={
md: {
styleUrl: "https://fonts.googleapis.com/icon?family=Material+Icons",
classes: "material-icons md-70",
},
fa: {
styleUrl:
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
classes: "fa fa-70",
"https://use.fontawesome.com/releases/v5.1.0/css/all.css",
Copy link
Member

@apetro apetro Jan 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's stick with version 4.7.0 if at all possible, at least until we can demonstrate working on version. The reason for this is status quo production MyUW is using version 4.7.0, so if this also supports 4.7.0, it'll be more interchangable with what we're already running and the icons reference in the current production data.

Switching Font Awesome versions is going to entail auditing/updating those icon usages to ensure they're using icon aliases that will work moving forward and might couple adopting this Web Component with making corresponding data changes.

So. Not never on the Font Awesome upgrade, but not in the same transaction as flopping over to this Web Component, is my suggestion.

classes: "fa-70"
},
};

Expand All @@ -15,12 +15,12 @@ export const iconMap = {
* @param {string|undefined} icon
* @returns HTMLElement
*/
export function createIconElement(iconType, icon = undefined) {
const node = document.createElement("i");
export function createIconElement(iconType, icon=undefined) {
const node=document.createElement("i");
switch (iconType) {
case "md": {
node.setAttribute("class", iconMap.md.classes);
node.innerText = icon;
node.innerText=icon;
break;
}
case "fa": {
Expand All @@ -37,7 +37,7 @@ export function createIconElement(iconType, icon = undefined) {
* @returns HTMLElement
*/
export function createStyleElement(iconType) {
const node = document.createElement("link");
const node=document.createElement("link");
node.setAttribute("rel", "stylesheet");
node.setAttribute("href", iconMap[iconType].styleUrl);
return node;
Expand Down
16 changes: 16 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,19 @@ export {
MyUWCardMessage,
MyUWIconLink,
};

// Include Font Awesome Icons
(function () {
var fontAwesomeInclude=document.createElement('link');
fontAwesomeInclude.href='https://use.fontawesome.com/releases/v5.12.0/css/all.css';
fontAwesomeInclude.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(fontAwesomeInclude);
})();

// Include Material Icons
(function () {
var matIconsInclude=document.createElement('link');
matIconsInclude.href='https://fonts.googleapis.com/icon?family=Material+Icons';
matIconsInclude.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(matIconsInclude);
})();