@squiz/resource-browser 3.0.1-rc.0 → 3.0.1-rc.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1-rc.2](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.1...@squiz/resource-browser@3.0.1-rc.2) (2024-12-05)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
+## [3.0.1-rc.1](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.0...@squiz/resource-browser@3.0.1-rc.1) (2024-11-29)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
 ## [3.0.1-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.4.12...@squiz/resource-browser@3.0.1-rc.0) (2024-11-25)
 
 **Note:** Version bump only for package @squiz/resource-browser

package/lib/Icons/ImageInline.d.ts

@@ -0,0 +1,2 @@
+import React, { SVGAttributes } from 'react';
+export declare const ImageInline: (props: SVGAttributes<SVGElement>) => React.JSX.Element;

package/lib/Icons/ImageInline.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageInline = void 0;
+const react_1 = __importDefault(require("react"));
+const ImageInline = (props) => {
+    return (react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M15.75 14.2499V3.74988C15.75 2.92488 15.075 2.24988 14.25 2.24988H3.75C2.925 2.24988 2.25 2.92488 2.25 3.74988V14.2499C2.25 15.0749 2.925 15.7499 3.75 15.7499H14.25C15.075 15.7499 15.75 15.0749 15.75 14.2499ZM6.675 10.4849L8.25 12.3824L10.575 9.38988C10.725 9.19488 11.025 9.19488 11.175 9.39738L13.8075 12.9074C13.995 13.1549 13.815 13.5074 13.5075 13.5074H4.515C4.2 13.5074 4.0275 13.1474 4.2225 12.8999L6.09 10.4999C6.2325 10.3049 6.5175 10.2974 6.675 10.4849Z", fill: "#707070" })));
+};
+exports.ImageInline = ImageInline;

package/lib/Icons/LinkInline.d.ts

@@ -0,0 +1,2 @@
+import React, { SVGAttributes } from 'react';
+export declare const LinkInline: (props: SVGAttributes<SVGElement>) => React.JSX.Element;

package/lib/Icons/LinkInline.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkInline = void 0;
+const react_1 = __importDefault(require("react"));
+const LinkInline = (props) => {
+    return (react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M12.75 5.50403H10.5C10.0875 5.50403 9.75 5.84153 9.75 6.25403C9.75 6.66653 10.0875 7.00403 10.5 7.00403H12.75C13.9875 7.00403 15 8.01653 15 9.25403C15 10.4915 13.9875 11.504 12.75 11.504H10.5C10.0875 11.504 9.75 11.8415 9.75 12.254C9.75 12.6665 10.0875 13.004 10.5 13.004H12.75C14.82 13.004 16.5 11.324 16.5 9.25403C16.5 7.18403 14.82 5.50403 12.75 5.50403ZM6 9.25403C6 9.66653 6.3375 10.004 6.75 10.004H11.25C11.6625 10.004 12 9.66653 12 9.25403C12 8.84153 11.6625 8.50403 11.25 8.50403H6.75C6.3375 8.50403 6 8.84153 6 9.25403ZM7.5 11.504H5.25C4.0125 11.504 3 10.4915 3 9.25403C3 8.01653 4.0125 7.00403 5.25 7.00403H7.5C7.9125 7.00403 8.25 6.66653 8.25 6.25403C8.25 5.84153 7.9125 5.50403 7.5 5.50403H5.25C3.18 5.50403 1.5 7.18403 1.5 9.25403C1.5 11.324 3.18 13.004 5.25 13.004H7.5C7.9125 13.004 8.25 12.6665 8.25 12.254C8.25 11.8415 7.9125 11.504 7.5 11.504Z", fill: "#707070" })));
+};
+exports.LinkInline = LinkInline;

package/lib/Plugin/Plugin.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { InlineType } from '../types';
 /**
  *  This plugin component exsits to deal with React rules of Hooks stupidity.
  *
@@ -9,5 +10,7 @@ import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrows
  */
 export type PluginRenderType = ResourceBrowserInputProps & {
     render: boolean;
+    inline: boolean;
+    inlineType?: InlineType;
 };
-export declare const PluginRender: ({ render, ...props }: PluginRenderType) => React.JSX.Element;
+export declare const PluginRender: ({ render, inline, inlineType, ...props }: PluginRenderType) => React.JSX.Element;

package/lib/Plugin/Plugin.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PluginRender = void 0;
 const react_1 = __importDefault(require("react"));
 const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
+const ResourceBrowserInlineButton_1 = require("../ResourceBrowserInlineButton/ResourceBrowserInlineButton");
 const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
-const PluginRender = ({ render, ...props }) => {
+const PluginRender = ({ render, inline, inlineType, ...props }) => {
     if (render) {
-        return (react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
-            react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props })));
+        return (react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source }, inline && inlineType ? (react_1.default.createElement(ResourceBrowserInlineButton_1.ResourceBrowserInlineButton, { inlineType: inlineType, ...props })) : (react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props }))));
     }
     else {
         return react_1.default.createElement(react_1.default.Fragment, null);

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { InlineType } from '../types';
+export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
+    inlineType: InlineType;
+};
+export declare const ResourceBrowserInlineButton: ({ inlineType, modalTitle, allowedTypes, onChange, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInlineButtonProps) => React.JSX.Element;

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserInlineButton = void 0;
+const react_1 = __importDefault(require("react"));
+const MainContainer_1 = __importDefault(require("../MainContainer/MainContainer"));
+const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
+const ImageInline_1 = require("../Icons/ImageInline");
+const LinkInline_1 = require("../Icons/LinkInline");
+const ResourceBrowserInlineButton = ({ inlineType, modalTitle, allowedTypes, onChange, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
+    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+    const isImagePicker = inlineType === 'image';
+    return (react_1.default.createElement("div", { className: "inline-launch-button" },
+        react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
+                isOpen: isModalOpen,
+                onOpenChange: onModalStateChange,
+            }, showLabel: false, label: "", icon: isImagePicker ? react_1.default.createElement(ImageInline_1.ImageInline, { "aria-label": "change image" }) : react_1.default.createElement(LinkInline_1.LinkInline, { "aria-label": "change link" }), isDisabled: isDisabled, scope: "squiz-rb-scope", containerClasses: "inline-launch-button__button" }, (onClose, titleProps) => (react_1.default.createElement(MainContainer_1.default, { selectedSource: source, sources: sources, preselectedResource: resource, plugin: plugin, pluginMode: pluginMode, searchEnabled: searchEnabled, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onSourceSelect: setSource, onClose: onClose, onChange: onChange }))),
+        react_1.default.createElement("div", { className: "inline-launch-button__label" }, isImagePicker ? `Change image` : `Change link`)));
+};
+exports.ResourceBrowserInlineButton = ResourceBrowserInlineButton;

