Merge pull request #221 from Financial-Times/x-teaser-list

components/x-teaser-list/.bowerrc

@@ -0,0 +1,8 @@
+{
+  "registry": {
+    "search": [
+      "https://origami-bower-registry.ft.com",
+      "https://registry.bower.io"
+    ]
+  }
+}

components/x-teaser-list/.npmignore

@@ -0,0 +1,3 @@
+src/
+stories/
+rollup.js

components/x-teaser-list/bower.json

@@ -0,0 +1,9 @@
+{
+  "name": "x-teaser-list",
+  "private": true,
+  "main": "dist/TeaserList.es5.js",
+  "dependencies": {
+    "o-colors": "^5.4.1",
+    "o-grid": "^4.4.4"
+  }
+}

components/x-teaser-list/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@financial-times/x-teaser-list",
+  "version": "0.0.0",
+  "description": "",
+  "main": "dist/TeaserList.cjs.js",
+  "module": "dist/TeaserList.esm.js",
+  "browser": "dist/TeaserList.es5.js",
+  "style": "dist/TeaserList.css",
+  "scripts": {
+    "prepare": "bower install && npm run build",
+    "build": "node rollup.js",
+    "start": "node rollup.js --watch"
+  },
+  "keywords": [
+    "x-dash"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@financial-times/x-engine": "file:../../packages/x-engine",
+    "@financial-times/x-article-save-button": "file:../x-article-save-button",
+    "@financial-times/x-teaser": "file:../x-teaser"
+  },
+  "devDependencies": {
+    "@financial-times/x-rollup": "file:../../packages/x-rollup",
+    "bower": "^1.7.9",
+    "classnames": "^2.2.6",
+    "node-sass": "^4.9.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Financial-Times/x-dash.git"
+  },
+  "homepage": "https://github.com/Financial-Times/x-dash/tree/master/components/x-teaser-list",
+  "engines": {
+    "node": ">= 6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

components/x-teaser-list/readme.md

@@ -0,0 +1,53 @@
+# x-teaser-list
+
+Renders a simple list of content teasers, with optional save buttons.
+
+## Installation
+
+This module is compatible with Node 6+ and is distributed on npm.
+
+```bash
+npm install --save @financial-times/x-teaser-list
+```
+
+The [`x-engine`][engine] module is used to inject your chosen runtime into the component. Please read the `x-engine` documentation first if you are consuming `x-` components for the first time in your application.
+
+[engine]: https://github.com/Financial-Times/x-dash/tree/master/packages/x-engine
+
+## Other dependencies
+
+[o-teaser](https://registry.origami.ft.com/components/o-teaser) styles will need to be imported by the consumer of this component.
+
+If selectively importing o-teaser's styles via scss, then you will need the following:
+
+```scss
+$o-teaser-is-silent: true;
+@import 'o-teaser/main';
+@include oTeaser(('default'), ('small'));
+``` 
+
+## Usage
+
+The components provided by this module are all functions that expect a map of [properties](#properties). They can be used with vanilla JavaScript or JSX (If you are not familiar check out [WTF is JSX][jsx-wtf] first). For example if you were writing your application using React you could use the component like this:
+
+```jsx
+import React from 'react';
+import { TeaserList } from '@financial-times/x-teaser-list';
+
+// A == B == C
+const a = TeaserList(props);
+const b = <TeaserList {...props} />;
+const c = React.createElement(TeaserList, props);
+```
+
+All `x-` components are designed to be compatible with a variety of runtimes, not just React. Check out the [`x-engine`][engine] documentation for a list of recommended libraries and frameworks.
+
+[jsx-wtf]: https://jasonformat.com/wtf-is-jsx/
+
+### Props
+
+Feature           | Type    | Notes
+------------------|---------|----------------------------
+`items`           | Array   | Array of objects representing content items in Teaser format.
+`showSaveButtons` | Boolean | Default = true. Whether to show the save buttons.
+`csrfToken`       | String  | Cross-site Request Forgery token. Required if save buttons are shown.

components/x-teaser-list/rollup.js

@@ -0,0 +1,4 @@
+const xRollup = require('@financial-times/x-rollup');
+const pkg = require('./package.json');
+
+xRollup({ input: './src/TeaserList.jsx', pkg });

components/x-teaser-list/src/TeaserList.jsx

@@ -0,0 +1,37 @@
+import { h } from '@financial-times/x-engine';
+import { ArticleSaveButton } from '@financial-times/x-article-save-button';
+import { Teaser, presets } from '@financial-times/x-teaser';
+import classNames from 'classnames';
+import styles from './TeaserList.scss';
+
+const TeaserList = ({ items = [], showSaveButtons = true, csrfToken = null }) => (
+	<ul className={classNames(styles.list)}>
+	{items.map(item => {
+		return (
+			<li
+				key={item.id}
+				className={classNames(styles.listItem)}
+			>
+				<div className={classNames(styles.listItem__article)}>
+					<Teaser
+						{...item}
+						{...presets.Small}
+						theme="teaser-list"
+					/>
+				</div>
+				{showSaveButtons && <div className={classNames(styles.listItem__actions)}>
+					<ArticleSaveButton
+						id={`${item.id}-save-button`}
+						contentId={item.id}
+						contentTitle={item.title}
+						csrfToken={csrfToken}
+						saved={item.saved || false}
+					/>
+				</div>}
+			</li>
+		);
+	})}
+	</ul>
+);
+
+export { TeaserList };

components/x-teaser-list/src/TeaserList.scss

@@ -0,0 +1,34 @@
+@import 'o-colors/main';
+
+:global {
+	@import "~@financial-times/x-article-save-button/dist/ArticleSaveButton";
+}
+
+.list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+.listItem {
+	display: grid;
+	grid-gap: 0 20px;
+	grid-template: "article actions" min-content / 1fr min-content;
+	margin-bottom: 20px;
+	border-bottom: 1px solid oColorsByName('black-20');
+
+	:global {
+		.o-teaser--teaser-list {
+			border-bottom: 0;
+			padding-bottom: 0;
+		}
+	}
+}
+
+.listItem__article {
+	grid-area: article;
+}
+
+.listItem__actions {
+	grid-area: actions;
+}