diff --git a/.storybook/main.js b/.storybook/main.cjs similarity index 94% rename from .storybook/main.js rename to .storybook/main.cjs index 44f3442b..929692ad 100644 --- a/.storybook/main.js +++ b/.storybook/main.cjs @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -export default { +module.exports = { "stories": [ "../stories/**/*.stories.@(js|jsx|ts|tsx)" ], diff --git a/public/locally-available-studies.json b/public/locally-available-studies.json index f314f96f..09a06d63 100644 --- a/public/locally-available-studies.json +++ b/public/locally-available-studies.json @@ -13,12 +13,11 @@ "version": "0.3.1", "addonId": "ion-basic-study@mozilla.org", "downloadLink": "https://addons.mozilla.org/firefox/downloads/latest/ion-basic-study", + "endDate": "2022-04-04", "studyEnded": false, "studyPaused": false, "description": "Study purpose: Testing Rally.", - "privacyPolicyLink": "https://addons.mozilla.org/en-US/firefox/addon/ion-basic-study/", - "joinStudyConsent": "This study will send an encrypted ping, only when the toolbar icon is clicked.", - "leaveStudyConsent": "This study cannot be re-joined.", + "studyDetailsLink": "https://addons.mozilla.org/en-US/firefox/addon/ion-basic-study/", "dataCollectionDetails": ["The date and time"], "tags": ["misinformation", "social media", "demo"] } diff --git a/public/studies-schema.json b/public/studies-schema.json index dbadc2af..029d0b96 100644 --- a/public/studies-schema.json +++ b/public/studies-schema.json @@ -1,97 +1,90 @@ { - "type": "array", - "items": [ - { - "type": "object", - "properties": { - "name": { - "type": "string" - }, - "icons": { - "type": "object", - "properties": { - "32": { - "type": "string" - }, - "64": { - "type": "string" - }, - "128": { - "type": "string" - } - }, - "required": [ - "32", - "64", - "128" - ] - }, - "authors": { - "type": "object", - "properties": { - "url": { - "type": "string" - }, - "name": { - "type": "string" - } - }, - "required": [ - "url", - "name" - ] - }, - "version": { - "type": "string" - }, - "addonId": { - "type": "string" - }, - "downloadLink": { - "type": "string" - }, - "studyEnded": { - "type": "boolean" - }, - "studyPaused": { - "type": "boolean" - }, - "description": { - "type": "string" - }, - "privacyPolicyLink": { - "type": "string" - }, - "joinStudyConsent": { - "type": "string" - }, - "leaveStudyConsent": { - "type": "string" - }, - "dataCollectionDetails": { - "type": "array", - "items": [ - { - "type": "string" - } - ] - } + "type": "array", + "items": [ + { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "icons": { + "type": "object", + "properties": { + "32": { + "type": "string" }, - "required": [ - "name", - "icons", - "authors", - "version", - "addonId", - "downloadLink", - "studyEnded", - "studyPaused", - "description", - "privacyPolicyLink", - "joinStudyConsent", - "leaveStudyConsent", - "dataCollectionDetails" - ] + "64": { + "type": "string" + }, + "128": { + "type": "string" + } + }, + "required": ["32", "64", "128"] + }, + "authors": { + "type": "object", + "properties": { + "url": { + "type": "string" + }, + "name": { + "type": "string" + } + }, + "required": ["url", "name"] + }, + "version": { + "type": "string" + }, + "addonId": { + "type": "string" + }, + "downloadLink": { + "type": "string" + }, + "studyEnded": { + "type": "boolean" + }, + "studyPaused": { + "type": "boolean" + }, + "description": { + "type": "string" + }, + "privacyPolicyLink": { + "type": "string" + }, + "joinStudyConsent": { + "type": "string" + }, + "leaveStudyConsent": { + "type": "string" + }, + "dataCollectionDetails": { + "type": "array", + "items": [ + { + "type": "string" + } + ] } - ] + }, + "required": [ + "name", + "icons", + "authors", + "version", + "addonId", + "downloadLink", + "studyEnded", + "studyPaused", + "description", + "privacyPolicyLink", + "joinStudyConsent", + "leaveStudyConsent", + "dataCollectionDetails" + ] + } + ] } diff --git a/src/components/study-card/StudyCard.svelte b/src/components/study-card/StudyCard.svelte index ca6e4696..e0b65572 100644 --- a/src/components/study-card/StudyCard.svelte +++ b/src/components/study-card/StudyCard.svelte @@ -18,7 +18,7 @@ export let endDate; export let joined = false; export let joinedDate = undefined; - export let privacyPolicyLink = undefined; + export let studyDetailsLink = undefined; export let imageSrc; export let dataCollectionDetails = []; export let tags = []; @@ -238,7 +238,7 @@
- View Full Study Details + View Full Study Details
diff --git a/src/components/study-card/study-categories.js b/src/components/study-card/study-categories.js index bc760771..f4eff854 100644 --- a/src/components/study-card/study-categories.js +++ b/src/components/study-card/study-categories.js @@ -26,4 +26,12 @@ export default { text: "var(--color-marketing-gray-100)", background: "#E0ECEC" }, + "community insights": { + text: "var(--color-marketing-gray-100)", + background: "#D9BFFF" + }, + "product discovery": { + text: "var(--color-marketing-gray-100)", + background: "#FFB4DC" + } } diff --git a/src/routes/current-studies/Content.svelte b/src/routes/current-studies/Content.svelte index 9fc3a3d0..2aaf7dd3 100644 --- a/src/routes/current-studies/Content.svelte +++ b/src/routes/current-studies/Content.svelte @@ -3,17 +3,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* --------------- Current Studies -------------- - -Data points we'll need to support in the store to make this a reality: -- study join date (study.joinedOn, added from the partner support library as soon as the study is successfully joined) -- study end date (study.endDate, this should come from the partner) -- study details link (study.detailsLink), which should be provided by partner -- study details page name (study.detailsLinkName), which should be provided by partner - -*/ - import { createEventDispatcher } from 'svelte'; import { fly } from 'svelte/transition'; import StudyCard from './StudyCard.svelte'; @@ -31,6 +20,22 @@ function leaveStudy(studyID) { dispatch("leave-study", studyID); } +function parseDateIfNeeded(date) { + if (date === undefined || (typeof date === 'object' && typeof date.getMonth === 'function')) return date; + try { + let endDate = date.split('-'); + let day = +endDate[2]; + let month = +endDate[1] - 1; + let year = +endDate[0]; + return new Date(year, month, day); + } catch (err) { + console.error(err); + return undefined; + } +} + +$: console.log(studies) + diff --git a/src/routes/irbs/RS01Consent.svelte b/src/routes/irbs/RS01Consent.svelte new file mode 100644 index 00000000..128571fc --- /dev/null +++ b/src/routes/irbs/RS01Consent.svelte @@ -0,0 +1,102 @@ + + +

Rally Study Consent Notice

+ +

+ The goal of this study is to improve our understanding of how our community + browses the internet, where they spend their time, and how these browsing dynamics differ across segments of people. +

+ +

+ To understand this we will collect data about your browsing experience. More + specifically, what websites you browse (e.g., wikipedia.org), how long you + view pages, how far you scroll on pages, when a page plays audio, and for how + long audio is playing. The data we collect about the specific pages you browse + is limited to the page title, description, and category. For more information + take a look at our additional details page. +

+ +

+ This data is not aggregated before it is sent to our servers; this study will + record all events. After we analyze our data we will publish aggregated + insights on our blog or other channels. When we do so, we will minimize what we’re sharing publicly by ensuring we aggregate the + data. +

+ +

+ Data will be collected through a custom browser web extension developed by the + Rally team. We will install the web extension and data will be collected + through browser data after you opt-in. Mozilla will store the data on Google + Cloud where all analysis will be conducted. This server is restricted to the + Rally team researchers and is encrypted. Data will be transferred by TLS + between the participant's browser and the Mozilla analysis database. TLS + stands for "transport layer security" which encrypts browser data. +

+ +

+ This study will be open for 6 months, and you can unenroll at any time by + following the steps below. +

+ +

Leaving the Study

+

+ You can leave the study at any time from the Mozilla Rally options page. To + access the page, click on the Rally button rally icon + in your browser toolbar. The button is usually near the top right of the browser + window. If you have removed the Rally button from your toolbar, you can also access + the Rally options page from the browser’s add-ons settings. The Rally options page + will show you a list of studies that you are currently enrolled in. You can leave + this study by clicking the “Leave Study” button on the associated study card. If + you leave the study, the study’s browser extension will be automatically uninstalled, + removing the study code and data from your browser. We will also automatically + delete the data that your browser has submitted for the study, unless you allow + us to retain that data. You may not be able to rejoin the study if you leave. If + you leave Rally, you will also leave the studies that you are enrolled in, including + this study. +

+ + diff --git a/src/routes/irbs/index.js b/src/routes/irbs/index.js index 39c1abad..5dae6e79 100644 --- a/src/routes/irbs/index.js +++ b/src/routes/irbs/index.js @@ -2,7 +2,9 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import PrincetonCovidDisinformationIRB from "./PrincetonCovidDisinformationIRB.svelte"; +import RS01Consent from "./RS01Consent.svelte"; export default { - "princeton-study": PrincetonCovidDisinformationIRB + "rally.news.study@princeton.edu": PrincetonCovidDisinformationIRB, + "rally-study-01@mozilla.org": RS01Consent } diff --git a/stories/flow/MainFlowView.svelte b/stories/flow/MainFlowView.svelte index 6ab14fc2..1603a14c 100644 --- a/stories/flow/MainFlowView.svelte +++ b/stories/flow/MainFlowView.svelte @@ -40,28 +40,51 @@ const mockStore = (function() { // add one nicer study with all the information. const nicerStudy = { - addonId: 'nicer-study-example@mozilla.org', - name: "An Example Study", + addonId: 'rally-study-01@mozilla.org', + name: "Your Time Online and \"Doomscrolling\"", authors: { - name: "Rally Team" + name: "Mozilla Rally" + }, + icons: { + 64: undefined + }, + endDate: new Date(2021, 9, 31), + tags: ['product discovery', 'community insights'], + studyDetailsLink: 'https://example.com', + + description: `When you participate in this study you are helping Rally discover how our community browses the internet. We will explore interesting online patterns like “doomscrolling” -- the popular term for browsing outrageous or depressing online news for a long period of time. Our findings will lead to new Rally features or blog posts about aggregate online behavior.`, + dataCollectionDetails: [ + 'We are collecting event-level data containing host names without the specific page (e.g rally.mozilla.org) ', + 'Events are sent when you do specific actions (listen to audio, changing a tab, watching a video, loading a new URL.', + 'The title of the page, the 1-2 sentence description and the type of social media page you’re on (for instance, “article” or “video.movie”)', + 'We will measure how far you scroll down on the page' + ], + detailsDirectName: "Rally Website", +} + +const mockAcademicPartnerStudy = { + addonId: 'rally.news.study@princeton.edu', + name: "Generic Partner Study", + authors: { + name: "Generic Partner University" }, icons: { 64: undefined }, endDate: new Date('2021-07-03'), - tags: ['ad trackers', 'misinformation', 'profiling'], + tags: ['social media', 'quantified self'], privacyPolicy: {spec: 'https://example.com'}, description: `This is a mock study description. All of the information here is for illustrative purposes only.`, dataCollectionDetails: ['page views', 'time and date of joining study', 'etc.'], detailsDirectName: "Rally Website", - detailsDirectLink: '#' + studyDetailsLink: '/' } fetch('locally-available-studies.json') .then(r => r.json()) .then(s => { - mockStore.set({...get(mockStore), availableStudies: [nicerStudy, ...s]}); + mockStore.set({...get(mockStore), availableStudies: [nicerStudy, mockAcademicPartnerStudy, ...s]}); }); setContext("rally:store", mockStore); diff --git a/stories/irb/RS01Consent.svelte b/stories/irb/RS01Consent.svelte new file mode 100644 index 00000000..5bf198ad --- /dev/null +++ b/stories/irb/RS01Consent.svelte @@ -0,0 +1,14 @@ + + +
+ + + +
\ No newline at end of file diff --git a/stories/irb/irb.stories.js b/stories/irb/irb.stories.js index d4b17b4a..0d1bc801 100644 --- a/stories/irb/irb.stories.js +++ b/stories/irb/irb.stories.js @@ -2,11 +2,16 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - import PrincetonIRBStory from './PrincetonIRB.svelte'; - export default { - title: "IRB Components", - }; - - export const PrincetonIRB = () => ({ - Component: PrincetonIRBStory, - }); +import PrincetonIRBStory from './PrincetonIRB.svelte'; +import RS01ConsentStory from './RS01Consent.svelte'; +export default { + title: "IRB Components", +}; + +export const PrincetonIRB = () => ({ + Component: PrincetonIRBStory, +}); + +export const RS01Consent = () => ({ + Component: RS01ConsentStory, +}); diff --git a/stories/studies/StudySet.svelte b/stories/studies/StudySet.svelte index f4d9537e..840a8275 100644 --- a/stories/studies/StudySet.svelte +++ b/stories/studies/StudySet.svelte @@ -13,7 +13,7 @@ imageSrc="https://addons.cdn.mozilla.net/static/img/addon-icons/default-64.png" dataCollectionDetails={['how often you visit news and health websites', 'The amount of time you spend looking at these websites', 'The sources that lead you to visit these websites', 'Whether you shared links to these websites on social media']} tags={['social media', 'misinformation']} - privacyPolicyLink={'/'}> + studyDetailsLink={'/'}> Political & COVID-18 News Information Princeton University

@@ -34,7 +34,7 @@ joinedDate={new Date(2021, 8, 9)} dataCollectionDetails={['the date and time', 'number of browser tabs open', 'the time of day when the browser is first used, additional thoughts', 'the temperature outside near the data center where their data will be stored', 'the date and time', 'number of browser tabs open', 'the time of day when the browser is first used, additional thoughts']} tags={['social media', 'misinformation', 'data & privacy', 'devices', 'accessibility', 'other']} - privacyPolicyLink={'/'}> + studyDetailsLink={'/'}> Very, very long Study 1a.05 (long title, and also this doesn't have study icon) The Mozilla Foundation, The Mozilla Corporation, and others