Support

Use this page to get help and report issues.


Provide Feedback & Report Issues

The NDS team is constantly working to make improvements and patch issues. If you are experencing an issue with NDS, we would love to know how we can address it.

NDS Source Code

If you have feedback or issues regarding the NDS source code, such as Twig, CSS, or JS files, create an issue on the main niaid-design-system GitHub repository.

NDS on GitHub

NDS Documentation Site

If you have feedback or issues regarding the NDS Documentation Site (this website), create an issue on the nds-documentation-site GitHub repository.

NDS Documentation Site

NDS Drupal Theme

If you have feedback or issues regarding the NDS Drupal Theme code or installation, create an issue on the nds-drupal-theme GitHub repository.

NDS Drupal Theme

NDS Releases

New Components

  • Full-Width Callout: Full-width callouts can be used to emphasize a single, important piece of information for users and encourage them to take action.
  • Grid Layout: The Grid Layout component defines the horizontal and vertical sections of a page. The component provides four equal column options: 2, 3, 4, and 5 columns.
  • Responsive Image: Responsive images are intended to improve display and performance for images on devices with widely differing screen sizes and resolutions.

Global Asset Changes & Fixes

  • Change: Multi-level ordered and unordered list formatting/styling that conforms to best practices.
  • Fix: Remove external link icon from links that already have an icon attached.

NDS Documentation Site Changes & Fixes

  • Change: Added the following variables that handle the dynamic text for mobile search toggle.
    • navigation_mobile_rail_button_label
    • navigation_mobile_rail_button_active
    • navigation_mobile_rail_button_inactive

New Components

  • Dynamic Button: There are three button styles for each Color Theme option: Primary, Secondary, and Tertiary. In general, buttons are used for actions that occur on the page. This button should be used when the text and context of the button changes when the jQuery function "onClick" is performed.

Global Asset Changes & Fixes

  • Upgrade to Font Awesome 6
    • Icon Set has been updated to Font Awesome 6
    • "Twitter" logo has been updated to the newest "X" logo

New Components

  • Video Component: The Video component makes it easy to include videos of either type (YouTube or Microsoft). Additionally, you can control the float (left or right placement) of your images.

Global Asset Changes & Fixes

  • Maintenance: Update node packages and resolve deprecation errors

New Components

  • Event Listing View: The Event Listing View is a component that allows users to present events in a listing format.
  • Event Block: The Event Block is a component that allows users to present an event in a block format.

Global Asset Changes & Fixes

  • Issue: (Drupal Specific) Admin toolbar showing duplicate underlines.
  • Issue: (Accessibility) Add contentinfo role to differentiate footer.

Global Asset Changes & Fixes

  • Refactor: Remove Parallax from Banner Images

New Components

  • Atom: Date Indicator

NDS Documentation Site Changes & Fixes

  • Issue: Media component image style correction and the addition of 75%.

New Components

  • Process List: A process list displays the steps or stages of important instructions or processes.

Fixes Made During Testing 1.1.9

  • Issue: Tables have outside border and formatting is correct even for tables with incorrect syntax.

Global Asset Changes & Fixes

  • Issue: Remove focus on checkboxes when children are present.

Fixes Made During Testing 1.1.8

  • Issue: Table Styles need to include links in header cells.
  • Issue: External icons showing next to social media icons.
  • Issue: Event Registration URL Displaying Double External Link Icons.

Global Asset Changes & Fixes

  • Issue: Updated table styling to properly handle merged cells, account for additional accessibility, added border around all cells and removed banded row background colors.
  • Issue: Increased spacing around Message blocks.

Global Asset Changes & Fixes

  • Issue: Revised external icon code so it no longer populates with two links. Span element is now injected into the anchor element.
  • Issue: For accessibility purposes, Mobile Menu is now hidden for a screen reader's arrow keys on desktop.

NDS Documentation Site Changes & Fixes

  • Ajusted font table to reflect changes made to global header styles

Fixes Made During Testing 1.1.6

  • Issue: Adjusted global heading sizes to better differentiate H1-H6.

Global Asset Changes & Fixes

  • Issue: A review of Headings was conducted and adjustments were needed to improve differentiation and readability.
  • Issue: Checkboxes and Radio inputs now have the necessary focus state.

Global Asset Changes & Fixes

  • Issue: "HHS Vulnerability Disclosure Policy" has been added to the Footer component by default.
  • Issue: Navigation organism is now capable of supporting menu systems through content management systems.
  • Issue: Local Navigation should display only when it has items.