package/lib/index.css

@@ -417,6 +417,9 @@
 .squiz-rb-scope .m-2:not(.squiz-rb-plugin *) {
   margin: 0.5rem;
 }
+.squiz-rb-scope .m-20:not(.squiz-rb-plugin *) {
+  margin: 5rem;
+}
 .squiz-rb-scope .m-3:not(.squiz-rb-plugin *) {
   margin: 0.75rem;
 }
@@ -512,6 +515,12 @@
 .squiz-rb-scope .inline-block:not(.squiz-rb-plugin *) {
   display: inline-block;
 }
+.squiz-rb-scope .\!inline:not(.squiz-rb-plugin *) {
+  display: inline !important;
+}
+.squiz-rb-scope .inline:not(.squiz-rb-plugin *) {
+  display: inline;
+}
 .squiz-rb-scope .flex:not(.squiz-rb-plugin *) {
   display: flex;
 }
@@ -1025,6 +1034,17 @@
 .squiz-rb-scope .filter:not(.squiz-rb-plugin *) {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .squiz-rb-scope .resource-picker:not(.squiz-rb-plugin *) {
   display: grid;
   grid-template-columns: 24px 1fr;
@@ -1062,6 +1082,44 @@
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .inline-launch-button:not(.squiz-rb-plugin *) {
+  display: inline-block;
+  position: relative;
+}
+.squiz-rb-scope .inline-launch-button__button:not(.squiz-rb-plugin *) {
+  all: unset;
+  border: 2px solid;
+  border-color: rgba(0, 0, 0, 0.16);
+  border-radius: 8px;
+  padding: 2px;
+  cursor: pointer;
+}
+.squiz-rb-scope .inline-launch-button__label:not(.squiz-rb-plugin *) {
+  display: none;
+  position: absolute;
+  box-sizing: border-box;
+  top: calc(100% + 2px);
+  white-space: nowrap;
+  background: #2b2b2b;
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  transform: translateX(calc(-50% + 13px));
+}
+.squiz-rb-scope .inline-launch-button:hover .inline-launch-button__label:not(.squiz-rb-plugin *),
+.squiz-rb-scope .inline-launch-button:focus-within .inline-launch-button__label:not(.squiz-rb-plugin *) {
+  display: flex;
+}
+.squiz-rb-scope .inline-launch-button:hover .inline-launch-button__button:not(.squiz-rb-plugin *),
+.squiz-rb-scope .inline-launch-button:focus-within .inline-launch-button__button:not(.squiz-rb-plugin *) {
+  border-color: #0774d2;
+  background: #e6f1fa;
+}
+.squiz-rb-scope .inline-launch-button:hover .inline-launch-button__button svg path:not(.squiz-rb-plugin *),
+.squiz-rb-scope .inline-launch-button:focus-within .inline-launch-button__button svg path:not(.squiz-rb-plugin *) {
+  fill: #044985;
+}
 .squiz-rb-scope .spinner:not(.squiz-rb-plugin *) {
   display: inline-block;
   border-radius: 9999px;
@@ -1268,3 +1326,7 @@
     height: calc(100vh - 9rem);
   }
 }
+/*!
+ * @license
+ * Copyright Squiz Australia Pty Ltd. All Rights Reserved.
+ */

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
-import { ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
+import { InlineType, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
 import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
 import BrowseToSource from './BrowseToSource/BrowseToSource';
 import SourceDropdown from './SourceDropdown/SourceDropdown';
@@ -12,6 +12,8 @@ export type ResourceBrowserProps = {
     allowedTypes?: string[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
+    inline?: boolean;
+    inlineType?: InlineType;
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
 };

package/lib/index.js

@@ -48,7 +48,7 @@ const SourceDropdownContainer_1 = __importDefault(require("./SourceDropdownConta
 exports.SourceDropdownContainer = SourceDropdownContainer_1.default;
 __exportStar(require("./types"), exports);
 const ResourceBrowser = (props) => {
-    const { value } = props;
+    const { value, inline, inlineType } = props;
     const [error, setError] = (0, react_1.useState)(null);
     const { onRequestSources, searchEnabled, plugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
@@ -105,7 +105,7 @@ const ResourceBrowser = (props) => {
     }, [sources, isModalOpen]);
     // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", render: plugin === null, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
+        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
                 return {
                     data: null,
                     error: null,
@@ -113,7 +113,7 @@ const ResourceBrowser = (props) => {
                 };
             }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
+            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
         })));
 };
 exports.ResourceBrowser = ResourceBrowser;

package/lib/types.d.ts

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 import { SquizImageType } from '@squiz/dx-json-schema-lib';
 export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
 export type ResourceBrowserPluginType = 'dam' | 'matrix';
+export type InlineType = 'image' | 'link';
 export type AuthenticationConfiguration = {
     authUrl: string;
     redirectUrl: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.0.1-rc.0",
+    "version": "3.0.1-rc.2",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -13,6 +13,8 @@
         "compile:styles": "node build.js",
         "storybook": "storybook dev -p 6006",
         "storybook:build": "storybook build",
+        "storybook:cjs-fix": "storybook-filestore-compile-fix",
+        "storybook:upload": "storybook-filestore-uploader",
         "test": "npm run test:unit && npm run test:eslint",
         "test:unit": "jest",
         "test:eslint": "eslint .",
@@ -26,7 +28,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "1.67.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.0",
+        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.2",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",
@@ -86,5 +88,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "df5f8e74af27b274781237cc0c09b8f0521b66af"
+    "gitHead": "e9d97605da9b8a0e5595afdc033d1669e09af530"
 }

package/src/Icons/ImageInline.tsx

@@ -0,0 +1,12 @@
+import React, { SVGAttributes } from 'react';
+
+export const ImageInline = (props: SVGAttributes<SVGElement>) => {
+    return (
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M15.75 14.2499V3.74988C15.75 2.92488 15.075 2.24988 14.25 2.24988H3.75C2.925 2.24988 2.25 2.92488 2.25 3.74988V14.2499C2.25 15.0749 2.925 15.7499 3.75 15.7499H14.25C15.075 15.7499 15.75 15.0749 15.75 14.2499ZM6.675 10.4849L8.25 12.3824L10.575 9.38988C10.725 9.19488 11.025 9.19488 11.175 9.39738L13.8075 12.9074C13.995 13.1549 13.815 13.5074 13.5075 13.5074H4.515C4.2 13.5074 4.0275 13.1474 4.2225 12.8999L6.09 10.4999C6.2325 10.3049 6.5175 10.2974 6.675 10.4849Z"
+                fill="#707070"
+            />
+        </svg>
+    );
+};

package/src/Icons/LinkInline.tsx

@@ -0,0 +1,12 @@
+import React, { SVGAttributes } from 'react';
+
+export const LinkInline = (props: SVGAttributes<SVGElement>) => {
+    return (
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M12.75 5.50403H10.5C10.0875 5.50403 9.75 5.84153 9.75 6.25403C9.75 6.66653 10.0875 7.00403 10.5 7.00403H12.75C13.9875 7.00403 15 8.01653 15 9.25403C15 10.4915 13.9875 11.504 12.75 11.504H10.5C10.0875 11.504 9.75 11.8415 9.75 12.254C9.75 12.6665 10.0875 13.004 10.5 13.004H12.75C14.82 13.004 16.5 11.324 16.5 9.25403C16.5 7.18403 14.82 5.50403 12.75 5.50403ZM6 9.25403C6 9.66653 6.3375 10.004 6.75 10.004H11.25C11.6625 10.004 12 9.66653 12 9.25403C12 8.84153 11.6625 8.50403 11.25 8.50403H6.75C6.3375 8.50403 6 8.84153 6 9.25403ZM7.5 11.504H5.25C4.0125 11.504 3 10.4915 3 9.25403C3 8.01653 4.0125 7.00403 5.25 7.00403H7.5C7.9125 7.00403 8.25 6.66653 8.25 6.25403C8.25 5.84153 7.9125 5.50403 7.5 5.50403H5.25C3.18 5.50403 1.5 7.18403 1.5 9.25403C1.5 11.324 3.18 13.004 5.25 13.004H7.5C7.9125 13.004 8.25 12.6665 8.25 12.254C8.25 11.8415 7.9125 11.504 7.5 11.504Z"
+                fill="#707070"
+            />
+        </svg>
+    );
+};

package/src/Plugin/Plugin.spec.tsx

@@ -3,12 +3,14 @@ import { render, waitFor } from '@testing-library/react';
 
 import { PluginRender } from './Plugin';
 import * as RBI from '../ResourceBrowserInput/ResourceBrowserInput';
+import * as RBInlineButton from '../ResourceBrowserInlineButton/ResourceBrowserInlineButton';
 jest.spyOn(RBI, 'ResourceBrowserInput');
+jest.spyOn(RBInlineButton, 'ResourceBrowserInlineButton');
 
 describe('Plugin', () => {
     it('Does not render ResourceBrowserInput if render is false', async () => {
         //@ts-ignore
-        render(<PluginRender render={false} />);
+        render(<PluginRender render={false} inline={false} />);
 
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).not.toHaveBeenCalled();
@@ -39,10 +41,41 @@ describe('Plugin', () => {
             isModalOpen: false,
             onModalStateChange: () => {},
         };
-        render(<PluginRender render={true} {...props} />);
+        render(<PluginRender render={true} inline={false} {...props} />);
 
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(props, {});
         });
     });
+
+    it('Does render ResourceBrowserInlineButton if inline is true', async () => {
+        const props = {
+            modalTitle: 'Asset picker',
+            value: null,
+            onChange: jest.fn(),
+            onClear: jest.fn(),
+            useResource: () => {
+                return {
+                    data: null,
+                    error: null,
+                    isLoading: false,
+                };
+            },
+            plugin: null,
+            pluginMode: null,
+            searchEnabled: false,
+            source: null,
+            sources: [],
+            isLoading: false,
+            error: null,
+            setSource: () => {},
+            isModalOpen: false,
+            onModalStateChange: () => {},
+        };
+        render(<PluginRender render={true} inline={true} inlineType="image" {...props} />);
+
+        await waitFor(() => {
+            expect(RBInlineButton.ResourceBrowserInlineButton).toHaveBeenCalledWith({ ...props, inlineType: 'image' }, {});
+        });
+    });
 });

