Create Pattern `compounds-flyout~contact`

[kristianserrano]

This is related to emory-libraries/web-redesign#91. This should be a pseudo-pattern of #223.

[laurenhamel]

@kristianserrano, I see where you added this on Friday along with #230, but I wanted to clarify what pattern work you were thinking this would capture? For the news and contact flyout menus, we already have molecules in place for flyout-feed-item (which is adaptable for news and events) and flyout-info-item (which is adaptable for contacts and maps). As far as building out the flyout menus themselves, we've also captured that work in #216, #217, and #218 at the compound level.

[kristianserrano]

I was thinking about the subtle differences in the content and the markup behind it. For example, putting tel: values in the href attributes of the phone numbers or applying schema.org microformats for hours or events. I also saw minor differences at the bottom of the flyouts that I thought would distinguish the patterns.

I think managing and displaying those patterns with the microdata as part of the templating might be easier to maintain and easier for other developers to reproduce.

[laurenhamel]

Right, there are some subtle differences that we can incorporate, but I'm thinking that at the molecule-level, we could go back and add in those things, like link attributes and schema variations which you mentioned, as style and/or pattern variation(s). At the compound-level, it may make more sense to break things out (i.e., a separate pattern for each flyout menu), but my initial impression of the Figma designs was that there are only really 3 different flyout menu types (feed #218, map #217, and info #216) with subtle style variations mixed in there based on their use cases.

[kristianserrano]

OK that's good to know. Would we then display those variants at this level as well?

[laurenhamel]

We could if it you think it would make sense, but I think for some other patterns that had subtle variations of this sort, we didn't necessarily breakout their differences into pseudo patterns, although we could for clarity but for the sake of time didn't. Rather, we're simply highlighting the different variations and/or use cases in the pattern docs and how we integrate and implement the patterns upwards in compounds, organisms, and templates.

[kristianserrano]

I think for other developers to be able to see that markup and styling could be important in the future. I also think it's good if we want to show to stakeholders how that specific thing looks and behaves.