@ndla/image-search 11.0.17-alpha.0 → 11.0.19-alpha.0

package/README.md

@@ -1,4 +1,4 @@
-# ndla-licenses
+# ndla-image-search
 
 A simple library for selecting images from NDLA.
 
@@ -12,14 +12,45 @@ yarn add @ndla/image-search
 npm install @ndla/image-search
 ```
 
+## Example usage
+
 ### Get image with the image selector
 
+To use the `ImageSearch` component, you will need to provide translations and functions for searching, handling image selection and error handling.
+
 ```js
 import ImageSearch from "@ndla/image-search";
 
-const imageSelector = (image) => {
+const onImageSelect = (image) => {
   // handle image
 };
 
-<ImageSearch onImageSelect={imageSelector} />;
+const searchImages = (query, page) => {
+  //return a promise
+};
+
+const onError = (err) => void
+
+const translations = {
+    close: "Lukk",
+    searchPlaceholder: "Søk i bilder",
+    searchButtonTitle: "Søk",
+    useImageTitle: "Bruk bildet",
+    checkboxLabel: "Sett som metabilde",
+    imageMetadata: {
+        creatorsLabel: "Bilde",
+        license: "Lisens",
+        caption: "Bildetekst",
+        altText: "Alt-tekst",
+        modelRelease: "Modellklarert",
+        tags: "Emneknagger",
+    },
+    paginationTranslations: {
+        rootLabel: "Sidenavigering",
+        prevTriggerLabel: "Forrige side",
+        nextTriggerLabel: "Neste side",
+    },
+}
+
+<ImageSearch onImageSelect={onImageSelect} searchImages={searchImages}  onError={onError} translations={translations} locale="nb"/>;
 ```

package/dist/panda.buildinfo.json

@@ -0,0 +1,34 @@
+{
+  "schemaVersion": "0.45.2",
+  "styles": {
+    "atomic": [
+      "display]___[value:flex",
+      "flexDirection]___[value:column",
+      "gap]___[value:small",
+      "display]___[value:grid",
+      "gridTemplateColumns]___[value:repeat(auto-fit, minmax(200px, 1fr))",
+      "gridGap]___[value:xsmall",
+      "gridAutoFlow]___[value:dense",
+      "gap]___[value:xsmall",
+      "borderColor]___[value:stroke.subtle",
+      "maxHeight]___[value:135px",
+      "lineClamp]___[value:3",
+      "flexShrink]___[value:0",
+      "maxHeight]___[value:surface.xsmall",
+      "gap]___[value:xxsmall",
+      "flexWrap]___[value:wrap",
+      "alignItems]___[value:center",
+      "gridColumn]___[value:1 / -1",
+      "borderColor]___[value:stroke.default",
+      "border]___[value:1px solid",
+      "borderRadius]___[value:xsmall",
+      "padding]___[value:small",
+      "overflow]___[value:hidden",
+      "justifyContent]___[value:space-between",
+      "gap]___[value:medium",
+      "flex]___[value:2",
+      "marginBlockEnd]___[value:medium"
+    ],
+    "recipes": {}
+  }
+}

package/dist/styles.css

@@ -0,0 +1,108 @@
+@layer utilities {
+  .d_flex {
+    display: flex;
+}
+
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .grid-g_xsmall {
+    grid-gap: var(--spacing-xsmall);
+}
+
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
+  .max-h_135px {
+    max-height: 135px;
+}
+
+  .lc_3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+  .max-h_surface\.xsmall {
+    max-height: var(--sizes-surface-xsmall);
+}
+
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
+  .grid-c_1_\/_-1 {
+    grid-column: 1 / -1;
+}
+
+  .bd_1px_solid {
+    border: 1px solid;
+}
+
+  .bdr_xsmall {
+    border-radius: var(--radii-xsmall);
+}
+
+  .p_small {
+    padding: var(--spacing-small);
+}
+
+  .ov_hidden {
+    overflow: hidden;
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
+  .flex_2 {
+    flex: 2;
+}
+
+  .mbe_medium {
+    margin-block-end: var(--spacing-medium);
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .grid-tc_repeat\(auto-fit\,_minmax\(200px\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+  .grid-af_dense {
+    grid-auto-flow: dense;
+}
+
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .flex-sh_0 {
+    flex-shrink: 0;
+}
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .bd-c_stroke\.default {
+    border-color: var(--colors-stroke-default);
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+}

package/es/ImageMeta.js

@@ -1,5 +1,3 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
  * Copyright (c) 2022-present, NDLA.
  *
@@ -9,24 +7,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import prettyBytes from "pretty-bytes";
-import { fonts } from "@ndla/core";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const StyledDiv = /*#__PURE__*/_styled("div", {
-  target: "e171zbc01",
-  label: "StyledDiv"
-})(fonts.sizes("16px", 1.3), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlTWV0YS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYTRCIiwiZmlsZSI6IkltYWdlTWV0YS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBwcmV0dHlCeXRlcyBmcm9tIFwicHJldHR5LWJ5dGVzXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGZvbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IElJbWFnZURpbWVuc2lvbnMgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9pbWFnZS1hcGlcIjtcblxuY29uc3QgU3R5bGVkRGl2ID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcyhcIjE2cHhcIiwgMS4zKX1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY29udGVudFR5cGU6IHN0cmluZztcbiAgZmlsZVNpemU6IG51bWJlcjtcbiAgaW1hZ2VEaW1lbnNpb25zPzogSUltYWdlRGltZW5zaW9ucztcbn1cblxuY29uc3QgSW1hZ2VNZXRhID0gKHsgY29udGVudFR5cGUsIGZpbGVTaXplLCBpbWFnZURpbWVuc2lvbnMgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgZGltZW5zaW9ucyA9IGltYWdlRGltZW5zaW9ucyA/IGAgLSAke2ltYWdlRGltZW5zaW9ucy53aWR0aH14JHtpbWFnZURpbWVuc2lvbnMuaGVpZ2h0fSBweGAgOiBcIlwiO1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWREaXY+XG4gICAgICA8U3R5bGVkU3Bhbj57YCR7Y29udGVudFR5cGV9IC0gJHtwcmV0dHlCeXRlcyhmaWxlU2l6ZSl9JHtkaW1lbnNpb25zfWB9PC9TdHlsZWRTcGFuPlxuICAgIDwvU3R5bGVkRGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSW1hZ2VNZXRhO1xuIl19 */"));
-const StyledSpan = /*#__PURE__*/_styled("span", {
-  target: "e171zbc00",
-  label: "StyledSpan"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1azakc",
-  styles: "text-align:center"
-} : {
-  name: "1azakc",
-  styles: "text-align:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlTWV0YS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUI4QiIsImZpbGUiOiJJbWFnZU1ldGEudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgcHJldHR5Qnl0ZXMgZnJvbSBcInByZXR0eS1ieXRlc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBmb250cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBJSW1hZ2VEaW1lbnNpb25zIH0gZnJvbSBcIkBuZGxhL3R5cGVzLWJhY2tlbmQvaW1hZ2UtYXBpXCI7XG5cbmNvbnN0IFN0eWxlZERpdiA9IHN0eWxlZC5kaXZgXG4gICR7Zm9udHMuc2l6ZXMoXCIxNnB4XCIsIDEuMyl9XG5gO1xuXG5jb25zdCBTdHlsZWRTcGFuID0gc3R5bGVkLnNwYW5gXG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGNvbnRlbnRUeXBlOiBzdHJpbmc7XG4gIGZpbGVTaXplOiBudW1iZXI7XG4gIGltYWdlRGltZW5zaW9ucz86IElJbWFnZURpbWVuc2lvbnM7XG59XG5cbmNvbnN0IEltYWdlTWV0YSA9ICh7IGNvbnRlbnRUeXBlLCBmaWxlU2l6ZSwgaW1hZ2VEaW1lbnNpb25zIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IGRpbWVuc2lvbnMgPSBpbWFnZURpbWVuc2lvbnMgPyBgIC0gJHtpbWFnZURpbWVuc2lvbnMud2lkdGh9eCR7aW1hZ2VEaW1lbnNpb25zLmhlaWdodH0gcHhgIDogXCJcIjtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkRGl2PlxuICAgICAgPFN0eWxlZFNwYW4+e2Ake2NvbnRlbnRUeXBlfSAtICR7cHJldHR5Qnl0ZXMoZmlsZVNpemUpfSR7ZGltZW5zaW9uc31gfTwvU3R5bGVkU3Bhbj5cbiAgICA8L1N0eWxlZERpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEltYWdlTWV0YTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { Text } from "@ndla/primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
 const ImageMeta = _ref => {
   let {
     contentType,
@@ -34,10 +16,8 @@ const ImageMeta = _ref => {
     imageDimensions
   } = _ref;
   const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : "";
-  return _jsx(StyledDiv, {
-    children: _jsx(StyledSpan, {
-      children: `${contentType} - ${prettyBytes(fileSize)}${dimensions}`
-    })
+  return /*#__PURE__*/_jsx(Text, {
+    children: `${contentType} - ${prettyBytes(fileSize)}${dimensions}`
   });
 };
 export default ImageMeta;