Skip to content

Commit

Permalink
fix(styles): refactor Illustrated Messages to latest design [ci visua…
Browse files Browse the repository at this point in the history 
…l] (#5630)

BREAKING CHANGE: added a container element around illustration and figcaption, added a responsive container
  • Loading branch information
@InnaAtanasova
InnaAtanasova authored Sep 10, 2024
1 parent f505f3a commit 7bc3457
Show file tree
Hide file tree
Showing 6 changed files with 317 additions and 188 deletions.
234 changes: 174 additions & 60 deletions packages/styles/src/illustrated-message.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,179 @@
$block: #{$fd-namespace}-illustrated-message;

.#{$block} {
// Block
--illustratedMessagePadding: 1rem;
--illustratedMessageMaxWidth: 30rem;
--illustrationW: 20rem;
--illustrationH: 15rem;
--illustratedMessageMaxWidth: auto;

// Actions
--actionsMarginInline: 0;
--actionsMarginBlock: 1rem;
--actionsPaddingInlineStart: 0;
--actionsPaddingInlineEnd: 0;

// Illustration
--illustrationMinWidth: 15rem;
--illustrationMaxWidth: 20rem;
--illustrationMinHeight: 11.25rem;
--illustrationMaxHeight: 15rem;
--illustrationMarginBlock: 2rem;
--illustrationMarginInline: 0;
--figcaptionMaxWidth: 25rem;
--illustrationMarginInlineStart: 0;
--illustrationMarginInlineEnd: 0;
--illustrationDisplay: flex;

// Container
--containerFlexDirection: column;

// Figcaption
--figcaptionMaxWidth: 61.9375rem;

// Title
--titleMinWidth: auto;
--titleMarginBottom: 1rem;
--titleFontSize: var(--sapFontHeader2Size);

// Text
--textMinWidth: auto;
--textMarginBottom: 0.5rem;
--actionsMarginBlock: 1rem;
--actionsMarginInline: 0;

@mixin fd-illustarted-messages-dialog() {
// Illustration
--illustrationMinWidth: 10rem;
--illustrationMinHeight: 10rem;
--illustrationMaxWidth: 10rem;
--illustrationMaxHeight: 10rem;
--illustrationMarginBlock: 1rem;

// Title
--titleMarginBottom: 0.5rem;
--titleFontSize: var(--sapFontHeader3Size);

// Figcaption
--figcaptionMaxWidth: 40.5625rem;

// Actions
--actionsMarginBlock: 0.5rem 1rem;
}

@mixin fd-illustarted-messages-spot() {
// Block
--illustratedMessagePadding: 0.5rem;

// Illustration
--illustrationMinWidth: 8rem;
--illustrationMinHeight: 8rem;
--illustrationMaxWidth: 8rem;
--illustrationMaxHeight: 8rem;
--illustrationMarginBlock: 0 0.5rem;

// Title
--titleMarginBottom: 0.5rem;
--titleFontSize: var(--sapFontHeader4Size);

// Figcaption
--figcaptionMaxWidth: 21.5rem;

// Actions
--actionsMarginBlock: 0.5rem;
}

@mixin fd-illustarted-messages-dot() {
// Block
--illustratedMessagePadding: 0.25rem;
--containerFlexDirection: row;

// Illustration
--illustrationMinWidth: 2.8125rem;
--illustrationMaxWidth: 2.8125rem;
--illustrationMinHeight: 2.8125rem;
--illustrationMaxHeight: 2.8125rem;
--illustrationMarginBlock: 0;
--illustrationMarginInlineEnd: 0.25rem;

// Figcaption
--figcaptionMaxWidth: 12.6875rem;

// Title
--titleMarginBottom: 0.25rem;
--titleFontSize: var(--sapFontHeader5Size);

// Text
--textMarginBottom: 0.313rem;

// Actions
--actionsMarginBlock: 0.25rem;
--actionsMarginInline: auto;
--actionsPaddingInlineStart: var(--illustrationMaxWidth);
}

@mixin fd-illustarted-messages-base() {
// Block
--illustratedMessagePadding: 0.25rem;
--illustratedMessageMaxWidth: auto;

// Illustration
--illustrationDisplay: none;

// Figcaption
--figcaptionMaxWidth: 12.6875rem;

// Title
--titleMarginBottom: 0.25rem;
--titleFontSize: var(--sapFontHeader5Size);

// Text
--textMarginBottom: 0.313rem;

// Actions
--actionsMarginBlock: 0.25rem;
--actionsMarginInline: auto;
--actionsPaddingInlineStart: 0;
}

@include fd-reset();

@include fd-flex(column) {
align-items: center;
}

width: auto;
height: auto;
width: 100%;
min-height: 100%;
text-align: center;
max-width: var(--illustratedMessageMaxWidth);
padding-inline: var(--illustratedMessagePadding);
padding-block: var(--illustratedMessagePadding);
padding-inline: var(--illustratedMessagePadding);

&-container {
&-responsive-container {
@include fd-reset();
@include fd-flex-center();

width: auto;
padding-inline: 1rem;
padding-block: 1rem;
border-radius: 0.5rem;
background: var(--sapGroup_ContentBackground);
width: 100%;
min-height: 100%;
height: 100%;
container-type: inline-size;
}

&__container {
@include fd-reset();

@include fd-flex() {
align-items: center;
flex-direction: var(--containerFlexDirection);
};
}

&__illustration {
@include fd-reset();

width: var(--illustrationW);
height: var(--illustrationH);
width: auto;
height: auto;
display: var(--illustrationDisplay);
min-width: var(--illustrationMinWidth);
min-height: var(--illustrationMinHeight);
max-width: var(--illustrationMaxWidth);
max-height: var(--illustrationMaxHeight);
margin-block: var(--illustrationMarginBlock);
margin-inline: var(--illustrationMarginInline);
margin-inline: var(--illustrationMarginInlineStart) var(--illustrationMarginInlineEnd);
}

&__figcaption {
Expand All @@ -58,8 +188,8 @@ $block: #{$fd-namespace}-illustrated-message;
align-items: center;
}

width: 100%;
overflow: hidden;
max-width: var(--figcaptionMaxWidth);
}

&__title {
Expand All @@ -68,17 +198,17 @@ $block: #{$fd-namespace}-illustrated-message;
width: 100%;
text-align: center;
font-size: var(--titleFontSize);
max-width: var(--figcaptionMaxWidth);
color: var(--sapGroup_TitleTextColor);
margin-block-end: var(--titleMarginBottom);
font-family: var(--sapFontHeaderFamily);
margin-block-end: var(--titleMarginBottom);
}

&__text {
@include fd-reset();

text-wrap: wrap;
text-align: center;
max-width: var(--figcaptionMaxWidth);
line-height: 1.5;
margin-block-end: var(--textMarginBottom);
}

Expand All @@ -89,56 +219,40 @@ $block: #{$fd-namespace}-illustrated-message;
gap: 0.5rem;
}

