Flank
flank links
Flank on vercel production build Storybook
badge
Swagger API link
https://flank-sowecanjustbefriends.azurewebsites.net/api/index.html swagger
TODO
https://headlessui.dev/react https://heroicons.dev/
git config core.ignorecase falsehttps://jakearchibald.github.io/svgomg/ svg optimizer https://react-svgr.com/playground/ svg to component
TODO: Components
- Anchor
- Avatar
- BackIcon
- Button
- CloseButton
- Confirmation
- Currency
- DirectionLabel
- GButton
- HistoryMessage
- InfoTitle
- InputError
- Label
- LaunchIcon
- LoanTitle
- Logo
- Menu
- MoneyInput
- PactIcon
- Paragraph
- ProgressBar
- SelectInput
- Speed
- Subtitle
- TextInput
- Title
- Username
Components Reference
Elements
Anchor
- Props:
- text
- case can be uppercase or lowercase
Avatar
-
State:
- small menu avatar can be active or not
-
Props:
- size is large or small (menu) - large is editable, small links to profile
- size is large or small (menu) - large is editable, small links to profile
BackIcon
- State:
- can be active or not
- No props
Button
- States:
- "mousedown" (design unconfirmed)
- Props:
- text
- type: button or submit
- purple or green border/color
- case can be uppercase or none/default
NB: currently at fixed width for uppercase and variable for normal case. Suggestion from CT: normalize both to get width from padding.
CloseButton
unconfirmed
- No Props
Confirmation
- Props:
- text
Currency
- No props
DirectionLabel
- Props:
- text can either be "to:" or "from:"
GButton
- States:
- "mousedown" (design unconfirmed)
- No props
HistoryMessage
- Props:
- date (date passed from db)
- other props TBC
InfoTitle
- Props
- text
InputError
(design unconfirmed)
- States:
- hidden or visible
- Props:
- text
Label
- Props:
- for
- text
- text can be left or center aligned
LaunchIcon
- State:
- can be active or not
- No props
LoanTitle
- Props:
- name (other person's name passed from db)
Logo
- Props:
- size
Menu
- No props
MoneyInput
- Props:
- id, name
PactIcon
- State:
- can be active or not
- No props
Paragraph
- Props:
- text
ProgressBar
- Props:
- percentageComplete (percentage values and "fill" div size calculated from db)
SelectInput
- States (see TextInput screenshots for design):
- default / focused / unfocused (all identical to default)
- invalid: selection not made (design unconfirmed)
- valid: input passes validation
- Props:
- id, name
- options
Speed
- Props:
- text (speed text calculated from db)
Subtitle
- No props
TextInput
- States:
- default / focused / unfocused (all identical to default)
- invalid: input doesn't pass validation (design unconfirmed)
- valid: input passes validation
- default / focused / unfocused (all identical to default)
- Props:
- id, name
- placeholder
- can have "edit" wand for updating data or no edit wand for posting new data
Title
- Props:
- text (for second half of title only)
- NB: needs to pull username from db for profile page
Username
- Props:
- text (username passed from db)