Global Asset Changes & Fixes

  • Update: Captions in the Media Component no longer extend past the width of the image.
  • Update: Search Results with file type icons stay inline when a file name is long when a user views this block on a desktop or tablet device.
  • Update: Local Navigation script_tags deprecation error resolved by adding an empty "url" parameter.

Global Asset Changes & Fixes

  • Update: Reverted external link icons for PDFs

Global Asset Changes & Fixes

  • Update: Rollback from Bootstrap 5 to Bootstrap 4 in order to support IE. Updated Patterns to support the rollback.
  • Update: Added Modernizr.js to help detect IE (specifically used for object-fit polyfill).
  • Update: New visual design for tables.
  • Update: Updated the Data Attributes tracking script to include breadcrumbs and pagination, and fixed issue with tab tracking.
  • Update: Changed the default for Local Navigation to be non-sticky. Updated logic to accurately determine the active page. Added style support depending on the elected sticky state and made some spacing adjusments.
  • Update: Added a “generic” option for the Button Share type. Ensured that the generic type and GovDelivery type use the main NIAID color.
  • Issue: Fixed and updated support for keyboard accessibility on Drupal facets.
  • Issue: Fixed height issue of the body area on IE.
  • Issue: Removed unsupported IE reference to includes in the External Link JS file.
  • Update: Added support for responsive tables if not using DataTables (the table will side scroll in this case).
  • Update: Updated the alignment and spacing of the Text Badge component.
  • Issue: Fixed display issue with Text Badge component used inside the of Credit and Caption component.
  • Update: Added an attributes parameter for the Block Default pattern.
  • Update: Updated the Block Default pattern to be more responsive when using an image.
  • Update: Updated the Featured Content Card Block to use object-fit for image rendering.
  • Update: Updated the padding and background colors of the Status Message Block for color contrast requirements. Fixed the unspecified-type state by changing it to an information circle.
  • Issue: Fixed issue with the Component Mobile Search script using $ instead of jQuery, and fixed issue with keyboard accessibility.
  • Update: Updated the Navigation Tabs component for mobile responsiveness.
  • Update: Updated carets used in the footer to be white instead of the theme accent color.
  • Update: Added support for a single card in the Featured Content Cards View.
  • Update: Decreased the breakpoint at which long text becomes hyphenated.
  • Update: Added rounded corner image support in the Block Default pattern.

NDS Documentation Site Changes & Fixes

  • Update: Reverted the Bootstrap version to 4.6.
  • Update: Updated documentation to reflect the change to Bootstrap 4.
  • Update: Added documentation on the new Button Share generic type.
  • Update: Updated documentation for the Block Default attribute parameter.
  • Update: Updated Local Navigation parameter listing.

NDS Drupal Theme

  • Update: Reverted the Bootstrap version to 4.6.

Fixes Made During Testing 1.1.2

  • Issue: Fixed issue with the Theme Builder where the product identity text was not showing on input.
  • Update: Added the "Working with NDS" section to the Development page.
  • Issue: Fixing broken Bootstrap 4 documentation links.
  • Update: Updating the documentation to reference Drupal 9 (from 8).
  • Issue: Fixing placement of Email and Telephone icons.
  • Update: Added the Theme documentation to the Static Site Builder Getting Started page.

New Components

  • Mobile Search Component: A component used in conjunction with the Global Header component to show and hide the mobile search bar responsively. On mobile, the search bar is collapsed to an area that can be toggled with a button in the header.

