Merge 3e53a55 into 1df0984

rpearce · Jan 12, 2020 · b32e1d2 · b32e1d2
2 parents 1df0984 + 3e53a55
commit b32e1d2
Show file tree

Hide file tree

Showing 35 changed files with 182 additions and 70 deletions.
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.739c65daaf450786da3a.bundle.js"></script><script src="vendors~main.739c65daaf450786da3a.bundle.js"></script><script src="main.739c65daaf450786da3a.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.d49e4d37d2280097ade8.bundle.js"></script><script src="vendors~main.d49e4d37d2280097ade8.bundle.js"></script><script src="main.d49e4d37d2280097ade8.bundle.js"></script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -16,4 +16,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.1082140af9db1185c9a2.bundle.js"></script><script src="vendors~main.e5db3ef6f0e9be570a7d.bundle.js"></script><script src="main.992131baecd159ac1b1d.bundle.js"></script></body></html>
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.1082140af9db1185c9a2.bundle.js"></script><script src="vendors~main.b6f6efdcb24432c36e3f.bundle.js"></script><script src="main.992131baecd159ac1b1d.bundle.js"></script></body></html>
diff --git a/docs/main.739c65daaf450786da3a.bundle.js b/docs/main.739c65daaf450786da3a.bundle.js
diff --git a/docs/main.739c65daaf450786da3a.bundle.js.map b/docs/main.739c65daaf450786da3a.bundle.js.map
diff --git a/docs/main.d49e4d37d2280097ade8.bundle.js b/docs/main.d49e4d37d2280097ade8.bundle.js
diff --git a/docs/main.d49e4d37d2280097ade8.bundle.js.map b/docs/main.d49e4d37d2280097ade8.bundle.js.map
diff --git a/docs/runtime~main.739c65daaf450786da3a.bundle.js.map b/docs/runtime~main.739c65daaf450786da3a.bundle.js.map
diff --git a/...ntime~main.739c65daaf450786da3a.bundle.js → ...ntime~main.d49e4d37d2280097ade8.bundle.js b/...ntime~main.739c65daaf450786da3a.bundle.js → ...ntime~main.d49e4d37d2280097ade8.bundle.js
diff --git a/docs/runtime~main.d49e4d37d2280097ade8.bundle.js.map b/docs/runtime~main.d49e4d37d2280097ade8.bundle.js.map
diff --git a/docs/static/media/glenorchy-lagoon.af1399d2.jpg b/docs/static/media/glenorchy-lagoon.af1399d2.jpg
diff --git a/docs/static/media/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash-smaller.58f46807.jpg b/docs/static/media/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash-smaller.58f46807.jpg
diff --git a/docs/static/media/pablo-heimplatz-PSF2RhUBORs-unsplash-smaller.11ef41d7.jpg b/docs/static/media/pablo-heimplatz-PSF2RhUBORs-unsplash-smaller.11ef41d7.jpg
diff --git a/docs/static/media/petr-vysohlid-9fqwGqGLUxc-unsplash-smaller.c5bcf70a.jpg b/docs/static/media/petr-vysohlid-9fqwGqGLUxc-unsplash-smaller.c5bcf70a.jpg
diff --git a/docs/static/media/roell-de-ram-2DM7eOR5iyc-unsplash-smaller.e5a0a3dc.jpg b/docs/static/media/roell-de-ram-2DM7eOR5iyc-unsplash-smaller.e5a0a3dc.jpg
diff --git a/docs/static/media/tobias-keller-73F4pKoUkM0-unsplash-smaller.fe3f4d81.jpg b/docs/static/media/tobias-keller-73F4pKoUkM0-unsplash-smaller.fe3f4d81.jpg
diff --git a/docs/vendors~main.739c65daaf450786da3a.bundle.js b/docs/vendors~main.739c65daaf450786da3a.bundle.js
diff --git a/docs/vendors~main.739c65daaf450786da3a.bundle.js.map b/docs/vendors~main.739c65daaf450786da3a.bundle.js.map
diff --git a/...ndors~main.e5db3ef6f0e9be570a7d.bundle.js → ...ndors~main.b6f6efdcb24432c36e3f.bundle.js b/...ndors~main.e5db3ef6f0e9be570a7d.bundle.js → ...ndors~main.b6f6efdcb24432c36e3f.bundle.js
diff --git a/docs/vendors~main.d49e4d37d2280097ade8.bundle.js b/docs/vendors~main.d49e4d37d2280097ade8.bundle.js
diff --git a/...in.739c65daaf450786da3a.bundle.js.LICENSE → ...in.d49e4d37d2280097ade8.bundle.js.LICENSE b/...in.739c65daaf450786da3a.bundle.js.LICENSE → ...in.d49e4d37d2280097ade8.bundle.js.LICENSE
diff --git a/docs/vendors~main.d49e4d37d2280097ade8.bundle.js.map b/docs/vendors~main.d49e4d37d2280097ade8.bundle.js.map
diff --git a/package.json b/package.json
@@ -80,12 +80,12 @@
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-css-modules": "^2.11.0",
-    "eslint-plugin-jest": "^23.4.0",
+    "eslint-plugin-jest": "^23.6.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.3.0",
-    "husky": "^4.0.6",
+    "husky": "^4.0.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.0.0",
     "lint-staged": "^9.5.0",

