Commit d2bf12c1 authored by Stefan Probst's avatar Stefan Probst
Browse files

style: add base layout for workflow step fowm

parent 951cb162
Pipeline #178345 passed with stage
in 5 minutes and 43 seconds
import React from 'react'
import { WorkflowCore } from '@/api/sshoc'
import { Button } from '@/elements/Button/Button'
import { Icon } from '@/elements/Icon/Icon'
import { Svg as CrossIcon } from '@/elements/icons/small/cross.svg'
import { Svg as PlusIcon } from '@/elements/icons/small/plus.svg'
import { Svg as TriangleIcon } from '@/elements/icons/small/triangle.svg'
import { FormField } from '@/modules/form/FormField'
import { FormFieldArray } from '@/modules/form/FormFieldArray'
......@@ -12,21 +17,34 @@ export interface ItemFormValues extends WorkflowCore {
*/
export function WorkflowStepsFormSection(): JSX.Element {
return (
<section>
<section className="flex flex-col space-y-2">
<strong className="mb-6 text-error-500">
Editing and sorting workflow steps is not yet implemented.
</strong>
<FormField name="label" subscription={{ value: true }}>
{({ input }) => {
return <h2>{input.value}</h2>
return (
<div className="flex flex-col px-4 py-3 border border-gray-200 rounded bg-gray-75">
<h2 className="text-base font-bold text-gray-800 font-body">
{input.value}
</h2>
<div className="flex self-end space-x-8 text-primary-750">
<Button variant="link">
<Icon icon={PlusIcon} className="w-2.5 h-2.5" />
<span>Add a step</span>
</Button>
<Button variant="link">Edit</Button>
</div>
</div>
)
}}
</FormField>
<strong>
Editing and sorting workflow steps is not yet implemented.
</strong>
<FormFieldArray name="composedOf">
{({ fields }) => {
return (
<div>
<div className="flex flex-col ml-8 space-y-2">
{fields.map((name) => {
return (
<FormField
......@@ -35,7 +53,38 @@ export function WorkflowStepsFormSection(): JSX.Element {
subscription={{ value: true }}
>
{({ input }) => {
return <h3>{input.value}</h3>
return (
<div className="flex flex-col px-4 py-3 border border-gray-200 rounded bg-gray-75">
<h3 className="text-base font-medium text-gray-800 font-body">
{input.value}
</h3>
<div className="flex self-end space-x-8 text-primary-750">
<Button variant="link">
<Icon
icon={TriangleIcon}
className="w-2.5 h-2.5 transform rotate-180"
/>
<span>Move up</span>
</Button>
<Button variant="link">
<Icon
icon={TriangleIcon}
className="w-2.5 h-2.5"
/>
<span>Move down</span>
</Button>
<Button variant="link">
<Icon icon={PlusIcon} className="w-2.5 h-2.5" />
<span>Add a substep</span>
</Button>
<Button variant="link">
<Icon icon={CrossIcon} className="w-2.5 h-2.5" />
<span>Delete</span>
</Button>
<Button variant="link">Edit</Button>
</div>
</div>
)
}}
</FormField>
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment