-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main' into 110-users-can-get-mor…
…e-information-on-terms-in-the-wiki
- Loading branch information
Showing
35 changed files
with
4,090 additions
and
149 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
Empty file.
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
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
51 changes: 18 additions & 33 deletions
51
frontend/components/Blocks/TextAndMediaBlock/TextAndMediaBlock.tsx
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 |
|---|---|---|
| @@ -1,74 +1,59 @@ | ||
| import RawHtml from "@/components/RawHtml"; | ||
| import MediaContent from "@/components/MediaContent/MediaContent"; | ||
| import ButtonBlock from "@/components/Button/ButtonBlock"; | ||
| import { getGrid } from "services/grid"; | ||
|
|
||
| type Props = { | ||
| data: { | ||
| type: string; | ||
| value: { | ||
| gridLayout: { | ||
| grid: string; | ||
| }; | ||
| background: { | ||
| color: string; | ||
| size: string; | ||
| }; | ||
| title: string; | ||
| text: string; | ||
| media: [ | ||
| | { | ||
| id: string; | ||
| value: string; | ||
| type: string; | ||
| alt_text: string; | ||
| } | ||
| | { | ||
| type: string; | ||
| value: { | ||
| id: number; | ||
| title: string; | ||
| img: { | ||
| src: string; | ||
| width: number; | ||
| height: number; | ||
| alt: string; | ||
| }; | ||
| }; | ||
| } | ||
| ]; | ||
| media: React.ComponentProps<typeof MediaContent>["media"]; | ||
| altText: string; | ||
| gridLayout: { grid: string }; | ||
| button?: { | ||
| button_style: string; | ||
| button_text: string; | ||
| button_hyperlink: string; | ||
| }; | ||
| buttonBlock: React.ComponentProps<typeof ButtonBlock["buttons"]>; | ||
| }; | ||
| id: string; | ||
| }; | ||
| }; | ||
|
|
||
| export default function TextAndMediaBlock({ data }: Props) { | ||
| export default function TextAndMedia({ data }: Props) { | ||
| const backgroundFullcolor = | ||
| data.value.background.size == "bg__full" ? data.value.background.color : ""; | ||
|
|
||
| // Have to create a seperate variable for this since the bg-color is semi-transparent | ||
| // Otherwise they will overlap and will the left be darker since 2 layers | ||
| const backgroundLeftColor = | ||
| data.value.background.size == "bg__full" ? "" : data.value.background.color; | ||
|
|
||
| const gridValue = getGrid(data.value.gridLayout.grid); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className={`${backgroundFullcolor} storyline__row flex flex-col lg:flex-row`}> | ||
| <div className={`${backgroundFullcolor}`}> | ||
| <div className={` storyline__row flex flex-col lg:flex-row`}> | ||
| <div | ||
| className={`flex flex-col py-12 px-10 lg:px-16 lg:pt-16 ${gridValue.left} ${backgroundLeftColor}`}> | ||
| className={`flex flex-col py-8 px-10 lg:px-16 lg:pt-16 ${gridValue.left} ${backgroundLeftColor}`}> | ||
| <RawHtml html={data.value?.text} /> | ||
| </div> | ||
|
|
||
| <div className={`flex flex-col ${gridValue.right}`}> | ||
| <div className="lg:sticky py-12 px-10 lg:px-16 lg:pt-24 top-0"> | ||
| <div className="lg:sticky py-8 px-10 lg:px-16 lg:pt-24 top-0"> | ||
| <MediaContent media={data.value.media} alt={data.value.altText} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {data.value.buttonBlock.length > 0 && ( | ||
| <ButtonBlock | ||
| buttons={data.value.buttonBlock[0].value.buttons} | ||
| align={data.value.buttonBlock[0].value.buttonsAlign}></ButtonBlock> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
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,69 @@ | ||
| import React, { createContext, useContext } from "react"; | ||
|
|
||
| type ButtonVariant = keyof typeof variants; | ||
|
|
||
| type Props<T extends React.ElementType> = { | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| tag?: React.ElementType; | ||
| variant?: ButtonVariant; | ||
| } & React.ComponentPropsWithoutRef<T>; | ||
|
|
||
| const variants = { | ||
| dark: "border-white text-white bg-holon-blue-900 hover:bg-holon-blue-500 ", | ||
| light: "bg-holon-gold-200 border-holon-blue-900 hover:bg-holon-gold-600", | ||
| }; | ||
|
|
||
| const ButtonContext = createContext<ButtonVariant | undefined>(undefined); | ||
|
|
||
| export default function Button<T extends React.ElementType>({ | ||
| children, | ||
| className, | ||
| tag: Tag = "button", | ||
| variant = "dark", | ||
| details, | ||
| ...rest | ||
| }: Props<T>) { | ||
| const colorClasses = variants[variant] || variants.dark; | ||
|
|
||
| let externLinkProps: | ||
| | boolean | ||
| | { | ||
| target: string; | ||
| rel: string; | ||
| } = { | ||
| target: "_blank", | ||
| rel: "noopener noreferrer", | ||
| }; | ||
|
|
||
| function createLink(detail) { | ||
| if (detail.buttonLink[0].type === "intern") { | ||
| externLinkProps = false; | ||
| } | ||
| } | ||
|
|
||
| createLink(details); | ||
|
|
||
| return ( | ||
| <Tag | ||
| className={`${className} ${colorClasses} relative rounded border-2 px-4 py-3 mr-4 mb-4 min-w-[8rem] text-center font-medium leading-5 transition enabled:active:translate-x-holon-bh-x enabled:active:translate-y-holon-bh-y disabled:opacity-50`.trim()} | ||
| {...rest} | ||
| href={details.buttonLink[0].value} | ||
| {...externLinkProps}> | ||
| <ButtonContext.Provider value={variant}>{children}</ButtonContext.Provider> | ||
| </Tag> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Hook which provides access to the button variant. | ||
| */ | ||
| export function useButtonContext() { | ||
| const context = useContext(ButtonContext); | ||
|
|
||
| if (!context) { | ||
| throw new Error("useButtonContext must be used within a Button"); | ||
| } | ||
|
|
||
| return context; | ||
| } |
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,39 @@ | ||
| import Button from "@/components/Button/Button"; | ||
|
|
||
| type Props = { | ||
| buttons: Array<Button>; | ||
| align: string; | ||
| }; | ||
|
|
||
| type Button = { | ||
| type: string; | ||
| value: { | ||
| buttonStyle: "dark" | "light" | undefined; | ||
| buttonText: string; | ||
| buttonLink: [ | ||
| { | ||
| type: "intern" | "extern"; | ||
| value: number | string; | ||
| id: string; | ||
| } | ||
| ]; | ||
| buttonAlign: string; | ||
| }; | ||
| id: string; | ||
| }; | ||
|
|
||
| export default function ButtonBlock({ buttons, align }: Props) { | ||
| const alignValue = align === "btn-left" ? "justify-start" : "justify-center"; | ||
|
|
||
| return ( | ||
| <div className={`flex flex-row w-full ${alignValue} h-fit px-10 lg:px-16 lg:pb-4 flex-wrap `}> | ||
| {buttons.map((button, index) => { | ||
| return ( | ||
| <Button tag="a" details={button.value} variant={button.value.buttonStyle} key={index}> | ||
| {button.value.buttonText} | ||
| </Button> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.