width: 100%;
margin-block: var(--actionsMarginBlock);
margin-inline: var(--actionsMarginInline);
}

@media screen and (width <= 599px) {
--illustratedMessageMaxWidth: 20rem;
--illustrationW: 15rem;
--illustrationH: 11.25rem;
--figcaptionMaxWidth: 18rem;
padding-inline: var(--actionsPaddingInlineStart) var(--actionsPaddingInlineEnd);
}

&--dialog {
--illustrationW: 10rem;
--illustrationH: 10rem;
--illustrationMarginBlock: 1rem;
--titleMarginBottom: 0.5rem;
--titleFontSize: var(--sapFontHeader3Size);
--actionsMarginBlock: 0.5rem 1rem;
@include fd-illustarted-messages-dialog();
}

&--spot {
--illustratedMessagePadding: 0.5rem;
--illustrationW: 8rem;
--illustrationH: 8rem;
--illustrationMarginBlock: 0 0.5rem;
--actionsMarginBlock: 0.5rem;
--titleMarginBottom: 0.5rem;
--titleFontSize: var(--sapFontHeader4Size);
@include fd-illustarted-messages-spot();
}

&--dot {
--illustratedMessagePadding: 0.25rem;
--illustrationW: 2.813rem;
--illustrationH: 2.813rem;
--illustrationMarginBlock: 0;
--textMarginBottom: 0.313rem;
--titleMarginBottom: 0.25rem;
--titleFontSize: var(--sapFontHeader5Size);
--actionsMarginBlock: 0.25rem;
--illustrationMarginRight: 0.25rem;
@include fd-illustarted-messages-dot();
}

flex-flow: row wrap;
&--base {
@include fd-illustarted-messages-base();
}

.#{$block}__illustration {
margin-inline-end: var(--illustrationMarginRight);
@container (width <= 681px) {
@include fd-illustarted-messages-dialog();
}

& + .#{$block}__figcaption {
width: calc(100% - var(--illustrationW) - var(--illustrationMarginRight));
}
}
@container (width <= 360px) {
@include fd-illustarted-messages-spot();
}

@container (width <= 260px) {
@include fd-illustarted-messages-dot();
}

