modalDialogStory top-level property

Implementation

Story modalDialogStory = Story(
  name: 'Modal Dialog',
  builder: (context) {
    final totalSteps = context.knobs.sliderInt(
      label: 'Total Steps',
      initial: 3,
      min: 1,
      max: 5,
    );

    final stepContents = List.generate(totalSteps, (index) {
      return context.knobs.text(
          label: 'Step ${index + 1} Content',
          initial: 'Step ${index + 1} content');
    });

    final headerIcon = context.knobs.options(
      label: 'Header Icon',
      options: [
        const Option(label: 'Info', value: Icons.info),
        const Option(label: 'Check Circle', value: Icons.check_circle),
        const Option(label: 'Warning', value: Icons.warning),
      ],
      initial: Icons.info,
    );

    final variant = context.knobs.options(
      label: 'Variant',
      options: [
        const Option(label: 'Basic', value: ModalDialogueVariant.basic),
        const Option(
            label: 'Multi Steps', value: ModalDialogueVariant.multiStep),
      ],
      initial: ModalDialogueVariant.basic,
    );

    final headerIconColor = context.knobs.options(
      label: 'Header Icon Color',
      initial: Colors.black,
      options: const [
        Option(label: 'Primary', value: Color(0xFFF15A29)),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'White', value: Colors.white),
      ],
    );

    final backButtonText =
        context.knobs.text(label: 'Back Button Text', initial: 'Back');

    final finishButtonText =
        context.knobs.text(label: 'Finish Button Text', initial: 'Finish');

    final backButton =
        context.knobs.boolean(label: 'Custom Back Button', initial: false)
            ? DDSButton(
                onPressed: () {},
                type: ButtonType.secondary,
                shape: ButtonShape.roundedRectangle,
                size: ButtonSize.small,
                minWidth: 95,
                width: 95,
                label: backButtonText,
              )
            : null;

    final finishButton =
        context.knobs.boolean(label: 'Custom Finish Button', initial: false)
            ? DDSButton(
                onPressed: () {},
                type: ButtonType.primary,
                shape: ButtonShape.roundedRectangle,
                minWidth: 95,
                width: 95,
                label: finishButtonText,
              )
            : null;

    final headerIconSize = context.knobs.slider(
      label: 'Header Icon Size',
      initial: 40.0,
      min: 20.0,
      max: 80.0,
    );
    final iconOffsetVertical = context.knobs.slider(
      label: 'Icon Offset Vertical',
      initial: 10.0,
      min: 0.0,
      max: 100.0,
    );
    final iconOffsetHorizontal = context.knobs.slider(
      label: 'Icon Offset Horizontal',
      initial: 0.0,
      min: 0.0,
      max: 100.0,
    );

    final contentButtonSpacing = context.knobs.slider(
      label: 'Content-Button Spacing',
      initial: 20.0,
      min: 0.0,
      max: 60.0,
    );

    final backgroundColor = context.knobs.options(
      label: 'Background Color',
      initial: Colors.white,
      options: const [
        Option(label: 'Primary', value: Color(0xFFF15A29)),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'White', value: Colors.white),
      ],
    );
    final elevation = context.knobs.slider(
      label: 'Elevation',
      initial: 2.0,
      min: 0.0,
      max: 10.0,
    );

    final cancelButtonText =
        context.knobs.text(label: 'Cancel Button Text', initial: 'Cancel');
    final actionButtonText =
        context.knobs.text(label: 'Action Button Text', initial: 'Proceed');
    final showIcon = context.knobs.boolean(label: 'Show Icon', initial: false);
    final showCurrentStepsDot =
        context.knobs.boolean(label: 'Show Current Steps Dot', initial: false);
    final multiStepCancelButton = context.knobs
            .boolean(label: 'Custom Multi-Step Cancel Button', initial: true)
        ? DDSButton(
            onPressed: () {},
            type: ButtonType.primary,
            shape: ButtonShape.roundedRectangle,
            size: ButtonSize.small,
            minWidth: 95,
            width: 95,
            label: cancelButtonText,
          )
        : null;

    final cancelButton =
        context.knobs.boolean(label: 'Custom Cancel Button', initial: true)
            ? DDSButton(
                onPressed: () {},
                type: ButtonType.primary,
                shape: ButtonShape.roundedRectangle,
                primaryButtonBackgroundColor: Color(0xFFF1F6FF),
                primaryButtonTextColor: Color(0xFF1C6ADD),
                minWidth: 140,
                width: 140,
                label: 'Cancel',
              )
            : null;

    final actionButton =
        context.knobs.boolean(label: 'Custom Action Button', initial: true)
            ? DDSButton(
                onPressed: () {},
                type: ButtonType.secondary,
                secondaryButtonBackgroundColor: Color(0xFF1C6ADD),
                secondaryButtonTextColor: Colors.white,
                shape: ButtonShape.roundedRectangle,
                minWidth: 140,
                width: 140,
                label: 'Mark as N/A',
              )
            : null;

    final buttonDirection = context.knobs.options(
      label: 'Button Direction',
      options: [
        const Option(label: 'Horizontal', value: Axis.horizontal),
        const Option(label: 'Vertical', value: Axis.vertical),
      ],
      initial: Axis.horizontal,
    );
    final width = context.knobs.slider(
      label: 'Width',
      min: 100,
      max: 600,
      initial: 400,
    );
    final height = context.knobs.slider(
      label: 'Height',
      min: 100,
      max: 400,
      initial: 250,
    );

    return Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return DDSModalDialog(
                title: SizedBox(
                  width: 305,
                  child: Text(
                    'Confirm Bulk Update to N/A',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Color(0xFF171717),
                      fontSize: 16,
                      fontFamily: 'Poppins',
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
                content: SizedBox(
                  width: 305,
                  child: Text.rich(
                    TextSpan(
                      children: [
                        TextSpan(
                          text: 'Youre about to set all workspaces within the ',
                          style: TextStyle(
                            color: Color(0xFF262626),
                            fontSize: 14,
                            fontFamily: 'Poppins',
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        TextSpan(
                          text: 'living room to N/A',
                          style: TextStyle(
                            color: Color(0xFF262626),
                            fontSize: 14,
                            fontFamily: 'Poppins',
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        TextSpan(
                          text: '. Are you sure you want to proceed?',
                          style: TextStyle(
                            color: Color(0xFF262626),
                            fontSize: 14,
                            fontFamily: 'Poppins',
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
                variant: variant,
                totalSteps: totalSteps,
                width: width,
                height: height,
                showIcon: showIcon,
                stepContents: stepContents,
                showCurrentStepsDot: showCurrentStepsDot,
                buttonDirection: buttonDirection,
                headerIcon: headerIcon,
                headerIconColor: headerIconColor,
                headerIconSize: headerIconSize,
                backgroundColor: backgroundColor,
                elevation: elevation,
                cancelButton: variant == ModalDialogueVariant.multiStep
                    ? multiStepCancelButton
                    : cancelButton,
                actionButton: actionButton,
                cancelButtonText: cancelButtonText,
                actionButtonText: actionButtonText,
                backButton: backButton,
                finishButton: finishButton,
                backButtonText: backButtonText,
                finishButtonText: finishButtonText,
                iconOffsetVertical: iconOffsetVertical,
                iconOffsetHorizontal: iconOffsetHorizontal,
                contentButtonSpacing: contentButtonSpacing,
                onComplete: () {
                  print('Completed!');
                },
                onCancel: () {
                  print('Dialog canceled.');
                },
              );
            },
          );
        },
        child: const Text('Show Modal Dialog'),
      ),
    );
  },
);