Merge pull request #404 from outgrow/master

Add height theme prop to ShopLogo
reactioncommerce · Mar 15, 2019 · a57ac76 · a57ac76
2 parents 31acfc4 + 18a9e4b
commit a57ac76
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/package/src/components/ShopLogo/v1/ShopLogo.js b/package/src/components/ShopLogo/v1/ShopLogo.js
@@ -1,12 +1,16 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { addTypographyStyles } from "../../../utils";
+import { addTypographyStyles, applyTheme } from "../../../utils";
 
 const Container = styled.div`
   ${addTypographyStyles("ShopLogo", "titleTextBold")}
 `;
 
+const Logo = styled.img`
+  height: ${applyTheme("ShopLogo.height")};
+`;
+
 export default class ShopLogo extends Component {
   static propTypes = {
     /**
@@ -32,7 +36,7 @@ export default class ShopLogo extends Component {
       <Container className={className}>
         {
           shopLogoUrl ? (
-            <img src={shopLogoUrl} alt={shopName} />
+            <Logo src={shopLogoUrl} alt={shopName} />
           ) : (
             shopName
           )

diff --git a/package/src/components/ShopLogo/v1/ShopLogo.md b/package/src/components/ShopLogo/v1/ShopLogo.md
@@ -17,8 +17,13 @@ Renders a shop's logo if a logo URL is provided, otherwise, it will render the s
 
 ### Theme
 
-See [Theming Components](./#!/Theming%20Components).
+Assume that any theme prop that does not begin with "rui" is within `rui_components`. See [Theming Components](./#!/Theming%20Components).
+
+| Theme Prop                                         | Default | Description                                                                             |
+| -------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `ShopLogo.height` | `auto` | The height of `ShopLogo`'s `img` tag, when providing a logo URL |
 
 #### Typography
 
 - The text rendered when there is not a logo uses `titleTextBold` style with `rui_components.ShopLogo` override
+
diff --git a/package/src/components/ShopLogo/v1/__snapshots__/ShopLogo.test.js.snap b/package/src/components/ShopLogo/v1/__snapshots__/ShopLogo.test.js.snap
@@ -16,11 +16,16 @@ exports[`basic snapshot 1`] = `
   line-height: 1.25;
 }
 
+.c1 {
+  height: auto;
+}
+
 <div
   className="c0"
 >
   <img
     alt="Reaction"
+    className="c1"
     src="//placehold.it/60"
   />
 </div>

diff --git a/package/src/theme/defaultComponentTheme.js b/package/src/theme/defaultComponentTheme.js
@@ -675,6 +675,9 @@ const rui_components = {
     borderTopLeftRadius: 0,
     borderTopRightRadius: standardBorderRadius
   },
+  ShopLogo: {
+    height: "auto"
+  },
   StockWarning: {
     typography: {
       color: colors.red