@container (width <= 160px) {
@include fd-illustarted-messages-base();
}
}
38 changes: 19 additions & 19 deletions packages/styles/stories/Components/illustrated-message/dialog.example.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
<div style="width: 100%; display: flex; justify-content: center">
<figure class="fd-illustrated-message fd-illustrated-message--dialog">
<svg class="fd-illustrated-message__illustration" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="160" viewBox="0 0 160 160" id="sapIllus-Dialog-NoMail">
<ellipse class="sapIllus_BackgroundColor" style="fill:var(--sapIllus_BackgroundColor)" cx="80" cy="149" rx="45" ry="7"/>
<path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M80.0026,24.2712a1.2576,1.2576,0,0,1-1.2373-1.2775V6.9839a1.2379,1.2379,0,1,1,2.4746,0v16.01A1.2576,1.2576,0,0,1,80.0026,24.2712Z"/>
<path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M117.134,46.49a1.2518,1.2518,0,0,1-.8866-2.1368L127.36,33.259a1.2527,1.2527,0,1,1,1.773,1.77L118.0205,46.1228A1.2508,1.2508,0,0,1,117.134,46.49Z"/>
<path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M42.861,46.5029a1.25,1.25,0,0,1-.8862-.3669L30.8672,35.0353A1.2528,1.2528,0,1,1,32.64,33.2641L43.7471,44.3648a1.2525,1.2525,0,0,1-.8861,2.1381Z"/>
<path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M122,74.8393v50.1628A4.0146,4.0146,0,0,1,117.9688,129H42.0312A4.0146,4.0146,0,0,1,38,125.0021v-50.11a3.9879,3.9879,0,0,1,1.6866-3.2522L77.6129,44.7458a4.0584,4.0584,0,0,1,4.6827-.0046L120.307,71.5826A3.9879,3.9879,0,0,1,122,74.8393Z"/>
<polygon class="sapIllus_Layering2" style="fill:var(--sapIllus_Layering2)" points="116.5 129 42.75 129 79.8 102 116.5 129"/>
<path class="sapIllus_BrandColorSecondary" style="fill:var(--sapIllus_BrandColorSecondary)" d="M113.4474,78.7409,83.177,102.06c-1.3436,1.0195-4.9987,1.0283-6.3522.0214L46.7228,79.0225l31.0664-21.96a3.8068,3.8068,0,0,1,4.3789-.0057Z"/>
<path class="sapIllus_PatternShadow" style="fill:var(--sapIllus_PatternShadow)" d="M114,79c-6.632-4.4451-13.662-9.5549-20.294-14C81.7917,73.3675,70.5761,81.5723,60,89l16.2407,13.0381a6.84,6.84,0,0,0,7.094-.06Z"/>
<path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M120.5957,71.1737,82.584,44.3316a4.5631,4.5631,0,0,0-5.26.0053L39.3975,71.2313A4.4963,4.4963,0,0,0,37.5,74.891v50.1109A4.52,4.52,0,0,0,42.0313,129.5h75.9375a4.52,4.52,0,0,0,4.5312-4.4981V74.8387A4.4948,4.4948,0,0,0,120.5957,71.1737Zm-80.62.873L77.9019,45.1524a3.5589,3.5589,0,0,1,4.1049-.0039L120.0186,71.99a3.4837,3.4837,0,0,1,.9275,1.01c-.8526.6458-3.5746,2.7061-7.2506,5.48L81.89,56.8951,113.2722,78.8c-9.3976,7.09-24.5566,18.4831-31,23.086a5.4369,5.4369,0,0,1-5.0542,0c-6.339-4.5283-20.8951-15.775-30.1651-22.9812l30.994-22.0094L46.5847,78.54c-3.6115-2.8084-6.3432-4.9428-7.36-5.7383A3.4742,3.4742,0,0,1,39.9756,72.0467ZM42.0313,128.5A3.5188,3.5188,0,0,1,38.5,125.0019V74.891a3.46,3.46,0,0,1,.4592-1.6985l37.9016,30.9253L42.75,128.5Zm2.0852,0L76.89,104.1413l.4892.3991a4.2914,4.2914,0,0,0,2.0831.8891,1.69,1.69,0,0,0,.5664,0,4.2941,4.2941,0,0,0,2.0831-.8891l.53-.4228L115.3834,128.5ZM121.5,125.0019a3.5188,3.5188,0,0,1-3.5312,3.4981H116.75L82.6715,104.0938,121.168,73.3981a3.4537,3.4537,0,0,1,.332,1.4406Z"/>
</svg>


<figcaption class="fd-illustrated-message__figcaption">
<h3 class="fd-illustrated-message__title">Headline text goes here</h3>
<p class="fd-illustrated-message__text">Description provides user with clarity and possible next steps.</p>
</figcaption>

