Skip to content

Commit 04b5bc0

Browse files
SamCreaseySamCreasey
authored
feat: update guideline-blocks-settings/app-bridge (#702)
* update audio block toolbar * revert rte change * update methods returned from hook * replace provider * update guideline-blocks-settings * revert changes * update pnpm * update audio block * reorder image imports * update dependency * restore pnpm * restore all package.json * restore example * adjust single dependency * adjust single dependency * restore files * update package json * reset packages * update deps individually * update pnpm lock finally * update app-bridge * update package lock * fix figma test * fix test * add some attachment tests * reorder imports
1 parent 2a3d2eb commit 04b5bc0

File tree

36 files changed

+347
-299
lines changed

36 files changed

+347
-299
lines changed

‎examples/asset-upload/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
"typescript": "^5.2.2"
3232
},
3333
"dependencies": {
34-
"@frontify/app-bridge": "^3.0.0",
34+
"@frontify/app-bridge": "^3.0.2",
3535
"@frontify/fondue": "12.0.0-beta.382",
36-
"@frontify/guideline-blocks-settings": "^0.29.16",
36+
"@frontify/guideline-blocks-settings": "^0.30.1",
3737
"react": "^18.2.0",
3838
"react-dom": "^18.2.0"
3939
}

‎packages/animation-curve-block/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434
"@dnd-kit/core": "^6.0.8",
3535
"@dnd-kit/modifiers": "^7.0.0",
3636
"@dnd-kit/sortable": "^8.0.0",
37-
"@frontify/app-bridge": "^3.0.0",
37+
"@frontify/app-bridge": "^3.0.2",
3838
"@frontify/fondue": "12.0.0-beta.382",
39-
"@frontify/guideline-blocks-settings": "^0.29.16",
39+
"@frontify/guideline-blocks-settings": "^0.30.1",
4040
"@frontify/guideline-blocks-shared": "workspace:*",
4141
"react": "^18.2.0",
4242
"react-dom": "^18.2.0"

‎packages/asset-kit-block/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
"typescript": "^5.2.2"
3333
},
3434
"dependencies": {
35-
"@frontify/app-bridge": "^3.0.0",
35+
"@frontify/app-bridge": "^3.0.2",
3636
"@frontify/fondue": "12.0.0-beta.382",
37-
"@frontify/guideline-blocks-settings": "^0.29.16",
37+
"@frontify/guideline-blocks-settings": "^0.30.1",
3838
"@frontify/guideline-blocks-shared": "workspace:*",
3939
"react": "^18.2.0",
4040
"react-dom": "^18.2.0"

‎packages/audio-block/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
"typescript": "^5.2.2"
3333
},
3434
"dependencies": {
35-
"@frontify/app-bridge": "^3.0.0",
35+
"@frontify/app-bridge": "^3.0.2",
3636
"@frontify/fondue": "12.0.0-beta.382",
37-
"@frontify/guideline-blocks-settings": "^0.29.16",
37+
"@frontify/guideline-blocks-settings": "^0.30.1",
3838
"@frontify/guideline-blocks-shared": "workspace:*",
3939
"react": "^18.2.0",
4040
"react-dom": "^18.2.0"

‎packages/audio-block/src/AudioBlock.spec.ct.tsx‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
/* (c) Copyright Frontify Ltd., all rights reserved. */
22

3-
import { mount } from 'cypress/react18';
43
import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge';
4+
import { Security } from '@frontify/guideline-blocks-settings';
5+
import { mount } from 'cypress/react18';
6+
57
import { AudioBlock } from './AudioBlock';
68
import { TextPosition } from './types';
7-
import { AUDIO_ID } from './settings';
8-
import { Security } from '@frontify/guideline-blocks-settings';
9+
import { ATTACHMENTS_ASSET_ID, AUDIO_ID } from './settings';
910

1011
const AudioBlockSelector = '[data-test-id="audio-block"]';
1112
const AudioTagSelector = '[data-test-id="audio-block-audio-tag"]';
1213
const UploadPlaceholderSelector = '[data-test-id="block-inject-button"]';
1314
const AudioBlockTitleHtmlSelector = '[data-test-id="block-title"] [data-test-id="rte-content-html"]';
1415
const AudioBlockDescriptionHtmlSelector = '[data-test-id="block-description"] [data-test-id="rte-content-html"]';
1516
const DownloadButtonSelector = '[data-test-id="download-button"]';
17+
const AttachmentsTriggerSelector = '[data-test-id="attachments-flyout-button"]';
18+
const ViewModeAddonsSelector = '[data-test-id="view-mode-addons"]';
19+
const BlockWrapperSelector = '[data-test-id="block-item-wrapper"]';
1620

1721
const Title = '[{"type":"heading3","children":[{"text":"Audio Title"}]}]';
1822
const Description = '[{"type":"p","children":[{"text":"Audio Description"}]}]';
@@ -165,4 +169,54 @@ describe('Audio Block', () => {
165169
mount(<AudioBlockWithStubs />);
166170
cy.get(DownloadButtonSelector).should('not.exist');
167171
});
172+
173+
it('should render attachment button in view mode', () => {
174+
const asset = AssetDummy.with(312);
175+
const [AudioBlockWithStubs] = withAppBridgeBlockStubs(AudioBlock, {
176+
blockAssets: {
177+
[ATTACHMENTS_ASSET_ID]: [asset, asset],
178+
[AUDIO_ID]: [asset],
179+
},
180+
});
181+
mount(<AudioBlockWithStubs />);
182+
cy.get(AttachmentsTriggerSelector).should('have.length', 1).and('be.visible').and('contain.text', 2);
183+
});
184+
185+
it('should hide block wrapper and toolbar in view mode', () => {
186+
const asset = AssetDummy.with(312);
187+
const [AudioBlockWithStubs] = withAppBridgeBlockStubs(AudioBlock, {
188+
blockAssets: {
189+
[ATTACHMENTS_ASSET_ID]: [asset, asset],
190+
[AUDIO_ID]: [asset],
191+
},
192+
});
193+
mount(<AudioBlockWithStubs />);
194+
cy.get(BlockWrapperSelector).should('not.exist');
195+
});
196+
197+
it('should render attachment toolbar button in edit mode', () => {
198+
const asset = AssetDummy.with(312);
199+
const [AudioBlockWithStubs] = withAppBridgeBlockStubs(AudioBlock, {
200+
blockAssets: {
201+
[ATTACHMENTS_ASSET_ID]: [asset, asset],
202+
[AUDIO_ID]: [asset],
203+
},
204+
editorState: true,
205+
});
206+
mount(<AudioBlockWithStubs />);
207+
cy.get(AttachmentsTriggerSelector).should('have.length', 1).and('not.be.visible').and('contain.text', 2);
208+
});
209+
210+
it('should hide download and attachment buttons in edit mode', () => {
211+
const asset = AssetDummy.with(312);
212+
const [AudioBlockWithStubs] = withAppBridgeBlockStubs(AudioBlock, {
213+
blockAssets: {
214+
[ATTACHMENTS_ASSET_ID]: [asset, asset],
215+
[AUDIO_ID]: [asset],
216+
},
217+
editorState: true,
218+
});
219+
mount(<AudioBlockWithStubs />);
220+
cy.get(ViewModeAddonsSelector).should('not.exist');
221+
});
168222
});

