Merge branch 'bose/2721' into staging

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',

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',

web/core/Link/BaseLink.tsx

@@ -36,27 +36,43 @@ export const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkProps>(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
-    <a
-      className={classNames}
-      ref={ref}
-      href={href}
-      target="_blank"
-      {...rest}
-      rel="noopener"
-      referrerPolicy="strict-origin-when-cross-origin"
-    >
-      {children}
-    </a>
-  ) : (
-    <NextLink ref={ref} href={href} prefetch={false} className={classNames} {...rest}>
-      {children}
-    </NextLink>
-  )
+  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
+          <a
+            className={classNames}
+            ref={ref}
+            href={href}
+            target="_blank"
+            {...rest}
+            rel="noopener"
+            referrerPolicy="strict-origin-when-cross-origin"
+          >
+            {children}
+          </a>
+        )
+      case 'icsLink':
+        return (
+          <a className={classNames} ref={ref} href={href} {...rest}>
+            {children}
+          </a>
+        )
+
+      default:
+        return (
+          <NextLink ref={ref} href={href} prefetch={false} className={classNames} {...rest}>
+            {children}
+          </NextLink>
+        )
+    }
+  }
+
+  return getLinkElement()
 })
 export default BaseLink

web/core/Link/Link.tsx

@@ -18,15 +18,16 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
     items-center
     gap-2.5
     underline
-    hover:no-underline
+    hover:text-norwegian-woods-100
+    dark:hover:text-slate-blue-95
   `,
     className,
   )
 
   return (
     <BaseLink className={classNames} type={type} ref={ref} href={href} {...rest}>
       {children}
-      {type === 'externalUrl' && <ArrowRight className="inline-block pt-1 -rotate-45 origin-bottom-left" />}
+      {type === 'externalUrl' && <ArrowRight className="text-no inline-block pt-1 -rotate-45 origin-bottom-left" />}
     </BaseLink>
   )
 })

web/core/Link/ResourceLink.tsx

@@ -1,39 +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<BaseLinkProps, 'type'>
 
-/** Read more link style */
 export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(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<Record<Variants, string>> = {
+    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<string, string> = {
     externalUrl: '-rotate-45',
@@ -42,32 +62,104 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(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 (
+          <span className="flex flex-col px-1">
+            <ArrowRight className={iconClassNames} />
+            <span className="bg-energy-red-100 h-[2px] w-full" />
+          </span>
+        )
+      case 'icsLink':
+        return <TransformableIcon iconData={add} className={iconClassNames} />
+      default:
+        return <ArrowRight className={iconClassNames} />
+    }
+  }
+
+  const contentVariantClassName: Partial<Record<Variants, string>> = {
+    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 ? (
+          <span className="flex gap-2">
+            <PiFilePdfThin />
+            {children}
+          </span>
+        ) : (
+          <>{children}</>
+        )
+      case 'icsLink':
+        return (
+          <span className="flex gap-2">
+            <TransformableIcon iconData={calendar} />
+            {children}
+          </span>
+        )
+      default:
+        return <>{children}</>
+    }
+  }
   return (
-    <BaseLink className={classNames} ref={ref} href={href} {...rest}>
-      <span className="grid grid-cols-[1fr_max-content] gap-14 items-center pb-4 pr-2 leading-none">
-        {children}
-        <ArrowRight className={iconClassNames} />
+    <BaseLink className={classNames} type={type} ref={ref} href={href} {...rest}>
+      <span
+        className={envisTwMerge(
+          `grid 
+        grid-cols-[1fr_max-content]
+        text-start
+        items-center
+        leading-tight
+        ${contentVariantClassName[variant]}`,
+        )}
+      >
+        {getContentElements()}
+        {extension && !showExtensionIcon ? `(${extension.toUpperCase()})` : ''}
+        {getArrowElement(type, iconClassName)}
       </span>
       <span className="w-[0%] h-[1px] bg-grey-40 transition-all duration-300 group-hover:w-full" />
     </BaseLink>
   )
 })
+
 export default ResourceLink