How to use in your project

v7.5.13

Patch Change

• ACW-18731 Filter Bar - Adjust spacing in header of Filter Accordions to match Figma.

v7.5.12

Patch Change

• ACW-17911 Tab Navigation - Style with underlines when tabs wrap

v7.5.11

Patch Change

• ACW-18412 Tab Navigation - Make tabs fill full width

• ACW-17719 Hero - Add max-width to the side image

• ACW-17743 Highlight Card - Remove hard-coded h3 from the Highlight Card

v7.5.10

Patch Change

• ACW-17719 Highlight Card - Highlight Card replaces Card with Offset Icon

v7.5.9

Patch Change

• Post Item - Deprecate News Post and rename Post Item

v7.5.8

Patch Change

• ACW-18008 WordPress Content - Add max-width for WP images

v7.5.7

Patch Change

• ACW-17999 Checkboxes & Toggle Switches & Radio Buttons - Font is now using Atkinson Hyperlegible

v7.5.6

Patch changes

• ACW-17716 Splash - Adjust internal spacing

Documentation updates

• ACW-17870 Mock Page Layouts - Fix a bug affecting mock pages

• ACW-17816 Filter Bar - Add variation to show count

v7.5.5

Patch changes

• ACW-17366 Wells & Buttons - Add AI gradient variants

• ACW-15581 Tables - Update Table header icon size

• ACW-17716 Splash - Update Splash design to be smaller and combine about and search elements into one container

• ACW-15345 Cards - Fix visited link color issue in Chrome and Safari

• ACW-17829 Columns - Fix Flexible Layout column sizing bug

Dev changes

• ACW-15327 Archive theming - Add --archive-text custom prop for ability to add accessible contrast text on archive colors

v7.5.4

Patch changes

• ACW-17554 Flexible Template - Creating more robust layout with min-width for two- and three-column layout

v7.5.3

Patch changes

• ACW-17137 WordPress Content - Changes the way content wraps around images

• ACW-17496 Card - Fixes color contrast issue for brow text in marketing cards

• ACW-16376 Pagination - Fixes pagination alignment

• ACW-16092 Hero - Fixes spacing issues

v7.5.2

Patch changes

• ACW-16815 News - Update font style to match h4.

v7.5.1

Patch changes

• ACW-16928 Hero - Add Gradient Background variant for ICPSR home page.

• ACW-16815 News - Update font size for News Post title.

• ACW-16711 Splash - Fix spacing underneath Splash.

Developer updates

• ACW-16609 Update Sass - Sass will show deprecation warnings during builds. The local dev build silences those deprecations.

  • Sass breaking changes
  • Silence deprecation warnings

• ACW-15788 Update NPM packages - Update all packages except Sass

  • You will need to run npm install to get the latest versions
  • You will need upgrade node to v20

v7.5.0

Minor changes (new components or variations)

• ACW-11378 News Index Page - New mockup for Archive as a Product News Index page.

• ACW-15826 Filter Bar - Update Filter component design.

Patch changes (component variations or bug fixes)

• ACW-16453 Images - On Archive as a Product pages images now don't automatically display full-width.

• ACW-16091 Featured Container - Add archive color option for background gradient.

• ACW-16223 Cards - Fix Card width in the limited card group.

v7.4.0

Minor changes (new components or variations)

• ACW-15075 Hero - Add variant for image on right.

• ACW-15827 Accordion - Add Accordion variant for Filter.

Documentation update

• ACW-15850 Featured Container - Update Featured Container mockup with clickable and non-clickable cards. Fix link to mockup.

v7.3.0

Minor changes (new components or variations)

• ACW-15805 Featured Container - Add container with gradient background.

• ACW-15805 Card with Offset Icon - Add card with offset icon.

• ACW-15800 Header - Add optional Searchbar to main page navigation.

Patch changes (component variations or bug fixes)

• ACW-15765 Progress Indicator - Remove line after final step.

• ACW-16065 Header - Increase height of Global nav to make logo larger.

• ACW-15787 Site Banner - Change link color to fix accessibility contrast issue.

Documentation updates

• ACW-16058 News - Update required/optional fields.

v7.2.1

Patch changes (component variations or bug fixes)

• ACW-15493 Pagination - Previous and Next buttons now hide based on the width of the Pagination component, not viewport.

• ACW-15762 Modals - Update modal-title to always be h2 font size.

• ACW-15760 Typography - Change brow text color. Update $grey-200 token value to match Figma. Add documentation for brow text.

• ACW-15533 News Post - Update News component to be a reusable pattern with more optional content.

