From 8048d99ef27887a9e8b470075c0950de7a0558f2 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 15 Aug 2017 14:21:35 +0300 Subject: [PATCH] Remove wireframe class (design has changed from original idea)) --- .../ListingCardSmall/ListingCardSmall.css | 53 ----------- .../ListingCardSmall/ListingCardSmall.js | 87 ------------------- .../ListingCardSmall/ListingCardSmall.test.js | 19 ---- .../ListingCardSmall.test.js.snap | 34 -------- .../ListingCardSmall/images/noImageIcon.svg | 1 - src/components/index.js | 2 - 6 files changed, 196 deletions(-) delete mode 100644 src/components/ListingCardSmall/ListingCardSmall.css delete mode 100644 src/components/ListingCardSmall/ListingCardSmall.js delete mode 100644 src/components/ListingCardSmall/ListingCardSmall.test.js delete mode 100644 src/components/ListingCardSmall/__snapshots__/ListingCardSmall.test.js.snap delete mode 100644 src/components/ListingCardSmall/images/noImageIcon.svg diff --git a/src/components/ListingCardSmall/ListingCardSmall.css b/src/components/ListingCardSmall/ListingCardSmall.css deleted file mode 100644 index d73bef92..00000000 --- a/src/components/ListingCardSmall/ListingCardSmall.css +++ /dev/null @@ -1,53 +0,0 @@ -.listing { - width: 130px; - display: flex; - flex-direction: column; - border-radius: 4px; - margin-right: 1rem; - flex-basis: 130px; - flex-shrink: 0; -} - -.threeToTwoWrapper { - display: block; - position: relative; - width: 100%; -} - -/* Firefox doesn't support image aspect ratio inside flexbox */ -.aspectWrapper { - padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */ -} - -.noImageContainer, -.thumbnail { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; -} -.noImageContainer, -.noImageWrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #eee; -} - -.noImageText { - color: #666; -} - -.info { - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 0.5rem; - font-size: 0.8rem; - border: solid 1px #ccc; -} diff --git a/src/components/ListingCardSmall/ListingCardSmall.js b/src/components/ListingCardSmall/ListingCardSmall.js deleted file mode 100644 index d04c9752..00000000 --- a/src/components/ListingCardSmall/ListingCardSmall.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import { intlShape, injectIntl } from 'react-intl'; -import { NamedLink } from '../../components'; -import * as propTypes from '../../util/propTypes'; -import { convertMoneyToNumber } from '../../util/currency'; -import css from './ListingCardSmall.css'; -import noImageIcon from './images/noImageIcon.svg'; - -const priceData = (price, currencyConfig, intl) => { - if (price && price.currency === currencyConfig.currency) { - const priceAsNumber = convertMoneyToNumber(price, currencyConfig.subUnitDivisor); - const formattedPrice = intl.formatNumber(priceAsNumber, currencyConfig); - return { formattedPrice, priceTitle: formattedPrice }; - } else if (price) { - return { - formattedPrice: `(${price.currency})`, - priceTitle: `Unsupported currency (${price.currency})`, - }; - } - return {}; -}; - -export const ListingCardSmallComponent = props => { - const { currencyConfig, intl, listing } = props; - const { price = null, title = '' } = listing.attributes || {}; - const id = listing.id.uuid; - const slug = encodeURIComponent(title.split(' ').join('-')); - - // TODO: these are not yet present in the API data, figure out what - // to do with them - // TODO: Currently, API can return currencies that are not supported by starter app. - const { formattedPrice, priceTitle } = priceData(price, currencyConfig, intl); - - const images = listing.images - ? listing.images.map(i => ({ id: i.id, sizes: i.attributes.sizes })) - : []; - const mainImage = images.length > 0 ? images[0] : null; - const imageURL = mainImage ? mainImage.sizes.find(i => i.name === 'landscape-crop').url : null; - const image2XURL = mainImage - ? mainImage.sizes.find(i => i.name === 'landscape-crop2x').url - : null; - const higherRes = image2XURL ? { srcSet: `${image2XURL} 2x` } : null; - - // TODO: svg should have own loading strategy - // Now noImageIcon is imported with default configuration (gives url) - /* eslint-disable jsx-a11y/img-redundant-alt */ - const noListingImage = ( -
-
- No image -
No image
-
-
- ); - /* eslint-enable jsx-a11y/img-redundant-alt */ - const listingImage = ( - Listing Title - ); - - const imageOrPlaceholder = imageURL ? listingImage : noListingImage; - - return ( -
-
-
- {imageOrPlaceholder} -
-
-
- - {title} - -
- {formattedPrice} -
-
-
- ); -}; - -ListingCardSmallComponent.propTypes = { - currencyConfig: propTypes.currencyConfig.isRequired, - intl: intlShape.isRequired, - listing: propTypes.listing.isRequired, -}; - -export default injectIntl(ListingCardSmallComponent); diff --git a/src/components/ListingCardSmall/ListingCardSmall.test.js b/src/components/ListingCardSmall/ListingCardSmall.test.js deleted file mode 100644 index 6ea5dbf6..00000000 --- a/src/components/ListingCardSmall/ListingCardSmall.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { renderShallow } from '../../util/test-helpers'; -import { createUser, createListing, currencyConfig, fakeIntl } from '../../util/test-data'; -import { ListingCardSmallComponent } from './ListingCardSmall'; - -describe('ListingCardSmall', () => { - it('matches snapshot', () => { - const author = createUser('user1'); - const listing = { ...createListing('listing1'), author }; - const tree = renderShallow( - - ); - expect(tree).toMatchSnapshot(); - }); -}); diff --git a/src/components/ListingCardSmall/__snapshots__/ListingCardSmall.test.js.snap b/src/components/ListingCardSmall/__snapshots__/ListingCardSmall.test.js.snap deleted file mode 100644 index 540c6417..00000000 --- a/src/components/ListingCardSmall/__snapshots__/ListingCardSmall.test.js.snap +++ /dev/null @@ -1,34 +0,0 @@ -exports[`ListingCardSmall matches snapshot 1`] = ` -
-
-
-
-
- No image -
- No image -
-
-
-
-
-
- - listing1 title - -
- 55 -
-
-
-`; diff --git a/src/components/ListingCardSmall/images/noImageIcon.svg b/src/components/ListingCardSmall/images/noImageIcon.svg deleted file mode 100644 index c168d5cd..00000000 --- a/src/components/ListingCardSmall/images/noImageIcon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/index.js b/src/components/index.js index 61168339..15939a89 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -17,7 +17,6 @@ import ExternalLink from './ExternalLink/ExternalLink'; import FilterPanel from './FilterPanel/FilterPanel'; import HeroSection from './HeroSection/HeroSection'; import ListingCard from './ListingCard/ListingCard'; -import ListingCardSmall from './ListingCardSmall/ListingCardSmall'; import LocationAutocompleteInput, { LocationAutocompleteInputField, } from './LocationAutocompleteInput/LocationAutocompleteInput'; @@ -79,7 +78,6 @@ export { HeroSection, InlineTextButton, ListingCard, - ListingCardSmall, LocationAutocompleteInput, LocationAutocompleteInputField, Map,