@uncinc/uncinc-react-kitchen-sink 2.2.16 → 2.2.17

package/dist/components/Image/Picture/data/ext-to-mime-types.json

@@ -4,5 +4,6 @@
   ".jpe": "image/jpeg",
   ".jpeg": "image/jpeg",
   ".jpg": "image/jpeg",
-  ".webp": "image/webp"
-}
+  ".webp": "image/webp",
+  ".svg": "image/svg+xml"
+}

package/dist/components/Image/Picture/index.js

@@ -41,6 +41,10 @@ const Picture = ({
   };
 
   const isValidImage = url => {
+    if (!url) {
+      return false;
+    }
+
     const extension = getImageExtension(url);
     return Object.keys(mimeTypes).includes(extension);
   };
@@ -48,10 +52,21 @@ const Picture = ({
   if (Immutable.Iterable.isIterable(Immutable.fromJS(src))) {
     // Sources have to be defined in a descending order.
     // We sort them from best to worst quality.
-    const sources = Immutable.fromJS(src).toOrderedMap().sortBy((url, breakpoint) => parseInt(breakpoint)).reverse();
-    const hasValidSources = !sources.map(url => {
-      return isValidImage(url);
-    }).valueSeq().toArray().includes(false); // Only render if all our image sources are valid
+    const sourcesAll = Immutable.fromJS(src).toOrderedMap().sortBy((url, breakpoint) => parseInt(breakpoint)).reverse();
+    const sources = sourcesAll.map(url => {
+      if (isValidImage(url)) {
+        return url;
+      }
+    }).filter(image => {
+      if (image !== false) {
+        return image;
+      }
+
+      ;
+      return null;
+    }); // Only render if all our image sources are valid
+
+    const hasValidSources = sources.count() > 0;
 
     if (!hasValidSources) {
       return null;

package/dist/components/Image/stories.js

@@ -22,6 +22,11 @@ export const Default = () => /*#__PURE__*/React.createElement("div", {
 }, /*#__PURE__*/React.createElement(Image, {
   src: "https://dummyimage.com/400x400/73cac4/fff.gif",
   alt: "Image 3"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "ImageWrapper__image"
+}, /*#__PURE__*/React.createElement(Image, {
+  src: "https://dummyimage.com/400x400/ff8833/fff.svg",
+  alt: "Image 4"
 })));
 export const Responsive = () => /*#__PURE__*/React.createElement("div", {
   className: "ImageWrapper"
@@ -48,4 +53,14 @@ export const BackgroundImageResponsive = () => /*#__PURE__*/React.createElement(
     1000: "https://dummyimage.com/1000x400/73cac4/fff.jpg"
   },
   alt: "Image 1"
+}));
+export const ImageResponsiveFail = () => /*#__PURE__*/React.createElement("div", {
+  className: "ImageWrapper"
+}, /*#__PURE__*/React.createElement(Image, {
+  src: {
+    400: null,
+    600: "https://dummyimage.com/600x400/f2788f/fff.png",
+    1000: "https://dummyimage.com/1000x400/73cac4/fff.jpg"
+  },
+  alt: "Image 1"
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.2.16",
+  "version": "2.2.17",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",

package/dist/pages/api/graphql.js

@@ -1,25 +0,0 @@
-import { ApolloServer, gql } from 'apollo-server-micro';
-export const config = {
-  api: {
-    bodyParser: false
-  }
-};
-const typeDefs = [gql`
-    type Query {
-      root: String
-    }
-
-    type Mutation {
-      root: String
-    }
-  `];
-const server = new ApolloServer({
-  typeDefs,
-  resolvers: {},
-  introspection: true,
-  playground: true,
-  context: {}
-});
-export default server.createHandler({
-  path: '/api/graphql'
-});