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

Jump to bottom

feat(education-notice): new module #2286

Merged
merged 4 commits into from
Mar 13, 2024
Merged

feat(education-notice): new module #2286

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8aeeb96
feat(education-notice): new module
ArtBlue Mar 8, 2024
f71c848
chore(education-notice): updated docs/comment per PR feedback
ArtBlue Mar 13, 2024
89d93a0
chore(education-notice): added text spacing story
ArtBlue Mar 13, 2024
cae3b6f
Create loud-zebras-fail.md
ArtBlue Mar 13, 2024
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
57 changes: 57 additions & 0 deletions dist/education-notice/education-notice.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
.education-notice {
background-color: var(--education-notice-default-background-color, var(--color-background-secondary));
border-radius: var(--education-notice-border-radius, var(--border-radius-100));
color: var(--color-foreground-primary);
font-size: var(--font-size-default);
padding: var(--spacing-300);
}
.education-notice--prominent {
background-color: var(--education-notice-education-background-color, var(--color-background-education));
}
.education-notice__header {
display: flex;
}
.education-notice__title {
flex-grow: 1;
font-size: var(--font-size-medium);
font-weight: bold;
line-height: 1.5em;
margin: 0;
-webkit-margin-start: var(--spacing-150);
margin-inline-start: var(--spacing-150);
}
.education-notice__main {
margin-top: var(--spacing-200);
}
.education-notice__dismiss {
-webkit-margin-start: var(--spacing-150);
margin-inline-start: var(--spacing-150);
}
.education-notice__header .icon--prominent {
color: var(--color-foreground-accent);
}
.education-notice__footer a {
color: var(--education-notice-foreground-color, var(--color-foreground-primary));
font-size: var(--font-size-default);
font-weight: 700;
white-space: nowrap;
}
.education-notice__footer button.fake-link {
font-size: var(--font-size-default);
font-weight: bold;
}
.education-notice__main p {
font-size: var(--font-size-default);
margin: 0;
}
.education-notice__footer {
margin-top: var(--spacing-200);
}
.education-notice__header button.fake-link,
.education-notice__header button.fake-link:hover {
color: var(--education-notice-foreground-color, var(--color-foreground-primary));
font-size: var(--font-size-default);
font-weight: bold;
height: 24px;
width: 24px;
}
1 change: 1 addition & 0 deletions docs/_data/modules.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ list:
- date-textbox
- details
- drawer-dialog
- education-notice
- fullscreen-dialog
- eek
- field
Expand Down
246 changes: 246 additions & 0 deletions docs/_includes/education-notice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
<div id="education-notice">
{% include section-header.html name="education-notice" version=page.module_metadata.education-notice.ds-component.version %}

<h3 id="education-notice-default">Education Notice</h3>
<p>The education notice is meant to display a variety of informational content. By default it has a gray background color that has less prominence.</p>

<p>Education notice can use any large <span class="highlight">24x24</span> program badge icon. The icon can be black or blue. They are black by default, but approved program badges can use blue. If the blue is too prominent or noisy, program badges can use black as well.</p>

<div class="demo">
<div class="demo__inner">
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="lightbulb-24" %}
</svg>
<h3 class="education-notice__title">Did you know?</h3>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
<h3 class="education-notice__title">Did you know?</h3>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
{% endhighlight %}

<h3 id="education-notice-prominent-icon">Education Notice with a Prominent Icon</h3>

<p>Default educational notice (gray background) can use a blue icon by adding an <span class="highlight">icon--prominent</span> modifier on the icon element.</p>

<div class="demo">
<div class="demo__inner">
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--lightbulb-24 icon--prominent" height="24" width="24" aria-label="Education">
{% include symbol.html name="lightbulb-24" %}
</svg>
<h3 class="education-notice__title">Did you know?</h3>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--lightbulb-24 icon--prominent" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
<h3 class="education-notice__title">Did you know?</h3>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
{% endhighlight %}

<h3 id="education-notice-prominent">Prominent Education Notice</h3>
<p>The prominent education notice includes a background color that pops a bit more. It can be used with a <span class="highlight">education-notice--prominent</span> modifier.</p>

