Use svg as component for assets instead of png file.

sergiop · Dec 27, 2020 · f5254f6 · f5254f6
1 parent ccf99a9
commit f5254f6
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-giphy-searchbox",
- "version": "1.5.3",
+ "version": "1.5.4",
  "description": "React Giphy Searchbox",
  "main": "lib/index.js",
  "module": "es/index.js",

diff --git a/src/assets/PoweredByGiphyLogo.js b/src/assets/PoweredByGiphyLogo.js
@@ -0,0 +1,43 @@
+import React from 'react'
+
+const PoweredByGiphyLogo = () => (
+ <svg
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ x="0px"
+ y="0px"
+ viewBox="0 0 581.5 67.1"
+ xmlSpace="preserve"
+ >
+ <path
+ fill="#898989"
+ d="M327.2,26.7h29.7v8c0,5.7,0,11.4,0,17.1c0,1.4-0.4,2.5-1.2,3.6c-2.3,3.2-5.3,5.4-8.8,6.9
+ c-10.6,4.2-21.3,4.5-31.9,0.2c-7.5-3-12.6-8.6-15.3-16.2c-3.3-9.3-3.1-18.6,1.1-27.7c3.9-8.3,10.5-13.5,19.2-16
+ c6.1-1.7,12.4-1.8,18.7-0.7c5.6,1,11.6,4.5,15.9,9.1c-1.6,1.6-3.2,3.2-4.8,4.9c-1.6,1.7-3.2,3.4-4.8,5.1c-0.7-0.5-1.2-0.9-1.6-1.2
+ c-5.2-3.9-11-5-17.3-3.7c-5,1.1-8.6,4.2-10.3,9c-1.9,5.4-2,10.9,0.2,16.3c2.3,5.6,6.6,8.6,12.6,9.2c3.6,0.3,7.1,0,10.5-1.3
+ c1.1-0.4,2.2-1,3.3-1.5v-7.9h-15.2C327.1,35.6,327.2,31.2,327.2,26.7 M453.6,63.9h17.1V41.3h21.9v22.6h16.9c0-20.3,0-40.4,0-60.6
+ h-17c-0.1,7.7,0.1,15.3-0.1,22.8h-21.8V3.3h-17.1V63.9z M411,63.8V47.5c4,0,8,0.1,12,0c2.7-0.1,5.3-0.4,7.9-1
+ c5.1-1.2,9.4-3.7,12.5-8c3-4.2,4.1-8.9,3.9-13.9c-0.2-6.5-2.5-12-7.6-16.1c-4.4-3.6-9.6-5.1-15.1-5.2h-31.1v60.6H411 M410.7,17.9
+ c0.6,0,8.3,0,12.1,0c5.5,0,7.9,4.7,7.2,9c-0.6,3.6-2.8,5.9-6.3,6.1c-4.2,0.2-8.5,0-13,0V17.9z M546.8,23.9
+ c-4.3-7.2-8.4-13.9-12.5-20.7h-19.8c7.9,12.4,15.7,24.4,23.5,36.6v23.9h17.1V39.7c8-11.8,24.4-36.2,24.6-36.5h-0.6h-19.2
+ C555.6,10,551.3,16.8,546.8,23.9 M382.4,63.9c0-20.4,0-40.5,0-60.8h-17.1v60.8H382.4"
+ />
+ <path
+ fill="#C1C1C1"
+ d="M1.7,19.3H15c6.3,0,9.9,4.1,9.9,8.9c0,4.8-3.6,8.9-9.9,8.9H7v10.6H1.7V19.3z M14.2,23.7H7v9.1h7.2
+ c3,0,5.2-1.8,5.2-4.5S17.2,23.7,14.2,23.7z M43.3,18.8c9.1,0,15.4,6.2,15.4,14.7c0,8.5-6.4,14.7-15.4,14.7
+ c-9.1,0-15.4-6.2-15.4-14.7C27.9,25,34.2,18.8,43.3,18.8z M43.3,23.2c-6.1,0-10,4.4-10,10.3c0,5.8,3.9,10.3,10,10.3
+ c6.1,0,10-4.4,10-10.3C53.3,27.6,49.4,23.2,43.3,23.2z M80.1,26.7l-5.8,21h-5.7L60,19.3h5.9l5.9,21.9L78,19.3h4.2l6.2,21.9l5.8-21.9
+ h5.9l-8.6,28.5H86L80.1,26.7z M103.8,19.3h20.7v4.4h-15.4v7.4h15.1v4.4h-15.1v7.9h15.4v4.4h-20.7V19.3z M140.4,37.1h-5.2v10.6h-5.3
+ V19.3h13.3c6,0,9.9,3.7,9.9,8.9c0,5.1-3.5,7.8-7.2,8.4l7.4,11.2h-6.1L140.4,37.1z M142.4,23.7h-7.2v9.1h7.2c3,0,5.2-1.8,5.2-4.5
+ S145.4,23.7,142.4,23.7z M158.3,19.3H179v4.4h-15.4v7.4h15.1v4.4h-15.1v7.9H179v4.4h-20.7V19.3z M184.4,19.3h11.2
+ c9.4,0,15.8,5.9,15.8,14.3c0,8.4-6.4,14.2-15.8,14.2h-11.2V19.3z M195.6,43.4c6.6,0,10.4-4.4,10.4-9.8c0-5.5-3.6-9.9-10.4-9.9h-5.9
+ v19.7H195.6z M228.2,19.3H243c5.5,0,8.6,3.2,8.6,7.3c0,3.6-2.4,6-5.2,6.5c3.2,0.5,5.8,3.5,5.8,7c0,4.4-3.1,7.7-8.8,7.7h-15.3V19.3z
+ M241.9,31.1c2.7,0,4.3-1.5,4.3-3.7s-1.5-3.7-4.3-3.7h-8.5v7.4H241.9z M242.2,43.4c2.9,0,4.6-1.5,4.6-4c0-2.1-1.6-3.9-4.6-3.9h-8.7
+ v7.9H242.2z M264.7,35.9L253,19.3h6.1l8.3,12.2l8.2-12.2h6.1L270,35.9v11.8h-5.3V35.9z"
+ />
+ </svg>
+)
+
+export default PoweredByGiphyLogo
diff --git a/src/assets/SpinnerIcon.js b/src/assets/SpinnerIcon.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const SpinnerIcon = () => (
+ <svg
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ x="0px"
+ y="0px"
+ viewBox="0 0 100 100"
+ xmlSpace="preserve"
+ >
+ <path
+ fill="#939393"
+ className="st0"
+ d="M50,99c-6.6,0-13-1.3-19-3.8c-2-0.9-3-3.2-2.1-5.2c0.9-2,3.2-3,5.2-2.1c5,2.1,10.4,3.2,15.9,3.2
+ c22.6,0,41-18.4,41-41S72.6,9,50,9c-2.2,0-4-1.8-4-4s1.8-4,4-4c27,0,49,22,49,49S77,99,50,99z"
+ />
+ </svg>
+)
+
+export default SpinnerIcon
diff --git a/src/assets/poweredByGiphy.png b/src/assets/poweredByGiphy.png
diff --git a/src/assets/spinner.svg b/src/assets/spinner.svg
diff --git a/src/components/PoweredByGiphy/PoweredByGiphy.js b/src/components/PoweredByGiphy/PoweredByGiphy.js
@@ -2,17 +2,22 @@
 import React from 'react'
 import { useStyle } from '../../style'
 import { styles } from './poweredByGiphyStyles'
