Skip to content

Cms prototype #689

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

Open
christyhermansen wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Cms prototype #689

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
f812d80
Initial CMS Style Pages
christyhermansen Jan 10, 2024
b8ff175
Added images and updated colors
christyhermansen Jan 11, 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
30,192 changes: 17,747 additions & 12,445 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions sam-styles/packages/branding/typography/heading/templates/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,42 +13,42 @@
<h1>Heading 1</h1>
</td>
<th scope="row">&lth1>&lt/h1></th>
<td>Weight: Bold / Size: 2.13rem / Line Height: 1.1rem / Color: Base (#76766a)</td>
<td>Weight: text-bold / Size: font-sans-xl / Line Height: line-height-sans-2 / Color: text-base</td>
</tr>
<tr>
<td>
<h2>Heading 2</h2>
</td>
<th scope="row">&lth2>&lt/h2></th>
<td>Weight: Semi-Bold / Size: 1.46rem / Line Height: 1.1rem / Color: Base-Dark (#454540)</td>
<td>Weight: text-semibold / Size: font-sans-lg / Line Height: line-height-sans-2 / Color: text-base-dark</td>
</tr>
<tr>
<td>
<h3>Heading 3</h3>
</td>
<th scope="row">&lth3>&lt/h3></th>
<td>Weight: Bold / Size: 1.13rem / Line Height: 1.1rem / Color: Base-Dark (#454540)</td>
<td>Weight: text-bold / Size: font-sans-md / Line Height: line-height-sans-2 / Color: text-base-dark</td>
</tr>
<tr>
<td>
<h4>Heading 4</h4>
</td>
<th scope="row">&lth4>&lt/h4></th>
<td>Weight: Semi-Bold / Size: 1.13rem / Line Height: 1.1rem / Color: Base-Dark (#454540)</td>
<td>Weight: text-semibold / Size: font-sans-md / Line Height: line-height-sans-2 / Color: text-base-dark</td>
</tr>
<tr>
<td>
<h5>Heading 5</h5>
</td>
<th scope="row">&lth5>&lt/h5></th>
<td>Weight: Bold / Size: 1.0rem / Line Height: 1.1rem / Color: Base-Dark (#454540)</td>
<td>Weight: text-bold / Size: font-sans-xs/ Line Height: line-height-sans-2 / Color: text-base-dark</td>
</tr>
<tr>
<td>
<h6>Heading 6</h6>
</td>
<th scope="row">&lth6>&lt/h6></th>
<td>Weight: Semi-Bold / Size: 1.0rem / Line Height: 1.1rem / Color: Base-Dark (#454540)</td>
<td>Weight: text-semibold / Size: font-sans-xs / Line Height: line-height-sans-2 / Color: text-base-dark</td>
</tr>
</tbody>
</table>
Expand Down
24 changes: 24 additions & 0 deletions sam-styles/packages/cms/content.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import KnowledgeArticle from "./templates/knowledge-article.html";
import SimpleLandingPage from "./templates/landing-page.html";
import AnnouncementArticle from "./templates/announcement.html";
import TypographyPage from "./templates/typography.html";

export default {
title: "Content/Examples",
};

export const Announcement = () => {
return AnnouncementArticle;
};

export const KnowledgeArticlePage = () => {
return KnowledgeArticle;
};

export const LandingPage = () => {
return SimpleLandingPage;
}

export const Typography = () => {
return TypographyPage;
};
12 changes: 12 additions & 0 deletions sam-styles/packages/cms/templates/announcement.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<main class="measure-6">
<h1>Executive Order (EO) 13658, Establishing a Minimum Wage for Contractors: Annual Update</h1>
<div class="grid-row flex-wrap font-sans-2xs">
<div class="grid-col-auto margin-right-5">Published Date: <span class="text-bold">Nov 20, 2023</span></div>
<div class="grid-col-auto margin-right-5">Status: <span class="text-bold">Active</span></div>
<div class="grid-col-auto margin-right-5">Expires: <span class="text-bold">Never</span></div>
</div>
<p><a href="https://www.dol.gov/agencies/whd/government-contracts/minimum-wage">Executive Order (EO) 13658</a> generally applies to contracts subject to the Service Contract Act or the Davis-Bacon Act awarded between January 1, 2015, and January 29, 2022, and not renewed or extended on or after January 30, 2022. EO 13658 sets a minimum wage of $12.90 per hour for workers performing on or in connection with such contracts for calendar year 2024.
</p>
</main>

<div class="timestamp font-sans-2xs margin-top-4">Last Updated: <time class="text-italic">Mar 2</time></div>
Binary file added sam-styles/packages/cms/templates/article-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/capital-building-bright.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/capital-building.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/dba-construction.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions sam-styles/packages/cms/templates/knowledge-article.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<main class="measure-6">
<h1>What's the difference between signing up and registering?</h1>
<div>
<img class="padding-2" src="article-photo.jpg">
</div>
<p class="usa-intro">Signing up will give you an individual user account.
You register an entity before applying for a grant or bidding on a contract. </p>
<p>Signing up is a simple process where you provide an email address and password, and choose
an option for multi-factor authentication. We will send you to login.gov to sign up for
a user account and every time you sign in.
</p>
<p>Registering is a more involved process where you enter in many details about your business,
government organization, hospital, university, or other entity. You should start registration
at least two weeks before you need your registration to be active. We recommend starting
30 days early.
</p>
<div class="timestamp font-sans-2xs margin-top-4">Last Updated: <time class="text-italic">Mar 2</time></div>
</main>
270 changes: 270 additions & 0 deletions sam-styles/packages/cms/templates/landing-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,270 @@
<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo">
<em class="usa-logo__text"
><a href="/" title="<Project title>">&lt;Project title&gt;</a></em
>
</div>
<button type="button" class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src="/assets/img/usa-icons/close.svg" role="img" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link usa-current"
aria-expanded="false"
aria-controls="extended-mega-nav-section-one"
>
<span>&lt;Current section&gt;</span>
</button>
<div
id="extended-mega-nav-section-one"
class="usa-nav__submenu usa-megamenu"
>
<div class="grid-row grid-gap-4">
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);"
>&lt;A very long navigation link that goes onto two
lines&gt;</a
>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link"
aria-expanded="false"
aria-controls="extended-mega-nav-section-two"
>
<span>&lt;Section&gt;</span>
</button>
<div
id="extended-mega-nav-section-two"
class="usa-nav__submenu usa-megamenu"
>
<div class="grid-row grid-gap-4">
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);"
>&lt;A very long navigation link that goes onto two
lines&gt;</a
>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
<li class="usa-nav__submenu-item">
<a href="javascript:void(0);">&lt;Navigation link&gt;</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="usa-nav__primary-item">
<a href="javascript:void(0);" class="usa-nav-link"
>&lt;Simple link&gt;</a
>
</li>
</ul>
<div class="usa-nav__secondary">
<ul class="usa-nav__secondary-links"></ul>
<section aria-label="Search component">
<form class="usa-search usa-search--small" role="search">
<label class="usa-sr-only" for="search-field">Search</label>
<input
class="usa-input"
id="search-field"
type="search"
name="search"
/>
<button class="usa-button" type="submit">
<img
src="/assets/img/usa-icons-bg/search--white.svg"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</form>
</section>
</div>
</div>
</nav>
</header>
<main class="margin-3">
<h1>Wage Determinations</h1>
<p class="usa-intro measure-5 padding-bottom-4">A wage determination (WD) is a set of wages, fringe benefits, and work rules that the U.S. Department of Labor has ruled to be prevailing for a given labor category in a given locality.</p>
<ul class="usa-card-group">
<li class="usa-card grid-col-12 tablet-lg:grid-col-4">
<div class="usa-card__container border-width-0">
<div class="usa-card__header">
<h2 class="usa-card__heading">Search by Wage Determination Number</h2>
</div>
<div class="usa-card__body">
<section aria-label="Big search component">
<p>
Do you already have a wage determination number? Enter it here.
</p>
<form class="usa-search usa-search--big" role="search">
<label class="usa-sr-only" for="search-field-en-big">Search</label>
<input
class="usa-input"
id="search-field-en-big"
type="search"
name="search"
/>
<button class="usa-button" type="submit">
<span class="usa-search__submit-text">Search </span
>
</button>
</form>
</section>
</div>
</div>
</li>
<li class="usa-card grid-col-12 tablet-lg:grid-col-4">
<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">Public Buildings or Works</h2>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img
src="capital-building-bright.png"
alt="A placeholder image"
/>
</div>
</div>
<div class="usa-card__body">
<p>
Search for wage determinations under the Davis-Bacon Act (DBA)
</p>
</div>
<div class="usa-card__footer">
<a href="#" class="usa-button bg-primary-lighter">Search</a>
</div>
</div>
</li>
<li class="usa-card grid-col-12 tablet-lg:grid-col-4">
<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">Service Contracts</h2>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img
src="office-group-bright.png"
alt="A placeholder image"
/>
</div>
</div>
<div class="usa-card__body">
<p>
Search for wage determinations under the Service Contract Act (SCA)
</p>
</div>
<div class="usa-card__footer">
<a href="#" class="usa-button bg-primary-lighter">Search</a>
</div>
</div>
</li>
</ul>
<div class="timestamp font-sans-2xs margin-top-4">Last Updated: <time class="text-italic">Mar 2</time></div>
</main>
Binary file added sam-styles/packages/cms/templates/liberty.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/office-group-bright.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/office-group.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/office-worker.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sam-styles/packages/cms/templates/sca-service.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading