Disclaimer

The Disclaimer Component contains legal information for the user to read.

ACCESS NYC Disclaimer for Public Benefit Program Screening

ACCESS NYC offers a screening tool that recommends public benefits programs for you to consider based upon information you provide about your household.

To enroll in a benefit, you need to apply through the appropriate administering agency. ACCESS NYC will tell you how to apply for any benefit on this website, but cannot guarantee eligibility. The administering agency will determine final eligibility upon your submission of an application for each program.

The information you share for purposes of public benefits screening will be anonymous and can be shared with City agencies to improve access to benefits and programs. To find out more about how the City might use the data you share with ACCESS NYC, visit the Terms of Use for NYC.gov, and Privacy Policy for NYC.gov.

<div class="c-disclaimer">
  <h4>ACCESS NYC Disclaimer for Public Benefit Program Screening</h4>
  <p>ACCESS NYC offers a screening tool that recommends public benefits programs for you to consider based upon information you provide about your household.</p>
  <p>To enroll in a benefit, you need to apply through the appropriate administering agency. ACCESS NYC will tell you how to apply for any benefit on this website, but cannot guarantee eligibility. The administering agency will determine final eligibility upon your submission of an application for each program.</p>
  <p>The information you share for purposes of public benefits screening will be anonymous and can be shared with City agencies to improve access to benefits and programs. To find out more about how the City might use the data you share with ACCESS NYC, visit the <a href="#">Terms of Use for NYC.gov</a>, and <a href="#">Privacy Policy for NYC.gov</a>.</p>
</div>

Small Disclaimer

Source: src/components/disclaimer/disclaimer-small

By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the Terms of Use for NYC.gov, and Privacy Policy for NYC.gov. 

<div class="c-disclaimer">
  <p>
    <small>
      <svg aria-hidden="true" class="c-disclaimer__icon c-disclaimer__icon--pre">
        <use xlink:href="#icon-info"></use>
      </svg>By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the <a href="http://www1.nyc.gov/home/terms-of-use.page" target="_blank" rel="noopener noreferrer"> Terms of Use for NYC.gov</a>, and <a href="http://www1.nyc.gov/home/privacy-policy.page" target="_blank" rel="noopener noreferrer"> Privacy Policy for NYC.gov</a>.
    </small>
  </p>
</div>

Disclaimer Toggle

Source: src/components/disclaimer/disclaimer-toggle

The Disclaimer Component’s visibility can be toggled based on the visibility of another component on the page. It uses the aria-describedby attribute to select the disclaimer and reveal it.

<button aria-controls="provide-phone" aria-describedby="share-disclaimer" class="btn btn-primary mb-2" data-js="toggle disclaimer-control" data-scroll-offset="16">Share this page</button>
<div aria-hidden="true" class="c-question hidden" id="provide-phone">
  <label class="c-question__label">Enter your phone number</label>
  <div class="c-question__container">
    <div class="input-phone-us">
      <input type="tel" />
    </div>
  </div>
</div>
<div aria-hidden="true" class="hidden" id="share-disclaimer">
  <div class="c-disclaimer">
    <p>
      <small>
        <svg aria-hidden="true" class="c-disclaimer__icon c-disclaimer__icon--pre">
          <use xlink:href="#icon-info"></use>
        </svg>By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the <a href="http://www1.nyc.gov/home/terms-of-use.page" target="_blank" rel="noopener noreferrer"> Terms of Use for NYC.gov</a>, and <a href="http://www1.nyc.gov/home/privacy-policy.page" target="_blank" rel="noopener noreferrer"> Privacy Policy for NYC.gov</a>.
      </small>
    </p>
  </div>
</div>

Disclaimer Toggle Usage

Global Script

The Disclaimer Component Toggle requires JavaScript for showing and hiding the Disclaimer. To use the Disclaimer Component Toggle through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var access = new AccessNyc();
  access.toggle();
  access.disclaimer();
</script>

This will instantiate the Disclaimer Component and Toggle Utility, attaching event listeners for toggling the disclaimer visible.

Module Import

The ES6 and IFFE modules all require importing and object instantiation in your main script.

// ES6
import Disclaimer from 'src/components/disclaimer/disclaimer';
import Toggle from 'src/utilities/toggle/toggle';

<!-- IFFE -->
<script src="dist/components/disclaimer/disclaimer.iffe.js"></script>
<script src="dist/utilities/toggle/toggle.iffe.js"></script>

new Toggle();
new Disclaimer();

Replace

The ES6 module includes a constant named SCREEN_DESKTOP which determines wether the browser needs scroll the disclaimer in the browser’s view. The ACCESS Patterns Rollup configuration replaces this constant in the script during processing with the number 960 so that if the browser width is less than 960px wide, the browser will scroll to the disclamer. The same will need to be done in any project using the ES6 Module.

Polyfills

The Toggle Utility reqiures polyfills for IE11 support. See the “Toggle Usage” section for more details.