+import PoweredByGiphyLogo from '../../assets/PoweredByGiphyLogo'
 
 type Props = {
- image: string,
+ image: ?string,
 }
 
 const PoweredByGiphy = ({ image }: Props) => {
  useStyle('PoweredByGiphy', styles)
 
  return (
  <div className="reactGiphySearchbox-poweredByGiphy">
- <img src={image} alt="Powered by Giphy" data-testid="PoweredByGiphy" />
+ {image ? (
+ <img src={image} alt="Powered by Giphy" data-testid="PoweredByGiphy" />
+ ) : (
+ <PoweredByGiphyLogo />
+ )}
  </div>
  )
 }

diff --git a/src/components/PoweredByGiphy/poweredByGiphyStyles.js b/src/components/PoweredByGiphy/poweredByGiphyStyles.js
@@ -4,10 +4,11 @@ import { css } from '../../style'
 export const styles = css`
  .reactGiphySearchbox-poweredByGiphy {
  padding-top: 10px;
+ width: 100px;
  }
 
  .reactGiphySearchbox-poweredByGiphy img {
  display: block;
- width: 100px;
+ width: 100%;
  }
 `
diff --git a/src/components/Spinner/Spinner.js b/src/components/Spinner/Spinner.js
@@ -2,11 +2,12 @@
 import React from 'react'
 import { useStyle } from '../../style'
 import { styles } from './spinnerStyles'
