Skip to content

Commit

Permalink
[SDPA-2632] Featured Nav improvements. (#391)
Browse files Browse the repository at this point in the history 
* [SDPA-2632] Improved Featured Navigation card configurations.
Supports the following additional configurations:
* Image with title and no summary
* No image with title and summary
* No image with title with and no summary

* [SDPA-2632] Update to snapshot.
  • Loading branch information
@alan-cole @dylankelly
alan-cole authored and dylankelly committed Jun 13, 2019
1 parent 8cdea65 commit 262d5ef
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 41 deletions.
116 changes: 85 additions & 31 deletions packages/Molecules/Card/CardNavigationFeatured.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
<template>
<rpl-link class="rpl-card-navigation-featured" :href="url" v-if="url" :innerWrap="false">
<div class="rpl-card-navigation-featured__inner">
<img class="rpl-card-navigation-featured__image" :src="image" alt="">
<div class="rpl-card-navigation-featured__meta_and_title" v-if="title || date || topic">
<img v-if="image" class="rpl-card-navigation-featured__image" :src="image" alt="" />
<div
v-if="title || date || topic"
class="rpl-card-navigation-featured__meta_and_title"
:class="{
'rpl-card-navigation-featured__meta_and_title--image': image,
'rpl-card-navigation-featured__meta_and_title--no-image': !image,
'rpl-card-navigation-featured__meta_and_title--summary': summary
}"
>
<div class="rpl-card-navigation-featured__meta" v-if="date || topic">
<span class="rpl-card-navigation-featured__date" v-if="date">{{ formatDate(date) }}</span>
<span class="rpl-card-navigation-featured__tag" v-if="topic">{{ topic }}</span>
Expand All @@ -13,8 +21,15 @@
><span>{{ title }}</span></h2>
</div>
</div>
<p v-if="summary" class="rpl-card-navigation-featured__summary">{{ summary }}</p>
<rpl-icon v-if="summary" symbol="arrow_right_primary" color="white" />
<p
v-if="summary"
class="rpl-card-navigation-featured__summary"
:class="{
'rpl-card-navigation-featured__summary--image': image,
'rpl-card-navigation-featured__summary--meta-no-image': !image && (title || date || topic)
}"
>{{ summary }}</p>
<rpl-icon v-if="!(image && !summary)" symbol="arrow_right_primary" color="white" />
</rpl-link>
</template>

