Merge pull request #1112 from mfranzke/feature-uikit-ratio-width-height

feature: UIKit - logo: replaced ratio property #1111

Author: sghoweri

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,7 +117,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="${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'

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';
@@ -20,7 +21,8 @@ class Logo extends BaseLitComponent {
 
   static get properties() {
     return {
-      ratio: String,
+      width: String,
+      height: String,
       theme: String,
       url: String,
       text: String,
@@ -48,6 +50,8 @@ class Logo extends BaseLitComponent {
           alt=${this.altText || 'Pattern Lab Logo'}
           src=${imageSrc}
           class="pl-c-logo__img"
+          width="${ifDefined(this.width)}"
+          height="${ifDefined(this.height)}"
         />
         ${this.text && this.text !== ''
           ? html`