YSP-413: Stats component | YSP-428: Tiles Components

[joetower]

YSP-413: Stats component

YSP-428: Tiles Components

Description of work

• Renames previous stat component infographic
• Renames previous stats component infographic__group
• Adds new component for tile-item
• Adds new component for tiles

Testing Link(s)

• Infographic Component Story
• Infographic Group Component Story
• Tile Item Component Story
• TIles Component Story

Functional Review Steps

Testing re-named components (Stats -> Infographic)

• Navigate to: https://deploy-preview-346--dev-component-library-twig.netlify.app/?path=/story/molecules-infographic--infographic
• Confirm it matches: https://yalesites-org.github.io/component-library-twig/?path=/story/molecules-stat--stat
• Navigate to: https://deploy-preview-346--dev-component-library-twig.netlify.app/?path=/story/organisms-infographic-group--infographic-group
• Confirm it matches: https://yalesites-org.github.io/component-library-twig/?path=/story/organisms-stats--stats

---

Testing Tile Item component:

• Navigate to a new component: https://deploy-preview-346--dev-component-library-twig.netlify.app/?path=/story/molecules-tile-item--tile-item
• Verify that in the "Playground" section you can:
  • Optionally set a "Content Link" which will wrap the content
  • Change the "Presentation style" to:
    • Number
    • Icon
    • Text only
  • Change the "Alignment" to:
    • Left (default)
    • Right
  • Change the "Vertical Alignment" to:
    • Top (default)
    • Bottom
  • Change the "Component theme (dial)":
    • One (default)
    • Two
    • Three
  • Optionally use a background image for the tile item

ysp-428-tile-item.mp4

---

Testing Tiles component

• Navigate to: https://deploy-preview-346--dev-component-library-twig.netlify.app/?path=/story/organisms-tiles--tiles
  • Verify that, using the Storybook controls pane, you can:
    • Change the "Global theme" to see how the component dials change with global theme selection
    • Change the grid count from two, three(default), or four
    • Change the "Presentation style" to:
      • Number
      • Icon
      • Text only
  • Change the "Alignment" to:
    • Left (default)
    • Right
  • Change the "Vertical Alignment" to:
    • Top (default)
    • Bottom

ysp-428-tiles.mp4

---

Design Review

• Verify the designs match the Figma Designs
• When Katy is back in the office (out of office until next week) I want to meet with here briefly to discuss the design implementation

Accessibility Review

• Verify the component meets Accessibility requirements

[netlify]

✅ Deploy Preview for dev-component-library-twig ready!

Name	Link
🔨 Latest commit	7b66e22
🔍 Latest deploy log	https://app.netlify.com/sites/dev-component-library-twig/deploys/662280bc54ca5900083823a9
😎 Deploy Preview	https://deploy-preview-346--dev-component-library-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dblanken-yale]

This looks awesome! Nice job!!!!!!

[kara-franco]

Excellent, a11y approved!

[codechefmarc]

Wow! This looks great, and a ton of options to really dial it all in to what you want. Great work. I played with many options, responsive, etc and all looked good. I didn't go too deep into the CSS, I'll trust you on that piece. Approved!

[github-actions]

🎉 This PR is included in version 1.41.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