From 7700939e3d66c663f092de9b8203f0160f6695fa Mon Sep 17 00:00:00 2001
From: Scott Anderson <scott@influxdata.com>
Date: Wed, 27 Feb 2019 16:03:08 -0700
Subject: [PATCH] created icon shortcode and accompanying styles

---
 assets/styles/layouts/_inline-icons.scss |  7 ++++
 assets/styles/styles-default.scss        |  1 +
 content/v2.0/example.md                  |  2 +-
 layouts/shortcodes/icon.html             | 51 ++++++++++++++++++++++++
 layouts/shortcodes/uicon.html            | 17 --------
 5 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 assets/styles/layouts/_inline-icons.scss
 create mode 100644 layouts/shortcodes/icon.html
 delete mode 100644 layouts/shortcodes/uicon.html

diff --git a/assets/styles/layouts/_inline-icons.scss b/assets/styles/layouts/_inline-icons.scss
new file mode 100644
index 000000000..e4ccdffbc
--- /dev/null
+++ b/assets/styles/layouts/_inline-icons.scss
@@ -0,0 +1,7 @@
+// Helper styles for inline icons used with the "icon" shortcode
+.article--content .inline {
+  &.middle:before { vertical-align: middle; }
+  &.xsmall:before { font-size: .8rem; }
+  &.small:before { font-size: .9rem; }
+  &.large:before { font-size: 1.1rem; }
+}
diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss
index 6c52d0e2e..c4acfdce2 100644
--- a/assets/styles/styles-default.scss
+++ b/assets/styles/styles-default.scss
@@ -16,6 +16,7 @@
         "layouts/layout-sidebar-toggle",
         "layouts/layout-content-wrapper",
         "layouts/layout-article",
+        "layouts/inline-icons",
         "layouts/syntax-highlighting",
         "layouts/algolia-search-overrides",
         "layouts/layout-landing",
diff --git a/content/v2.0/example.md b/content/v2.0/example.md
index 67f1b7f8b..fdfe24b38 100644
--- a/content/v2.0/example.md
+++ b/content/v2.0/example.md
@@ -11,7 +11,7 @@ enterprise_some: true
 "v2.0/tags": [influxdb]
 ---
 
-This is a paragraph. Lorem ipsum dolor ({{< uicon "add-cell" >}}) sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
+This is a paragraph. Lorem ipsum dolor ({{< icon "wrench" >}}) sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
 
 ## h2 This is a header2
 This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html
new file mode 100644
index 000000000..e9318d630
--- /dev/null
+++ b/layouts/shortcodes/icon.html
@@ -0,0 +1,51 @@
+{{ $icon :=  .Get 0 | default "nav-admin" }}
+
+{{ if or (eq $icon "nav-admin") (eq $icon "influx") (eq $icon "influx-icon") }}
+<span class="inline icon-ui-influx-icon middle"></span>
+{{ else if or (eq $icon "nav-data-explorer") (eq $icon "data-explorer") (eq $icon "graph") }}
+<span class="inline icon-ui-data-explorer middle large"></span>
+{{ else if or (eq $icon "nav-dashboards") (eq $icon "dashboard") (eq $icon "dashboards") }}
+<span class="inline icon-ui-dashboards middle"></span>
+{{ else if or (eq $icon "nav-tasks") (eq $icon "calendar") (eq $icon "tasks") }}
+<span class="inline icon-ui-calendar"></span>
+{{ else if or (eq $icon "nav-organizations") (eq $icon "nav-orgs") (eq $icon "orgs") (eq $icon "org") }}
+<span class="inline icon-ui-organizations middle"></span>
+{{ else if or (eq $icon "nav-configuration") (eq $icon "nav-config") (eq $icon "wrench") }}
+<span class="inline icon-ui-wrench middle large"></span>
+{{ else if eq $icon "add-cell" }}
+<span class="inline icon-ui-add-cell small"></span>
+{{ else if eq $icon "alert" }}
+<span class="inline icon-ui-alert middle"></span>
+{{ else if or (eq $icon "checkmark") (eq $icon "check") }}
+<span class="inline icon-ui-checkmark middle"></span>
+{{ else if or (eq $icon "gear") (eq $icon "cog") (eq $icon "settings") (eq $icon "config") }}
+<span class="inline icon-ui-cog-thick middle small"></span>
+{{ else if eq $icon "download" }}
+<span class="inline icon-ui-download middle"></span>
+{{ else if or (eq $icon "duplicate") (eq $icon "copy") (eq $icon "clone") }}
+<span class="inline icon-ui-duplicate middle small"></span>
+{{ else if or (eq $icon "export") (eq $icon "save-as") }}
+<span class="inline icon-ui-export middle small"></span>
+{{ else if or (eq $icon "expand") (eq $icon "fullscreen") }}
+<span class="inline icon-ui-fullscreen middle large"></span>
+{{ else if eq $icon "note" }}
+<span class="inline icon-ui-note middle small"></span>
+{{ else if or (eq $icon "note") }}
+<span class="inline icon-ui-note middle small"></span>
+{{ else if eq $icon "pause" }}
+<span class="inline icon-ui-pause middle"></span>
+{{ else if or (eq $icon "pencil") (eq $icon "edit") }}
+<span class="inline icon-ui-pencil middle small"></span>
+{{ else if eq $icon "play" }}
+<span class="inline icon-ui-play middle small"></span>
+{{ else if eq $icon "plus" }}
+<span class="inline icon-ui-plus middle xsmall"></span>
+{{ else if or (eq $icon "refresh") (eq $icon "replay") }}
+<span class="inline icon-ui-refresh middle small"></span>
+{{ else if or (eq $icon "remove") (eq $icon "x") }}
+<span class="inline icon-ui-remove middle small"></span>
+{{ else if eq $icon "search" }}
+<span class="inline icon-ui-search middle small"></span>
+{{ else if eq $icon "triangle" }}
+<span class="inline icon-ui-triangle middle"></span>
+{{ end }}
diff --git a/layouts/shortcodes/uicon.html b/layouts/shortcodes/uicon.html
deleted file mode 100644
index 5b6fb558e..000000000
--- a/layouts/shortcodes/uicon.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{{ $icon :=  .Get 0 | default "nav-admin" }}
-
-{{ if eq $icon "nav-admin" }}
-<span class="icon-ui-influx-icon"></span>
-{{ else if eq $icon "nav-data-explorer" }}
-<span class="icon-ui-data-explorer"></span>
-{{ else if eq $icon "nav-dashboards" }}
-<span class="icon-ui-dashboards"></span>
-{{ else if eq $icon "nav-tasks" }}
-<span class="icon-ui-calendar"></span>
-{{ else if or (eq $icon "nav-organizations") (eq $icon "nav-orgs") }}
-<span class="icon-ui-organizations"></span>
-{{ else if or (eq $icon "nav-configuration") (eq $icon "nav-config") }}
-<span class="icon-ui-wrench"></span>
-{{ else if eq $icon "add-cell" }}
-<span class="icon-ui-add-cell" style="font-size:.9rem"></span>
-{{ end }}