Global Asset Changes & Fixes

  • Update: Soft shadows now reserved for layout elements like Local Navigation and the Body Layout. In page content will use hard shadows.
  • Update: Refactored the Status Message Blocks to use Font Awesome SCSS instead of <i> tags. The parameter to pass for type has changed to be the same without the preceding “message--”. Defaulted the type to “information”. Added faint background colors to status messages for visual interest.
  • Update: Added an optional label, action, and value for the Search Form.
  • Update: Modified the visual style of the Tabs Navigation component.
  • Issue: Added several Drupal-related fixes for various stylings.
  • Update: Added button utility classes for large and small buttons.
  • Update: Added block utility classes for border, shadow, and no style.
  • Update: Added support for GovDelivery in the Share Button component.
  • Update: Added a 100% height on the Body Layout and adjusted the top padding.
  • Update: Added support for table header cells that are links.
  • Issue: Fixed display issues with Featured Content Cards in Drupal.
  • Update: Added a function to the Block Hero module that adds the style--hero class to the body if there is a hero present.
  • Update: Increased the default height of the Block Hero image and removed the overlay.
  • Update: Allowed the Branding Component to show the NIAID logo without having a product identity.
  • Issue: Hid <br> tags in image credits in the Media Component rendered by Drupal.
  • Issue: Added proper styling to the fieldset rendered in the Facet Form by Drupal.
  • Update: Refactored the Breadcrumbs Navigation spacing.
  • Update: Moved the “Skip to Front” skip link in the Drawer Navigation to outside the content block region.
  • Issue: Fixed functionality issues with the Dropdown Navigation component. Added a helper function to determine if the dropdown is presently open.
  • Update: Updates to the Local Navigation markup, added a function to open links via JS for Drupal, applied a max-height and reduced the arrow size, removed the “hero-present” class.
  • Issue: Fixed styling of the dropdown toggles in the Primary Navigation component.
  • Update: Changed the default breakpoint on the Global Footer columns.
  • Update: Cleanup in the Mixins SCSS file and added Bootstrap 5 breakpoint mixins.
  • Update: Added an overflow-hidden utility class and $border-white variable.
  • Update: Added a 1rem top padding to <h1> elements.
  • Update: Added a new global boolean variable in JS - viewportIsMobile.
  • Issue: Restored proper padding on Layout elements when using a hero.
  • Update: Removed deprecated styling for block--callout in the shadows SCSS.
  • Issue: Fixed long Breadcrumb non-wrapping issue.
  • Update: Reviewed credit and caption wrappers if no credit or caption is present in the Media Component.

NDS Documentation Site Changes & Fixes

  • Update: Added Button and Block Utilities documentation in the Components section.
  • Update: Added the Mobile Search Component documentation to the Molecules page.

Fixes Made During Testing 1.1.1

  • Issue: Addressed various typos across the NDS Documentation Site.
  • Issue: Fixed color contrast on an image, removed name and email from screenshot on NDS Documentation Site.

Global Asset Changes & Fixes

  • Update: Upgrade to Pattern Lab 3.0.
  • Update: Upgrade to Bootstrap 5.
  • Update: Removed Composer Dependency.
  • Update: Revised shadowing into soft and hard shadows.
  • Update: Updated Readme with new installation instructions.
  • Update: Updated NDS components to use Bootstrap 5 (Accordion, Modal, Local Nav, Mobile Rail).
  • Update: Added spacing between certain demo examples.
  • Issue: Fixed issue with long words not breaking and overflowing on mobile.
  • Update: Added new spacing and padding handling for two column layouts.
  • Update: Removed the “No Shadows” option of the Layouts Body component.
  • Update: Reduced the padding on the Layouts Body component on larger screens.
  • Update: Removed unnecessary attribute from Navigation Dropdown.
  • Update: Changed the default <body> color to be the alternate background color.
  • Update: Revised the style for Hero vs No Hero and Shadow vs No Shadow interactions.
  • Update: Removed the default background color from the Featured Cards View.
  • Issue: Fixed issue where 0-based sizing utility classes were not being generated.
  • Update: Removed negative margin on the Main Layout component when using the Hero style.
  • Update: Updating the Search Form component to use the new shadow mixin.
  • Update: Removed the shadow from the Primary Navigation component in the Shadow style.

Static Site Builder Changes & Fixes

  • Update: Gulpfile updates to support Pattern Lab 3.0.

NDS Documentation Site Changes & Fixes

  • Update: Updated Doc Site code to use Pattern Lab 3.0 and Bootstrap 5.
  • Update: Updated the Getting Started page documentation to reflect new Pattern Lab version.
  • Update: Removed Composer Dependency.
  • Update: Updated Readme to reflect new changes.
  • Update: Made Public Sans the default for headings and body on Theme Builder.
  • Update: Adjusted the home page design for new background handling. Removed Shadow on body card.
  • Update: Added Pattern Lab as a library in the “Libraries” section of Development.
  • Update: Removed Composer and combined NPM and Node.js in the Prerequisites section on the Getting Started pages.
  • Update: Removed specific documentation of Shadow options while style is being defined.
  • Update: Removed unnecessary “fixed-right” classes on the page layouts.
  • Update: Updated the column widths on the Design page.
  • Update: Removed USWDS and added Stickybits reference in JS snippet on Getting Started.

