From c7c3b8cf56c2f87130d8ca485b4701469a2328a5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 24 Jan 2018 18:20:10 -0500
Subject: [PATCH] fix(note): add tests and font family for note as standalone

---
 .../components/badge/test/basic/index.html    |  4 +-
 .../core/src/components/note/note.ios.scss    |  2 +
 .../src/components/note/note.ios.vars.scss    |  5 +-
 .../core/src/components/note/note.md.scss     |  2 +
 .../src/components/note/note.md.vars.scss     |  5 +-
 .../src/components/note/test/basic/index.html | 95 +++++++++++++++++++
 .../note/test/standalone/index.html           | 35 +++++++
 7 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/components/note/test/basic/index.html
 create mode 100644 packages/core/src/components/note/test/standalone/index.html

diff --git a/packages/core/src/components/badge/test/basic/index.html b/packages/core/src/components/badge/test/basic/index.html
index 8a08ca17a3..51128501c5 100644
--- a/packages/core/src/components/badge/test/basic/index.html
+++ b/packages/core/src/components/badge/test/basic/index.html
@@ -21,7 +21,7 @@
         <ion-list>
           <ion-list-header>Badges Right</ion-list-header>
           <ion-item>
-            <ion-badge slot="end" color="primary">99</ion-badge>
+            <ion-badge slot="end">99</ion-badge>
             <ion-label>Default Badge</ion-label>
           </ion-item>
           <ion-item>
@@ -53,7 +53,7 @@
         <ion-list>
           <ion-list-header>Badges Left</ion-list-header>
           <ion-item>
-            <ion-badge slot="start" color="primary">99</ion-badge>
+            <ion-badge slot="start">99</ion-badge>
             <ion-label>Default Badge</ion-label>
           </ion-item>
           <ion-item>
diff --git a/packages/core/src/components/note/note.ios.scss b/packages/core/src/components/note/note.ios.scss
index 1a9c50f7cd..87d71ffc7a 100644
--- a/packages/core/src/components/note/note.ios.scss
+++ b/packages/core/src/components/note/note.ios.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 .note-ios {
+  font-family: $note-ios-font-family;
+
   color: $note-ios-color;
 }
 
diff --git a/packages/core/src/components/note/note.ios.vars.scss b/packages/core/src/components/note/note.ios.vars.scss
index 1061a24b3d..e45695ef90 100644
--- a/packages/core/src/components/note/note.ios.vars.scss
+++ b/packages/core/src/components/note/note.ios.vars.scss
@@ -3,5 +3,8 @@
 // iOS Note
 // --------------------------------------------------
 
+/// @prop - Font family of the note
+$note-ios-font-family:    $font-family-ios-base !default;
+
 /// @prop - Text color of the note
-$note-ios-color:      darken($list-ios-border-color, 10%) !default;
+$note-ios-color:          darken($list-ios-border-color, 10%) !default;
diff --git a/packages/core/src/components/note/note.md.scss b/packages/core/src/components/note/note.md.scss
index df0605d513..1061b45e96 100644
--- a/packages/core/src/components/note/note.md.scss
+++ b/packages/core/src/components/note/note.md.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 .note-md {
+  font-family: $note-md-font-family;
+
   color: $note-md-color;
 }
 
diff --git a/packages/core/src/components/note/note.md.vars.scss b/packages/core/src/components/note/note.md.vars.scss
index f09d7ea38b..4537ce4576 100644
--- a/packages/core/src/components/note/note.md.vars.scss
+++ b/packages/core/src/components/note/note.md.vars.scss
@@ -3,5 +3,8 @@
 // Material Design Note
 // --------------------------------------------------
 
+/// @prop - Font family of the note
+$note-md-font-family:    $font-family-md-base !default;
+
 /// @prop - Text color of the note
-$note-md-color:      darken($list-md-border-color, 10%) !default;
+$note-md-color:          darken($list-md-border-color, 10%) !default;
diff --git a/packages/core/src/components/note/test/basic/index.html b/packages/core/src/components/note/test/basic/index.html
new file mode 100644
index 0000000000..8a0ecdeafb
--- /dev/null
+++ b/packages/core/src/components/note/test/basic/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Note - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Note - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-list-header>Notes Right</ion-list-header>
+          <ion-item>
+            <ion-note slot="end">99</ion-note>
+            <ion-label>Default Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="end" color="primary">99</ion-note>
+            <ion-label>Primary Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="end" color="secondary">99</ion-note>
+            <ion-label>Secondary Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="end" color="danger">99</ion-note>
+            <ion-label>Danger Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="end" color="light">99</ion-note>
+            <ion-label>Light Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="end" color="dark">99</ion-note>
+            <ion-label>Dark Note</ion-label>
+          </ion-item>
+          <ion-item onclick="toggleColor()">
+            <ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
+            <ion-label>Dynamic Note Color (toggle)</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Notes Left</ion-list-header>
+          <ion-item>
+            <ion-note slot="start">99</ion-note>
+            <ion-label>Default Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="start" color="primary">99</ion-note>
+            <ion-label>Primary Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="start" color="secondary">99</ion-note>
+            <ion-label>Secondary Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="start" color="danger">99</ion-note>
+            <ion-label>Danger Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="start" color="light">99</ion-note>
+            <ion-label>Light Note</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-note slot="start" color="dark">99</ion-note>
+            <ion-label>Dark Note</ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+    </ion-page>
+  </ion-app>
+
+  <script>
+    const note = document.querySelector('#toggleColor');
+
+    function toggleColor() {
+      const prev = note.getAttribute('color');
+      note.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
+      note.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
+    }
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/note/test/standalone/index.html b/packages/core/src/components/note/test/standalone/index.html
new file mode 100644
index 0000000000..b891026531
--- /dev/null
+++ b/packages/core/src/components/note/test/standalone/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Note - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <!-- Default Note -->
+  <ion-note>Default Note</ion-note>
+
+  <!-- Note Colors -->
+  <ion-note color="primary">Primary Note</ion-note>
+  <ion-note color="secondary">Secondary Note</ion-note>
+  <ion-note color="danger">Danger Note</ion-note>
+  <ion-note color="light">Light Note</ion-note>
+  <ion-note color="dark">Dark Note</ion-note>
+
+  <!-- Notes in a List -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Note (End)</ion-label>
+      <ion-note slot="end">On</ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-note slot="start">Off</ion-note>
+      <ion-label>Note (Start)</ion-label>
+    </ion-item>
+  </ion-list>
+</body>
+</html>