From 830a88164411a9ad0e7b1940882b4e9b5a496db8 Mon Sep 17 00:00:00 2001
From: Maximilian <mfr@nzke.net>
Date: Thu, 5 Dec 2019 22:05:21 +0100
Subject: [PATCH 1/3] feature: UIKit - logo: replaced ratio property #1111

---
 .../src/scripts/lit-components/pl-header/pl-header.js        | 3 ++-
 .../src/scripts/lit-components/pl-logo/pl-logo.js            | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
index 021d4e96c..0d9f7165d 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
@@ -116,7 +116,8 @@ class Header extends BaseLitComponent {
                   : window.config?.theme?.logo?.url || '/'}"
                 alt-text="${window.config?.theme?.logo?.altText || ''}"
                 theme="${this.themeMode}"
-                ratio="${window.config?.theme?.logo?.ratio || ''}"
+                width="${window.config?.theme?.logo?.width || ''}"
+                height="${window.config?.theme?.logo?.height || ''}"
                 text="${window.config?.theme?.logo?.text === '' ||
                 window.config?.theme?.logo?.text === false ||
                 window.config?.theme?.logo?.text === 'none'
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js
index 68d4f126a..67d7a0179 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js
@@ -20,7 +20,8 @@ class Logo extends BaseLitComponent {
 
   static get properties() {
     return {
-      ratio: String,
+      width: String,
+      height: String,
       theme: String,
       url: String,
       text: String,
@@ -48,6 +49,8 @@ class Logo extends BaseLitComponent {
           alt=${this.altText || 'Pattern Lab Logo'}
           src=${imageSrc}
           class="pl-c-logo__img"
+          width="${this.width}"
+          height="${this.height}"
         />
         ${this.text && this.text !== ''
           ? html`

From c130f69848efdb6145a067532da9d6f9cd1c6517 Mon Sep 17 00:00:00 2001
From: Salem Ghoweri <me@salemghoweri.com>
Date: Thu, 19 Dec 2019 07:21:06 -0500
Subject: [PATCH 2/3] chore: add ifDefined to only add HTML attributes when
 prop values exist

---
 .../src/scripts/lit-components/pl-logo/pl-logo.js            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js
index 67d7a0179..e1ad2dcc7 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.js
@@ -1,4 +1,5 @@
 import { store } from '../../store.js'; // connect to redux
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 import { customElement } from 'lit-element';
 import { BaseLitComponent } from '../../components/base-component';
@@ -49,8 +50,8 @@ class Logo extends BaseLitComponent {
           alt=${this.altText || 'Pattern Lab Logo'}
           src=${imageSrc}
           class="pl-c-logo__img"
-          width="${this.width}"
-          height="${this.height}"
+          width="${ifDefined(this.width)}"
+          height="${ifDefined(this.height)}"
         />
         ${this.text && this.text !== ''
           ? html`

From b0cb3fcab74f9a90fa624b58e9def2cfdc7a8300 Mon Sep 17 00:00:00 2001
From: Salem Ghoweri <me@salemghoweri.com>
Date: Thu, 19 Dec 2019 07:22:29 -0500
Subject: [PATCH 3/3] chore: add ifDefined to height / width props passed to
 the Logo from the Header component

---
 .../src/scripts/lit-components/pl-header/pl-header.js        | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
index 0d9f7165d..a6f1addce 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars, no-param-reassign */
 import { store } from '../../store.js'; // connect to redux
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 import { BaseLitComponent } from '../../components/base-component';
 import { customElement } from 'lit-element';
@@ -116,8 +117,8 @@ class Header extends BaseLitComponent {
                   : window.config?.theme?.logo?.url || '/'}"
                 alt-text="${window.config?.theme?.logo?.altText || ''}"
                 theme="${this.themeMode}"
-                width="${window.config?.theme?.logo?.width || ''}"
-                height="${window.config?.theme?.logo?.height || ''}"
+                width="${ifDefined(window.config?.theme?.logo?.width)}"
+                height="${ifDefined(window.config?.theme?.logo?.height)}"
                 text="${window.config?.theme?.logo?.text === '' ||
                 window.config?.theme?.logo?.text === false ||
                 window.config?.theme?.logo?.text === 'none'