access-nyc-patterns
Version:
User Interface Patterns for Benefits Access
176 lines (164 loc) • 12.6 kB
HTML
<html class="bg-color-white text-size-0" lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
<link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
<link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
<link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
<link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<meta content="#112E51" name="msapplication-TileColor" />
<meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" />
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
<link href="styles/site-default.css" rel="stylesheet" />
<title>Cookie | ACCESS NYC Patterns</title><noscript>
<style>
body {
visibility: visible ;
}
</style>
</noscript>
<script type="text/javascript">
function load() {
document.body.style.visibility = 'visible'
};
</script>
</head>
<body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a>
<div class="bg-color-white">
<header class="color-light-background px-2">
<div class="border-b border-color-grey-light">
<div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2">
<div>
<h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden">
<use xlink:href="#icon-logo-mark"></use>
</svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block">
<use xlink:href="#icon-logo-full"></use>
</svg></a></h1>
</div>
<div class="flex items-center">
<h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2>
<h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2>
<nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav>
</div>
</div>
</div>
</header>
<aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px">
<div class="page-wrapper py-4 animated">
<div class="screen-tablet:flex">
<nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav>
</div>
<div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div>
</div>
</aside>
<main class="color-light-background pt-4" id="main-content">
<article class="pt-4">
<header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body">
<div class="my-0 w-full">
<h1 class="text-color-blue-dark px-2 pb-4 mb-4">Cookie</h1>
</div>
</header>
<section class="pb-4 mb-4">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<div>
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/utilities/cookie">src/utilities/cookie/cookie</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The Cookie JavaScript Utility is used by the Alert Banner component to create
a <a href="https://en.wikipedia.org/wiki/HTTP_cookie">web cookie</a>. The Cookie utility is
used to also read from the cookie created to check if the alert banner has been
closed in order to no longer show it in the page, thus improving the user
experience.</p>
<p>The Cookie JavaScript Utility is composed of the following methods that are used
in the Alert Banner component:</p>
<table>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>readCookie()</td>
<td>Reads a cookie and returns the value.</td>
</tr>
<tr>
<td>dataset(elem, attr)</td>
<td>Function to get value of a data attribute.</td>
</tr>
<tr>
<td>readCookie(cookieName, cookie)</td>
<td>Reads a cookie and returns the value.</td>
</tr>
<tr>
<td>getDomain(url, root)</td>
<td>Returns the domain from a URL.</td>
</tr>
</tbody>
</table>
<h4>Cherry-picked Module Import</h4>
<p>The ES6, CommonJS, and IFFE modules all require importing and object instantiation in your main script. The methods and configurations described above will work with the dedicated module.</p>
<pre><code>// ES6
import Cookie from 'src/utilities/cookie/cookie';
// CommonJS
import Cookie from 'dist/utilities/cookie/cookie.common';
<!-- IFFE -->
<script src="dist/utilities/cookie/cookie.iffe.js"></script>
new Cookie();</code></pre>
<h4>Storing cookie in data- attribute</h4></div>
</div>
<div class="layout--gutter screen-tablet:layout--columns justify-between pt-4">
<div class="screen-tablet:pr-2">
<div data-cookie="site-alert-slug"></div>
</div>
<div>
<div class="code-block mb-1"><pre><div data-cookie="site-alert-slug"></div></pre>
</div>
</div>
</div>
</div>
</section>
</article>
</main>
</div>
<footer class="py-4 text-center color-dark-background">
<p>
<nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav>
</p>
<p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p>
<p class="m-0">
<nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav>
</p>
</footer>
<script src="scripts/polyfills.js"></script>
<script src="scripts/access-nyc.js"></script>
<script src="scripts/vue-components.js"></script>
<script type="text/javascript">
var access = new AccessNyc();
var VueComponents = new VueComponents();
access.icons();
access.toggle();
access.alertBanner();
</script>
</body>
</html>