feat(whats-new): update content in What's New (#4598)

* ref: extract LottieAnimation component to templates dir * feat: update what's new feature list to only React content * feat: add presentation role for images in drawer for a11y * feat: remove redundant story already covered by WhatsNewDrawer stories * feat: remove extra line break in whats new content * fix: use whitespace css prop in WhatsNewContent instead
opengovsg · Sep 7, 2022 · daf0452 · daf0452
1 parent 178e378
commit daf0452
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 275 deletions.
diff --git a/frontend/src/features/rollout-announcement/components/NewFeatureContent.tsx b/frontend/src/features/rollout-announcement/components/NewFeatureContent.tsx
@@ -1,40 +1,9 @@
-import { useEffect, useRef } from 'react'
-import { Box, BoxProps, ModalBody, ModalHeader, Text } from '@chakra-ui/react'
-import lottie, { AnimationConfigWithData, SVGRendererConfig } from 'lottie-web'
+import { ModalBody, ModalHeader, Text } from '@chakra-ui/react'
+import { AnimationConfigWithData } from 'lottie-web'
 
-import { NewFeatureTag } from './NewFeatureTag'
-
-interface LottieAnimationProps extends BoxProps {
-  animationData: AnimationConfigWithData['animationData']
-  preserveAspectRatio?: SVGRendererConfig['preserveAspectRatio']
-}
-
-export const LottieAnimation = ({
-  animationData,
-  preserveAspectRatio,
-  ...boxProps
-}: LottieAnimationProps): JSX.Element => {
-  const element = useRef<HTMLDivElement>(null)
-  const lottieInstance = useRef<unknown>()
+import { LottieAnimation } from '~templates/LottieAnimation'
 
-  useEffect(() => {
-    if (!element.current) return
-
-    lottieInstance.current = lottie.loadAnimation({
-      animationData,
-      container: element.current,
-      rendererSettings: {
-        preserveAspectRatio: preserveAspectRatio,
-      },
-    })
-
-    return () => {
-      lottieInstance.current = lottie.destroy()
-    }
-  }, [animationData, preserveAspectRatio])
-
-  return <Box {...boxProps} ref={element} />
-}
+import { NewFeatureTag } from './NewFeatureTag'
 
 interface NewFeatureContentProps {
   title: string
@@ -50,8 +19,6 @@ export const NewFeatureContent = (props: {
   return (
     <>
       <LottieAnimation
-        // The link will always change in Chromatic so this should be ignored.
-        data-chromatic="ignore"
         bg="primary.100"
         pt="4.5rem"
         height={{ base: '30vh', md: 'initial' }}

diff --git a/frontend/src/features/whats-new/FeatureUpdateList.ts b/frontend/src/features/whats-new/FeatureUpdateList.ts
@@ -1,10 +1,16 @@
-import PhoneFieldFeatureUpdateImg from './assets/phone_field_feature_update.svg'
-import WorkspaceFeatureUpdateImg from './assets/workspaces_feature_update.svg'
+import dedent from 'dedent'
+import { JsonObject, RequireExactlyOne } from 'type-fest'
 
-export interface FeatureUpdateImage {
-  url: string
-  alt: string
-}
+import WhatsNewAnimationData from './assets/1-dnd.json'
+
+export type FeatureUpdateImage = RequireExactlyOne<
+  {
+    alt: string
+    url: string
+    animationData: JsonObject
+  },
+  'url' | 'animationData'
+>
 export interface FeatureUpdate {
   date: Date
   title: string
@@ -17,155 +23,22 @@ export interface FeatureUpdateList {
   version: number
 }
 
-// TODO: Confirm the actual features which will be showcased in the What's New section
 // New features should be added at the top of the list.
 export const FEATURE_UPDATE_LIST: FeatureUpdateList = {
   // Update version whenever a new feature is added.
   version: 1,
   features: [
     {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'UI Improvements',
-      description: `
-  * Cool new datepicker with day, month, and year views
-  * Loading indicators for verified field OTPs
-  * Consistent mobile field styling
-  `,
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'No more hangups',
-      description:
-        'With the new Phone Number field, you can quickly collect people’s digits. Local and international validation available.',
-      image: {
-        url: PhoneFieldFeatureUpdateImg,
-        alt: 'Phone Field Feature Update',
-      },
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'Introducing Workspaces',
-      description:
-        "A workspace that's never messy. The first thing you see when you log into FormSG is your Workspace. This is where you store and organize all of your forms. Create multiple Workspaces and move your forms into them to stay organised.",
-      image: {
-        url: WorkspaceFeatureUpdateImg,
-        alt: 'Workspace Feature Update',
-      },
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'UI Improvements',
-      description: `
-* Cool new datepicker with day, month, and year views
-* Loading indicators for verified field OTPs
-* Consistent mobile field styling
-    `,
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'No more hangups',
-      description:
-        'With the new Phone Number field, you can quickly collect people’s digits. Local and international validation available.',
-      image: {
-        url: PhoneFieldFeatureUpdateImg,
-        alt: 'Phone Field Feature Update',
-      },
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'Introducing Workspaces',
-      description:
-        "A workspace that's never messy. The first thing you see when you log into FormSG is your Workspace. This is where you store and organize all of your forms. Create multiple Workspaces and move your forms into them to stay organised.",
-      image: {
-        url: WorkspaceFeatureUpdateImg,
-        alt: 'Workspace Feature Update',
-      },
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'UI Improvements',
-      description: `
-* Cool new datepicker with day, month, and year views
-* Loading indicators for verified field OTPs
-* Consistent mobile field styling
-    `,
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'No more hangups',
-      description:
-        'With the new Phone Number field, you can quickly collect people’s digits. Local and international validation available.',
-      image: {
-        url: PhoneFieldFeatureUpdateImg,
-        alt: 'Phone Field Feature Update',
-      },
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'Introducing Workspaces',
-      description:
-        "A workspace that's never messy. The first thing you see when you log into FormSG is your Workspace. This is where you store and organize all of your forms. Create multiple Workspaces and move your forms into them to stay organised.",
-      image: {
-        url: WorkspaceFeatureUpdateImg,
-        alt: 'Workspace Feature Update',
-      },
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'UI Improvements',
-      description: `
-* Cool new datepicker with day, month, and year views
-* Loading indicators for verified field OTPs
-* Consistent mobile field styling
-    `,
-    },
-    {
-      date: new Date('17 June 2022 GMT+8'),
-      title: 'No more hangups',
-      description:
-        'With the new Phone Number field, you can quickly collect people’s digits. Local and international validation available.',
-      image: {
-        url: PhoneFieldFeatureUpdateImg,
-        alt: 'Phone Field Feature Update',
-      },
-    },
-    {
-      date: new Date('10 June 2022 GMT+8'),
-      title: 'Introducing Workspaces',
-      description:
-        "A workspace that's never messy. The first thing you see when you log into FormSG is your Workspace. This is where you store and organize all of your forms. Create multiple Workspaces and move your forms into them to stay organised.",
-      image: {
-        url: WorkspaceFeatureUpdateImg,
-        alt: 'Workspace Feature Update',
-      },
-    },
-    {
-      date: new Date('10 June 2022 GMT+8'),
-      title: 'UI Improvements',
-      description: `
-* Cool new datepicker with day, month, and year views
-* Loading indicators for verified field OTPs
-* Consistent mobile field styling
-    `,
-    },
-    {
-      date: new Date('10 June 2022 GMT+8'),
-      title: 'No more hangups',
-      description:
-        'With the new Phone Number field, you can quickly collect people’s digits. Local and international validation available.',
-      image: {
-        url: PhoneFieldFeatureUpdateImg,
-        alt: 'Phone Field Feature Update',
-      },
-    },
-    {
-      date: new Date('10 June 2022 GMT+8'),
-      title: 'Introducing Workspaces',
-      description:
-        "A workspace that's never messy. The first thing you see when you log into FormSG is your Workspace. This is where you store and organize all of your forms. Create multiple Workspaces and move your forms into them to stay organised.",
+      title: 'The new FormSG experience',
+      date: new Date('17 August 2022 GMT+8'),
+      description: dedent`
+        * Your forms now appear in a list so you can find your important forms faster
+        * The new drag-and-drop form builder helps you easily rearrange your form fields  \n &nbsp;
+        Notice anything wrong? Let us know by using the feedback button at the bottom-right of the screen.
+      `,
       image: {
-        url: WorkspaceFeatureUpdateImg,
-        alt: 'Workspace Feature Update',
+        animationData: WhatsNewAnimationData,
+        alt: 'The new FormSG experience',
       },
     },
   ],

diff --git a/frontend/src/features/whats-new/WhatsNewContent.stories.tsx b/frontend/src/features/whats-new/WhatsNewContent.stories.tsx
diff --git a/frontend/src/features/whats-new/WhatsNewContent.tsx b/frontend/src/features/whats-new/WhatsNewContent.tsx
@@ -1,9 +1,11 @@
+import { useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Box, Image, Text } from '@chakra-ui/react'
 import { format } from 'date-fns'
 import gfm from 'remark-gfm'
 
 import { useMdComponents } from '~hooks/useMdComponents'
+import { LottieAnimation } from '~templates/LottieAnimation'
 
 import { FeatureUpdateImage } from './FeatureUpdateList'
 
@@ -27,13 +29,32 @@ export const WhatsNewContent = ({
       text: {
         color: 'secondary.500',
         textStyle: 'body-1',
+        whiteSpace: 'pre-wrap',
       },
       list: {
         color: 'secondary.500',
         marginInlineStart: '1.25em',
       },
     },
   })
+
+  const renderedImage = useMemo(() => {
+    if (!image) return
+
+    if (image.animationData) {
+      return (
+        <LottieAnimation
+          title={image.alt}
+          aria-label={image.alt}
+          animationData={image.animationData}
+        />
+      )
+    }
+    return (
+      <Image width="100%" src={image.url} title={image.alt} alt={image.alt} />
+    )
+  }, [image])
+
   const formattedDate = format(date, DATE_FORMAT)
   return (
     <Box>
@@ -46,9 +67,9 @@ export const WhatsNewContent = ({
       <ReactMarkdown components={mdComponents} remarkPlugins={[gfm]}>
         {description}
       </ReactMarkdown>
-      {image && (
-        <Image width="100%" src={image.url} mt="2rem" alt={image.alt} />
-      )}
+      <Box mt="2rem" role="presentation">
+        {renderedImage}
+      </Box>
     </Box>
   )
 }
diff --git a/frontend/src/features/whats-new/assets/1-dnd.json b/frontend/src/features/whats-new/assets/1-dnd.json