DMC/studentportalen
1
1
Fork 0
Code Issues 24 Pull Requests 3 Actions Projects 1 Wiki Activity

List components #31

Open
stne3960 wants to merge 57 commits from list_item into main
pull from: list_item
merge into: DMC:main
Conversation 10 Commits 57 Files Changed 30 +131 -4
1 changed files with 131 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4a981d4724 - Show all commits

135
frontend/src/studentportalen/ComponentLibrary.tsx
View File

@ -3,6 +3,8 @@ import Button from '../components/Button/Button';
import TextInput from '../components/TextInput/TextInput'; import TextInput from '../components/TextInput/TextInput';
import ListItem from '../components/ListItem/ListItem'; import ListItem from '../components/ListItem/ListItem';
import Combobox from '../components/Combobox/Combobox'; import Combobox from '../components/Combobox/Combobox';
import ListCard from '../components/ListCard/ListCard';
import ParticipantPicker from '../components/ParticipantPicker/ParticipantPicker';
const peopleOptions = [ const peopleOptions = [
{ value: '1', label: 'Lennart Johansson', subtitle: 'lejo1891' }, { value: '1', label: 'Lennart Johansson', subtitle: 'lejo1891' },
@ -18,6 +20,8 @@ export default function ComponentLibrary() {
return document.documentElement.classList.contains('dark'); return document.documentElement.classList.contains('dark');
}); });
const [selectedPerson, setSelectedPerson] = useState<string>(''); const [selectedPerson, setSelectedPerson] = useState<string>('');
const [selectedPeople, setSelectedPeople] = useState<string[]>([]);
const [participants, setParticipants] = useState<string[]>([]);
useEffect(() => { useEffect(() => {
if (darkMode) { if (darkMode) {
@ -166,20 +170,143 @@ export default function ComponentLibrary() {
</section> </section>
<section className="mt-lg"> <section className="mt-lg">
<h2 className="mb-md">Combobox</h2> <h2 className="mb-md">Combobox - Single Select</h2>
<div className="flex flex-col gap-md"> <div className="flex flex-col gap-md">
<Combobox <Combobox
options={peopleOptions} options={peopleOptions}
value={selectedPerson} value={selectedPerson}
onChange={setSelectedPerson} onChange={(v) => setSelectedPerson(v as string)}
placeholder="Search..." placeholder="Sök..."
label="Select person" label="Välj person"
/> />
<p className="body-light-sm text-base-ink-placeholder"> <p className="body-light-sm text-base-ink-placeholder">
Selected: {selectedPerson ? peopleOptions.find((p) => p.value === selectedPerson)?.label : 'None'} Selected: {selectedPerson ? peopleOptions.find((p) => p.value === selectedPerson)?.label : 'None'}
</p> </p>
</div> </div>
</section> </section>
<section className="mt-lg">
<h2 className="mb-md">Combobox - Multi Select</h2>
<div className="flex flex-col gap-md">
<Combobox
options={peopleOptions}
value={selectedPeople}
onChange={(v) => setSelectedPeople(v as string[])}
placeholder="Sök..."
label="Välj personer"
multiple
/>
<p className="body-light-sm text-base-ink-placeholder">
Selected: {selectedPeople.length > 0 ? selectedPeople.map((v) => peopleOptions.find((p) => p.value === v)?.label).join(', ') : 'None'}
</p>
</div>
</section>
<section className="mt-lg">
<h2 className="mb-md">Combobox - Sizes</h2>
<div className="flex flex-wrap items-start gap-md">
<Combobox
options={peopleOptions}
placeholder="Small"
size="sm"
/>
<Combobox
options={peopleOptions}
placeholder="Medium"
size="md"
/>
<Combobox
options={peopleOptions}
placeholder="Large"
size="lg"
/>
</div>
</section>
<section className="mt-lg">
<h2 className="mb-md">Combobox - Custom Width</h2>
<div className="flex flex-col gap-md">
<Combobox
options={peopleOptions}
placeholder="Sök..."
customWidth="350px"
/>
<Combobox
options={peopleOptions}
placeholder="Sök..."
label="Full width"
fullWidth
/>
</div>
</section>
<section className="mt-lg">
<h2 className="mb-md">ListCard</h2>
<div className="flex flex-col gap-md max-w-96">
<ListCard title="Lennart Johansson" onRemove={() => {}} />
<ListCard title="Mats Rubarth" onRemove={() => {}} />
<ListCard title="Daniel Tjernström" />
</div>
</section>
<section className="mt-lg">
<h2 className="mb-md">ParticipantPicker</h2>
<ParticipantPicker
options={peopleOptions}
value={participants}
onChange={setParticipants}
placeholder="Sök deltagare..."
label="Välj deltagare"
/>
</section>
<section className="mt-lg">
<h2 className="mb-md">ParticipantPicker - Sizes</h2>
<div className="flex flex-wrap items-start gap-md">
<ParticipantPicker
options={peopleOptions}
value={participants}
onChange={setParticipants}
placeholder="Small"
size="sm"
/>
<ParticipantPicker
options={peopleOptions}
value={participants}
onChange={setParticipants}
placeholder="Medium"
size="md"
/>
<ParticipantPicker
options={peopleOptions}
value={participants}
onChange={setParticipants}
placeholder="Large"
size="lg"
/>
</div>
</section>
<section className="mt-lg">
<h2 className="mb-md">ParticipantPicker - Custom Width</h2>
<div className="flex flex-col gap-md">
<ParticipantPicker
options={peopleOptions}
value={participants}
onChange={setParticipants}
placeholder="Sök..."
customWidth="350px"
/>
<ParticipantPicker
options={peopleOptions}
value={participants}
onChange={setParticipants}
placeholder="Sök..."
label="Full width"
fullWidth
/>
</div>
</section>
<br /> <br />
<br /> <br />
<br /> <br />