From b904a83d66c65d2e037a7f1dd56403259eba87d9 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Tue, 26 Nov 2024 11:24:19 +0100 Subject: [PATCH 1/5] Add badge component --- src/components/badge/Badge.tsx | 27 +++++++++++++++++++++++++++ src/components/badge/badge.module.css | 9 +++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/components/badge/Badge.tsx create mode 100644 src/components/badge/badge.module.css diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx new file mode 100644 index 000000000..cde0a0a50 --- /dev/null +++ b/src/components/badge/Badge.tsx @@ -0,0 +1,27 @@ +import Text from "src/components/text/Text"; + +import styles from "./badge.module.css"; + +interface IBadge { + children: React.ReactNode; + badgeColor?: string; + textColor?: string; +} + +const Badge = ({ + children, + badgeColor = "#EAEAEA", + textColor = "#222424", +}: IBadge) => { + const badgeColors = { + backgroundColor: badgeColor, + color: textColor, + }; + return ( +
+ {children} +
+ ); +}; + +export default Badge; diff --git a/src/components/badge/badge.module.css b/src/components/badge/badge.module.css new file mode 100644 index 000000000..a47b1724a --- /dev/null +++ b/src/components/badge/badge.module.css @@ -0,0 +1,9 @@ +.badgeWrapper { + display: inline-flex; + height: 1.5rem; + padding: 0.375rem 0.75rem; + align-items: center; + gap: 0.5rem; + flex-shrink: 0; + border-radius: 624.9375rem; +} From a2c2d884a60672ed79c21b631693aedec96f49f1 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Tue, 26 Nov 2024 11:27:37 +0100 Subject: [PATCH 2/5] Update customlink styles and fonts --- public/_assets/arrow-right.svg | 6 ++ public/_assets/arrow-up-right.svg | 6 ++ public/_assets/arrow.svg | 8 -- src/components/link/link.module.css | 80 +++++++++++++++---- .../linkButton/linkButton.module.css | 4 +- src/components/text/text.module.css | 5 +- 6 files changed, 81 insertions(+), 28 deletions(-) create mode 100644 public/_assets/arrow-right.svg create mode 100644 public/_assets/arrow-up-right.svg delete mode 100644 public/_assets/arrow.svg diff --git a/public/_assets/arrow-right.svg b/public/_assets/arrow-right.svg new file mode 100644 index 000000000..4088b3f25 --- /dev/null +++ b/public/_assets/arrow-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/_assets/arrow-up-right.svg b/public/_assets/arrow-up-right.svg new file mode 100644 index 000000000..0c5f6d1dc --- /dev/null +++ b/public/_assets/arrow-up-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/_assets/arrow.svg b/public/_assets/arrow.svg deleted file mode 100644 index 601f40530..000000000 --- a/public/_assets/arrow.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css index 16b1968d4..13e648223 100644 --- a/src/components/link/link.module.css +++ b/src/components/link/link.module.css @@ -11,21 +11,42 @@ gap: 0; } -.underline { - width: 100%; - height: 0.0625rem; - background-color: var(--primary-black); -} +.internalLink { + color: var(--primary-black); -.colorLight .underline { - background-color: var(--primary-white); -} + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-decoration: none; + gap: 0.5rem; + font-family: var(--font-britti-sans); + font-size: 1.125rem; + font-weight: 300; + + transition: gap 100ms ease-in-out; -.sizeSmall .underline { - margin-top: -0.125rem; + @media (min-width: 1024px) { + font-size: 1.25rem; + } + + &:hover { + gap: 1rem; + font-weight: 400; + } + + &::after { + content: ""; + width: 24px; + height: 24px; + display: inline-block; + -webkit-mask-size: cover; + background-color: var(--primary-black); + -webkit-mask: url("/_assets/arrow-right.svg") no-repeat 50% 50%; + } } -.link { +.externalLink { color: var(--primary-black); display: inline-flex; @@ -36,7 +57,7 @@ gap: 0.5rem; font-family: var(--font-britti-sans); font-size: 1.125rem; - font-weight: 500; + font-weight: 300; transition: gap 100ms ease-in-out; @@ -46,7 +67,7 @@ &:hover { gap: 1rem; - font-weight: 600; + font-weight: 400; } &::after { @@ -55,12 +76,20 @@ height: 24px; display: inline-block; -webkit-mask-size: cover; + background-color: var(--primary-black); + -webkit-mask: url("/_assets/arrow-up-right.svg") no-repeat 50% 50%; + } +} + +.colorLight .internalLink { + color: var(--primary-white); + + &::after { background-color: var(--primary-white); - -webkit-mask: url("/_assets/arrow.svg") no-repeat 50% 50%; } } -.colorLight .link { +.colorLight .externalLink { color: var(--primary-white); &::after { @@ -68,7 +97,24 @@ } } -.sizeSmall .link { +.sizeSmall .internalLink { + font-size: 0.95rem; + gap: 0.25rem; + + @media (min-width: 1024px) { + font-size: 1rem; + } + + &:hover { + gap: 0.5rem; + } + + &::after { + transform: scale(0.75); + } +} + +.sizeSmall .externalLink { font-size: 0.95rem; gap: 0.25rem; @@ -87,6 +133,8 @@ .span { padding-bottom: 0.125rem; + text-decoration: underline; + text-underline-position: from-font; } .sizeSmall .span { diff --git a/src/components/linkButton/linkButton.module.css b/src/components/linkButton/linkButton.module.css index b4130635d..8df292857 100644 --- a/src/components/linkButton/linkButton.module.css +++ b/src/components/linkButton/linkButton.module.css @@ -32,9 +32,9 @@ width: 1.5rem; height: 1.5rem; content: ""; - -webkit-mask: url("/_assets/arrow.svg") no-repeat center; + -webkit-mask: url("/_assets/arrow-right.svg") no-repeat center; -webkit-mask-size: cover; - mask: url("/_assets/arrow.svg") no-repeat center; + mask: url("/_assets/arrow-right.svg") no-repeat center; mask-size: cover; } } diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index de6e37166..b820bfa94 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -83,14 +83,15 @@ } .bodyNormal { - font-size: 20px; + font-size: 1.25rem; font-style: normal; font-weight: 300; } .bodySmall { font-size: 1rem; - font-weight: 400; + font-weight: 300; + line-height: 150%; } /* TODO: add font variables */ From 99f4bfb8b61fe5141aa54ce87029f7a735a0dde3 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Tue, 26 Nov 2024 11:28:01 +0100 Subject: [PATCH 3/5] Update break points --- src/styles/global.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index af1df6e96..9dae07c03 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -36,8 +36,8 @@ html { --background-bg-light-secondary: #eaeaea; /* breakpoints */ - --breakpoint-mobile: 767px; - --breakpoint-tablet: 640px; + --breakpoint-mobile: 425px; + --breakpoint-tablet: 834px; --breakpoint-large: 1024px; /* max widths */ From 2db17078ef44924d5a09c37386a66f825c5a2bf1 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Tue, 26 Nov 2024 11:31:54 +0100 Subject: [PATCH 4/5] Update customlink style --- src/components/link/CustomLink.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx index 73ad4d033..135757ec0 100644 --- a/src/components/link/CustomLink.tsx +++ b/src/components/link/CustomLink.tsx @@ -43,7 +43,11 @@ const CustomLink = ({ } > {link.linkTitle} -
) : ( Date: Tue, 26 Nov 2024 11:32:20 +0100 Subject: [PATCH 5/5] Refactor and update styling to projectinfo section in customer case --- .../customerCase/CustomerCase.tsx | 154 +---------------- .../customerCase/customerCase.module.css | 57 +----- .../projectInfo/CustomerCaseProjectInfo.tsx | 163 ++++++++++++++++++ .../customerCaseProjectInfo.module.css | 84 +++++++++ studioShared/lib/interfaces/customerCases.ts | 2 +- studioShared/lib/queries/customerCases.ts | 1 + 6 files changed, 262 insertions(+), 199 deletions(-) create mode 100644 src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx create mode 100644 src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx index 373fa6188..dba1236ab 100644 --- a/src/components/customerCases/customerCase/CustomerCase.tsx +++ b/src/components/customerCases/customerCase/CustomerCase.tsx @@ -1,16 +1,12 @@ -import { getTranslations } from "next-intl/server"; - import { SanitySharedImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import { fetchEmployeesByEmails } from "src/utils/employees"; -import { - CustomerCase as CustomerCaseDocument, - CustomerSector, -} from "studioShared/lib/interfaces/customerCases"; +import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases"; import ContactInformation from "./contactInformation/ContactInformation"; import styles from "./customerCase.module.css"; import FeaturedCases from "./featuredCases/FeaturedCases"; +import CustomerCaseProjectInfo from "./projectInfo/CustomerCaseProjectInfo"; import CustomerCaseConsultants from "./sections/customerCaseConsultants/CustomerCaseConsultants"; import { CustomerCaseSection } from "./sections/CustomerCaseSection"; @@ -27,8 +23,6 @@ export default async function CustomerCase({ customerCase.projectInfo.consultants, ); - const t = await getTranslations("customer_case"); - return (
@@ -36,144 +30,14 @@ export default async function CustomerCase({ {customerCase.basicTitle}
-
-
- {customerCase.projectInfo.customerSectors && ( -
- - {t("customer").toUpperCase()} - -
- {customerCase.projectInfo.customerSectors.map( - (sector: CustomerSector) => ( - - {sector.customerSector} - - ), - )} -
-
- )} - {consultantsResult.ok && ( -
- - {t("variants").toUpperCase()} - -
- 【 - {consultantsResult.value.map((c) => ( - - {c.name} - - ))} - 】 -
-
- )} - {customerCase.projectInfo.collaborators && ( -
- - {t("collaborators").toUpperCase()} - -
- {customerCase.projectInfo.collaborators.map( - (collaborator) => ( - - {collaborator} - - ), - )} -
-
- )} - {customerCase.projectInfo.url && ( -
- - {t("url").toUpperCase()} - - {customerCase.projectInfo.url} -
- )} -
-
- {customerCase.projectInfo.deliveries && ( -
- {customerCase.projectInfo.deliveries["projectManagement"] && ( -
- - {t("project_management").toUpperCase()} - -
- {customerCase.projectInfo.deliveries[ - "projectManagement" - ].map((projectManagement) => ( - - {projectManagement.projectManagementDelivery} - - ))} -
-
- )} - {customerCase.projectInfo.deliveries["design"] && ( -
- - {t("design").toUpperCase()} - -
- {customerCase.projectInfo.deliveries["design"].map( - (design) => ( - - {design.designDelivery} - - ), - )} -
-
- )} - {customerCase.projectInfo.deliveries["development"] && ( -
- - {t("development").toUpperCase()} - -
- {customerCase.projectInfo.deliveries["development"].map( - (development) => ( - - {development.developmentDelivery} - - ), - )} -
-
- )} -
- )} + {consultantsResult.ok && ( +
+
-
+ )}
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css index 2b64c4258..5fd4bfcd3 100644 --- a/src/components/customerCases/customerCase/customerCase.module.css +++ b/src/components/customerCases/customerCase/customerCase.module.css @@ -50,61 +50,12 @@ margin: 1rem 0; } -.projectInfo { - display: flex; - flex-direction: row; - gap: 1rem; -} - -.projectInfoInner { - width: 537px; - max-width: 537px; - gap: 1.5rem; - display: flex; - flex-direction: column; - flex-wrap: wrap; -} - -.dotSeperator::after { - content: "·"; - margin: 0 0.5rem; -} - -.dotSeperator:last-child:after { - content: ""; - margin: 0; -} - -.varianter { - max-width: 537px; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.dotSeperatorVarianter::after { - content: "·"; - margin: 0 0.5rem; -} - -.dotSeperatorVarianter:nth-last-child(2)::after { - content: ""; - margin: 0rem; -} - -.projectInfoItem { - display: flex; - flex-direction: row; -} - -.title { - color: var(--text-tertiary); -} - -.deliveries { +.projectInfoWrapper { display: flex; flex-direction: column; - gap: 1.5rem; + align-self: center; + width: 100%; + max-width: 960px; } .sectionsWrapper { diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx new file mode 100644 index 000000000..08cddba02 --- /dev/null +++ b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx @@ -0,0 +1,163 @@ +import { getTranslations } from "next-intl/server"; + +import Badge from "src/components/badge/Badge"; +import CustomLink from "src/components/link/CustomLink"; +import Text from "src/components/text/Text"; +import { ChewbaccaEmployee } from "src/types/employees"; +import { LinkType } from "studio/lib/interfaces/navigation"; +import { + CustomerCaseProjectInfo as CustomerCaseCaseProjectInfoObject, + CustomerSector, +} from "studioShared/lib/interfaces/customerCases"; + +import styles from "./customerCaseProjectInfo.module.css"; + +interface CustomerCaseProjectInfoProps { + projectInfo: CustomerCaseCaseProjectInfoObject; + consultantsInProject: ChewbaccaEmployee[]; +} + +export default async function CustomerCaseProjectInfo({ + projectInfo, + consultantsInProject, +}: CustomerCaseProjectInfoProps) { + const t = await getTranslations("customer_case"); + + return ( + <> +
+
+ {projectInfo.customerSectors && ( +
+ + {t("customer").toUpperCase()} + +
+ {projectInfo.customerSectors.map((sector: CustomerSector) => ( + {sector.customerSector} + ))} +
+
+ )} +
+ + {t("variants").toUpperCase()} + +
+ 【 + {consultantsInProject.map((c) => ( + + {c.name} + + ))} + 】 +
+
+ {projectInfo.collaborators && ( +
+ + {t("collaborators").toUpperCase()} + +
+ {projectInfo.collaborators.map((collaborator) => ( + + {collaborator} + + ))} +
+
+ )} + {projectInfo.url && ( +
+ + {t("url")} + + +
+ )} +
+
+ {projectInfo.deliveries && ( +
+ {projectInfo.deliveries["projectManagement"] && ( +
+ + {t("project_management").toUpperCase()} + +
+ {projectInfo.deliveries["projectManagement"].map( + (projectManagement) => ( + + {projectManagement.projectManagementDelivery} + + ), + )} +
+
+ )} + {projectInfo.deliveries["design"] && ( +
+ + {t("design").toUpperCase()} + +
+ {projectInfo.deliveries["design"].map((design) => ( + + {design.designDelivery} + + ))} +
+
+ )} + {projectInfo.deliveries["development"] && ( +
+ + {t("development").toUpperCase()} + +
+ {projectInfo.deliveries["development"].map( + (development) => ( + + {development.developmentDelivery} + + ), + )} +
+
+ )} +
+ )} +
+
+ + ); +} diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css new file mode 100644 index 000000000..c652f6ff6 --- /dev/null +++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css @@ -0,0 +1,84 @@ +.projectInfo { + display: flex; + flex-direction: row; + gap: 1rem; + width: 100%; + + @media (max-width: 425px) { + flex-direction: column; + gap: 3rem; + } +} + +.projectInfoInner { + gap: 1.5rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +.badgeWrapper { + display: flex; + align-items: flex-start; + align-content: flex-start; + gap: 0.375rem; + align-self: stretch; + flex-wrap: wrap; + padding-top: 0.25rem; +} + +.dotSeperator::after { + content: "·"; + margin: 0 0.5rem; +} + +.dotSeperator:last-child:after { + content: ""; + margin: 0; +} + +.varianter { + max-width: 537px; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.dotSeperatorVarianter::after { + content: "·"; + margin: 0 0.5rem; +} + +.dotSeperatorVarianter:nth-last-child(2)::after { + content: ""; + margin: 0rem; +} + +.projectInfoItem { + display: flex; + flex-direction: row; +} + +.title { + color: var(--text-tertiary); +} + +.deliveries { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.preFancyCharacter { + margin-right: 0.38rem; +} + +.afterFancyCharacter { + margin-left: 0.38rem; +} + +.urlWrapper { + display: flex; + flex-direction: column; + gap: 0.25rem; +} diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts index c3b46808c..bb779c5c8 100644 --- a/studioShared/lib/interfaces/customerCases.ts +++ b/studioShared/lib/interfaces/customerCases.ts @@ -17,7 +17,7 @@ export interface CustomerCaseProjectInfo { export interface CustomerSector { customerSector: string; - key: string; + _key: string; } export interface Deliveries { diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts index 3ea5efa0e..fade56c2e 100644 --- a/studioShared/lib/queries/customerCases.ts +++ b/studioShared/lib/queries/customerCases.ts @@ -49,6 +49,7 @@ export const CUSTOMER_CASE_QUERY = groq` "projectInfo": projectInfo { customer, "customerSectors": customerSectors[] { + _key, "customerSector": ${translatedFieldFragment("customerSectorItem")} }, url,