add site implementation

vivid-planet · May 29, 2024 · bea2250 · bea2250
1 parent 4dd75b3
commit bea2250
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 3 deletions.
diff --git a/site/src/common/blocks/CallToActionButtonBlock.tsx b/site/src/common/blocks/CallToActionButtonBlock.tsx
@@ -0,0 +1,17 @@
+"use client";
+import { PropsWithData, withPreview } from "@comet/cms-site";
+import { CallToActionButtonBlockData } from "@src/blocks.generated";
+import { LinkBlock } from "@src/common/blocks/LinkBlock";
+import { HiddenIfInvalidLink } from "@src/common/helpers/HiddenIfInvalidLink";
+import { Button } from "@src/components/common/Button";
+
+export const CallToActionButtonBlock = withPreview(
+    ({ data: { textLink, variant } }: PropsWithData<CallToActionButtonBlockData>) => (
+        <HiddenIfInvalidLink link={textLink.link}>
+            <LinkBlock data={textLink.link}>
+                <Button text={textLink.text} variant={variant} />
+            </LinkBlock>
+        </HiddenIfInvalidLink>
+    ),
+    { label: "Button" },
+);
diff --git a/site/src/common/blocks/CallToActionButtonListBlock.sc.tsx b/site/src/common/blocks/CallToActionButtonListBlock.sc.tsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const ButtonItem = styled.div`
+    flex: 1 0 100%;
+    width: 100%;
+
+    ${({ theme }) => theme.breakpoints.sm.mediaQuery} {
+        width: initial;
+        flex: initial;
+    }
+`;
+
+export const Container = 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};
+    }
+`;
diff --git a/site/src/common/blocks/CallToActionButtonListBlock.tsx b/site/src/common/blocks/CallToActionButtonListBlock.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { PropsWithData, withPreview } from "@comet/cms-site";
+import { CallToActionButtonListBlockData } from "@src/blocks.generated";
+import { CallToActionButtonBlock } from "@src/common/blocks/CallToActionButtonBlock";
+
+import { ButtonItem, Container } from "./CallToActionButtonListBlock.sc";
+
+export const CallToActionButtonListBlock = withPreview(
+    ({ data: { blocks } }: PropsWithData<CallToActionButtonListBlockData>) => {
+        return (
+            // <GridRoot>
+            <Container>
+                {blocks.map((block) => (
+                    <ButtonItem key={block.key}>
+                        <CallToActionButtonBlock data={block.props} />
+                    </ButtonItem>
+                ))}
+            </Container>
+            // </GridRoot>
+        );
+    },
+    { label: "Button List" },
+);
diff --git a/site/src/common/blocks/LinkBlock.tsx b/site/src/common/blocks/LinkBlock.tsx
@@ -1,6 +1,6 @@
 import { ExternalLinkBlock, InternalLinkBlock, OneOfBlock, PropsWithData, SupportedBlocks, withPreview } from "@comet/cms-site";
 import { LinkBlockData } from "@src/blocks.generated";
-import * as React from "react";
+import { ReactElement } from "react";
 
 const supportedBlocks: SupportedBlocks = {
     internal: ({ children, title, ...props }) => (
@@ -16,7 +16,7 @@ const supportedBlocks: SupportedBlocks = {
 };
 
 interface LinkBlockProps extends PropsWithData<LinkBlockData> {
-    children: React.ReactElement;
+    children: ReactElement;
 }
 
 export const LinkBlock = withPreview(

diff --git a/site/src/common/blocks/LinkListBlock.tsx b/site/src/common/blocks/LinkListBlock.tsx
@@ -1,6 +1,5 @@
 import { PropsWithData, withPreview } from "@comet/cms-site";
 import { LinkListBlockData } from "@src/blocks.generated";
-import * as React from "react";
 
 import { TextLinkBlock } from "./TextLinkBlock";
 

diff --git a/site/src/components/common/Button.tsx b/site/src/components/common/Button.tsx
@@ -0,0 +1,65 @@
+import styled, { css } from "styled-components";
+
+type ButtonVariant = "Contained" | "Outlined" | "Text";
+
+interface ButtonProps {
+    text: string;
+    variant?: ButtonVariant;
+}
+
+export const Button = ({ text, variant = "Outlined", ...restProps }: ButtonProps) => {
+    return (
+        <Root $variant={variant} {...restProps}>
+            {text}
+        </Root>
+    );
+};
+
+export const Root = styled.a<{ $variant: ButtonVariant }>`
+    display: inline-flex;
+    text-decoration: none;
+    padding: ${({ theme }) => `${theme.spacing.S400} ${theme.spacing.S500}`};
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease-in-out;
+
+    font-family: ${({ theme }) => theme.fontFamily};
+    font-size: 16px;
+    font-weight: 700;
+
+    ${({ $variant }) =>
+        $variant === "Contained" &&
+        css`
+            background-color: ${({ theme }) => theme.palette.primary.main};
+            color: ${({ theme }) => theme.palette.primary.contrastText};
+
+            &:hover {
+                background-color: ${({ theme }) => theme.palette.primary.dark};
+            }
+        `}
+
+    ${({ $variant }) =>
+        $variant === "Outlined" &&
+        css`
+            background-color: transparent;
+            color: ${({ theme }) => theme.palette.primary.main};
+            border: 1px solid ${({ theme }) => theme.palette.primary.main};
+
+            &:hover {
+                color: ${({ theme }) => theme.palette.primary.dark};
+                border: 1px solid ${({ theme }) => theme.palette.primary.dark};
+            }
+        `}
+    
+    ${({ $variant }) =>
+        $variant === "Text" &&
+        css`
+            background-color: transparent;
+            color: ${({ theme }) => theme.palette.primary.main};
+
+            &:hover {
+                color: ${({ theme }) => theme.palette.primary.dark};
+            }
+        `}
+`;
diff --git a/site/src/documents/pages/blocks/PageContentBlock.tsx b/site/src/documents/pages/blocks/PageContentBlock.tsx
@@ -2,6 +2,7 @@
 import { BlocksBlock, PropsWithData, SupportedBlocks, YouTubeVideoBlock } from "@comet/cms-site";
 import { PageContentBlockData } from "@src/blocks.generated";
 import { AnchorBlock } from "@src/common/blocks/AnchorBlock";
+import { CallToActionButtonListBlock } from "@src/common/blocks/CallToActionButtonListBlock";
 import { DamImageBlock } from "@src/common/blocks/DamImageBlock";
 import { DamVideoBlock } from "@src/common/blocks/DamVideoBlock";
 import { HeadlineBlock } from "@src/common/blocks/HeadlineBlock";
@@ -20,6 +21,7 @@ const supportedBlocks: SupportedBlocks = {
     damVideo: (props) => <DamVideoBlock data={props} />,
     youTubeVideo: (props) => <YouTubeVideoBlock data={props} />,
     links: (props) => <LinkListBlock data={props} />,
+    callToActionButtonList: (props) => <CallToActionButtonListBlock data={props} />,
 };
 
 export const PageContentBlock = ({ data }: PropsWithData<PageContentBlockData>) => {

diff --git a/site/src/theme.ts b/site/src/theme.ts
@@ -30,6 +30,7 @@ export const theme = {
             900: "#212121",
         },
     },
+    fontFamily: "Arial, sans-serif",
     breakpoints: {
         xs: createBreakpoint(600),
         sm: createBreakpoint(900),