@gostudent/shared-ui-library-mcp 4.1.0-DT-17190.6 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/library-manifest.json +11 -229
- package/package.json +1 -1
package/library-manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"libraryVersion": "4.
|
|
2
|
+
"libraryVersion": "4.1.0",
|
|
3
3
|
"components": [
|
|
4
4
|
{
|
|
5
5
|
"name": "Avatar",
|
|
@@ -277,11 +277,6 @@
|
|
|
277
277
|
"lg"
|
|
278
278
|
]
|
|
279
279
|
},
|
|
280
|
-
{
|
|
281
|
-
"name": "paddingOverride",
|
|
282
|
-
"description": "Overrides `padding` with an explicit CSS value (e.g. \"12px 24px\").",
|
|
283
|
-
"options": []
|
|
284
|
-
},
|
|
285
280
|
{
|
|
286
281
|
"name": "radius",
|
|
287
282
|
"description": "Border radius: sm=8px | md=12px | lg=16px.",
|
|
@@ -291,17 +286,6 @@
|
|
|
291
286
|
"lg"
|
|
292
287
|
]
|
|
293
288
|
},
|
|
294
|
-
{
|
|
295
|
-
"name": "background",
|
|
296
|
-
"description": "Background surface colour.",
|
|
297
|
-
"options": [
|
|
298
|
-
"default",
|
|
299
|
-
"subtle",
|
|
300
|
-
"branded",
|
|
301
|
-
"blue",
|
|
302
|
-
"lightSteel"
|
|
303
|
-
]
|
|
304
|
-
},
|
|
305
289
|
{
|
|
306
290
|
"name": "bordered",
|
|
307
291
|
"description": "Show a 1px border using the default border colour.",
|
|
@@ -318,11 +302,6 @@
|
|
|
318
302
|
"name": "NoBorder",
|
|
319
303
|
"jsx": "<Card padding=\"lg\" radius=\"sm\" bordered={false} children=\"This card has no border.\" />",
|
|
320
304
|
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-card--no-border"
|
|
321
|
-
},
|
|
322
|
-
{
|
|
323
|
-
"name": "PaddingOverride",
|
|
324
|
-
"jsx": "<Card paddingOverride=\"12px 40px\" radius=\"sm\" children=\"Custom padding via paddingOverride=\"12px 40px\".\" />",
|
|
325
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-card--padding-override"
|
|
326
305
|
}
|
|
327
306
|
]
|
|
328
307
|
},
|
|
@@ -449,7 +428,7 @@
|
|
|
449
428
|
},
|
|
450
429
|
{
|
|
451
430
|
"name": "Disclosure",
|
|
452
|
-
"description": "A lightweight disclosure (expand/collapse) component that reveals inline content when toggled.\n\nFollows the WAI-ARIA disclosure pattern — the trigger is a `<button>` with `aria-expanded`,\nand the collapsible region appears directly below, pushing layout down (not a floating overlay).\n\nSupports both **uncontrolled** (via `defaultOpen`) and **controlled** (via `open` + `onToggle`) modes.\n\n### Usage\n\n```tsx\nimport { Disclosure, InfoIcon } from '@gostudent/shared-ui-library';\n\n<Disclosure\n trigger={\n <>\n <InfoIcon size=\"sm\" />\n <span>5 pending feedback</span>\n </>\n }\n>\n <ul>\n <li>Alice — awaiting review</li>\n <li>Bob — submitted</li>\n </ul>\n</Disclosure>\n
|
|
431
|
+
"description": "A lightweight disclosure (expand/collapse) component that reveals inline content when toggled.\n\nFollows the WAI-ARIA disclosure pattern — the trigger is a `<button>` with `aria-expanded`,\nand the collapsible region appears directly below, pushing layout down (not a floating overlay).\n\nSupports both **uncontrolled** (via `defaultOpen`) and **controlled** (via `open` + `onToggle`) modes.\n\n### Usage\n\n```tsx\nimport { Disclosure, InfoIcon } from '@gostudent/shared-ui-library';\n\n<Disclosure\n trigger={\n <>\n <InfoIcon size=\"sm\" />\n <span>5 pending feedback</span>\n </>\n }\n>\n <ul>\n <li>Alice — awaiting review</li>\n <li>Bob — submitted</li>\n </ul>\n</Disclosure>\n```",
|
|
453
432
|
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-layout-disclosure",
|
|
454
433
|
"props": [
|
|
455
434
|
{
|
|
@@ -486,15 +465,6 @@
|
|
|
486
465
|
"name": "triggerClassName",
|
|
487
466
|
"description": "Additional CSS class applied to the inner trigger `<button>` (className only reaches the root).",
|
|
488
467
|
"options": []
|
|
489
|
-
},
|
|
490
|
-
{
|
|
491
|
-
"name": "variant",
|
|
492
|
-
"description": "Trigger colour/underline style.",
|
|
493
|
-
"options": [
|
|
494
|
-
"negative",
|
|
495
|
-
"link",
|
|
496
|
-
"neutral"
|
|
497
|
-
]
|
|
498
468
|
}
|
|
499
469
|
],
|
|
500
470
|
"examples": [
|
|
@@ -1060,45 +1030,6 @@
|
|
|
1060
1030
|
}
|
|
1061
1031
|
]
|
|
1062
1032
|
},
|
|
1063
|
-
{
|
|
1064
|
-
"name": "Menu",
|
|
1065
|
-
"description": "**Menu** is a presentational action-list panel. It does not own open state, trigger or positioning —\nthe consumer (e.g. `TopNavigation`) is responsible for that.\n\n### Usage\n\n```tsx\nimport { Menu, MenuHeader, MenuItem } from '@gostudent/shared-ui-library';\n\n<Menu aria-label=\"Account menu\">\n <MenuHeader>\n <Avatar name=\"Anna James\" />\n <span>Anna James</span>\n <RoleTag role=\"student\" />\n </MenuHeader>\n <MenuItem onClick={() => {}}>My profile</MenuItem>\n <MenuItem icon={<GlobeIcon />} trailing={<ChevronRightIcon />}>English</MenuItem>\n <MenuItem onClick={() => {}}>Logout</MenuItem>\n</Menu>\n```",
|
|
1066
|
-
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-actions-menu",
|
|
1067
|
-
"props": [
|
|
1068
|
-
{
|
|
1069
|
-
"name": "children",
|
|
1070
|
-
"description": "",
|
|
1071
|
-
"options": []
|
|
1072
|
-
},
|
|
1073
|
-
{
|
|
1074
|
-
"name": "aria-label",
|
|
1075
|
-
"description": "",
|
|
1076
|
-
"options": []
|
|
1077
|
-
},
|
|
1078
|
-
{
|
|
1079
|
-
"name": "className",
|
|
1080
|
-
"description": "",
|
|
1081
|
-
"options": []
|
|
1082
|
-
}
|
|
1083
|
-
],
|
|
1084
|
-
"examples": [
|
|
1085
|
-
{
|
|
1086
|
-
"name": "Default",
|
|
1087
|
-
"jsx": "// See \"Default\" story — uses interactive render wrapper",
|
|
1088
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-menu--default"
|
|
1089
|
-
},
|
|
1090
|
-
{
|
|
1091
|
-
"name": "WithHeader",
|
|
1092
|
-
"jsx": "// See \"WithHeader\" story — uses interactive render wrapper",
|
|
1093
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-menu--with-header"
|
|
1094
|
-
},
|
|
1095
|
-
{
|
|
1096
|
-
"name": "WithIcons",
|
|
1097
|
-
"jsx": "// See \"WithIcons\" story — uses interactive render wrapper",
|
|
1098
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-menu--with-icons"
|
|
1099
|
-
}
|
|
1100
|
-
]
|
|
1101
|
-
},
|
|
1102
1033
|
{
|
|
1103
1034
|
"name": "MetadataItem",
|
|
1104
1035
|
"description": "The **MetadataItem** component pairs a small icon with a text label for displaying\nstructured information such as dates, times, durations, or participant counts.\n\n### Usage\n\n```tsx\nimport { MetadataItem, EventNoteIcon } from '@gostudent/shared-ui-library';\n\n<MetadataItem icon={<EventNoteIcon />}>Mon, 14 Apr 2025</MetadataItem>\n```",
|
|
@@ -1131,40 +1062,6 @@
|
|
|
1131
1062
|
}
|
|
1132
1063
|
]
|
|
1133
1064
|
},
|
|
1134
|
-
{
|
|
1135
|
-
"name": "MobileSubmenu",
|
|
1136
|
-
"description": "**MobileSubmenu** is the drawer chrome (back button, title, close button) shown when a user drills\ninto a submenu in a mobile navigation drawer. It is not a drawer itself — the consumer renders it\ninside `Drawer`.\n\nThe body is a generic slot — a submenu doesn't always look like a list of selectable options, so\n`MobileSubmenu` composes whatever content the consumer passes it (e.g. `Radio` options, a `Menu`,\nplain text) rather than owning a fixed `options`/`value` API.\n\n### Usage\n\n```tsx\nimport { Drawer, MobileSubmenu, Radio } from '@gostudent/shared-ui-library';\n\n<Drawer isOpen={isOpen} onClose={onClose} position=\"right\" fullScreenOnMobile>\n <MobileSubmenu title=\"Language\" onBack={() => setView('nav')} onClose={onClose}>\n <div role=\"radiogroup\">\n <Radio name=\"language\" value=\"en\" checked={language === 'en'} onChange={() => setLanguage('en')} label=\"English\" />\n <Radio name=\"language\" value=\"de\" checked={language === 'de'} onChange={() => setLanguage('de')} label=\"German\" />\n </div>\n </MobileSubmenu>\n</Drawer>\n```\n\n### Compound usage\n\nFor layouts where the header and body chrome need finer control, use the compound parts directly:\n\n```tsx\n<MobileSubmenu.Root>\n <MobileSubmenu.Header title=\"Language\" onBack={onBack} onClose={onClose} />\n <MobileSubmenu.Body>{content}</MobileSubmenu.Body>\n</MobileSubmenu.Root>\n```",
|
|
1137
|
-
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-actions-mobilesubmenu",
|
|
1138
|
-
"props": [
|
|
1139
|
-
{
|
|
1140
|
-
"name": "children",
|
|
1141
|
-
"description": "",
|
|
1142
|
-
"options": []
|
|
1143
|
-
},
|
|
1144
|
-
{
|
|
1145
|
-
"name": "className",
|
|
1146
|
-
"description": "",
|
|
1147
|
-
"options": []
|
|
1148
|
-
}
|
|
1149
|
-
],
|
|
1150
|
-
"examples": [
|
|
1151
|
-
{
|
|
1152
|
-
"name": "Default",
|
|
1153
|
-
"jsx": "// See \"Default\" story — uses interactive render wrapper",
|
|
1154
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-mobilesubmenu--default"
|
|
1155
|
-
},
|
|
1156
|
-
{
|
|
1157
|
-
"name": "NonSelectionContent",
|
|
1158
|
-
"jsx": "// See \"NonSelectionContent\" story — uses interactive render wrapper",
|
|
1159
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-mobilesubmenu--non-selection-content"
|
|
1160
|
-
},
|
|
1161
|
-
{
|
|
1162
|
-
"name": "LongList",
|
|
1163
|
-
"jsx": "// See \"LongList\" story — uses interactive render wrapper",
|
|
1164
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-mobilesubmenu--long-list"
|
|
1165
|
-
}
|
|
1166
|
-
]
|
|
1167
|
-
},
|
|
1168
1065
|
{
|
|
1169
1066
|
"name": "Modal",
|
|
1170
1067
|
"description": "A primitive overlay dialog. Handles the portal, scrim, focus trap, scroll lock, size variants, and keyboard/click dismissal.\n\nAll content is composed via `children`. Use `labelledBy` to wire up `aria-labelledby` by pointing it at the `id` of your heading element inside children.\n\n### Usage\n\n```tsx\nimport { Modal } from '@gostudent/shared-ui-library';\n\nfunction ConfirmModal({ isOpen, onClose }) {\n return (\n <Modal isOpen={isOpen} onClose={onClose} labelledBy=\"confirm-title\">\n <h2 id=\"confirm-title\">Confirm action</h2>\n <p>This cannot be undone.</p>\n <div style={{ display: 'flex', gap: 8 }}>\n <Button variant=\"secondary\" size=\"md\" onClick={onClose}>Cancel</Button>\n <Button variant=\"primary\" size=\"md\" onClick={handleConfirm}>Confirm</Button>\n </div>\n </Modal>\n );\n}\n```",
|
|
@@ -1354,50 +1251,6 @@
|
|
|
1354
1251
|
}
|
|
1355
1252
|
]
|
|
1356
1253
|
},
|
|
1357
|
-
{
|
|
1358
|
-
"name": "Radio",
|
|
1359
|
-
"description": "A styled radio input with an optional label. Wraps a native `<input type=\"radio\">` so all standard input props (checked, name, value, onChange, disabled, etc.) work out of the box.\n\nTypography is responsive: body-md on mobile, body-sm on desktop (tablet breakpoint).\n\n### Accessibility\n\nThe component renders as a `<label>` wrapping a visually-hidden native radio, preserving full keyboard and screen-reader support. Focus ring is displayed on `:focus-visible` only.\n\n### Usage\n\n```tsx\nimport { Radio } from '@gostudent/shared-ui-library';\n\n<Radio\n name=\"plan\"\n value=\"monthly\"\n label=\"Monthly\"\n checked={value === 'monthly'}\n onChange={() => setValue('monthly')}\n/>\n```",
|
|
1360
|
-
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-inputs-radio",
|
|
1361
|
-
"props": [
|
|
1362
|
-
{
|
|
1363
|
-
"name": "label",
|
|
1364
|
-
"description": "Text or React node rendered next to the radio circle.",
|
|
1365
|
-
"options": []
|
|
1366
|
-
},
|
|
1367
|
-
{
|
|
1368
|
-
"name": "checked",
|
|
1369
|
-
"description": "Whether the radio is checked (controlled).",
|
|
1370
|
-
"options": []
|
|
1371
|
-
},
|
|
1372
|
-
{
|
|
1373
|
-
"name": "disabled",
|
|
1374
|
-
"description": "When true, the radio is non-interactive and visually muted.",
|
|
1375
|
-
"options": []
|
|
1376
|
-
},
|
|
1377
|
-
{
|
|
1378
|
-
"name": "onChange",
|
|
1379
|
-
"description": "Change handler — receives the native `React.ChangeEvent<HTMLInputElement>`.",
|
|
1380
|
-
"options": []
|
|
1381
|
-
}
|
|
1382
|
-
],
|
|
1383
|
-
"examples": [
|
|
1384
|
-
{
|
|
1385
|
-
"name": "Default",
|
|
1386
|
-
"jsx": "<Radio name=\"default-example\" label=\"Option label\" />",
|
|
1387
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-radio--default"
|
|
1388
|
-
},
|
|
1389
|
-
{
|
|
1390
|
-
"name": "Checked",
|
|
1391
|
-
"jsx": "<Radio name=\"checked-example\" label=\"Option label\" checked={true} onChange={() => {}} />",
|
|
1392
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-radio--checked"
|
|
1393
|
-
},
|
|
1394
|
-
{
|
|
1395
|
-
"name": "Disabled",
|
|
1396
|
-
"jsx": "<Radio name=\"disabled-example\" label=\"Disabled unchecked\" disabled={true} />",
|
|
1397
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-radio--disabled"
|
|
1398
|
-
}
|
|
1399
|
-
]
|
|
1400
|
-
},
|
|
1401
1254
|
{
|
|
1402
1255
|
"name": "ScoreIndicator",
|
|
1403
1256
|
"description": "The **ScoreIndicator** displays a numeric score or letter grade in a coloured circle — for\nexample an average grade or a subject-specific score. Unlike `Avatar`, it is not tied to a\nperson's identity: it always renders the `value` text (no image, no initials fallback).\n\nThree sizes are available — `sm` (24px), `md` (40px), `lg` (48px) — and the background\ncolour is driven by `subject`, reusing the same semantic subject colours as elsewhere in the\ndesign system.\n\n### Usage\n\n```tsx\nimport { ScoreIndicator } from '@gostudent/shared-ui-library';\n\n<ScoreIndicator value=\"4.7\" subject=\"DE/BI/PH/HI\" />\n<ScoreIndicator value=\"A+\" size=\"sm\" subject=\"NL/EN\" />\n```",
|
|
@@ -1580,75 +1433,6 @@
|
|
|
1580
1433
|
}
|
|
1581
1434
|
]
|
|
1582
1435
|
},
|
|
1583
|
-
{
|
|
1584
|
-
"name": "Submenu",
|
|
1585
|
-
"description": "**Submenu** is a `MenuItem`-styled trigger row that opens a single-choice flyout beside it — used\ninside a **Menu** (e.g. a language switcher). It does not close the parent `Menu` itself; the\nconsumer decides via `onChange`.\n\n### Usage\n\n```tsx\nimport { Menu, Submenu } from '@gostudent/shared-ui-library';\n\n<Menu aria-label=\"Account menu\">\n <Submenu\n label=\"English\"\n icon={<GlobeIcon />}\n aria-label=\"Language\"\n options={[{ value: 'en', label: 'English' }, { value: 'de', label: 'German' }]}\n value={language}\n onChange={setLanguage}\n />\n</Menu>\n```",
|
|
1586
|
-
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-actions-submenu",
|
|
1587
|
-
"props": [
|
|
1588
|
-
{
|
|
1589
|
-
"name": "label",
|
|
1590
|
-
"description": "",
|
|
1591
|
-
"options": []
|
|
1592
|
-
},
|
|
1593
|
-
{
|
|
1594
|
-
"name": "icon",
|
|
1595
|
-
"description": "",
|
|
1596
|
-
"options": []
|
|
1597
|
-
},
|
|
1598
|
-
{
|
|
1599
|
-
"name": "options",
|
|
1600
|
-
"description": "",
|
|
1601
|
-
"options": []
|
|
1602
|
-
},
|
|
1603
|
-
{
|
|
1604
|
-
"name": "value",
|
|
1605
|
-
"description": "",
|
|
1606
|
-
"options": []
|
|
1607
|
-
},
|
|
1608
|
-
{
|
|
1609
|
-
"name": "onChange",
|
|
1610
|
-
"description": "",
|
|
1611
|
-
"options": []
|
|
1612
|
-
},
|
|
1613
|
-
{
|
|
1614
|
-
"name": "placement",
|
|
1615
|
-
"description": "",
|
|
1616
|
-
"options": []
|
|
1617
|
-
},
|
|
1618
|
-
{
|
|
1619
|
-
"name": "aria-label",
|
|
1620
|
-
"description": "",
|
|
1621
|
-
"options": []
|
|
1622
|
-
},
|
|
1623
|
-
{
|
|
1624
|
-
"name": "disabled",
|
|
1625
|
-
"description": "",
|
|
1626
|
-
"options": []
|
|
1627
|
-
},
|
|
1628
|
-
{
|
|
1629
|
-
"name": "className",
|
|
1630
|
-
"description": "",
|
|
1631
|
-
"options": []
|
|
1632
|
-
}
|
|
1633
|
-
],
|
|
1634
|
-
"examples": [
|
|
1635
|
-
{
|
|
1636
|
-
"name": "Default",
|
|
1637
|
-
"jsx": "// See \"Default\" story — uses interactive render wrapper",
|
|
1638
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-submenu--default"
|
|
1639
|
-
},
|
|
1640
|
-
{
|
|
1641
|
-
"name": "PlacementRight",
|
|
1642
|
-
"jsx": "// See \"PlacementRight\" story — uses interactive render wrapper",
|
|
1643
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-submenu--placement-right"
|
|
1644
|
-
},
|
|
1645
|
-
{
|
|
1646
|
-
"name": "InMenuWithHeader",
|
|
1647
|
-
"jsx": "// See \"InMenuWithHeader\" story — uses interactive render wrapper",
|
|
1648
|
-
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-submenu--in-menu-with-header"
|
|
1649
|
-
}
|
|
1650
|
-
]
|
|
1651
|
-
},
|
|
1652
1436
|
{
|
|
1653
1437
|
"name": "Tabs",
|
|
1654
1438
|
"description": "Compound tab component. Use `Tabs` as the root, `TabList` + `Tab` for the navigation bar,\nand `TabPanel` for the content areas. Tabs and panels are connected automatically via `value`.\n\n**Keyboard navigation:** Arrow Left/Right moves between tabs; Home/End jump to first/last.\n\n### Usage\n\n```tsx\nimport { Tabs, Tab, TabList, TabPanel } from '@gostudent/shared-ui-library';\n\n<Tabs defaultValue=\"lessons\">\n <TabList>\n <Tab value=\"lessons\">Lessons</Tab>\n <Tab value=\"students\">Students</Tab>\n </TabList>\n <TabPanel value=\"lessons\">Lessons content</TabPanel>\n <TabPanel value=\"students\">Students content</TabPanel>\n</Tabs>\n```\n\n**Standalone mode** (without `Tabs` wrapper — for custom state management):\n```tsx\n<TabList>\n <Tab isSelected={active === 0} onClick={() => setActive(0)}>Lessons</Tab>\n <Tab isSelected={active === 1} onClick={() => setActive(1)}>Students</Tab>\n</TabList>\n```",
|
|
@@ -2336,7 +2120,7 @@
|
|
|
2336
2120
|
},
|
|
2337
2121
|
{
|
|
2338
2122
|
"name": "StudentLessonCard",
|
|
2339
|
-
"description": "The student-portal counterpart to `TutorLessonCard`. It displays a lesson session from the\nstudent's perspective: the identity block shows the **tutor**, and group lessons additionally show\nan `AvatarGroup` of the fellow classmates.\n\nSupports states driven by the `lessonState`, `type`, `modality`, and `feedbackState` props:\n\n| `lessonState` | `modality` | `feedbackState` | Actions |\n|------------------|-------------|-------------------|---------|\n| `upcoming` | `online` | — | \"Workspace\" link + \"Start lesson\" + \"Rate lesson\" (inactive) |\n| `upcoming` | `offline` | — | \"Rate lesson\" (inactive) |\n| `in-progress` | `online` | — | \"Workspace\" link + \"Start lesson\" + \"Rate lesson\" (active) |\n| `in-progress` | `offline` | — | \"Rate lesson\" (active) |\n| `completed` | any | `pending` | \"Rate lesson\" button (primary, active) |\n| `completed` | any | `submitted` | \"Check feedback\" button (secondary) |\n\n### Usage\n\n```tsx\nimport { StudentLessonCard } from '@gostudent/shared-ui-library';\n\n<StudentLessonCard\n title=\"English lesson\"\n modality=\"online\"\n type=\"individual\"\n subjects={['English']}\n time=\"17:00 - 18:00\"\n lessonState=\"upcoming\"\n tutor={{ name: 'Jane Tutor' }}\n isStartLessonDisabled\n/>\n```",
|
|
2123
|
+
"description": "The student-portal counterpart to `TutorLessonCard`. It displays a lesson session from the\nstudent's perspective: the identity block shows the **tutor**, and group lessons additionally show\nan `AvatarGroup` of the fellow classmates.\n\nSupports states driven by the `lessonState`, `type`, `modality`, and `feedbackState` props:\n\n| `lessonState` | `modality` | `feedbackState` | Actions |\n|------------------|-------------|-------------------|---------|\n| `upcoming` | `online` | — | \"Workspace\" link + \"Start lesson\" + \"Rate lesson\" (inactive) |\n| `upcoming` | `offline` | — | \"Rate lesson\" (inactive) |\n| `in-progress` | `online` | — | \"Workspace\" link + \"Start lesson\" + \"Rate lesson\" (active) |\n| `in-progress` | `offline` | — | \"Rate lesson\" (active) |\n| `completed` | any | `pending` | \"Rate lesson\" button (primary, active) |\n| `completed` | any | `submitted` | \"Check feedback\" button (secondary) |\n\nSet `showRateLesson={false}` to suppress the \"Rate lesson\" action entirely, regardless of `lessonState`/`feedbackState` — e.g. to disable the rating flow app-wide while it's still rolling out.\n\n### Usage\n\n```tsx\nimport { StudentLessonCard } from '@gostudent/shared-ui-library';\n\n<StudentLessonCard\n title=\"English lesson\"\n modality=\"online\"\n type=\"individual\"\n subjects={['English']}\n time=\"17:00 - 18:00\"\n lessonState=\"upcoming\"\n tutor={{ name: 'Jane Tutor' }}\n isStartLessonDisabled\n/>\n```",
|
|
2340
2124
|
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-studentlessoncard",
|
|
2341
2125
|
"props": [
|
|
2342
2126
|
{
|
|
@@ -2424,6 +2208,11 @@
|
|
|
2424
2208
|
"description": "",
|
|
2425
2209
|
"options": []
|
|
2426
2210
|
},
|
|
2211
|
+
{
|
|
2212
|
+
"name": "showRateLesson",
|
|
2213
|
+
"description": "",
|
|
2214
|
+
"options": []
|
|
2215
|
+
},
|
|
2427
2216
|
{
|
|
2428
2217
|
"name": "labels",
|
|
2429
2218
|
"description": "",
|
|
@@ -2455,7 +2244,7 @@
|
|
|
2455
2244
|
},
|
|
2456
2245
|
{
|
|
2457
2246
|
"name": "TopNavigation",
|
|
2458
|
-
"description": "Responsive top navigation bar. On **mobile/tablet** (< 1024 px) it shows the logo and a hamburger button that opens a slide-in drawer.\nOn **desktop** (≥ 1024 px) it shows the logo, a tab list, and the user section (Avatar + chevron) with a dropdown
|
|
2247
|
+
"description": "Responsive top navigation bar. On **mobile/tablet** (< 1024 px) it shows the logo and a hamburger button that opens a slide-in drawer.\nOn **desktop** (≥ 1024 px) it shows the logo, a tab list, and the user section (Avatar + name + role Tag + chevron) with a dropdown.\n\nThe drawer open/close state is managed internally — no external state needed.\n\n### Usage\n\n```tsx\nimport { TopNavigation } from '@gostudent/shared-ui-library';\n\n<TopNavigation\n tabs={[\n { label: 'Lessons', isSelected: true, onClick: () => {} },\n { label: 'My availability', isSelected: false, onClick: () => {} },\n ]}\n userName=\"Anna James\"\n userRole=\"tutor\"\n navItems={[\n { icon: DashboardIcon, label: 'Lessons', isSelected: true, onClick: () => {} },\n ]}\n languages={[{ value: 'en', label: 'English' }]}\n onLanguageClick={() => {}}\n onLogout={() => {}}\n/>\n```",
|
|
2459
2248
|
"storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-topnavigation",
|
|
2460
2249
|
"props": [
|
|
2461
2250
|
{
|
|
@@ -2518,11 +2307,6 @@
|
|
|
2518
2307
|
"description": "",
|
|
2519
2308
|
"options": []
|
|
2520
2309
|
},
|
|
2521
|
-
{
|
|
2522
|
-
"name": "menuItems",
|
|
2523
|
-
"description": "",
|
|
2524
|
-
"options": []
|
|
2525
|
-
},
|
|
2526
2310
|
{
|
|
2527
2311
|
"name": "languages",
|
|
2528
2312
|
"description": "",
|
|
@@ -2567,12 +2351,12 @@
|
|
|
2567
2351
|
},
|
|
2568
2352
|
{
|
|
2569
2353
|
"name": "Desktop",
|
|
2570
|
-
"jsx": "<TopNavigation logo={<GoStudentLogo />} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\"
|
|
2354
|
+
"jsx": "<TopNavigation logo={<GoStudentLogo />} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
|
|
2571
2355
|
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop"
|
|
2572
2356
|
},
|
|
2573
2357
|
{
|
|
2574
2358
|
"name": "DesktopSK",
|
|
2575
|
-
"jsx": "<TopNavigation logo={<SKLogo />} mobileLogo={<SKLogoMobile />} logoOverflowsBar={true} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\"
|
|
2359
|
+
"jsx": "<TopNavigation logo={<SKLogo />} mobileLogo={<SKLogoMobile />} logoOverflowsBar={true} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
|
|
2576
2360
|
"storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop-s-k"
|
|
2577
2361
|
}
|
|
2578
2362
|
]
|
|
@@ -2787,7 +2571,6 @@
|
|
|
2787
2571
|
"KebabIcon",
|
|
2788
2572
|
"LocationCenterIcon",
|
|
2789
2573
|
"LocationIcon",
|
|
2790
|
-
"LockIcon",
|
|
2791
2574
|
"LogoutIcon",
|
|
2792
2575
|
"MenuIcon",
|
|
2793
2576
|
"MoreIcon",
|
|
@@ -2808,7 +2591,6 @@
|
|
|
2808
2591
|
"TickFilledIcon",
|
|
2809
2592
|
"TickIcon",
|
|
2810
2593
|
"UploadIcon",
|
|
2811
|
-
"UserIcon",
|
|
2812
2594
|
"WarningFilledIcon",
|
|
2813
2595
|
"WarningOutlinedIcon"
|
|
2814
2596
|
],
|
package/package.json
CHANGED