Current FPO designs:
closed (default):

Note from grooming:
Do we need a loading state for the accordion? Probably not, but if there is one from the accordion component itself maybe we can use that

@JScherer-WMF I was looking at the feedback (yes/no) buttons at the bottom, I'm assuming they should stay "pressed" after clicking right? So is this essentially a ToggleButton from codex? Also do you have the link to the figma so i can get more exact values?

@JScherer-WMF Can you paste the full text for "How was this made" with the links?

In T376374#10252303, @bwang wrote:

@JScherer-WMF I was looking at the feedback (yes/no) buttons at the bottom, I'm assuming they should stay "pressed" after clicking right? So is this essentially a ToggleButton from codex? Also do you have the link to the figma so i can get more exact values?

That's right. I assumed we'd use the toggle buttons from codex. Here's the Figma File

Here's the How this was made text:

This summary was machine-generated by the Wikimedia Foundation using a large language model called Aya on <date>. This is an experimental feature that does not follow Wikipedia’s accepted editorial process. This summary has not been checked for verifiable accuracy or a neutral point of view.

• Not all articles on the article spreadsheet load simple summaries. @Jdrewniak thinks this is because of spaces or other special characters in the titles.
• Simple summary accordion should adopt the horizontal constraints of the first paragraph (usually this means it will get "squished" by an infobox)
• Simple summary should appear below all the hatnote content, directly above the first article paragraph
• Vertical spacing should be 12 px above the "View simple summary" title and 2px between title and subtitle
• View simple summary title and "Unverified" tag should be vertically centre aligned.
• subtitle should be subtle colour
• Title should read "View simple summary" not "summaries"
• "Machine generated" should read "Machine-generated" It's missing a hyphen.
• accordion should have a border-subtle bottom border.
• Cursor should change to "pointer" on hover

Open state:

• Subtitles should be color-subtle
• body paragraphs should be color-base
• toggle button icons should be color-subtle
• yes/no buttons should have 8px horizontal spacing between them.

I was under the assumption that most/all of these styles would be baked into codex, so i'm not sure if the styles are loading properly.
Here's the dev-mode Figma link for reference.

Also a tiny tweak: I switched the icons in the toggle buttons to be more consistent with other flows.

Also, we're using the wrong logo for the extension. It should be the Wikipedia "W" logo.

Couple small things:

• The toggle button's on-state isn't accessible because the icon colour doesn't change to accommodate the dark blue background. The icon colour should change on the dark background.
  
• The link for "neutral point of view" in the disclaimer is pointing to the wrong place. It should point to https://en.wikipedia.org/wiki/Wikipedia:Neutral_point_of_view.
• The info chip looks wrong. I brought it up with DST in Slack and cc'd you @bwang
• 2 typos in the disclaimer: "This simple summaries" should be "This simple summary" and "This summaries" in the last paragraph should be "This summary"

In T376374#10301049, @JScherer-WMF wrote:

Couple small things:

• The toggle button's on-state isn't accessible because the icon colour doesn't change to accommodate the dark blue background. The icon colour should change on the dark background.
  
• The link for "neutral point of view" in the disclaimer is pointing to the wrong place. It should point to https://en.wikipedia.org/wiki/Wikipedia:Neutral_point_of_view.
• The info chip looks wrong. I brought it up with DST in Slack and cc'd you @bwang
• 2 typos in the disclaimer: "This simple summaries" should be "This simple summary" and "This summaries" in the last paragraph should be "This summary"

DST has confirmed that the infochip should look like this

So that's a bug, too.

The follow-up has been merged, when it’s been reviewed this can be signed off

@JScherer-WMF here's a build with the latest changes. Looks like the verbage and button icons have been fixed. I looked into the infoChip color and I'm not sure why it doesn't get the yellow background, we're using the same code that's described in the docs:

<CdxInfoChip class="summary-prompt-chip" status="warning">
	{{ i18n.summariesChip }}
</CdxInfoChip>

Oh, looks like I just needed to update my version of Codex via npm update looks better in the following build.