• ACW-15431 Header - Fix navigation dropdown menus from breaking the viewport bounds.

v7.2.0

Minor changes (new components)

• ACW-11706 News Article - News article mockup

v7.1.1

Patch changes

• ACW-15236 Find Data - Make body text in Card React component optional. Update mockup data to remove brow text on some cards.

v7.1.0

Minor changes (new components)

• ACW-14243 Progress Indicator - New component for tracking where a user is in a multi-step process.

  Heads up! This component deprecates the Wizard.

Patch changes

• ACW-15022 Search - Fix Basic Search height

• CNSS-5342 Footer - Correct UM logo vertical bar color

• ACW-15115 Footer - Align footer links when there is no newsletter button or no social media

• ACW-14782 File Upload - Multiple updates:

  • Adds an ellipsis animation for file items that are processing
  • Updates out of date documentation
  • updates mobile view
  • updates file item upload progress bar
  • removes multi-select from the documentation

• ACW-15066 Typography - Add text-brow as a utility class for text styling

• ACW-11382 Cards - Add `.card-group-limited` style.

Documentation updates

• ACW-14788 Colors - Add :visited link color as a color token

Mockups

• ACW-11382 Find Data

v6.0.1

Patch changes (component variations or bug fixes)

• ACW-14501 File browser - Style updates

• ACW-14944 Search - Add Basic Search variant

v5.2.1

Patch changes (component variations or bug fixes)

• ACW-14003 Header - Remove background color behind logo on hover

• ACW-13830 Alerts - Update background colors to use new color ramps

v5.2.0

Minor changes (theme changes)

• ACW-13592 Neutral theme - Change Neutral theme accent color to grey color ramp

Patch changes (component variations or bug fixes)

• ACW-13762 Badges - Create default style for Badges, remove specific Badges styles in Complex Cards

• ACW-13620 Site Banner - Add Full-Width variant

• ACW-13557 Hero - Update styling in Hero sidebar

• ACW-13604 File Browser - Remove utility classes and inline styles

• ACW-13529 Header - Fix Logos in Navbar

• ACW-13079 Alerts - Fix size of inline SVGs

Documentation changes

• ACW-13079 Links - Update standard text for links with target="_blank".

v5.1.4

Patch changes (component variations or bug fixes)

• ACW-13349 Tables - Add .table-v-lines-none variant for no vertical lines

• ACW-12821 Forms - Adjust .header-bg, legend, and other form stylings

• ACW-12629 Sidebar Nav - Add more specificity to the anchored sidebar nav

• ACW-13403 Buttons - Remove transition for focus to support visual accessibility

• ACW-13079 Alerts - Change the name from Banners to Alerts, update the styling

Documentation changes

• ACW-10008 Typography & Spacing Utilities - Update with tokens

Dev changes

• ACW-13449 Astro Prettier Plugin - Update Prettier config to work with Astro files

v5.1.3

Patch changes (component variations or bug fixes)

• ACW-13138 Typography - Fix IBM Plex Bold. Also refactors the way theme files are formatted and the build process.

• ACW-13173 Badges - Create special .icpsr-secondary-200 badge variation. Also adds the $icpsr-secondary-200 token, specifically for this element.

• ACW-12667 Focus state - Focus state update on Close button in modal, hamburger icon for and close button in offcanvas (main nav shown on small screens).

v5.1.2

Patch changes (component variations or bug fixes)

• ACW-12794 Form Output - Styling updates, fix the icons overlapping

• ACW-12784 Tables - Remove AG-grid, replace with Tanstack

• ACW-12667 Buttons - Change white .btn-close variation styling to fix hover/focus styles

• ACW-12919 Form Labels - Nested Fieldsets inherit styles like normal labels

v5.1.1

Patch changes (component variations or bug fixes)

• ACW-11702 Form Output - <dt> text content will break if it doesn't fit the space

• ACW-12466 Site Banner - Update font size, remove utility classes

• ACW-11693 Search Input - Add Search Input Group with Select option

• ACW-12103 Hero - Add full-width Hero variation

• ACW-12287 Sidebar Navigation - Fix Sidebar Header example link

• ACW-12346 Radio Buttons - Fix labels

v5.1.0

Minor changes (new components)

• Site Banner - Add a component to be seen at the top of a page, across many pages

Patch changes (component variations or bug fixes)

• ACW-11891 Sidebar - Add anchored sidebar nav variant that sticks the sidebar to the left side of the screen while keeping the content contained and centered within the Bootstrap widths