diff --git a/static/glenorchy-lagoon.jpg b/static/glenorchy-lagoon.jpg
diff --git a/static/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash-smaller.jpg b/static/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash-smaller.jpg
diff --git a/static/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash.jpg b/static/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash.jpg
diff --git a/static/pablo-heimplatz-PSF2RhUBORs-unsplash-smaller.jpg b/static/pablo-heimplatz-PSF2RhUBORs-unsplash-smaller.jpg
diff --git a/static/pablo-heimplatz-PSF2RhUBORs-unsplash.jpg b/static/pablo-heimplatz-PSF2RhUBORs-unsplash.jpg
diff --git a/static/petr-vysohlid-9fqwGqGLUxc-unsplash-smaller.jpg b/static/petr-vysohlid-9fqwGqGLUxc-unsplash-smaller.jpg
diff --git a/static/petr-vysohlid-9fqwGqGLUxc-unsplash.jpg b/static/petr-vysohlid-9fqwGqGLUxc-unsplash.jpg
diff --git a/static/roell-de-ram-2DM7eOR5iyc-unsplash-smaller.jpg b/static/roell-de-ram-2DM7eOR5iyc-unsplash-smaller.jpg
diff --git a/static/roell-de-ram-2DM7eOR5iyc-unsplash.jpg b/static/roell-de-ram-2DM7eOR5iyc-unsplash.jpg
diff --git a/static/tobias-keller-73F4pKoUkM0-unsplash-smaller.jpg b/static/tobias-keller-73F4pKoUkM0-unsplash-smaller.jpg
diff --git a/static/tobias-keller-73F4pKoUkM0-unsplash.jpg b/static/tobias-keller-73F4pKoUkM0-unsplash.jpg
diff --git a/stories.js b/stories.js
@@ -6,37 +6,67 @@ import { storiesOf } from '@storybook/react'
 import { withA11y } from '@storybook/addon-a11y'
 import { color, number, text, withKnobs } from '@storybook/addon-knobs'
 import './.storybook/base.css'
+import glenorchyLagoon from './static/glenorchy-lagoon.jpg'
 import hobbiton from './static/andres-iga-7XKkJVw1d8c-unsplash-smaller.jpg'
+import hookerValleyTrack from './static/roell-de-ram-2DM7eOR5iyc-unsplash-smaller.jpg'
+import kea from './static/pablo-heimplatz-PSF2RhUBORs-unsplash-smaller.jpg'
 import nzBeach from './static/rod-long-4dcsLxQxSHY-unsplash-smaller.jpg'
+import queenstown from './static/omer-faruk-bekdemir-5BuxuWIJF1Q-unsplash-smaller.jpg'
 import teAraiPoint from './static/douglas-bagg-wRwa3Z6GtRI-unsplash-smaller.jpg'
