Currently, data in Footer and Header components are out of sync with what's currently in Mass.gov. Add the ability in Mayflower to demo how to fetch Mass.gov Drupal API endpoints to feed the components to stay up to date.

Main nav endpoint: https://www.mass.gov/api/v1/nav/main
Footer links endpoint: https://www.mass.gov/jsonapi/menu_link_content/menu_link_content

Mayflower version: @massds/mayflower-react" 10.0.0-alpha.2

The FooterSlim component includes an h3, which can result in inaccurate heading ordering, since there isn't a parent h2. This could be confusing to screen reader users who navigate by headings. A more accurate heading level would be an h2 (or no heading?)

Refer to the button design variations to refactor the button component:
https://massds.gitbook.io/edit-mayflower-doc/components/atoms/buttons

• default size to small and remove .ma__button--small variation
• change class names for secondary, outline, quaternary to reflect the button variations
• add new tertiary and quaternary options
• add a disabled button option to all buttons

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /site/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

View the update logs.

Using many of the React Mayflower components on a React 18.3+ projects will throw a warning upon starting the application such as this:

Warning: Image: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Using defaultProps is deprecated (per facebook/react#25699) and should be replaced with normal JavaScript parameter defaults. There's a pretty good write up on the situation here: https://sophiabits.com/blog/stop-using-defaultprops

• Mayflower version: 12.6.0
• Operating system and version: Linux

Title: Horizontal scroll bar visible all times when expanded or any time browser size is increased.

When reporting a bug, include:

• Mayflower version: 13.0.1/13.1.0
• Operating system and version: Windows 11 Pro
• Browser and version: Latest Chrome, Edge
• Description: Footer and Header template, when used, horizontal scroll bar displays regardless of the content, if the browser window is at 80% or more or expanded.
• Steps to reproduce on live site: Mass.gov
  -Go to mass.gov with your browser expanded. Horizontal scrollbar is visible
  -Minimize the browser window to 50% and it disappears.
  -Resize(increase) the browser window by dragging and it appears again.

Currently, buttons usages are not defined properly and some variation definitions are missing.
e.g. there's quaternary button but no tertiary, there's no diabled button style defined, etc.
The following is proposed new button design and usage:

Mayflower version: 10.0.0-alpha.2

We recently added the FooterSlim component to our application and noticed the bundle size increased about 100kb. This seems to mostly be due to the inclusion of moment as a dependency in this component, which comes with a large set of locale files:

It looks like the footer component uses moment as a way to reference the current year in the copyright text, in which case something like the following should work without requiring an external dependency:

new Date().getFullYear()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

The documentation for the React package currently mentions installing the package, importing a component, and including its JSX. However, it appears that some components also include CSS-in-JS, which requires additional installation steps to support. If the NPM package doesn't work out of the box, it'd be helpful to understand what are a project's build system prerequisites in order to support the React package. Thanks!

Existing vertical menu patterns (mobile):

• Main nav
• TOC
• Jump links

• Add color stories to show Mayflower color tokens
• Programmatically generate gradient variants for Mayflower theme colors to use in data visualizations (step 1)
  Follow up: extend color palettes for data visualization usage and sub-brands

@clairesunstudio The Drupal site loads again locally with this fix in place. I checked various pages and they looked good. The exceptions were the main horizontal navigation and Hide Alerts button. I checked Mayflower locally with both this branch and assets/fonts-add-vi-support and both versions looked the same (see screenshot). Is that something we were looking to address with this change?

Originally posted by @tom-fleming in #1077 (comment)

ButtonWithIcon component usage and theme styling should be consistent with Button.
See documentation: https://massgovdigital.gitbook.io/mayflower/components/atoms/buttons

Currently, ButtonWithIcon primary usage is not styled properly.

Primary buttons should have solid colors with uppercased button text (this is configurable with a capitalized option for longer button text) Box shadow is used to accentuate the actions. The hover state of the primary button lightens the button background color.

Identify and fix all styling inconsistencies between ButtonWithIcon and Button based on correct Button usage and theme options.

Mayflower version: 11.4.1

There are a number of potential accessibility improvements for the Mayflower Pagination component:

1. It does not indicate to screen readers which page is currently selected, although there is visual styling to indicate this for sighted users. aria-current="true" could be set on the selected page number.
2. <a> element is used for essentially a <button>. The elements could instead be changed to a <button> if this behavior is preserved, however it would also be useful for projects to be able to define the href of the <a> element so that it behaves like a link. This would allow projects to render the component as static HTML and preserve the active page number state in the page URL. For example:

   <Pagination pages={[ { active: false, text: "2", href: "/my-page?page=2" } ]} ...

More details about accessible pagination components: https://www.a11ymatters.com/pattern/pagination/

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /react/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

View the update logs.

-Mayflower React
-Component: ButtonSearch

In ButtonWithIcon the text stays white on hover, but here it is changing to green which has insufficient contrast. It looks like an oversight, in any event it's an easy fix I'd be happy to contribute.

Rationale:

Using a proprietary licensed font can be a significant impediment to the adoption of the design system by agencies. If a font can be found that is free and open-source and at the same time maintains the stylistic character and technical specifications (weights, character set, character width, X-height, etc.), that would reduce development time and cost, and potentially increase adoption.

Proposed font: Muli
Repo: https://github.com/googlefonts/MuliFont
License: OFL
Character set: UTF-8

Stylistic Comparison

As you can see the fonts have a very close affinity. In fact, the character widths and metrics are so close that replacement is unlikely to cause reflow in any component. The few differences are not obvious to an untrained eye, and if absolutely necessary a 'stylistic alternates' option could be submitted to Google (maintainer of this, the most broadly used fork). That could at least contain an alternate uppercase 'M', and a stacked lower case 'a'.

Relevant to all versions of Mayflower.

We're hoping to upgrade our repository to React 18, but we hae a dependency on @massds/mayflower-react which is currently at React 16. Is it possible to upgrade mayflower-react to React 18?

Before opening an issue:

• Refer to the Mayflower Implementation List
• Search for duplicate or closed issues

When submitting your request, include:

• A link to the application
• Your name or alias and contact URL or email address
• The implementation’s target language and/or framework
• The code repository if it is in Github or equivalent (if public)
• What type of Mayflower implementation you are using
  • Mayflower Patternlab
  • Mayflower React
  • Mayflower as Markup
  • Mayflower as Branding
• What Mayflower Design System version you are using
• Any useful caveats or other notes

Point mayflower gitbook to Mayflower subdirectory
https://massds.gitbook.io/mayflower/~/settings/integrations

Monospace vs Proportional
For the consistency, readability, performance and its modern look, Mayflower design system uses sans-serif font Texta as the sole official typeface as both the display font and the body font, providing three levels of tracking set by letter-space in css:

$letter-spacing-large: .1em;
$letter-spacing-medium: .05em;
$letter-spacing-small: .02em;
$letter-spacing-default: 0;

Texta is a proportional font, which means each character’s width are adjusted based on the characters the actual horizontal space. It’s designed to be visually appealing and to allow users associates words together and read sentences easier. However, it’s not user-friendly and can be visually distracting for the following usage:

• Tabular data
• Dynamic data/label: stopwatch, download, progress bar
• Data visualization
• Code blocks

When Texta is read in columns, the misalignment makes the numbers difficult to comprehend.

Fix button component disabled states and accessibility

1. Disabled buttons should have no hover states

• This includes all usage and themes
  e.g.
  

2. Highlight usage accessibility fix

• c-highlight theme should have $c-black color textinstead of$c-hight` color text to provide enough contrast. This applies to both the primary and secondary usage.

Primary usage:

• text color should be $c-black
  

Secondary usage:

• text color should be $c-black
• default state: outline color should be $c-highlight
• hover state: background color should be $c-highlight
  e.g.
  

Follow up

• Clean up and document usage and theme combinations

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /patternlab/styleguide/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

View the update logs.

Current in Patternlab, all buttons are passed in a 'small' as size and the default size is not being used. For more denser interactions, we should add smaller variations on top of the current small size and use the styles in current .ma__button--small. Replace all current small buttons with default

Currently, there's no kerning specs for design files, there are inconsistent letter-spacing on different components in the SCSS

Currently, form input components have a limited validation logic embedded in specific.

We should:

• Support input validation rules, e.g.
  • required (exist in Input for label and individual Input components)
  • min (exist in inputNumber and inputCurrency separately)
  • max (exist in inputNumber and inputCurrency separately)
  • minLength
  • maxLength
  • pattern
  • validate
• Consolidate and document existing validation logic

Research existing libraries and determine the best way forward:
https://react-hook-form.com/get-started
https://www.npmjs.com/package/react-form-validator-core
...

It looks like mayflower/react/src/components/molecules/ListingTable/index.js has

ListingTable.propTypes = {
...
items: PropTypes.arrayOf(PropTypes.oneOf(PropTypes.string, PropTypes.object))

which should probably be

items: PropTypes.arrayOf(PropTypes.oneOf([PropTypes.string, PropTypes.object]))

as it results in Warning: Invalid argument supplied to oneOf, expected an instance of array.

Also, there's a small type of "lable" instead of "label"

Add 12 column responsive grid system based on for layout flexibility
Update neat to 3.0.0 API

As a follow up need to clean up the width styles for all for elements to expand 100%

• Research and define our grid system (need to increase flexibility)
• Replace float with css grid or flex box when see fit
• Replace current css grid library (bourbon-neat which is a few major versions behind)

• Combine organism categories, by author, by template, feedback (It's not clear to external users what the categories are. The organisms are not immediately visible for browsing)
• Combine patterns with variants. (The list currently are too overwhelming, combining variants with patterns improves pattern findability.

Title: Docs: Header (With Hamburger Menu) cannot be implemented

Bug Details

• Mayflower version: 13.0.1/13.1.0
• Operating system and version: Windows 11 Pro
• Browser and version: Latest Chrome, Edge.
• Description: Header with hamburger menu cannot be implemented. Following error is displayed on maven build. ' RollupError: Could not resolve "../helpers/focusTrapping.js" from " ../helpers/focusTrapping.js?commonjs-external"'
• Steps to reproduce on live site: NA
• Step taken on development
  -import '@massds/mayflower-assets/css/header-hamburger.css';
  -import '@massds/mayflower-assets/js/header-hamburger';
• run maven build.

Currently headings have a full flexibility to pass any heading level for semantic, we propose to have a more defined usage guidelines around the using of different visual heading options:

• Column Heading is currently just using h5 styles in mayflower and can passed any semantic heading level to it.
• Sidebar heading is used for a list and hence should be renamed to list-heading

Mayflower version: 9.0.0, Mac OS X, Chrome

Arabic and Hebrew are displaying left to right and should be right to left.

Steps to reproduce:
Open Mass.gov and use the language switcher to change the language to Hebrew or Arabic.

See attached images from Mass.gov showing the ltr version and what it should look like after changing the direction to rtl in chrome inspector.

There are design implications for this as some components eg. blockquote are opinionated about left-to-right direction and become visually disconnected from the text.

• Mayflower version: 10.1.0
• Browser: Chrome

In CSS, the bold font-weight value maps to a numeric value of 700 – Source. Currently, when a website using Mayflower has an element styled with font-weight: bold, the element receives the "bolder" font weight, rather than "bold" 👇

Request:

It would be ideal if adopting websites could continue utilizing font-weight: bold and for Mayflower to apply the expected bold styling. I'm not sure how this works for variable fonts, but this used to be achieved by specifying font-weight: bold in the @font-face declaration of the font file.

Steps to reproduce on live site:

1. Create a custom CSS style declaration that utilizes font-weight: bold
2. Note that the weight applied is heavier than the Noto bold weight described in the documentation.

When reporting a bug, include:

• current mayflower and version and all versions after 5.18.0

Should be:

document all existing form components in mayflower and mayflower-react

https://docs.google.com/document/d/15jj3Egw1_ebxDg8KR6OPD_ayHZcSzHhJgSvTZjyTbnM/edit

• What is web accessibility?
• Why is it important?
• Standards:
• Compliance level: WCAG 2.0 + 2.1 (AA → AAA)
• Why? Section 508 and inclusive experience
• High level elements: color, font, markup forms, images, document, structured data, alt text, etc.
• One on one section → for developer/designers/content authors
• Tools and resources
• Testing tools
• Screen reader simulator
• Color contrast checker
• Testing process

I think we should make our primary theme colors more accessible in general and have a more flexible usage. Currently the tell us what you think feedback button is failing accessibility check. Proposing to update the green theme color everywhere, instead of just updating it in one place:
before:

after:

Before opening an issue:

• Refer to the Mayflower Implementation List
• Search for duplicate or closed issues

When submitting your request, include:

• A link to the application
• Your name or alias and contact URL or email address
• The implementation’s target language and/or framework
• The code repository if it is in Github or equivalent (if public)
• What type of Mayflower implementation you are using
  • Mayflower Patternlab
  • Mayflower React
  • Mayflower as Markup
  • Mayflower as Branding
• What Mayflower Design System version you are using
• Any useful caveats or other notes