🎨 Update promotions, promotiles and button for mobile #2341 (#2346)

* 🎨 try something * 🎨 update cards and promos * 🎨 update cards and take away carousel from promotions * 🎨 Update promotions,promotiles and button * 🎨 add promotion of single upcoming event * 🎨 add footnotes,textsnippets * 🎨 add full width * 🎨 only w-full on mobile * 🎨 add cols for mobile * 🎨 more adjustments * 🎨 mobile adjustments * 🎨 adjust image width * 🎨 update manual single event and auto height on mobile * 🎨 add some css resets and test how to reset target in footnote * 🎨 add clickbound area to small links in footnotes * 🎨 update promotions and menu featuredcontent
equinor · Jun 13, 2024 · e5ede13 · e5ede13
1 parent 45b17a8
commit e5ede13
Show file tree

Hide file tree

Showing 55 changed files with 1,117 additions and 1,369 deletions.
diff --git a/sanityv3/schemas/components/EventPromotion/EventPromotionInput.tsx b/sanityv3/schemas/components/EventPromotion/EventPromotionInput.tsx
@@ -1,4 +1,4 @@
-import { Text, Card, Grid, Stack, Heading, Radio, Inline, Flex } from '@sanity/ui'
+import { Text, Card, Grid, Stack, Heading, Radio, Inline, Flex, Switch } from '@sanity/ui'
 import { set, MemberField } from 'sanity'
 import { getObjectMemberField } from '../utils/getObjectMemberField'
 import type { ObjectInputProps } from 'sanity'
@@ -14,14 +14,13 @@ const InlinePreview = ({ value }: { value: EventPromotion | undefined }) => {
   const time = value?.promotePastEvents ? 'past' : 'upcoming'
   const number = value?.promotePastEvents ? value?.pastEventsCount || '50 (max)' : ''
   const withTags = value?.useTags ? 'from selected tags' : ''
+  const automaticPromotion = value?.promoteSingleUpcomingEvent
+    ? 'Automatically promoting single upcoming event'
+    : `Automatically promoting ${number} ${time} events ${withTags}`
 
   return (
     <Card padding={[4]} radius={2} shadow={1} tone="primary" marginTop={3} marginBottom={3}>
-      <Text>
-        {value?.manuallySelectEvents
-          ? 'Manually promoting selected events'
-          : `Automatically promoting ${number} ${time} events ${withTags}`}
-      </Text>
+      <Text>{value?.manuallySelectEvents ? 'Manually promoting selected events' : automaticPromotion}</Text>
     </Card>
   )
 }
@@ -111,6 +110,19 @@ export const EventPromotionInput = (props: EventPromotionInputProps) => {
               />
             )}
           </Grid>
