NOT A REAL TICKET

[JulesKhong]

This ticket describes the process to leverage Base Build work and update the kmc theme for a new FORUM site.

Dev

planning and local setup (4 hours)

• Map out KMC theme files that are necessary to KMC sites.
• Decide on whether refactoring the theme is the best path or pulling in ts_motif
• Pull down a local instance of KMC Test.
• Install ts_motif (ThinkShout base Drupal theme)
• Use the 18-base-refactor branch on ts_motif, the version with base assets removed
• Write a composer script to pull in base-assets on a new site using ts_motif @unclegcb
• Use the script to pull in base-assets

Tokens, atom and molecule-level styles (4 hours)

• make sure a style guide is rendering at /style-guide with base values for tokens, atoms and molecules

Nav and Footer (4 hours)

• Update the organisms/footer and organisms/header templates to use Drupal templates so default basic nav and footer are working.
• Push up Drupal-generic changes to ts_motif so new Drupal sites have a footer, main nav and utiility nav on desktop and mobile. Add documentation for staging.

For each of these KMC blocks (9 hours total)

• Get the custom Drupal twig templates for the KMC block and equivalent FE from organisms/blocks/. Define the variables in each BE template, and point it to the FE template for styles.

• Make sure any block-specific js and css are compiling

• Text area = Text and header Guttenberg styles

• Flyer = CTA

• Poster = Banner

• Expander = Accordion

• Content List = Card wrapper

• render all KMC blocks on the /style guide.

Testing and QA (10 hours)

• Get updates up to KMC Test, have Julie review to make sure base styles match Figma
• Update base KMC figma file as needed (this should be identical to Base Build
• Push up changes for ts_motif back to the theme in a PR

Deliverables

• a new Drupal site using the ts_motif theme will have Base Build styles pullled in automatically from base-assets ready to be themed, including an accessible nav, footer, button styles, typography and spacing. The base styles will match the starting point in Figma.
• KMC test will have base styles applied for all blocks and common components, including navigation, footer, social menu, and the blocks listed above. For clients with a tight budget, updating just the token values for the theme will result in a new brand being applied, minimizing theming time on a new KMC site.
• For a new Drupal generic site or KMC site, once ts_motif and base-assets are used, they are no longer wired up to the source, and the local instance and /style-guide becomes the design system and source of truth.