diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index 1700a1167..5a1979741 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -13,7 +13,12 @@ it('renders correctly', () => {
expect(tree).toMatchInlineSnapshot(`
Array [
- .c1 {
+ .c2 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c1 {
display: block;
box-sizing: border-box;
opacity: 0;
@@ -73,13 +78,18 @@ it('renders correctly', () => {
/>
<span />
<span
- className=""
+ className="c2"
color="inherit"
>
Tenis
</span>
</label>,
- .c1 {
+ .c2 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c1 {
display: block;
box-sizing: border-box;
opacity: 0;
@@ -139,7 +149,7 @@ it('renders correctly', () => {
/>
<span />
<span
- className=""
+ className="c2"
color="inherit"
>
Handball
diff --git a/src/components/Atoms/Input/input.test.js b/src/components/Atoms/Input/input.test.js
index d9011f02f..9c73997a8 100644
--- a/src/components/Atoms/Input/input.test.js
+++ b/src/components/Atoms/Input/input.test.js
@@ -17,6 +17,11 @@ it('renders correctly', () => {
expect(tree).toMatchInlineSnapshot(`
.c1 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c2 {
box-sizing: border-box;
width: 100%;
height: 50px;
@@ -33,23 +38,23 @@ it('renders correctly', () => {
color: #030e1a;
}
- .c1:focus {
+ .c2:focus {
border: 1px solid #666;
}
- .c1:focus::-webkit-input-placeholder {
+ .c2:focus::-webkit-input-placeholder {
color: transparent;
}
- .c1:focus:-moz-placeholder {
+ .c2:focus:-moz-placeholder {
color: transparent;
}
- .c1:focus::-moz-placeholder {
+ .c2:focus::-moz-placeholder {
color: transparent;
}
- .c1:focus:-ms-input-placeholder {
+ .c2:focus:-ms-input-placeholder {
color: transparent;
}
@@ -64,7 +69,7 @@ it('renders correctly', () => {
}
@media (min-width:740px) {
- .c1 {
+ .c2 {
max-width: 290px;
}
}
@@ -74,14 +79,14 @@ it('renders correctly', () => {
htmlFor="Acessibility info go here"
>
<span
- className=""
+ className="c1"
color="inherit"
>
Label
</span>
<input
aria-describedby="Acessibility info go here"
- className="c1"
+ className="c2"
name="fullname"
placeholder="This is the hint text"
type="text"
diff --git a/src/components/Atoms/RadioButton/RadioButton.test.js b/src/components/Atoms/RadioButton/RadioButton.test.js
index 3474d0ae1..6af6f5ba5 100644
--- a/src/components/Atoms/RadioButton/RadioButton.test.js
+++ b/src/components/Atoms/RadioButton/RadioButton.test.js
@@ -13,7 +13,12 @@ it('renders correctly', () => {
expect(tree).toMatchInlineSnapshot(`
Array [
- .c1 {
+ .c2 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c1 {
background-color: #FFFFFF;
z-index: 1;
top: 0;
@@ -81,14 +86,19 @@ it('renders correctly', () => {
/>
<span />
<span
- className=""
+ className="c2"
color="inherit"
for="Male"
>
Male
</span>
</label>,
- .c1 {
+ .c2 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c1 {
background-color: #FFFFFF;
z-index: 1;
top: 0;
@@ -156,7 +166,7 @@ it('renders correctly', () => {
/>
<span />
<span
- className=""
+ className="c2"
color="inherit"
for="Female"
>
diff --git a/src/components/Atoms/SelectField/SelectField.test.js b/src/components/Atoms/SelectField/SelectField.test.js
index bcfdd237f..369969573 100644
--- a/src/components/Atoms/SelectField/SelectField.test.js
+++ b/src/components/Atoms/SelectField/SelectField.test.js
@@ -23,6 +23,11 @@ it('renders correctly', () => {
expect(tree).toMatchInlineSnapshot(`
.c1 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c2 {
background-color: #FFFFFF;
width: 100%;
font-size: 1.2rem;
@@ -52,7 +57,7 @@ it('renders correctly', () => {
border-radius: 0;
}
- .c1:focus {
+ .c2:focus {
border: 1px solid #666;
}
@@ -62,7 +67,7 @@ it('renders correctly', () => {
}
@media (min-width:740px) {
- .c1 {
+ .c2 {
max-width: 290px;
}
}
@@ -71,13 +76,13 @@ it('renders correctly', () => {
className="c0"
>
<span
- className=""
+ className="c1"
color="inherit"
>
Label
</span>
<select
- className="c1"
+ className="c2"
>
<option
disabled={true}
diff --git a/src/components/Atoms/Text/Text.js b/src/components/Atoms/Text/Text.js
index 22ddc0ae6..1037dd194 100755
--- a/src/components/Atoms/Text/Text.js
+++ b/src/components/Atoms/Text/Text.js
@@ -8,11 +8,13 @@ import PropTypes from 'prop-types';
export const BaseText = styled.span`
color: ${({ color, theme }) => (color ? theme.color(color) : 'inherit')};
font-size: ${({ size, theme }) => theme.fontSize(size)};
+ text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : 'inherit')};
+ font-weight: ${({ weight }) => weight};
`;
/** Text renders different elements based on the `tag` prop */
-const Text = ({ tag, children, ...rest }) => (
- <BaseText {...rest} as={tag}>
+const Text = ({ tag, children, weight, ...rest }) => (
+ <BaseText {...rest} as={tag} weight={weight}>
{children}
</BaseText>
);
diff --git a/src/components/Atoms/Text/Text.test.js b/src/components/Atoms/Text/Text.test.js
index 11f064fa6..b06069dd5 100644
--- a/src/components/Atoms/Text/Text.test.js
+++ b/src/components/Atoms/Text/Text.test.js
@@ -14,6 +14,7 @@ it('renders correctly', () => {
.c0 {
color: #fbef51;
font-size: 1.725rem;
+ text-transform: inherit;
}
<p
diff --git a/src/components/Atoms/TextArea/TextArea.test.js b/src/components/Atoms/TextArea/TextArea.test.js
index dffeadb72..cb800b4cd 100644
--- a/src/components/Atoms/TextArea/TextArea.test.js
+++ b/src/components/Atoms/TextArea/TextArea.test.js
@@ -18,6 +18,11 @@ it('renders correctly', () => {
expect(tree).toMatchInlineSnapshot(`
.c1 {
+ text-transform: inherit;
+ font-weight: bold;
+ }
+
+ .c2 {
box-sizing: border-box;
width: 100%;
margin: 10px 0;
@@ -35,11 +40,11 @@ it('renders correctly', () => {
color: #030e1a;
}
- .c1:focus {
+ .c2:focus {
border: 1px solid #666;
}
- .c1:focus::-webkit-input-placeholder {
+ .c2:focus::-webkit-input-placeholder {
color: transparent;
color: $color;
font-size: $font-size;
@@ -47,7 +52,7 @@ it('renders correctly', () => {
overflow: visible;
}
- .c1:focus:-moz-placeholder {
+ .c2:focus:-moz-placeholder {
color: transparent;
color: $color;
font-size: $font-size;
@@ -55,7 +60,7 @@ it('renders correctly', () => {
overflow: visible;
}
- .c1:focus::-moz-placeholder {
+ .c2:focus::-moz-placeholder {
color: transparent;
color: $color;
font-size: $font-size;
@@ -63,7 +68,7 @@ it('renders correctly', () => {
overflow: visible;
}
- .c1:focus:-ms-input-placeholder {
+ .c2:focus:-ms-input-placeholder {
color: transparent;
color: $color;
font-size: $font-size;
@@ -82,7 +87,7 @@ it('renders correctly', () => {
}
@media (min-width:740px) {
- .c1 {
+ .c2 {
max-width: 100%;
height: 96px;
}
@@ -93,14 +98,14 @@ it('renders correctly', () => {
htmlFor="undefined"
>
<span
- className=""
+ className="c1"
color="inherit"
>
Label
</span>
<textarea
aria-describedby="Please leave your comment here"
- className="c1"
+ className="c2"
cols="5"
name="description"
placeholder="This is text area"
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
new file mode 100644
index 000000000..89477af19
--- /dev/null
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import Text from '../../Atoms/Text/Text';
+import Picture from '../../Atoms/Picture/Picture';
+import StyledLink from '../../Atoms/Link/Link.style';
+
+/**
+ * Article tag wrapper
+ */
+const Wrapper = styled.article`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ background-color: #fff;
+`;
+
+const Link = styled(StyledLink)`
+ display: flex;
+ height: 100%;
+ border: 0;
+ flex-direction: column;
+ @media ${({ theme }) => theme.breakpoint('small')} {
+ flex-direction: row;
+ }
+ @media ${({ theme }) => theme.breakpoint('large')} {
+ flex-direction: column;
+ }
+`;
+
+const ImageWrapper = styled.div`
+ height: 100%;
+ @media ${({ theme }) => theme.breakpoint('small')} {
+ width: 45%;
+ }
+ @media ${({ theme }) => theme.breakpoint('large')} {
+ width: 100%;
+ }
+`;
+
+const CopyWrapper = styled.div`
+ padding: 40px;
+ h3 {
+ margin: 0;
+ }
+ @media ${({ theme }) => theme.breakpoint('small')} {
+ width: 55%;
+ }
+ @media ${({ theme }) => theme.breakpoint('large')} {
+ width: 100%;
+ height: 100%;
+ }
+`;
+
+/**
+ * Article teaser component
+ */
+const ArticleTeaser = ({ date, href, images, alt, title }) => {
+ return (
+ <Wrapper>
+ <Link href={href} inline>
+ <ImageWrapper>
+ <Picture images={images} alt={alt} objectFit="cover" />
+ </ImageWrapper>
+ <CopyWrapper>
+ <Text size="xxs" weight="bold" uppercase>
+ {date}
+ </Text>
+ <Text size="xl" tag="h3" uppercase>
+ {title}
+ </Text>
+ </CopyWrapper>
+ </Link>
+ </Wrapper>
+ );
+};
+
+ArticleTeaser.propTypes = {
+ // eslint-disable-next-line react/forbid-prop-types
+ images: PropTypes.object.isRequired,
+ alt: PropTypes.string.isRequired,
+ date: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ /** link url */
+ href: PropTypes.string.isRequired
+};
+
+export default ArticleTeaser;
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.md b/src/components/Molecules/ArticleTeaser/ArticleTeaser.md
new file mode 100644
index 000000000..d1d17973d
--- /dev/null
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.md
@@ -0,0 +1,12 @@
+# Article teaser
+
+```js
+const images = require('../../../styleguide/data/data').default;
+<ArticleTeaser
+ href="/test"
+ images={images.pictures}
+ date=" 01 July 2019"
+ title="News article"
+ alt="Image's description"
+/>;
+```
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
new file mode 100644
index 000000000..e0bf11bf7
--- /dev/null
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
@@ -0,0 +1,171 @@
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../hoc/shallowWithTheme';
+import ArticleTeaser from './ArticleTeaser';
+import images from '../../../styleguide/data/data';
+
+it('renders correctly', () => {
+ const tree = renderWithTheme(
+ <ArticleTeaser
+ href="/test"
+ images={images.pictures}
+ date=" 01 July 2019"
+ title="News article"
+ alt="Image's description"
+ />
+ ).toJSON();
+
+ expect(tree).toMatchInlineSnapshot(`
+ .c5 {
+ font-size: 0.69375rem;
+ text-transform: uppercase;
+ font-weight: bold;
+ }
+
+ .c6 {
+ font-size: 1.725rem;
+ text-transform: uppercase;
+ }
+
+ .c3 {
+ display: block;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+
+ .c0 {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background-color: #fff;
+ }
+
+ .c1 {
+ color: #000;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 0 2px 1px;
+ border-bottom: 2px solid;
+ border-bottom-color: #000;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+ border: 0;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+
+ .c2 {
+ height: 100%;
+ }
+
+ .c4 {
+ padding: 40px;
+ }
+
+ .c4 h3 {
+ margin: 0;
+ }
+
+ @media (min-width:740px) {
+ .c1 {
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+ }
+
+ @media (min-width:1440px) {
+ .c1 {
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ }
+
+ @media (min-width:740px) {
+ .c2 {
+ width: 45%;
+ }
+ }
+
+ @media (min-width:1440px) {
+ .c2 {
+ width: 100%;
+ }
+ }
+
+ @media (min-width:740px) {
+ .c4 {
+ width: 55%;
+ }
+ }
+
+ @media (min-width:1440px) {
+ .c4 {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ <article
+ className="c0"
+ >
+ <a
+ className="c1"
+ href="/test"
+ >
+ <div
+ className="c2"
+ >
+ <picture>
+ <source
+ media="(min-width: 1440px)"
+ srcSet="picture-3.jpg"
+ />
+ <source
+ media="(min-width: 1024px)"
+ srcSet="picture-2.jpg"
+ />
+ <source
+ srcSet="picture-1.jpg"
+ />
+ <img
+ alt="Image's description"
+ className="c3"
+ height="auto"
+ src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+ width="100%"
+ />
+ </picture>
+ </div>
+ <div
+ className="c4"
+ >
+ <span
+ className="c5"
+ color="inherit"
+ size="xxs"
+ >
+ 01 July 2019
+ </span>
+ <h3
+ className="c6"
+ color="inherit"
+ size="xl"
+ >
+ News article
+ </h3>
+ </div>
+ </a>
+ </article>
+ `);
+});
diff --git a/src/components/Molecules/SingleMessage/SingleMessage.test.js b/src/components/Molecules/SingleMessage/SingleMessage.test.js
index 6fe0254e1..2794ae2b6 100644
--- a/src/components/Molecules/SingleMessage/SingleMessage.test.js
+++ b/src/components/Molecules/SingleMessage/SingleMessage.test.js
@@ -25,11 +25,13 @@ it('renders correctly', () => {
.c3 {
color: #FFFFFF;
font-size: 2.075rem;
+ text-transform: inherit;
}
.c4 {
color: #FFFFFF;
font-size: 1.2rem;
+ text-transform: inherit;
}
.c1 {
diff --git a/src/index.js b/src/index.js
index 9b6595f95..9c8765ff3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,3 +29,6 @@ export {
export {
default as SingleMessage
} from './components/Molecules/SingleMessage/SingleMessage';
+export {
+ default as ArticleBlock
+} from './components/Molecules/ArticleTeaser/ArticleTeaser';