-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add call to action (and list) block (#249)
--------- Co-authored-by: Ricky James Smith <rs@vivid-planet.com>
- Loading branch information
1 parent
3d3c787
commit dfe749a
Showing
15 changed files
with
364 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { BlockCategory, createCompositeBlock, createCompositeBlockSelectField } from "@comet/blocks-admin"; | ||
| import { CallToActionBlockData } from "@src/blocks.generated"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import { TextLinkBlock } from "./TextLinkBlock"; | ||
|
|
||
| export const CallToActionBlock = createCompositeBlock( | ||
| { | ||
| name: "CallToAction", | ||
| displayName: <FormattedMessage id="callToActionBlock.displayName" defaultMessage="Call To Action" />, | ||
| blocks: { | ||
| textLink: { | ||
| block: TextLinkBlock, | ||
| title: <FormattedMessage id="callToActionBlock.link.displayName" defaultMessage="Link" />, | ||
| }, | ||
| variant: { | ||
| block: createCompositeBlockSelectField<CallToActionBlockData["variant"]>({ | ||
| defaultValue: "Contained", | ||
| options: [ | ||
| { value: "Contained", label: <FormattedMessage id="callToActionBlock.variant.contained" defaultMessage="Contained" /> }, | ||
| { value: "Outlined", label: <FormattedMessage id="callToActionBlock.variant.outlined" defaultMessage="Outlined" /> }, | ||
| { value: "Text", label: <FormattedMessage id="callToActionBlock.variant.text" defaultMessage="Text" /> }, | ||
| ], | ||
| fieldProps: { label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />, fullWidth: true }, | ||
| }), | ||
| }, | ||
| }, | ||
| }, | ||
| (block) => { | ||
| block.category = BlockCategory.Navigation; | ||
| return block; | ||
| }, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { createListBlock } from "@comet/blocks-admin"; | ||
| import { CallToActionBlock } from "@src/common/blocks/CallToActionBlock"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| export const CallToActionListBlock = createListBlock({ | ||
| name: "CallToActionList", | ||
| displayName: <FormattedMessage id="callToActionListBlock.displayName" defaultMessage="Call To Action List" />, | ||
| block: CallToActionBlock, | ||
| itemName: <FormattedMessage id="callToActionListBlock.itemName" defaultMessage="action" />, | ||
| itemsName: <FormattedMessage id="callToActionListBlock.itemsName" defaultMessage="actions" />, | ||
| }); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { createListBlock } from "@comet/blocks-api"; | ||
| import { CallToActionBlock } from "@src/common/blocks/call-to-action.block"; | ||
|
|
||
| export const CallToActionListBlock = createListBlock({ block: CallToActionBlock }, "CallToActionList"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { | ||
| BlockData, | ||
| BlockDataInterface, | ||
| BlockField, | ||
| BlockInput, | ||
| ChildBlock, | ||
| ChildBlockInput, | ||
| createBlock, | ||
| ExtractBlockInput, | ||
| inputToData, | ||
| } from "@comet/blocks-api"; | ||
| import { IsEnum } from "class-validator"; | ||
|
|
||
| import { TextLinkBlock } from "./text-link.block"; | ||
|
|
||
| enum Variant { | ||
| Contained = "Contained", | ||
| Outlined = "Outlined", | ||
| Text = "Text", | ||
| } | ||
|
|
||
| class CallToActionBlockData extends BlockData { | ||
| @ChildBlock(TextLinkBlock) | ||
| textLink: BlockDataInterface; | ||
|
|
||
| @BlockField({ type: "enum", enum: Variant }) | ||
| variant: Variant; | ||
| } | ||
|
|
||
| class CallToActionBlockInput extends BlockInput { | ||
| @ChildBlockInput(TextLinkBlock) | ||
| textLink: ExtractBlockInput<typeof TextLinkBlock>; | ||
|
|
||
| @IsEnum(Variant) | ||
| @BlockField({ type: "enum", enum: Variant }) | ||
| variant: Variant; | ||
|
|
||
| transformToBlockData(): CallToActionBlockData { | ||
| return inputToData(CallToActionBlockData, this); | ||
| } | ||
| } | ||
|
|
||
| export const CallToActionBlock = createBlock(CallToActionBlockData, CallToActionBlockInput, "CallToAction"); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| "use client"; | ||
| import { PropsWithData, withPreview } from "@comet/cms-site"; | ||
| import { CallToActionBlockData } from "@src/blocks.generated"; | ||
| import { LinkBlock } from "@src/common/blocks/LinkBlock"; | ||
| import { HiddenIfInvalidLink } from "@src/common/helpers/HiddenIfInvalidLink"; | ||
| import { Button, ButtonVariant } from "@src/components/common/Button"; | ||
|
|
||
| const buttonVariantMap: Record<CallToActionBlockData["variant"], ButtonVariant> = { | ||
| Contained: "contained", | ||
| Outlined: "outlined", | ||
| Text: "text", | ||
| }; | ||
|
|
||
| export const CallToActionBlock = withPreview( | ||
| ({ data: { textLink, variant } }: PropsWithData<CallToActionBlockData>) => ( | ||
| <HiddenIfInvalidLink link={textLink.link}> | ||
| <LinkBlock data={textLink.link}> | ||
| <Button variant={buttonVariantMap[variant]}>{textLink.text}</Button> | ||
| </LinkBlock> | ||
| </HiddenIfInvalidLink> | ||
| ), | ||
| { label: "Call To Action" }, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| "use client"; | ||
| import { ListBlock, PropsWithData, withPreview } from "@comet/cms-site"; | ||
| import { CallToActionListBlockData } from "@src/blocks.generated"; | ||
| import { CallToActionBlock } from "@src/common/blocks/CallToActionBlock"; | ||
| import styled from "styled-components"; | ||
|
|
||
| export const CallToActionListBlock = withPreview( | ||
| ({ data }: PropsWithData<CallToActionListBlockData>) => ( | ||
| <Root> | ||
| <ListBlock data={data} block={(block) => <CallToActionBlock data={block} />} /> | ||
| </Root> | ||
| ), | ||
| { label: "Call To Action List" }, | ||
| ); | ||
|
|
||
| const Root = styled.div` | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: row; | ||
| gap: ${({ theme }) => theme.spacing.S300}; | ||
| ${({ theme }) => theme.breakpoints.sm.mediaQuery} { | ||
| gap: ${({ theme }) => theme.spacing.S400}; | ||
| } | ||
| `; |
Oops, something went wrong.