From 702cd6e2267dce668d4353a9d1464cb2611789f9 Mon Sep 17 00:00:00 2001
From: Roman Axelrod <roman@axe-web.com>
Date: Tue, 15 Nov 2022 07:59:05 +0200
Subject: [PATCH] Added StyleGuideUrl to top panel.

---
 layouts/partials/toolbar.hbs                    | 5 ++++-
 layouts/scripts/toolbar/images/icon-palette.svg | 4 ++++
 layouts/styles/page--main.css                   | 6 +++++-
 layouts/styles/page--main.css.map               | 2 +-
 layouts/styles/page--main.scss                  | 5 +++++
 package.json                                    | 4 ++--
 6 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 layouts/scripts/toolbar/images/icon-palette.svg

diff --git a/layouts/partials/toolbar.hbs b/layouts/partials/toolbar.hbs
index b6ebf77..e12aa92 100644
--- a/layouts/partials/toolbar.hbs
+++ b/layouts/partials/toolbar.hbs
@@ -9,6 +9,9 @@
   </div>
 
   <div class="page_toolbar__right">
-    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab"></a>
+    {{#if config.styleGuideUrl}}
+      <a href="{{ config.styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
+    {{/if}}
+    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab" title="Open in New Window"></a>
   </div>
 </header>
diff --git a/layouts/scripts/toolbar/images/icon-palette.svg b/layouts/scripts/toolbar/images/icon-palette.svg
new file mode 100644
index 0000000..1edd8d6
--- /dev/null
+++ b/layouts/scripts/toolbar/images/icon-palette.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#21252d">
+  <path
+    d="M24 45.25q-4.35 0-8.225-1.675T9 39q-2.9-2.9-4.575-6.775Q2.75 28.35 2.75 24q0-4.5 1.675-8.375t4.625-6.75Q12 6 15.95 4.35q3.95-1.65 8.4-1.65 4.2 0 8 1.425t6.675 3.95Q41.9 10.6 43.6 14.05q1.7 3.45 1.7 7.5 0 5.7-3.2 9.35-3.2 3.65-8.9 3.65h-2.9q-.8 0-1.4.65-.6.65-.6 1.45 0 1.25.5 1.75t.5 1.55q0 2.2-1.5 3.75-1.5 1.55-3.8 1.55ZM24 24Zm-11.2 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.1-8.15q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm10.25 0q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm6.2 8.15q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1.05 0-1.775.75-.725.75-.725 1.75t.725 1.75q.725.75 1.775.75ZM23.8 40.55q.4 0 .6-.175.2-.175.2-.625 0-.7-.75-1.175-.75-.475-.75-2.375 0-2.45 1.65-4.4 1.65-1.95 4.1-1.95h4.35q3.7 0 5.525-2.2 1.825-2.2 1.825-5.8 0-6.6-4.925-10.5Q30.7 7.45 24.4 7.45q-7.1 0-12.025 4.825Q7.45 17.1 7.45 24q0 6.9 4.8 11.725 4.8 4.825 11.55 4.825Z"/>
+</svg>
diff --git a/layouts/styles/page--main.css b/layouts/styles/page--main.css
index 3f398ed..07f8b78 100644
--- a/layouts/styles/page--main.css
+++ b/layouts/styles/page--main.css
@@ -139,7 +139,7 @@ body {
   max-width: var(--breakpoint);
 }
 
-.open_in_new_tab {
+.open_in_new_tab, .palette {
   --size: 1.5rem;
   width: var(--size);
   height: var(--size);
@@ -158,4 +158,8 @@ body {
   outline: none;
 }
 
+.palette {
+  background-image: url("/scripts/toolbar/images/icon-palette.svg");
+}
+
 /*# sourceMappingURL=page--main.css.map */
diff --git a/layouts/styles/page--main.css.map b/layouts/styles/page--main.css.map
index 795b850..fb4ef49 100644
--- a/layouts/styles/page--main.css.map
+++ b/layouts/styles/page--main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE","file":"page--main.css"}
\ No newline at end of file
diff --git a/layouts/styles/page--main.scss b/layouts/styles/page--main.scss
index 982e056..ad69a34 100644
--- a/layouts/styles/page--main.scss
+++ b/layouts/styles/page--main.scss
@@ -107,3 +107,8 @@ body {
   border-radius: 0.25rem;
   outline: none;
 }
+
+.palette {
+  @extend .open_in_new_tab;
+  background-image: url("/scripts/toolbar/images/icon-palette.svg");
+}
diff --git a/package.json b/package.json
index 6721084..cce4388 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,9 @@
 	},
 	"scripts": {
 		"start": "component-dev",
-		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.js",
+		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/header/config BLOCK_NAME=header node server.js",
 		"build": "rollup --config rollup.config.js",
-		"build-platform": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node ./build.js",
+		"build-platform": "NODE_ENV=development NODE_CONFIG_DIR=blocks/header/config BLOCK_NAME=header node ./build.js",
 		"build-platform-cli": "component-build",
 		"dev-js": "rollup --config rollup.config.js --watch"
 	},