From b74ebc7f7e7c65c4a2d0f5863ff39917ce709983 Mon Sep 17 00:00:00 2001 From: Borghild Date: Wed, 18 Dec 2024 13:10:37 +0100 Subject: [PATCH 1/5] :art: more common styling --- sanityv3/schemas/objects/teaser.tsx | 6 - sanityv3/schemas/objects/textBlock.tsx | 13 -- web/core/Link/BaseLink.tsx | 60 ++++--- web/core/Link/Link.tsx | 5 +- web/core/Link/ReadMoreLink.tsx | 75 --------- web/core/Link/ResourceLink.tsx | 151 ++++++++++++++---- web/core/Link/index.ts | 1 - web/package.json | 1 + .../shared/Hero/FiftyFiftyHero.tsx | 6 +- web/pageComponents/shared/Teaser.tsx | 21 +-- .../shared/siteMenu/MenuGroup.tsx | 4 +- .../shared/siteMenu/simple/SimpleMenuItem.tsx | 21 ++- .../shared/textTeaser/TextTeaser.tsx | 6 +- .../topicPages/AddToCalendar.tsx | 19 +-- .../topicPages/CallToActions.tsx | 47 ------ web/pageComponents/topicPages/Promotion.tsx | 70 ++++---- web/pageComponents/topicPages/TextBlock.tsx | 23 +-- .../promotions/MultiplePromotions.tsx | 10 +- web/pnpm-lock.yaml | 11 ++ web/sections/CallToActions/index.tsx | 46 +++--- web/sections/KeyNumber/KeyNumber.tsx | 6 +- web/sections/PromoTiles/PromoTile.tsx | 66 +------- web/sections/PromoTiles/PromoTileArray.tsx | 2 +- web/sections/cards/Card/Card.tsx | 7 +- web/sections/cards/Card/CardContent.tsx | 5 +- web/sections/cards/Card/CardHeader.tsx | 2 +- web/sections/cards/EventCard/EventCard.tsx | 12 +- web/sections/cards/PeopleCard/PeopleCard.tsx | 12 +- web/templates/newsroom/Newsroom.tsx | 32 ++-- .../newsroom/sanity/NewsroomSanity.tsx | 5 +- web/types/linkTypes.ts | 3 +- web/types/types.ts | 2 - 32 files changed, 331 insertions(+), 419 deletions(-) delete mode 100644 web/core/Link/ReadMoreLink.tsx delete mode 100644 web/pageComponents/topicPages/CallToActions.tsx diff --git a/sanityv3/schemas/objects/teaser.tsx b/sanityv3/schemas/objects/teaser.tsx index bcdaef655..2e3a2b418 100644 --- a/sanityv3/schemas/objects/teaser.tsx +++ b/sanityv3/schemas/objects/teaser.tsx @@ -152,12 +152,6 @@ export default { ], validation: (Rule: Rule) => Rule.max(2).error('Only two action is permitted'), }, - { - title: 'Use resource link style', - description: 'Default is read more link style', - name: 'useResourceLinks', - type: 'boolean', - }, { name: 'image', title: 'Image', diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx index 49bb92988..619dda88f 100644 --- a/sanityv3/schemas/objects/textBlock.tsx +++ b/sanityv3/schemas/objects/textBlock.tsx @@ -51,7 +51,6 @@ type TextBlock = { bigText?: PortableTextBlock[] action?: Reference[] splitList?: boolean - overrideButtonStyle?: boolean background?: ColorSelectorValue } @@ -193,18 +192,6 @@ export default { description: 'You can also display links/downloads as two columns if there are a lot of links. Ensure that titles are short enough to do this.', }, - { - title: 'Use link style', - name: 'overrideButtonStyle', - type: 'boolean', - fieldset: 'actions', - initialValue: false, - description: - 'You can override the default button style to link style. This can only be done if you have one link, and should be used with caution.', - readOnly: ({ parent }: { parent: TextBlock }) => { - return !(parent.action && parent?.action.length === 1) - }, - }, { name: 'designOptions', type: 'backgroundOptions', diff --git a/web/core/Link/BaseLink.tsx b/web/core/Link/BaseLink.tsx index 53d44d539..24cf94505 100644 --- a/web/core/Link/BaseLink.tsx +++ b/web/core/Link/BaseLink.tsx @@ -36,27 +36,43 @@ export const BaseLink = forwardRef(function Ba className, ) - return type === 'externalUrl' ? ( - // https://web.dev/articles/referrer-best-practices - // strict-origin-when-cross-origin only share the origin - // and thus protects privacy but gives Referrer origin - // for SEO - // eslint-disable-next-line react/jsx-no-target-blank - - {children} - - ) : ( - - {children} - - ) + const getLinkElement = () => { + switch (type) { + case 'externalUrl': + return ( + // https://web.dev/articles/referrer-best-practices + // strict-origin-when-cross-origin only share the origin + // and thus protects privacy but gives Referrer origin + // for SEO + // eslint-disable-next-line react/jsx-no-target-blank + + {children} + + ) + case 'icsLink': + return ( + + {children} + + ) + + default: + return ( + + {children} + + ) + } + } + + return getLinkElement() }) export default BaseLink diff --git a/web/core/Link/Link.tsx b/web/core/Link/Link.tsx index d30ca3e91..7132ea0f9 100644 --- a/web/core/Link/Link.tsx +++ b/web/core/Link/Link.tsx @@ -18,7 +18,8 @@ export const Link = forwardRef(function Link( items-center gap-2.5 underline - hover:no-underline + hover:text-norwegian-woods-100 + dark:hover:text-slate-blue-95 `, className, ) @@ -26,7 +27,7 @@ export const Link = forwardRef(function Link( return ( {children} - {type === 'externalUrl' && } + {type === 'externalUrl' && } ) }) diff --git a/web/core/Link/ReadMoreLink.tsx b/web/core/Link/ReadMoreLink.tsx deleted file mode 100644 index 1d8bb5d8c..000000000 --- a/web/core/Link/ReadMoreLink.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { forwardRef } from 'react' -import { twMerge } from 'tailwind-merge' -import { BaseLink, BaseLinkProps } from './BaseLink' -import { ArrowRight } from '../../icons' -import { LinkType } from '../../types/index' - -export type ReadMoreLinkProps = { - /** Overriding styles for the icon */ - iconClassName?: string -} & BaseLinkProps - -/** Read more link style */ -export const ReadMoreLink = forwardRef(function ReadMoreLink( - { children, type = 'internalUrl', className = '', iconClassName = '', href = '', ...rest }, - ref, -) { - const classNames = twMerge( - ` - group - inline-flex - align-baseline - w-fit - text-slate-80 - leading-0 - `, - className, - ) - const contentClassNames = ` - relative - w-fit - after:content-[''] - after:block - after:absolute - after:bottom-0 - after:left-0 - after:border-b - after:border-slate-80 - dark:after:border-white-100 - after:w-[0%] - after:transition-all - after:duration-300 - group-hover:after:w-full - ` - const iconVariants: Partial> = { - internalUrl: '', - externalUrl: '-rotate-45', - downloadableFile: 'rotate-90', - downloadableImage: 'rotate-90', - } - const iconClassNames = twMerge( - ` - size-arrow-right - text-energy-red-100 - dark:text-white-100 - ml-2 - ${ - type === 'downloadableFile' || type === 'downloadableImage' - ? 'group-hover:translate-y-0.5' - : '-translate-y-0.5 group-hover:translate-x-2' - } - transition-all - duration-300 - ${iconVariants[type]} - `, - iconClassName, - ) - - return ( - - {children} - - - ) -}) -export default ReadMoreLink diff --git a/web/core/Link/ResourceLink.tsx b/web/core/Link/ResourceLink.tsx index 5d359d2bc..846fa75e9 100644 --- a/web/core/Link/ResourceLink.tsx +++ b/web/core/Link/ResourceLink.tsx @@ -1,38 +1,59 @@ import { forwardRef } from 'react' -import { twMerge } from 'tailwind-merge' import { BaseLink, BaseLinkProps } from './BaseLink' import { LinkType } from '../../types/index' import { ArrowRight } from '../../icons' +import envisTwMerge from '../../twMerge' +import { TransformableIcon } from '../../icons/TransformableIcon' +import { add, calendar } from '@equinor/eds-icons' +import { PiFilePdfThin } from 'react-icons/pi' + +export type Variants = 'default' | 'fit' | 'compact' export type ResourceLinkProps = { + variant?: Variants /** Overriding styles for the icon */ iconClassName?: string /** What kind of content is it */ type?: LinkType + /* Link extension */ + extension?: string | undefined + /** If type is of an extension type (PDF), show the extention as icon */ + showExtensionIcon?: boolean } & Omit -/** Read more link style */ export const ResourceLink = forwardRef(function ResourceLink( - { children, type = 'internalUrl', className = '', iconClassName = '', href = '', ...rest }, + { + variant = 'default', + children, + type = 'internalUrl', + extension, + className = '', + iconClassName = '', + showExtensionIcon = false, + href = '', + ...rest + }, ref, ) { - const classNames = twMerge( - `group + const variantClassName: Partial> = { + default: 'w-full pt-5', + fit: 'w-fit pt-5', + compact: 'w-fit pt-4', + } + + const baseResourceLinkClassNames = `group relative flex flex-col + justify-end gap-0 - w-full text-slate-blue-95 dark:text-white-100 - pt-5 border-b - border-grey-40 + border-grey-50 dark:border-white-100 no-underline - `, - className, - ) + ` const iconRotation: Record = { externalUrl: '-rotate-45', @@ -41,32 +62,104 @@ export const ResourceLink = forwardRef(fun internalUrl: '', } - const iconClassNames = twMerge( - ` - size-arrow-right - text-energy-red-100 - dark:text-white-100 - justify-self-end - ${iconRotation[type]} - ${ - type === 'downloadableFile' || type === 'downloadableImage' - ? 'group-hover:translate-y-2' - : 'group-hover:translate-x-2' + const getArrowAnimation = (type: LinkType) => { + switch (type) { + case 'downloadableFile': + case 'downloadableImage': + return 'group-hover:translate-y-0.5' + case 'anchorLink': + return 'group-hover:translate-y-2' + case 'icsLink': + return '' + default: + return 'group-hover:translate-x-2' } - transition-all - duration-300 + } + + const getArrowElement = (type: LinkType, iconClassName: string) => { + const iconClassNames = envisTwMerge( + `size-arrow-right + text-energy-red-100 + dark:text-white-100 + justify-self-end + ${iconRotation[type]} + ${getArrowAnimation(type)} + transition-all + duration-300 + `, + iconClassName, + ) + + switch (type) { + case 'downloadableFile': + case 'downloadableImage': + return ( + + + + + ) + case 'icsLink': + return + default: + return + } + } + + const contentVariantClassName: Partial> = { + default: 'pb-3 pr-2 gap-6 xl:gap-16', + fit: 'pb-3 pr-2 gap-6 xl:gap-16', //gap-14 + compact: 'text-sm pb-2 gap-6', + } + + const classNames = envisTwMerge( + `${baseResourceLinkClassNames} + ${variantClassName[variant]} `, - iconClassName, + className, ) + const getContentElements = () => { + switch (type) { + case 'downloadableFile': + return extension && extension.toUpperCase() === 'PDF' && showExtensionIcon ? ( + + + {children} + + ) : ( + <>{children} + ) + case 'icsLink': + return ( + + + {children} + + ) + default: + return <>{children} + } + } return ( - - - {children} - + + + {getContentElements()} + {extension && !showExtensionIcon ? `(${extension.toUpperCase()})` : ''} + {getArrowElement(type, iconClassName)} ) }) + export default ResourceLink diff --git a/web/core/Link/index.ts b/web/core/Link/index.ts index 324dc4a9e..8b41da63b 100644 --- a/web/core/Link/index.ts +++ b/web/core/Link/index.ts @@ -1,5 +1,4 @@ export { default as Link, type LinkProps } from './Link' -export { default as ReadMoreLink, type ReadMoreLinkProps } from './ReadMoreLink' export { default as ResourceLink, type ResourceLinkProps } from './ResourceLink' export { default as ButtonLink, type ButtonLinkProps } from './ButtonLink' export { default as BaseLink, type BaseLinkProps } from './BaseLink' diff --git a/web/package.json b/web/package.json index a24cab48a..52e3f2c14 100644 --- a/web/package.json +++ b/web/package.json @@ -63,6 +63,7 @@ "react-dom": "^18.3.1", "react-error-boundary": "^3.1.4", "react-hook-form": "7.51.3", + "react-icons": "^5.4.0", "react-instantsearch": "^7.12.4", "react-instantsearch-router-nextjs": "^7.12.4", "react-intl": "^6.6.8", diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx index 2fce01bf1..7b96198b7 100644 --- a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx +++ b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx @@ -3,7 +3,7 @@ import Image from '../SanityImage' import TitleText from '../portableText/TitleText' import type { HeroType } from '../../../types/index' import { BackgroundContainer } from '@components' -import { ReadMoreLink } from '@core/Link' +import { ResourceLink } from '@core/Link' import Blocks from '../portableText/Blocks' import { getUrlFromAction } from '../../../common/helpers' import { getLocaleFromName } from '../../../lib/localization' @@ -79,13 +79,13 @@ export const FiftyFiftyHero = ({ title, ingress, link: action, background, figur )} {action && !isBigTitle && ( - {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`} - + )} diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index d48c7e042..ee924876a 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -5,7 +5,7 @@ import { getUrlFromAction, urlFor } from '../../common/helpers' import Img from 'next/image' import Image from './SanityImage' import type { TeaserData, ImageWithAlt } from '../../types/index' -import { ReadMoreLink, ResourceLink } from '../../core/Link' +import { ResourceLink } from '../../core/Link' import { Heading } from '../../core/Typography' import { getLocaleFromName } from '../../lib/localization' @@ -45,7 +45,7 @@ const TeaserImage = ({ image }: { image: ImageWithAlt }) => { } const Teaser = ({ data, anchor }: TeaserProps) => { - const { title, overline, text, image, actions, designOptions, isBigText, useResourceLinks } = data + const { title, overline, text, image, actions, designOptions, isBigText } = data const { imageSize, imagePosition, ...restOptions } = designOptions if ([title, overline, text, image?.asset, actions].every((i) => !i)) { @@ -85,25 +85,18 @@ const Teaser = ({ data, anchor }: TeaserProps) => { {actions?.map((action) => { const url = action && getUrlFromAction(action) - return useResourceLinks ? ( + return ( - {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`} + {`${action.label}`} - ) : ( - - {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`} - ) })} diff --git a/web/pageComponents/shared/siteMenu/MenuGroup.tsx b/web/pageComponents/shared/siteMenu/MenuGroup.tsx index 5ecf1e710..3e6fbb0eb 100644 --- a/web/pageComponents/shared/siteMenu/MenuGroup.tsx +++ b/web/pageComponents/shared/siteMenu/MenuGroup.tsx @@ -1,7 +1,7 @@ import { Fragment } from 'react' import styled from 'styled-components' import RichText from '../portableText/RichText' -import { Link, ReadMoreLink } from '@core/Link' +import { Link, ResourceLink } from '@core/Link' import { Menu } from '@components' import type { MenuLinkData, SubMenuData, SubMenuGroupData } from '../../../types/index' import { SubMenuGroupHeading, SubMenuGroupList } from './SubMenuGroup' @@ -49,7 +49,7 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => {
{intro && } - {topLevelLink?.label} + {topLevelLink?.label}
{groups && groups.length > 0 && ( diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx index da9c3ad4b..f86539ec9 100644 --- a/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx +++ b/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' import { List, Menu } from '@components' -import { Link, ReadMoreLink } from '@core/Link' +import { Link, ResourceLink } from '@core/Link' import { SimpleHeader } from './SimpleHeader' import type { SimpleGroupData } from '../../../../types/index' import { SubMenuGroupList } from '../SubMenuGroup' @@ -27,14 +27,23 @@ export const SimpleMenuItem = ({ item, index }: MenuGroupType) => { return ( {label && {label}} - -
-
{!!readMoreLink?.link?.slug && {readMoreLink.label}} + +
+
+ {' '} + {!!readMoreLink?.link?.slug && ( + {readMoreLink.label} + )}
{links?.map((link) => ( - - {link.label} + + + {link.label} + ))} diff --git a/web/pageComponents/shared/textTeaser/TextTeaser.tsx b/web/pageComponents/shared/textTeaser/TextTeaser.tsx index eb3cdb2a6..a779a139d 100644 --- a/web/pageComponents/shared/textTeaser/TextTeaser.tsx +++ b/web/pageComponents/shared/textTeaser/TextTeaser.tsx @@ -7,7 +7,7 @@ import { getColorForTheme } from './theme' import { CSSProperties } from 'react' import { twMerge } from 'tailwind-merge' -import { ReadMoreLink } from '@core/Link' +import { ResourceLink } from '@core/Link' import { getUrlFromAction } from '../../../common/helpers/getUrlFromAction' import { getLocaleFromName } from '../../../lib/localization' @@ -95,13 +95,13 @@ const TextTeaser = ({ data, anchor, className }: TextTeaserProps) => { )} {action && ( - {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`} - + )} diff --git a/web/pageComponents/topicPages/AddToCalendar.tsx b/web/pageComponents/topicPages/AddToCalendar.tsx index a64690e52..67cdbc206 100644 --- a/web/pageComponents/topicPages/AddToCalendar.tsx +++ b/web/pageComponents/topicPages/AddToCalendar.tsx @@ -5,6 +5,7 @@ import type { EventDateType } from '../../types/index' import { useIntl } from 'react-intl' import { twMerge } from 'tailwind-merge' import { commonButtonStyling, getVariant } from '@core/Button' +import { ResourceLink } from '@core/Link' // eslint-disable-next-line @typescript-eslint/no-var-requires const ics = require('ics') @@ -93,17 +94,17 @@ const AddToCalendar = ({ eventDate, title, location }: AddToCalendarProps) => { }, { eventTitle: title }, ) - return ( - - {/* */} - {atc} - - ) + {atc} + + ) : null } export default AddToCalendar diff --git a/web/pageComponents/topicPages/CallToActions.tsx b/web/pageComponents/topicPages/CallToActions.tsx deleted file mode 100644 index edbdc678d..000000000 --- a/web/pageComponents/topicPages/CallToActions.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Fragment } from 'react' -import { List } from '@components' -import { ButtonLink, ReadMoreLink } from '@core/Link' -import type { LinkData } from '../../types/index' -import { getUrlFromAction } from '../../common/helpers' -import { getLocaleFromName } from '../../lib/localization' - -const { Item } = List - -type CallToActionsProps = { - callToActions: LinkData[] - overrideButtonStyle: boolean - splitList?: boolean -} - -const CallToActions = ({ callToActions, overrideButtonStyle, splitList }: CallToActionsProps) => { - if (!callToActions) return null - - // If we have only one link and the publisher has not made an active choice of overriding the style - // in Sanity the default style is a button style - return callToActions.length === 1 && !overrideButtonStyle ? ( - - ) : ( - - {callToActions.map((callToAction: LinkData) => { - const url = getUrlFromAction(callToAction) - return ( - - {/* If the URL is a static AEM page it should behave as an internal link in the web */} - - - - {`${callToAction.label} ${callToAction.extension ? `(${callToAction.extension.toUpperCase()})` : ''}`} - - - - ) - })} - - ) -} - -export default CallToActions diff --git a/web/pageComponents/topicPages/Promotion.tsx b/web/pageComponents/topicPages/Promotion.tsx index 843922abc..36282484c 100644 --- a/web/pageComponents/topicPages/Promotion.tsx +++ b/web/pageComponents/topicPages/Promotion.tsx @@ -4,7 +4,7 @@ import MultiplePromotions from './promotions/MultiplePromotions' import IngressText from '../shared/portableText/IngressText' import type { PromotionData } from '../../types/index' import { twMerge } from 'tailwind-merge' -import { ButtonLink } from '@core/Link' +import { ResourceLink } from '@core/Link' import { Heading } from '@core/Typography' import { useId } from 'react' @@ -27,48 +27,52 @@ const Promotion = ({ return ( -
+
{title && ( - + )} {ingress && ( -
+
)} - {promotions?.length === 1 || promoteSingleUpcomingEvent ? ( - - ) : ( - - )} {viewAllLink?.link?.slug && ( -
- +
+ {viewAllLink?.label} - +
)} +
+ {promotions?.length === 1 || promoteSingleUpcomingEvent ? ( + + ) : ( + + )} +
) diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx index d3995d69c..e683530c2 100644 --- a/web/pageComponents/topicPages/TextBlock.tsx +++ b/web/pageComponents/topicPages/TextBlock.tsx @@ -1,21 +1,13 @@ -import { Eyebrow, BackgroundContainer } from '@components' +import { BackgroundContainer, Eyebrow } from '@components' import { Heading } from '../../core/Typography' import IngressText from '../shared/portableText/IngressText' import Image, { Ratios } from '../shared/SanityImage' -import styled from 'styled-components' import type { TextBlockData } from '../../types/index' //import CallToActions from './CallToActions' import CallToActions from '../../sections/CallToActions' import Blocks from '../../pageComponents/shared/portableText/Blocks' import { twMerge } from 'tailwind-merge' -export const StyledTextBlockWrapper = styled(BackgroundContainer)<{ id: string | undefined }>` - ${({ id }) => - id && { - scrollMarginTop: 'var(--topbar-height)', - }} -` - type TextBlockProps = { data: TextBlockData anchor?: string @@ -32,7 +24,6 @@ const TextBlock = ({ data, anchor, className = '' }: TextBlockProps) => { designOptions, callToActions, splitList, - overrideButtonStyle = false, isBigText, useBrandTheme = false, } = data @@ -81,7 +72,7 @@ const TextBlock = ({ data, anchor, className = '' }: TextBlockProps) => { } return ( - +
{ )} {text && } - {callToActions && ( - - )} + {callToActions && }
- + ) } diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx index 5b7bbc786..fe3aff294 100644 --- a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx +++ b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx @@ -34,14 +34,14 @@ const MultiplePromotions = ({ case 'news': case 'localNews': return ( -
  • +
    • ) case 'topics': case 'magazine': return ( -
  • +
    • ) @@ -110,9 +110,9 @@ const MultiplePromotions = ({ justify-center content-center grid-cols-1 - auto-rows-auto - md:grid-cols-3 - md:grid-rows-1`)} + auto-rows-fr + xl:grid-cols-[repeat(3,theme(spacing.card-maxWidth))] + xl:grid-rows-1`)} > <> {data.map((item) => { diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 25d52af49..5f6e80352 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -130,6 +130,9 @@ dependencies: react-hook-form: specifier: 7.51.3 version: 7.51.3(react@18.3.1) + react-icons: + specifier: ^5.4.0 + version: 5.4.0(react@18.3.1) react-instantsearch: specifier: ^7.12.4 version: 7.12.4(algoliasearch@4.16.0)(react-dom@18.3.1)(react@18.3.1) @@ -12473,6 +12476,14 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /react-icons@5.4.0(react@18.3.1): + resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==} + peerDependencies: + react: '*' + dependencies: + react: 18.3.1 + dev: false + /react-instantsearch-core@7.12.4(algoliasearch@4.16.0)(react@18.3.1): resolution: {integrity: sha512-FJn0hFrC3YaZX+y4XkqleHs2lcVXlWP1oCUsvVgwnP7D21iHQLmC0POwzWnJkHk7XJc92xZKVu/jp4mnsieECw==} peerDependencies: diff --git a/web/sections/CallToActions/index.tsx b/web/sections/CallToActions/index.tsx index 1f52f0aee..1d1147531 100644 --- a/web/sections/CallToActions/index.tsx +++ b/web/sections/CallToActions/index.tsx @@ -1,9 +1,8 @@ -import { List } from '@core/List' -import { ResourceLink, ButtonLink } from '@core/Link' +import { ResourceLink } from '@core/Link' import type { LinkData } from '../../types/index' import { getUrlFromAction } from '../../common/helpers' import { getLocaleFromName } from '../../lib/localization' -import { twMerge } from 'tailwind-merge' +import envisTwMerge from '../../twMerge' type CallToActionsProps = { callToActions: LinkData[] @@ -12,59 +11,60 @@ type CallToActionsProps = { className?: string } -const CallToActions = ({ callToActions = [], overrideButtonStyle, splitList, className }: CallToActionsProps) => { +const CallToActions = ({ callToActions = [], splitList, className }: CallToActionsProps) => { if (!callToActions) return null const getSingleAction = () => { const { label, extension, type, link } = callToActions[0] const url = getUrlFromAction(callToActions[0]) if (!url) { - console.warn(`CallToActions: Missing URL on 'ButtonLink' link with type: '${type}' and label: '${label}'`) + console.warn(`CallToActions: Missing URL on Call to action link with type: '${type}' and label: '${label}'`) return null } - const linkContent = `${label} ${extension ? `(${extension.toUpperCase()})` : ''}` - return overrideButtonStyle ? ( + return ( - {linkContent} + {label} - ) : ( - - {linkContent} - ) } return callToActions?.length === 1 ? ( getSingleAction() ) : ( - +
      {callToActions.map((callToAction: LinkData) => { const url = getUrlFromAction(callToAction) return url ? ( - +
    • {/* If the URL is a static AEM page it should behave as an internal link in the web */} - {`${callToAction?.label} ${callToAction?.extension ? `(${callToAction?.extension.toUpperCase()})` : ''}`} + {`${callToAction?.label}`} - +
      • ) : null })} - +
    ) } diff --git a/web/sections/KeyNumber/KeyNumber.tsx b/web/sections/KeyNumber/KeyNumber.tsx index 477fc8ab4..cb271859f 100644 --- a/web/sections/KeyNumber/KeyNumber.tsx +++ b/web/sections/KeyNumber/KeyNumber.tsx @@ -2,7 +2,7 @@ import { KeyNumbersData } from '../../types' import { BackgroundContainer } from '@components/Backgrounds' import { Heading, Paragraph } from '@core/Typography' import KeyNumberItem from './KeyNumberItem' -import { ReadMoreLink } from '@core/Link' +import { ResourceLink } from '@core/Link' import { Carousel } from '@core/Carousel/Carousel' import { useMediaQuery } from '../../lib/hooks/useMediaQuery' import { twMerge } from 'tailwind-merge' @@ -37,13 +37,13 @@ const KeyNumber = ({ data, anchor, className }: KeyNumbersProps) => { {disclaimer && } {action && ( - {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`} - + )} ) diff --git a/web/sections/PromoTiles/PromoTile.tsx b/web/sections/PromoTiles/PromoTile.tsx index 586c50b67..fb3666f0f 100644 --- a/web/sections/PromoTiles/PromoTile.tsx +++ b/web/sections/PromoTiles/PromoTile.tsx @@ -1,59 +1,9 @@ import Card from '@sections/cards/Card' import { getUrlFromAction } from '../../common/helpers' import { ColorKeyTokens, colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap' -import { BaseLinkProps } from '@core/Link' -import { ArrowRight } from '../../icons' import { PromoTileData } from '../../types/index' import { forwardRef } from 'react' -export type FakeReadMoreProps = { - children?: React.ReactNode -} & Pick - -/** Fake link based on Read more link style */ -export const FakeReadMoreLink = ({ type = 'internalUrl', children }: FakeReadMoreProps) => { - const classNames = ` - group - inline-flex - align-baseline - w-fit - text-slate-80 - text-sm - leading-0 - ` - const contentClassNames = ` - relative - after:content-[''] - after:block - after:absolute - after:bottom-0 - after:left-0 - after:border-b - after:border-slate-80 - dark:after:border-white-100 - after:w-[0%] - after:transition-all - after:duration-300 - group-hover/card:after:w-full - ` - const iconClassNames = ` - size-arrow-right - text-energy-red-100 - ${type === 'externalUrl' ? '-rotate-45' : ''} - dark:text-white-100 - ml-2 - group-hover/card:translate-x-2 - transition-all - duration-300 - ` - - return ( -
    - {children} - -
    - ) -} type PromoTileProps = PromoTileData export const PromoTile = forwardRef(function PromoTile( @@ -61,6 +11,7 @@ export const PromoTile = forwardRef(function ref, ) { const url = getUrlFromAction(action) + const { background } = designOptions const colorName = Object.keys(colorKeyToUtilityMap).find( @@ -74,27 +25,18 @@ export const PromoTile = forwardRef(function return ( - - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/** @ts-ignore */} + - {!linkLabelAsTitle && {action.label}} ) diff --git a/web/sections/PromoTiles/PromoTileArray.tsx b/web/sections/PromoTiles/PromoTileArray.tsx index 6148bddcd..946bb821d 100644 --- a/web/sections/PromoTiles/PromoTileArray.tsx +++ b/web/sections/PromoTiles/PromoTileArray.tsx @@ -14,7 +14,7 @@ const PromoTileArray = ({ if (!data.group) return null return ( -
    +
      (function Card( shadow-card rounded-sm active:shadow-card-interact - min-w-card-minWidth - md:max-w-card-maxWidth` + min-w-card-minWidth` const variantClassNames = { - primary: `${commonStyling}`, - secondary: `${commonStyling} rounded-md overflow-hidden`, + primary: `${commonStyling} md:max-w-card-maxWidth`, + secondary: `${commonStyling} xl:max-w-card-maxWidth rounded-md overflow-hidden`, compact: `h-full flex gap-4 min-w-[200px] xl:max-w-[300px] 3xl:max-w-card-maxWidth`, single: `grid grid-cols-[40%_1fr] min-h-[450px] shadow-card rounded-sm active:shadow-card-interact`, } diff --git a/web/sections/cards/Card/CardContent.tsx b/web/sections/cards/Card/CardContent.tsx index f26372214..f8f64bcfc 100644 --- a/web/sections/cards/Card/CardContent.tsx +++ b/web/sections/cards/Card/CardContent.tsx @@ -30,19 +30,20 @@ export const CardContent = forwardRef(function const commonStyling = `pt-6 md:pt-8 pb-6 px-6` const variantClassNames = { primary: `${commonStyling} flex-col items-start`, - secondary: `${commonStyling} pb-12 lg:pb-16 flex-row items-center justify-between items-center`, + secondary: `${commonStyling} flex-col items-start`, compact: `pb-4 pt-2`, single: `${commonStyling} px-10 flex-col items-start`, } const variantLinkClassNames = { primary: `self-end mt-auto max-lg:hidden`, - secondary: `max-lg:hidden`, + secondary: `self-end mt-auto max-lg:hidden`, compact: `max-xl:hidden`, single: 'self-end mt-auto max-lg:hidden', } const iconClassNames = twMerge( `size-arrow-right text-energy-red-100 + dark:text-white-100 mr-2 group-hover/card:translate-x-2 transition-all diff --git a/web/sections/cards/Card/CardHeader.tsx b/web/sections/cards/Card/CardHeader.tsx index 5ae9e7b64..f8d381669 100644 --- a/web/sections/cards/Card/CardHeader.tsx +++ b/web/sections/cards/Card/CardHeader.tsx @@ -61,7 +61,7 @@ export const CardHeader = forwardRef(function C ${variantTitle[variant]} max-w-prose text-pretty - dark:text-slate-80 + dark:text-white-100 `, titleClassName, ) diff --git a/web/sections/cards/EventCard/EventCard.tsx b/web/sections/cards/EventCard/EventCard.tsx index 1fb7e6919..3028b1506 100644 --- a/web/sections/cards/EventCard/EventCard.tsx +++ b/web/sections/cards/EventCard/EventCard.tsx @@ -11,7 +11,7 @@ import { toPlainText } from '@portabletext/react' import { PortableTextBlock } from '@portabletext/types' import { FormattedMessage, useIntl } from 'react-intl' import AddToCalendar from '../../../pageComponents/topicPages/AddToCalendar' -import { ButtonLink } from '@core/Link' +import { BaseLink, ButtonLink, ResourceLink } from '@core/Link' import Blocks from '../../../pageComponents/shared/portableText/Blocks' export type EventCardProps = { @@ -63,7 +63,9 @@ const EventCard = forwardRef(function EventCard( )} {...rest} > - + + +
      (function EventCard( )}
      {variant === 'single' && ingress && } -
      +
      - + {/* {details} - + */}
      ) diff --git a/web/sections/cards/PeopleCard/PeopleCard.tsx b/web/sections/cards/PeopleCard/PeopleCard.tsx index 80f0f714e..d6de1f3a5 100644 --- a/web/sections/cards/PeopleCard/PeopleCard.tsx +++ b/web/sections/cards/PeopleCard/PeopleCard.tsx @@ -1,7 +1,7 @@ import { Typography } from '@core/Typography' import { forwardRef, HTMLAttributes } from 'react' import { twMerge } from 'tailwind-merge' -import { BaseLink, ButtonLink } from '@core/Link' +import { BaseLink, ButtonLink, ResourceLink } from '@core/Link' import Image, { Ratios } from '../../../pageComponents/shared/SanityImage' import { getLocaleFromName } from '../../../lib/localization' import { getUrlFromAction, urlFor } from '../../../common/helpers' @@ -27,7 +27,7 @@ const PeopleCard = forwardRef(function PeopleCa const linkClassNames = 'text-norwegian-woods-100 no-underline hover:underline text-sm' const variantClassNames = { - default: `grid-cols-1 grid-rows-[max-content_1fr] max-w-[300px] justify-items-center items-start gap-0`, + default: `grid-cols-1 grid-rows-[max-content_1fr] md:max-w-card-maxWidth justify-items-center items-start gap-0`, single: `grid-cols-[30%_60%] grid-rows-1 gap-4 lg:gap-8 items-start lg:items-center`, } @@ -95,15 +95,13 @@ const PeopleCard = forwardRef(function PeopleCa } gap-2 pt-6`} > {isLink && cv && cvUrl ? ( - {cv?.label} - + ) : ( <> {email && ( diff --git a/web/templates/newsroom/Newsroom.tsx b/web/templates/newsroom/Newsroom.tsx index 54a4f9dd8..ae66ef628 100644 --- a/web/templates/newsroom/Newsroom.tsx +++ b/web/templates/newsroom/Newsroom.tsx @@ -132,21 +132,25 @@ const NewsRoomTemplate = forwardRef(function const searchClient = useMemo(() => { return isServerRendered - ? client({ headers: { - //@ts-ignore: TODO - Referer: url } }) - : client(undefined); - }, [isServerRendered, url]); - + ? client({ + headers: { + //@ts-ignore: TODO + Referer: url, + }, + }) + : client(undefined) + }, [isServerRendered, url]) + return (
      - + (function > {subscriptionLink?.slug && ( - - {subscriptionLinkTitle} - + {subscriptionLinkTitle} )} {localNewsPages && @@ -182,7 +184,7 @@ const NewsRoomTemplate = forwardRef(function localNewsPages?.map((localNewsPage) => { return localNewsPage?.link?.slug ? ( - + {localNewsPage?.label} diff --git a/web/templates/newsroom/sanity/NewsroomSanity.tsx b/web/templates/newsroom/sanity/NewsroomSanity.tsx index 4f1aa0a29..b73c55aad 100644 --- a/web/templates/newsroom/sanity/NewsroomSanity.tsx +++ b/web/templates/newsroom/sanity/NewsroomSanity.tsx @@ -132,9 +132,7 @@ const NewsRoomTemplateSanity = forwardRef(fu > {subscriptionLink?.slug && ( - - {subscriptionLinkTitle} - + {subscriptionLinkTitle} )} {localNewsPages && @@ -145,7 +143,6 @@ const NewsRoomTemplateSanity = forwardRef(fu {localNewsPage?.label} diff --git a/web/types/linkTypes.ts b/web/types/linkTypes.ts index 09d8c8346..6ea45b141 100644 --- a/web/types/linkTypes.ts +++ b/web/types/linkTypes.ts @@ -7,6 +7,8 @@ export type LinkType = | 'textField' | 'numberField' | 'linkSelector' + | 'anchorLink' + | 'icsLink' export type LinkData = { type?: LinkType @@ -21,7 +23,6 @@ export type LinkData = { filename?: string } - export type RelatedLinksData = { title: string links: LinkData[] diff --git a/web/types/types.ts b/web/types/types.ts index 6664d0fc3..b96d04eaa 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -106,7 +106,6 @@ export type TextBlockData = { ingress: PortableTextBlock[] callToActions?: LinkData[] splitList?: boolean - overrideButtonStyle?: boolean designOptions: DesignOptions } @@ -124,7 +123,6 @@ export type TeaserData = { text: PortableTextBlock[] overline?: string isBigText?: boolean - useResourceLinks?: boolean image: ImageWithAlt actions?: LinkData[] designOptions: DesignOptions & { From 420328aba1a08d87c04e88e269e0516d045d17c9 Mon Sep 17 00:00:00 2001 From: Borghild Date: Thu, 19 Dec 2024 14:41:15 +0100 Subject: [PATCH 2/5] :art: adjustments --- web/core/Link/ResourceLink.tsx | 131 +++++++++++------- web/pageComponents/news/LatestNews.tsx | 27 ++-- web/pageComponents/shared/SanityImage.tsx | 1 + .../topicPages/AddToCalendar.tsx | 7 +- web/pageComponents/topicPages/NewsList.tsx | 5 +- web/pageComponents/topicPages/Promotion.tsx | 16 ++- .../promotions/MultipleEventCards.tsx | 3 +- .../promotions/MultiplePromotions.tsx | 3 +- web/sections/CallToActions/index.tsx | 2 +- web/sections/PromoTiles/PromoTile.tsx | 2 +- web/sections/PromoTiles/PromoTileArray.tsx | 29 ++-- web/sections/cards/Card/Card.tsx | 38 ++--- web/sections/cards/EventCard/EventCard.tsx | 21 +-- web/sections/cards/PeopleCard/PeopleCard.tsx | 2 +- web/tailwind.config.cjs | 6 +- 15 files changed, 169 insertions(+), 124 deletions(-) diff --git a/web/core/Link/ResourceLink.tsx b/web/core/Link/ResourceLink.tsx index 846fa75e9..95e8b1f21 100644 --- a/web/core/Link/ResourceLink.tsx +++ b/web/core/Link/ResourceLink.tsx @@ -7,12 +7,16 @@ import { TransformableIcon } from '../../icons/TransformableIcon' import { add, calendar } from '@equinor/eds-icons' import { PiFilePdfThin } from 'react-icons/pi' -export type Variants = 'default' | 'fit' | 'compact' +export type Variants = 'default' | 'fit' export type ResourceLinkProps = { variant?: Variants /** Overriding styles for the icon */ iconClassName?: string + /** Overriding styles for the text */ + textClassName?: string + /** When using aria-label on the link, e.g add to calendar */ + ariaHideText?: boolean /** What kind of content is it */ type?: LinkType /* Link extension */ @@ -29,32 +33,14 @@ export const ResourceLink = forwardRef(fun extension, className = '', iconClassName = '', + textClassName = '', showExtensionIcon = false, + ariaHideText = false, href = '', ...rest }, ref, ) { - const variantClassName: Partial> = { - default: 'w-full pt-5', - fit: 'w-fit pt-5', - compact: 'w-fit pt-4', - } - - const baseResourceLinkClassNames = `group - relative - flex - flex-col - justify-end - gap-0 - text-slate-blue-95 - dark:text-white-100 - border-b - border-grey-50 - dark:border-white-100 - no-underline - ` - const iconRotation: Record = { externalUrl: '-rotate-45', downloadableFile: 'rotate-90', @@ -68,11 +54,11 @@ export const ResourceLink = forwardRef(fun case 'downloadableImage': return 'group-hover:translate-y-0.5' case 'anchorLink': - return 'group-hover:translate-y-2' + return 'translate-y-0.5 group-hover:translate-y-2' case 'icsLink': - return '' + return 'translate-y-0.5' default: - return 'group-hover:translate-x-2' + return 'translate-y-0.5 group-hover:translate-x-2' } } @@ -89,75 +75,120 @@ export const ResourceLink = forwardRef(fun `, iconClassName, ) + const marginClassName = `ml-6 xl:ml-8` switch (type) { case 'downloadableFile': case 'downloadableImage': return ( - +
      - - +
      +
      ) case 'icsLink': - return + return default: - return + return } } + const variantClassName: Partial> = { + default: 'w-full pt-3', + fit: 'w-fit pt-3', + } + const contentVariantClassName: Partial> = { - default: 'pb-3 pr-2 gap-6 xl:gap-16', - fit: 'pb-3 pr-2 gap-6 xl:gap-16', //gap-14 - compact: 'text-sm pb-2 gap-6', + default: 'pb-3 pr-2', + fit: 'pb-3 pr-2', } const classNames = envisTwMerge( - `${baseResourceLinkClassNames} + `group + relative + flex + flex-col + justify-end + gap-0 + text-slate-blue-95 + dark:text-white-100 + border-b + border-grey-50 + dark:border-white-100 + no-underline ${variantClassName[variant]} `, className, ) const getContentElements = () => { + const textClassNames = envisTwMerge(`pt-1 grow leading-none`, textClassName) switch (type) { case 'downloadableFile': return extension && extension.toUpperCase() === 'PDF' && showExtensionIcon ? ( - - - {children} - + <> + +
      + {children} +
      + ) : ( - <>{children} +
      + {children} +
      ) case 'icsLink': return ( - - - {children} - + <> + +
      + {children} +
      + ) default: - return <>{children} + return ( +
      + {children} +
      + ) } } return ( - {getContentElements()} {extension && !showExtensionIcon ? `(${extension.toUpperCase()})` : ''} {getArrowElement(type, iconClassName)} - - +
      +
      ) }) diff --git a/web/pageComponents/news/LatestNews.tsx b/web/pageComponents/news/LatestNews.tsx index 43bf6f994..a07bcfa3d 100644 --- a/web/pageComponents/news/LatestNews.tsx +++ b/web/pageComponents/news/LatestNews.tsx @@ -11,32 +11,29 @@ type LatestNewsProp = { } const LatestNews = ({ data }: LatestNewsProp) => { - const isMobile = useMediaQuery(`(max-width: 1023px)`) + const isMobile = useMediaQuery(`(max-width: 800px)`) return (
      -
        +
          {data.map((newsItem: CardData) => { return (
        • - + { download={`${title.replace(/ /g, '_')}.ics`} type="icsLink" aria-label={atcAriaLabel} - variant="compact" + variant="fit" + ariaHideText > - {atc} + {atc} ) : null } diff --git a/web/pageComponents/topicPages/NewsList.tsx b/web/pageComponents/topicPages/NewsList.tsx index af7d2ff31..50a04b69b 100644 --- a/web/pageComponents/topicPages/NewsList.tsx +++ b/web/pageComponents/topicPages/NewsList.tsx @@ -36,7 +36,10 @@ const NewsList = ({ } return ( -
          +
          {title && }
          {pagedArticles.map((article) => ( diff --git a/web/pageComponents/topicPages/Promotion.tsx b/web/pageComponents/topicPages/Promotion.tsx index 36282484c..1d24339e0 100644 --- a/web/pageComponents/topicPages/Promotion.tsx +++ b/web/pageComponents/topicPages/Promotion.tsx @@ -25,39 +25,41 @@ const Promotion = ({ const promoteSingleUpcomingEvent = data?.content?.eventPromotionSettings?.promoteSingleUpcomingEvent const sectionTitleId = useId() + const paddingClassName = `px-layout-sm 3xl:px-layout-lg` + return ( -
          +
          {title && ( )} {ingress && ( -
          +
          )} {viewAllLink?.link?.slug && ( -
          +
          {viewAllLink?.label}
          )}
          {promotions?.length === 1 || promoteSingleUpcomingEvent ? ( diff --git a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx index 225b15b1e..0835641ee 100644 --- a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx +++ b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx @@ -52,7 +52,8 @@ const MultipleEventCards = ({ justify-center content-center auto-rows-auto - md:${data.length === 2 ? 'grid-cols-2 grid-rows-1' : 'grid-cols-3 grid-rows-1'}`} + md:grid-cols-2 + 2xl:grid-cols-3`} > {data.map((item) => { return ( diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx index fe3aff294..d6a5ccc87 100644 --- a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx +++ b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx @@ -111,8 +111,7 @@ const MultiplePromotions = ({ content-center grid-cols-1 auto-rows-fr - xl:grid-cols-[repeat(3,theme(spacing.card-maxWidth))] - xl:grid-rows-1`)} + ${data?.length === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2 2xl:grid-cols-3'}`)} > <> {data.map((item) => { diff --git a/web/sections/CallToActions/index.tsx b/web/sections/CallToActions/index.tsx index 1d1147531..dc9f04d5e 100644 --- a/web/sections/CallToActions/index.tsx +++ b/web/sections/CallToActions/index.tsx @@ -41,7 +41,7 @@ const CallToActions = ({ callToActions = [], splitList, className }: CallToActio ) : (
            (function ref={ref} image={image} variant="secondary" - className={`w-full h-full md:max-w-[100%] ${background?.dark ? 'dark' : ''} `} + className={`${background?.dark ? 'dark' : ''} `} > +
              {data.group.map((tile: PromoTileData) => { return ( -
            • +
              • ) diff --git a/web/sections/cards/Card/Card.tsx b/web/sections/cards/Card/Card.tsx index bd3e9bbc1..b27aa0ed5 100644 --- a/web/sections/cards/Card/Card.tsx +++ b/web/sections/cards/Card/Card.tsx @@ -35,34 +35,37 @@ export const Card = forwardRef(function Card( ) { const commonStyling = ` flex - flex-col + flex-col + gap-0 shadow-card rounded-sm active:shadow-card-interact - min-w-card-minWidth` + w-full + h-full + ` const variantClassNames = { - primary: `${commonStyling} md:max-w-card-maxWidth`, - secondary: `${commonStyling} xl:max-w-card-maxWidth rounded-md overflow-hidden`, - compact: `h-full flex gap-4 min-w-[200px] xl:max-w-[300px] 3xl:max-w-card-maxWidth`, + primary: `${commonStyling}`, + secondary: `${commonStyling}`, + compact: `w-full h-full rounded-sm flex gap-4`, single: `grid grid-cols-[40%_1fr] min-h-[450px] shadow-card rounded-sm active:shadow-card-interact`, } const variantAspectRatio = { primary: Ratios.NINE_TO_SIXTEEN, - secondary: Ratios.FIVE_TO_FOUR, + secondary: Ratios.FOUR_TO_THREE, compact: Ratios.FIVE_TO_FOUR, single: Ratios.FIVE_TO_FOUR, } const imageRatio = { primary: 'aspect-video', - secondary: 'aspect-5/4', + secondary: 'aspect-4/3', compact: 'aspect-5/4', single: '', } const imageVariantClassNames = { - primary: `max-md:max-h-[212px]`, - secondary: `rounded-t-md max-md:max-h-[212px]`, - compact: 'w-[25vw] h-auto max-md:max-h-[212px] rounded-sm', + primary: `rounded-t-sm *:rounded-t-sm`, + secondary: `rounded-t-sm *:rounded-t-sm`, + compact: 'rounded-sm w-[25vw] h-auto *:rounded-sm', single: 'w-auto h-full', } @@ -73,13 +76,13 @@ export const Card = forwardRef(function Card( prefetch={false} className={twMerge( `group/card + bg-white-100 + text-slate-80 + focus:outline-none + focus-visible:envis-outline + dark:text-slate-80 + dark:focus-visible:envis-outline-invert ${variantClassNames[variant]} - bg-white-100 - text-slate-80 - focus:outline-none - focus-visible:envis-outline - dark:text-slate-80 - dark:focus-visible:envis-outline-invert `, className, )} @@ -89,7 +92,7 @@ export const Card = forwardRef(function Card(
              (function Card( fill maxWidth={600} aspectRatio={variantAspectRatio[variant]} - className={`${variant === 'compact' ? 'rounded-xs' : ''}`} sizes="(max-width: 800px) 100vw, 800px" />
              diff --git a/web/sections/cards/EventCard/EventCard.tsx b/web/sections/cards/EventCard/EventCard.tsx index 3028b1506..79bae4cb5 100644 --- a/web/sections/cards/EventCard/EventCard.tsx +++ b/web/sections/cards/EventCard/EventCard.tsx @@ -9,15 +9,16 @@ import { Icon } from '@equinor/eds-core-react' import { getEventDates } from '../../../common/helpers/dateUtilities' import { toPlainText } from '@portabletext/react' import { PortableTextBlock } from '@portabletext/types' -import { FormattedMessage, useIntl } from 'react-intl' +import { FormattedMessage } from 'react-intl' import AddToCalendar from '../../../pageComponents/topicPages/AddToCalendar' -import { BaseLink, ButtonLink, ResourceLink } from '@core/Link' +import { BaseLink } from '@core/Link' import Blocks from '../../../pageComponents/shared/portableText/Blocks' +type Variants = 'default' | 'single' | 'carousel' export type EventCardProps = { data: EventCardData hasSectionTitle: boolean - variant?: 'default' | 'single' | 'carousel' + variant?: Variants } & HTMLAttributes /** @@ -28,14 +29,17 @@ const EventCard = forwardRef(function EventCard( { data, className = '', variant = 'default', hasSectionTitle = true, ...rest }, ref, ) { - const intl = useIntl() - const details = intl.formatMessage({ id: 'details', defaultMessage: 'Details' }) - const { title, location, eventDate, slug, ingress } = data const { start, end } = getEventDates(eventDate) const plainTitle = title ? toPlainText(title as PortableTextBlock[]) : '' const metaClassNames = `h-full grid grid-cols-[24px_auto] gap-sm items-center py-2` + const variantClassName: Partial> = { + default: '', + single: 'max-w-prose', + carousel: 'w-[383px]', + } + return (
              (function EventCard( focus-visible:envis-outline dark:text-white-100 dark:focus-visible:envis-outline-invert - ${variant === 'carousel' ? 'w-[383px]' : ''} + ${variantClassName[variant]} `, className, )} @@ -104,9 +108,6 @@ const EventCard = forwardRef(function EventCard( {variant === 'single' && ingress && }
              - {/* - {details} - */}
              ) diff --git a/web/sections/cards/PeopleCard/PeopleCard.tsx b/web/sections/cards/PeopleCard/PeopleCard.tsx index d6de1f3a5..60dd82e18 100644 --- a/web/sections/cards/PeopleCard/PeopleCard.tsx +++ b/web/sections/cards/PeopleCard/PeopleCard.tsx @@ -98,7 +98,7 @@ const PeopleCard = forwardRef(function PeopleCa {cv?.label} diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs index 2155b90cc..9fa24633c 100644 --- a/web/tailwind.config.cjs +++ b/web/tailwind.config.cjs @@ -223,8 +223,8 @@ module.exports = { '2xl': 'calc((40 / 16) * theme(fontSize.base))', '3xl': 'calc((56 / 16) * theme(fontSize.base))', '4xl': 'calc((96 / 16) * theme(fontSize.base))', - 'card-minWidth': '220px', - 'card-maxWidth': '400px', + 'card-minWidth': '300px', //220px + 'card-maxWidth': '', //400px }), fontSize: { //--typeScale-00 @@ -301,6 +301,7 @@ module.exports = { '4/5': '0.8', '5/4': '1.25', '9/16': '0.56', + '4/3': '4/3', }, margin: { 'layout-sm': 'clamp(16px, calc(-38.3689px + 14.4984vw), 250px)', @@ -486,6 +487,7 @@ module.exports = { transitionProperty: ['motion-safe'], gridTemplateColumns: { 'auto-fill-fr': `repeat(auto-fill, minmax(80px,1fr))`, + 'auto-fill-auto': `repeat(auto-fill, minmax(0, auto))`, card: `repeat(auto-fill, minmax(min(100%, theme(spacing.card-minWidth)), theme(spacing.card-maxWidth)))`, }, }, From 77650847d3146eba2083eece2b344d44ff6b9c14 Mon Sep 17 00:00:00 2001 From: Borghild Date: Thu, 19 Dec 2024 14:51:26 +0100 Subject: [PATCH 3/5] :art: more adjustments --- web/sections/cards/PeopleCard/PeopleCard.tsx | 2 +- web/tailwind.config.cjs | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/web/sections/cards/PeopleCard/PeopleCard.tsx b/web/sections/cards/PeopleCard/PeopleCard.tsx index 60dd82e18..707020a53 100644 --- a/web/sections/cards/PeopleCard/PeopleCard.tsx +++ b/web/sections/cards/PeopleCard/PeopleCard.tsx @@ -27,7 +27,7 @@ const PeopleCard = forwardRef(function PeopleCa const linkClassNames = 'text-norwegian-woods-100 no-underline hover:underline text-sm' const variantClassNames = { - default: `grid-cols-1 grid-rows-[max-content_1fr] md:max-w-card-maxWidth justify-items-center items-start gap-0`, + default: `grid-cols-1 grid-rows-[max-content_1fr] justify-items-center items-start gap-0`, single: `grid-cols-[30%_60%] grid-rows-1 gap-4 lg:gap-8 items-start lg:items-center`, } diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs index 9fa24633c..fc87f8f93 100644 --- a/web/tailwind.config.cjs +++ b/web/tailwind.config.cjs @@ -223,8 +223,6 @@ module.exports = { '2xl': 'calc((40 / 16) * theme(fontSize.base))', '3xl': 'calc((56 / 16) * theme(fontSize.base))', '4xl': 'calc((96 / 16) * theme(fontSize.base))', - 'card-minWidth': '300px', //220px - 'card-maxWidth': '', //400px }), fontSize: { //--typeScale-00 From a8135c736960cd6ebb472f70324ba6c40bb58977 Mon Sep 17 00:00:00 2001 From: Borghild Date: Tue, 21 Jan 2025 11:10:49 +0100 Subject: [PATCH 4/5] :art: remove arrow that should not be there --- web/core/Link/ResourceLink.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/core/Link/ResourceLink.tsx b/web/core/Link/ResourceLink.tsx index 2f08c44e9..968be2081 100644 --- a/web/core/Link/ResourceLink.tsx +++ b/web/core/Link/ResourceLink.tsx @@ -126,7 +126,6 @@ export const ResourceLink = forwardRef(fun case 'downloadableFile': return extension && extension.toUpperCase() === 'PDF' && showExtensionIcon ? ( <> -
              Date: Tue, 21 Jan 2025 11:13:27 +0100 Subject: [PATCH 5/5] :art: remove grid template unused --- web/tailwind.config.cjs | 1 - 1 file changed, 1 deletion(-) diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs index 9b4687123..d7f8e793f 100644 --- a/web/tailwind.config.cjs +++ b/web/tailwind.config.cjs @@ -493,7 +493,6 @@ module.exports = { }), gridTemplateColumns: { 'auto-fill-fr': `repeat(auto-fill, minmax(80px,1fr))`, - 'auto-fill-auto': `repeat(auto-fill, minmax(0, auto))`, card: `repeat(auto-fill,minmax(min(100%,220px),400px))`, }, scrollMargin: {