feat(Timeline): rename name to title & date to subtitle with backward…

…s compatibility (#1468)
dnbexperience · Jun 20, 2022 · 6607963 · 6607963
1 parent dadb5f8
commit 6607963
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 150 deletions.
diff --git a/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -23,6 +23,11 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 1. Find the `sticky_offset` property and replace it with `stickyOffset`.
 1. Find the `/elements/Table` property and replace it with `/components/Table`.
 
+### [Timeline](/uilib/components/timeline)
+
+1. Find the `name` property in your Timeline JSX syntax and replace it with `title`.
+1. Find the `date` property in your Timeline JSX syntax and replace it with `subtitle`.
+
 ## Install
 
 To upgrade to @dnb/eufemia v10 with NPM, use:

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
@@ -16,7 +16,7 @@ export const TimelineSingleCompleted = () => (
   <Timeline 
     data={[
       {
-        name: "Completed event",
+        title: "Completed event",
         state: "completed"
       }
     ]}
@@ -31,7 +31,7 @@ export const TimelineSingleCurrent = () => (
   <Timeline 
     data={[
       {
-        name: "Current event",
+        title: "Current event",
         state: "current"
       }
     ]}
@@ -46,7 +46,7 @@ export const TimelineSingleUpcoming = () => (
   <Timeline 
     data={[
       {
-        name: "Upcoming event",
+        title: "Upcoming event",
         state: "upcoming"
       }
     ]}
@@ -65,17 +65,17 @@ export const TimelineMultipleData = () => (
 () => {
   const events = [
     {
-      name: "Completed event",
-      date: "10. september 2021", 
+      title: "Completed event",
+      subtitle: "10. september 2021", 
       state: "completed"
     },
     {
-      name: "Current event",
+      title: "Current event",
       infoMessage: "Additional information about this step if needed.",
       state: "current", 
     },
     {
-      name: "Upcoming event",
+      title: "Upcoming event",
       state: "upcoming", 
     },
   ];
@@ -98,19 +98,19 @@ export const TimelineMultipleCompletedData = () => (
 () => {
   const events = [
     {
-      name: "Completed event#1",
+      title: "Completed event#1",
       infoMessage: "Additional information about this step if needed.",
-      date: "10. september 2021", 
+      subtitle: "10. september 2021", 
       state: "completed"
     },
     {
-      name: "Completed event#2",
+      title: "Completed event#2",
       infoMessage: "Additional information about this step if needed.",
       state: "completed"
     },
     {
-      name: "Completed event#3",
-      date: "10. september 2021", 
+      title: "Completed event#3",
+      subtitle: "10. september 2021", 
       state: "completed"
     },
   ];
@@ -133,19 +133,19 @@ export const TimelineMultipleUpcomingData = () => (
 () => {
   const events = [
     {
-      name: "Upcoming event#1",
+      title: "Upcoming event#1",
       infoMessage: "Additional information about this step if needed.",
-      date: "10. september 2021", 
+      subtitle: "10. september 2021", 
       state: "upcoming"
     },
     {
-      name: "Upcoming event#2",
+      title: "Upcoming event#2",
       infoMessage: "Additional information about this step if needed.",
       state: "upcoming"
     },
     {
-      name: "Upcoming event#3",
-      date: "10. september 2021", 
+      title: "Upcoming event#3",
+      subtitle: "10. september 2021", 
       state: "upcoming"
     },
   ];
@@ -168,19 +168,19 @@ export const TimelineMultipleCurrentData = () => (
 () => {
   const events = [
     {
-      name: "Current event#1",
+      title: "Current event#1",
       infoMessage: "Additional information about this step if needed.",
-      date: "10. september 2021", 
+      subtitle: "10. september 2021", 
       state: "current"
     },
     {
-      name: "Current event#2",
+      title: "Current event#2",
       infoMessage: "Additional information about this step if needed.",
       state: "current"
     },
     {
-      name: "Current event#3",
-      date: "10. september 2021", 
+      title: "Current event#3",
+      subtitle: "10. september 2021", 
       state: "current"
     },
   ];
@@ -198,17 +198,17 @@ export const TimelineMultiple = () => (
     {() => /* jsx */ `
 <Timeline>
   <Timeline.Item 
-    name="Completed event" 
-    date="10. september 2021" 
+    title="Completed event" 
+    subtitle="10. september 2021" 
     state="completed"
   />
   <Timeline.Item 
-    name="Current event" 
+    title="Current event" 
     infoMessage="Additional information about this step if needed." 
     state="current"
   />
   <Timeline.Item 
-    name="Upcoming event" 
+    title="Upcoming event" 
     state="upcoming"
   />
 </Timeline>
@@ -226,20 +226,20 @@ export const TimelineStates = () => (
 () => {
   const events = [
     {
-      name: "Completed event",
-      date: "10. september 2021", 
+      title: "Completed event",
+      subtitle: "10. september 2021", 
       infoMessage: "Additional information about this step if needed.",
       state: "completed"
     },
     {
-      name: "Current event",
-      date: "10. september 2021", 
+      title: "Current event",
+      subtitle: "10. september 2021", 
       infoMessage: "Additional information about this step if needed.",
       state: "current"
     },
     {
-      name: "Upcoming event",
-      date: "10. september 2021", 
+      title: "Upcoming event",
+      subtitle: "10. september 2021", 
       infoMessage: "Additional information about this step if needed.",
       state: "upcoming"
     },
@@ -264,19 +264,19 @@ export const TimelineIcons = () => (
 () => {
   const events = [
     {
-      name: "Completed event",
+      title: "Completed event",
       state: "completed",
       icon: Confetti, 
       iconAlt: "Celebration"
     },
     {
-      name: "Current event",
+      title: "Current event",
       state: "current",
       icon: Card,
       iconAlt: "Bank card"
     },
     {
-      name: "Upcoming event",
+      title: "Upcoming event",
       state: "upcoming",
       icon: AccountCard,
       iconAlt: "Money bag & card"
@@ -298,18 +298,18 @@ export const TimelineSkeleton = () => (
     skeleton
     data={[
       {
-        name: "Upcoming",
-        date: "10. september 2021", 
+        title: "Upcoming",
+        subtitle: "10. september 2021", 
         state: "upcoming"
       }, 
       {
-        name: "Current",
-        date: "11. september 2021", 
+        title: "Current",
+        subtitle: "11. september 2021", 
         state: "current"
       }, 
       {
-        name: "Completed",
-        date: "12. september 2021", 
+        title: "Completed",
+        subtitle: "12. september 2021", 
         state: "completed"
       },      
     ]}
@@ -323,18 +323,18 @@ export const TimelineAsChildrenSkeleton = () => (
     {() => /* jsx */ `
 <Timeline skeleton>
   <Timeline.Item 
-    name="Upcoming" 
-    date="10. september 2021"
+    title="Upcoming" 
+    subtitle="10. september 2021"
     state="upcoming"
   />
   <Timeline.Item 
-    name="Current" 
-    date="11. september 2021"
+    title="Current" 
+    subtitle="11. september 2021"
     state="current"
   />
   <Timeline.Item 
-    name="Completed" 
-    date="11. september 2021"
+    title="Completed" 
+    subtitle="11. september 2021"
     state="completed"
   />
 </Timeline>
@@ -348,14 +348,14 @@ export const TimelineItemSkeleton = () => (
   <Timeline
     data={[
       {
-        name: "Completed event#1",
-        date: "10. september 2021", 
+        title: "Completed event#1",
+        subtitle: "10. september 2021", 
         state: "completed", 
         skeleton: true
       }, 
       {
-        name: "Completed event#2",
-        date: "11. september 2021", 
+        title: "Completed event#2",
+        subtitle: "11. september 2021", 
         infoMessage: "Additional information about this step if needed.",
         state: "completed",
       }

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md
@@ -5,4 +5,4 @@ showTabs: true
 ## Description
 
 A timeline shows events in chronological order and gives a great overview of the overall process.
-The component itself has interchangeable icons, additional messagebox when needed, and a step has three states(completed, current or upcoming). Date formatting can vary to be consistent with the rest of your application.
+The component itself has interchangeable icons, additional info message when needed, and a step has three states(completed, current or upcoming).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md
@@ -18,10 +18,10 @@ showTabs: true
 
 | Properties    | Description                                                                                                                                                                        |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`        | _(required)_ Name/title of the Timeline item.                                                                                                                                      |
+| `title`       | _(required)_ Title of the Timeline item.                                                                                                                                           |
 | `state`       | _(required)_ The component state. Options: `completed` \| `current` \| `upcoming`.                                                                                                 |
-| `date`        | _(optional)_ Date of the Timeline item, displayed below the `name`. Also supports passing an array of dates.                                                                       |
-| `infoMessage` | _(optional)_ Info message, displayed in a [FormStatus of state info](/uilib/components/form-status#formstatus-displaying-info-status), below the `date` if it exists.              |
+| `subtitle`    | _(optional)_ Subtitle of the Timeline item, displayed below the `title`. Also supports passing an array of subtitles. The subtitle is usually a date of the timeline item.         |
+| `infoMessage` | _(optional)_ Info message, displayed in a [FormStatus of state info](/uilib/components/form-status#formstatus-displaying-info-status), below the `subtitle` if it exists.          |
 | `icon`        | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` . |
 | `iconAlt`     | _(optional)_ Alt label describing the icon provided.                                                                                                                               |
 | `skeleton`    | _(optional)_ Applies loading skeleton.                                                                                                                                             |