Expand Down Expand Up @@ -61,13 +76,18 @@ export default {
's': ('s', 1.5em, 'bold')
) !default;
$rpl-card-navigation-featured-summary-color: rpl_color('white') !default;
$rpl-card-navigation-featured-summary-background: transparent url(rpl_graphic_right_angled_triangle('secondary')) no-repeat bottom right !default;
$rpl-card-navigation-featured-summary-background: $rpl-card-navigation-featured-background url(rpl_graphic_right_angled_triangle('secondary')) no-repeat bottom right !default;
$rpl-card-navigation-featured-summary-background-hover: rpl_color('secondary') url(rpl_graphic_right_angled_triangle('primary')) no-repeat bottom right !default;
$rpl-card-navigation-featured-summary-xs: ($rpl-space * 11) $rpl-component-padding-xs ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-s: ($rpl-space * 6) $rpl-component-padding-s ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-m: ($rpl-space * 6) $rpl-component-padding-m ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-l: ($rpl-space * 11) $rpl-component-padding-l ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-xl: ($rpl-space * 6) $rpl-component-padding-xl ($rpl-space * 7) !default;
$rpl-card-navigation-featured-title-xs: ($rpl-space * 9) $rpl-component-padding-xs !default;
$rpl-card-navigation-featured-title-s: ($rpl-space * 9) $rpl-component-padding-s !default;
$rpl-card-navigation-featured-title-m: ($rpl-space * 9) $rpl-component-padding-m !default;
$rpl-card-navigation-featured-title-l: ($rpl-space * 9) $rpl-component-padding-l !default;
$rpl-card-navigation-featured-title-xl: ($rpl-space * 9) $rpl-component-padding-xl !default;
$rpl-card-navigation-featured-meta-background: rpl_color('secondary') !default;
$rpl-card-navigation-featured-meta-text-color: rpl_color('white') !default;
$rpl-card-navigation-featured-meta-padding: 0 $rpl-space-2 !default;
Expand All @@ -84,20 +104,18 @@ export default {
background-color: $rpl-card-navigation-featured-background;
max-width: $rpl-card-navigation-featured-max-width;
border-radius: $rpl-card-navigation-featured-border-radius;
background: $rpl-card-navigation-featured-summary-background;
@include rpl_print_hidden;
&:hover,
&:focus {
@include rpl_dropshadow;
background: $rpl-card-navigation-featured-summary-background-hover;
&.rpl-link {
text-decoration: none;
}
#{$root}__summary {
background: $rpl-card-navigation-featured-summary-background-hover;
}
}
&__inner {
Expand All @@ -113,29 +131,61 @@ export default {
}
&__meta_and_title {
position: absolute;
left: $rpl-component-padding-xs;
right: $rpl-component-padding-xs;
bottom: $rpl-space * -8;
z-index: 1;
@include rpl_breakpoint('s') {
left: $rpl-component-padding-s;
right: $rpl-component-padding-s;
bottom: ($rpl-space * 5);
}
@include rpl_breakpoint('m') {
left: $rpl-component-padding-m;
right: $rpl-component-padding-m;
}
@include rpl_breakpoint('l') {
left: $rpl-component-padding-l;
right: $rpl-component-padding-l;
bottom: $rpl-space * -8;
&--no-image {
padding: $rpl-card-navigation-featured-title-xs;
@include rpl_breakpoint('s') {
padding: $rpl-card-navigation-featured-title-s;
}
@include rpl_breakpoint('l') {
padding: $rpl-card-navigation-featured-title-m;
}
@include rpl_breakpoint('l') {
padding: $rpl-card-navigation-featured-title-l;
}
@include rpl_breakpoint('xl') {
padding: $rpl-card-navigation-featured-title-xl;
}
&#{$root}__meta_and_title--summary {
padding-bottom: 0;
}
}
@include rpl_breakpoint('xl') {
left: $rpl-component-padding-xl;
right: $rpl-component-padding-xl;
&--image {
position: absolute;
left: $rpl-component-padding-xs;
right: $rpl-component-padding-xs;
bottom: ($rpl-space * 5);
z-index: 1;
@include rpl_breakpoint('s') {
left: $rpl-component-padding-s;
right: $rpl-component-padding-s;
}
@include rpl_breakpoint('m') {
left: $rpl-component-padding-m;
right: $rpl-component-padding-m;
}
@include rpl_breakpoint('l') {
left: $rpl-component-padding-l;
right: $rpl-component-padding-l;
}
@include rpl_breakpoint('xl') {
left: $rpl-component-padding-xl;
right: $rpl-component-padding-xl;
}
&#{$root}__meta_and_title--summary {
bottom: $rpl-space * -8;
@include rpl_breakpoint('s') {
bottom: ($rpl-space * 5);
}
@include rpl_breakpoint('l') {
bottom: $rpl-space * -8;
}
@include rpl_breakpoint('xl') {
bottom: ($rpl-space * 5);
}
}
}
}
Expand Down Expand Up @@ -173,10 +223,10 @@ export default {
}
&__summary {
background: $rpl-card-navigation-featured-summary-background;
@include rpl_typography_ruleset($rpl-card-navigation-featured-summary-ruleset);
@include rpl_text_color($rpl-card-navigation-featured-summary-color);
margin: 0;
min-height: $rpl-space * 12;
padding: $rpl-card-navigation-featured-summary-xs;
@include rpl_breakpoint('s') {
padding: $rpl-card-navigation-featured-summary-s;
Expand All @@ -190,6 +240,10 @@ export default {
@include rpl_breakpoint('xl') {
padding: $rpl-card-navigation-featured-summary-xl;
}
&--meta-no-image {
padding-top: $rpl-space-4;
}
}
.rpl-icon {
Expand Down
20 changes: 10 additions & 10 deletions test/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11961,7 +11961,7 @@ exports[`RippleStoryshots Molecules/Card Card Navigation Featured 1`] = `
/>

<div
class="rpl-card-navigation-featured__meta_and_title"
class="rpl-card-navigation-featured__meta_and_title rpl-card-navigation-featured__meta_and_title--image rpl-card-navigation-featured__meta_and_title--summary"
>
<div
class="rpl-card-navigation-featured__meta"
Expand Down Expand Up @@ -11990,7 +11990,7 @@ exports[`RippleStoryshots Molecules/Card Card Navigation Featured 1`] = `
</div>

<p
class="rpl-card-navigation-featured__summary"
class="rpl-card-navigation-featured__summary rpl-card-navigation-featured__summary--image"
>
We are looking at ways to make housing more affordable and renting more secure. Tell us what works for you or find out what's happening.
</p>
Expand Down Expand Up @@ -36268,7 +36268,7 @@ exports[`RippleStoryshots Organisms/News Featured News 1`] = `
/>

<div
class="rpl-card-navigation-featured__meta_and_title"
class="rpl-card-navigation-featured__meta_and_title rpl-card-navigation-featured__meta_and_title--image rpl-card-navigation-featured__meta_and_title--summary"
>
<div
class="rpl-card-navigation-featured__meta"
Expand Down Expand Up @@ -36297,7 +36297,7 @@ exports[`RippleStoryshots Organisms/News Featured News 1`] = `
</div>

<p
class="rpl-card-navigation-featured__summary"
class="rpl-card-navigation-featured__summary rpl-card-navigation-featured__summary--image"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua laboris nisi ut aliquip ex ea commodo consequat.
</p>
Expand Down Expand Up @@ -48637,7 +48637,7 @@ exports[`RippleStoryshots Templates Landing page demo 1`] = `
/>

<div
class="rpl-card-navigation-featured__meta_and_title"
class="rpl-card-navigation-featured__meta_and_title rpl-card-navigation-featured__meta_and_title--image rpl-card-navigation-featured__meta_and_title--summary"
>
<div
class="rpl-card-navigation-featured__meta"
Expand Down Expand Up @@ -48666,7 +48666,7 @@ exports[`RippleStoryshots Templates Landing page demo 1`] = `
</div>

<p
class="rpl-card-navigation-featured__summary"
class="rpl-card-navigation-featured__summary rpl-card-navigation-featured__summary--image"
>
We are looking at ways to make housing more affordable and renting more secure. Tell us what works for you or find out what's happening.
</p>
Expand Down Expand Up @@ -60462,7 +60462,7 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
/>

<div
class="rpl-card-navigation-featured__meta_and_title"
class="rpl-card-navigation-featured__meta_and_title rpl-card-navigation-featured__meta_and_title--image rpl-card-navigation-featured__meta_and_title--summary"
>
<div
class="rpl-card-navigation-featured__meta"
Expand Down Expand Up @@ -60491,7 +60491,7 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
</div>

<p
class="rpl-card-navigation-featured__summary"
class="rpl-card-navigation-featured__summary rpl-card-navigation-featured__summary--image"
>
We are looking at ways to make housing more affordable and renting more secure. Tell us what works for you or find out what's happening.
</p>
Expand Down Expand Up @@ -61319,7 +61319,7 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
/>

<div
class="rpl-card-navigation-featured__meta_and_title"
class="rpl-card-navigation-featured__meta_and_title rpl-card-navigation-featured__meta_and_title--image rpl-card-navigation-featured__meta_and_title--summary"
>
<div
class="rpl-card-navigation-featured__meta"
Expand Down Expand Up @@ -61348,7 +61348,7 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
</div>

<p
class="rpl-card-navigation-featured__summary"
class="rpl-card-navigation-featured__summary rpl-card-navigation-featured__summary--image"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua laboris nisi ut aliquip ex ea commodo consequat.
</p>
Expand Down

0 comments on commit 262d5ef

Please sign in to comment.