From ebda911a0953d1e3e17085c5994a0e60714b1d3b Mon Sep 17 00:00:00 2001 From: rachana-egov Date: Tue, 15 Oct 2024 16:12:22 +0530 Subject: [PATCH 1/2] updated button, alert card and back button stories --- .../storybook/assets/localized_data.json | 2 +- .../storybook/lib/iframe/iframe_widget.dart | 30 +- .../storybook/lib/main.dart | 6 +- .../lib/widgets/atoms/Info_card_stories.dart | 422 ++++++++++++++---- .../widgets/atoms/back_button_stories.dart | 28 +- .../lib/widgets/atoms/button_stories.dart | 105 ++++- .../storybook/pubspec.lock | 10 +- .../storybook/pubspec_overrides.yaml | 2 +- 8 files changed, 473 insertions(+), 132 deletions(-) diff --git a/flutter/digit-ui-components/storybook/assets/localized_data.json b/flutter/digit-ui-components/storybook/assets/localized_data.json index b9c533814a..a4313894ae 100644 --- a/flutter/digit-ui-components/storybook/assets/localized_data.json +++ b/flutter/digit-ui-components/storybook/assets/localized_data.json @@ -77,7 +77,7 @@ "message": "Browse in my files", "module": "core-common-component" }, - {"code": "PRIVACY_HEADER","message":" Privacy Policy for Admin Console","module":"digit-privacy-policy","locale":"en_MZ"}, + {"code": "PRIVACY_HEADER","message":" Privacy Policy","module":"digit-privacy-policy","locale":"en_MZ"}, {"code": "PRIVACY_HEADER_1_SUB_1","message":"Introduction","module":"digit-privacy-policy","locale":"en_MZ"}, {"code": "DIGIT_TABLE_OF_CONTENTS","message":"Table of Contents","module":"digit-privacy-policy","locale":"en_MZ"}, {"code": "PRIVACY_HEADER_1_SUB_1_DESC_1","message":"This is the Privacy Policy for Admin Console","module":"digit-privacy-policy","locale":"en_MZ"}, diff --git a/flutter/digit-ui-components/storybook/lib/iframe/iframe_widget.dart b/flutter/digit-ui-components/storybook/lib/iframe/iframe_widget.dart index c35264d24d..62f4676503 100644 --- a/flutter/digit-ui-components/storybook/lib/iframe/iframe_widget.dart +++ b/flutter/digit-ui-components/storybook/lib/iframe/iframe_widget.dart @@ -33,30 +33,44 @@ class IframeWidget extends StatelessWidget { ''' (function() { try { - // Find the tab list element + // Find the main content element + var mainContent = document.querySelector('.flex-1.relative.py-8.lg\\:px-12.break-anywhere.page-api-block\\:xl\\:max-2xl\\:pr-0.page-api-block\\:max-w-\\[1654px\\].page-api-block\\:mx-auto'); + + if (mainContent) { + // Remove all other elements from the body except the main content + var allChildren = Array.from(document.body.children); + + allChildren.forEach(function(child) { + if (child !== mainContent) { + child.parentNode.removeChild(child); + } + }); + + console.log('Main content displayed, all other content removed.'); + } else { + console.log('Main content not found, showing default content.'); + } + + // Tab switching logic var tabList = document.querySelector('.group\\/tabs'); if (tabList) { - // Find all buttons inside the tab list var buttons = tabList.querySelectorAll('button'); - // If there are at least two buttons, switch the active class to the second button if (buttons.length > 1) { var firstButton = buttons[0]; var secondButton = buttons[1]; - // Remove active class from the first button if (firstButton.classList.contains('active-tab')) { firstButton.classList.remove('active-tab'); } - // Add active class to the second button if (!secondButton.classList.contains('active-tab')) { secondButton.classList.add('active-tab'); } - // Optionally, trigger a click event on the second tab to ensure content loads - secondButton.click(); + secondButton.click(); // Trigger content load for the second tab + console.log('Switched to second tab.'); } else { console.log('Fallback: Only one button or no buttons found.'); } @@ -64,7 +78,7 @@ class IframeWidget extends StatelessWidget { console.log('Fallback: Tab list not found. Showing default content.'); } } catch (error) { - console.error('Error occurred while switching tabs:', error); + console.error('Error occurred while processing the iframe content:', error); } })(); ''', diff --git a/flutter/digit-ui-components/storybook/lib/main.dart b/flutter/digit-ui-components/storybook/lib/main.dart index afbafa7c0f..e4ea95286a 100644 --- a/flutter/digit-ui-components/storybook/lib/main.dart +++ b/flutter/digit-ui-components/storybook/lib/main.dart @@ -76,6 +76,7 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( + themeMode: ThemeMode.light, theme: DigitExtendedTheme.instance.getLightTheme(), darkTheme: DigitExtendedTheme.instance.getDarkTheme(), locale: Locale("en", "MZ"), @@ -133,7 +134,6 @@ class MyHomePageState extends State { currentLocale: Locale("en", "MZ"), // Set the initial locale correctly supportedLocales: { "English": Locale.fromSubtags(languageCode: 'en', countryCode: 'MZ'), - "English (French)": Locale.fromSubtags(languageCode: 'en', countryCode: 'FR'), }, delegates: [ DefaultMaterialLocalizations.delegate, @@ -169,9 +169,10 @@ class MyHomePageState extends State { ...typographyStories(), ...accordionStories(), ...actionStories(), + ...infoCardStories(), ...digitBackButtonStories(), ...DigitBreadCrumbStories(), - ...DigitButtonStories(), + ...buttonStories(), ...digitButtonListStories(), ...checkboxStories(), ...chipStories(), @@ -179,7 +180,6 @@ class MyHomePageState extends State { ...dropdownStories(), ...fileUploaderStories(), ...inputFieldStories(), - ...infoCardStories(), ...listViewStories(), ...loaderStories(), ...matrixCardStories(), diff --git a/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart b/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart index f1afa4877d..3970ad3573 100644 --- a/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart +++ b/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart @@ -1,128 +1,394 @@ import 'package:digit_ui_components/enum/app_enums.dart'; +import 'package:digit_ui_components/theme/ComponentTheme/info_card_theme.dart'; import 'package:digit_ui_components/widgets/atoms/digit_info_card.dart'; import 'package:digit_ui_components/widgets/atoms/info_buttons.dart'; import 'package:flutter/cupertino.dart'; import 'package:storybook_toolkit/storybook_toolkit.dart'; import '../../iframe/iframe_widget.dart'; - List infoCardStories() { return [ Story( - name: 'Atom/Info/Documentation', + name: 'Atom/Alert Card/Documentation', builder: (context) { return IframeWidget( - url: 'https://egov-digit.gitbook.io/docs-templates-repo/ui-component-name-2', + url: + 'https://egov-digit.gitbook.io/docs-templates-repo/ui-component-name-2', ); }, ), Story( - name: 'Atom/Info/Info', + name: 'Atom/Alert Card/Info', builder: (context) { + // First knob for controlling the visibility of the additional widget + bool showAdditionalWidget = context.knobs.boolean( + label: "Show Additional Widget", + initial: false, + ); + + // Second knob for controlling the visibility of the info button + bool showInfoButton = context.knobs.boolean( + label: "Action", + initial: false, + ); - return InfoCard( - title: context.knobs.text(label: "Title", initial: 'Info'), - type: context.knobs.options( - label: "Type", - initial: InfoType.info, + // Conditionally define the 'inline' option knob based on the value of 'showAdditionalWidget' + bool? showInlineWidget; + if (showAdditionalWidget) { + showInlineWidget = context.knobs.options( + label: "Widget Alignment", options: const [ - Option(label: 'Info', value: InfoType.info), - Option(label: 'Success', value: InfoType.success), - Option(label: 'Error', value: InfoType.error), - Option(label: 'Warning', value: InfoType.warning), + Option(label: "Vertical", value: true), + Option(label: "Horizontal", value: false), + ], + initial: false, + ); + } + + return Padding( + padding: const EdgeInsets.all(24.0), + child: InfoCard( + title: context.knobs.text(label: "Title", initial: 'Info'), + type: InfoType.info, + description: context.knobs.text( + label: "Description", + initial: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + ), + inline: showInlineWidget ?? false, + additionalWidgets: [ + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + + + if (showInfoButton) + Column( + children: [ + if(showInfoButton && showInlineWidget==true) + SizedBox(height: 16,), + InfoButton( + size: DigitButtonSize.large, + label: 'Action Button', + onPressed: () {}, + type: InfoDigitButtonType.info, + ), + ], + ), ], - ), - description: context.knobs.text( - label: "Description", - initial: - 'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect the service to get completed in 24 hrs from the time of payment.', ), ); }, ), Story( - name: 'Atom/Info/Info DigitButtons', + name: 'Atom/Alert Card/Error', builder: (context) { + // First knob for controlling the visibility of the additional widget + bool showAdditionalWidget = context.knobs.boolean( + label: "Show Additional Widget", + initial: false, + ); - return InfoButton( - size: DigitButtonSize.large, - label: 'Primary DigitButton', - onPressed: () {}, - type: context.knobs.options( - label: 'Type', - initial: InfoDigitButtonType.warning, + // Second knob for controlling the visibility of the info button + bool showInfoButton = context.knobs.boolean( + label: "Action", + initial: false, + ); + + // Conditionally define the 'inline' option knob based on the value of 'showAdditionalWidget' + bool? showInlineWidget; + if (showAdditionalWidget) { + showInlineWidget = context.knobs.options( + label: "Widget Alignment", options: const [ - Option(label: 'Warning', value: InfoDigitButtonType.warning), - Option(label: 'Info', value: InfoDigitButtonType.info), - Option(label: 'Error', value: InfoDigitButtonType.error), - Option(label: 'Success', value: InfoDigitButtonType.success), + Option(label: "Vertical", value: true), + Option(label: "Horizontal", value: false), + ], + initial: false, + ); + } + + return Padding( + padding: const EdgeInsets.all(24.0), + child: InfoCard( + title: context.knobs.text(label: "Title", initial: 'Error'), + type: InfoType.error, + description: context.knobs.text( + label: "Description", + initial: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + ), + inline: showInlineWidget ?? false, + additionalWidgets: [ + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + + + if (showInfoButton) + Column( + children: [ + if(showInfoButton && showInlineWidget==true) + SizedBox(height: 16,), + InfoButton( + size: DigitButtonSize.large, + label: 'Action Button', + onPressed: () {}, + type: InfoDigitButtonType.error, + ), + ], + ), ], ), ); }, ), Story( - name: 'Atom/Info/Additional widgets', + name: 'Atom/Alert Card/Success', builder: (context) { + // First knob for controlling the visibility of the additional widget + bool showAdditionalWidget = context.knobs.boolean( + label: "Show Additional Widget", + initial: false, + ); + + // Second knob for controlling the visibility of the info button + bool showInfoButton = context.knobs.boolean( + label: "Action", + initial: false, + ); - return InfoCard( - title: context.knobs.text(label: "Title", initial: 'Info'), - type: context.knobs.options( - label: "Type", - initial: InfoType.info, + // Conditionally define the 'inline' option knob based on the value of 'showAdditionalWidget' + bool? showInlineWidget; + if (showAdditionalWidget) { + showInlineWidget = context.knobs.options( + label: "Widget Alignment", options: const [ - Option(label: 'Info', value: InfoType.info), - Option(label: 'Success', value: InfoType.success), - Option(label: 'Error', value: InfoType.error), - Option(label: 'Warning', value: InfoType.warning), + Option(label: "Vertical", value: true), + Option(label: "Horizontal", value: false), + ], + initial: false, + ); + } + + return Padding( + padding: const EdgeInsets.all(24.0), + child: InfoCard( + title: context.knobs.text(label: "Title", initial: 'Info'), + type: InfoType.success, + description: context.knobs.text( + label: "Description", + initial: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + ), + inline: showInlineWidget ?? false, + additionalWidgets: [ + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + + + if (showInfoButton) + Column( + children: [ + if(showInfoButton && showInlineWidget==true) + SizedBox(height: 16,), + InfoButton( + size: DigitButtonSize.large, + label: 'Action Button', + onPressed: () {}, + type: InfoDigitButtonType.success, + ), + ], + ), ], ), - description: context.knobs.text( - label: "Description", - initial: - 'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect the service to get completed in 24 hrs from the time of payment.', - ), - additionalWidgets: [ - const Text( - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's"), - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - ], - inline: context.knobs - .boolean(label: 'Inline Additional Widgets', initial: false), ); }, ), Story( - name: 'Atom/Info/Additional widgets with DigitButtons', + name: 'Atom/Alert Card/Warning', builder: (context) { + // First knob for controlling the visibility of the additional widget + bool showAdditionalWidget = context.knobs.boolean( + label: "Show Additional Widget", + initial: false, + ); + + // Second knob for controlling the visibility of the info button + bool showInfoButton = context.knobs.boolean( + label: "Action", + initial: false, + ); - return InfoCard( - title: context.knobs.text(label: "Title", initial: 'Info'), - type: InfoType.info, - description: context.knobs.text( - label: "Description", - initial: - 'Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect the service to get completed in 24 hrs from the time of payment.', + // Conditionally define the 'inline' option knob based on the value of 'showAdditionalWidget' + bool? showInlineWidget; + if (showAdditionalWidget) { + showInlineWidget = context.knobs.options( + label: "Widget Alignment", + options: const [ + Option(label: "Vertical", value: true), + Option(label: "Horizontal", value: false), + ], + initial: false, + ); + } + + return Padding( + padding: const EdgeInsets.all(24.0), + child: InfoCard( + title: context.knobs.text(label: "Title", initial: 'Info'), + type: InfoType.warning, + description: context.knobs.text( + label: "Description", + initial: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + ), + inline: showInlineWidget ?? false, + additionalWidgets: [ + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + + + if (showInfoButton) + Column( + children: [ + if(showInfoButton && showInlineWidget==true) + SizedBox(height: 16,), + InfoButton( + size: DigitButtonSize.large, + label: 'Action Button', + onPressed: () {}, + type: InfoDigitButtonType.warning, + ), + ], + ), + ], ), - inline: context.knobs - .boolean(label: 'Inline Additional Widgets', initial: false), - additionalWidgets: [ - const Text( - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's"), - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - InfoButton( - label: 'Click To Know More', - onPressed: () {}, - type: InfoDigitButtonType.info, - size: DigitButtonSize.large, + ); + }, + ), + Story( + name: 'Atom/Alert Card/Custom', + builder: (context) { + // First knob for controlling the visibility of the additional widget + bool showAdditionalWidget = context.knobs.boolean( + label: "Show Additional Widget", + initial: false, + ); + + // Second knob for controlling the visibility of the info button + bool showInfoButton = context.knobs.boolean( + label: "Action", + initial: false, + ); + + // Conditionally define the 'inline' option knob based on the value of 'showAdditionalWidget' + bool? showInlineWidget; + if (showAdditionalWidget) { + showInlineWidget = context.knobs.options( + label: "Widget Alignment", + options: const [ + Option(label: "Vertical", value: true), + Option(label: "Horizontal", value: false), + ], + initial: false, + ); + } + + return Padding( + padding: const EdgeInsets.all(24.0), + child: InfoCard( + title: context.knobs.text(label: "Title", initial: 'Info'), + type: InfoType.info, + description: context.knobs.text( + label: "Description", + initial: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', ), - ], + inline: showInlineWidget ?? false, + additionalWidgets: [ + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + if (showAdditionalWidget) + Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), + + + if (showInfoButton) + Column( + children: [ + if(showInfoButton && showInlineWidget==true) + SizedBox(height: 16,), + InfoButton( + size: DigitButtonSize.large, + label: 'Primary DigitButton', + onPressed: () {}, + type: InfoDigitButtonType.info, + ), + ], + ), + ], + ), ); }, ), diff --git a/flutter/digit-ui-components/storybook/lib/widgets/atoms/back_button_stories.dart b/flutter/digit-ui-components/storybook/lib/widgets/atoms/back_button_stories.dart index 7ffe2ce225..04fe128672 100644 --- a/flutter/digit-ui-components/storybook/lib/widgets/atoms/back_button_stories.dart +++ b/flutter/digit-ui-components/storybook/lib/widgets/atoms/back_button_stories.dart @@ -17,19 +17,30 @@ List digitBackButtonStories() { }, ), Story( - name: 'Atom/Back Link/Double arrow', + name: 'Atom/Back Link/Backlink 1', builder: (context) { return Center( child: DigitBackButton( handleBack: () {}, + digitBackButtonThemeData: + const DigitBackButtonThemeData().copyWith( + context: context, + backDigitButtonIcon: Icon( + Icons.arrow_left, + size: MediaQuery.of(context).size.width < 500 + ? Theme.of(context).spacerTheme.spacer5 + : Theme.of(context).spacerTheme.spacer6, + color: Theme.of(context).colorTheme.primary.primary2, + ), + ), label: context.knobs.text(label: 'Label', initial: 'Back'), ), ); }, ), Story( - name: 'Atom/Back Link/Arrow with circle', + name: 'Atom/Back Link/Backlink 2', builder: (context) { return Center( child: DigitBackButton( @@ -51,23 +62,12 @@ List digitBackButtonStories() { }, ), Story( - name: 'Atom/Back Link/Simple arrow', + name: 'Atom/Back Link/Backlink 3', builder: (context) { return Center( child: DigitBackButton( handleBack: () {}, - digitBackButtonThemeData: - const DigitBackButtonThemeData().copyWith( - context: context, - backDigitButtonIcon: Icon( - Icons.arrow_left, - size: MediaQuery.of(context).size.width < 500 - ? Theme.of(context).spacerTheme.spacer5 - : Theme.of(context).spacerTheme.spacer6, - color: Theme.of(context).colorTheme.primary.primary2, - ), - ), label: context.knobs.text(label: 'Label', initial: 'Back'), ), ); diff --git a/flutter/digit-ui-components/storybook/lib/widgets/atoms/button_stories.dart b/flutter/digit-ui-components/storybook/lib/widgets/atoms/button_stories.dart index a8c676b1e1..c797cc8345 100644 --- a/flutter/digit-ui-components/storybook/lib/widgets/atoms/button_stories.dart +++ b/flutter/digit-ui-components/storybook/lib/widgets/atoms/button_stories.dart @@ -5,10 +5,10 @@ import 'package:storybook_toolkit/storybook_toolkit.dart'; import '../../iframe/iframe_widget.dart'; -List DigitButtonStories() { +List buttonStories() { return [ Story( - name: 'Atom/Button/Documentation', + name: 'Atom/Buttons/Documentation', builder: (context) { return IframeWidget( url: 'https://egov-digit.gitbook.io/docs-templates-repo/ui-component-name-2', @@ -19,16 +19,30 @@ List DigitButtonStories() { name: 'Atom/Buttons/Primary', builder: (context) { + // Create an option knob for disabled states + final fieldState = context.knobs.options( + label: 'State', + initial: 'Default', // Ensure an initial value is set + options: [ + Option(label: 'Default', value: 'default'), + Option(label: 'Disabled', value: 'disabled'), + ], + ); + + // Set the values for isDisabled based on the selected option + bool isDisabled = false; + + if (fieldState == 'disabled') { + isDisabled = true; + } + return DigitButton( - label: context.knobs.text(label: 'Label', initial: 'Primary DigitButton'), + label: context.knobs.text(label: 'Label', initial: 'Primary Button'), onPressed: () {}, type: DigitButtonType.primary, - isDisabled: context.knobs.boolean( - label: 'disable', - initial: false, - ), + isDisabled: isDisabled, size: context.knobs.options( - label: 'Size of DigitButton', + label: 'Size of button', initial: DigitButtonSize.large, options: const [ Option(label: 'Small', value: DigitButtonSize.small), @@ -63,19 +77,34 @@ List DigitButtonStories() { name: 'Atom/Buttons/Secondary', builder: (context) { + // Create an option knob for disabled states + final fieldState = context.knobs.options( + label: 'State', + initial: 'Default', // Ensure an initial value is set + options: [ + Option(label: 'Default', value: 'default'), + Option(label: 'Disabled', value: 'disabled'), + ], + ); + + // Set the values for isDisabled based on the selected option + bool isDisabled = false; + + if (fieldState == 'disabled') { + isDisabled = true; + } + + return DigitButton( label: - context.knobs.text(label: 'Label', initial: 'Secondary DigitButton'), + context.knobs.text(label: 'Label', initial: 'Secondary Button'), onPressed: () { // Add your secondary DigitButton logic here }, - isDisabled: context.knobs.boolean( - label: 'disable', - initial: false, - ), + isDisabled: isDisabled, type: DigitButtonType.secondary, size: context.knobs.options( - label: 'Size of DigitButton', + label: 'Size of button', initial: DigitButtonSize.large, options: const [ Option( @@ -118,16 +147,31 @@ List DigitButtonStories() { name: 'Atom/Buttons/Tertiary', builder: (context) { + // Create an option knob for disabled states + final fieldState = context.knobs.options( + label: 'State', + initial: 'Default', // Ensure an initial value is set + options: [ + Option(label: 'Default', value: 'default'), + Option(label: 'Disabled', value: 'disabled'), + ], + ); + + // Set the values for isDisabled based on the selected option + bool isDisabled = false; + + if (fieldState == 'disabled') { + isDisabled = true; + } + + return DigitButton( label: - context.knobs.text(label: 'Label', initial: 'Tertiary DigitButton'), + context.knobs.text(label: 'Label', initial: 'Tertiary Button'), onPressed: () { // Add your secondary DigitButton logic here }, - isDisabled: context.knobs.boolean( - label: 'disable', - initial: false, - ), + isDisabled: isDisabled, type: DigitButtonType.tertiary, size: context.knobs.options( label: 'Size of DigitButton', @@ -173,15 +217,30 @@ List DigitButtonStories() { name: 'Atom/Buttons/Link', builder: (context) { + // Create an option knob for disabled states + final fieldState = context.knobs.options( + label: 'State', + initial: 'Default', // Ensure an initial value is set + options: [ + Option(label: 'Default', value: 'default'), + Option(label: 'Disabled', value: 'disabled'), + ], + ); + + // Set the values for isDisabled based on the selected option + bool isDisabled = false; + + if (fieldState == 'disabled') { + isDisabled = true; + } + + return DigitButton( label: context.knobs.text(label: 'Label', initial: 'link'), onPressed: () { // Add your secondary DigitButton logic here }, - isDisabled: context.knobs.boolean( - label: 'disable', - initial: false, - ), + isDisabled: isDisabled, type: DigitButtonType.link, size: context.knobs.options( label: 'Size of DigitButton', diff --git a/flutter/digit-ui-components/storybook/pubspec.lock b/flutter/digit-ui-components/storybook/pubspec.lock index dbc4bbae13..6a98ec4a42 100644 --- a/flutter/digit-ui-components/storybook/pubspec.lock +++ b/flutter/digit-ui-components/storybook/pubspec.lock @@ -284,10 +284,12 @@ packages: digit_ui_components: dependency: "direct main" description: - path: "../digit_components" - relative: true - source: path - version: "0.0.1+5" + path: "flutter/digit-ui-components/digit_components" + ref: "flutter_component_0.0.2" + resolved-ref: "5a138ca4724b6816c5475fa03cf40e8160e9d9dd" + url: "https://github.com/egovernments/DIGIT-UI-LIBRARIES" + source: git + version: "0.0.1+7" doc_widget: dependency: "direct main" description: diff --git a/flutter/digit-ui-components/storybook/pubspec_overrides.yaml b/flutter/digit-ui-components/storybook/pubspec_overrides.yaml index a5700992b6..20cb483dcb 100644 --- a/flutter/digit-ui-components/storybook/pubspec_overrides.yaml +++ b/flutter/digit-ui-components/storybook/pubspec_overrides.yaml @@ -2,7 +2,7 @@ dependency_overrides: digit_ui_components: git: url: https://github.com/egovernments/DIGIT-UI-LIBRARIES - ref: flutter_component_0.0.2 + ref: develop path: ./flutter/digit-ui-components/digit_components storybook_toolkit: From f68f295910cec2bc4afb169ecc5e408fea9721c3 Mon Sep 17 00:00:00 2001 From: rachana-egov Date: Tue, 15 Oct 2024 16:30:41 +0530 Subject: [PATCH 2/2] updated code rabbit comments --- .../lib/widgets/atoms/Info_card_stories.dart | 152 +++++++----------- 1 file changed, 56 insertions(+), 96 deletions(-) diff --git a/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart b/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart index 3970ad3573..4de9908590 100644 --- a/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart +++ b/flutter/digit-ui-components/storybook/lib/widgets/atoms/Info_card_stories.dart @@ -58,27 +58,19 @@ List infoCardStories() { inline: showInlineWidget ?? false, additionalWidgets: [ if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - - + ...List.generate( + 5, + (_) => Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s', + ), + ), if (showInfoButton) Column( children: [ - if(showInfoButton && showInlineWidget==true) - SizedBox(height: 16,), + if (showInfoButton && showInlineWidget == true) + SizedBox( + height: 16, + ), InfoButton( size: DigitButtonSize.large, label: 'Action Button', @@ -128,32 +120,24 @@ List infoCardStories() { description: context.knobs.text( label: "Description", initial: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', ), inline: showInlineWidget ?? false, additionalWidgets: [ if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - - + ...List.generate( + 5, + (_) => Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s', + ), + ), if (showInfoButton) Column( children: [ - if(showInfoButton && showInlineWidget==true) - SizedBox(height: 16,), + if (showInfoButton && showInlineWidget == true) + SizedBox( + height: 16, + ), InfoButton( size: DigitButtonSize.large, label: 'Action Button', @@ -198,37 +182,29 @@ List infoCardStories() { return Padding( padding: const EdgeInsets.all(24.0), child: InfoCard( - title: context.knobs.text(label: "Title", initial: 'Info'), + title: context.knobs.text(label: "Title", initial: 'Success'), type: InfoType.success, description: context.knobs.text( label: "Description", initial: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', ), inline: showInlineWidget ?? false, additionalWidgets: [ if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - - + ...List.generate( + 5, + (_) => Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s', + ), + ), if (showInfoButton) Column( children: [ - if(showInfoButton && showInlineWidget==true) - SizedBox(height: 16,), + if (showInfoButton && showInlineWidget == true) + SizedBox( + height: 16, + ), InfoButton( size: DigitButtonSize.large, label: 'Action Button', @@ -273,37 +249,29 @@ List infoCardStories() { return Padding( padding: const EdgeInsets.all(24.0), child: InfoCard( - title: context.knobs.text(label: "Title", initial: 'Info'), + title: context.knobs.text(label: "Title", initial: 'Warning'), type: InfoType.warning, description: context.knobs.text( label: "Description", initial: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', ), inline: showInlineWidget ?? false, additionalWidgets: [ if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - - + ...List.generate( + 5, + (_) => Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s', + ), + ), if (showInfoButton) Column( children: [ - if(showInfoButton && showInlineWidget==true) - SizedBox(height: 16,), + if (showInfoButton && showInlineWidget == true) + SizedBox( + height: 16, + ), InfoButton( size: DigitButtonSize.large, label: 'Action Button', @@ -353,32 +321,24 @@ List infoCardStories() { description: context.knobs.text( label: "Description", initial: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.', ), inline: showInlineWidget ?? false, additionalWidgets: [ if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - if (showAdditionalWidget) - Image.network( - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s'), - - + ...List.generate( + 5, + (_) => Image.network( + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s', + ), + ), if (showInfoButton) Column( children: [ - if(showInfoButton && showInlineWidget==true) - SizedBox(height: 16,), + if (showInfoButton && showInlineWidget == true) + SizedBox( + height: 16, + ), InfoButton( size: DigitButtonSize.large, label: 'Primary DigitButton',