<div class="demo">
<div class="demo__inner">
<section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--authenticity-guarantee-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="authenticity-guarantee-24" %}
</svg>
<h3 class="education-notice__title">Authenticity Guaranteed</h3>
</div>
<div class="education-notice__main">
<p>Authenticity Guarantee means your item is authentic or your money back.</p>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--authenticity-guarantee-24" height="24" width="24" aria-label="Education">
<use href="#icon-authenticity-guarantee-24"></use>
</svg>
<h3 class="education-notice__title">Authenticity Guaranteed</h3>
</div>
<div class="education-notice__main">
<p>Authenticity Guarantee means your item is authentic or your money back.</p>
</div>
</section>
{% endhighlight %}

<h3 id="education-notice-default">Dismissable Education Notice</h3>
<p>A close button can be placed in a <span class="highlight">education-notice__header</span> element.</p>

<div class="demo">
<div class="demo__inner">
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="lightbulb-24" %}
</svg>
<h3 class="education-notice__title">Did you know?</h3>
<button aria-label="Close notice" class="fake-link education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
{% include symbol.html name="close-16" %}
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
<h3 class="education-notice__title">Did you know?</h3>
<button aria-label="Close notice" class="fake-link education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now split payments on two cards.</p>
</div>
</section>
{% endhighlight %}

<h3 id="education-notice-actionable">Actionable Education Notice</h3>
<p>Link or button actions can be placed in the <span class="highlight">education-notice__footer</span> element.</p>

<h4 id="education-notice-actionable-using-link">Actionable Education Notice Using Link</h4>
<div class="demo">
<div class="demo__inner">
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="the-ebay-vault-24" %}
</svg>
<h3 class="education-notice__title">The Vault</h3>
<button aria-label="Close notice" class="fake-link education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
{% include symbol.html name="close-16" %}
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now use the Vault to store items like this securely.</p>
</div>
<div class="education-notice__footer">
<a href="https://www.ebay.com">Learn more link</a>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
<use href="#icon-the-ebay-vault-24"></use>
</svg>
<h3 class="education-notice__title">The Vault</h3>
<button aria-label="Close notice" class="fake-link education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now use the Vault to store items like this securely.</p>
</div>
<div class="education-notice__footer">
<a href="https://www.ebay.com">Learn more link</a>
</div>
</section>
{% endhighlight %}

<h4 id="education-notice-actionable-using-button">Actionable Education Notice Using Fake Button</h4>
<div class="demo">
<div class="demo__inner">
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="the-ebay-vault-24" %}
</svg>
<h3 class="education-notice__title">The Vault</h3>
<button aria-label="Close notice" class="fake-link education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
{% include symbol.html name="close-16" %}
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now use the Vault to store items like this securely.</p>
</div>
<div class="education-notice__footer">
<button class="fake-link">Learn more button</button>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="education-notice__header">
<svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
<use href="#icon-the-ebay-vault-24"></use>
</svg>
<h3 class="education-notice__title">The Vault</h3>
<button aria-label="Close notice" class="fake-link education-notice__dismiss">
<svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
<div class="education-notice__main">
<p>You can now use the Vault to store items like this securely.</p>
</div>
<div class="education-notice__footer">
<button class="fake-link">Learn more button</button>
</div>
</section>
{% endhighlight %}

</div>
54 changes: 0 additions & 54 deletions docs/_includes/section-notice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,60 +97,6 @@ <h3 id="section-notice-status">Status Section Notice</h3>
</section>
{% endhighlight %}

<h3 id="section-notice-educational">Educational Section Notice</h3>
<p>Educational section notices use any large 24x24 program badge and have an optional, more prominent background color (via the <span class="highlight">section-notice--education</span> modifier).</p>

<div class="demo">
<div class="demo__inner">
<section class="section-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-information">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="lightbulb-24" %}
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>

<section class="section-notice section-notice--education" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-information">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
{% include symbol.html name="lightbulb-24" %}
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
</div>
</div>

{% highlight html %}
<section class="section-notice" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-information">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>

<section class="section-notice section-notice--education" role="region" aria-label="Education" aria-roledescription="Notice">
<div class="section-notice__header" id="section-notice-information">
<svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
<use href="#icon-lightbulb-24"></use>
</svg>
</div>
<div class="section-notice__main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
{% endhighlight %}


<h3 id="section-notice-titled">Titled Section Notice</h3>
<p>Use a heading element to create a titled section notice.</p>

Expand Down
9 changes: 9 additions & 0 deletions docs/custom-styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,13 @@
.carousel__list--slideshow-demo li:last-child {
margin-inline-end: 0;
}

.demo-a11y-text-spacing * {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
.demo-a11y-text-spacing p {
margin-bottom: 2em !important;
}
</style>
Loading
Loading