NYS Design System Release 1.14.0 “Marcy”

Why “Marcy?” 🏔️

Mount Marcy is huge. This release is a huge milestone for us too. This is our one year anniversary of the 1.0 release of the NYS Design System, so we figured we'd go with the biggest mountain around! Marcy is the highest peak in New York, with an elevation of 5,343.1 ft (1,628.6 m)!

Learn more about Mount Marcy.

New approach to agency themes

New agency theme files have been added back to the @nysds/styles package. They are no longer minified so they are easier to read. To get the new agency themes to work, you'll need to either link to the separate file, or add a data-theme attribute to your body or HTML tags.

There are now three ways to apply agency themes to your apps and sites:

1. <html lang="en" data-theme="admin">
2. <link rel="stylesheet" href="theme-admin.css">
3. <body class="nys-theme-admin">

Jesse Gardner and Eric Steinborn are stylish.

Customize the `<nys-accordion>`

Based off a contribution from Brian Miller (in discussion #1270) we realized that in some instances you may want an accordion's content to expand the full width of a screen. Additionally, we have provided a set of new css variables which can be overridden to set a max length for accordion content, and to color the accordion headings. Read the accordion documentation.

You can apply for or renew a U.S. passport through the U.S. Department of State. Some renewals can be done by mail.

Check your registration Fill out application

You can check your registration status, update your information, or find out how to register through the National Association of Secretaries of State.

<style>
  :root {
    --nys-accordion-background-color--header: var(--nys-color-theme-weak);
    --nys-accordion-background-color--header--hover: var(--nys-color-theme-weaker);
    --nys-accordion-content-max-width: 150ch;
  }
</style>
<nys-accordion>
  <nys-accordionitem id="accordionId1" heading="How do I renew my passport or apply for a new one?" expanded>
    <p>
      You can apply for or renew a U.S. passport through the U.S. Department
      of State. Some renewals can be done by mail.
    </p>
    <div>
      <a href="https://www.ny.gov" target="_blank">Check your registration</a>
      <a href="https://www.ny.gov" target="_blank">Fill out application</a>
    </div>
  </nys-accordionitem>
  <nys-accordionitem id="accordionId2" heading="How can I find out if I’m registered to vote?">
    <p>You can check your registration status, update your information, or find out how to register through the National Association of Secretaries of State.</p>
  </nys-accordionitem>
</nys-accordion>

Robert Chen performed accordion surgery.

“Other” option available in `<nys-checkbox>`

Most times when you need to collect information from a user you present them with a list. Somethings though, that list is incomplete, and you need an option for a user to type in their reply. The other option is now available to create a user-entered selection in a <nys-radiobutton> and <nys-checkbox>. Read the checkbox other documentation Read the radiobutton other documentation

<nys-checkboxgroup label="Select your favorite New York landmarks">
  <nys-checkbox label="Adirondacks" name="landmarks" value="adirondacks"></nys-checkbox>
  <nys-checkbox name="landmarks" value="finger-lakes" label="Finger Lakes"></nys-checkbox>
  <nys-checkbox name="landmarks" value="catskills" label="Catskills"></nys-checkbox>
  <nys-checkbox name="landmarks" other></nys-checkbox>
</nys-checkboxgroup>