Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Timeline): rename name to title & date to subtitle with backwards compatibility #1468

Merged
merged 3 commits into from
Jun 20, 2022
+190 −150
Merged

feat(Timeline): rename name to title & date to subtitle with backwards compatibility #1468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0821ec3
break: change TimeLineItem name prop to title
thaytharma Jun 17, 2022
233c021
break: change TimeLineItem date prop to subtitle
thaytharma Jun 20, 2022
a7cd72b
feat(Timeline): rename name to title & date to subtitle with backward…
tujoworker Jun 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions ...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
102 changes: 51 additions & 51 deletions packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const TimelineSingleCompleted = () => (
<Timeline
data={[
{
name: "Completed event",
title: "Completed event",
state: "completed"
}
]}
Expand All @@ -31,7 +31,7 @@ export const TimelineSingleCurrent = () => (
<Timeline
data={[
{
name: "Current event",
title: "Current event",
state: "current"
}
]}
Expand All @@ -46,7 +46,7 @@ export const TimelineSingleUpcoming = () => (
<Timeline
data={[
{
name: "Upcoming event",
title: "Upcoming event",
state: "upcoming"
}
]}
Expand All @@ -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",
},
];
Expand All @@ -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"
},
];
Expand All @@ -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"
},
];
Expand All @@ -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"
},
];
Expand All @@ -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>
Expand All @@ -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"
},
Expand All @@ -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"
Expand All @@ -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"
},
]}
Expand All @@ -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>
Expand All @@ -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",
}
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
6 changes: 3 additions & 3 deletions packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Loading