+import tekapo from './static/tobias-keller-73F4pKoUkM0-unsplash-smaller.jpg'
 import thatWanakaTree from './static/laura-smetsers-H-TW2CoNtTk-unsplash-smaller.jpg'
+import portWaikato from './static/petr-vysohlid-9fqwGqGLUxc-unsplash-smaller.jpg'
 
 import './dist/styles.css'
 import Zoom, { Controlled as ControlledZoom } from './dist/esm'
 
-const imgThatWanakaTree = {
-  alt: 'That Wanaka Tree, New Zealand',
-  src: thatWanakaTree
+const imgGlenorchyLagoon = {
+  alt: 'Glenorchy lagoon, New Zealand by Robert Pearce',
+  src: glenorchyLagoon
+}
+const imgHobbiton = {
+  alt: 'Hobbiton, Matamata, New Zealand by Andres Iga',
+  src: hobbiton
+}
+const imgHookerValleyTrack = {
+  alt: 'Hooker Valley Track , New Zealand by Roll de Ram',
+  src: hookerValleyTrack
+}
+const imgKea = {
+  alt: `Kea (alpine parrot) in Arthur's Pass, New Zealand by Pablo Heimplatz`,
+  src: kea
 }
 const imgNzBeach = {
-  alt: 'New Zealand Beach',
+  alt: 'New Zealand Beach by Rod Long',
   src: nzBeach
 }
-const imgHobbiton = {
-  alt: 'Hobbiton, Matamata, New Zealand',
-  src: hobbiton
+const imgQueenstown = {
+  alt: 'Queenstown, New Zealand by Omer Faruk',
+  src: queenstown
 }
 const imgTeAraiPoint = {
-  alt: 'Te Arai Point, New Zealand',
+  alt: 'Te Arai Point, New Zealand by Douglas Bagg',
   src: teAraiPoint
 }
+const imgTekapo = {
+  alt: 'Lake Tekapo, New Zealand by Tobias Keller',
+  src: tekapo
+}
+const imgThatWanakaTree = {
+  alt: 'That Wanaka Tree, New Zealand by Laura Smetsers',
+  src: thatWanakaTree
+}
+const imgPortWaikato = {
+  alt: 'Port Waikato, Tuakau, Auckland, New Zealand by Petr Vysohlid',
+  src: portWaikato
+}
 
 const stories = storiesOf('react-medium-image-zoom', module)
 
 stories.addDecorator(withA11y)
 stories.addDecorator(withKnobs)
 
-stories.add('with <img />', () => (
+stories.add('<img />', () => (
   <ImgStory title="Zoom an `img`">
     <Zoom
       closeText={text('Unzoom label', 'Unzoom image')}
@@ -78,7 +108,7 @@ stories.add('with <img />', () => (
   </ImgStory>
 ))
 
-stories.add('with <picture />', () => (
+stories.add('<picture />', () => (
   <ImgStory title="Zoom a `picture` element with `img` and `source`">
     <Zoom
       closeText={text('Unzoom label', 'Unzoom image')}
@@ -123,7 +153,7 @@ stories.add('with <picture />', () => (
   </ImgStory>
 ))
 
-stories.add('with <figure />', () => (
+stories.add('<figure />', () => (
   <ImgStory title="Zoom a `figure` element">
     <figure>
       <Zoom
@@ -168,7 +198,7 @@ stories.add('with <figure />', () => (
   </ImgStory>
 ))
 
-stories.add('with blue circle', () => (
+stories.add('blue circle div', () => (
   <ImgStory title="Zoom a blue circle `div`, if you want">
     <Zoom
       closeText={text('Unzoom label', 'Unzoom image')}
@@ -213,29 +243,22 @@ stories.add('with blue circle', () => (
   </ImgStory>
 ))
 
-stories.add('with image gallery using divs & background images', () => {
+stories.add('image gallery using divs & background images', () => {
   const images = [
+    imgGlenorchyLagoon,
     imgThatWanakaTree,
     imgNzBeach,
     imgHobbiton,
-    imgHobbiton,
-    imgThatWanakaTree,
-    imgNzBeach,
-    imgNzBeach,
-    imgHobbiton,
-    imgThatWanakaTree
+    imgHookerValleyTrack,
+    imgQueenstown,
+    imgTekapo,
+    imgPortWaikato,
+    imgKea
   ]
 
   return (
     <div>
       <h1>Image gallery using divs & background images</h1>
-      <p>
-        While this is simply an example of using div elements and
-        background-image to accomplish an image gallery, you could easily listen
-        for arrow left/right when an item is zoomed and use the controlled
-        component to make yourself an animated image gallery that zooms &
-        unzooms items appropriately.
-      </p>
       <ul
         style={{
           display: 'flex',
@@ -245,7 +268,7 @@ stories.add('with image gallery using divs & background images', () => {
           padding: 0
         }}
       >
-        {images.concat(images, images, images).map((img, i) => (
+        {images.map((img, i) => (
           <li
             key={i}
             style={{ margin: '0 1rem 1rem 0', width: 'calc(33% - 1rem)' }}
@@ -273,7 +296,100 @@ stories.add('with image gallery using divs & background images', () => {
   )
 })
 
-stories.add('with controlled; zooms when image loads', () => {
+stories.add('image gallery + slideshow-style images', () => {
+  const images = [
+    imgGlenorchyLagoon,
+    imgThatWanakaTree,
+    imgNzBeach,
+    imgHobbiton,
+    imgHookerValleyTrack,
+    imgQueenstown,
+    imgTekapo,
+    imgPortWaikato,
+    imgKea
+  ]
+  const [activeIndex, setActiveIndex] = useState(null)
+
+  const handleKeyDown = useCallback(
+    e => {
+      if (activeIndex === null) {
+        return
+      }
+
+      if (e.key === 'ArrowLeft' || e.keyCode === 37) {
+        setActiveIndex(Math.max(activeIndex - 1, 0))
+      } else if (e.key === 'ArrowRight' || e.keyCode === 39) {
+        setActiveIndex(Math.min(activeIndex + 1, images.length - 1))
+      }
+    },
+    [activeIndex, images.length]
+  )
+
+  useEvent('keydown', handleKeyDown, document)
+
+  return (
+    <div>
+      <h1>Image gallery and slideshow-style images</h1>
+      <p>
+        Once you click on an image, use the left and right arrows to navigate
+        the images.
+      </p>
+      <ul
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          listStyle: 'none',
+          margin: 0,
+          padding: 0
+        }}
+      >
+        {images.map((img, i) => {
+          const handleZoomChange = useCallback(
+            isZoomed => {
+              if (isZoomed) {
+                setActiveIndex(i)
+                return
+              }
+              setActiveIndex(null)
+            },
+            [i]
+          )
+
+          return (
+            <li
+              key={`${i}-${img.src}`}
+              style={{ margin: '0 1rem 1rem 0', width: 'calc(33% - 1rem)' }}
+            >
+              <ControlledZoom
+                isZoomed={activeIndex === i}
+                onZoomChange={handleZoomChange}
+                transitionDuration={0}
+                wrapStyle={{ width: '100%' }}
+              >
+                <div
+                  aria-label={img.alt}
+                  role="img"
+                  style={{
+                    backgroundColor: '#c2c2c2',
+                    backgroundImage: `url(${img.src})`,
+                    backgroundPosition: 'center center',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    height: '0',
+                    paddingBottom: '66%',
+                    width: 'calc(100%)'
+                  }}
+                />
+              </ControlledZoom>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+})
+
+stories.add('controlled: zooms when image loads', () => {
   const [isZoomed, setIsZoomed] = useState(false)
 
   const handleBtnClick = useCallback(() => {
@@ -339,7 +455,7 @@ stories.add('with controlled; zooms when image loads', () => {
   )
 })
 
-stories.add('with controlled; specific keys', () => {
+stories.add('controlled: specific keys', () => {
   const [isZoomed, setIsZoomed] = useState(false)
 
   const handleKeyDown = useCallback(e => {