Add demo component src / basic demo page to web

codecov.yml

@@ -0,0 +1,5 @@
+comment:
+  layout: header, changes, diff, sunburst
+coverage:
+  ignore:
+  - web/.*

web/demos/button/button-active.dart

@@ -0,0 +1,12 @@
+part of over_react.web.demos;
+
+ReactElement buttonActiveDemo() =>
+  (Dom.div()..className = 'btn-toolbar')(
+    (Button()
+      ..isActive = true
+    )('Primary button'),
+    (Button()
+      ..isActive = true
+      ..skin = ButtonSkin.SECONDARY
+    )('Button')
+  );

web/demos/button/button-block.dart

@@ -0,0 +1,11 @@
+part of over_react.web.demos;
+
+ReactElement buttonBlockDemo() => Dom.div()(
+  (Button()
+    ..isBlock = true
+  )('Block level button'),
+  (Button()
+    ..isBlock = true
+    ..skin = ButtonSkin.SECONDARY
+  )('Block level button')
+);

web/demos/button/button-disabled.dart

@@ -0,0 +1,13 @@
+part of over_react.web.demos;
+
+ReactElement buttonDisabledDemo() =>
+  (Dom.div()..className = 'btn-toolbar')(
+    (Button()
+      ..isDisabled = true
+    )('Primary button'),
+    (Button()
+      ..href = '#'
+      ..isDisabled = true
+      ..skin = ButtonSkin.SECONDARY
+    )('Link')
+  );

web/demos/button/button-examples.dart

@@ -0,0 +1,12 @@
+part of over_react.web.demos;
+
+ReactElement buttonExamplesDemo() =>
+  (Dom.div()..className = 'btn-toolbar')(
+    Button()('Primary'),
+    (Button()..skin = ButtonSkin.SECONDARY)('Secondary'),
+    (Button()..skin = ButtonSkin.SUCCESS)('Success'),
+    (Button()..skin = ButtonSkin.INFO)('Info'),
+    (Button()..skin = ButtonSkin.WARNING)('Warning'),
+    (Button()..skin = ButtonSkin.DANGER)('Danger'),
+    (Button()..skin = ButtonSkin.LINK)('Link')
+  );

web/demos/button/button-outline.dart

@@ -0,0 +1,11 @@
+part of over_react.web.demos;
+
+ReactElement buttonOutlineDemo() =>
+  (Dom.div()..className = 'btn-toolbar')(
+    (Button()..skin = ButtonSkin.PRIMARY_OUTLINE)('Primary'),
+    (Button()..skin = ButtonSkin.SECONDARY_OUTLINE)('Secondary'),
+    (Button()..skin = ButtonSkin.SUCCESS_OUTLINE)('Success'),
+    (Button()..skin = ButtonSkin.INFO_OUTLINE)('Info'),
+    (Button()..skin = ButtonSkin.WARNING_OUTLINE)('Warning'),
+    (Button()..skin = ButtonSkin.DANGER_OUTLINE)('Danger')
+  );

web/demos/button/button-sizes.dart

@@ -0,0 +1,8 @@
+part of over_react.web.demos;
+
+ReactElement buttonSizesDemo() =>
+  (Dom.div()..className = 'btn-toolbar')(
+    (Button()..size = ButtonSize.SMALL)('Small'),
+    Button()('Default'),
+    (Button()..size = ButtonSize.LARGE)('Large')
+  );

web/demos/button/button-types.dart

@@ -0,0 +1,9 @@
+part of over_react.web.demos;
+
+ReactElement buttonTypesDemo() =>
+  (Dom.div()..className = 'btn-toolbar')(
+    Button()('Button'),
+    (Button()..href = '#')('Link'),
+    (Button()..type = ButtonType.SUBMIT)('Submit'),
+    (Button()..type = ButtonType.RESET)('Reset')
+  );

web/demos/button/index.dart

