accordion issues

[marcelmoreau]

Original PR: https://github.com/imarc/boilerplate-components/pull/71

Still more to do here:

• the accordion's readme has not been updated
  • props are not updated
  • transition name appears old/wrong
• the Sass file's comments are old/not updated
• the icon should not shrink when more content is added (red outline in attached accordion.png)
• we need to left-align copy for the heading (yellow line)
• the heading does not align with the tab content (green line)
• there is extra spacing at the bottom of the tab content (blue line)
• we do not need this line as all buttons have this rule
• when closing an accordion on mobile (attached accordion-clip.mp4 file is iOS Safari), the content "stutters" near the end of the close before completely disappearing
• someone is going to note the content clipping on window re-size (attached content-clip-window-resize.mp4)
• we might consider increasing the target tap area to at least 44x44 per WCAG

https://user-images.githubusercontent.com/2116946/178153492-d4d5644f-ac1a-47bd-8045-a20e324ef8df.mp4

https://user-images.githubusercontent.com/2116946/178153494-0c0eedf5-55f2-4e81-a12a-b09c7654dbf2.mp4

[TristanMNorton]

https://github.com/imarc/boilerplate-components/commit/8b91650cdd2909d09452c3bc875884c6fc93ad02

This commit should have solved the stuttering, you might be looking at an older build.

[marcelmoreau]

I was looking on whatever is deployed to Netlify, which I think is set to be whatever has been committed to next. 8b91650 is older than dc5ba11 which is what is deployed

[TristanMNorton]

Definitely not the latest as it doesn't have the additional wrapping element I added. I'll go through and address the rest of your feedback thought and get it finalized.

[TristanMNorton]

https://next--imarc-boilerplate.netlify.app/pattern-library/components/preview/accordion.html

This one is working. We might have been looking at the wrong one.

[TristanMNorton]

@marcelmoreau Just pushed updates based on the rest of your feedback. The only one I avoided is the extra space at the bottom. I assume whatever RTE/Redactor styles will normalize any spacing issues, and it's probably a separate conversation/PR if we think boilerplate-components should have some default RTE/Redactor mixin.

[marcelmoreau]

Nice looks good, I just made a couple edits:

• icon: use flex-shrink: 0 instead of giving it a min-width. this allows for edits to the svg's width/height attributes to work as intended. otherwise, making these smaller would not do anything
• icon: gave it a margin left so long content never butts up against it
• gave this a hover style as well