NDS Drupal Theme

  • Update: Updated the NDS Drupal Theme to use Pattern Lab 3.

Fixes Made During Testing 1.1.0

  • Issue: Fixed IE spacing and overflow issues.
  • Update: Updated language on the Getting Started page.

Global Asset Changes & Fixes

  • Update: Updated the visual style of the Form Search component.
  • Issue: Fixed the responsiveness of checkboxes/filters and Text Chip on smaller screens.
  • Update: Created a main spacer variable to control the padding/margin within/between layout elements including Navigation and Header components. Made updates to support these patterns with a hero layout.
  • Update: Added a template for a generic page using a hero.
  • Update: Made use of the $layout-mobile-menu-breakpoint variable in Navigation patterns. Set the value to ‘lg’ instead of a specific pixel value.
  • Update: Added a “Medium” shadow style. Applied the shadowing to relevant patterns.
  • Issue: Fixed issue with Drupal floated image alignment.
  • Update: Created global variables and utilities for determining browser size changes and mobile breakpoints.
  • Update: Restored the shadowing on the Body Layout component. Added the alternate page background color to the page using shadowed design.
  • Issue: Fixed double underline of heading links in the Global Footer Pattern. Added support for external links and caret arrows.
  • Issue: Fixed responsiveness issue of the Search Result Block pattern.
  • Issue: Fixed display and theming issues with the Text Chip pattern.
  • Update: Added support for a left or right image within the Default Block pattern.
  • Update: Removed support for breadcrumbs in the Block Hero component.
  • Update: Tightened spacing of the Component Branding spacing on mobile.
  • Issue: Fixed issue with floated images via the Media Component on mobile.
  • Issue: Removed a console.log statement from the Toast Component JS.
  • Issue: Fixed the reference of $ instead of jQuery in the Local Navigation pattern.
  • Issue: Fixed issue with Pagination buttons not wrapping on mobile.
  • Update: Removed max-width on body text.

NDS Documentation Site Changes & Fixes

  • Update: Added a NDS Style Guide PDF available for download on the Design page.
  • Update: Updated the styling of the color swatches on the Design page.
  • Issue: Updated styling of the Tout Block for padding and border on hover.
  • Issue: Fixed issue with too much padding on bottom of the home hero.
  • Update: Updated Shadows section to account for the “Medium” shadow option.
  • Update: Updated relevant pattern documentation with any global changes.
  • Update: Modified the column values for the Components sub pages to increase the space for Local Navigation.

Fixes Made During Testing 1.0.9

  • Issue: Fixed typo in the Hero Block description.
  • Issue: Added mobile margins to the buttons on the Style Tile of the Builder.

New Components

  • Local Navigation: A component that allows users to navigate pages of a site section. Accessible to both Static Site Builder and NDS Drupal Theme users.
  • Page Contents: A navigation element that automatically pulls out H2’s from a page and creates a linked list, providing easier access to page contents.

Global Asset Changes & Fixes

  • Update: Changed NDS to use “Soft Shadowing” from Material Design. Updated components and elements to reflect this change.
  • Update: Added the Stickybits library to NDS.
  • Update: Added letter spacing SCSS variables and applied them to NDS elements.
  • Update: New accordion feature that allows users to link directly to a section. This will scroll the user to that section and open the specified accordion.
  • Update: Added grayscale color variables. Applied variables to components.
  • Update: Changed the hover/focus hex value for all primary theme colors to be 50% darker than the base.
  • Update: Changed Alert pattern styling to use proper heading color.
  • Update: Made the link parameter in Search Result Block optional.
  • Update: Increased right padding on Status Block.
  • Update: Changed the spacing on the Component Media pattern.
  • Issue: Fixed alignment issue with breadcrumbs.
  • Update: Updated the Primary Navigation markup to eliminate the inner wrapper.
  • Update: Changed the active page styling for the Primary Navigation component.
  • Update: Added a border-link variable.
  • Update: Added global styles for printing.
  • Update: Adjusted spacing of list items.
  • Update: Changed color of the horizontal rule element to a lighter gray.
  • Update: Added corner theme support for the Text Chip element.
  • Update: Added a utility function to help define sticky elements.