@@ -0,0 +1,33 @@
+import 'dart:html';
+import 'package:react/react.dart' as react;
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react_client.dart';
+import 'package:over_react/over_react.dart';
+
+import '../demos.dart';
+import '../constants.dart';
+
+main() {
+  setClientConfiguration();
+
+  react_dom.render(buttonExamplesDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-examples'));
+
+  react_dom.render(buttonTypesDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-types'));
+
+  react_dom.render(buttonOutlineDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-outline'));
+
+  react_dom.render(buttonSizesDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-sizes'));
+
+  react_dom.render(buttonBlockDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-block'));
+
+  react_dom.render(buttonActiveDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-active'));
+
+  react_dom.render(buttonDisabledDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--button-disabled'));
+}

web/demos/constants.dart

@@ -0,0 +1 @@
+const String demoMountNodeSelectorPrefix = '.component-demo__mount';

web/demos/demos.dart

@@ -0,0 +1,30 @@
+library over_react.web.demos;
+
+// Imports
+import 'package:react/react_client.dart';
+import 'package:over_react/over_react.dart';
+import '../src/demo_components.dart';
+
+// Parts
+part 'button/button-examples.dart';
+part 'button/button-types.dart';
+part 'button/button-outline.dart';
+part 'button/button-sizes.dart';
+part 'button/button-block.dart';
+part 'button/button-active.dart';
+part 'button/button-disabled.dart';
+
+part 'list-group/list-group-basic.dart';
+part 'list-group/list-group-tags.dart';
+part 'list-group/list-group-anchors-and-buttons.dart';
+part 'list-group/list-group-contextual.dart';
+part 'list-group/list-group-header.dart';
+
+part 'progress/progress-basic.dart';
+part 'progress/progress-contextual.dart';
+part 'progress/progress-striped.dart';
+part 'progress/progress-animated-stripes.dart';
+
+part 'tag/tag-basic.dart';
+part 'tag/tag-contextual.dart';
+part 'tag/tag-pills.dart';

web/demos/list-group/index.dart

@@ -0,0 +1,27 @@
+import 'dart:html';
+import 'package:react/react.dart' as react;
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react_client.dart';
+import 'package:over_react/over_react.dart';
+
+import '../demos.dart';
+import '../constants.dart';
+
+main() {
+  setClientConfiguration();
+
+  react_dom.render(listGroupBasicDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--list-group-basic'));
+
+  react_dom.render(listGroupTagsDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--list-group-tags'));
+
+  react_dom.render(listGroupAnchorsAndButtonsDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--list-group-anchors-and-buttons'));
+
+  react_dom.render(listGroupContextualSkinDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--list-group-contextual'));
+
+  react_dom.render(listGroupHeaderDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--list-group-header'));
+}

web/demos/list-group/list-group-anchors-and-buttons.dart

@@ -0,0 +1,29 @@
+part of over_react.web.demos;
+
+ReactElement listGroupAnchorsAndButtonsDemo() =>
+  ListGroup()(
+    (ListGroupItem()
+      ..isActive = true
+      ..href = '#'
+    )('Cras justo odio'),
+    (ListGroupItem()
+      ..onClick = (_) {}
+    )('Dapibus ac facilisis in'),
+    (ListGroupItem()
+      ..onClick = (_) {}
+    )('Morbi leo risus'),
+    (ListGroupItem()
+      ..onClick = (_) {}
+    )('Porta ac consectetur ac'),
+    (ListGroupItem()
+      ..isDisabled = true
+      ..onClick = (_) {}
+    )('Vestibulum at eros')
+  );
+
+
+
+
+
+
+

web/demos/list-group/list-group-basic.dart

@@ -0,0 +1,9 @@
+part of over_react.web.demos;
+
+ReactElement listGroupBasicDemo() =>
+  ListGroup()(
+    ListGroupItem()('Dapibus ac facilisis in'),
+    ListGroupItem()('Cras sit amet nibh libero'),
+    ListGroupItem()('Porta ac consectetur ac'),
+    ListGroupItem()('Vestibulum at eros')
+  );

web/demos/list-group/list-group-contextual.dart

@@ -0,0 +1,21 @@
+part of over_react.web.demos;
+
+ReactElement listGroupContextualSkinDemo() =>
+  ListGroup()(
+    (ListGroupItem()
+      ..onClick = (_) {}
+      ..skin = ListGroupItemSkin.SUCCESS
+    )('Dapibus ac facilisis in'),
+    (ListGroupItem()
+      ..onClick = (_) {}
+      ..skin = ListGroupItemSkin.INFO
+    )('Cras sit amet nibh libero'),
+    (ListGroupItem()
+      ..onClick = (_) {}
+      ..skin = ListGroupItemSkin.WARNING
+    )('Porta ac consectetur ac'),
+    (ListGroupItem()
+      ..onClick = (_) {}
+      ..skin = ListGroupItemSkin.DANGER
+    )('Vestibulum at eros')
+  );

web/demos/list-group/list-group-header.dart

@@ -0,0 +1,29 @@
+part of over_react.web.demos;
+
+ReactElement listGroupHeaderDemo() =>
+  ListGroup()(
+    (ListGroupItem()
+      ..header = 'List group item heading'
+      ..onClick = (_) {}
+      ..isActive = true
+    )(
+      'Donec id elit non mi porta gravida at eget metus. '
+      'Maecenas sed diam eget risus varius blandit.'
+    ),
+    (ListGroupItem()
+      ..header = 'List group item heading'
+      ..headerSize = ListGroupItemHeaderElementSize.H4
+      ..onClick = (_) {}
+    )(
+      'Donec id elit non mi porta gravida at eget metus. '
+      'Maecenas sed diam eget risus varius blandit.'
+    ),
+    (ListGroupItem()
+      ..header = 'List group item heading'
+      ..headerSize = ListGroupItemHeaderElementSize.H3
+      ..onClick = (_) {}
+    )(
+      'Donec id elit non mi porta gravida at eget metus. '
+      'Maecenas sed diam eget risus varius blandit.'
+    )
+  );

web/demos/list-group/list-group-tags.dart

@@ -0,0 +1,26 @@
+part of over_react.web.demos;
+
+ReactElement listGroupTagsDemo() =>
+  ListGroup()(
+    ListGroupItem()(
+      (Tag()
+        ..className = 'float-xs-right'
+        ..isPill = true
+      )(14),
+      'Cras justo odio'
+    ),
+    ListGroupItem()(
+      (Tag()
+        ..className = 'float-xs-right'
+        ..isPill = true
+      )(2),
+      'Dapibus ac facilisis in'
+    ),
+    ListGroupItem()(
+      (Tag()
+        ..className = 'float-xs-right'
+        ..isPill = true
+      )(1),
+      'Morbi leo risus'
+    )
+  );

web/demos/progress/index.dart

@@ -0,0 +1,24 @@
+import 'dart:html';
+import 'package:react/react.dart' as react;
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react_client.dart';
+import 'package:over_react/over_react.dart';
+
+import '../demos.dart';
+import '../constants.dart';
+
+main() {
+  setClientConfiguration();
+
+  react_dom.render(progressBasicDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--progress-basic'));
+
+  react_dom.render(progressContextualDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--progress-contextual'));
+
+  react_dom.render(progressStripedDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--progress-striped'));
+
+  react_dom.render(progressAnimatedStripesDemo(),
+      querySelector('$demoMountNodeSelectorPrefix--progress-animated-stripes'));
+}

web/demos/progress/progress-animated-stripes.dart

@@ -0,0 +1,8 @@
+part of over_react.web.demos;
+
+ReactElement progressAnimatedStripesDemo() =>
+  (Progress()
+    ..value = 25.0
+    ..isStriped = true
+    ..isAnimated = true
+  )();

web/demos/progress/progress-basic.dart

@@ -0,0 +1,33 @@
+part of over_react.web.demos;
+
+ReactElement progressBasicDemo() => Dom.div()(
+  (Progress()
+    ..showCaption = true
+    ..captionProps = (domProps()..className = 'text-xs-center')
+    ..caption = 'Reticulating splines...'
+  )(),
+  (Progress()
+    ..value = 25.0
+    ..showCaption = true
+    ..captionProps = (domProps()..className = 'text-xs-center')
+    ..caption = 'Reticulating splines...'
+  )(),
+  (Progress()
+    ..value = 50.0
+    ..showCaption = true
+    ..captionProps = (domProps()..className = 'text-xs-center')
+    ..caption = 'Reticulating splines...'
+  )(),
+  (Progress()
+    ..value = 75.0
+    ..showCaption = true
+    ..captionProps = (domProps()..className = 'text-xs-center')
+    ..caption = 'Reticulating splines...'
+  )(),
+  (Progress()
+    ..value = 100.0
+    ..showCaption = true
+    ..captionProps = (domProps()..className = 'text-xs-center')
+    ..caption = 'Reticulating splines...'
+  )()
+);

web/demos/progress/progress-contextual.dart

@@ -0,0 +1,20 @@
+part of over_react.web.demos;
+
+ReactElement progressContextualDemo() => Dom.div()(
+  (Progress()
+    ..value = 25.0
+    ..skin = ProgressSkin.SUCCESS
+  )(),
+  (Progress()
+    ..value = 50.0
+    ..skin = ProgressSkin.INFO
+  )(),
+  (Progress()
+    ..value = 75.0
+    ..skin = ProgressSkin.WARNING
+  )(),
+  (Progress()
+    ..value = 100.0
+    ..skin = ProgressSkin.DANGER
+  )()
+);