Skip to content

Commit

Permalink
BannerUpsell: removed max witdh for message (#3860)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlbertCarreras
AlbertCarreras authored Nov 6, 2024
1 parent 28b5371 commit d11ca45
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 144 deletions.
26 changes: 12 additions & 14 deletions packages/gestalt/src/BannerUpsell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,20 +229,18 @@ export default function BannerUpsell({
smMarginEnd={6}
smMarginStart={imageData ? 6 : 0}
>
<Box maxWidth={648}>
{title && (
<Box marginBottom={2}>
<Text
align={responsiveMinWidth === 'xs' ? 'center' : 'start'}
size="400"
weight="bold"
>
{title}
</Text>
</Box>
)}
{messageElement}
</Box>
{title && (
<Box marginBottom={2}>
<Text
align={responsiveMinWidth === 'xs' ? 'center' : 'start'}
size="400"
weight="bold"
>
{title}
</Text>
</Box>
)}
{messageElement}
{children && (
<Box
flex="grow"
Expand Down
188 changes: 58 additions & 130 deletions packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,9 @@ exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
Insert a clever upsell message here
</div>
</div>
</div>
Expand Down Expand Up @@ -89,28 +80,19 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
className="box flexGrow marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart600 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
<div
className="box flexGrow justifyEnd smDisplayFlex smMarginEnd400 smPaddingY300"
style={
Expand Down Expand Up @@ -300,28 +282,19 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart600 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -438,28 +411,19 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -576,28 +540,19 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -703,28 +658,19 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -792,28 +738,19 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -872,28 +809,19 @@ exports[`<BannerUpsell /> message + title 1`] = `
className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
>
<div
className="box"
style={
Object {
"maxWidth": 648,
}
}
className="box marginBottom200"
>
<div
className="box marginBottom200"
>
<div
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
>
Insert a clever upsell message here
A Title
</div>
</div>
<div
className="default alignStart breakWord Text fontSize300 fontWeightNormal"
>
Insert a clever upsell message here
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit d11ca45

Please sign in to comment.