fix(svg/filter): add baseurl prop (danilowoz#144)

* fix(svg/filter): add baseurl prop

* test(baseurl): add tests

* docs(prop): baseurl

Author: danilowoz

README.md

@@ -74,6 +74,10 @@ Defaults to `true`. Opt-out of animations with `false`
 
 Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
 
+**`baseUrl? string`**
+
+Required if you're using `<base url="/" />` in your `<head/>`. Defaults to an empty string. This prop is commom used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the svg attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
+
 **`speed?: number`**
 
 Defaults to `2`. Animation speed in seconds.

docs/props.mdx

@@ -22,6 +22,14 @@ Defaults to `Loading interface...`. It's used to describe what element it is. Us
   <Facebook ariaLabel="my custom loader" />
 </Playground>
 
+## **`baseUrl? string`**
+
+Required if you're using `<base url="/" />` in your `<head/>`. Defaults to an empty string. This prop is commom used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the svg attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
+
+<Playground>
+  <Facebook baseUrl="/mypage" />
+</Playground>
+
 ## `speed?: number`
 
 Defaults to `2`. Animation speed in seconds.

src/Holder.tsx

@@ -6,6 +6,7 @@ import { IContentLoaderProps } from './interface'
 export const defaultProps: IContentLoaderProps = {
   animate: true,
   ariaLabel: 'Loading interface...',
+  baseUrl: '',
   gradientRatio: 2,
   height: 130,
   interval: 0.25,

src/Svg.tsx

@@ -10,6 +10,7 @@ export default ({
   style,
   width,
   height,
+  baseUrl,
   gradientRatio,
   animate,
   ariaLabel,
@@ -45,8 +46,8 @@ export default ({
         y="0"
         width={width}
         height={height}
-        clipPath={`url(#${idClip})`}
-        style={{ fill: `url(#${idGradient})` }}
+        clipPath={`url(${baseUrl}#${idClip})`}
+        style={{ fill: `url(${baseUrl}#${idGradient})` }}
       />
 
       <defs>

src/__tests__/Holder.tests.tsx

@@ -30,21 +30,22 @@ describe('Holder', () => {
     const withPropsComponent = ShallowRenderer.createRenderer()
     withPropsComponent.render(
       <ContentLoader
-        rtl
-        speed={10}
-        interval={0.5}
-        width={200}
+        animate={false}
+        ariaLabel="My custom loading title"
+        baseUrl="/mypage"
+        className="random-className"
         gradientRatio={0.5}
         height={200}
-        animate={false}
+        interval={0.5}
+        preserveAspectRatio="xMaxYMax meet"
         primaryColor="#000"
-        secondaryColor="#fff"
         primaryOpacity={0.06}
+        rtl
+        secondaryColor="#fff"
         secondaryOpacity={0.12}
-        preserveAspectRatio="xMaxYMax meet"
-        className="random-className"
+        speed={10}
         style={{ marginBottom: '10px' }}
-        ariaLabel="My custom loading title"
+        width={200}
       />
     )
 
@@ -174,5 +175,14 @@ describe('Holder', () => {
       expect(typeof propsFromFullfield.ariaLabel).toBe('string')
       expect(propsFromFullfield.ariaLabel).toBe('My custom loading title')
     })
+
+    it("`baseUrl` is a string and it's used", () => {
+      // defaultProps
+      expect(typeof propsFromEmpty.baseUrl).toBe('string')
+      expect(propsFromEmpty.baseUrl).toBe('')
+      // custom props
+      expect(typeof propsFromFullfield.baseUrl).toBe('string')
+      expect(propsFromFullfield.baseUrl).toBe('/mypage')
+    })
   })
 })

src/__tests__/Svg.tests.tsx

@@ -23,6 +23,22 @@ describe('Svg', () => {
     title: wrapper.findByType('title'),
   }
 
+  it('baseUrl is used correctly', () => {
+    const baseUrl = '/page-path'
+    const wrapperWithBaseUrl = renderer.create(<Svg baseUrl={baseUrl} />).root
+
+    const clipPath = wrapperWithBaseUrl.findByType('clipPath')
+    const linearGradient = wrapperWithBaseUrl.findByType('linearGradient')
+    const rectClipPath = wrapperWithBaseUrl.find(predicateRectClipPath)
+
+    expect(rectClipPath.props.clipPath).toBe(
+      `url(${baseUrl}#${clipPath.props.id})`
+    )
+    expect(rectClipPath.props.style.fill).toBe(
+      `url(${baseUrl}#${linearGradient.props.id})`
+    )
+  })
+
   describe('it has basic elements necessary to work ', () => {
     it('has a `rect` with `clipPath`', () => {
       const { allRectClipPath } = partsOfComponent

src/interface.ts

@@ -2,6 +2,7 @@ export interface IContentLoaderProps {
   animate?: boolean
   ariaLabel?: string | boolean
   children?: React.ReactNode
+  baseUrl?: string
   className?: string
   height?: number
   preserveAspectRatio?: