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)
[x] Map out KMC theme files that are necessary to KMC sites.
[x] 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-refactorbranch 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.
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)
18-base-refactorbranch on ts_motif, the version with base assets removedTokens, atom and molecule-level styles (4 hours)
Nav and Footer (4 hours)
ts_motifso 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)
Deliverables
ts_motiftheme will have Base Build styles pullled in automatically frombase-assetsready to be themed, including an accessible nav, footer, button styles, typography and spacing. The base styles will match the starting point in Figma.ts_motifandbase-assetsare 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.