Skip to content

Commit

Permalink
Add accordion block (#260)
Browse files Browse the repository at this point in the history
  • Loading branch information
SebiVPS authored Jul 2, 2024
1 parent ad69f67 commit 3de6c9f
Show file tree
Hide file tree
Showing 14 changed files with 472 additions and 0 deletions.
11 changes: 11 additions & 0 deletions admin/src/common/blocks/AccordionBlock.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { createListBlock } from "@comet/blocks-admin";
import { AccordionItemBlock } from "@src/common/blocks/AccordionItemBlock";
import { FormattedMessage } from "react-intl";

export const AccordionBlock = createListBlock({
name: "Accordion",
displayName: <FormattedMessage id="accordionBlock.displayName" defaultMessage="Accordion" />,
block: AccordionItemBlock,
itemName: <FormattedMessage id="accordionBlock.itemName" defaultMessage="accordion item" />,
itemsName: <FormattedMessage id="accordionBlock.itemsName" defaultMessage="accordion items" />,
});
68 changes: 68 additions & 0 deletions admin/src/common/blocks/AccordionItemBlock.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { SwitchField } from "@comet/admin";
import {
BlockCategory,
BlocksFinalForm,
createBlocksBlock,
createCompositeBlock,
createCompositeBlockTextField,
createCompositeSetting,
} from "@comet/blocks-admin";
import { AccordionItemBlockData } from "@src/blocks.generated";
import { CallToActionListBlock } from "@src/common/blocks/CallToActionListBlock";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
import { FormattedMessage } from "react-intl";

const AccordionContentBlock = createBlocksBlock({
name: "AccordionContent",
supportedBlocks: {
richtext: RichTextBlock,
space: SpaceBlock,
heading: HeadingBlock,
callToActionList: CallToActionListBlock,
},
});

export const AccordionItemBlock = createCompositeBlock(
{
name: "AccordionItem",
displayName: <FormattedMessage id="accordionBlock.displayName" defaultMessage="Accordion Item" />,
blocks: {
title: {
block: createCompositeBlockTextField({
fieldProps: { fullWidth: true, label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" /> },
}),
hiddenInSubroute: true,
},
content: {
block: AccordionContentBlock,
title: <FormattedMessage id="accordionBlock.accordionItem.content" defaultMessage="Content" />,
},
openByDefault: {
block: createCompositeSetting<AccordionItemBlockData["openByDefault"]>({
defaultValue: false,
AdminComponent: ({ state, updateState }) => {
return (
<BlocksFinalForm<{ openByDefault: typeof state }>
onSubmit={({ openByDefault }) => updateState(openByDefault)}
initialValues={{ openByDefault: state }}
>
<SwitchField
name="openByDefault"
label={<FormattedMessage id="accordionBlock.accordionItem.openByDefault" defaultMessage="Open by default" />}
/>
</BlocksFinalForm>
);
},
}),
hiddenInSubroute: true,
},
},
},
(block) => {
block.category = BlockCategory.TextAndContent;
block.previewContent = (state) => (state.title !== undefined ? [{ type: "text", content: state.title }] : []);
return block;
},
);
2 changes: 2 additions & 0 deletions admin/src/documents/pages/blocks/ColumnsBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
createColumnsBlock,
} from "@comet/blocks-admin";
import { AnchorBlock } from "@comet/cms-admin";
import { AccordionBlock } from "@src/common/blocks/AccordionBlock";
import { CallToActionListBlock } from "@src/common/blocks/CallToActionListBlock";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
Expand Down Expand Up @@ -111,6 +112,7 @@ const twoColumnLayouts = [
const ColumnsContentBlock = createBlocksBlock({
name: "ColumnsContent",
supportedBlocks: {
accordion: AccordionBlock,
anchor: AnchorBlock,
richtext: RichTextBlock,
space: SpaceBlock,
Expand Down
2 changes: 2 additions & 0 deletions admin/src/documents/pages/blocks/PageContentBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createBlocksBlock, YouTubeVideoBlock } from "@comet/blocks-admin";
import { AnchorBlock, DamImageBlock, DamVideoBlock } from "@comet/cms-admin";
import { AccordionBlock } from "@src/common/blocks/AccordionBlock";
import { CallToActionListBlock } from "@src/common/blocks/CallToActionListBlock";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
Expand All @@ -10,6 +11,7 @@ import { ColumnsBlock } from "@src/documents/pages/blocks/ColumnsBlock";
export const PageContentBlock = createBlocksBlock({
name: "PageContent",
supportedBlocks: {
accordion: AccordionBlock,
anchor: AnchorBlock,
space: SpaceBlock,
richtext: RichTextBlock,
Expand Down
177 changes: 177 additions & 0 deletions api/block-meta.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,177 @@
[
{
"name": "Accordion",
"fields": [
{
"name": "blocks",
"kind": "NestedObjectList",
"object": {
"fields": [
{
"name": "key",
"kind": "String",
"nullable": false
},
{
"name": "visible",
"kind": "Boolean",
"nullable": false
},
{
"name": "props",
"kind": "Block",
"block": "AccordionItem",
"nullable": false
}
]
},
"nullable": false
}
],
"inputFields": [
{
"name": "blocks",
"kind": "NestedObjectList",
"object": {
"fields": [
{
"name": "key",
"kind": "String",
"nullable": false
},
{
"name": "visible",
"kind": "Boolean",
"nullable": false
},
{
"name": "props",
"kind": "Block",
"block": "AccordionItem",
"nullable": false
}
]
},
"nullable": false
}
]
},
{
"name": "AccordionContent",
"fields": [
{
"name": "blocks",
"kind": "NestedObjectList",
"object": {
"fields": [
{
"name": "key",
"kind": "String",
"nullable": false
},
{
"name": "visible",
"kind": "Boolean",
"nullable": false
},
{
"name": "type",
"kind": "String",
"nullable": false
},
{
"name": "props",
"kind": "OneOfBlocks",
"blocks": {
"richtext": "RichText",
"heading": "Heading",
"space": "Space",
"callToActionList": "CallToActionList"
},
"nullable": false
}
]
},
"nullable": false
}
],
"inputFields": [
{
"name": "blocks",
"kind": "NestedObjectList",
"object": {
"fields": [
{
"name": "key",
"kind": "String",
"nullable": false
},
{
"name": "visible",
"kind": "Boolean",
"nullable": false
},
{
"name": "type",
"kind": "String",
"nullable": false
},
{
"name": "props",
"kind": "OneOfBlocks",
"blocks": {
"richtext": "RichText",
"heading": "Heading",
"space": "Space",
"callToActionList": "CallToActionList"
},
"nullable": false
}
]
},
"nullable": false
}
]
},
{
"name": "AccordionItem",
"fields": [
{
"name": "title",
"kind": "String",
"nullable": true
},
{
"name": "content",
"kind": "Block",
"block": "AccordionContent",
"nullable": false
},
{
"name": "openByDefault",
"kind": "Boolean",
"nullable": false
}
],
"inputFields": [
{
"name": "title",
"kind": "String",
"nullable": true
},
{
"name": "content",
"kind": "Block",
"block": "AccordionContent",
"nullable": false
},
{
"name": "openByDefault",
"kind": "Boolean",
"nullable": false
}
]
},
{
"name": "Anchor",
"fields": [
Expand Down Expand Up @@ -206,6 +379,7 @@
"name": "props",
"kind": "OneOfBlocks",
"blocks": {
"accordion": "Accordion",
"anchor": "Anchor",
"richtext": "RichText",
"space": "Space",
Expand Down Expand Up @@ -244,6 +418,7 @@
"name": "props",
"kind": "OneOfBlocks",
"blocks": {
"accordion": "Accordion",
"anchor": "Anchor",
"richtext": "RichText",
"space": "Space",
Expand Down Expand Up @@ -781,6 +956,7 @@
"name": "props",
"kind": "OneOfBlocks",
"blocks": {
"accordion": "Accordion",
"anchor": "Anchor",
"space": "Space",
"richtext": "RichText",
Expand Down Expand Up @@ -824,6 +1000,7 @@
"name": "props",
"kind": "OneOfBlocks",
"blocks": {
"accordion": "Accordion",
"anchor": "Anchor",
"space": "Space",
"richtext": "RichText",
Expand Down
61 changes: 61 additions & 0 deletions api/src/common/blocks/accordion-item.block.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import {
BlockData,
BlockDataInterface,
BlockField,
BlockInput,
ChildBlock,
ChildBlockInput,
createBlock,
createBlocksBlock,
ExtractBlockInput,
inputToData,
} from "@comet/blocks-api";
import { IsUndefinable } from "@comet/cms-api";
import { CallToActionListBlock } from "@src/common/blocks/call-to-action-list.block";
import { HeadingBlock } from "@src/common/blocks/heading.block";
import { RichTextBlock } from "@src/common/blocks/rich-text.block";
import { SpaceBlock } from "@src/common/blocks/space.block";
import { IsBoolean, IsString } from "class-validator";

const AccordionContentBlock = createBlocksBlock(
{
supportedBlocks: {
richtext: RichTextBlock,
heading: HeadingBlock,
space: SpaceBlock,
callToActionList: CallToActionListBlock,
},
},
"AccordionContent",
);

class AccordionItemBlockData extends BlockData {
@BlockField({ nullable: true })
title?: string;

@ChildBlock(AccordionContentBlock)
content: BlockDataInterface;

@BlockField()
openByDefault: boolean;
}

class AccordionItemBlockInput extends BlockInput {
@IsUndefinable()
@BlockField({ nullable: true })
@IsString()
title?: string;

@ChildBlockInput(AccordionContentBlock)
content: ExtractBlockInput<typeof AccordionContentBlock>;

@IsBoolean()
@BlockField()
openByDefault: boolean;

transformToBlockData(): AccordionItemBlockData {
return inputToData(AccordionItemBlockData, this);
}
}

export const AccordionItemBlock = createBlock(AccordionItemBlockData, AccordionItemBlockInput, "AccordionItem");
4 changes: 4 additions & 0 deletions api/src/common/blocks/accordion.block.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { createListBlock } from "@comet/blocks-api";
import { AccordionItemBlock } from "@src/common/blocks/accordion-item.block";

export const AccordionBlock = createListBlock({ block: AccordionItemBlock }, "Accordion");
Loading

0 comments on commit 3de6c9f

Please sign in to comment.