From 10ab64f767b557a1a24dd4b178d1905723cf3a4c Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Tue, 13 Feb 2018 02:35:02 +0300 Subject: [PATCH] Fix examples thumbnails display --- docs/src/components/Grid/GridItem/index.js | 6 +-- docs/src/pages/examples/_examples.yml | 46 +++++++++++----------- docs/src/pages/examples/index.jsx | 10 ++++- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/docs/src/components/Grid/GridItem/index.js b/docs/src/components/Grid/GridItem/index.js index 71f14c0aa23..c7d9092591e 100644 --- a/docs/src/components/Grid/GridItem/index.js +++ b/docs/src/components/Grid/GridItem/index.js @@ -8,9 +8,9 @@ const linkProps = { className: 'link', }; -const GridItem = ({ title, description, source, demo, thumbnail }) => ( +const GridItem = ({ title, description, source, demo, thumbnailSrc }) => (
-
+
@@ -34,7 +34,7 @@ const GridItem = ({ title, description, source, demo, thumbnail }) => ( GridItem.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, - thumbnail: PropTypes.string.isRequired, + thumbnailSrc: PropTypes.string.isRequired, source: PropTypes.string, demo: PropTypes.string, }; diff --git a/docs/src/pages/examples/_examples.yml b/docs/src/pages/examples/_examples.yml index be65a08cf00..b7adb153de4 100644 --- a/docs/src/pages/examples/_examples.yml +++ b/docs/src/pages/examples/_examples.yml @@ -1,146 +1,146 @@ carbon: - thumbnail: ./thumbnails/carbon.png + thumbnail: carbon.png title: Carbon Components description: IBM's Carbon Design System implemented in React. source: https://github.com/carbon-design-system/carbon-components-react demo: http://react.carbondesignsystem.com site: http://carbondesignsystem.com airbnb: - thumbnail: ./thumbnails/airbnb.jpg + thumbnail: airbnb.jpg title: Airbnb Dates description: An internationalizable, mobile-friendly datepicker library for the web. source: https://github.com/airbnb/react-dates demo: http://airbnb.io/react-dates/ site: http://airbnb.com lonelyplanet: - thumbnail: ./thumbnails/lonelyplanet.jpg + thumbnail: lonelyplanet.jpg title: Lonely Planet description: All the tools you need to build the Lonely Planet UI experience. source: https://github.com/lonelyplanet/backpack-ui demo: https://lonelyplanet.github.io/backpack-ui/ site: https://www.lonelyplanet.com/ atlassian: - thumbnail: ./thumbnails/atlassian.png + thumbnail: atlassian.png title: Atlassian AtlasKit description: Atlassian's official UI library. demo: https://atlaskit.atlassian.com/components site: https://atlaskit.atlassian.com/ wix: - thumbnail: ./thumbnails/wix.png + thumbnail: wix.png title: Wix Style React description: Components that conform to Wix Style source: https://github.com/wix/wix-style-react demo: https://wix.github.io/wix-style-react/ site: https://wix.com buffer: - thumbnail: ./thumbnails/buffer.jpg + thumbnail: buffer.jpg title: Buffer Components description: A collection of Buffer UI React components. source: https://github.com/bufferapp/buffer-components demo: https://bufferapp.github.io/buffer-components/ site: https://buffer.com algolia: - thumbnail: ./thumbnails/algolia.jpg + thumbnail: algolia.jpg title: Algolia InstantSearch description: Lightning-fast, hyper-configurable search. source: https://github.com/algolia/react-instantsearch/ demo: https://community.algolia.com/react-instantsearch/storybook/ rebass: - thumbnail: ./thumbnails/rebass.png + thumbnail: rebass.png title: Rebass description: Functional React UI component library demo: http://jxnblk.com/rebass/stories/ source: https://github.com/jxnblk/rebass site: http://jxnblk.com/rebass coursera: - thumbnail: ./thumbnails/coursera-ui.png + thumbnail: coursera-ui.png title: Coursera description: Coursera UI component library demo: https://building.coursera.org/coursera-ui artsy: - thumbnail: ./thumbnails/artsy.png + thumbnail: artsy.png title: Artsy Force description: Artsy's "Force" component library demo: https://artsy.github.io/reaction/ source: https://github.com/artsy/reaction-force site: https://artsy.net necolas: - thumbnail: ./thumbnails/reactnativeweb.jpg + thumbnail: reactnativeweb.jpg title: React Native Web description: Storybook demo for React Native Web. source: https://github.com/necolas/react-native-web demo: https://necolas.github.io/react-native-web/storybook/ griddle: - thumbnail: ./thumbnails/griddle.jpg + thumbnail: griddle.jpg title: Griddle description: An ultra customizable datagrid component for React. source: https://github.com/GriddleGriddle/Griddle demo: https://griddlegriddle.github.io/Griddle/examples/controlling-griddle/ site: https://griddlegriddle.github.io/Griddle/ tachyons: - thumbnail: ./thumbnails/tachyons.png + thumbnail: tachyons.png title: Tachyons Components description: A searchable directory of Tachyons Components source: https://github.com/blairanderson/tachyonstemplates demo: https://www.tachyonstemplates.com/components/ appbase: - thumbnail: ./thumbnails/appbase.jpg + thumbnail: appbase.jpg title: Appbase Maps description: A storybook playground for ReactiveMaps and ReactiveSearch. source: https://github.com/appbaseio/playground demo: https://opensource.appbase.io/playground/ site: https://appbase.io quran: - thumbnail: ./thumbnails/quran.jpg + thumbnail: quran.jpg title: Quran.com description: Component library for Quran.com, Quranicaudio.com and Salah.com. source: https://github.com/quran/common-components demo: https://quran.github.io/common-components/ site: https://quran.com/ terraeclipse: - thumbnail: ./thumbnails/terraeclipse.jpg + thumbnail: terraeclipse.jpg title: TerraEclipse description: React components for TerraEclipse, a political technology and strategy firm. source: https://github.com/TerraEclipse/react-stack demo: https://terraeclipse.github.io/react-stack/ timeline: - thumbnail: ./thumbnails/timeline.jpg + thumbnail: timeline.jpg title: React Event Timeline description: Event timeline component. source: https://github.com/rcdexta/react-event-timeline demo: https://rcdexta.github.io/react-event-timeline/ semanticui: - thumbnail: ./thumbnails/semanticui.png + thumbnail: semanticui.png title: Semantic-UI description: Storybook for Semantic-UI React components source: https://github.com/white-rabbit-japan/Semantic-UI-React-Storybook demo: https://white-rabbit-japan.github.io/Semantic-UI-React-Storybook/ hackoregon: - thumbnail: ./thumbnails/hackoregon.png + thumbnail: hackoregon.png title: Hack Oregon description: Official component library and storybook for Hack Oregon. source: https://github.com/hackoregon/component-library demo: https://hackoregon.github.io/component-library/ todomvc: - thumbnail: ./thumbnails/todomvc.png + thumbnail: todomvc.png title: TodoMVC with Specs description: Todo app Storybook with built-in unit tests. source: https://github.com/thorjarhun/react-storybook-todolist demo: https://thorjarhun.github.io/react-storybook-todolist/ react-svg-pan-zoom: - thumbnail: ./thumbnails/react-svg-pan-zoom.png + thumbnail: react-svg-pan-zoom.png title: React SVG Pan Zoom description: A React component that adds pan and zoom features to SVG source: https://github.com/chrvadala/react-svg-pan-zoom demo: https://chrvadala.github.io/react-svg-pan-zoom/ fyndiq-ui: - thumbnail: ./thumbnails/fyndiq.jpg + thumbnail: fyndiq.jpg title: Fyndiq description: Fyndiq UI Component library source: https://github.com/fyndiq/fyndiq-ui demo: https://fyndiq.github.io/fyndiq-ui/ gumgum: - thumbnail: ./thumbnails/gumgum.png + thumbnail: gumgum.png title: GumGum description: GumGum (Computer Vision Company) Component library demo: https://storybook.gumgum.com diff --git a/docs/src/pages/examples/index.jsx b/docs/src/pages/examples/index.jsx index 9d5c84ba8ac..16e02815164 100644 --- a/docs/src/pages/examples/index.jsx +++ b/docs/src/pages/examples/index.jsx @@ -2,6 +2,12 @@ import React from 'react'; import { values } from 'lodash'; import Examples from '../../components/Grid/Examples'; -import data from './_examples.yml'; +import examples from './_examples.yml'; -export default () => ; +const examplesArray = values(examples).map(example => ({ + ...example, + // eslint-disable-next-line import/no-dynamic-require, global-require + thumbnailSrc: require(`./thumbnails/${example.thumbnail}`), +})); + +export default () => ;