feat: [MDS-387] Add/convert MDS icons to the project (#39)

* feat: [MDS-387] Add icons as font

* feat: [MDS-387] Replace placeholder with icon

* feat: [MDS-387] Finalise Icons story

* feat: [MDS-387] Increase Icons story padding

* feat: [MDS-387] Remove unused import

example/lib/src/storybook/stories/button.dart

@@ -91,6 +91,8 @@ class ButtonStory extends Story {
               description: "Set button to full width.",
             );
 
+            final resolvedIconVariant = buttonSizesKnob == MoonButtonSize.md ? MoonIcons.frame24 : MoonIcons.frame16;
+
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
               child: Center(
@@ -110,9 +112,9 @@ class ButtonStory extends Story {
                         backgroundColor: color,
                         showPulseEffect: showPulseEffectKnob,
                         showPulseEffectJiggle: showPulseEffectJiggleKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? Text(customLabelTextKnob) : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 32),
                       MoonButton.icon(
@@ -123,7 +125,7 @@ class ButtonStory extends Story {
                         backgroundColor: color,
                         showPulseEffect: showPulseEffectKnob,
                         showPulseEffectJiggle: showPulseEffectJiggleKnob,
-                        icon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        icon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 40),
                       const TextDivider(text: "Main buttons"),
@@ -133,39 +135,39 @@ class ButtonStory extends Story {
                         buttonSize: buttonSizesKnob,
                         isFullWidth: setFullWidthKnob,
                         showPulseEffect: showPulseEffectKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? const Text("MoonPrimaryButton") : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 32),
                       MoonSecondaryButton(
                         onTap: showDisabledKnob ? null : () {},
                         buttonSize: buttonSizesKnob,
                         isFullWidth: setFullWidthKnob,
                         showPulseEffect: showPulseEffectKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? const Text("MoonSecondaryButton") : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 32),
                       MoonTertiaryButton(
                         onTap: showDisabledKnob ? null : () {},
                         buttonSize: buttonSizesKnob,
                         isFullWidth: setFullWidthKnob,
                         showPulseEffect: showPulseEffectKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? const Text("MoonTertiaryButton") : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 32),
                       MoonGhostButton(
                         onTap: showDisabledKnob ? null : () {},
                         buttonSize: buttonSizesKnob,
                         isFullWidth: setFullWidthKnob,
                         showPulseEffect: showPulseEffectKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? const Text("MoonGhostButton") : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 40),
                       const TextDivider(text: "Button with non-standard children"),
@@ -205,7 +207,7 @@ class ButtonStory extends Story {
                                 ),
                               )
                             : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 64),
                     ],

example/lib/src/storybook/stories/chip.dart

@@ -72,6 +72,8 @@ class ChipStory extends Story {
               description: "Show widget in the rightIcon slot.",
             );
 
+            final resolvedIconVariant = chipSizesKnob == MoonChipSize.md ? MoonIcons.frame24 : MoonIcons.frame16;
+
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
               child: Center(
@@ -88,9 +90,9 @@ class ChipStory extends Story {
                         showBorder: showBorderKnob,
                         chipSize: chipSizesKnob,
                         backgroundColor: color,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? Text(customLabelTextKnob) : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 40),
                       const TextDivider(text: "Ghost chip"),
@@ -100,9 +102,9 @@ class ChipStory extends Story {
                         borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
                         showBorder: showBorderKnob,
                         chipSize: chipSizesKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? Text(customLabelTextKnob) : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 40),
                       const TextDivider(text: "Preset chip"),
@@ -115,9 +117,9 @@ class ChipStory extends Story {
                         borderWidth: 2,
                         showBorder: showBorderKnob,
                         chipSize: chipSizesKnob,
-                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null,
                         label: showLabelKnob ? Text(customLabelTextKnob) : null,
-                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                        rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 64),
                     ],

example/lib/src/storybook/stories/icons.dart

@@ -0,0 +1,31 @@
+import 'package:example/src/storybook/common/icons_list.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class IconsStory extends Story {
+  IconsStory()
+      : super(
+          name: "Icons",
+          builder: (context) {
+            return GridView.builder(
+              itemCount: iconsList.length,
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
+              itemBuilder: (context, index) {
+                return Column(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    iconsList[index],
+                    const SizedBox(height: 20),
+                    Text(
+                      iconsNameList[index],
+                      style: TextStyle(fontSize: 10, color: context.moonColors!.trunks),
+                    ),
+                  ],
+                );
+              },
+            );
+          },
+        );
+}

example/lib/src/storybook/stories/tag.dart

@@ -63,8 +63,6 @@ class TagStory extends Story {
             final showRightIconKnob = context.knobs
                 .boolean(label: "Show rightIcon", description: "Show widget in the rightIcon slot.", initial: true);
 
-            final effectiveIconSize = tagSizesKnob == MoonTagSize.x2s ? 12.0 : 16.0;
-
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
               child: Center(
@@ -77,21 +75,11 @@ class TagStory extends Story {
                       tagSize: tagSizesKnob,
                       isUpperCase: setUpperCase,
                       backgroundColor: color,
-                      leftIcon: showLeftIconKnob
-                          ? MoonPlaceholderIcon(
-                              height: effectiveIconSize,
-                              width: effectiveIconSize,
-                            )
-                          : null,
+                      leftIcon: showLeftIconKnob ? const Icon(MoonIcons.close_small16) : null,
                       label: showLabelKnob
                           ? Text(setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob)
                           : null,
-                      rightIcon: showRightIconKnob
-                          ? MoonPlaceholderIcon(
-                              height: effectiveIconSize,
-                              width: effectiveIconSize,
-                            )
-                          : null,
+                      rightIcon: showRightIconKnob ? const Icon(MoonIcons.close_small16) : null,
                     ),
                     const SizedBox(height: 64),
                   ],

example/lib/src/storybook/storybook.dart

@@ -2,6 +2,7 @@ import 'package:example/src/storybook/common/widgets/version.dart';
 import 'package:example/src/storybook/stories/avatar.dart';
 import 'package:example/src/storybook/stories/button.dart';
 import 'package:example/src/storybook/stories/chip.dart';
+import 'package:example/src/storybook/stories/icons.dart';
 import 'package:example/src/storybook/stories/tag.dart';
 import 'package:flutter/material.dart';
 
@@ -61,6 +62,7 @@ class StorybookPage extends StatelessWidget {
             AvatarStory(),
             ButtonStory(),
             ChipStory(),
+            IconsStory(),
             TagStory(),
           ],
         ),

example/pubspec.yaml

@@ -8,6 +8,7 @@ dependencies:
   cupertino_icons: ^1.0.2
   flutter:
     sdk: flutter
+  flutter_svg: ^2.0.1
   moon_design:
     path: ../
   package_info_plus: ^3.0.2
@@ -21,3 +22,4 @@ flutter:
   uses-material-design: true
   assets:
     - assets/images/
+    - assets/svg/

lib/moon_design.dart

@@ -21,7 +21,6 @@ export 'package:moon_design/src/theme/typography/typography.dart';
 export 'package:moon_design/src/utils/extensions.dart';
 export 'package:moon_design/src/utils/measure_size.dart';
 export 'package:moon_design/src/utils/moon_icon.dart';
-export 'package:moon_design/src/utils/placeholder_icon.dart';
 export 'package:moon_design/src/utils/widget_surveyor.dart';
 export 'package:moon_design/src/widgets/avatar/avatar.dart';
 export 'package:moon_design/src/widgets/base_control.dart';
@@ -34,4 +33,5 @@ export 'package:moon_design/src/widgets/chips/chip.dart';
 export 'package:moon_design/src/widgets/chips/ghost_chip.dart';
 export 'package:moon_design/src/widgets/effects/focus_effect.dart';
 export 'package:moon_design/src/widgets/effects/pulse_effect.dart';
+export 'package:moon_design/src/widgets/icons.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';

lib/src/theme/button/button_sizes.dart

@@ -12,6 +12,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   static final xs = MoonButtonSizes(
     height: MoonSizes.sizes.xs,
     gap: MoonSizes.sizes.x5s,
+    iconSizeValue: MoonSizes.sizes.x2s,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s),
     borderRadius: MoonBorders.borders.interactiveXs,
     textStyle: MoonTextStyles.heading.text12,
@@ -20,6 +21,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   static final sm = MoonButtonSizes(
     height: MoonSizes.sizes.sm,
     gap: MoonSizes.sizes.x5s,
+    iconSizeValue: MoonSizes.sizes.xs,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s),
     borderRadius: MoonBorders.borders.interactiveSm,
     textStyle: MoonTextStyles.heading.text14,
@@ -28,6 +30,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   static final md = MoonButtonSizes(
     height: MoonSizes.sizes.md,
     gap: MoonSizes.sizes.x4s,
+    iconSizeValue: MoonSizes.sizes.xs,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s),
     borderRadius: MoonBorders.borders.interactiveSm,
     textStyle: MoonTextStyles.heading.text14,
@@ -36,6 +39,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   static final lg = MoonButtonSizes(
     height: MoonSizes.sizes.lg,
     gap: MoonSizes.sizes.x3s,
+    iconSizeValue: MoonSizes.sizes.xs,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s),
     borderRadius: MoonBorders.borders.interactiveSm,
     textStyle: MoonTextStyles.heading.text16,
