Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDPA-2632] Featured Nav improvements. #391

Merged
merged 2 commits into from
Jun 13, 2019
+95 −41
Merged

[SDPA-2632] Featured Nav improvements. #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
884c238
[SDPA-2632] Improved Featured Navigation card configurations.
alan-cole Jun 13, 2019
348b20a
[SDPA-2632] Update to snapshot.
alan-cole Jun 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 85 additions & 31 deletions packages/Molecules/Card/CardNavigationFeatured.vue
View file
Open in desktop
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
Open in desktop
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