diff --git a/templates/travel/components/ActivitiesPanel.js b/templates/travel/components/ActivitiesPanel.js deleted file mode 100644 index 0930e1792..000000000 --- a/templates/travel/components/ActivitiesPanel.js +++ /dev/null @@ -1,62 +0,0 @@ -import ActivityButton from './ActivityButton'; -import ActiveSvg from './svg/ActiveSvg'; -import ArtisticSvg from './svg/ArtisticSvg'; -import DrinksSvg from './svg/DrinksSvg'; -import FashionSvg from './svg/FashionSvg'; -import FoodSvg from './svg/FoodSvg'; -import MusicSvg from './svg/MusicSvg'; -import NatureSvg from './svg/NatureSvg'; -import NightlifeSvg from './svg/NightlifeSvg'; -import ToursSvg from './svg/ToursSvg'; -import WaterSvg from './svg/WaterSvg'; - -export default function ActivitiesPanel(props) { - return ( -
-
- -

Browse by activity

-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- ); -} diff --git a/templates/travel/components/ActivityButton.js b/templates/travel/components/ActivityButton.js deleted file mode 100644 index 68dd0ab0b..000000000 --- a/templates/travel/components/ActivityButton.js +++ /dev/null @@ -1,20 +0,0 @@ -export default function ActivityButton({name, title, children}) { - return ( - -
-
{children}
-
-

{title}

- - ); -} diff --git a/templates/travel/components/activities/Activities.js b/templates/travel/components/activities/Activities.js new file mode 100644 index 000000000..b39379378 --- /dev/null +++ b/templates/travel/components/activities/Activities.js @@ -0,0 +1,61 @@ +import ActiveSvg from '../svg/ActiveSvg'; +import ArtisticSvg from '../svg/ArtisticSvg'; +import DrinksSvg from '../svg/DrinksSvg'; +import FashionSvg from '../svg/FashionSvg'; +import FoodSvg from '../svg/FoodSvg'; +import MusicSvg from '../svg/MusicSvg'; +import NatureSvg from '../svg/NatureSvg'; +import NightlifeSvg from '../svg/NightlifeSvg'; +import ToursSvg from '../svg/ToursSvg'; +import WaterSvg from '../svg/WaterSvg'; + +export default function Activities(props) { + return ( +
+
+ +

Browse by activity

+
+
+
+
+ {[ + {name: 'active', title: 'Active', icon: }, + {name: 'artistic', title: 'Artistic', icon: }, + {name: 'drinks', title: 'Drinks', icon: }, + {name: 'fashion', title: 'Fashion', icon: }, + {name: 'food', title: 'Food', icon: }, + {name: 'music', title: 'Music', icon: }, + {name: 'nature', title: 'Nature', icon: }, + {name: 'nightlife', title: 'Nightlife', icon: }, + {name: 'tours', title: 'Tours', icon: }, + {name: 'water', title: 'Water', icon: }, + ].map(item => ( + +
+
{item.icon}
+
+

{item.title}

+ + ))} +
+
+
+
+ ); +} diff --git a/templates/travel/components/AnglesArtwork.js b/templates/travel/components/angles/Angles.js similarity index 90% rename from templates/travel/components/AnglesArtwork.js rename to templates/travel/components/angles/Angles.js index fb212d24f..47615eac2 100644 --- a/templates/travel/components/AnglesArtwork.js +++ b/templates/travel/components/angles/Angles.js @@ -1,4 +1,4 @@ -export default function AnglesArtwork() { +export default function Angles() { return (
diff --git a/templates/travel/components/data/TravelData.js b/templates/travel/components/data/TravelData.js new file mode 100644 index 000000000..28ae0b211 --- /dev/null +++ b/templates/travel/components/data/TravelData.js @@ -0,0 +1,202 @@ +export default function TravelData() { + return { + travel: { + data: { + types: [ + {text: 'Active', value: 'active', icon: {run: true}}, + {text: 'Artistic', value: 'artistic', icon: {paintbrush: true}}, + {text: 'Drinks', value: 'drinks', icon: {cocktail: true}}, + {text: 'Fashion', value: 'fashion', icon: {jacket: true}}, + {text: 'Food', value: 'food', icon: {cutlery: true}}, + {text: 'Music', value: 'music', icon: {guitar: true}}, + {text: 'Nature', value: 'nature', icon: {pine: true}}, + {text: 'Nightlife', value: 'nightlife', icon: {moon: true}}, + {text: 'Tours', value: 'tours', icon: {bus: true}}, + {text: 'Water', value: 'water', icon: {boat: true}}, + ], + }, + 'head-tag': { + title: 'Travel Template', + 'canonical-path': 'templates/travel/travel.amp', + extensions: ['amp-list', 'amp-bind'], + templates: ['amp-mustache'], + 'css-path': 'templates/travel/travel.css', + 'font-stylesheets': ['https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'], + }, + partials: { + hero: { + images: [ + { + src: '../../img/travel/hero-2.jpg', + }, + { + src: '../../img/travel/hero-3.jpg', + }, + { + src: '../../img/travel/hero-1.jpg', + }, + ], + }, + featured: { + 'image-col-1': { + 'overlay-color': 'travel-featured-color-blue', + width: 336, + height: 507, + src: 'new-york', + name: 'New York', + 'adventure-number': '379 adventures', + }, + 'image-col-2-top': { + 'overlay-color': 'travel-featured-color-cyan', + width: 264, + height: 246, + src: 'barcelona', + name: 'Barcelona', + 'adventure-number': '68 adventures', + }, + 'image-col-2-bottom': { + 'overlay-color': 'travel-featured-color-orange', + width: 264, + height: 264, + src: 'paris', + name: 'Paris', + 'adventure-number': '221 adventures', + }, + 'image-col-3-top': { + 'overlay-color': 'travel-featured-color-purple', + width: 276, + height: 207, + src: 'tokyo', + name: 'Tokyo', + 'adventure-number': '500+ adventures', + }, + 'image-col-3-bottom': { + 'overlay-color': 'travel-featured-color-cornflower', + width: 264, + height: 286, + src: 'chicago', + name: 'Chicago', + 'adventure-number': '143 adventures', + }, + 'image-col-4': { + 'overlay-color': 'travel-featured-color-teal', + width: 312, + height: 507, + src: 'reykjavik', + name: 'Reykjavik', + 'adventure-number': '87 adventures', + }, + }, + popular: { + adventures: [ + { + 'layout-classes': ['travel-popular-tilt-right'], + href: '#', + width: 346, + height: 200, + src: '../../img/travel/activity/surf-day.jpg', + src2x: '../../img/travel/activity/surf-day@2x.jpg', + text: 'Surf Day. Board and Wetsuits Included in Price!', + price: '100', + reviews: '241 Reviews', + place: 'Oaxaca', + new: false, + }, + { + 'layout-classes': ['travel-results-result relative'], + href: '#', + width: 346, + height: 200, + src: '../../img/travel/activity/discover-electronic-scene.jpg', + src2x: '../../img/travel/activity/discover-electronic-scene@2x.jpg', + text: "Discover Oaxaca's Electronic Music Scene with a Top DJ", + price: '113', + reviews: '42 Reviews', + place: 'Oaxaca', + new: true, + }, + { + 'layout-classes': ['travel-popular-tilt-left'], + href: '#', + width: 346, + height: 200, + src: '../../../img/travel/activity/skateboard-around-city.jpg', + src2x: '../../../img/travel/activity/skateboard-around-city@2x.jpg', + text: 'Skateboard Around the City', + price: '92', + reviews: '17 Reviews', + place: 'Mexico City', + new: false, + }, + ], + }, + }, + 'apply-button-props': [ + { + key: 'ui_reset', + value: 'false', + }, + { + key: 'ui_filterPane', + value: 'false', + }, + { + key: 'query_query', + value: 'fields_query', + }, + { + key: 'fields_query_edited', + value: 'false', + }, + { + key: 'query_departure', + value: 'fields_departure', + }, + { + key: 'fields_departure_edited', + value: 'false', + }, + { + key: 'query_return', + value: 'fields_return', + }, + { + key: 'fields_return_edited', + value: 'false', + }, + { + key: 'query_maxPrice', + value: 'fields_maxPrice', + }, + { + key: 'fields_maxPrice_edited', + value: 'false', + }, + { + key: 'query_city', + value: 'fields_city', + }, + { + key: 'fields_city_edited', + value: 'false', + }, + { + key: 'query_type', + value: 'fields_type', + }, + { + key: 'fields_type_edited', + value: 'false', + }, + { + key: 'query_sort', + value: 'fields_sort', + }, + { + key: 'fields_sort_edited', + value: 'false', + }, + ], + }, + }; +} diff --git a/templates/travel/components/data/TravelResultsData.js b/templates/travel/components/data/TravelResultsData.js new file mode 100644 index 000000000..1f968202b --- /dev/null +++ b/templates/travel/components/data/TravelResultsData.js @@ -0,0 +1,146 @@ +export default function TravelResultsData() { + return { + travel: { + data: { + types: [ + {text: 'Active', value: 'active', icon: {run: true}}, + {text: 'Artistic', value: 'artistic', icon: {paintbrush: true}}, + {text: 'Drinks', value: 'drinks', icon: {cocktail: true}}, + {text: 'Fashion', value: 'fashion', icon: {jacket: true}}, + {text: 'Food', value: 'food', icon: {cutlery: true}}, + {text: 'Music', value: 'music', icon: {guitar: true}}, + {text: 'Nature', value: 'nature', icon: {pine: true}}, + {text: 'Nightlife', value: 'nightlife', icon: {moon: true}}, + {text: 'Tours', value: 'tours', icon: {bus: true}}, + {text: 'Water', value: 'water', icon: {boat: true}}, + ], + sort: [ + {text: 'Popular', value: 'popularity-desc', selected: true}, + {text: 'Best Rated', value: 'rating-desc', selected: false}, + {text: 'New', value: 'age-asc', selected: false}, + {text: 'Lowest Price', value: 'price-asc', selected: false}, + ], + }, + 'head-tag': { + title: 'Travel Template', + 'canonical-path': 'templates/travel/travel-results.amp', + extensions: ['amp-selector', 'amp-bind', 'amp-list'], + templates: ['amp-mustache'], + 'css-path': 'templates/travel/travel-results.css', + 'font-stylesheets': ['https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'], + }, + 'apply-button-props': [ + { + key: 'ui_reset', + value: 'false', + }, + { + key: 'ui_filterPane', + value: 'false', + }, + { + key: 'query_query', + value: 'fields_query', + }, + { + key: 'fields_query_edited', + value: 'false', + }, + { + key: 'query_departure', + value: 'fields_departure', + }, + { + key: 'fields_departure_edited', + value: 'false', + }, + { + key: 'query_return', + value: 'fields_return', + }, + { + key: 'fields_return_edited', + value: 'false', + }, + { + key: 'query_maxPrice', + value: 'fields_maxPrice', + }, + { + key: 'fields_maxPrice_edited', + value: 'false', + }, + { + key: 'query_city', + value: 'fields_city', + }, + { + key: 'fields_city_edited', + value: 'false', + }, + { + key: 'query_type', + value: 'fields_type', + }, + { + key: 'fields_type_edited', + value: 'false', + }, + { + key: 'query_sort', + value: 'fields_sort', + }, + { + key: 'fields_sort_edited', + value: 'false', + }, + ], + 'reset-button-props': [ + { + key: 'ui_reset', + value: 'true', + }, + { + key: 'query_maxPrice', + value: 'fields_maxPrice_initial', + }, + { + key: 'fields_maxPrice', + value: 'fields_maxPrice_initial', + }, + { + key: 'fields_maxPrice_live', + value: 'fields_maxPrice_initial', + }, + { + key: 'fields_maxPrice_edited', + value: 'false', + }, + { + key: 'query_city', + value: 'fields_city_initial', + }, + { + key: 'fields_city', + value: 'fields_city_initial', + }, + { + key: 'fields_city_edited', + value: 'false', + }, + { + key: 'query_type', + value: 'fields_type_initial', + }, + { + key: 'fields_type', + value: 'fields_type_initial', + }, + { + key: 'fields_type_edited', + value: 'false', + }, + ], + }, + }; +} diff --git a/templates/travel/components/DiscoverSection.js b/templates/travel/components/discover/Discover.js similarity index 95% rename from templates/travel/components/DiscoverSection.js rename to templates/travel/components/discover/Discover.js index 19fa17b0b..7ebe47b8a 100644 --- a/templates/travel/components/DiscoverSection.js +++ b/templates/travel/components/discover/Discover.js @@ -1,4 +1,4 @@ -export default function DiscoverSection(props) { +export default function Discover(props) { return (
diff --git a/templates/travel/components/discover/DiscoverMobile.js b/templates/travel/components/discover/DiscoverMobile.js new file mode 100644 index 000000000..df9c3a7e4 --- /dev/null +++ b/templates/travel/components/discover/DiscoverMobile.js @@ -0,0 +1,31 @@ +import {AmpImg} from '@ampproject/toolbox-next-amp'; + +export default function DiscoverMobile(props) { + return ( +
+
+

Discover Adventures

+
+ Get inspired and find your next big trip +
+
+
+ +
+
From the blog
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit amet dolor set.{' '} + + Read more + +

+
+
+
+ ); +} diff --git a/templates/travel/components/featured/Featured.js b/templates/travel/components/featured/Featured.js new file mode 100644 index 000000000..8d9a184d8 --- /dev/null +++ b/templates/travel/components/featured/Featured.js @@ -0,0 +1,137 @@ +import {AmpImg} from '@ampproject/toolbox-next-amp'; + +export default function Featured(props) { + return ( +
+
+

+ Featured Destinations +

+
+ +
+ ); +} diff --git a/templates/travel/components/filter-bar/FilterBar.js b/templates/travel/components/filter-bar/FilterBar.js new file mode 100644 index 000000000..31afce5d7 --- /dev/null +++ b/templates/travel/components/filter-bar/FilterBar.js @@ -0,0 +1,158 @@ +import {AmpList, AmpMustache} from '@ampproject/toolbox-next-amp'; +import SortPane from '../filter-bar/SortPane'; +import CaretDownSmallSvg from '../svg/CaretDownSmallSvg'; +import AmpListProps from '../utils/AmpListProps'; + +export default function FilterBar({data}) { + return ( +
+
+
+
+ Filters + + + +
+ +
+ Price +
+ +
+ + Any price + +
+ +
+ Type +
+ +
+
+ 0 && display.query_type.length < ${ + data.types.length + } ? ' hide' : '')`} + > + All types + + + {data.types.map(t => ( + + {t.text} + + ))} +
+
+ +
+ City +
+ +
+
+ + + {`{{#stats.allCities}}`} + All cities + {`{{/stats.allCities}}`} + {`{{^stats.allCities}}`} + {`{{#stats.cities}}`} + {`{{#isSelected}}`} + {`{{name}}`} + {`{{/isSelected}}`} + {`{{/stats.cities}}`} + {`{{/stats.allCities}}`} + + +
+
+ +
+ + + + {`{{stats.resultCount}}`} + Tours & Activities Found + Results + + + +
+
+ +
+
+ Sort by +
+ {/* + Render an invisible set of labels to force the element to always be + the width of the widest label. + */} + {data.sort.map(s => ( +
+ {s.text} +
+ ))} + + + {data.sort.map(s => ( + + {s.text} + + ))} + +
+ + + +
+ +
+
+
+ ); +} diff --git a/templates/travel/components/filter-bar/SortPane.js b/templates/travel/components/filter-bar/SortPane.js new file mode 100644 index 000000000..39e0b419e --- /dev/null +++ b/templates/travel/components/filter-bar/SortPane.js @@ -0,0 +1,42 @@ +import {AmpSelector} from '@ampproject/toolbox-next-amp'; + +export default function SortPane(props) { + return ( +
+
+
+
+ +
+ Popular +
+
+ Best Rated +
+
+ New +
+
+ Lowest Price +
+ +
+
+
+
+ ); +} diff --git a/templates/travel/components/filter-pane/FilterPane.js b/templates/travel/components/filter-pane/FilterPane.js new file mode 100644 index 000000000..e8f4b3817 --- /dev/null +++ b/templates/travel/components/filter-pane/FilterPane.js @@ -0,0 +1,68 @@ +import Filters from '../filters/Filters'; + +export default function FilterPane(props) { + return ( +
+
+
+
+ +
+
+
+ + +
+
+
+
+ ); +} diff --git a/templates/travel/components/filters/CitySelector.js b/templates/travel/components/filters/CitySelector.js new file mode 100644 index 000000000..3b1d84b61 --- /dev/null +++ b/templates/travel/components/filters/CitySelector.js @@ -0,0 +1,53 @@ +import {AmpList, AmpMustache, AmpSelector, AmpImg} from '@ampproject/toolbox-next-amp'; +import AmpListProps from '../utils/AmpListProps'; + +export default function CitySelector(props) { + return ( + + + +
    + {`{{#stats.cities}}`} + {`{{#isSelected}}`} +
  • + {`{{/isSelected}}`} + {`{{^isSelected}}`} +
    • + {/* This closing is a hack */} +
  • + {`{{/isSelected}}`} + +
    + +
    + {`{{name}}`} +     +
    • + {`{{/stats.cities}}`} +
+ + + + ); +} diff --git a/templates/travel/components/filters/Filters.js b/templates/travel/components/filters/Filters.js new file mode 100644 index 000000000..0e2c277ed --- /dev/null +++ b/templates/travel/components/filters/Filters.js @@ -0,0 +1,150 @@ +import {AmpMustache, AmpList, AmpSelector} from '@ampproject/toolbox-next-amp'; +import PriceRange from './PriceRange'; +import CitySelector from './CitySelector'; +import TravelInputRangeSvg from '../svg/TravelInputRangeSvg'; +import ActiveSvg from '../svg/ActiveSvg'; +import ArtisticSvg from '../svg/ArtisticSvg'; +import DrinksSvg from '../svg/DrinksSvg'; +import FashionSvg from '../svg/FashionSvg'; +import FoodSvg from '../svg/FoodSvg'; +import MusicSvg from '../svg/MusicSvg'; +import NatureSvg from '../svg/NatureSvg'; +import NightlifeSvg from '../svg/NightlifeSvg'; +import ToursSvg from '../svg/ToursSvg'; +import WaterSvg from '../svg/WaterSvg'; +import AmpListProps from '../utils/AmpListProps'; + +export default function Filters(props) { + return ( +
+
+
max price
+ + + +
+ + + Average Price for activites in {`{{stats.location}}`} + is between ${`{{stats.price.average.min}}`} and ${`{{stats.price.average.max}}`}. + + +
+
+
+
type
+ + {/* */} + +
    + {[ + { + option: 'active', + icon: , + title: 'Active', + cls: 'col col-6 travel-type-active', + }, + { + option: 'artistic', + icon: , + title: 'Artistic', + cls: 'col col-6 travel-type-artistic', + }, + { + option: 'drinks', + icon: , + title: 'Drinks', + cls: 'col col-6 travel-type-drinks', + }, + { + option: 'fashion', + icon: , + title: 'Fashion', + cls: 'col col-6 travel-type-fashion', + }, + { + option: 'food', + icon: , + title: 'Food', + cls: 'col col-6 travel-type-food', + }, + { + option: 'music', + icon: , + title: 'Music', + cls: 'col col-6 travel-type-music', + }, + { + option: 'nature', + icon: , + title: 'Nature', + cls: 'col col-6 travel-type-nature', + }, + { + option: 'nightlife', + icon: , + title: 'Nightlife', + cls: 'col col-6 travel-type-nightlife', + }, + { + option: 'tours', + icon: , + title: 'Tours', + cls: 'col col-6 travel-type-tours', + }, + { + option: 'water', + icon: , + title: 'Water', + cls: 'col col-6 travel-type-water', + }, + ].map(b => ( +
  • +
    + + {b.icon} + {b.title} + +
    +
    + + {b.icon} + {b.title} + +
    +
    • + ))} +
+ + {/* */} +
+
+
city
+ +
+
+ ); +} diff --git a/templates/travel/components/filters/PriceRange.js b/templates/travel/components/filters/PriceRange.js new file mode 100644 index 000000000..6195232f7 --- /dev/null +++ b/templates/travel/components/filters/PriceRange.js @@ -0,0 +1,43 @@ +import TravelInputRangeSvg from '../svg/TravelInputRangeSvg'; + +export default function PriceRange(props) { + return ( + <> +
+ $800+ +
+ {/* */} + +
+ +
+ + ); +} diff --git a/templates/travel/components/footer/Footer.js b/templates/travel/components/footer/Footer.js new file mode 100644 index 000000000..004c6bc25 --- /dev/null +++ b/templates/travel/components/footer/Footer.js @@ -0,0 +1,91 @@ +import HomeIconSvg from '../svg/HomeIconSvg'; + +export default function Footer(props) { + return ( + + ); +} diff --git a/templates/travel/components/TravelHero.js b/templates/travel/components/hero/Hero.js similarity index 97% rename from templates/travel/components/TravelHero.js rename to templates/travel/components/hero/Hero.js index a23b7ad33..4961c250a 100644 --- a/templates/travel/components/TravelHero.js +++ b/templates/travel/components/hero/Hero.js @@ -1,7 +1,7 @@ -import TravelHeroSearch from '../components/TravelHeroSearch'; +import HeroSearch from './HeroSearch'; import {AmpImg} from '@ampproject/toolbox-next-amp'; -export default function TravelHero(props) { +export default function Hero(props) { return ( <>