<div class="fd-illustrated-message__container">
<svg class="fd-illustrated-message__illustration" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="160" viewBox="0 0 160 160" id="sapIllus-Dialog-NoMail">
<ellipse class="sapIllus_BackgroundColor" style="fill:var(--sapIllus_BackgroundColor)" cx="80" cy="149" rx="45" ry="7"/>
<path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M80.0026,24.2712a1.2576,1.2576,0,0,1-1.2373-1.2775V6.9839a1.2379,1.2379,0,1,1,2.4746,0v16.01A1.2576,1.2576,0,0,1,80.0026,24.2712Z"/>
<path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M117.134,46.49a1.2518,1.2518,0,0,1-.8866-2.1368L127.36,33.259a1.2527,1.2527,0,1,1,1.773,1.77L118.0205,46.1228A1.2508,1.2508,0,0,1,117.134,46.49Z"/>
<path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M42.861,46.5029a1.25,1.25,0,0,1-.8862-.3669L30.8672,35.0353A1.2528,1.2528,0,1,1,32.64,33.2641L43.7471,44.3648a1.2525,1.2525,0,0,1-.8861,2.1381Z"/>
<path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M122,74.8393v50.1628A4.0146,4.0146,0,0,1,117.9688,129H42.0312A4.0146,4.0146,0,0,1,38,125.0021v-50.11a3.9879,3.9879,0,0,1,1.6866-3.2522L77.6129,44.7458a4.0584,4.0584,0,0,1,4.6827-.0046L120.307,71.5826A3.9879,3.9879,0,0,1,122,74.8393Z"/>
<polygon class="sapIllus_Layering2" style="fill:var(--sapIllus_Layering2)" points="116.5 129 42.75 129 79.8 102 116.5 129"/>
<path class="sapIllus_BrandColorSecondary" style="fill:var(--sapIllus_BrandColorSecondary)" d="M113.4474,78.7409,83.177,102.06c-1.3436,1.0195-4.9987,1.0283-6.3522.0214L46.7228,79.0225l31.0664-21.96a3.8068,3.8068,0,0,1,4.3789-.0057Z"/>
<path class="sapIllus_PatternShadow" style="fill:var(--sapIllus_PatternShadow)" d="M114,79c-6.632-4.4451-13.662-9.5549-20.294-14C81.7917,73.3675,70.5761,81.5723,60,89l16.2407,13.0381a6.84,6.84,0,0,0,7.094-.06Z"/>
<path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M120.5957,71.1737,82.584,44.3316a4.5631,4.5631,0,0,0-5.26.0053L39.3975,71.2313A4.4963,4.4963,0,0,0,37.5,74.891v50.1109A4.52,4.52,0,0,0,42.0313,129.5h75.9375a4.52,4.52,0,0,0,4.5312-4.4981V74.8387A4.4948,4.4948,0,0,0,120.5957,71.1737Zm-80.62.873L77.9019,45.1524a3.5589,3.5589,0,0,1,4.1049-.0039L120.0186,71.99a3.4837,3.4837,0,0,1,.9275,1.01c-.8526.6458-3.5746,2.7061-7.2506,5.48L81.89,56.8951,113.2722,78.8c-9.3976,7.09-24.5566,18.4831-31,23.086a5.4369,5.4369,0,0,1-5.0542,0c-6.339-4.5283-20.8951-15.775-30.1651-22.9812l30.994-22.0094L46.5847,78.54c-3.6115-2.8084-6.3432-4.9428-7.36-5.7383A3.4742,3.4742,0,0,1,39.9756,72.0467ZM42.0313,128.5A3.5188,3.5188,0,0,1,38.5,125.0019V74.891a3.46,3.46,0,0,1,.4592-1.6985l37.9016,30.9253L42.75,128.5Zm2.0852,0L76.89,104.1413l.4892.3991a4.2914,4.2914,0,0,0,2.0831.8891,1.69,1.69,0,0,0,.5664,0,4.2941,4.2941,0,0,0,2.0831-.8891l.53-.4228L115.3834,128.5ZM121.5,125.0019a3.5188,3.5188,0,0,1-3.5312,3.4981H116.75L82.6715,104.0938,121.168,73.3981a3.4537,3.4537,0,0,1,.332,1.4406Z"/>
</svg>
<figcaption class="fd-illustrated-message__figcaption">
<h3 class="fd-illustrated-message__title">Let's get some results</h3>
<p class="fd-illustrated-message__text">Start by providing your search criteria.</p>
</figcaption>
</div>
<div class="fd-illustrated-message__actions">
<button class="fd-button">Action</button>
<button class="fd-button">Button</button>
</div>
</figure>
</div>
Loading

0 comments on commit 7bc3457

Please sign in to comment.