Static Site Builder Changes & Fixes

  • Update: Update: Modified the Gulpfile to improve the Static Site Builder and Drupal build and maintenance process:
    • Boolean-based sourcemaps generation.
    • Added copyGlobalFonts and copyGlobalTwigComponents functions to Gulp.
    • Modified “transfer” Gulp aggregate.
    • Added more directories to the list of “cleaned” directories in Gulp.
  • Update: Added Twig filters to the NDS source code to support Local Navigation in Drupal and static environments.
  • Update: Added sourcemaps to .gitignore.

NDS Documentation Site Changes & Fixes

  • Update: Updated components to reflect new shadow styling.
  • Update: Updated the Design → Shadows documentation to reflect new shadowing strategy.
  • Update: Added the Local Navigation and Page Contents patterns to the documentation site.
  • Update: Updated the navigation to reflect the above component additions.
  • Update: Modified Gulpfile to include standardizing updates.
  • Issue: Fixed issue of code snippet rendering by providing a special tag if showing references to scripts and links.
  • Update: Capped the max height of code snippet views.
  • Update: Added Stickybits to the list of NDS libraries in the Development page.
  • Update: Upgraded the Font Awesome version.

NDS Drupal Theme

  • Update: Modified Gulpfile to include standardizing updates.

Fixes Made During Testing 1.0.8

  • Issue: Fixed analytics tracking for Primary Navigation.
  • Update: Added new public method for formatting data attributes.
  • Update: Added data attribute support for Local and Page Contents Navigation.
  • Issue: Handled the Page Contents Navigation component styling on mobile.
  • Update: Added a 4th column to the global footer.

Global Asset Changes & Fixes

  • Update: Removed the .gitmodules file from the main repository.
  • Update: Moved the image in the Default Block to be on the right of the card.
  • Update: Increasing the font size of the Navigation Breadcrumbs text.
  • Update: Added border variables for blocks, input, and transparent. Updated patterns to use the new variables.
  • Update: Made the background of the Block Facet transparent.

Static Site Builder Changes & Fixes

  • Issue: Fixed issue with the addPage function in the gulpfile that prevented deeply nested pages from generating.

NDS Documentation Site Changes & Fixes

  • Update: Added a .gitmodules file for inclusion in the SSB build.
  • Issue: Fixed issue with the addPage function in the gulpfile that prevented deeply nested pages from generating.

New Components

  • Error Block: The error block is used predominately as a display for 404 and 403-type errors. It includes two block regions for full content customizability.

Global Asset Changes & Fixes

  • Update: Updated dependencies to later versions to address vulnerabilities.
  • Update: Updated the following patterns to prepare for Pattern Lab 3.0 upgrade:
    • Layouts Main
    • Block Hero
    • Block Search Result
    • Component Modal
    • Input Group Select
    • Navigation Mobile Rail
    • Global Footer
    • Generic Template
  • Update: Added support for data attribute tagging of facets (requirement of NDP).
  • Update: Adjusted font sizes and weights for H1’s and H3’s.
  • Update: Changed the padding on the code HTML element.
  • Update: Changed the maximum width for the body layout to 1280px.
  • Update: Changed visual style of the Featured Content Card pattern.
  • Update: Updated the styling for the Was This Page Helpful block (inspired by the Inside NIAID design).
  • Update: Added package-lock.json to repo for better dependency tracking and management.
  • Update: Changed border to the light style for the Icon Circle pattern.
  • Update: Changed input labels to semibold font weight.
  • Update: Changed the layouts_body_vertical_padding to layouts_body_top_padding in the Layouts Body component.
  • Update: Added support for telephone links, modified the demo pattern to reflect this support.
  • Update: Added the ext-link-footer class to footer links to suppress the underline normally.
  • Issue: Fixed spacing issue with the mailto icon, adjusted the vertical alignment of icon.
  • Update: Adjusted sizing and line height of the Text Image Credit Caption component.
  • Update: Changed heading font weight in blocks to reflect the global heading styling.
  • Update: Changed the wrapping element to an <aside> in the Navigation Breadcrumbs component. Changed the visual style to make text semibold and adjusted spacing.
  • Update: Changed the separating lines to light in the Navigation Drawer component.
  • Update: Added a new medium line-height SCSS variable.
  • Issue: Fixed issue with margins inside of Drupal blocks.
  • Update: Removed the shadowing from the Body Layout when using the shadow style.

