Hello @gonyeahialam! I think we will need designs for how the Response Statistics tab will look if the event collects PII & non-PII data (since the organizers should still see the non-PII aggregated data after the event ends, so the clickwrap agreement should not be a barrier to opening up the Response Statistics tab in such cases). Thanks!

latest design

When we have only PII Questions

When we have only Non-PII Questions

Change 1002690 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Move clickwrap form logic into ResponseStatisticsModule

https://gerrit.wikimedia.org/r/1002690

Change 1002716 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Do not show clickwrap form if there are no answers

https://gerrit.wikimedia.org/r/1002716

Change 1003125 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Update stats tab based on PII/non-PII selection

https://gerrit.wikimedia.org/r/1003125

Change 1003126 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/WikimediaMessages@master] Update CampaignEvents message

https://gerrit.wikimedia.org/r/1003126

Change 1002690 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Move clickwrap form logic into ResponseStatisticsModule

https://gerrit.wikimedia.org/r/1002690

Change 1002716 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Do not show clickwrap form if there are no answers

https://gerrit.wikimedia.org/r/1002716

Change 1003125 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Update stats tab based on PII/non-PII selection

https://gerrit.wikimedia.org/r/1003125

Change 1003126 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] Update CampaignEvents message

https://gerrit.wikimedia.org/r/1003126

This task is blocked from testing T322209 is merged and in QA

Acceptance Criteria

• ✅ Organizers should always be able to see the aggregated non-PII responses of their event in the Response Statistics tab, whether or not they have accepted the clickwrap agreement

have not accepted clickwrap	have accepted clickwrap

• ✅ Organizers should not be able to see the aggregated PII responses of their event in the Response Statistics tab until they have accepted the clickwrap agreement
• The three flows for how this will work is as follows:
  • If the event has PII & non-PII questions:
    • ✅ Organizers of the event should be able to see non-PII data in the Response Statistics tab, but they need to agree to the clickwrap agreement in the response statistics tab to see PII data
    • 
  • If the event has only PII questions:
    • ✅ Organizers of the event need to accept a clickwrap agreement in order to display any data on the Response Statistics tab
    • 
  • If the event has only non-PII data:
    • ✅ Organizers of the event can open the Response Statistics tab and see the non-PII data, with no need to accept a clickwrap agreement (so no clickwrap agreement in the UI)
    • 
• ✅ Note that, unlike in the designs below, the "Q" in "Questions" should not be capitalised
• 

When we have only PII Questions

comp	build

When we have only Non-PII Questions

comp	build

@Daimona this is all functioning correctly according to the AC. There are a few stylistic difference between the build and the comp though before sending to design sign off, see screenshots directly above this for visual examples:

1. The div with id="StatsPanel" should not have 20px of padding on the left. It should instead be left aligned with the menu bar above it.
2. The elements containing class="ext-campaignevents-details-stats-section-header" (containing txt`Non-Personally Identifiable Information (non-PII) questions`, for example), should be smaller to match the comp
3. The h3 element that contains the participant question titles such as How confident do you feel contributing to the Wikimedia projects involved in this event? should be a lighter font weight / should not be bold.
4. The horizontal rule underneath each of the participant questions should be lighter than the horizontal rule underneath the menu bar

@vaughnwalters +1
@Daimona the font size of the headings are too big and disproportionate.

In T355128#9719899, @vaughnwalters wrote:

1. The div with id="StatsPanel" should not have 20px of padding on the left. It should instead be left aligned with the menu bar above it.

This is the standard padding for all OOUI IndexLayouts, compare with the demo. I should not that the padding seems to be absent in the Codex version, but we aren't using that at the moment, and I don't think we should change the default here for now.

3. The h3 element that contains the participant question titles such as How confident do you feel contributing to the Wikimedia projects involved in this event? should be a lighter font weight / should not be bold.

I made it this way because that's the standard look of the Codex Accordion component (OOUI does not have accordions). I don't think we should change this default?

4. The horizontal rule underneath each of the participant questions should be lighter than the horizontal rule underneath the menu bar

Making a fix for this.

2. The elements containing class="ext-campaignevents-details-stats-section-header" (containing txt`Non-Personally Identifiable Information (non-PII) questions`, for example), should be smaller to match the comp

In T355128#9740159, @gonyeahialam wrote:

@Daimona the font size of the headings are too big and disproportionate.

I can fix this if given updated specs that account for the bold accordion titles.

Change #1025823 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] SpecialEventDetails: Tweak border color of accordions in stats tab

https://gerrit.wikimedia.org/r/1025823

Change #1025823 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] SpecialEventDetails: Tweak border color of accordions in stats tab

https://gerrit.wikimedia.org/r/1025823

@gonyeahialam Feedback appreciated, and we can then create some separate tasks; thank you!

In T355128#9758824, @Daimona wrote:

In T355128#9719899, @vaughnwalters wrote:

3. The h3 element that contains the participant question titles such as How confident do you feel contributing to the Wikimedia projects involved in this event? should be a lighter font weight / should not be bold.

I made it this way because that's the standard look of the Codex Accordion component (OOUI does not have accordions). I don't think we should change this default?

That is the default in codex but codex mentions that it can be changed to something else. Following the default would look like this, which we can go with:

2. The elements containing class="ext-campaignevents-details-stats-section-header" (containing txt`Non-Personally Identifiable Information (non-PII) questions`, for example), should be smaller to match the comp

In T355128#9740159, @gonyeahialam wrote:

@Daimona the font size of the headings are too big and disproportionate.

I can fix this if given updated specs that account for the bold accordion titles.

Refer to the image above
@Daimona

In T355128#9809125, @gonyeahialam wrote:

Following the default would look like this, which we can go with:
Design specs

Thank you, this seems almost doable, but I'm not seeing if the font-size is using a CSS variable or not; on figma I can see the name being "Heading 5/Bold" and the font-size being 16px. However, this needs to be a level 2 header, and I'd like to know what size should be used. I should also note that neither Codex nor MW seem to provide variables for heading sizes, just the generic font-size-* ones. Same question about the accordion headers.

In T355128#9809671, @Daimona wrote:

In T355128#9809125, @gonyeahialam wrote:

Following the default would look like this, which we can go with:
Design specs

Thank you, this seems almost doable, but I'm not seeing if the font-size is using a CSS variable or not; on figma I can see the name being "Heading 5/Bold" and the font-size being 16px. However, this needs to be a level 2 header, and I'd like to know what size should be used. I should also note that neither Codex nor MW seem to provide variables for heading sizes, just the generic font-size-* ones. Same question about the accordion headers.

Heading variables

Accordion heading variables

Change #1037176 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] SpecialEventDetails: update header styles in the stats tab

https://gerrit.wikimedia.org/r/1037176

Change #1037176 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] SpecialEventDetails: update header styles in the stats tab

https://gerrit.wikimedia.org/r/1037176

sending this to design sign off with updated styling

build	gif of build