Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
373 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /** | ||
| * Album view component. | ||
| * @module components/theme/View/AlbumView | ||
| */ | ||
|
|
||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Helmet from 'react-helmet'; | ||
| import { Link } from 'react-router'; | ||
| import { Card, Image } from 'semantic-ui-react'; | ||
|
|
||
| /** | ||
| * AlbumView view component class. | ||
| * @class AlbumView | ||
| * @extends Component | ||
| */ | ||
| export default class AlbumView extends Component { | ||
| /** | ||
| * Property types. | ||
| * @property {Object} propTypes Property types. | ||
| * @static | ||
| */ | ||
| static propTypes = { | ||
| content: PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| description: PropTypes.string, | ||
| items: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| description: PropTypes.string, | ||
| url: PropTypes.string, | ||
| image: PropTypes.object, | ||
| '@type': PropTypes.string, | ||
| }), | ||
| ), | ||
| }).isRequired, | ||
| getCardHeader: PropTypes.func, | ||
| getCardDescription: PropTypes.func, | ||
| getCardExtra: PropTypes.func, | ||
| }; | ||
|
|
||
| /** | ||
| * Default properties | ||
| * @property {Object} defaultProps Default properties. | ||
| * @static | ||
| */ | ||
| static defaultProps = { | ||
| getCardHeader: item => <Card.Header content={item.title} />, | ||
| getCardDescription: item => <Card.Description content={item.description} />, | ||
| getCardExtra: () => null, | ||
| }; | ||
|
|
||
| /** | ||
| * Render method. | ||
| * @method render | ||
| * @returns {string} Markup for the component. | ||
| */ | ||
| render() { | ||
| return ( | ||
| <div id="page-home"> | ||
| <Helmet title={this.props.content.title} /> | ||
| <article id="content"> | ||
| <header> | ||
| <h1 className="documentFirstHeading">{this.props.content.title}</h1> | ||
| {this.props.content.description && ( | ||
| <p className="description">{this.props.content.description}</p> | ||
| )} | ||
| </header> | ||
| <section id="content-core"> | ||
| <Card.Group stackable doubling> | ||
| {this.props.content.items.map(item => ( | ||
| <Card | ||
| as={Link} | ||
| to={item.url} | ||
| title={item.title} | ||
| key={item.url} | ||
| centered | ||
| > | ||
| <div className="image-wrapper"> | ||
| {item.image && ( | ||
| <Image | ||
| src={item.image.scales.preview.download} | ||
| alt={ | ||
| item.image_caption ? item.image_caption : item.title | ||
| } | ||
| /> | ||
| )} | ||
| </div> | ||
| <Card.Content | ||
| header={this.props.getCardHeader(item)} | ||
| description={this.props.getCardDescription(item)} | ||
| textAlign="center" | ||
| /> | ||
| {this.props.getCardExtra(item)} | ||
| </Card> | ||
| ))} | ||
| {/* Workaround while Flexbox 2.0 doesn't implement last row alignment */} | ||
| {[...Array(3)].map((e, i) => <Card key={`item-${i}`} />)} | ||
| </Card.Group> | ||
| </section> | ||
| </article> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React from 'react'; | ||
| import renderer from 'react-test-renderer'; | ||
|
|
||
| import AlbumView from './AlbumView'; | ||
|
|
||
| describe('AlbumView', () => { | ||
| it('renders a AlbumView view component', () => { | ||
| const component = renderer.create( | ||
| <AlbumView | ||
| content={{ | ||
| title: 'Hello World!', | ||
| description: 'Hi', | ||
| items: [ | ||
| { | ||
| title: 'My item', | ||
| description: 'My item description', | ||
| url: 'http://item', | ||
| image: { | ||
| height: 100, | ||
| width: 100, | ||
| download: 'file:///image.jpg', | ||
| scales: { | ||
| preview: { | ||
| download: 'file:///preview.jpg', | ||
| }, | ||
| }, | ||
| }, | ||
| image_caption: 'My image caption', | ||
| '@type': 'News Item', | ||
| }, | ||
| ], | ||
| }} | ||
| />, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders a AlbumView view component with SVGs', () => { | ||
| const component = renderer.create( | ||
| <AlbumView | ||
| content={{ | ||
| title: 'Hello World!', | ||
| description: 'Hi', | ||
| items: [ | ||
| { | ||
| title: 'My item', | ||
| description: 'My item description', | ||
| url: 'http://item', | ||
| image: { | ||
| height: -1, | ||
| width: -1, | ||
| download: 'file:///image.svg', | ||
| scales: { | ||
| preview: { | ||
| download: 'file:///preview.svg', | ||
| }, | ||
| }, | ||
| }, | ||
| image_caption: 'My image caption', | ||
| '@type': 'News Item', | ||
| }, | ||
| ], | ||
| }} | ||
| />, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
155 changes: 155 additions & 0 deletions
155
src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`AlbumView renders a AlbumView view component 1`] = ` | ||
| <div | ||
| id="page-home" | ||
| > | ||
| <article | ||
| id="content" | ||
| > | ||
| <header> | ||
| <h1 | ||
| className="documentFirstHeading" | ||
| > | ||
| Hello World! | ||
| </h1> | ||
| <p | ||
| className="description" | ||
| > | ||
| Hi | ||
| </p> | ||
| </header> | ||
| <section | ||
| id="content-core" | ||
| > | ||
| <div | ||
| className="ui doubling stackable cards" | ||
| > | ||
| <a | ||
| className="ui centered card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| style={Object {}} | ||
| title="My item" | ||
| > | ||
| <div | ||
| className="image-wrapper" | ||
| > | ||
| <img | ||
| alt="My image caption" | ||
| className="ui image" | ||
| src="file:///preview.jpg" | ||
| /> | ||
| </div> | ||
| <div | ||
| className="center aligned content" | ||
| > | ||
| <div | ||
| className="header" | ||
| > | ||
| My item | ||
| </div> | ||
| <div | ||
| className="description" | ||
| > | ||
| My item description | ||
| </div> | ||
| </div> | ||
| </a> | ||
| <div | ||
| className="ui card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| /> | ||
| <div | ||
| className="ui card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| /> | ||
| <div | ||
| className="ui card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| /> | ||
| </div> | ||
| </section> | ||
| </article> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`AlbumView renders a AlbumView view component with SVGs 1`] = ` | ||
| <div | ||
| id="page-home" | ||
| > | ||
| <article | ||
| id="content" | ||
| > | ||
| <header> | ||
| <h1 | ||
| className="documentFirstHeading" | ||
| > | ||
| Hello World! | ||
| </h1> | ||
| <p | ||
| className="description" | ||
| > | ||
| Hi | ||
| </p> | ||
| </header> | ||
| <section | ||
| id="content-core" | ||
| > | ||
| <div | ||
| className="ui doubling stackable cards" | ||
| > | ||
| <a | ||
| className="ui centered card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| style={Object {}} | ||
| title="My item" | ||
| > | ||
| <div | ||
| className="image-wrapper" | ||
| > | ||
| <img | ||
| alt="My image caption" | ||
| className="ui image" | ||
| src="file:///preview.svg" | ||
| /> | ||
| </div> | ||
| <div | ||
| className="center aligned content" | ||
| > | ||
| <div | ||
| className="header" | ||
| > | ||
| My item | ||
| </div> | ||
| <div | ||
| className="description" | ||
| > | ||
| My item description | ||
| </div> | ||
| </div> | ||
| </a> | ||
| <div | ||
| className="ui card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| /> | ||
| <div | ||
| className="ui card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| /> | ||
| <div | ||
| className="ui card" | ||
| href={undefined} | ||
| onClick={[Function]} | ||
| /> | ||
| </div> | ||
| </section> | ||
| </article> | ||
| </div> | ||
| `; |
Oops, something went wrong.