diff --git a/app/dashboard/styles.scss b/app/dashboard/styles.scss index a6c184e03d..54e0bc12cd 100644 --- a/app/dashboard/styles.scss +++ b/app/dashboard/styles.scss @@ -85,6 +85,13 @@ .node-col-headers { display: none; } + + .iframe-container { + .osf-video { + width: 336px; + height: 190px; + } + } } @media screen and (min-width: 768px) { @@ -183,3 +190,17 @@ color: $color-text-placeholder-grey-dark; opacity: 1; } + +.iframe-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 20px; + margin-bottom: 30px; + + .osf-video { + width: 560px; + height: 315px; + } +} + diff --git a/app/dashboard/template.hbs b/app/dashboard/template.hbs index c22ab9f64c..b295302940 100644 --- a/app/dashboard/template.hbs +++ b/app/dashboard/template.hbs @@ -152,7 +152,28 @@

{{t 'dashboard.quicksearch.no_projects.line1'}}

{{t 'dashboard.quicksearch.no_projects.line2'}}

- {{t + +
+ +
+ + + {{t 'dashboard.getting_started'}} +
{{/if}} diff --git a/app/home/-components/support-section/styles.scss b/app/home/-components/support-section/styles.scss index 0624ca31c2..c5f9167087 100644 --- a/app/home/-components/support-section/styles.scss +++ b/app/home/-components/support-section/styles.scss @@ -15,6 +15,15 @@ } } +.iframe-container { + margin-bottom: 30px; + + .osf-video { + width: 560px; + height: 315px; + } +} + .supportItem { display: inline-block; } @@ -60,6 +69,19 @@ .container h1 { font-size: 36px; } + + .iframe-container { + justify-content: center; + + &.flex-row { + display: flex; + } + + .osf-video { + width: 336px; + height: 190px; + } + } } @media (max-width: 613px) { diff --git a/app/home/-components/support-section/template.hbs b/app/home/-components/support-section/template.hbs index 98b804bb8b..a1ffcd24b6 100644 --- a/app/home/-components/support-section/template.hbs +++ b/app/home/-components/support-section/template.hbs @@ -7,6 +7,20 @@ {{t 'new-home.support-section.header'}} +
+
+ +
+
diff --git a/lib/osf-components/addon/components/osf-link/component.ts b/lib/osf-components/addon/components/osf-link/component.ts index e372ea7468..f0d3599d2e 100644 --- a/lib/osf-components/addon/components/osf-link/component.ts +++ b/lib/osf-components/addon/components/osf-link/component.ts @@ -20,7 +20,7 @@ const { }, } = config; -type AnchorRel = 'noreferrer' | 'noopener'; +type AnchorRel = 'noreferrer' | 'noopener' | 'noopener noreferrer'; type AnchorTarget = '_self' | '_blank' | '_parent' | '_top'; @tagName('') @@ -36,7 +36,7 @@ export default class OsfLink extends Component { queryParams?: Record; fragment?: string; - rel: AnchorRel = 'noopener'; + rel: AnchorRel = 'noopener noreferrer'; target: AnchorTarget = '_self'; onClick?: () => void; diff --git a/tests/integration/components/osf-link/component-test.ts b/tests/integration/components/osf-link/component-test.ts new file mode 100644 index 0000000000..fb01aa0dff --- /dev/null +++ b/tests/integration/components/osf-link/component-test.ts @@ -0,0 +1,143 @@ +import { render} from '@ember/test-helpers'; +import Ember from 'ember'; +import { hbs } from 'ember-cli-htmlbars'; +import { setupRenderingTest } from 'ember-qunit'; +import { module, test } from 'qunit'; + + +module('Integration | Component | osf-link', hooks => { + setupRenderingTest(hooks); + + let orgOnError: any; + hooks.beforeEach(function() { + orgOnError = Ember.onerror; + }); + hooks.afterEach(function() { + Ember.onerror = orgOnError; + }); + + test('it renders the osf-link correctly for an @href', async assert => { + await render(hbs` + + {{t 'dashboard.getting_started'}} + + `); + assert.dom('[data-test-get-started-button]').exists(); + assert.dom('[data-test-get-started-button]').hasText('Getting Started'); + assert.dom('[data-test-get-started-button]').hasClass('btn'); + assert.dom('[data-test-get-started-button]').hasClass('btn-primary'); + assert.dom('[data-test-get-started-button][href$="https://osf.io"]') + .exists('The href https://osf.io is in the dom'); + }); + + test('it renders the osf-link correctly for an empty @href', async assert => { + await render(hbs` + + {{t 'dashboard.getting_started'}} + + `); + assert.dom('[data-test-get-started-button]').exists(); + assert.dom('[data-test-get-started-button]').hasText('Getting Started'); + assert.dom('[data-test-get-started-button]').hasClass('btn'); + assert.dom('[data-test-get-started-button]').hasClass('btn-primary'); + assert.dom('[data-test-get-started-button][href$=" "]') + .exists('The empty href is in the dom'); + }); + + test('it should throw an error without an array @models', async assert => { + Ember.onerror = (error: Error) => { + assert.equal(error.message, + 'Assertion Failed: `@models` must be undefined or an array. Consider using the `array` helper.'); + }; + + await render(hbs` + + {{t 'dashboard.getting_started'}} + + `); + }); + + test('it should throw an error without an @href or @route', async assert => { + Ember.onerror = (error: Error) => { + assert.equal(error.message, + 'Assertion Failed: Must pass `@href` xor `@route`. Did you pass `href` instead of `@href`?'); + }; + + await render(hbs` + + {{t 'dashboard.getting_started'}} + + `); + }); + + test('it should throw an error with @href and @route set to empty', async assert => { + Ember.onerror = (error: Error) => { + assert.equal(error.message, + 'Assertion Failed: Both `@href` and `@route` were improperly set (probably to empty strings)'); + }; + + await render(hbs` + + {{t 'dashboard.getting_started'}} + + `); + }); + + test('it should throw an error with @models and not @route', async assert => { + Ember.onerror = (error: Error) => { + assert.equal(error.message, + 'Assertion Failed: `@models` makes sense only with `@route`'); + }; + + await render(hbs` + + {{t 'dashboard.getting_started'}} + + `); + }); + +}); diff --git a/translations/en-us.yml b/translations/en-us.yml index e26bb3bf6d..700b896353 100644 --- a/translations/en-us.yml +++ b/translations/en-us.yml @@ -147,6 +147,8 @@ dashboard: preview_alt: 'Preview of a full quick projects screen' private_parent: 'Private project / ' private_grandparent: 'Private project / Private / ' + getting_started: 'Getting Started' + osf_video: 'OSF 101 Video' noteworthy: description: 'Discover public projects' new_and_noteworthy: 'New and noteworthy' @@ -372,6 +374,7 @@ new-home: support-section: header: 'How OSF supports your research' arrow: arrow + osf_video: 'OSF 101 Video' search: header: 'Search and Discover' description: 'Find papers, data, and materials to inspire your next research project. Search public projects to build on the work of others and find new collaborators.'