Implement designs for Testimonial component within Olivero for XB

Taking a look at this now. I will open a PR soon.

I'm unsure how to load the placeholder image as in the example above.

Still needs some work but it looks like the image above.

kristen pol → made their first commit to this issue’s fork.

More updates are needed but the above changes include:

• Move status to experimental per 🐛 Mark the XB components as experimental, not stable Active
• Wording changes for clarity
• Changed from explicit person and place (Princeton) as IMO we should put a dummy person/role
• Removed attributes as it's auto-injected
• Formatting cleanup in twig file

The image isn't working right now so that's the next thing to fix.

More cleanup...

The "tagline" in Figma is "content" in the yml file so I removed the redundant tagline.

And make the content a textarea so they can see the text they are adding since it'll probably be a sentence or more.

Unassigning from @vasantha deepika as we are going fast here... if you want to do some more work on this, please ping me in Slack to coordinate.

Latest testimonial component stacked on top of feature component.

Using the naming convention from 📌 Implement designs for Feature component within Olivero for XB Active (cta => link).

Here's what it looks like now. The link styling might need some tweaking.

Back to Needs Work for comments in #14

I'll try to clean up the styling.

Okay... I compared it to Figma and got it closer but it's still not completely there... for example, there should be less space between the quote and the name+role and between name+role and link. And the name+role colors don't match.

Is it good enough?

Also, it feels like the CSS is overly complicated and has some unnecessary things, but I didn't try to pull it apart because I don't do CSS every day.

Figma

Implementation with image

Implementation without image

Thank you @kristen pol! Matching the Figma exactly is definitely not needed, happy to treat it as a more of a guide. This certainly looks close enough to me, based on the screenshots.

I see nothing wrong with the code, but I'm not a FE developer so not the one to ask. If another front-ender can sign off, I'll gladly commit this.

Just left a review with a number of changes! Thank you!

@bernardm28 Why was the image commented out?

How to test, now that 📌 Add Experience Builder to dev dependencies Active is in:

• Check out this branch locally
• Pull changes from 1.x and merge them into this branch

• ddev rebuild
  ddev drush si -y
  ddev drush recipe ../xb_test
  ddev launch /xb/xb_page/1

The image is commented out because it creates an error with experience builder. Commenting that section out removes said error and the props load from within experience builder. if that issue is solved we can bring it back.

I would vote we remove it for now and fix it in a follow-up.

Last commit was "WIP on testimonials.", meaning Work in Progress.

Moving back to Needs work.

OK. Just pushed final fixes. This should be good to go. Note I refactored the CSS and markup significantly, so setting to NR.

Gave this a quick manual test and it looks right to me. No objections from the code side. In the name of moving this forward, I'm RTBCing it. Even if a few things are not right yet, that's fine - better to land the foundation now and iterate as we get closer to 1.1.0.

Merged into 1.x, thanks everyone!

Automatically closed - issue fixed for 2 weeks with no activity.