package/src/Plugin/Plugin.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { ResourceBrowserInlineButton } from '../ResourceBrowserInlineButton/ResourceBrowserInlineButton';
 import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
+import { InlineType } from '../types';
 
 /**
  *  This plugin component exsits to deal with React rules of Hooks stupidity.
@@ -11,12 +13,18 @@ import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
  */
 export type PluginRenderType = ResourceBrowserInputProps & {
     render: boolean;
+    inline: boolean;
+    inlineType?: InlineType;
 };
-export const PluginRender = ({ render, ...props }: PluginRenderType) => {
+export const PluginRender = ({ render, inline, inlineType, ...props }: PluginRenderType) => {
     if (render) {
         return (
             <AuthProvider authConfig={props.source}>
-                <ResourceBrowserInput {...props} />
+                {inline && inlineType ? (
+                    <ResourceBrowserInlineButton inlineType={inlineType} {...props} />
+                ) : (
+                    <ResourceBrowserInput {...props} />
+                )}
             </AuthProvider>
         );
     } else {

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.scss

@@ -0,0 +1,44 @@
+.inline-launch-button {
+    display: inline-block;
+    position: relative;
+
+    &__button {
+        all: unset;
+        border: 2px solid;
+        border-color: rgba(0, 0, 0, 0.16);
+        border-radius: 8px;
+        padding: 2px;
+        cursor: pointer;
+    }
+
+    &__label {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        top: calc(100% + 2px);
+        white-space: nowrap;
+        background: $sds-grey-900;
+        color: $sds-white;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: $sds-text-md-regular-font-size;
+        transform: translateX(
+            calc(-50% + 13px)
+        ); // === half of self to the left, minus half the width of the button (13px) which it stars offset to the right
+    }
+
+    &:hover,
+    &:focus-within {
+        .inline-launch-button__label {
+            display: flex;
+        }
+
+        .inline-launch-button__button {
+            border-color: $sds-blue-300;
+            background: $sds-blue-100;
+            svg path {
+                fill: $sds-blue-400;
+            }
+        }
+    }
+}

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+
+import { ResourceBrowserInlineButton } from './ResourceBrowserInlineButton';
+
+describe('ResourceBrowserInlineButton', () => {
+    const defaultProps = {
+        useResource: () => {
+            return {
+                data: null,
+                error: null,
+                isLoading: false,
+            };
+        },
+    };
+    it('Render image icon if inline type is "image"', async () => {
+        //@ts-ignore
+        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} />);
+
+        await waitFor(() => {
+            expect(screen.getByLabelText('change image')).toBeTruthy();
+        });
+    });
+
+    it('Render image icon if inline type is "link"', async () => {
+        //@ts-ignore
+        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'link'} />);
+
+        await waitFor(() => {
+            expect(screen.getByLabelText('change link')).toBeTruthy();
+        });
+    });
+});

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { ResourceBrowserInlineButton } from './ResourceBrowserInlineButton';
+export default {
+    title: 'Compact Button',
+    component: ResourceBrowserInlineButton,
+} as Meta<typeof ResourceBrowserInlineButton>;
+
+const Template: StoryFn<typeof ResourceBrowserInlineButton> = (props) => {
+    const useResource = () => {
+        return { data: {}, error: false, isLoading: props.isLoading };
+    };
+    return (
+        <div className="w-[400px] m-20">
+            {/* @ts-ignore */}
+            <ResourceBrowserInlineButton {...props} useResource={useResource} />
+        </div>
+    );
+};
+
+export const Image = Template.bind({});
+
+Image.args = {
+    modalTitle: 'Choose image',
+    isLoading: false,
+    inlineType: 'image',
+    value: {
+        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
+    },
+};
+
+export const Link = Template.bind({});
+Link.args = {
+    ...Image.args,
+    modalTitle: 'Choose asset',
+    inlineType: 'link',
+};

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import MainContainer from '../MainContainer/MainContainer';
+import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
+import { ImageInline } from '../Icons/ImageInline';
+import { LinkInline } from '../Icons/LinkInline';
+import { InlineType } from '../types';
+
+export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
+    inlineType: InlineType;
+};
+
+export const ResourceBrowserInlineButton = ({
+    inlineType,
+    modalTitle,
+    allowedTypes,
+    onChange,
+    value,
+    useResource,
+    isDisabled,
+    plugin,
+    pluginMode,
+    searchEnabled,
+    source,
+    sources,
+    isLoading,
+    error,
+    setSource,
+    isModalOpen,
+    onModalStateChange,
+}: ResourceBrowserInlineButtonProps) => {
+    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+
+    const isImagePicker = inlineType === 'image';
+
+    return (
+        <div className="inline-launch-button">
+            <ModalTrigger
+                overlayTriggerState={{
+                    isOpen: isModalOpen,
+                    onOpenChange: onModalStateChange,
+                }}
+                showLabel={false}
+                label=""
+                icon={isImagePicker ? <ImageInline aria-label="change image" /> : <LinkInline aria-label="change link" />}
+                isDisabled={isDisabled}
+                scope="squiz-rb-scope"
+                containerClasses="inline-launch-button__button"
+            >
+                {(onClose, titleProps) => (
+                    <MainContainer
+                        selectedSource={source}
+                        sources={sources}
+                        preselectedResource={resource}
+                        plugin={plugin}
+                        pluginMode={pluginMode}
+                        searchEnabled={searchEnabled}
+                        title={modalTitle}
+                        titleAriaProps={titleProps}
+                        allowedTypes={allowedTypes}
+                        onSourceSelect={setSource}
+                        onClose={onClose}
+                        onChange={onChange}
+                    />
+                )}
+            </ModalTrigger>
+            <div className="inline-launch-button__label">{isImagePicker ? `Change image` : `Change link`}</div>
+        </div>
+    );
+};

