New York State Design System Libraries

New York State Design System Libraries provides Drupal library support for NYS Design System components in sites using a traditional theme-based frontend. It is not intended for detached frontends or SPAs; for those, include the NYSDS library directly in your project.

For a full description of the module, visit the project page or the module's expanded documentation page.

Submit bug reports and feature suggestions, or track changes in the issue queue.

Requirements

There are no additional module or library dependencies. The NYS Design System library is included fully built at a specific version inside the module itself (see Installation below).

Installation

Install as a normal contributed Drupal module. For further information, see: Installing Drupal Modules.

This project is versioned to match a specific NYSDS release. We recommend installing the version of this module that corresponds to the version of NYSDS you need. Avoid using ^ or ~ in your composer constraints so upgrades remain deliberate and reviewable.

After installation, add this module as a dependency for any theme or module that will use NYSDS components. This is not required for Drupal to register the components, but it is recommended for clarity and dependency management.

Configuration

No active configuration is required. The module uses Drupal's built-in component registration system to provide template references for NYSDS components.

Usage

Example using the alert component in a Twig template:

{% set alertTypeLabel = fields.field_alert_type.content %}
{% if alertTypeLabel == 'Warning' %}
  {% set alertType = 'danger' %}
  {% set alertIcon = 'warning' %}
{% elseif alertTypeLabel == 'Information' %}
  {% set alertType = 'warning' %}
  {% set alertIcon = 'info' %}
{% endif %}
{% set alertLabel = fields.field_alert_label.content %}
{% include 'nys_ds:alert' with {
  type: alertType,
  icon: alertIcon,
  heading: alertLabel,
  text: fields.field_alert_message.content,
  primaryLabel: alertTypeLabel
} %}

Whenever a property requires rendered HTML, it's always best to pass it a render array or a twig block as follows:

{% set customContentBlock %}
  <p class="display--content">
    <span class="display--label">My custom variable:</span> {% myCustomVariable %}
  </p>
  {{ fields.field_some_field.content }}
{% endset %}
{% include 'nys_ds:accordionitem' with {
  id: accordionItemId
  heading: accordionItemHeading,
  content: customContentBlock
} %}

For much more expanded and detailed usage guidance, including webform components, see our expanded documentation.

Example site

This repository includes an example site configured with DDEV. Use it to explore how NYSDS components are applied in a Drupal context.

For more information, see our expanded documentation for the example site.

Maintainers

• Adam Fasoldt -- loopy1492
• Adam Gilman -- agilman
• Michael Green -- green657