docs: added figma and widgetbook links to all components (#180)

* docs: added figma and widgetbook links to all components
ZebraDevs · Sep 25, 2024 · e1d2ba0 · e1d2ba0
1 parent 366201f
commit e1d2ba0
Show file tree

Hide file tree

Showing 59 changed files with 241 additions and 1 deletion.
diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart
@@ -7,6 +7,10 @@ import '../../../zeta_flutter.dart';
 /// the content associated with that item. There can be zero expanded items, exactly one,
 /// or more than one item expanded at a time, depending on the configuration.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=3427-67874
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/accordion
 class ZetaAccordion extends ZetaStatefulWidget {
   /// The constructor of the component [ZetaAccordion].
   const ZetaAccordion({

diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart
@@ -35,6 +35,10 @@ enum ZetaAvatarSize {
 
 /// An avatar is a visual representation of a user or entity.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=20816-388
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/avatar
 class ZetaAvatar extends ZetaStatelessWidget {
   /// Constructor for [ZetaAvatar]
   const ZetaAvatar({

diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart
@@ -13,6 +13,10 @@ enum ZetaIndicatorType {
 
 /// Indicators are used to show the status of a user or any messages/notifications they might have.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=22000-10045&mode=design&t=6mhOcUUr3tgxxFdd-0
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/badge/indicators
 class ZetaIndicator extends ZetaStatelessWidget {
   /// Constructor for [ZetaIndicator].
   const ZetaIndicator({

diff --git a/lib/src/components/badges/label.dart b/lib/src/components/badges/label.dart
@@ -9,6 +9,10 @@ typedef ZetaBadge = ZetaLabel;
 
 /// Text badges notify users of line items that need attention.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=21926-2099
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/badge/label
 class ZetaLabel extends ZetaStatelessWidget {
   ///Constructs [ZetaLabel].
   const ZetaLabel({

diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart
@@ -47,6 +47,10 @@ extension on ZetaPriorityPillType {
 
 /// This badge is used to indicate the order of importance.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=22000-15955
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/badge/priority-pill
 class ZetaPriorityPill extends ZetaStatelessWidget {
   ///Constructs [ZetaPriorityPill]
   const ZetaPriorityPill({

diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 /// To help some information, labels, or errors stand out, we present them with badges.
 /// They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=21836-37274
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/badge/status-label
 class ZetaStatusLabel extends ZetaStatelessWidget {
   ///Constructs [ZetaStatusLabel].
   const ZetaStatusLabel({

diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart
@@ -15,6 +15,10 @@ enum ZetaTagDirection {
 /// Tags are used to draw attention to a specific area or information.
 /// The arrow shape helps direct the users attention to the desired place.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=22000-13170
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/badge/tags
 class ZetaTag extends ZetaStatelessWidget {
   /// Constructs a [ZetaTag].
   const ZetaTag({

diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart
@@ -29,6 +29,10 @@ enum ZetaBannerStatus {
 /// A banner displays an important, succinct message, and provides action for users to address.
 /// It draws the attention to the message by displaying it at the top in various colors.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=22195-43965
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/banners
 class ZetaBanner extends MaterialBanner {
   /// Constructor for [ZetaBanner]. See [MaterialBanner] for more information.
   ZetaBanner({

diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart
@@ -9,6 +9,10 @@ import '../../../zeta_flutter.dart';
 ///
 /// Content should typically consist of a [List] of [ZetaMenuItem]s.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21541-2225
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/bottom-sheet
 class ZetaBottomSheet extends ZetaStatelessWidget {
   /// Constructor for [ZetaBottomSheet].
   const ZetaBottomSheet({

diff --git a/lib/src/components/bottom sheets/menu_items.dart b/lib/src/components/bottom sheets/menu_items.dart
@@ -13,6 +13,10 @@ enum ZetaMenuItemType {
 
 /// Menu Item component, typically used as body of [ZetaBottomSheet].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21541-2225
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/bottom-sheet
 class ZetaMenuItem extends ZetaStatelessWidget {
   /// Constructor for the component [ZetaMenuItem].
   ///

diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -9,6 +9,10 @@ import '../../../zeta_flutter.dart';
 /// [children] should consist of [ZetaBreadCrumb]s.
 ///
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=229-5&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/breadcrumbs
 class ZetaBreadCrumbs extends ZetaStatefulWidget {
   ///Constructor for [ZetaBreadCrumbs]
   const ZetaBreadCrumbs({

diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 
 /// Zeta Button Group
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=229-45&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/buttons/group-button
 class ZetaButtonGroup extends ZetaStatelessWidget {
   /// Constructs [ZetaButtonGroup] from a list of [ZetaGroupButton]s
   const ZetaButtonGroup({

diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 
 /// Zeta Button
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23126-110945
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/buttons/button
 class ZetaButton extends ZetaStatelessWidget {
   ///Constructs [ZetaButton]
   const ZetaButton({

diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 
 /// Component [ZetaIconButton]
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23126-110314
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/buttons/icon-button
 class ZetaIconButton extends ZetaStatelessWidget {
   /// Constructor for [ZetaIconButton]
   const ZetaIconButton({

diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart
@@ -7,6 +7,10 @@ import '../../../zeta_flutter.dart';
 
 /// Chat item widget that can be dragged to reveal contextual actions.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24828-46282&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/list-items/chat-list-item
 class ZetaChatItem extends ZetaStatelessWidget {
   /// Creates a [ZetaChatItem]
   const ZetaChatItem({

diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart
@@ -10,6 +10,10 @@ import '../../../zeta_flutter.dart';
 /// rebuild the checkbox with a new [value] to update the visual appearance of
 /// the checkbox.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21510-54003
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/checkbox
 class ZetaCheckbox extends FormField<bool> {
   /// Constructs a [ZetaCheckbox].
   ZetaCheckbox({

diff --git a/lib/src/components/chips/assist_chip.dart b/lib/src/components/chips/assist_chip.dart
@@ -6,6 +6,10 @@ import '../../../zeta_flutter.dart';
 ///
 /// These chips use [Draggable] and can be dragged around the screen and placed in new locations using [DragTarget].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21265-14215
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/chips/assist-chip
 class ZetaAssistChip extends ZetaChip {
   /// Creates a [ZetaAssistChip].
   const ZetaAssistChip({

diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart
@@ -10,7 +10,6 @@ export './input_chip.dart';
 /// This covers the broad functionality of [ZetaAssistChip], [ZetaFilterChip] and [ZetaInputChip].
 ///
 /// If [selected] is not null, the chip will have the toggle behavior of [ZetaFilterChip].
-/// {@category Components}
 class ZetaChip extends ZetaStatefulWidget {
   /// Constructs a [ZetaChip].
   const ZetaChip({

diff --git a/lib/src/components/chips/filter_chip.dart b/lib/src/components/chips/filter_chip.dart
@@ -8,6 +8,10 @@ import '../../../zeta_flutter.dart';
 ///
 /// These chips use [Draggable] and can be dragged around the screen and placed in new locations using [DragTarget].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21265-14112
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/chips/filter-chip
 class ZetaFilterChip extends ZetaChip {
   /// Creates a [ZetaFilterChip].
   const ZetaFilterChip({

diff --git a/lib/src/components/chips/input_chip.dart b/lib/src/components/chips/input_chip.dart
@@ -4,6 +4,10 @@ import '../../../zeta_flutter.dart';
 ///
 /// Leading widget should typically be a [ZetaAvatar].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21265-2159
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/chips/input-chip
 class ZetaInputChip extends ZetaChip {
   /// Creates a [ZetaInputChip].
   const ZetaInputChip({

diff --git a/lib/src/components/contact_item/contact_item.dart b/lib/src/components/contact_item/contact_item.dart
@@ -4,6 +4,10 @@ import '../../../zeta_flutter.dart';
 
 /// A single row that contains avatar, title and subtitle.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24828-46282&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/list-items/contact-item
 class ZetaContactItem extends ZetaStatelessWidget {
   /// Constructs [ZetaContactItem].
   const ZetaContactItem({

diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart
@@ -13,6 +13,10 @@ import '../text_input/internal_text_input.dart';
 ///
 /// Can be used and validated the same way as a [TextFormField].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=229-36&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/date-input
 class ZetaDateInput extends ZetaFormField<DateTime> {
   /// Creates a new [ZetaDateInput]
   ZetaDateInput({

diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart
@@ -6,6 +6,10 @@ import '../../../zeta_flutter.dart';
 
 /// Dial pad gives the user the ability to dial a number and start a call. It also has a quick dial security action and a delete entry action.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21156-16370&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/dial-pad
 class ZetaDialPad extends StatefulWidget {
   /// Constructs a [ZetaDialPad].
   const ZetaDialPad({

diff --git a/lib/src/components/dialog/dialog.dart b/lib/src/components/dialog/dialog.dart
@@ -47,6 +47,12 @@ Future<bool?> showZetaDialog(
       ),
     );
 
+/// The Zeta Dialog component.
+/// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23954-93337&node-type=frame&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/dialog
 class _ZetaDialog extends ZetaStatelessWidget {
   const _ZetaDialog({
     this.headerAlignment = ZetaDialogHeaderAlignment.center,

diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart
@@ -27,6 +27,10 @@ class _DropdownControllerImpl implements ZetaDropdownController {
 
 /// An item used in a [ZetaDropdown] or a [ZetaSelectInput].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=22391-10146
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/dropdown
 class ZetaDropdownItem<T> {
   /// Creates a new [ZetaDropdownItem]
   ZetaDropdownItem({
@@ -51,6 +55,10 @@ class ZetaDropdownItem<T> {
 
 /// Class for [ZetaDropdown]
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=22391-10146
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/dropdown
 class ZetaDropdown<T> extends ZetaStatefulWidget {
   /// Creates a new [ZetaDropdown].
   const ZetaDropdown({

diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart
@@ -27,6 +27,10 @@ enum ZetaFabSize {
 
 /// Zeta Floating Action Button Component.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21816-4283&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/buttons/floating-action-button
 class ZetaFAB extends StatefulWidget {
   ///Constructs [ZetaFAB].
   const ZetaFAB({

diff --git a/lib/src/components/filter_selection/filter_selection.dart b/lib/src/components/filter_selection/filter_selection.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 
 /// Component [ZetaFilterSelection]
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24607-737&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/filter-selection
 class ZetaFilterSelection extends ZetaStatelessWidget {
   /// Constructor for the component [ZetaFilterSelection]
   const ZetaFilterSelection({

diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart
@@ -6,6 +6,10 @@ import '../../../zeta_flutter.dart';
 
 /// Global header component
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=1120-26358&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/global-header
 class ZetaGlobalHeader extends ZetaStatefulWidget {
   /// Constructor for [ZetaGlobalHeader]
   const ZetaGlobalHeader({

diff --git a/lib/src/components/global_header/header_tab_item.dart b/lib/src/components/global_header/header_tab_item.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 
 /// Tab item to be used in [ZetaGlobalHeader].
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=1120-26358&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/global-header
 class ZetaGlobalHeaderItem extends ZetaStatefulWidget {
   ///Constructor for tab item
   const ZetaGlobalHeaderItem({

diff --git a/lib/src/components/icon/icon.dart b/lib/src/components/icon/icon.dart
@@ -13,6 +13,8 @@ import '../../../zeta_flutter.dart';
 
 /// Custom wrapper for [Icon] that applies the Zeta icon family.
 /// {@category Components}
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=assets/icons
 class ZetaIcon extends ZetaStatelessWidget {
   /// Constructs a [ZetaIcon].
   const ZetaIcon(

diff --git a/lib/src/components/in_page_banner/in_page_banner.dart b/lib/src/components/in_page_banner/in_page_banner.dart
@@ -5,6 +5,10 @@ import '../../../zeta_flutter.dart';
 
 /// In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21156-20085&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/in-page-banners
 class ZetaInPageBanner extends ZetaStatelessWidget {
   /// Constructs [ZetaInPageBanner].
   const ZetaInPageBanner({

diff --git a/lib/src/components/list_item/dropdown_list_item.dart b/lib/src/components/list_item/dropdown_list_item.dart
@@ -6,6 +6,10 @@ import 'list_scope.dart';
 
 /// An expandable list item containing other [ZetaListItem]s within it.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=229-17&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/list-items/dropdown-list-item
 class ZetaDropdownListItem extends ZetaStatefulWidget {
   /// Creates a new [ZetaDropdownListItem]
   const ZetaDropdownListItem({

diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart
@@ -9,6 +9,10 @@ import 'list_scope.dart';
 ///
 /// This wraps [ListView.builder] so it needs to be used in a widget with a constrained height.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=229-17&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/list-items/list-item
 class ZetaList extends ZetaStatelessWidget {
   /// Creates a new [ZetaList].
   const ZetaList({
@@ -50,6 +54,10 @@ class ZetaList extends ZetaStatelessWidget {
 ///
 /// To create list items with a [ZetaSwitch], [ZetaCheckbox], or [ZetaRadio], use the [ZetaListItem.toggle], [ZetaListItem.checkbox] or the [ZetaListItem.radio] named constructors respectively.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=229-17&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/list-items/list-item
 class ZetaListItem extends ZetaStatelessWidget {
   /// Creates a [ZetaListItem].
   const ZetaListItem({

diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart
@@ -6,6 +6,10 @@ import '../../../zeta_flutter.dart';
 
 /// Notification list items are used in notification lists.
 /// {@category Components}
+///
+/// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=25043-100110&node-type=canvas&m=dev
+///
+/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/list-items/notification-list-item
 class ZetaNotificationListItem extends ZetaStatelessWidget {
   /// Constructor for [ZetaNotificationListItem]
   const ZetaNotificationListItem({