Motivation
As a user I want to be able to edit existing data entries of the termbox. This will increase data quality and the multilinguality of Wikidata.

Workflow
Given I'm on a page showing the termbox component in an editable state, when clicking the edit button (pen icon) then the termbox entries (labels, descriptions and alias(es)) of all shown languages will switch to edit mode.
Shown languages cover all languages visible, so if languages are hidden but later will be shown (e.g. by expanding the termbox fully) these language entries will be in edit mode as well.
Edit mode means that all labels, descriptions and alias(es) will show their values in form fields. All entries will be shown in full length (no cut offs). This includes text wrapping if needed.

Entry fields

• Style
  • 1px underline marks an entry field
    • #808080
  • active entry field has a 1px blue underline
    • #3366cc
    • blue blinking cursor
  • the spacing between the entry fields changes according to the mocks to 48px

• Label field
  • show editability by inserting an underline
  • if entry available: remain entry
  • if no entry available show "enter a label"
  • restrict character input to [insert number]

• Description field
  • show editability by inserting an underline
  • if entry available: remain entry
  • if no entry available show "enter a description"
  • restrict character input to [insert number]?

• Alias field
  • show editability by inserting an underline
  • if entry available: remain entry
  • if no entry available show "enter an alias | seperate aliases by using a "|" " (temporary solution)
  • do not restrict character input

Buttons

• edit button (pen)
  • one edit button at the very top of the termbox (next to the headline)
  • will not be shown after clicking
• save button (checkmark)
  • show a save (checkmark) button replacing the edit button at the top of the termbox
  • clicking the save button will bring the user back to reading mode having saved the entity
  • button color
    • default: #3366cc
    • hover: #447ff5 (not relevant for touch, but for people using mobile on desktop)
    • active: #2a4b8d
  • button shadow: blur: 6px; x: 0px; y: 4 px; #000; 0.25

Mocks

Acceptance Criteria

• edit button turns into save button
• label description and alias texts turn into input fields
  • change of spacing between the lines [] underlines
  • availabe entries remain but become editable [] fields without entries show placeholder text as described
• active entry field
  • blue underline
  • blinking blue cursor
  • if no character entered show placeholder
  • hide placeholder as soon as there is a character or more typed
• clicking save saves entries made
  • save icon disappears and edit icon will be shown again