DOCS: Add ListGroup / ListGroupItem / Tag components & demos

.gitignore

@@ -33,7 +33,7 @@ _site
 .pub
 packages
 .packages
-build/
+#build/ # Do not ignore this in the gh-pages branch.
 
 
 # Since over_react is a library package, we shouldn't track pubspec.lock:

_config.yml

@@ -21,6 +21,9 @@ exclude:
   - 'tool'
   - 'docs/sass/bootstrap'
 
+#keep_files:
+#  - 'web'
+
 # Build settings
 markdown: kramdown
 kramdown:
@@ -44,6 +47,9 @@ url: "TODO"
 port: 8020
 
 # Misc
+demo_content_class: docs-section component-demo__content
+demo_react_mount_classes: bd-example component-demo__mount
+
 org_url: https://www.workiva.com
 org_target: wk
 

build_docs.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+
+pub build --mode=debug
+
+
+# Generate html includes that can be passed in as jekyll include parameters for demo-code-example.html
+
+#
+# ListGroup / ListGroupItem
+#
+cp -r web/src/demo_components/list_group.dart docs/_includes/component-demo-code-ex/list_group.dart.html
+cp -r web/src/demo_components/list_group_item.dart docs/_includes/component-demo-code-ex/list_group_item.dart.html
+
+cp -r web/demos/list-group/list-group-basic.dart docs/_includes/component-demo-code-ex/list-group-basic.dart.html
+cp -r web/demos/list-group/list-group-tags.dart docs/_includes/component-demo-code-ex/list-group-tags.dart.html
+cp -r web/demos/list-group/list-group-anchors-and-buttons.dart docs/_includes/component-demo-code-ex/list-group-anchors-and-buttons.dart.html
+cp -r web/demos/list-group/list-group-contextual.dart docs/_includes/component-demo-code-ex/list-group-contextual.dart.html
+cp -r web/demos/list-group/list-group-header.dart docs/_includes/component-demo-code-ex/list-group-header.dart.html
+
+
+#
+# Tag
+#
+cp -r web/src/demo_components/tag.dart docs/_includes/component-demo-code-ex/tag.dart.html
+
+cp -r web/demos/tag/tag-basic.dart docs/_includes/component-demo-code-ex/tag-basic.dart.html
+cp -r web/demos/tag/tag-contextual.dart docs/_includes/component-demo-code-ex/tag-contextual.dart.html
+cp -r web/demos/tag/tag-pills.dart docs/_includes/component-demo-code-ex/tag-pills.dart.html

demos/list-group/index.html

@@ -1,9 +1,80 @@
 ---
 title: ListGroup Component Demo
-lead: We should really type something else here, to help the peoples with the understanding.
+lead: A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/list-group/" target="bs">Bootstrap List Group</a> using a statically-typed React prop API.
 layout: demo
 slug: list-group
 parent_slug: demos
 baseurl: ../../
-dart_src: ../../web/demos/list-group/index.dart
+dart_src: ../../build/web/demos/list-group/index.dart
 ---
+
+<h2 id="contents" class="docs-heading">Contents</h2>
+
+<ul>
+    <li>
+        <a href="#basic-example">Basic example</a>
+    </li>
+    <li>
+        <a href="#tags">Tags</a>
+    </li>
+    <li>
+        <a href="#anchors-and-buttons">Anchors and buttons</a>
+    </li>
+    <li>
+        <a href="#contextual-skins">Contextual skins</a>
+    </li>
+    <li>
+        <a href="#headers">Headers</a>
+    </li>
+</ul>
+
+
+<h2 id="basic-example" class="docs-heading">Basic example</h2>
+<p>The most basic <code>ListGroup</code> component is simply list <code>ListGroupItem</code> components.</p>
+<p>The components encapsulate the complexity of the underlying HTML, ensuring that all the
+    default CSS classes and other HTML attributes are present, leaving you with minimal markup.</p>
+{% include demo-code-example.html
+    name='list-group-basic'
+    consumption_code_file_name='list-group-basic'
+    component_file_name='list_group'
+    component_name='ListGroup'
+    component_two_file_name='list_group_item'
+    component_two_name='ListGroupItem'
+%}
+
+
+<h2 id="tags" class="docs-heading">Tags</h2>
+<p>Nest a <code><a href="../tag/">Tag</a></code> component within any `ListGroupItem` to show unread counts, activity,
+    etc.</p>
+{% include demo-code-example.html
+    name='list-group-tags'
+    consumption_code_file_name='list-group-tags'
+%}
+
+
+<h2 id="anchors-and-buttons" class="docs-heading">Anchors and buttons</h2>
+<p>Set <code>props.onClick</code> to render an HTML <code>&lt;button&gt;</code> element, or <code>props.href</code>
+    to render an HTML <code>&lt;a&gt;</code> element with hover, disabled, and active states.</p>
+<p>Set <code>props.isDisabled</code> to disable an item, and <code>isActive</code> to make an item appear active.</p>
+{% include demo-code-example.html
+    name='list-group-anchors-and-buttons'
+    consumption_code_file_name='list-group-anchors-and-buttons'
+%}
+
+
+<h2 id="contextual-skins" class="docs-heading">Contextual skins</h2>
+<p>Set <code>props.skin</code> to style a <code>ListGroupItem</code> using contextual colors.</p>
+{% include demo-code-example.html
+    name='list-group-contextual'
+    consumption_code_file_name='list-group-contextual'
+%}
+
+<h2 id="headers" class="docs-heading">Headers</h2>
+<p>Set <code>props.header</code> to render a <code>ListGroupItem</code> that has a distinct header and body content
+    region.</p>
+
+<p>Optionally, set <code>props.headerSize</code> to modify the size of the header itself.</p>
+{% include demo-code-example.html
+    name='list-group-header'
+    consumption_code_file_name='list-group-header'
+%}