@@ -44,6 +48,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   static final xl = MoonButtonSizes(
     height: MoonSizes.sizes.xl,
     gap: MoonSizes.sizes.x2s,
+    iconSizeValue: MoonSizes.sizes.xs,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.xs),
     borderRadius: MoonBorders.borders.interactiveMd,
     textStyle: MoonTextStyles.heading.text16,
@@ -55,6 +60,9 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   /// Space between button children.
   final double gap;
 
+  /// Button icon size value.
+  final double iconSizeValue;
+
   /// Padding around button children.
   final EdgeInsets padding;
 
@@ -67,6 +75,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   const MoonButtonSizes({
     required this.height,
     required this.gap,
+    required this.iconSizeValue,
     required this.padding,
     required this.borderRadius,
     required this.textStyle,
@@ -76,13 +85,15 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
   MoonButtonSizes copyWith({
     double? height,
     double? gap,
+    double? iconSizeValue,
     EdgeInsets? padding,
     BorderRadius? borderRadius,
     TextStyle? textStyle,
   }) {
     return MoonButtonSizes(
       height: height ?? this.height,
       gap: gap ?? this.gap,
+      iconSizeValue: iconSizeValue ?? this.iconSizeValue,
       padding: padding ?? this.padding,
       borderRadius: borderRadius ?? this.borderRadius,
       textStyle: textStyle ?? this.textStyle,
@@ -96,6 +107,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
     return MoonButtonSizes(
       height: lerpDouble(height, other.height, t)!,
       gap: lerpDouble(gap, other.gap, t)!,
+      iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!,
       padding: EdgeInsets.lerp(padding, other.padding, t)!,
       borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
       textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
@@ -109,6 +121,7 @@ class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with Diagnosticabl
       ..add(DiagnosticsProperty("type", "MoonButtonSizes"))
       ..add(DoubleProperty("height", height))
       ..add(DoubleProperty("gap", gap))
+      ..add(DoubleProperty("iconSizeValue", iconSizeValue))
       ..add(DiagnosticsProperty<EdgeInsets>("padding", padding))
       ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
       ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));

lib/src/theme/chip/chip_sizes.dart

@@ -12,6 +12,7 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
   static final sm = MoonChipSizes(
     height: MoonSizes.sizes.sm,
     gap: MoonSizes.sizes.x5s,
+    iconSizeValue: MoonSizes.sizes.x2s,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s),
     borderRadius: MoonBorders.borders.interactiveXs,
     textStyle: MoonTextStyles.heading.text14,
@@ -20,6 +21,7 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
   static final md = MoonChipSizes(
     height: MoonSizes.sizes.md,
     gap: MoonSizes.sizes.x4s,
+    iconSizeValue: MoonSizes.sizes.xs,
     padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s),
     borderRadius: MoonBorders.borders.interactiveSm,
     textStyle: MoonTextStyles.heading.text14,
@@ -31,6 +33,9 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
   /// Space between chip children.
   final double gap;
 
+  /// Chip icon size value.
+  final double iconSizeValue;
+
   /// Padding around chip children.
   final EdgeInsets padding;
 
@@ -43,6 +48,7 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
   const MoonChipSizes({
     required this.height,
     required this.gap,
+    required this.iconSizeValue,
     required this.padding,
     required this.borderRadius,
     required this.textStyle,
@@ -52,13 +58,15 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
   MoonChipSizes copyWith({
     double? height,
     double? gap,
+    double? iconSizeValue,
     EdgeInsets? padding,
     BorderRadius? borderRadius,
     TextStyle? textStyle,
   }) {
     return MoonChipSizes(
       height: height ?? this.height,
       gap: gap ?? this.gap,
+      iconSizeValue: iconSizeValue ?? this.iconSizeValue,
       padding: padding ?? this.padding,
       borderRadius: borderRadius ?? this.borderRadius,
       textStyle: textStyle ?? this.textStyle,
@@ -72,6 +80,7 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
     return MoonChipSizes(
       height: lerpDouble(height, other.height, t)!,
       gap: lerpDouble(gap, other.gap, t)!,
+      iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!,
       padding: EdgeInsets.lerp(padding, other.padding, t)!,
       borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
       textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
@@ -85,6 +94,7 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
       ..add(DiagnosticsProperty("type", "MoonChipSizes"))
       ..add(DoubleProperty("height", height))
       ..add(DoubleProperty("gap", gap))
+      ..add(DoubleProperty("iconSizeValue", iconSizeValue))
       ..add(DiagnosticsProperty<EdgeInsets>("padding", padding))
       ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
       ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));