Display material design policies grouped by tags.

chrome/browser/resources/md_policy/policy_group.js

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * 'policy-group' is an MD element, that contains a description of a group
+ * and all policies that are tagged with the groups name. Policies with multiple
+ * tags will appear in multiple groups.
+ *
+ * Example:
+ *
+ *   <policy-group></policy-group>
+ *
+ * By inserting an element as created with
+ *
+ *   new PolicyGroup('systemSecurity')
+ *
+ * into a document's DOM  would render a paper card  and set the title to the
+ * string with ID 'systemSecurity'. New Policies are added with |addPolicy|.
+ *
+ * @group Chrome Policy Elements
+ * @element policy-group
+ */
+PolicyGroup = Polymer({
+  is: 'policy-group',
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** Tag name used ID for card and title string. */
+    riskTag: {
+      type: String,
+      reflectToAttribute: true,
+    },
+
+    /** Translation string for the risk tag. */
+    translatedRiskTag: {
+      type: String,
+      readOnly: true,
+      computed: 'i18n(riskTag)'
+    },
+
+    /**
+     * Array containing all known policies.
+     * @type {!Array<Object<string>>}
+     * @private
+     */
+    policies_: {
+      type: Array,
+      value: function() { return []; }
+    }
+  },
+
+  /**
+   * Creates a new DOM element for the given policy.
+   * @param {string} policy Name of the policy.
+   */
+  addPolicy: function(policy) {
+    // TODO(fhorschig): Create policy paper-items with possibility to (un)fold.
+    this.push('policies_', {key: policy});
+  }
+});