Static Site Builder Changes & Fixes

  • Issue: Fixed issue in generating sourcemaps for CSS and JS. Sourcemaps will be omitted on production builds.
  • Update: Created new command to build production: gulp build --production:
    • Without the --production flag, sourcemaps for JS and CSS are generated.
  • Issue: Fixed path to the NDS source submodule in the gulpfile.
  • Update: Created a new Error page example.
  • Update: Reordered package declarations at top of Gulp file to be alphabetical.
  • Update: Added breadcrumbs to the Generic page example.

NDS Documentation Site Changes & Fixes

  • Update: Redesigned the NDS Doc Site home page to add more visual interest.
  • Issue: Fixed issue in generating sourcemaps for CSS and JS. Sourcemaps will be omitted on production builds.
  • Update: Updated dependencies to later versions to address vulnerabilities.
  • Update: Moved the Font Awesome Pro and Migration Guide to fall under the Development section.
  • Update: Added documentation for the Error Block pattern.
  • Update: Added a 404 page to the NDS Doc Site.
  • Update: Updated documentation for npm installs from “npm install” to “npm ci” on the SSB and Drupal Theme pages.
  • Update: Updated SSB documentation to reflect new build command.
  • Update: Added package-lock.json to repo for better dependency tracking and management.
  • Update: Updated submodule update task in gulpfile, simplified the transfer to build function.
  • Update: Created a new “Featurette Block” for feature use.
  • Update: Changed visual style of the custom tout pattern.
  • Update: Updated font weight and size of the TOC nav./li>
  • Update: Added the Policy site (NDP) to the footer.
  • Update: Updated the library version numbers on the Development page, removed USWDS from dependencies.
  • Update: Updated heading table on Design to reflect visual changes.

NDS Drupal Theme

  • Update: Removed the NDS submodule from the repo (it is expected to be installed when running gulp init).
  • Update: Updated dependencies to later versions to address vulnerabilities.
  • Issue: Fixed issue in generating sourcemaps for CSS and JS. Sourcemaps will be omitted on production builds.
  • Update: Added package-lock.json to repo for better dependency tracking and management.

Fixes Made During Testing 1.0.6

  • Issue: Fixed issue with the WTPH button styling on different themes.
  • Issue: Removed the border on the Error Block when using without shadowing.
  • Update: Added better alternative text for the Error Block image.

Global Asset Changes & Fixes

  • Update: Rewrote component JavaScript files to utilize a modern, “modular” format that is more flexible for any type of project. Included an “init.js” file to initialize each JS module.
  • Update: Moved final location of generated nds-min.js file out of js/global/ to js/.
  • Update: Changed “source” directory to “src.”
  • Update: Changed “public_html” directory to “dist.”
  • Update: Updated the NDS LICENSE file.
  • Update: Added autoprefixer to Gulp CSS process.
  • Issue: Removed test data from the Document Icon demo pattern.
  • Issue: Removed external link icon from footer caret links.
  • Update: Made the URL visibility optional in the Search Block molecule.

Static Site Builder Changes & Fixes

  • Update: Added autoprefixer to Gulp CSS process.
  • Issue: Restored missing .gitignore file.
  • Update: Added a more specific command for updating the NDS submodule.

NDS Documentation Site Changes & Fixes

  • Update: Updated the Working with NDS section on the NDS SSB and NDS Drupal Theme pages to include information on updating NDS.
  • Update: Updated documentation on the NDS Drupal Theme page to include more robust Getting Started instructions.
  • Update: Changed the Getting Started navigation to go directly to pages instead of sections, removed the Quick Start option.
  • Update: Changed “source” directory to “src.”
  • Update: Changed “public_html” directory to “dist.”
  • Update: Updated README to explain new directory names.
  • Update: Added autoprefixer to Gulp CSS process.
  • Update: Added header to distribution CSS and JS files via Gulp.
  • Update: Cleaned up unneeded folders.
  • Update: Removed heading styles override classes.

NDS Drupal Theme

  • Update: Reorganized the theme for better interaction with the NDS submodule.
  • Update: Added a “gulp init” function to pull files into a new patternlab/ directory.
  • Update: Changed “source” directory to “src.”
  • Update: Added .gitignore file to repository.
  • Update: Updated README to include updated initialization instructions.

New Components

  • Input Validation: A pattern used to report issues with user input in forms. Used in conjunction with NDS Input Group components.
  • Toast: A component to show small status messages to users.

