GitLab / Slippers Design System

Javier Garcia and Tyler Williams from the Digital Experience team do pair programming to address accessibility concerns in the Slippers navigation component.

Link to MR: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui/-/merge_requests/55

Tina Lise Ng and Tyler Williams of the Digital Experience team go over the Figma files, design approach, and requirements for the Commit template in the Slippers design system.

ENG: Slippers: Implement event components and template
epic: https://gitlab.com/groups/gitlab-com/marketing/inbound-marketing/-/epics/315

Javi walks through a proof of concept using the created footer component on the home page of about.gitlab.com

Slippers Repo: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui

Javi and Laura discuss the difference between breakpoints and ranges, and what a grid might look like on each screen size.

Slippers Design System repo: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui

Storybook instance: https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui

Digital Experience handbook page: https://about.gitlab.com/handbook/marketing/inbound-marketing/digital-experience/

Laura Duggan and Tyler Williams step through the process of updating a component in Slippers UI, pushing that new package to npm, updating the package in the www-gitlab-com repo, and then updating the component integration. The steps are roughly:

1. Make changes/merge changes (already done in this case)
2. Check out the master branch
3. Double check things are looking good in Storybook
4. Run build command, increment version number
5. Push changes to repository
6. Push changes to npm
7. As needed, bump version in Middleman and make any required adjustments to existing Slippers integrations.

In this video, Tyler Williams demonstrates a proposed workflow for using Storybook to implement Slippers UI components, along with ideas and proposals for how to integrate the results with other web properties.

We walk through the Figma file for blog components, a pull quote markup, data, and styles.

Related Figma file: https://www.figma.com/file/5mgvis6M0z3GN5kuEFADoW/CMS-%2F-Blog-Post?node-id=295%3A1453

Related MR:
https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui/-/merge_requests/27

Javier Garcia, Stephen McGuinness, and Tyler Williams talk about Slippers versioning and release strategy including:

What we will be releasing (component library, design assets)
How we will be versioning it (semantic versioning)
How often we will be releasing Slippers, at what cadence, and how we will think about this process overall.

Slippers UI: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui

Agenda: https://docs.google.com/document/d/1tEhzFJYMOzJImLFObPcVUa85e3YHbRYg6m05MyEoXIQ/edit?usp=sharing

Sprint planning agenda: https://docs.google.com/document/d/1DFs47irmcL513pP5v-SPzjFypK7SDCR_dYSwSI7R3og/edit?usp=sharing

Related epics, issues, and merge requests :

Homepage MVC 3.03: https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/809

Apply new design language to the install page: https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/814

New Webpage Request: Remote survey (title TBD): https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/695

Test Slippers(DS) on a about.gitlab page: https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/741

Publish Slippers to npm: https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/740

Add Blocks to Storybook: https://gitlab.com/groups/gitlab-com/marketing/inbound-marketing/-/epics/232

Brandon Lyon, Javier Garcia, Lauren Barker, and Tyler Williams discuss the Digital Experience team's architecture decisions for the Slippers design system.

Digital experience handbook page: https://about.gitlab.com/handbook/marketing/inbound-marketing/digital-experience/

Slippers architecture decision: https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/752#note_467618241

Meeting agenda: https://docs.google.com/document/d/1vgUVwJ2ZT7iA_f3AEkU3LI-fwghUut_K3AdOapx3VRA/edit