chipsStory top-level property

Implementation

Story chipsStory = Story(
  name: 'Chips',
  builder: (context) {
    final chipText =
        context.knobs.text(label: 'Chip Text', initial: 'Chips Text');

    final chipShapeStory = context.knobs.options(
      label: 'Chip Shape',
      options: [
        Option(label: 'Rounded Rectangle', value: ChipShape.rounded),
        Option(label: 'Rectangle', value: ChipShape.rectangle),
        Option(label: 'Pilled', value: ChipShape.pilled),
      ],
      initial: ChipShape.rectangle,
    );

    final chipSizeStory = context.knobs.options(
      label: 'Chip Size',
      options: [
        Option(label: 'Small', value: ChipSize.small),
        Option(label: 'Medium', value: ChipSize.medium),
        Option(label: 'Large', value: ChipSize.large),
      ],
      initial: ChipSize.medium,
    );

    final chipTypeStory = context.knobs.options(
      label: 'Chip Type',
      options: [
        Option(label: 'Normal', value: ChipType.normal),
        Option(label: 'Outline', value: ChipType.outline),
        Option(label: 'Soft', value: ChipType.soft),
        Option(label: 'Filled', value: ChipType.filled),
      ],
      initial: ChipType.filled,
    );

    final backgroundColor = context.knobs.options<Color>(
      label: 'Background Color',
      options: [
        Option(label: 'Red', value: Colors.red),
        Option(label: 'Green', value: Colors.green),
        Option(label: 'Blue', value: Colors.blue),
      ],
      initial: ThemeColors.primary,
    );

    final prefixIconStory = context.knobs.options<IconData>(
      label: 'Prefix Icon',
      options: [
        Option(label: 'Circle', value: Icons.circle),
        Option(label: 'Star', value: Icons.star),
        Option(label: 'Check', value: Icons.check),
      ],
      initial: Icons.circle,
    );

    final suffixIconStory = context.knobs.options<IconData>(
      label: 'Suffix Icon',
      options: [
        Option(label: 'Circle', value: Icons.circle),
        Option(label: 'Star', value: Icons.star),
        Option(label: 'Check', value: Icons.check),
      ],
      initial: Icons.circle,
    );
    final softBackgroundColor = context.knobs.options<Color>(
      label: 'Soft Background Color',
      options: [
        Option(label: 'Red', value: const Color.fromARGB(255, 243, 148, 141)),
        Option(label: 'Green', value: const Color.fromARGB(255, 169, 246, 172)),
        Option(label: 'Blue', value: const Color.fromARGB(255, 172, 218, 255)),
      ],
      initial: const Color.fromARGB(255, 172, 218, 255),
    );

    final height = context.knobs.slider(
      label: 'Height',
      initial: 30,
      min: 10,
      max: 200,
    );
    final width = context.knobs.slider(
      label: 'Width',
      initial: 180,
      min: 100,
      max: 400,
    );

    final iconPadding = context.knobs.options<EdgeInsetsGeometry>(
      label: 'Icon Padding',
      options: [
        Option(label: '0', value: const EdgeInsets.only(right: 0.0)),
        Option(label: '5', value: const EdgeInsets.only(right: 5.0)),
        Option(label: '10', value: const EdgeInsets.only(right: 10.0)),
      ],
      initial: const EdgeInsets.only(right: 8.0),
    );

    return Container(
      child: DDSChip(
        text: chipText,
        width: width,
        height: height,
        shape: chipShapeStory,
        size: chipSizeStory,
        type: chipTypeStory,
        backgroundColor: backgroundColor,
        softBackgroundColor: softBackgroundColor,
        iconPadding: iconPadding,
        endIcon: IconButton(
          icon: Icon(prefixIconStory, size: 10),
          onPressed: () {},
        ),
        startIcon: IconButton(
          icon: Icon(suffixIconStory, size: 10),
          onPressed: () {},
        ),
      ),
    );
  },
);