Skip to content
This repository has been archived by the owner on Apr 28, 2023. It is now read-only.

Pyv inspired enhancements #195

Merged
merged 6 commits into from
Jul 8, 2022
Merged

Pyv inspired enhancements #195

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7bd3743
Added Table Styles to RTE
JosephCurley Jul 7, 2022
8cfdf25
Properly style links within JumpLink Banner description
JosephCurley Jul 7, 2022
fb427e8
Added QuickLinks component to marble
JosephCurley Jul 7, 2022
c77dd49
Modify Link styles for jumplink banner
JosephCurley Jul 7, 2022
fcd794a
Update quicklinks to use controls
JosephCurley Jul 7, 2022
ebebb4b
Merge branch 'main' into pyv-inspired-enhancements
JosephCurley Jul 7, 2022
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
11 changes: 11 additions & 0 deletions src/components/jumplink-banner/jumplink-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,17 @@
@include typography-h3;
margin-bottom: $spacing-xs;
padding-bottom: 0;

/* stylelint-disable max-nesting-depth */
a {
text-decoration: underline;

&:focus,
&:hover {
opacity: 0.8;
text-decoration: none;
}
}
}

.image-container__image {
Expand Down
2 changes: 1 addition & 1 deletion src/components/jumplink-banner/jumplink-banner.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const data = () => {
header: text("Header", "Visit Us from Home"),
description: text(
"Body Copy",
"<p>Immerse yourself in 360-degree video of iconic spaces in the Museum. Visit the Great Hall as a ball, and Greek as a treat!</p>"
"<p>Immerse yourself in 360-degree video of iconic spaces in the Museum. Visit the Great Hall as a ball, and Greek as a treat!</p><a href='http://www.google.com'>Explore Google</a>"
),
images: "",
links: [
Expand Down
36 changes: 36 additions & 0 deletions src/components/quick-links/quick-links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
$bp-ql: 800px;

.quick-links {
margin-bottom: $spacing-s;
margin-top: $spacing-s;
}

.quick-links__link-container {
display: grid;
grid-gap: $spacing-s;
grid-template-columns: repeat(1, 1fr);
padding-top: $spacing-s;

@media screen and (min-width: $bp-ql) {
grid-template-columns: repeat(2, 1fr);
}
}

.quick-link {
display: flex;
grid-gap: $spacing-xs;
position: relative;
}

.quick-link__image-wrapper {
align-self: center;
flex-shrink: 0;
height: $spacing-l;
position: relative;
width: $spacing-l;
}

.quick-link__image {
max-height: 100%;
max-width: 100%;
}
48 changes: 48 additions & 0 deletions src/components/quick-links/quick-links.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { html, repeat } from ".storybook/helpers";
import image4x3 from ".storybook/assets/images/greek-hall/4x3/1240.jpg";


export default {
title: "Quick Links"
};

const quickLinkMarkUp = (link) => {
return html`
<div class="quick-link">
<a aria-hidden=true tabindex="-1" href="${link.url}" class="invisible-redundant-link"></a>
<div class="quick-link__image-wrapper">
<img class="quick-link__image" src="${link.image}" />
</div>
<div class="quick-link__text">
<h4>
<a href="${link.url}">
${link.title}
</a>
</h4>
<div>${link.description}</div>
</div>
</div>`;
};

const QuickLinks = (args) => html`
<section class="productive-component quick-links">
<h2>${args.title}</h2>
<div class="quick-links__link-container">
${repeat((args.numberOfLinks), quickLinkMarkUp(args.link))}
</div>
</section>`;

QuickLinks.args = {
title: "Quick Links",
id: "quick-links",
numberOfLinks: 5,
link: {
title: "Visitor Guidelines",
description: "Review our latest guidelines, including vaccination requirements.",
url: "https://www.nytimes.com",
image: image4x3
}
};


export { QuickLinks };
11 changes: 11 additions & 0 deletions src/components/rte-components/rte-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
}
}

table,
ol,
ul,
p {
Expand Down Expand Up @@ -92,7 +93,17 @@
}

table {
border-collapse: collapse;
width: 100%;

tr {
border-bottom: 1px solid $color-grey-500;
}

td:last-child {
white-space: nowrap;
width: 0;
}
}

strong {
Expand Down
15 changes: 13 additions & 2 deletions src/components/rte-components/rte-components.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,19 @@ const RTEComponentsMarkUp = (model) => {
allow="autoplay; encrypted-media">
</iframe>
</div>
<hr>
</hr>
<hr/>
<table>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for adding coverage of this

<tbody>
<tr>
<td>NY residents&nbsp;</td>
<td>&nbsp;<strong>Pay what you wish</strong></td>
</tr>
<tr>
<td>NY, NJ, and CT students&nbsp;</td>
<td>&nbsp;<strong>Pay what you wish</strong></td>
</tr>
</tbody>
</table>
<p>${model.p1}</p>
<img src="${model.backgroundImage}" alt="RTE Image">
<div class="inline-caption">${model.inlineCaption}</div>
Expand Down
1 change: 1 addition & 0 deletions src/marble.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,4 @@
@import "components/filter/filter";
@import "components/filter/filter-set";
@import "components/tile/tile";
@import "components/quick-links/quick-links";