Fix: webkit 100% image issue (#222)

rpearce · Mar 3, 2020 · 9f6d9b3 · 9f6d9b3
1 parent 6721f87
commit 9f6d9b3
Show file tree

Hide file tree

Showing 22 changed files with 350 additions and 405 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.89ae90efd19bd61da4f4.bundle.js"></script><script src="vendors~main.89ae90efd19bd61da4f4.bundle.js"></script><script src="main.89ae90efd19bd61da4f4.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.20bcf1666fcf8b5ae923.bundle.js"></script><script src="vendors~main.20bcf1666fcf8b5ae923.bundle.js"></script><script src="main.20bcf1666fcf8b5ae923.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.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.cb39a76f69280510c569.bundle.js"></script><script src="main.2fae4beed0f77a55f27c.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.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.96e42b180450ade25888.bundle.js"></script><script src="main.2fae4beed0f77a55f27c.bundle.js"></script></body></html>
diff --git a/docs/main.20bcf1666fcf8b5ae923.bundle.js b/docs/main.20bcf1666fcf8b5ae923.bundle.js
diff --git a/docs/main.20bcf1666fcf8b5ae923.bundle.js.map b/docs/main.20bcf1666fcf8b5ae923.bundle.js.map
diff --git a/docs/main.89ae90efd19bd61da4f4.bundle.js b/docs/main.89ae90efd19bd61da4f4.bundle.js
diff --git a/docs/main.89ae90efd19bd61da4f4.bundle.js.map b/docs/main.89ae90efd19bd61da4f4.bundle.js.map
diff --git a/...ntime~main.89ae90efd19bd61da4f4.bundle.js → ...ntime~main.20bcf1666fcf8b5ae923.bundle.js b/...ntime~main.89ae90efd19bd61da4f4.bundle.js → ...ntime~main.20bcf1666fcf8b5ae923.bundle.js
diff --git a/docs/runtime~main.20bcf1666fcf8b5ae923.bundle.js.map b/docs/runtime~main.20bcf1666fcf8b5ae923.bundle.js.map
diff --git a/docs/runtime~main.89ae90efd19bd61da4f4.bundle.js.map b/docs/runtime~main.89ae90efd19bd61da4f4.bundle.js.map
diff --git a/docs/sb_dll/storybook_ui_dll.js b/docs/sb_dll/storybook_ui_dll.js
diff --git a/docs/static/media/nvidia-card.0f0f309b.jpg b/docs/static/media/nvidia-card.0f0f309b.jpg
diff --git a/docs/vendors~main.20bcf1666fcf8b5ae923.bundle.js b/docs/vendors~main.20bcf1666fcf8b5ae923.bundle.js
diff --git a/...9ae90efd19bd61da4f4.bundle.js.LICENSE.txt → ...0bcf1666fcf8b5ae923.bundle.js.LICENSE.txt b/...9ae90efd19bd61da4f4.bundle.js.LICENSE.txt → ...0bcf1666fcf8b5ae923.bundle.js.LICENSE.txt
@@ -85,7 +85,7 @@ and limitations under the License.
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
-/** @license React v0.18.0
+/** @license React v0.19.0
  * scheduler.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -95,24 +95,24 @@ and limitations under the License.
  */
 
 /** @license React v16.12.0
- * react-dom.production.min.js
+ * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.12.0
- * react-is.production.min.js
+/** @license React v16.13.0
+ * react-dom.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.12.0
+/** @license React v16.13.0
  * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.

diff --git a/docs/vendors~main.20bcf1666fcf8b5ae923.bundle.js.map b/docs/vendors~main.20bcf1666fcf8b5ae923.bundle.js.map
diff --git a/docs/vendors~main.89ae90efd19bd61da4f4.bundle.js b/docs/vendors~main.89ae90efd19bd61da4f4.bundle.js
diff --git a/docs/vendors~main.89ae90efd19bd61da4f4.bundle.js.map b/docs/vendors~main.89ae90efd19bd61da4f4.bundle.js.map
diff --git a/...ndors~main.cb39a76f69280510c569.bundle.js → ...ndors~main.96e42b180450ade25888.bundle.js b/...ndors~main.cb39a76f69280510c569.bundle.js → ...ndors~main.96e42b180450ade25888.bundle.js
diff --git a/package.json b/package.json
@@ -65,15 +65,15 @@
     "@babel/preset-react": "7.8.3",
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-node-resolve": "7.1.1",
-    "@storybook/addon-a11y": "5.3.13",
-    "@storybook/addon-actions": "5.3.13",
-    "@storybook/addon-docs": "5.3.13",
-    "@storybook/addon-knobs": "5.3.13",
-    "@storybook/addon-links": "5.3.13",
-    "@storybook/react": "5.3.13",
+    "@storybook/addon-a11y": "5.3.14",
+    "@storybook/addon-actions": "5.3.14",
+    "@storybook/addon-docs": "5.3.14",
+    "@storybook/addon-knobs": "5.3.14",
+    "@storybook/addon-links": "5.3.14",
+    "@storybook/react": "5.3.14",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "9.4.0",
-    "all-contributors-cli": "6.13.0",
+    "all-contributors-cli": "6.14.0",
     "autoprefixer": "9.7.4",
     "axe-core": "3.5.1",
     "babel-core": "7.0.0-bridge.0",
@@ -84,22 +84,22 @@
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.0",
     "eslint-plugin-css-modules": "2.11.0",
-    "eslint-plugin-jest": "23.7.0",
+    "eslint-plugin-jest": "23.8.1",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.18.3",
-    "eslint-plugin-react-hooks": "2.4.0",
+    "eslint-plugin-react-hooks": "2.5.0",
     "husky": "4.2.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "25.1.0",
-    "lint-staged": "10.0.7",
+    "lint-staged": "10.0.8",
     "npm-run-all": "4.1.5",
     "prettier": "1.19.1",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "rollup": "1.31.1",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
+    "rollup": "1.32.0",
     "rollup-plugin-babel": "4.3.3",
-    "rollup-plugin-postcss": "2.0.6",
+    "rollup-plugin-postcss": "2.1.1",
     "rollup-plugin-terser": "5.2.0"
   },
   "peerDependencies": {

diff --git a/source/Main.css b/source/Main.css
@@ -1,6 +1,7 @@
 .wrap {
   position: relative;
   display: inline-flex;
+  align-items: flex-start;
 }
 .wrapHidden {
   composes: wrap;

diff --git a/static/nvidia-card.jpg b/static/nvidia-card.jpg
diff --git a/stories.js b/stories.js
@@ -10,12 +10,13 @@ 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 nvidiaCard from './static/nvidia-card.jpg'
 import nzBeach from './static/rod-long-4dcsLxQxSHY-unsplash-smaller.jpg'
+import portWaikato from './static/petr-vysohlid-9fqwGqGLUxc-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'
@@ -36,6 +37,10 @@ const imgKea = {
   alt: `Kea (alpine parrot) in Arthur's Pass, New Zealand by Pablo Heimplatz`,
   src: kea
 }
+const imgNvidiaCard = {
+  alt: 'NVIDIA Graphics Card',
+  src: nvidiaCard
+}
 const imgNzBeach = {
   alt: 'New Zealand Beach by Rod Long',
   src: nzBeach
@@ -572,3 +577,42 @@ const ImgStory = ({ desc, title, ...props }) => {
     </div>
   )
 }
+
+stories.add('larger image size', () => (
+  <div style={{ width: '720px', margin: '0 auto' }}>
+    <ImgStory title="Larger image size">
+      <Zoom
+        closeText={text('Unzoom label', 'Unzoom image')}
+        openText={text('Zoom label', 'Zoom image')}
+        overlayBgColorEnd={color(
+          'Overlay bgColor end',
+          'rgba(255, 255, 255, 0.95)'
+        )}
+        overlayBgColorStart={color(
+          'Overlay bgColor start',
+          'rgba(255, 255, 255, 0)'
+        )}
+        transitionDuration={number('Transition duration', 300, {
+          min: 0,
+          max: 5000,
+          range: true,
+          step: 100
+        })}
+        zoomMargin={number('Zoom margin', 0, {
+          min: 0,
+          max: 500,
+          range: true,
+          step: 50
+        })}
+        zoomZindex={number('Zoom z-index', 2147483647, {
+          min: 0,
+          max: 2147483647,
+          range: true,
+          step: 1
+        })}
+      >
+        <img alt={imgNvidiaCard.alt} src={imgNvidiaCard.src} width="100%" />
+      </Zoom>
+    </ImgStory>
+  </div>
+))