Merge cf00a50 into 79849ae

CenterForOpenScience · May 1, 2024 · 7407464 · 7407464
2 parents 79849ae + cf00a50
commit 7407464
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 13 deletions.
diff --git a/app/preprints/-components/preprint-provider-selection/component.ts b/app/preprints/-components/preprint-provider-selection/component.ts
@@ -39,6 +39,10 @@ export default class PreprintProviderSelection extends Component<InputArgs> {
 
     @action
     updateSelectedProvider(provider: PreprintProviderModel): void {
-        this.selectedProvider = provider;
+        if (this.selectedProvider?.id !== provider.id) {
+            this.selectedProvider = provider;
+        } else {
+            this.selectedProvider = undefined;
+        }
     }
 }
diff --git a/...ts/preprint-provider-display/component.ts → ...on/preprint-provider-display/component.ts b/...ts/preprint-provider-display/component.ts → ...on/preprint-provider-display/component.ts
@@ -1,5 +1,6 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
 
 
@@ -11,7 +12,7 @@ interface InputArgs {
 
 
 export default class PreprintProviderDisplay extends Component<InputArgs> {
-    provider: PreprintProviderModel = this.args.provider;
+    @tracked provider: PreprintProviderModel = this.args.provider;
 
     public get isSelected(): boolean {
         return this.args.provider.id === this.args.selectedProviderId;

diff --git a/...nts/preprint-provider-display/styles.scss → ...ion/preprint-provider-display/styles.scss b/...nts/preprint-provider-display/styles.scss → ...ion/preprint-provider-display/styles.scss
@@ -1,6 +1,6 @@
 .provider-container {
-    width: 264px;
-    height: 150px;
+    width: 265px;
+    height: 175px;
     margin: 10px;
     padding: 10px;
     border: 1px solid $color-border-gray;
@@ -25,19 +25,40 @@
     }
 
     .name-container {
-        width: 100%;
+        width: 245px;
+        height: 20px;
         margin-top: 5px;
         font-weight: bold;
         text-align: center;
     }
 
     .description-container {
-        width: 100%;
+        width: 245px;
+        height: 31px;
         margin-top: 5px;
+        padding-top: 4px;
         text-align: center;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        // this is needed because it can have in-line styling
+        > * {
+            width: 245px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .button-container {
+        width: 100%;
+        height: 26px;
+        margin-top: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
     }
 
     &:hover {

diff --git a/...ts/preprint-provider-display/template.hbs → ...on/preprint-provider-display/template.hbs b/...ts/preprint-provider-display/template.hbs → ...on/preprint-provider-display/template.hbs
@@ -1,8 +1,6 @@
-{{!-- template-lint-disable no-invalid-interactive --}}
 <div
     data-test-provider-id='{{this.provider.id}}'
     local-class='provider-container {{if (is-mobile) 'mobile'}} {{if this.isSelected 'selected'}}'
-    {{ on 'click' (action this.onProviderSelect) }}
 >
     <div local-class='image-container'>
         <img
@@ -23,4 +21,21 @@
     >
         {{html-safe this.provider.description}}
     </div>
+
+    <div
+        local-class='button-container'
+    >
+        <Button
+            data-test-select-button
+            data-analytics-name='Select a new preprint'
+            @layout='small'
+            {{on 'click' (action this.onProviderSelect)}}
+        >
+            {{#if this.isSelected}}
+                {{t 'preprints.select.deselect-button'}}
+            {{else}}
+                {{t 'preprints.select.select-button'}}
+            {{/if}}
+        </Button>
+    </div>
 </div>
diff --git a/app/preprints/-components/preprint-provider-selection/template.hbs b/app/preprints/-components/preprint-provider-selection/template.hbs
@@ -17,7 +17,7 @@
     </div>
     <div local-class='provider-list-container'>
         {{#each this.submissionProviders as |provider| }}
-            <Preprints::-Components::PreprintProviderDisplay
+            <Preprints::-Components::PreprintProviderSelection::PreprintProviderDisplay
                 data-test-provider
                 @provider={{provider}}
                 @updateSelectedProvider={{this.updateSelectedProvider}}

diff --git a/app/preprints/select/template.hbs b/app/preprints/select/template.hbs
@@ -1,8 +1,6 @@
-{{page-title (t 'preprints.select.page_title')}}
+{{page-title (t 'preprints.select.page-title')}}
 
 <div local-class='select-page-container {{if (is-mobile) 'mobile'}}'>
-    {{!-- placehodler for header component --}}
-    {{!-- local-class 'header-container' and 'header' will be replaced by the component's own local-class --}}
     <div local-class='header-container'>
         <div local-class='header-clamp-width-container'>
             <p

diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -1170,8 +1170,10 @@ preprints:
         title: 'Search'
     title: 'Preprints'
     select:
-        page_title: 'Select Providers'
+        page-title: 'Select Providers'
         title: 'New Preprints'
+        select-button: 'Select'
+        deselect-button: 'Deselect'
         heading: 'Select a preprint service'
         paragraph: 'A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal peer review and published in a scientific journal. <a href={link}>Learn More</a>.'
         create_button: 'Create Preprint'