‎packages/audio-block/src/AudioBlock.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,23 @@ import {
2222
hasRichTextValue,
2323
isDownloadable,
2424
joinClassNames,
25+
withAttachmentsProvider,
2526
} from '@frontify/guideline-blocks-settings';
2627
import { useEffect, useState } from 'react';
27-
import 'tailwindcss/tailwind.css';
28-
import '@frontify/guideline-blocks-settings/styles';
28+
2929
import { AudioPlayer, BlockAttachments, UploadPlaceholder } from './components';
3030
import { getDescriptionPlugins, titlePlugins } from './helpers/plugins';
31-
import { AUDIO_ID } from './settings';
31+
import { ATTACHMENTS_ASSET_ID, AUDIO_ID } from './settings';
3232
import { BlockSettings, TextPosition } from './types';
3333

34+
import 'tailwindcss/tailwind.css';
35+
import '@frontify/guideline-blocks-settings/styles';
36+
import '@frontify/fondue/style';
37+
3438
const DEFAULT_CONTENT_TITLE = convertToRteValue(TextStyles.imageTitle);
3539
const DEFAULT_CONTENT_DESCRIPTION = convertToRteValue(TextStyles.imageCaption);
3640

37-
export const AudioBlock = ({ appBridge }: BlockProps) => {
41+
export const AudioBlock = withAttachmentsProvider(({ appBridge }: BlockProps) => {
3842
const [isLoading, setIsLoading] = useState(false);
3943
const isEditing = useEditorState(appBridge);
4044
const [blockSettings, setBlockSettings] = useBlockSettings<BlockSettings>(appBridge);
@@ -154,8 +158,8 @@ export const AudioBlock = ({ appBridge }: BlockProps) => {
154158
/>
155159
</div>
156160
</div>
157-
{audio && (
158-
<div className="tw-flex tw-gap-2">
161+
{audio && !isEditing && (
162+
<div className="tw-flex tw-gap-2" data-test-id="view-mode-addons">
159163
{isDownloadable(
160164
blockSettings.security,
161165
blockSettings.downloadable,
@@ -172,4 +176,4 @@ export const AudioBlock = ({ appBridge }: BlockProps) => {
172176
</div>
173177
</div>
174178
);
175-
};
179+
}, ATTACHMENTS_ASSET_ID);

‎packages/audio-block/src/components/AudioPlayer.tsx‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -27,40 +27,43 @@ export const AudioPlayer = ({
2727
openFileDialog,
2828
openAssetChooser,
2929
onRemoveAsset,
30-
}: AudioPlayerProps): ReactElement => (
31-
<BlockItemWrapper
32-
shouldHideWrapper={!isEditing}
33-
toolbarFlyoutItems={[
34-
[
35-
{
36-
title: 'Replace with upload',
37-
icon: <IconArrowCircleUp20 />,
38-
onClick: openFileDialog,
39-
},
40-
{
41-
title: 'Replace with asset',
42-
icon: <IconImageStack20 />,
43-
onClick: openAssetChooser,
44-
},
45-
],
46-
]}
47-
toolbarItems={[{ icon: <IconTrashBin16 />, tooltip: 'Delete item', onClick: () => onRemoveAsset() }]}
48-
>
49-
{isLoading ? (
50-
<div className="tw-flex tw-items-center tw-justify-center tw-h-14">
51-
<LoadingCircle />
52-
</div>
53-
) : (
54-
// eslint-disable-next-line jsx-a11y/media-has-caption
55-
<audio
56-
data-test-id="audio-block-audio-tag"
57-
key={audio.id}
58-
controls
59-
className={joinClassNames(['tw-w-full tw-outline-none', FOCUS_VISIBLE_STYLE])}
60-
controlsList="nodownload"
61-
preload="metadata"
62-
src={audio.genericUrl}
63-
/>
64-
)}
65-
</BlockItemWrapper>
66-
);
30+
}: AudioPlayerProps): ReactElement => {
31+
return (
32+
<BlockItemWrapper
33+
shouldHideWrapper={!isEditing}
34+
showAttachments
35+
toolbarItems={[{ icon: <IconTrashBin16 />, tooltip: 'Delete item', onClick: onRemoveAsset }]}
36+
toolbarFlyoutItems={[
37+
[
38+
{
39+
title: 'Replace with upload',
40+
icon: <IconArrowCircleUp20 />,
41+
onClick: openFileDialog,
42+
},
43+
{
44+
title: 'Replace with asset',
45+
icon: <IconImageStack20 />,
46+
onClick: openAssetChooser,
47+
},
48+
],
49+
]}
50+
>
51+
{isLoading ? (
52+
<div className="tw-flex tw-items-center tw-justify-center tw-h-14">
53+
<LoadingCircle />
54+
</div>
55+
) : (
56+
// eslint-disable-next-line jsx-a11y/media-has-caption
57+
<audio
58+
data-test-id="audio-block-audio-tag"
59+
key={audio.id}
60+
controls
61+
className={joinClassNames(['tw-w-full tw-outline-none', FOCUS_VISIBLE_STYLE])}
62+
controlsList="nodownload"
63+
preload="metadata"
64+
src={audio.genericUrl}
65+
/>
66+
)}
67+
</BlockItemWrapper>
68+
);
69+
};

‎packages/audio-block/src/components/BlockAttachments.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
/* (c) Copyright Frontify Ltd., all rights reserved. */
22

3-
import { Attachments, useAttachments } from '@frontify/guideline-blocks-settings';
3+
import { Attachments, useAttachmentsContext } from '@frontify/guideline-blocks-settings';
44
import { BlockAttachmentsProps } from '../types';
5-
import { ATTACHMENTS_ASSET_ID } from '../settings';
65

76
export const BlockAttachments = ({ appBridge }: BlockAttachmentsProps) => {
8-
const { attachments, onAddAttachments, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =
9-
useAttachments(appBridge, ATTACHMENTS_ASSET_ID);
7+
const { attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =
8+
useAttachmentsContext();
109

1110
return (
1211
<Attachments
13-
onUpload={onAddAttachments}
12+
onUpload={onAttachmentsAdd}
1413
onDelete={onAttachmentDelete}
1514
onReplaceWithBrowse={onAttachmentReplace}
1615
onReplaceWithUpload={onAttachmentReplace}
1716
onSorted={onAttachmentsSorted}
18-
onBrowse={onAddAttachments}
17+
onBrowse={onAttachmentsAdd}
1918
items={attachments}
2019
appBridge={appBridge}
2120
/>

‎packages/brand-positioning-block/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
"typescript": "^5.2.2"
3232
},
3333
"dependencies": {
34-
"@frontify/app-bridge": "^3.0.0",
34+
"@frontify/app-bridge": "^3.0.2",
3535
"@frontify/fondue": "12.0.0-beta.382",
36-
"@frontify/guideline-blocks-settings": "^0.29.16",
36+
"@frontify/guideline-blocks-settings": "^0.30.1",
3737
"@frontify/guideline-blocks-shared": "workspace:*",
3838
"react": "^18.2.0",
3939
"react-dom": "^18.2.0"

‎packages/callout-block/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
"typescript": "^5.2.2"
3333
},
3434
"dependencies": {
35-
"@frontify/app-bridge": "^3.0.0",
35+
"@frontify/app-bridge": "^3.0.2",
3636
"@frontify/fondue": "12.0.0-beta.382",
37-
"@frontify/guideline-blocks-settings": "^0.29.16",
37+
"@frontify/guideline-blocks-settings": "^0.30.1",
3838
"@frontify/guideline-blocks-shared": "workspace:*",
3939
"react": "^18.2.0",
4040
"react-dom": "^18.2.0"

0 commit comments

Comments
 (0)