• ACW-11610 Badges - Update color classes for badges, .badge-secondary uses secondary-200 color

• ACW-12046 Buttons - Fix margin issue with close button in modals

• ACW-10563 Links - Update visited link color

• ACW-11611 Form labels - Update form label font family and size

Documentation updates

• ACW-10469 Header - Add <main> element to code example

Dev updates

• ACW-12219 Upgrade dependencies - All Mosaic package dependencies updated

  You will need to run npm install for this update.

v4.2.0

Minor changes (new components)

• ACW-9858 Stack - including Divider.

• ACW-9858 Well

• ACW-9858 News

• ACW-9858 Events

• ACW-9858 Profile

• ACW-9858 Form Output

• ACW-9858 Splash

Patch changes

• ACW-8965 Sidebar - removed border bottom, added header.

• ACW-7899 Add primary color header - for fieldset headers and anywhere else.

• ACW-8979 Cards - Brow font fix.

• ACW-8976 Button audit - add .btn-icon class for buttons with icons and no text. Remove _buttons_old.scss file.

Dev changes

• ACW-9858 New mixins - new Sass mixins were created to facilitate automated creation of component variants:

  • @mixin make-color-variants
  • @mixin make-background-variants
  • @mixin make-spacing-variants

v4.1.0

Minor changes

• ACW-8733 Toast - Add toast component

Patch changes

• ACW-9060 AG-Grid - ag-cell overflow visible

• ACW-8677 Navigation - Fix specificity for offcanvas by removing from Sass nesting

• ACW-8978 Text Input - Minor updates found during audit

• ACW-6350-2 Accordions - Fix accordion header styling when placed inside .card-bucket

• ACW-7945 Badges - Updates to badge text styling

• ACW-9490 Fix CSS files - Dev fix for gitignore in /styles folder

v4.0.3

Patch changes

• ACW-8177 - File Download - Update to ag-grid styles with higher specifity.

v4.0.2

Patch changes

• ACW-8177 - File Download - Update File Download CSS import.

v4.0.1

Patch changes

• ACW-6949 File Download - Update File Download for testing in archive-ui.

v3.2.1

9/29/2023

Patch Change

• ACW-8279 Footer - making footer stick to the bottom of the browser screen

v3.2.0

9/18/2023

Minor Change

• ACW-6949 File Download (in development) - Add AGgrid to File Download

Patch Changes

• ACW-8075 Sidebar - Active sidebar text did not have correct contrast color.

• ACW-6104 Pagination - Pagination audit fixes.

• ACW-7669 Hero - Add line above Hero actionbar section, other small design changes.

Dev Change

• ACW-7429 - Upgrade Bootstrap and Astro

  You will need to run npm install for this update.

Mockups

• ACW-7875 Study Homepage - Add "What's this" modal.

• ACW-8293 Study Homepage - Change layout to test using floating sidebar.

v3.1.0

8/7/2023

Minor Changes

• ACW-6104 Pagination - Design audit fixes.

Patch Changes

• ACW-6343 Typography - Design audit to remove IBM Plex 700.

Documentation Changes

• ACW-6346 Toggle Switches

• ACW-6343 Typography - Combine text utilities into typography.

Dev Changes

• ACW-7305 Watch - Implement watch feature for Mosaic development

  You will need to run npm install for this update.

  This update adds a tool to run Sass build and Astro at the same time. When you make Sass updates, you will need to reload the page, but you don't need to stop and restart the process. Please run npm clean-code before you merge to lint and prettify your code.

• ACW-7492 mosaic.icpsr.umich.edu - Update links and URLS for mosaic subdomain

Mockups

• ACW-7489 Study Homepage

v3.0.1

7/21/2023

Dev Changes

• ACW-7249 Width utility classes - Add responsive breakpoints to width utility classes

• ACW-7237 Mocks Layout - Create a MocksLayout that uses the theme switcher. Now your mockup pages can easily have any theme on them.

  This layout works the same as the ComponentLayout, except the theme switcher is moved above the header to not interrupt the mockup.

  The page title can be dynamically added by hooking into the {title} prop in the MocksLayout component, like so:

  ---
  const data = await response.json();
  const title = data.projectTitle;
  ---
  <MocksLayout title={title}>
                      

Mockups

• ACW-7249 Study Homepage - Updates to hero section and first draft of Associated/Data-Related Publications.

v3.0.0

7/17/2023

💥 Major (Breaking) Changes

Please run npm install after upgrading to this version to get the latest packages installed for compatibility.

• ACW-5626 Turbocurator Prototype Health Check results - Added a React component for sidebarnav tab functionality.

