massgov / mayflower Goto Github PK
View Code? Open in Web Editor NEWMayflower Mono Repo (react and pattern lab and documentation)
Home Page: https://mayflower.digital.mass.gov/
License: GNU General Public License v2.0
Mayflower Mono Repo (react and pattern lab and documentation)
Home Page: https://mayflower.digital.mass.gov/
License: GNU General Public License v2.0
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
.ma__button--small
variationDependabot 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.
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
Title: Horizontal scroll bar visible all times when expanded or any time browser size is increased.
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):
@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:
aria-current="true"
could be set on the selected page number.<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.
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
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:
When submitting your request, include:
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:
When Texta is read in columns, the misalignment makes the numbers difficult to comprehend.
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:
Secondary usage:
$c-black
$c-highlight
$c-highlight
Follow up
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.
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, form input components have a limited validation logic embedded in specific.
We should:
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%
Title: Docs: Header (With Hamburger Menu) cannot be implemented
Bug Details
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:
h5
styles in mayflower and can passed any semantic heading level to it.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.
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:
font-weight: bold
document all existing form components in mayflower and mayflower-react
https://docs.google.com/document/d/15jj3Egw1_ebxDg8KR6OPD_ayHZcSzHhJgSvTZjyTbnM/edit
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:
When submitting your request, include:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.