diff --git a/ui/app/components/freestyle/sg-accordion.js b/ui/app/components/freestyle/sg-accordion.js
new file mode 100644
index 000000000..84f7a7360
--- /dev/null
+++ b/ui/app/components/freestyle/sg-accordion.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import productMetadata from 'nomad-ui/utils/styleguide/product-metadata';
+
+export default Component.extend({
+ products: productMetadata,
+});
diff --git a/ui/app/components/freestyle/sg-table.js b/ui/app/components/freestyle/sg-table.js
index 29c1020b1..da8112e19 100644
--- a/ui/app/components/freestyle/sg-table.js
+++ b/ui/app/components/freestyle/sg-table.js
@@ -1,5 +1,6 @@
import Component from '@ember/component';
import { computed } from '@ember/object';
+import productMetadata from 'nomad-ui/utils/styleguide/product-metadata';
export default Component.extend({
searchTerm: '',
@@ -8,49 +9,7 @@ export default Component.extend({
sortProperty: 'name',
sortDescending: false,
- shortList: [
- {
- name: 'Nomad',
- lang: 'golang',
- desc:
- 'Nomad is a flexible, enterprise-grade cluster scheduler designed to easily integrate into existing workflows. Nomad can run a diverse workload of micro-service, batch, containerized and non-containerized applications.',
- link: 'https://www.nomadproject.io/',
- },
- {
- name: 'Terraform',
- lang: 'golang',
- desc:
- 'Terraform is a tool for building, changing, and combining infrastructure safely and efficiently.',
- link: 'https://www.terraform.io/',
- },
- {
- name: 'Vault',
- lang: 'golang',
- desc:
- 'A tool for secrets management, encryption as a service, and privileged access management',
- link: 'https://www.vaultproject.io/',
- },
- {
- name: 'Consul',
- lang: 'golang',
- desc:
- 'Consul is a distributed, highly available, and data center aware solution to connect and configure applications across dynamic, distributed infrastructure.',
- link: 'https://www.consul.io/',
- },
- {
- name: 'Vagrant',
- lang: 'ruby',
- desc: 'Vagrant is a tool for building and distributing development environments.',
- link: 'https://www.vagrantup.com/',
- },
- {
- name: 'Packer',
- lang: 'golang',
- desc:
- 'Packer is a tool for creating identical machine images for multiple platforms from a single source configuration.',
- link: 'https://www.packer.io/',
- },
- ],
+ shortList: productMetadata,
longList: [
{ city: 'New York', growth: 0.048, population: '8405837', rank: '1', state: 'New York' },
diff --git a/ui/app/templates/components/freestyle/sg-accordion.hbs b/ui/app/templates/components/freestyle/sg-accordion.hbs
new file mode 100644
index 000000000..13975dec9
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-accordion.hbs
@@ -0,0 +1,53 @@
+{{#freestyle-usage "accordion" title="Accordion"}}
+ {{#list-accordion source=products key="name" as |a|}}
+ {{#a.head buttonLabel="details"}}
+
+
{{a.item.name}}
+
+ {{a.item.lang}}
+
+
{{a.item.name}}
+ {{a.item.desc}}
+ Learn more...
+ {{/a.body}}
+ {{/list-accordion}}
+{{/freestyle-usage}}
+
+{{#freestyle-usage "accordion-single" title="Accordion, One Item"}}
+ {{#list-accordion source=(take 1 products) key="name" as |a|}}
+ {{#a.head buttonLabel="details"}}
+
+
{{a.item.name}}
+
+ {{a.item.lang}}
+
+
{{a.item.name}}
+ {{a.item.desc}}
+ Learn more...
+ {{/a.body}}
+ {{/list-accordion}}
+{{/freestyle-usage}}
+
+{{#freestyle-usage "accordion-not-expandable" title="Accordion, Not Expandable"}}
+ {{#list-accordion source=products key="name" as |a|}}
+ {{#a.head buttonLabel="details" isExpandable=(eq a.item.lang "golang")}}
+
+
{{a.item.name}}
+
+ {{a.item.lang}}
+
+
{{a.item.name}}
+ {{a.item.desc}}
+ Learn more...
+ {{/a.body}}
+ {{/list-accordion}}
+{{/freestyle-usage}}
diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs
index 83994e179..32aca2b64 100644
--- a/ui/app/templates/freestyle.hbs
+++ b/ui/app/templates/freestyle.hbs
@@ -16,6 +16,7 @@
{{#freestyle-section name="Components" as |section|}}
{{#section.subsection name="Accordion"}}
+ {{freestyle/sg-accordion}}
{{/section.subsection}}
{{#section.subsection name="Alert"}}
diff --git a/ui/app/utils/styleguide/product-metadata.js b/ui/app/utils/styleguide/product-metadata.js
new file mode 100644
index 000000000..37031d155
--- /dev/null
+++ b/ui/app/utils/styleguide/product-metadata.js
@@ -0,0 +1,43 @@
+export default [
+ {
+ name: 'Nomad',
+ lang: 'golang',
+ desc:
+ 'Nomad is a flexible, enterprise-grade cluster scheduler designed to easily integrate into existing workflows. Nomad can run a diverse workload of micro-service, batch, containerized and non-containerized applications.',
+ link: 'https://www.nomadproject.io/',
+ },
+ {
+ name: 'Terraform',
+ lang: 'golang',
+ desc:
+ 'Terraform is a tool for building, changing, and combining infrastructure safely and efficiently.',
+ link: 'https://www.terraform.io/',
+ },
+ {
+ name: 'Vault',
+ lang: 'golang',
+ desc:
+ 'A tool for secrets management, encryption as a service, and privileged access management',
+ link: 'https://www.vaultproject.io/',
+ },
+ {
+ name: 'Consul',
+ lang: 'golang',
+ desc:
+ 'Consul is a distributed, highly available, and data center aware solution to connect and configure applications across dynamic, distributed infrastructure.',
+ link: 'https://www.consul.io/',
+ },
+ {
+ name: 'Vagrant',
+ lang: 'ruby',
+ desc: 'Vagrant is a tool for building and distributing development environments.',
+ link: 'https://www.vagrantup.com/',
+ },
+ {
+ name: 'Packer',
+ lang: 'golang',
+ desc:
+ 'Packer is a tool for creating identical machine images for multiple platforms from a single source configuration.',
+ link: 'https://www.packer.io/',
+ },
+];