diff --git a/angular/projects/spark-angular/package-lock.json b/angular/projects/spark-angular/package-lock.json index 7fd9c83fa4..0493db7034 100644 --- a/angular/projects/spark-angular/package-lock.json +++ b/angular/projects/spark-angular/package-lock.json @@ -1,6 +1,6 @@ { "name": "@sparkdesignsystem/spark-angular", - "version": "14.0.0", + "version": "14.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/angular/projects/spark-angular/package.json b/angular/projects/spark-angular/package.json index d645beacb9..aaf0ab7185 100644 --- a/angular/projects/spark-angular/package.json +++ b/angular/projects/spark-angular/package.json @@ -1,7 +1,7 @@ { "name": "@sparkdesignsystem/spark-angular", "description": "A collection of Spark Design System components in Angular 6+", - "version": "14.0.0", + "version": "14.0.1", "author": "Rocket Mortgage", "license": "MIT", "scripts": { diff --git a/angular/projects/spark-angular/src/environment/environment.ts b/angular/projects/spark-angular/src/environment/environment.ts index 289c894389..1f2e4925aa 100644 --- a/angular/projects/spark-angular/src/environment/environment.ts +++ b/angular/projects/spark-angular/src/environment/environment.ts @@ -1,3 +1,3 @@ export const environment = { - version: '14.0.0', + version: '14.0.1', }; diff --git a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts index afc1fe12d8..8b54c630e4 100644 --- a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts +++ b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts @@ -146,6 +146,14 @@ export const defaultStory = () => ({ 'https://spark-assets.netlify.app/rocket-homes-white.svg', imgAlt: 'Rocket Homes Logo', analyticsString: 'link-3' + }, + { + text: 'Find and buy the perfect car or truck from thousands of vehicles, all in one marketplace', + href: 'https://rocketauto.com', + imgSrc: + 'https://spark-assets.netlify.app/rocket_auto.svg', + imgAlt: 'Rocket Auto Logo', + analyticsString: 'link-4' } ]" diff --git a/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.spec.ts b/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.spec.ts index 41ea6aa275..cb2019e19f 100644 --- a/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.spec.ts +++ b/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.spec.ts @@ -23,6 +23,7 @@ class Test1Component { describe('isElementVisible', () => { let component: Test1Component; let componentFixture: ComponentFixture; + let windowSpy; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -31,11 +32,16 @@ describe('isElementVisible', () => { })); beforeEach(() => { + windowSpy = jest.spyOn(window, 'window', 'get'); componentFixture = TestBed.createComponent(Test1Component); component = componentFixture.componentInstance; componentFixture.detectChanges(); }); + afterEach(() => { + windowSpy.mockRestore(); + }); + it('should return false for element with display: none', () => { expect(isElementVisible(component.elDisplayNone)).toEqual(false); }); @@ -51,4 +57,10 @@ describe('isElementVisible', () => { it('should return true for element with visibility: visible', () => { expect(isElementVisible(component.elVisibilityVisible)).toEqual(true); }); + + it('should not use window scope if window is undefined', () => { + windowSpy.mockImplementation(() => undefined); + expect(window).toBeUndefined(); + expect(isElementVisible(component.elDisplayNone)).toEqual(undefined); + }); }); diff --git a/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.ts b/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.ts index 8aa666734c..8dffe2d5b6 100644 --- a/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.ts +++ b/angular/projects/spark-angular/src/lib/utilities/isElementVisible/isElementVisible.ts @@ -10,13 +10,15 @@ export const isElementVisible = (elRef: ElementRef): boolean => { if (!elRef) { return; } - const elementDisplayValue = window.getComputedStyle(elRef.nativeElement) - .display; - const elementVisibilityValue = window.getComputedStyle(elRef.nativeElement) - .visibility; - const elementIsVisible = - elementDisplayValue === 'none' || elementVisibilityValue === 'hidden' - ? false - : true; - return elementIsVisible; + if (typeof window !== 'undefined') { + const elementDisplayValue = window.getComputedStyle(elRef.nativeElement) + .display; + const elementVisibilityValue = window.getComputedStyle(elRef.nativeElement) + .visibility; + const elementIsVisible = + elementDisplayValue === 'none' || elementVisibilityValue === 'hidden' + ? false + : true; + return elementIsVisible; + } }; diff --git a/html/components/footer.stories.js b/html/components/footer.stories.js index 645c8d5c75..99b361167e 100644 --- a/html/components/footer.stories.js +++ b/html/components/footer.stories.js @@ -111,6 +111,24 @@ export const defaultStory = () => { search the latest home listings

+ +
+
+ + Rocket Auto Logo + +
+ +

+ Find and buy the perfect car or truck from + thousands of vehicles, all in one marketplace +

+
( element: 'a', mediaHref: '#nogo', }, + { + mediaType: 'image', + src: 'https://spark-assets.netlify.app/rocket_auto.svg', + altText: 'Rocket Auto Logo', + description: + 'Find and buy the perfect car or truck from thousands of vehicles, all in one marketplace', + element: 'a', + mediaHref: 'https://rocketauto.com', + }, ], }} linkColumns={[ diff --git a/src/components/layouts/Layout.js b/src/components/layouts/Layout.js index 319ae72f26..d9451d2067 100644 --- a/src/components/layouts/Layout.js +++ b/src/components/layouts/Layout.js @@ -76,21 +76,6 @@ const Layout = ({ children, initialContext, hasSideBar, location }) => { Skip to Main Content
-
( Spark Design System - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* eslint-enable max-len */ ); diff --git a/src/pages/using-spark/components/icon.mdx b/src/pages/using-spark/components/icon.mdx index 53b3f6b626..4a6cec05eb 100644 --- a/src/pages/using-spark/components/icon.mdx +++ b/src/pages/using-spark/components/icon.mdx @@ -31,6 +31,9 @@ give feedback. - Icons should only be sized to `16px`, `24px`, or `32px`. - Icons should not be used in place of artwork or illustrations. +- If used as a clickable interaction with a text label, +use first-person pronouns. For example: Use "Download My +Approval Letter," instead of "Download Your Approval Letter."