demos/tag/index.html

@@ -0,0 +1,49 @@
+---
+title: Tag Component Demo
+lead: A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/tag/" target="bs">Bootstrap Tag</a> using a statically-typed React prop API.
+layout: demo
+slug: tag
+parent_slug: demos
+baseurl: ../../
+dart_src: ../../build/web/demos/tag/index.dart
+---
+
+<h2 id="contents" class="docs-heading">Contents</h2>
+
+<ul>
+    <li>
+        <a href="#basic-example">Basic example</a>
+    </li>
+    <li>
+        <a href="#contextual-skins">Contextual skins</a>
+    </li>
+    <li>
+        <a href="#pill-tags">Pill tags</a>
+    </li>
+</ul>
+
+
+<h2 id="basic-example" class="docs-heading">Basic example</h2>
+<p>Tags scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</p>
+{% include demo-code-example.html
+    name='tag-basic'
+    consumption_code_file_name='tag-basic'
+    component_file_name='tag'
+    component_name='Tag'
+%}
+
+
+<h2 id="contextual-skins" class="docs-heading">Contextual skins</h2>
+<p>Set <code>props.skin</code> to style a <code>Tag</code> using contextual colors.</p>
+{% include demo-code-example.html
+    name='tag-contextual'
+    consumption_code_file_name='tag-contextual'
+%}
+
+
+<h2 id="pill-tags" class="docs-heading">Pill tags</h2>
+<p>Set <code>props.isPill</code> to make tags more rounded. Useful if you miss the badges from Bootstrap v3.</p>
+{% include demo-code-example.html
+    name='tag-pills'
+    consumption_code_file_name='tag-pills'
+%}

docs/_includes/component-demo-code-ex/list-group-anchors-and-buttons.dart.html

@@ -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')
+  );
+
+
+
+
+
+
+

docs/_includes/component-demo-code-ex/list-group-basic.dart.html

@@ -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')
+  );

docs/_includes/component-demo-code-ex/list-group-contextual.dart.html

@@ -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')
+  );

docs/_includes/component-demo-code-ex/list-group-disabled-item.dart.html

@@ -0,0 +1,17 @@
+part of over_react.web.demos;
+
+ReactElement listGroupDisabledItemDemo() =>
+  ListGroup()(
+    (ListGroupItem()..isDisabled = true)('Cras justo odio'),
+    ListGroupItem()('Dapibus ac facilisis in'),
+    ListGroupItem()('Morbi leo risus'),
+    ListGroupItem()('Porta ac consectetur ac'),
+    ListGroupItem()('Vestibulum at eros')
+  );
+
+
+
+
+
+
+

docs/_includes/component-demo-code-ex/list-group-header.dart.html

@@ -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.'
+    )
+  );

docs/_includes/component-demo-code-ex/list-group-tags.dart.html

@@ -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'
+    )
+  );

docs/_includes/component-demo-code-ex/list_group.dart.html

@@ -0,0 +1,49 @@
+part of over_react.web.demo_components;
+
+/// Bootstrap's `ListGroup` component is flexible and powerful for
+/// displaying lists of [ListGroupItem] components.
+///
+/// See: <http://v4-alpha.getbootstrap.com/components/list-group/>
+@Factory()
+UiFactory<ListGroupProps> ListGroup;
+
+@Props()
+class ListGroupProps extends UiProps {
+  /// The HTML element type for the [ListGroup], specifying its
+  /// DOM representation when rendered.
+  ///
+  /// Default: [ListGroupElementType.DIV]
+  ListGroupElementType elementType;
+}
+
+@Component()
+class ListGroupComponent extends UiComponent<ListGroupProps> {
+  @override
+  Map getDefaultProps() => (newProps()
+    ..elementType = ListGroupElementType.DIV
+  );
+
+  @override
+  render() {
+    var classes = forwardingClassNameBuilder()
+      ..add('list-group');
+
+    return (props.elementType.componentBuilderFactory()
+      ..addProps(copyUnconsumedDomProps())
+      ..className = classes.toClassName()
+    )(props.children);
+  }
+}
+
+/// Options for the [Element] that will be used when
+/// rendering a [ListGroup] component.
+class ListGroupElementType {
+  final BuilderOnlyUiFactory<DomProps> componentBuilderFactory;
+  ListGroupElementType._internal(this.componentBuilderFactory);
+
+  /// A [Dom.ul] (HTML `<ul>` element)
+  static final ListGroupElementType UL  = new ListGroupElementType._internal(Dom.ul);
+
+  /// A [Dom.div] (HTML `<div>` element)
+  static final ListGroupElementType DIV = new ListGroupElementType._internal(Dom.div);
+}