+          <Card padding={2} radius={2} shadow={1}>
+            <Inline space={2}>
+              <Switch
+                id="selectSingleUpcomingPromotion"
+                checked={value?.promoteSingleUpcomingEvent}
+                onChange={() => onChange(set(!value?.promoteSingleUpcomingEvent, ['promoteSingleUpcomingEvent']))}
+              />
+              <Text as="label" htmlFor="selectSingleUpcomingPromotion">
+                Promote single upcoming event
+              </Text>
+            </Inline>
+          </Card>
+
           {value?.useTags && (
             <MemberField
               member={selectedTags}

diff --git a/sanityv3/schemas/components/EventPromotion/EventPromotionPreview.tsx b/sanityv3/schemas/components/EventPromotion/EventPromotionPreview.tsx
@@ -9,27 +9,37 @@ type EventPromotionPreviewProps = {
   manuallySelectEvents?: boolean
   promotedEvents?: Reference[]
   promotePastEvents?: boolean
+  promoteSingleUpcomingEvent?: boolean
   pastEventsCount?: number
   useTags?: boolean
 } & PreviewProps
 
 export const EventPromotionPreview = (props: EventPromotionPreviewProps) => {
-  const { manuallySelectEvents, promotedEvents, promotePastEvents, pastEventsCount, useTags, tags, renderDefault } =
-    props
+  const {
+    manuallySelectEvents,
+    promotedEvents,
+    promotePastEvents,
+    pastEventsCount,
+    promoteSingleUpcomingEvent,
+    useTags,
+    tags,
+    renderDefault,
+  } = props
   const [title, setTitle] = useState('Event promotion')
 
   useEffect(() => {
     if (manuallySelectEvents && promotedEvents) {
       return setTitle(`Showing ${promotedEvents.length} selected events`)
     }
 
-    const time = promotePastEvents ? 'past' : 'upcoming'
+    const time = promotePastEvents ? 'past' : `${promoteSingleUpcomingEvent ? 'single' : ''} upcoming`
     const number = promotePastEvents ? pastEventsCount || '50 (max)' : ''
     const withTags = useTags && tags ? `from ${tags.length} tag(s)` : ''
 
-    return setTitle(`Showing ${number} ${time} events ${withTags}`)
-  }, [manuallySelectEvents, promotedEvents, useTags, tags, pastEventsCount])
+    return setTitle(`Showing ${number} ${time} ${promoteSingleUpcomingEvent ? 'event' : 'events'} ${withTags}`)
+  }, [manuallySelectEvents, promotedEvents, useTags, tags, pastEventsCount, promoteSingleUpcomingEvent])
 
+  console.log('title', title)
   return (
     <Flex align="center">
       <Box flex={1}>

diff --git a/sanityv3/schemas/editors/blockContentType.tsx b/sanityv3/schemas/editors/blockContentType.tsx
@@ -1,11 +1,10 @@
-import { attach_file, external_link, format_color_text, link } from '@equinor/eds-icons'
+import { attach_file, external_link, format_color_text, link, star_filled } from '@equinor/eds-icons'
 import type { BlockDefinition, BlockStyleDefinition, Rule, ValidationContext } from 'sanity'
 import { filterByPages, filterByPagesInOtherLanguages } from '../../helpers/referenceFilters'
 import { EdsBlockEditorIcon, EdsIcon, IconSubScript, IconSuperScript } from '../../icons'
 import { Flags } from '../../src/lib/datasetHelpers'
 import { ExternalLinkRenderer, SubScriptRenderer, SuperScriptRenderer } from '../components'
 import routes from '../routes'
-import { component } from 'sanity/desk'
 import { defaultColors } from '../defaultColors'
 
 export type BlockContentProps = {
@@ -117,7 +116,51 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
           component: SuperScriptRenderer,
         },
       ],
-      annotations: [],
+      annotations: [
+        {
+          name: 'footnote',
+          type: 'object',
+          title: 'Footnote',
+          icon: EdsIcon(star_filled),
+          fields: [
+            {
+              name: 'text',
+              type: 'array',
+              of: [
+                {
+                  type: 'block',
+                  styles: [
+                    {
+                      title: 'Small text',
+                      value: 'smallText',
+                      component: SmallTextRender,
+                    },
+                  ],
+                  lists: [],
+                  marks: {
+                    decorators: [
+                      { title: 'Strong', value: 'strong' },
+                      { title: 'Emphasis', value: 'em' },
+                      {
+                        title: 'Sub',
+                        value: 'sub',
+                        icon: IconSubScript,
+                        component: SubScriptRenderer,
+                      },
+                      {
+                        title: 'Super',
+                        value: 'sup',
+                        icon: IconSuperScript,
+                        component: SuperScriptRenderer,
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
     },
   }
 

diff --git a/sanityv3/schemas/objects/promoTileArray.tsx b/sanityv3/schemas/objects/promoTileArray.tsx
@@ -17,8 +17,7 @@ export default {
     {
       name: 'useHorizontalScroll',
       title: 'Use horizontal scroll',
-      description:
-        'When this is enabled, the promo tiles will use horizontal scroll if the amount of content is greater than the screen size allows. This feature is enabled by default for smaller screen sizes.',
+      description: '(Deprecated)',
       type: 'boolean',
       initialValue: false,
     },

diff --git a/sanityv3/schemas/objects/promotion/promoteEvents.tsx b/sanityv3/schemas/objects/promotion/promoteEvents.tsx
@@ -11,6 +11,7 @@ export type EventPromotion = {
   manuallySelectEvents?: boolean
   promotedEvents?: Reference[]
   promotePastEvents?: boolean
+  promoteSingleUpcomingEvent?: boolean
   pastEventsCount?: number
   useTags?: boolean
 }
@@ -43,6 +44,13 @@ export default {
       description: 'Leave empty to show all the past events (max limit 50).',
       validation: (Rule: Rule) => Rule.integer().positive().greaterThan(0).lessThan(50),
     },
+    {
+      name: 'promoteSingleUpcomingEvent',
+      type: 'boolean',
+      title: 'Promote singe upcoming event',
+      initialValue: false,
+      hidden: ({ parent }: { parent: EventPromotion }) => parent?.manuallySelectEvents,
+    },
     {
       name: 'useTags',
       type: 'boolean',
@@ -102,6 +110,7 @@ export default {
       promotedEvents: 'promotedEvents',
       manuallySelectEvents: 'manuallySelectEvents',
       promotePastEvents: 'promotePastEvents',
+      promoteSingleUpcomingEvent: 'promoteSingleUpcomingEvent',
       pastEventsCount: 'pastEventsCount',
     },
   },

diff --git a/sanityv3/schemas/objects/promotion/promotion.tsx b/sanityv3/schemas/objects/promotion/promotion.tsx
@@ -10,20 +10,23 @@ import type { ColorSelectorValue } from '../../components/ColorSelector'
 import { EdsIcon } from '../../../icons'
 import { Flags } from '../../../src/lib/datasetHelpers'
 
-const horizontalScrollValidation = (context: Promotion): true | ValidationError => {
-  const { promotion, useHorizontalScroll } = context
+import routes from '../../routes'
+import { filterByRoute } from '../../../helpers/referenceFilters'
+
+const promotionLengthValidation = (context: Promotion): true | ValidationError => {
+  const { promotion } = context
   const promo = promotion[0]
   const numberOfItems = promo._type === 'promoteTopics' ? promo.references?.length : promo.promotedArticles?.length
   const MIN = 3
-  const MAX = useHorizontalScroll ? 6 : 3
+  const MAX = 3
 
   const validateNumber = (length: number): true | ValidationError => {
     if (length < MIN)
       // @ts-ignore
-      return { message: `Must have at least ${MIN} items`, paths: ['promotion'] }
+      return { message: `Must have ${MIN} items`, paths: ['promotion'] }
     if (length > MAX)
       // @ts-ignore
-      return { message: `Maximum of ${MIN} items allowed`, paths: ['promotion'] }
+      return { message: `Must have ${MIN} items`, paths: ['promotion'] }
 
     return true
   }
@@ -70,10 +73,10 @@ export default {
   ],
   validation: (Rule: Rule) =>
     Rule.custom((value: Promotion): CustomValidatorResult => {
-      const typesToValidate = ['promoteTopics', 'promoteMagazine']
+      const typesToValidate = ['promoteTopics', 'promoteMagazine', 'promoteNews']
 
       if (typesToValidate.includes(value.promotion[0]._type)) {
-        return horizontalScrollValidation(value)
+        return promotionLengthValidation(value)
       }
 
       return true
@@ -110,11 +113,25 @@ export default {
       options: { sortable: false },
       validation: (Rule: Rule) => Rule.required().min(1).max(1),
     },
+    {
+      name: 'viewAllLink',
+      title: 'View all internal link',
+      description: 'Use this if you want a "View all ..." link to e.g. all news',
+      type: 'reference',
+      to: routes,
+      options: {
+        filter: filterByRoute,
+      },
+    },
+    {
+      name: 'viewAllLinkLabel',
+      title: 'Label for the View all link',
+      type: 'string',
+    },
     {
       name: 'useHorizontalScroll',
       title: 'Use horizontal scroll',
-      description:
-        'When this is enabled, the promotion will use horizontal scroll if the amount of content is greater than the screen size allows. This feature is enabled by default for smaller screen sizes.',
+      description: '(Deprecated) Not used anymore. Will be removed after an interval',
       type: 'boolean',
       initialValue: false,
     },

diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx
@@ -90,7 +90,7 @@ export default {
       name: 'actions',
       options: {
         collapsible: true,
-        collapsed: true,
+        collapsed: false,
       },
     },
     {

diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
@@ -709,6 +709,21 @@ const snippets: textSnippet = {
     group: groups.others,
     hidden: Flags.IS_SATELLITE,
   },
+  footnotes: {
+    title: 'Footnotes',
+    defaultValue: 'Footnotes',
+    group: groups.others,
+  },
+  footnote: {
+    title: 'Footnote',
+    defaultValue: 'Footnote',
+    group: groups.others,
+  },
+  back_to_content: {
+    title: 'Back to content',
+    defaultValue: 'Back to content',
+    group: groups.others,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

diff --git a/web/components/src/Card/Card.tsx b/web/components/src/Card/Card.tsx
@@ -1,12 +1,9 @@
 import { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
-import { outlineTemplate, Tokens } from '@utils'
 import { LandscapeCard } from './LandscapeCard'
 import { PortraitCard } from './PortraitCard'
 import { default as NextLink } from 'next/link'
 
-const { outline } = Tokens
-
 export type CardProps = {
   /** What kind of card is this (we'll probably add more options to this list) */
   type?: 'news' | 'promo'
@@ -20,9 +17,6 @@ export const CardLink = styled(NextLink)`
   &:hover {
     cursor: pointer;
   }
-  &[data-focus-visible-added]:focus {
-    ${outlineTemplate(outline)}
-  }
 `
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(

diff --git a/web/components/src/Card/LandscapeCard.tsx b/web/components/src/Card/LandscapeCard.tsx
@@ -1,12 +1,12 @@
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import styled from 'styled-components'
+import { twMerge } from 'tailwind-merge'
 
 export type CardProps = HTMLAttributes<HTMLDivElement>
 
 export const StyledLandscapeCard = styled.div`
   display: grid;
   grid-template-columns: 1fr;
-  box-shadow: var(--card-shadow, none);
   background-color: var(--card-background, transparent);
   gap: var(--card-gap, var(--space-large));
   justify-content: center;
@@ -20,7 +20,10 @@ export const StyledLandscapeCard = styled.div`
   }
 `
 
-export const LandscapeCard = forwardRef<HTMLDivElement, CardProps>(function Card({ style, children, ...rest }, ref) {
+export const LandscapeCard = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { style, children, className = '', ...rest },
+  ref,
+) {
   return (
     <StyledLandscapeCard
       ref={ref}
@@ -32,6 +35,7 @@ export const LandscapeCard = forwardRef<HTMLDivElement, CardProps>(function Card
           ...style,
         } as CSSProperties
       }
+      className={twMerge('shadow-card', className)}
       {...rest}
     >
       {children}

diff --git a/web/components/src/Card/PortraitCard.tsx b/web/components/src/Card/PortraitCard.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import styled from 'styled-components'
+import { twMerge } from 'tailwind-merge'
 
 export type CardProps = {
   /** What kind of card is this (we'll probably add more options to this list) */
@@ -11,7 +12,6 @@ export const StyledPortraitCard = styled.div`
   height: var(--card-height, auto);
   display: flex;
   flex-direction: column;
-  box-shadow: var(--card-shadow, none);
   background-color: var(--card-background, transparent);
   gap: var(--card-gap, var(--space-large));
   padding: var(--card-padding, 0 0 var(--space-xLarge) 0);
@@ -24,7 +24,7 @@ export const StyledPortraitCard = styled.div`
 `
 
 export const PortraitCard = forwardRef<HTMLDivElement, CardProps>(function Card(
-  { type = 'news', textOnly = false, style, children, ...rest },
+  { type = 'news', textOnly = false, style, children, className = '', ...rest },
   ref,
 ) {
   return (
@@ -41,6 +41,7 @@ export const PortraitCard = forwardRef<HTMLDivElement, CardProps>(function Card(
             } as CSSProperties
           }
           {...rest}
+          className={twMerge('shadow-card', className)}
         >
           {children}
         </StyledPortraitCard>
@@ -55,6 +56,7 @@ export const PortraitCard = forwardRef<HTMLDivElement, CardProps>(function Card(
             } as CSSProperties
           }
           {...rest}
+          className={twMerge('shadow-card', className)}
         >
           {children}
         </StyledPortraitCard>