-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* skeleton for customercase entry * added botton for customerCases we have * Merge branch 'v3' into v3-customercase-entry * temp * linting fixes * imagerendering and datafetching * media * add tag component * remove tag ad we're replacing it with other tag component * add link to customercase * format deliverystrings * image sizing * Templatus gridificous! * tried fixing scaling on card * fix: responsiveness of costumer case (#957) * border on image * focus and opacity on images * small changes in opacity * remove unused Text component in header to fix lint check * swedish translation --------- Co-authored-by: Truls Henrik <[email protected]> Co-authored-by: Jacob Berglund <[email protected]> Co-authored-by: Mikael Brevik <[email protected]>
- Loading branch information
4 people
authored
Dec 9, 2024
1 parent
6835688
commit 5dd53dd
Showing
19 changed files
with
439 additions
and
21 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 |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| { | ||
| "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"] | ||
| "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"], | ||
| "i18n-ally.keystyle": "nested" | ||
| } |
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
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 |
|---|---|---|
|
|
@@ -74,9 +74,6 @@ | |
| color: currentColor; | ||
| } | ||
|
|
||
| .employeeRole { | ||
| } | ||
|
|
||
| .employeeRoleDot::after { | ||
| content: "·"; | ||
| margin: 0 0.25rem; | ||
|
|
||
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
55 changes: 55 additions & 0 deletions
55
src/components/sections/customerCasesEntry/CustomerCasesEntry.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 |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { headers } from "next/headers"; | ||
|
|
||
| import { Locale } from "src/i18n/routing"; | ||
| import { getDraftModeInfo } from "src/utils/draftmode"; | ||
| import { domainFromHostname } from "src/utils/url"; | ||
| import { CUSTOMER_CASES_PAGE_SITEMAP_QUERY } from "studio/lib/queries/specialPages"; | ||
| import { loadStudioQuery } from "studio/lib/store"; | ||
| import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; | ||
| import { CUSTOMER_CASE_ENTRY_QUERY } from "studioShared/lib/queries/customerCases"; | ||
| import { loadSharedQuery } from "studioShared/lib/store"; | ||
|
|
||
| import CustomerCasesList from "./CustomerCasesList"; | ||
|
|
||
| interface CustomerCasesProps { | ||
| language: Locale; | ||
| } | ||
|
|
||
| async function CustomerCasesEntry({ language }: CustomerCasesProps) { | ||
| const { perspective } = getDraftModeInfo(); | ||
| const domain = domainFromHostname(headers().get("host")); | ||
|
|
||
| const customerCaseResult = await loadSharedQuery<CustomerCaseEntry[]>( | ||
| CUSTOMER_CASE_ENTRY_QUERY, | ||
| { | ||
| domain, | ||
| language, | ||
| }, | ||
| { | ||
| perspective, | ||
| }, | ||
| ); | ||
|
|
||
| const customerCasePageSlug = ( | ||
| await loadStudioQuery<{ slug: string } | null>( | ||
| CUSTOMER_CASES_PAGE_SITEMAP_QUERY, | ||
| { | ||
| language, | ||
| }, | ||
| ) | ||
| ).data?.slug; | ||
|
|
||
| return ( | ||
| customerCaseResult && ( | ||
| <div> | ||
| <CustomerCasesList | ||
| customerCases={customerCaseResult.data} | ||
| language={language} | ||
| customerCasePageSlug={customerCasePageSlug} | ||
| /> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default CustomerCasesEntry; |
132 changes: 132 additions & 0 deletions
132
src/components/sections/customerCasesEntry/CustomerCasesList.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 |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| "use client"; | ||
|
|
||
| import Link from "next/link"; | ||
| import { useTranslations } from "next-intl"; | ||
| import { useState } from "react"; | ||
|
|
||
| import { SanitySharedImage } from "src/components/image/SanityImage"; | ||
| import { Tag } from "src/components/tag"; | ||
| import Text from "src/components/text/Text"; | ||
| import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; | ||
| import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; | ||
|
|
||
| import styles from "./customerCasesEntry.module.css"; | ||
|
|
||
| interface CustomerCasesProps { | ||
| customerCases: CustomerCaseEntry[]; | ||
| language: string; | ||
| customerCasePageSlug?: string; | ||
| } | ||
|
|
||
| const CustomerCaseList = ({ | ||
| customerCases, | ||
| language, | ||
| customerCasePageSlug, | ||
| }: CustomerCasesProps) => { | ||
| const [selectedCustomerCase, setSelectedCustomerCase] = | ||
| useState<CustomerCaseEntry>(customerCases[0] || null); | ||
|
|
||
| const deliveryNames = [ | ||
| selectedCustomerCase.projectInfo.deliveries.projectManagement && | ||
| "Project Management", | ||
| selectedCustomerCase.projectInfo.deliveries.design && "Design", | ||
| selectedCustomerCase.projectInfo.deliveries.development && "Development", | ||
| ].filter(Boolean); | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.wrapper}> | ||
| <div className={styles.info}> | ||
| <div className={styles.infoInnerMaxWidth}> | ||
| <TagRow | ||
| customerCases={customerCases} | ||
| selectedCustomerCase={selectedCustomerCase} | ||
| setSelectedCustomerCase={setSelectedCustomerCase} | ||
| /> | ||
| <Link | ||
| className={styles.link} | ||
| href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`} | ||
| > | ||
| <CardInfo | ||
| selectedCustomerCase={selectedCustomerCase} | ||
| deliveryNames={deliveryNames} | ||
| /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <Link | ||
| tabIndex={-1} | ||
| className={styles.imageWrapper} | ||
| href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`} | ||
| > | ||
| {selectedCustomerCase.image && ( | ||
| <SanitySharedImage image={selectedCustomerCase.image} /> | ||
| )} | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default CustomerCaseList; | ||
|
|
||
| function CardInfo({ | ||
| selectedCustomerCase, | ||
| deliveryNames, | ||
| }: { | ||
| selectedCustomerCase: CustomerCaseEntry; | ||
| deliveryNames: string[]; | ||
| }) { | ||
| const t = useTranslations("customer_case"); | ||
|
|
||
| return ( | ||
| <div className={styles.cardInfo}> | ||
| <Text type="h2" className={styles.heading}> | ||
| {selectedCustomerCase.basicTitle} | ||
| </Text> | ||
| <div className={styles.deliveries}> | ||
| <Text type="labelRegular">{t("customer_case_entry.field")}</Text> | ||
| <div className={styles.deliveriesList}> | ||
| {deliveryNames.map((deliveryName, index) => ( | ||
| <Text key={index} type="h5" className={styles.dotSeparator}> | ||
| {deliveryName} | ||
| </Text> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function TagRow({ | ||
| customerCases, | ||
| selectedCustomerCase, | ||
| setSelectedCustomerCase, | ||
| }: { | ||
| customerCases: CustomerCaseEntry[]; | ||
| selectedCustomerCase: CustomerCaseEntry; | ||
| setSelectedCustomerCase: (customerCase: CustomerCaseEntry) => void; | ||
| }) { | ||
| const t = useTranslations("customer_case"); | ||
|
|
||
| return ( | ||
| <div className={styles.TagRow}> | ||
| <Text className={styles.font} type="labelRegular"> | ||
| {t("customer_case_entry.case")} | ||
| </Text> | ||
| {customerCases.map( | ||
| (customerCase: CustomerCaseEntry) => | ||
| customerCase && ( | ||
| <div key={customerCase._id}> | ||
| <Tag | ||
| active={customerCase._id === selectedCustomerCase._id} | ||
| type="button" | ||
| background="dark" | ||
| onClick={() => setSelectedCustomerCase(customerCase)} | ||
| text={capitalizeFirstLetter(customerCase.projectInfo.customer)} | ||
| /> | ||
| </div> | ||
| ), | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.