From f2a3ec08cc8046ea379a348ccd62f4f797c329b5 Mon Sep 17 00:00:00 2001
From: Firm-Soft <evan.w.mclaughlin@gmail.com>
Date: Tue, 1 Sep 2020 12:54:51 -0400
Subject: [PATCH 1/4] Add width knob

---
 demos/storybook/stories/hero/within-a-HeroBanner.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/demos/storybook/stories/hero/within-a-HeroBanner.tsx b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
index e2f1ca3a9..a3b8cc2a7 100644
--- a/demos/storybook/stories/hero/within-a-HeroBanner.tsx
+++ b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
@@ -38,7 +38,8 @@ export const inBanner = (): StoryFnReactReturnType => {
         />,
     ];
     const numberDisplayed = number('count', 4, { range: true, min: 0, max: 4, step: 1 });
-    return <HeroBanner style={{ width: numberDisplayed * 100 }}>{heroes.slice(0, numberDisplayed)}</HeroBanner>;
+    const bannerWidth = number('width', 400, { range: true, min: 300, max: 600, step: 50 });
+    return <HeroBanner style={{ width: bannerWidth }}>{heroes.slice(0, numberDisplayed)}</HeroBanner>;
 };
 
 inBanner.story = { name: 'within a Hero Banner' };

From db2acc2504a414684080cb3231b06147e60344ac Mon Sep 17 00:00:00 2001
From: Firm-Soft <evan.w.mclaughlin@gmail.com>
Date: Tue, 1 Sep 2020 13:35:13 -0400
Subject: [PATCH 2/4] Add border radius around heroBanner

---
 demos/storybook/stories/hero/within-a-HeroBanner.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/demos/storybook/stories/hero/within-a-HeroBanner.tsx b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
index a3b8cc2a7..d945e1c1c 100644
--- a/demos/storybook/stories/hero/within-a-HeroBanner.tsx
+++ b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
@@ -3,6 +3,7 @@ import { CurrentCircled, GradeA, Leaf, Temp } from '@pxblue/icons-mui';
 import { Hero, HeroBanner } from '@pxblue/react-components';
 import { number } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+
 import React from 'react';
 
 export const inBanner = (): StoryFnReactReturnType => {
@@ -39,7 +40,11 @@ export const inBanner = (): StoryFnReactReturnType => {
     ];
     const numberDisplayed = number('count', 4, { range: true, min: 0, max: 4, step: 1 });
     const bannerWidth = number('width', 400, { range: true, min: 300, max: 600, step: 50 });
-    return <HeroBanner style={{ width: bannerWidth }}>{heroes.slice(0, numberDisplayed)}</HeroBanner>;
+    return (
+        <HeroBanner style={{ width: bannerWidth, border: `solid 1px ${Colors.gray[500]}`, borderRadius: 4 }}>
+            {heroes.slice(0, numberDisplayed)}
+        </HeroBanner>
+    );
 };
 
 inBanner.story = { name: 'within a Hero Banner' };

From 620d2a1c470494aa92e1676a0aeb3137b04efba7 Mon Sep 17 00:00:00 2001
From: emclaug2 <evan.w.mclaughlin@gmail.com>
Date: Tue, 1 Sep 2020 13:38:12 -0400
Subject: [PATCH 3/4] Lighten the gray

---
 demos/storybook/stories/hero/within-a-HeroBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/storybook/stories/hero/within-a-HeroBanner.tsx b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
index d945e1c1c..0c11e765e 100644
--- a/demos/storybook/stories/hero/within-a-HeroBanner.tsx
+++ b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
@@ -41,7 +41,7 @@ export const inBanner = (): StoryFnReactReturnType => {
     const numberDisplayed = number('count', 4, { range: true, min: 0, max: 4, step: 1 });
     const bannerWidth = number('width', 400, { range: true, min: 300, max: 600, step: 50 });
     return (
-        <HeroBanner style={{ width: bannerWidth, border: `solid 1px ${Colors.gray[500]}`, borderRadius: 4 }}>
+        <HeroBanner style={{ width: bannerWidth, border: `solid 1px ${Colors.gray[200]}`, borderRadius: 4 }}>
             {heroes.slice(0, numberDisplayed)}
         </HeroBanner>
     );

From f5d716d7427e4400ca1d71159d8517b10af5708b Mon Sep 17 00:00:00 2001
From: emclaug2 <evan.w.mclaughlin@gmail.com>
Date: Tue, 1 Sep 2020 14:10:15 -0400
Subject: [PATCH 4/4] Increase min width to 350

---
 demos/storybook/stories/hero/within-a-HeroBanner.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/demos/storybook/stories/hero/within-a-HeroBanner.tsx b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
index 0c11e765e..3ae071163 100644
--- a/demos/storybook/stories/hero/within-a-HeroBanner.tsx
+++ b/demos/storybook/stories/hero/within-a-HeroBanner.tsx
@@ -3,7 +3,6 @@ import { CurrentCircled, GradeA, Leaf, Temp } from '@pxblue/icons-mui';
 import { Hero, HeroBanner } from '@pxblue/react-components';
 import { number } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
-
 import React from 'react';
 
 export const inBanner = (): StoryFnReactReturnType => {
@@ -39,7 +38,7 @@ export const inBanner = (): StoryFnReactReturnType => {
         />,
     ];
     const numberDisplayed = number('count', 4, { range: true, min: 0, max: 4, step: 1 });
-    const bannerWidth = number('width', 400, { range: true, min: 300, max: 600, step: 50 });
+    const bannerWidth = number('width', 400, { range: true, min: 350, max: 600, step: 50 });
     return (
         <HeroBanner style={{ width: bannerWidth, border: `solid 1px ${Colors.gray[200]}`, borderRadius: 4 }}>
             {heroes.slice(0, numberDisplayed)}