• ACW-6103 DS Audit Sidebarnav - Cleaned up markup and improved flexibility of component. White icon SVG path on active state.

• ACW-6349 Update Banners and Colors for Icons
  The banner aspect of this introduces breaking changes:
  💥 Banner icons lose padding in favor of flex gap. The whole banner also has flex applied, so if there are multiple elements in the banner meant to be flow content (vertical), utility class .flex-column will need to be used. Create ‑‑icon‑height custom CSS property for overriding icon sizing.

  The colors aspect of this introduces breaking changes:
  💥 💄 Removes background color utility using only color name and value, eg .primary-20.

  Background colors can only be implemented with the bootstrap standard, using the bg prefix, eg .bg-primary-20. Other custom color utilities are removed:

  • .bg-light-purple-grey
  • .bg-success-color
  • .bg-special-color
  • .bg-error-color
  • .bg-info-color
  • .bg-field-color
  • .bg-h1

  (Most of these are custom and removed for the -color aspect of the name. .bg‑success is still a valid utility class.)

Patch Changes

• ACW-6348 Accordions - Bring accordions up to date with Figma.

• ACW-6352 Modals - Bring modals up to date with Figma.

• ACW-6346 Toggle Switches - Update toggle to be inline with Figma.

• ACW-6106 Focus states - Replace yellow focus state with blue ring on all components.

• ACW-1124 Button Badge - added documentation for aria-label.

Dev/Doc Changes

• ACW-6798 Change Documentation Component Organization - Puts componet docs pages and their example components into the same directory. Changes sidebar organization from "atoms/molecules" to "foundations/components".

• ACW-6914 Flexible Theme Switcher Test - Dropdown now has colors to test CSS custom properties overriding a new neutral theme.

• ACW-5904 Icons - New documentation page.

• ACW-6288 Update Readme - Updates info about Astro, build scripts, and deploying.

Mockups

• ACW-6803 Study Homepage

v2.2.0

5/23/2023

Dev Changes

Please run npm install after upgrading to this version to get the latest packages installed for compatibility.

• ACW-5366 Astro Updates - Update major version of Astro. See Astro docs for more info.

• ACW-5827 Implemented Stylelint and Prettier - These code quality tools were added to the build system. See the readme to learn more about it.

Patch Changes

• ACW-4559 Tables - Complex header table (crosstabs) examples and CSS updated.

• ACW-4559 Colors - Greys brought up to same level of tokens as primary and secondary colors. Token names have been adjusted to accomodate more options (see code below). See _tokens.scss for all grey colors.

  $grey-20: #f2f2f2; -> $grey-10
  $grey-50: #d1d1d1; -> $grey-20
  $grey-100: #a0a0a0; -> $grey-50
  $grey-300: #6e6e6e; -> $grey-200

  The grey colors are now easy to know accessbile combinations—with three step between, the two values have accessible contrast.

• ACW-4740 Header - Change header badge to secondary color

• ACW-5890 Sidebar - Fix bug with sidebar nav and z-index

• ACW-5809 Footer - Change ICPSR logo in footer

Deprecation

• ACW-6005 Stepper - Noted as deprecated, will be removed from code in the future. Replaced with vertical tabbed navigation.

v2.1.0

4/27/2023

Minor Change

• ACW-2469 Simple File Upload - Changes from React Uploady integration. SVGs and icon buttons.

v2.0.0

4/21/2023

💥 Major (Breaking) Changes

• ACW-1125 Buttons - Refactor buttons to be inline with Bootstrap standards, and Figma designs.

  Elements styled as buttons (could be links) now all need to have a `btn` class and whatever visual variants. This includes nav-link buttons (but not anchors).

• ACW-5266 Footer - Refactor footer for new design, including new content and sections.

Patch Changes

• ACW-5119 Table header buttons - Adjust button styles in table headers

• ACW-5321 Header - Add styles for counter badge in header navigation

Mockups

• ACW-4843 Study Home Page

• ACW-4843 Status Pages
  • Access Restricted
  • Error
  • Success
  • Timeout

v1.0.1

4/14/2023

Patch Changes

• ACW-5322 Header - Add basket icon to header

• ACW-4637 Buttons - Adjust size of close button

v1.0.0

4/4/2023

💥 Major (Breaking) Changes

• ACW-1124 Badges - Badge refactor. Removed lozenges and pills

• ACW-4826 Header - Header refactor. Simplifies classes and creates consistency in header.

Patch Changes

• ACW-5228 Tables - Adjusts gradient for overflow table content