+import SpinnerIcon from '../../assets/SpinnerIcon'
 
 type Props = {
  show: boolean,
  message: string,
- image: string,
+ image: ?string,
 }
 
 const Spinner = ({ show, message, image }: Props) => {
@@ -15,11 +16,9 @@ const Spinner = ({ show, message, image }: Props) => {
  return (
  show && (
  <div role="status" className="reactGiphySearchbox-spinnerWrapper">
- <div
- className="reactGiphySearchbox-spinner"
- style={{ backgroundImage: `url(${image})` }}
- data-testid="Spinner"
- />
+ <div className="reactGiphySearchbox-spinner" data-testid="Spinner">
+ {image ? <img src={image} alt="Loading icon" /> : <SpinnerIcon />}
+ </div>
  <div
  className="reactGiphySearchbox-spinnerText"
  data-testid="SpinnerText"

diff --git a/src/components/Spinner/Spinner.module.css b/src/components/Spinner/Spinner.module.css
diff --git a/src/components/Spinner/Spinner.spec.js b/src/components/Spinner/Spinner.spec.js
@@ -14,9 +14,6 @@ describe('Spinner', () => {
  test('render the spinner', () => {
  const { getByTestId } = buildSubject()
 
- expect(getByTestId('Spinner').getAttribute('style')).toBe(
- `background-image: url(${defaults.image});`,
- )
  expect(getByTestId('SpinnerText')).toHaveTextContent(defaults.message)
  })
 

diff --git a/src/components/Spinner/spinnerStyles.js b/src/components/Spinner/spinnerStyles.js
@@ -16,6 +16,11 @@ export const styles = css`
  animation: spin 500ms linear infinite;
  }
 
+ .reactGiphySearchbox-spinner img {
+ display: block;
+ width: 100%;
+ }
+
  @keyframes spin {
  0% {
  transform: rotate(0deg);

diff --git a/src/index.js b/src/index.js
@@ -13,8 +13,6 @@ import useSearchForm from './hooks/useSearchForm'
 import useDebounce from './hooks/useDebounce'
 import useMedia from './hooks/useMedia'
 import useApi from './hooks/useApi'
-import assetsSpinner from './assets/spinner.svg'
-import assetsPoweredByGiphy from './assets/poweredByGiphy.png'
 import {
  getComponentWrapperWidth,
  getDefaultMasonryConfig,
@@ -42,15 +40,15 @@ type Props = {
  library: 'gifs' | 'stickers',
  listItemClassName: string,
  listWrapperClassName: string,
- loadingImage: string,
+ loadingImage: ?string,
  masonryConfig: Array<MasonryConfig>,
  messageError: string,
  messageLoading: string,
  messageNoMatches: string,
  onSearch: Function,
  onSelect: Function,
  poweredByGiphy: boolean,
- poweredByGiphyImage: string,
+ poweredByGiphyImage: ?string,
  rating: string,
  searchFormClassName: string,
  searchPlaceholder: string,
@@ -194,14 +192,14 @@ ReactGiphySearchBox.defaultProps = {
  library: 'gifs',
  listItemClassName: '',
  listWrapperClassName: '',
- loadingImage: assetsSpinner,
+ loadingImage: undefined,
  masonryConfig: [{ columns: 2, imageWidth: 120, gutter: 5 }],
  messageError: 'Oops! Something went wrong. Please, try again.',
  messageLoading: 'Loading...',
  messageNoMatches: 'No matches found.',
  onSearch: () => {},
  poweredByGiphy: true,
- poweredByGiphyImage: assetsPoweredByGiphy,
+ poweredByGiphyImage: undefined,
  rating: 'g',
  searchFormClassName: '',
  searchPlaceholder: 'Search for GIFs',

diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -5,8 +5,6 @@ import giphyTrendingGetSuccess from './fixtures/giphyTrendingGetSuccess.json'
 import giphyTrendingGet404Error from './fixtures/giphyTrendingGet404Error.json'
 import giphySearchGetSuccessEmpty from './fixtures/giphySearchGetSuccessEmpty.json'
 import giphySearchGetSuccess from './fixtures/giphySearchGetSuccess.json'
-import assetsSpinner from '../src/assets/spinner.svg'
-import assetsPoweredByGiphy from '../src/assets/poweredByGiphy.png'
 
 // TO-DO: Test the loading more (infinite scrolling)
 
@@ -22,15 +20,13 @@ describe('ReactGiphySearchbox', () => {
  imageRenditionName: 'fixed_width_downsampled',
  listItemClassName: '',
  listWrapperClassName: '',
- loadingImage: assetsSpinner,
  masonryConfig: [{ columns: 2, imageWidth: 120, gutter: 5 }],
  messageError: 'Oops! Something went wrong. Please, try again.',
  messageLoading: 'Loading...',
  messageNoMatches: 'No matches found.',
  onSearch,
  onSelect,
  poweredByGiphy: true,
- poweredByGiphyImage: assetsPoweredByGiphy,
  rating: 'g',
  searchFormClassName: '',
  searchPlaceholder: 'Search for GIFs',