Global Asset Changes & Fixes

  • Update: Added a light border to the Document Icon pattern on the non-shadow theme style. Removed adjacent external link icons if present.
  • Update: Adjusted font weights and sizes of headings to improve readability.
  • Update: Tightened spacing between search chips.
  • Update: Added styles to support document-based search results.
  • Update: Adjusted the spacing/padding of the Form Facet component.
  • Update: Added an error class to support revealing the Input Validation text.
  • Update: Updated all Input Group patterns to use the Input Validation component. Updated the documentation of each pattern.
  • Update: Updated the block statements in the generic template component.
  • Issue: Fixed issue with the font declaration classes for the Martel font.
  • Issue: Fixed display issue on the Datepicker component where the flyout was not properly positioned.
  • Update: Updated Merriweather font declarations for fallback weights for those which the font does not support natively.
  • Update: Added two “display classes” for headings.
  • Update: Removed unneeded CSS from the Search Form styling on corners.
  • Update: Removed unneeded CSS from the form-text class and added no shadows to facets block.
  • Update: Added data-nav support for Dropdown Toggle in Primary Navigation component.
  • Update: Adjusted spacing of the credit and caption.
  • Update: Added Document Badge functionality to document links.
  • Update: Improved responsive behavior of the Status Message block.

Static Site Builder Changes & Fixes

  • Update: Added page examples to help the start process. Examples include: Generic, Search, Form
  • Update: Added a new gulp command to sync with NDS updates.
  • NDS Documentation Site Changes & Fixes
  • Update: Broke out the Components page into three separate pages for Atoms, Molecules, and Organisms.
  • Update: Added a Support Page (accessible in footer) for users to get help if they need it.
  • Update: Added documentation for the Toast component.
  • Issue: Fixed problem where the SSB Readme was empty in the package.
  • Update: Added documentation about Display classes on the Design page.

Fixes Made During Testing 1.0.4

  • Global: Fixed spacing on USWDS toggle for Safari.
  • Global: HR alignment issue on IE.
  • Global: Updating coverage for the “body” theme style (adding spans, divs, and placeholder text).

Global Asset Changes & Fixes

  • Update: Reduced the amount of Bootstrap SCSS dependency in NDS components. Significantly altered components following reduction:
    • Accordion Component
    • Modal Component
  • Update: Implemented Responsive Font Sizing (RFS) feature from Bootstrap for headings.
  • Updated components with headings to leverage RFS.
  • Update: Added height: auto on image in Default Block to override Drupal-set heights.
  • Update: Added display: block to the .media class for Drupal.
  • Issue: Fixed issue with font sizing in input fields.
  • Update: Added additional padding for medium size screens in the Layouts Body component.
  • Update: Changed NDS Blocks styling to use a lighter border color.
  • Issue: Fixed issue with Mobile Rail height on certain browsers.
  • Update: Added font sizing variables.
  • Update: Added Bootstrap-based Display headings.
  • Update: Reordered the z-index of modal and dropdown components.
  • Update: Changed body background color to use “background-color” as opposed to “background” following Bootstrap best practice.
  • Issue: Added Theme Styling support for modals.

NDS Documentation Site Changes & Fixes

  • Issue: Fixed issue where design files were not available for download.
  • Update: Updated language surrounding Bootstrap usage on Development page.
  • Update: Updated font sizing table on the Design page.
  • Update: Added documentation about Responsive Font Sizing (RFS) on the Design page.
  • Update: Added data-nav attributes to the main primary menu links.
  • Issue: Fixed JS Bundled Zip not containing any files.

Global Asset Changes & Fixes

  • Update: The official NDS repository now houses only official assets.
  • Update: Modified “disabled” button style to be more clear.
  • Update: Changed border color on tables without shadow.
  • Issue: Fixed missing open/close buttons on DataTables with wrapped columns.
  • Update: Created SASS variables for single-spaced line-height: $line-height-small.
  • Update: Add font stack SASS variables and replaced some SASS definitions with these variables.
  • Update: Changed the default visual style for users of NDS to use Material shadows.
  • Update: Changed the font-weight for H1, H2, H3 to “Light.”
  • Issue: Fixed Media Component credit and caption width not conforming to image width.
  • Update: Updated the Gulpfile to convert functions to tasks.
  • Update: Updated the font sizes for headings in the default block.
  • Update: Updated NPM packages to more current versions.
  • Update: New and more HD Favicons added for NIAID NDS properties.
  • Issue: Fixed placeholder text color for input fields.
  • Issue: Rolled back styling of the component to have better cross-browser design support.
  • Issue: Fixed the dropdown component of Bootstrap not working on browsers other than Chrome.
  • Update: Added classes for the font family stacks.
  • Update: Removed the id=”anch_*” from the Form Facet component example.

