Update with new HM branding

[CoreyBenefiel]

Description We have new branding from the HM website to add to the library. See sketch file.

Background:
The full HM website rebrand includes:
Logo
Colours
Spacing and Grid
UI Elements
Typography

Long term, we would need to determine which elements would be added to the Pattern Library. This also determines what tools can use the Pattern Library as it's a one size fits all approach.

Another consideration is the new font is a Google font which would have to be self-hosted and we need to determine where this would be hosted and ensure a solution was in place that doesn't adversely impact other sites if the font is changed in the future.

Immediate deliverable:

In the immediate, we have agreed to update the Pattern Library with only the brand colours (including applying them to the logo). These changes to the library need to be recorded as a minor release with no breaking changes. This will enable sites using the Pattern library (Engineering Handbook, Company Handbook and H2 ) to update automatically.

Once the library is updated, sites using the library should be checked and any styling issues resulting from the rebranding need to to be fixed.

Acceptance Criteria:

1. Long form and short form logo colours are updated https://www.sketch.com/s/d8053156-0933-4e9d-8b52-a5d3f9a752ed/a/L03mbq4
2. Branding colour palette added to the library https://www.sketch.com/s/d8053156-0933-4e9d-8b52-a5d3f9a752ed/a/R1zxoe8
3. Changes to library recorded as a minor release with no breaking changes. This will enable sites using the Pattern library to update automatically.
4. All sites using the Pattern Library accept the changes and do not have broken styling.

[CoreyBenefiel]

I've added @fsylum to the team on https://dashboard.altis-dxp.com/i/human-made-network which house all our sies
https://handbook.hmn.md/wp-admin/
https://makeh2.hmn.md/wp-admin/
https://engineering.hmn.md/wp-admin/

Required repos include:
https://github.com/humanmade/hm-pattern-library
https://github.com/humanmade/h2
https://github.com/humanmade/Engineering-Handbook
https://github.com/humanmade/hm-handbook-theme

You can ask specific pattern library questions in #hm-pattern-library. Sam Miller and Matt Haines-Young are the custodians of that channel.

[CoreyBenefiel]

Hi @fathanfis I've added you to the team on https://dashboard.altis-dxp.com/i/human-made-network which house all our sites
https://handbook.hmn.md/wp-admin/
https://makeh2.hmn.md/wp-admin/
https://engineering.hmn.md/wp-admin/

Required repos include:
https://github.com/humanmade/hm-pattern-library
https://github.com/humanmade/h2
https://github.com/humanmade/Engineering-Handbook
https://github.com/humanmade/hm-handbook-theme

You can ask specific pattern library questions in #hm-pattern-library. Sam Miller and Matt Haines-Young are the custodians of that channel.

I don't know if you have worked on the internal network previously, but just a heads up that once you've logged in to https://dashboard.altis-dxp.com/i/human-made-network and selected the humanmade-prod-01 environment and then selected hmn.md, you will be taken to Network Admin. At this point you will need to be proxied with Perimeter81 before selecting Network Admin to view all the sites on the network.

[ntwb]

FYI:

The below repos will also potentially be impacted by the changes in this issue:
- https://github.com/humanmade/altis-cli/search?q=hm-pattern-library
- https://github.com/humanmade/altis-demo/search?q=hm-pattern-library
- https://github.com/humanmade/altis-marketing-site/search?q=hm-pattern-library
- https://github.com/humanmade/cli/search?q=hm-pattern-library
- https://github.com/humanmade/feelingrestful/search?q=hm-pattern-library

• https://github.com/humanmade/hmn.md/search?q=hm-pattern-library
• https://github.com/humanmade/home/search?q=hm-pattern-library
• https://github.com/humanmade/red-book/search?q=hm-pattern-library

[CoreyBenefiel]

@rmccue we're trying to update the HM Handbook, Engineering Handbook and H2 with the new branding (colours only).

We did believe these were the only sites referencing the Pattern Library where we are making the changes, but as you can see from Stephen's message above it looks there's more sites referencing the Pattern Library.

Can you confirm if the altis demo and altis marketing sites are actually using the pattern library and if you think they would be impacted? The links above highlight the mentions within each repo.

[rmccue]

I have no idea, sorry!

[gemplank]

@CoreyBenefiel we don't use the pattern library no 👍🏼

[CoreyBenefiel]

Phew! Thanks for confirming @gemplank.

[CoreyBenefiel]

https://github.com/humanmade/red-book/search?q=hm-pattern-library
The engineering handbook uses the RedBook theme so I expect this would be impacted.

https://github.com/humanmade/home/search?q=hm-pattern-library
If it updates home that's a bonus.

https://github.com/humanmade/hmn.md/search?q=hm-pattern-library
I would expect this.

[CoreyBenefiel]

If we can't be certain about the impact this might have on other sites - are we able to roll back the minor release in the pattern library if there's an unintended outcome @fathanfis?

[ntwb]

If we can't be certain about the impact this might have on other sites - are we able to roll back the minor release in the pattern library if there's an unintended outcome @fathanfis?

Yes, we can revert the PR #174 after it's merged "if we have to rollback", ideally anything would be minor and possibly fixing any issues discovered would be the more beneficial approach, but will depend on complexity for sure

[CoreyBenefiel]

Thanks @ntwb. I also assume anything would be minor and we'd just deal with it individually rather than rolling back. Afterall, we're talking about some colour changes.

[fathanfis]

Apologize to not make it in time. Since, my day is end today, so I'll wrap all things up here.

The code is basically try to changing the colour (can be automatically updated via gitmodules) but then I found out that project using hm-pattern-library used different kinds of method (maybe I'm wrong).

Ways to use this library

1. H2 using manual way (downloaded folder)

2. Home using gitmodules

3. Red Book using gitmodules

What still outstanding?

1. Tested on local three of sites are working as expected, but haven't deploy it to development for each sites/projects
2. For project using manual way (download & replace), for example H2, need to create PR since a lot of changes from old version (maybe I'm wrong here, please re-check).

Steps to do

1. Create branch (maybe develop) in hm-pattern-library and merge this code. or deploy it using this version.
2. Update Home and Red Book branch gitmodule for hm-pattern-library, create PR and try it on development server
3. Download generated hm-pattern-library (build) to H2 src/pattern-library folder, create PR and try it on development server
4. So once it's done, we need to re-review all code, changes in projects that using H2, Home and Red Book Theme.

Please re-review all the process, steps todo and task that still outstanding @ntwb @CoreyBenefiel . Thanks and wish you all the best

[kadamwhite]

We stopped using this subrepo in H2 a while back humanmade/h2@f7d9fc0 because we'd come to the conclusion that this repo was unmaintained. So changes here at present will not make their way through to H2.