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

Update "Create New" forms #384

Merged
merged 1 commit into from
Oct 27, 2023
Merged

Update "Create New" forms #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions web/app/components/document/sidebar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@
@isSaving={{this.saveIsRunning}}
@formatIsBadge={{true}}
@renderOut={{true}}
class="w-[300px]"
/>
</div>
{{else}}
Expand Down
4 changes: 2 additions & 2 deletions web/app/components/inputs/product-select.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
@offset={{@offset}}
@matchAnchorWidth={{@matchAnchorWidth}}
@secondaryFilterAttribute="abbreviation"
class="product-select-dropdown-list w-[300px]"
class="product-select-dropdown-list"
...attributes
>
<:anchor as |dd|>
<dd.ToggleSelect class="gap-2">
<dd.ToggleSelect class="gap-2" id="product-select">
<Inputs::ProductSelect::Item
@product={{dd.selected}}
@abbreviation={{this.selectedProductAbbreviation}}
Expand Down
225 changes: 91 additions & 134 deletions web/app/components/new/doc-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,96 @@
{{#if this.docIsBeingCreated}}
<div
data-test-creating-new-doc
class="hds-typography-display-400 mt-3 text-center"
<New::Form
@taskIsRunning={{this.docIsBeingCreated}}
@icon={{get-doctype-icon @docType}}
@headline="Create your {{@docType}}"
@buttonIsActive={{this.buttonIsActive}}
@taskIsRunningHeadline="Creating draft in Google Drive..."
@taskIsRunningDescription="This usually takes 10-20 seconds."
@buttonText="Create draft in Google Drive"
{{did-insert this.registerForm}}
{{on "submit" this.submit}}
data-test-new-doc-form
>
{{! Title }}
<Hds::Form::Textarea::Field
{{auto-height-textarea}}
{{autofocus}}
data-test-title-input
@value={{this.title}}
class="px-2.5"
placeholder="Enter a title"
name="title"
{{on "keydown" this.onKeydown}}
as |F|
>
<FlightIcon @name="loading" @size="24" />
<div class="mt-8 text-display-200 font-semibold">
Creating draft in Google Drive...
<F.Label @isRequired={{true}}>Title</F.Label>
{{#if this.formErrors.title}}
<F.Error data-test-title-error>
{{this.formErrors.title}}
</F.Error>
{{/if}}
</Hds::Form::Textarea::Field>

{{! Summary }}
<div>
<div class="flex gap-2.5">
<Hds::Form::Label>Summary</Hds::Form::Label>
{{#if this.summaryIsLong}}
<span
data-test-summary-warning
class="mt-px text-body-100 text-color-foreground-warning"
>
Limit this to 1 or 2 sentences if possible.
</span>
{{/if}}
</div>
<div class="text-body-200 text-color-foreground-faint">This usually takes
10-20 seconds.</div>
<Hds::Form::Textarea::Field
data-test-summary-input
@value={{this.summary}}
rows="3"
name="summary"
class="mt-2 px-2.5 py-2 placeholder-color-palette-neutral-400"
placeholder="One or two sentences outlining your doc."
{{on "keydown" this.onKeydown}}
/>
</div>
{{else}}
<form
data-test-new-doc-form
class="grid grid-cols-[1fr_250px] grid-rows-1 gap-10"
{{on "submit" this.submit}}
{{did-insert this.registerForm}}
>
<div>
<div class="space-y-4">
<h1>Create your
{{@docType}}</h1>
</div>
<div class="space-y-7 pt-10">
<Hds::Form::TextInput::Field
data-test-title-input
@type="text"
@isRequired={{true}}
@value={{this.title}}
name="title"
placeholder="Enter a document title"
{{on "input" this.updateForm}}
as |F|
>
<F.Label>Title</F.Label>
<F.HelperText>
A succinct outline of the idea youʼre proposing.
</F.HelperText>
</Hds::Form::TextInput::Field>

<div class="relative">
<Hds::Form::Textarea::Field
data-test-summary-input
@value={{this.summary}}
rows="3"
name="summary"
{{on "input" this.updateForm}}
as |F|
>
<F.Label>Summary</F.Label>
<F.HelperText>
<span
class={{if
this.summaryIsLong
"bg-color-surface-warning text-color-foreground-warning-on-surface transition-colors"
}}
>One or two sentences</span>
outlining your doc.
{{if this.summaryIsLong "(Just a recommendation)"}}
</F.HelperText>
</Hds::Form::Textarea::Field>
</div>

<div>
<div class="mb-2">
<span class="hermes-form-label">
Product/Area &nbsp;
<Hds::Badge @size="small" @text="Required" />
</span>
<span class="hermes-form-helper-text hds-form-helper-text">
Where your doc should be categorized.
</span>
</div>
<div class="w-[300px]">
<Inputs::ProductSelect
@selected={{this.productArea}}
@onChange={{this.onProductSelect}}
class="max-h-[240px]"
/>
</div>
</div>
{{! Product/area }}
<div>
<Hds::Form::Label
class="mb-2 flex"
@controlId="product-select"
@isRequired={{true}}
>
Product/Area
</Hds::Form::Label>
<Inputs::ProductSelect
@selected={{this.productArea}}
@onChange={{this.onProductSelect}}
@offset={{(hash mainAxis=0 crossAxis=-3)}}
@matchAnchorWidth={{hash enabled=true additionalWidth=6}}
class="max-h-[240px]"
/>
{{#if this.formErrors.productAbbreviation}}
<Hds::Form::Error data-test-product-error class="mt-2">
{{this.formErrors.productAbbreviation}}
</Hds::Form::Error>
{{/if}}
</div>

<Hds::Form::Field @layout="vertical" as |F|>
{{yield
(hash
Error=F.Error
HelperText=F.HelperText
Label=F.Label
isRequired=F.isRequired
isOptional=F.isOptional
)
}}
<F.Control>
<Inputs::PeopleSelect
class="multiselect mt-2 w-auto"
@selected={{this.contributors}}
@onChange={{this.updateContributors}}
/>
</F.Control>
<F.Label>
<FlightIcon @name="users" />
Contributors
</F.Label>
{{#if this.formErrors.contributors}}
<F.Error as |E|>
<E.Message>{{this.formErrors.contributors}}</E.Message>
</F.Error>
{{/if}}
<F.HelperText>
People to share your doc with. You can always add more later.
</F.HelperText>
</Hds::Form::Field>
</div>
<div class="h-24"></div>
</div>
<div>
<div class="preview-card">
<h3>
<FlightIcon @name="eye" />
Preview
</h3>
<Doc::Tile
@productArea={{this.productArea}}
@status="draft"
@title={{this.title}}
@owner={{this.authenticatedUser.info.email}}
/>
<Hds::Button
data-test-create-button
@text="Create draft in Google Drive"
type="submit"
disabled={{not this.formRequirementsMet}}
class="w-full"
/>
</div>
</div>
</form>
{{/if}}
{{! Contributors }}
<Hds::Form::Field @layout="vertical" as |F|>
<F.Control>
<Inputs::PeopleSelect
class="multiselect w-full"
@selected={{this.contributors}}
@onChange={{this.updateContributors}}
/>
</F.Control>
<F.Label class="flex items-center gap-1.5">
Contributors
<TooltipIcon
@text="People to share your doc with. You can always add more later."
/>
</F.Label>
</Hds::Form::Field>
</New::Form>
Loading