Static Site Builder Changes & Fixes

  • Issue: Fixed issue where gulp build would not transfer library CSS files.

NDS Documentation Site Changes & Fixes

  • Update: New GitHub repository created for the Documentation Site: https://github.com/niaid/nds-documentation-site
  • Update: Added the Autopath Feature from the Static Site Builder to the Documentation Site.
  • Update: Added language to clarify the use of cookies on the NDS Doc Site (for the purposes of changing the web styles).
  • Issue: Fixed header GitHub button not being keyboard accessible.
  • Update: Updated the Design page typography table to include new heading font-weights.
  • Update: Updated the H1 size on mobile.
  • Update: Added a banner on the Staging Doc site to differentiate between prod.
  • Issue: Fixed some formatting on the Development page.
  • Update: Updated a small portion of language in the Typography section.
  • Issue: Fixed an overlap issue on Theme Builder on mobile.

NDS Drupal Theme

New Components

  • Molecules -> Navigation -> Navigation Dropdown
    • Allows users to easily define a dropdown menu. Most useful in conjunction with the navigation-primary component.
    • Updated the navigation-primary demo to showcase the usage.
  • Molecules -> Navigation -> Navigation Tabs
    • A navigation style allowing users to access different sections of a page.

Global Asset Changes & Fixes

  • Update: Modified button demos to include more button types.
  • Update: Implemented a system of Z-Index variables and updated pattern SCSS to use them.
  • Update: Added an attributes parameter to the icon-default pattern.
  • Update: Added the “full” option for Media Component float parameter - makes image full width of body content.
  • Update: Moved the “closest” polyfill into the utilities.js file.
  • Issue: Removed border issue on hover/focus from the icon-document pattern that caused the icon to move.
  • Update: Updated the data attributes script for more comprehensive support of components and Google Analytics tracking.
  • Issue: Fixed issue with alignment of pagination buttons on IE.
  • Issue: Fixed issue preventing the addition of extra classes on the block-search-result pattern.
  • Issue: Fixed issue where the Accordion component was not receiving the proper data attributes.
  • Update: Added hardcoded data attributes to the component-uswds-banner for tracking.
  • Update: Added hardcoded data attribute for the mobile menu button in the global-header pattern.
  • Issue: Removed unintended shadow on the component-uswds-banner when using the Shadows style.
  • Update: Tied NDS styling for aligned images to Drupal markup.
  • Update: Added support to the default--block for a default--block--image style.
  • Update: Handled button sizing for mobile.
  • Update: Reduced padding for blocks on mobile.
  • Issue: Fixed Mobile Rail Button display when using Material shadows.
  • Issue: Fixed visited style for document icons, added additional CSS handling/classes for document types.

Static Site Builder Changes & Fixes

  • Feature: Auto Path Builder (Inspired by Nuxt.js)
    • The Static Site Builder (SSB) will use the page file name and relative location within the 05-pages/ directory as the distribution URL when the project gets built. For instance, if someone creates a design/design.twig file, the distribution path on build will be /design.
    • This feature eliminates the need for an 06-dist/ directory, as well as the need to manually specify the page URL in the Gulpfile.js, reducing the SSB bundle size by removing unneeded files and making the SSB more user-friendly for less technical users.

NDS Documentation Site Changes & Fixes

  • Update: Updated the data attributes script for more comprehensive support of components and Google Analytics tracking (based on the global change).
  • Issue: Fixed the issue with the Copy and Pattern Lab Info buttons not being tracked.
  • Update: Added the dropdown component to the primary navigation of the site.
  • Update: Removed the “Overview” section from each dropdown as now each section title can be clicked.
  • Update: Updated pattern documentation on the Components page for additional patterns and changes.
  • Update: Added a Components dropdown to the primary/mobile menu allowing direct access to the Atoms,
  • Molecules, and Organisms sections.
  • Issue: Various spacing fixes for mobile display.
  • Issue: Components and Development pages had an incorrect label on the local navigation button on mobile.