package/src/index.scss

@@ -3,8 +3,11 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import '@squiz/sds/lib/styles/_imports.scss';
+
 // Components
 @import './ResourcePicker/resource-picker';
+@import './ResourceBrowserInlineButton/ResourceBrowserInlineButton';
 @import '@squiz/generic-browser-lib/src/Spinner/spinner';
 @import '@squiz/generic-browser-lib/src/Skeleton/skeleton';
 

package/src/index.stories.tsx

@@ -60,6 +60,7 @@ Primary.args = {
     singleSource: false,
     headerPortal: false,
     searchEnabled: false,
+    inline: false,
 };
 
 export const Selected = Template.bind({});
@@ -88,3 +89,14 @@ SearchEnabled.args = {
     ...Primary.args,
     searchEnabled: true,
 };
+
+export const InlineEditSelected = Template.bind({});
+InlineEditSelected.args = {
+    ...Primary.args,
+    inline: true,
+    inlineType: 'image',
+    value: {
+        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
+    },
+};

package/src/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useContext, useEffect, useCallback } from 'react';
 
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
 import {
+    InlineType,
     PluginLaunchMode,
     ResourceBrowserUnresolvedResource,
     ResourceBrowserResource,
@@ -33,12 +34,14 @@ export type ResourceBrowserProps = {
     allowedTypes?: string[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
+    inline?: boolean; // Will render open button only, no input / showing of existing selection
+    inlineType?: InlineType; // Type of inline button to show
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
 };
 
 export const ResourceBrowser = (props: ResourceBrowserProps) => {
-    const { value } = props;
+    const { value, inline, inlineType } = props;
     const [error, setError] = useState<Error | null>(null);
     const { onRequestSources, searchEnabled, plugins } = useContext(ResourceBrowserContext);
 
@@ -112,6 +115,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
             <PluginRender
                 key="default"
                 render={plugin === null}
+                inline={!!inline}
+                inlineType={inlineType}
                 {...props}
                 source={source}
                 sources={sources}
@@ -136,6 +141,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                     <PluginRender
                         key={thisPlugin.type}
                         render={thisPlugin === plugin}
+                        inline={!!inline}
+                        inlineType={inlineType}
                         {...props}
                         source={source}
                         sources={sources}

package/src/types.ts

@@ -3,6 +3,7 @@ import { SquizImageType } from '@squiz/dx-json-schema-lib';
 
 export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
 export type ResourceBrowserPluginType = 'dam' | 'matrix';
+export type InlineType = 'image' | 'link';
 
 export type AuthenticationConfiguration = {
     authUrl: string;