Skip to content
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.

Commit

Permalink
Add action to timeline step
Browse files Browse the repository at this point in the history
Signed-off-by: Sam Foo <[email protected]>
  • Loading branch information
Sam Foo committed Mar 10, 2021
1 parent 3dbb65b commit f53928f
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 8 deletions.
1 change: 1 addition & 0 deletions changelogs/unreleased/2130-GuessWhoSamFoo
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added timeline component
34 changes: 33 additions & 1 deletion pkg/view/component/timeline.go
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ SPDX-License-Identifier: Apache-2.0
package component

import (
"encoding/json"
"sync"

"github.com/pkg/errors"
)

// Timeline is a component for timeline
Expand All @@ -31,6 +32,37 @@ type TimelineStep struct {
Header string `json:"header"`
Title string `json:"title"`
Description string `json:"description"`
ButtonGroup *ButtonGroup `json:"buttonGroup,omitempty"`
}

func (t *TimelineStep) UnmarshalJSON(data []byte) error {
x := struct {
State TimelineState `json:"state"`
Header string `json:"header"`
Title string `json:"title"`
Description string `json:"description"`
ButtonGroup *TypedObject `json:"buttonGroup,omitempty"`
}{}
if err := json.Unmarshal(data, &x); err != nil {
return err
}
if x.ButtonGroup != nil {
component, err := x.ButtonGroup.ToComponent()
if err != nil {
return err
}
buttonGroup, ok := component.(*ButtonGroup)
if !ok {
return errors.New("item was not a buttonGroup")
}
t.ButtonGroup = buttonGroup
}
t.State = x.State
t.Title = x.Title
t.Header = x.Header
t.Description = x.Description

return nil
}

// TimelineState is the state of a timeline step
Expand Down
6 changes: 3 additions & 3 deletions pkg/view/component/timeline_test.go
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ SPDX-License-Identifier: Apache-2.0
package component

import (
"encoding/json"
"github.com/stretchr/testify/assert"
"github.com/stretchr/testify/require"
"io/ioutil"
"path"
"testing"

"github.com/stretchr/testify/assert"
"github.com/stretchr/testify/require"
)

func Test_Timeline_Marshal(t *testing.T) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
<clr-timeline-step [clrState]="step.state">
<clr-timeline-step-header>{{ step.header }}</clr-timeline-step-header>
<clr-timeline-step-title>{{ step.title }}</clr-timeline-step-title>
<clr-timeline-step-description>{{ step.description }}</clr-timeline-step-description>
<clr-timeline-step-description>
{{ step.description }}
<ng-container *ngIf="step.buttonGroup">
<br>
<app-button-group [view]="step.buttonGroup"></app-button-group>
</ng-container>
</clr-timeline-step-description>
</clr-timeline-step>
</ng-container>
</clr-timeline>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
::ng-deep .btn-group .btn {
margin-top: 0.3rem;
}
1 change: 1 addition & 0 deletions web/src/app/modules/shared/models/content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@ export interface TimelineStep {
header: string;
title: string;
description: string;
buttonGroup?: ButtonGroupView;
}

export interface TimestampView extends View {
Expand Down
2 changes: 1 addition & 1 deletion web/src/stories/button.group.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ buttonGroup.AddButton(
<h2>Description</h2>

<p>A Button Group component can have buttons added imperatively using the AddButton method.</p>
<p>The Button component supports a comfirmation method with a Markdown compatible message that appears in a modal.
<p>The Button component supports a confirmation method with a Markdown compatible message that appears in a modal.
Buttons requiring confirmation are red.</p>

<h2>Example</h2>
Expand Down
23 changes: 21 additions & 2 deletions web/src/stories/timeline.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const timelineDocs= {source: {code: `steps := []component.TimelineStep{
Description: "Title description",
},
}
timeline := component.NewTimeline("title", steps, true)
timeline := component.NewTimeline(steps, true)
timeline.Add(component.TimelineStep{
State: component.TimelineStepCurrent,
Header: "current test",
Expand All @@ -23,6 +23,24 @@ timeline.Add(component.TimelineStep{
Description: "loading description",
})`}}

export const buttonGroupView = {
config: {
buttons: [
{
name: 'Testing',
payload: {},
confirmation: {
title: 'Confirm action',
body: 'Are you sure?',
},
},
],
},
metadata: {
type: 'buttonGroup'
}
}

<h1>Timeline Component</h1>
<h2>Description</h2>

Expand All @@ -46,7 +64,8 @@ timeline.Add(component.TimelineStep{
state: "current",
header: "current header",
title: 'Step 1',
description: 'this is a current step'
description: 'this is a current step',
buttonGroup: buttonGroupView,
},
{
state: "processing",
Expand Down

0 comments on commit f53928f

Please sign in to comment.