-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* initial bootstrap for eventpromo 🐿 v2.10.2 * flesh out the component 🐿 v2.10.2 * added knobs 🐿 v2.10.2 * fixed tests, removed test css 🐿 v2.10.2 * updated readme 🐿 v2.10.2 * removed commented lines 🐿 v2.10.2 * renamed vars, removed prefix 🐿 v2.10.2 * fixes for Image.jsx 🐿 v2.10.2 * updated snapshots 🐿 v2.10.2 * updated readme, added usage and properties sections 🐿 v2.10.2 * more minor changes to address PR comments 🐿 v2.10.2 * use button element for play/pause button 🐿 v2.10.2 * update knobs for eventpromo images 🐿 v2.10.2 * added header for event-promo__details 🐿 v2.10.2 * updated snapshots 🐿 v2.10.2 * changed details-header 🐿 v2.10.2 * updated snapshots 🐿 v2.10.2 * styling images 🐿 v2.10.2 * trying sass 🐿 v2.10.2 * move styles to x-dash 🐿 v2.10.2 * updated snapshots 🐿 v2.10.2 * fixed formatting * addressed some commments from PR * replaced class+state pattern with x-interaction * we dont want to use lock files for now, gitignore package-lock.json * updated snapshot * restored .bowerrc * documented isPaused * updated snapshots * restore host param for x-workbench * Use origami build service for base styles, use origami foundations directly * Include o-normalise in build service provided document styles * minor styles fixes, prettier * rebase master, updated tests * Reduces z-indices * added strapline * prettier styles * fixed x-docs issue with o-grid
- Loading branch information
Showing
27 changed files
with
1,062 additions
and
2 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ bower_components | |
| npm-debug.log | ||
| .DS_Store | ||
| dist | ||
| package-lock.json | ||
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,8 @@ | ||
| { | ||
| "registry": { | ||
| "search": [ | ||
| "https://origami-bower-registry.ft.com", | ||
| "https://registry.bower.io" | ||
| ] | ||
| } | ||
| } |
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,10 @@ | ||
| { | ||
| "name": "x-eventpromo", | ||
| "private": true, | ||
| "dependencies": { | ||
| "o-buttons": "^5.14.0", | ||
| "o-colors": "^4.7.2", | ||
| "o-grid": "^4.4.3", | ||
| "o-typography": "^5.7.5" | ||
| } | ||
| } |
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,41 @@ | ||
| { | ||
| "name": "@financial-times/x-eventpromo", | ||
| "version": "0.0.0", | ||
| "description": "Promote content from live.ft.com", | ||
| "main": "dist/Eventpromo.cjs.js", | ||
| "module": "dist/Eventpromo.esm.js", | ||
| "browser": "dist/Eventpromo.js", | ||
| "style": "dist/Eventpromo.css", | ||
| "types": "Props.d.ts", | ||
| "scripts": { | ||
| "prepare": "npm run build", | ||
| "build": "node rollup.js", | ||
| "start": "node rollup.js --watch", | ||
| "postinstall": "bower install" | ||
| }, | ||
| "keywords": [ | ||
| "x-dash" | ||
| ], | ||
| "author": "", | ||
| "license": "ISC", | ||
| "dependencies": { | ||
| "@financial-times/x-engine": "file:../../packages/x-engine", | ||
| "@financial-times/x-interaction": "file:../x-interaction" | ||
| }, | ||
| "devDependencies": { | ||
| "@financial-times/x-rollup": "file:../../packages/x-rollup", | ||
| "node-sass": "^4.9.0", | ||
| "bower": "^1.7.9" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/Financial-Times/x-dash.git" | ||
| }, | ||
| "homepage": "https://github.com/Financial-Times/x-dash/tree/master/components/x-eventpromo", | ||
| "engines": { | ||
| "node": ">= 6.0.0" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
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,52 @@ | ||
| # x-eventpromo | ||
|
|
||
| This module provides templates for use with [n-eventpromo](https://github.com/Financial-Times/n-eventpromo). | ||
| Eventpromo is used to promote content from [live.ft.com](http://live.ft.com). | ||
|
|
||
| ## Installation | ||
|
|
||
| This module is compatible with Node 6+ and is distributed on npm. | ||
|
|
||
| ```bash | ||
| npm install --save @financial-times/x-eventpromo @financial-times/x-engine | ||
| ``` | ||
|
|
||
| This module also requires [`x-engine`][engine] as a peer dependency. The 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 | ||
|
|
||
| ## Usage | ||
|
|
||
| This module is used by [n-eventpromo](https://github.com/Financial-Times/n-eventpromo). | ||
|
|
||
| Usage example can be found here (uses preact): | ||
| https://github.com/Financial-Times/n-eventpromo/blob/x-eventpromo/src/index.js | ||
|
|
||
| With react | ||
| ```jsx | ||
| import React from 'react'; | ||
| import { Eventpromo } from '@financial-times/x-eventpromo'; | ||
|
|
||
| // A == B == C | ||
| const a = Eventpromo(props); | ||
| const b = <Eventpromo {...props} />; | ||
| const c = React.createElement(Eventpromo, 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/ | ||
|
|
||
| ## Properties | ||
|
|
||
| **If not marked optional, fields are require non-empty values.** | ||
|
|
||
| Property | Type | Notes | ||
| ---------------------|---------------------|-------------------------------- | ||
| `isPaused` | Boolean | Control animation state on load | ||
| `dates` | String | Free text, can be either a specific date or a date range | ||
| `id` | String | Eventpromo id, 32 chars | ||
| `images` | String[] | 3 image urls, will be passed to origami image service | ||
| `link` | String | Eventpromo url, should include segmentId | ||
| `location` | String | No set format: "London", "New York", "ExCeL London", etc | ||
| `title` | String | |
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,4 @@ | ||
| const xRollup = require('@financial-times/x-rollup'); | ||
| const pkg = require('./package.json'); | ||
|
|
||
| xRollup({ input: './src/Eventpromo.jsx', pkg }); |
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,26 @@ | ||
| import { h } from '@financial-times/x-engine'; | ||
| import Footer from './Footer'; | ||
| import Meta from './Meta'; | ||
| import styles from './Details.scss'; | ||
|
|
||
| const Details = ({ link, title, strapline, ...props }) => { | ||
| return ( | ||
| <div className={styles.block} aria-labelledby="details-header"> | ||
| <div id="details-header" hidden> | ||
| Event details and information | ||
| </div> | ||
| <div className={styles.details}> | ||
| <a href={link} className={styles.title} data-trackable="event-promo"> | ||
| {title} | ||
| </a> | ||
| <Meta {...props} /> | ||
| <div className={styles.strapline}> | ||
| <p>{strapline}</p> | ||
| </div> | ||
| <Footer url={link} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Details; |
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,73 @@ | ||
| @import 'styles/bootstrap'; | ||
|
|
||
| .block { | ||
| display: flex; | ||
| @include oGridRespondTo($until: S) { | ||
| flex-direction: column; | ||
| } | ||
| } | ||
|
|
||
| .details { | ||
| background-color: rgba(38, 42, 51, 0.9); | ||
| color: oColorsGetPaletteColor('white'); | ||
| z-index: 5; | ||
| padding: $ep-standard-space; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: space-between; | ||
|
|
||
| a:hover { | ||
| color: #c5cbd4; | ||
| } | ||
|
|
||
| @include oGridRespondTo($until: S) { | ||
| max-width: 100%; | ||
| margin-top: -$ep-standard-space * 2; | ||
| margin-left: $ep-half-space; | ||
| margin-right: $ep-half-space; | ||
| margin-bottom: 0; | ||
| padding: $ep-standard-space; | ||
| padding-bottom: $ep-half-space -6; | ||
| } | ||
|
|
||
| @include oGridRespondTo($from: S) { | ||
| flex-basis: 60%; | ||
| min-width: 385px; | ||
| } | ||
|
|
||
| @include oGridRespondTo(S, M) { | ||
| flex-basis: 75%; | ||
| } | ||
|
|
||
| @include oGridRespondTo(L, XL) { | ||
| min-width: 300px; | ||
| } | ||
| } | ||
| .strapline { | ||
| p { | ||
| margin: 0; | ||
| } | ||
| @include oTypographySans($scale: 2); | ||
| font-weight: 300; | ||
| margin-top: 15px; | ||
| } | ||
| .title { | ||
| display: inline-block; | ||
| @include oTypographyDisplayBold($scale: 5); | ||
| color: inherit; | ||
| text-decoration: none; | ||
| border: 0; | ||
| padding-bottom: 8px; | ||
|
|
||
| @include oGridRespondTo($until: S) { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| @include oGridRespondTo($from: M) { | ||
| @include oTypographyDisplayBold($scale: 6); | ||
| } | ||
|
|
||
| @include oGridRespondTo(L, XL) { | ||
| @include oTypographyDisplayBold($scale: 5); | ||
| } | ||
| } |
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,15 @@ | ||
| import { h } from '@financial-times/x-engine'; | ||
| import Details from './Details'; | ||
| import ImagesContainer from './ImagesContainer'; | ||
| import styles from './Eventpromo.scss'; | ||
|
|
||
| const Eventpromo = (props) => { | ||
| return ( | ||
| <div className={styles.eventpromo} data-event-focus="" data-focus-concept={props.id}> | ||
| <Details {...props} /> | ||
| <ImagesContainer {...props} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export { Eventpromo }; |
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,19 @@ | ||
| @import 'styles/bootstrap'; | ||
|
|
||
| .eventpromo { | ||
| max-width: 700px; | ||
| margin-bottom: 50px; | ||
| margin-top: 30px; | ||
| display: flex; | ||
| position: relative; | ||
|
|
||
| @include oGridRespondTo($until: S) { | ||
| flex-direction: column; | ||
| flex-direction: column-reverse; | ||
| padding: 0; | ||
| } | ||
|
|
||
| @include oGridRespondTo($from: L, $until: XL) { | ||
| width: 540px; | ||
| } | ||
| } |
Oops, something went wrong.