diff --git a/__tests__/__snapshots__/snapshot.js.snap b/__tests__/__snapshots__/snapshot.js.snap
index eb614b8..eadfed6 100644
--- a/__tests__/__snapshots__/snapshot.js.snap
+++ b/__tests__/__snapshots__/snapshot.js.snap
@@ -4,199 +4,199 @@ exports[`renders homepage unchanged 1`] = `
-
-
+
-
-
+
+
+
+
+ Apprenticeships at Sparkbox
+
+
+ Sparkbox is a team that values education. We offer paid apprenticeships because we love what we do, we want to share with new talent, and we genuinely care about the future of the web.
+
-
- Apprenticeships at Sparkbox
-
-
- Sparkbox is a team that values education. We offer paid apprenticeships because we love what we do, we want to share with new talent, and we genuinely care about the future of the web.
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
-
+
+
+
+
-
-
-
-
-
+
+
+
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
+
+
+
@@ -263,16 +263,16 @@ exports[`renders homepage unchanged 1`] = `
-
-
- First Last
-
+ First Last1
+
@@ -283,12 +283,14 @@ exports[`renders homepage unchanged 1`] = `
className="container"
>
Personal
Linkedin
Github
-
+
-
-
- First Last
-
+ First Last2
+
@@ -377,12 +383,14 @@ exports[`renders homepage unchanged 1`] = `
className="container"
>
Personal
Linkedin
Github
-
+
-
-
@@ -496,34 +508,41 @@ exports[`renders homepage unchanged 1`] = `
-
+
-
0.0
-
+
- First Last
+ First Last1
- First Last
+ First Last2
+
+ previous employee
+
@@ -536,10 +555,16 @@ exports[`renders homepage unchanged 1`] = `
- First Last
+ First Last3
+
+ current employee
+
@@ -553,7 +578,7 @@ exports[`renders homepage unchanged 1`] = `
-
+
diff --git a/__tests__/snapshot.js b/__tests__/snapshot.js
index 9058688..1b6bd13 100644
--- a/__tests__/snapshot.js
+++ b/__tests__/snapshot.js
@@ -8,7 +8,7 @@ it('renders homepage unchanged', () => {
version: '0.0',
currentApprentices: [
{
- name: 'First Last',
+ name: 'First Last1',
image: '/apprentices/First.png',
links: [
{ href: 'personal', text: 'Personal' },
@@ -17,7 +17,7 @@ it('renders homepage unchanged', () => {
],
},
{
- name: 'First Last',
+ name: 'First Last2',
image: '/apprentices/First.png',
links: [
{ href: 'personal', text: 'Personal' },
@@ -31,14 +31,14 @@ it('renders homepage unchanged', () => {
version: '0.0',
apprentices: [
{
- name: 'First Last',
+ name: 'First Last1',
},
{
- name: 'First Last',
+ name: 'First Last2',
status: 'previous',
},
{
- name: 'First Last',
+ name: 'First Last3',
status: 'current',
},
],
diff --git a/components/apprentice-status-indicator/apprentice-status-indicator.js b/components/apprentice-status-indicator/apprentice-status-indicator.js
index e2e3118..0480b99 100644
--- a/components/apprentice-status-indicator/apprentice-status-indicator.js
+++ b/components/apprentice-status-indicator/apprentice-status-indicator.js
@@ -15,13 +15,18 @@ const ApprenticeStatusIndicator = ({ status }) => {
}
return (
-
-
-
+ <>
+
+ { `${status} employee` }
+
+
+
+
+ >
);
};
diff --git a/components/apprentice-status-indicator/apprentice-status-indicator.module.scss b/components/apprentice-status-indicator/apprentice-status-indicator.module.scss
index a982b51..d3e340a 100644
--- a/components/apprentice-status-indicator/apprentice-status-indicator.module.scss
+++ b/components/apprentice-status-indicator/apprentice-status-indicator.module.scss
@@ -1,6 +1,11 @@
@use '../../styles/colors' as *;
@use '../../styles/spacing' as *;
@use '../../styles/fonts' as *;
+@use '../../styles/mixins' as *;
+
+.status-label {
+ @include visually-hidden();
+}
.employee-status {
width: 0.75rem;
diff --git a/components/apprentice/apprentice.js b/components/apprentice/apprentice.js
index ca01a64..b905a9c 100644
--- a/components/apprentice/apprentice.js
+++ b/components/apprentice/apprentice.js
@@ -4,13 +4,13 @@ import SocialLinks, { linksPropTypes } from '../social-links/social-links';
import styles from './apprentice.module.scss';
const Apprentice = ({ image, name, links }) => (
-
- { name }
-
+
+
{ name }
+
-
+
-
+
);
export const apprenticePropTypes = {
diff --git a/components/apprentice/apprentice.test.js b/components/apprentice/apprentice.test.js
index be71aee..d7ef4d3 100644
--- a/components/apprentice/apprentice.test.js
+++ b/components/apprentice/apprentice.test.js
@@ -34,7 +34,7 @@ describe('the Apprentice component', () => {
});
it('adds name prop as alt attribute to image', () => {
- expect(image).toHaveAttribute('alt', 'First Last');
+ expect(image).toHaveAttribute('alt', 'a portrait of First Last');
});
it('renders links props given an href and text in the correct order', () => {
diff --git a/components/call-to-action/call-to-action.module.scss b/components/call-to-action/call-to-action.module.scss
index 87fd7d6..0a4a411 100644
--- a/components/call-to-action/call-to-action.module.scss
+++ b/components/call-to-action/call-to-action.module.scss
@@ -202,7 +202,7 @@
&__grid {
width: 90%;
- grid-template-columns: repeat(67, 1fr);
+ grid-template-columns: repeat(65, 1fr);
grid-template-rows: repeat(13, 1fr);
img {
diff --git a/components/hero/hero.module.scss b/components/hero/hero.module.scss
index 6a433ba..2826d84 100644
--- a/components/hero/hero.module.scss
+++ b/components/hero/hero.module.scss
@@ -65,7 +65,7 @@
&__grid { // This grid is for the hero images and svgs
display: grid;
- grid-template-columns: repeat(65, 1fr);
+ grid-template-columns: repeat(63, 1fr);
grid-template-rows: repeat(11, 1fr);
img {
@@ -212,7 +212,6 @@
&__sparkbox-logo {
&--full {
- padding: 1rem;
margin-bottom: 0;
}
}
@@ -224,7 +223,6 @@
&__text {
width: 100%;
order: 0;
- padding: 1rem;
margin-top: 2rem;
h1 {
diff --git a/components/link/link.js b/components/link/link.js
index 98a0ced..baaf29f 100644
--- a/components/link/link.js
+++ b/components/link/link.js
@@ -2,12 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import styles from './link.module.scss';
-const Link = ({ href, children }) => (
- {children}
+const Link = ({ href, ariaLabel, children }) => (
+ {children}
);
Link.propTypes = {
href: PropTypes.string.isRequired,
+ ariaLabel: PropTypes.string.isRequired,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
};
diff --git a/components/link/link.test.js b/components/link/link.test.js
index 4cb6ccc..a850b13 100644
--- a/components/link/link.test.js
+++ b/components/link/link.test.js
@@ -9,12 +9,17 @@ import Link from './link';
describe('the Link component', () => {
it('renders a link with the correct href given an href prop', () => {
- render( hello!);
+ render( hello);
expect(screen.getByRole('link')).toHaveAttribute('href', 'http://some/url');
});
- it('renders a link given an href and text', () => {
- render( hello!);
+ it('renders a link with the correct aria-label given an ariaLabel prop', () => {
+ render( hello);
+ expect(screen.getByRole('link')).toHaveAttribute('aria-label', 'test link');
+ });
+
+ it('renders a link with the correct inner text', () => {
+ render( hello);
expect(screen.getByRole('link')).toHaveTextContent('hello');
});
});
diff --git a/components/previous-apprentices-group/previous-apprentices-group.js b/components/previous-apprentices-group/previous-apprentices-group.js
index a27318c..97757aa 100644
--- a/components/previous-apprentices-group/previous-apprentices-group.js
+++ b/components/previous-apprentices-group/previous-apprentices-group.js
@@ -16,12 +16,13 @@ const makePreviousApprentice = (apprentice) => (
const PreviousApprenticesGroup = ({ version, apprentices }) => (
-
{version}
-
+
{apprentices.map(makePreviousApprentice)}
diff --git a/components/previous-apprentices/previous-apprentices.js b/components/previous-apprentices/previous-apprentices.js
index bbf2d49..1c9629b 100644
--- a/components/previous-apprentices/previous-apprentices.js
+++ b/components/previous-apprentices/previous-apprentices.js
@@ -4,8 +4,8 @@ import styles from './previous-apprentices.module.scss';
import PreviousApprenticesGroup from '../previous-apprentices-group/previous-apprentices-group';
const PreviousApprentices = ({ previousApprenticeGroups }) => (
-
-
+
+
Previous Apprentices
@@ -27,7 +27,7 @@ const PreviousApprentices = ({ previousApprenticeGroups }) => (
Past Employee
-
+
{
previousApprenticeGroups.map(({ version, apprentices }) => (
@@ -40,7 +40,7 @@ const PreviousApprentices = ({ previousApprenticeGroups }) => (
))
}
-
+
);
export const previousApprenticeGroupsPropTypes = PropTypes.shape({
diff --git a/components/social-links/social-links.js b/components/social-links/social-links.js
index b1e8aec..3000c94 100644
--- a/components/social-links/social-links.js
+++ b/components/social-links/social-links.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
import Link from '../link/link';
import styles from './social-links.module.scss';
-const SocialLinks = ({ links }) => (
+const SocialLinks = ({ links, name }) => (
<>
{ links.map(({ href, text }) => (
-
{ text }
-
+ { text }
+
@@ -23,6 +23,7 @@ export const linksPropTypes = PropTypes.arrayOf(PropTypes.shape({
SocialLinks.propTypes = {
links: linksPropTypes,
+ name: PropTypes.string.isRequired,
};
SocialLinks.defaultProps = {
diff --git a/components/social-links/social-links.test.js b/components/social-links/social-links.test.js
index ad3f823..35ec6fe 100644
--- a/components/social-links/social-links.test.js
+++ b/components/social-links/social-links.test.js
@@ -9,26 +9,33 @@ import SocialLinks from './social-links';
describe('the Link component', () => {
it('renders nothing when passed empty array', async () => {
- const { container } = render( );
+ const { container } = render( );
expect(container.innerHTML).toBe('');
});
it('renders nothing when links is not defined', async () => {
- const { container } = render( );
+ const { container } = render( );
expect(container.innerHTML).toBe('');
});
- it('renders links given an href and text in the correct order', () => {
+ it('renders multiple social links in the correct order', () => {
render( );
const links = screen.getAllByRole('link');
- expect(links[0]).toHaveAttribute('href', 'https://www.facebook.com/');
expect(links[0]).toHaveTextContent('facebook');
- expect(links[1]).toHaveAttribute('href', 'https://www.google.com/');
expect(links[1]).toHaveTextContent('google');
});
+
+ it('renders a social link', () => {
+ render( );
+ const link = screen.getByRole('link');
+ expect(link).toHaveTextContent('LinkedIn');
+ expect(link).toHaveAttribute('href', 'https://www.linkedin.com/');
+ expect(link).toHaveAttribute('aria-label', "First Last's LinkedIn");
+ });
});
diff --git a/pages/index.js b/pages/index.js
index 8b53a70..ff959c4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -24,9 +24,8 @@ const Home = ({ apprenticeData: { currentApprenticeGroup, previousApprenticeGrou
Sparkbox Apprentices
-
+
-