diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6
index b5fa4460eaf..3c71339b786 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6
@@ -1,4 +1,10 @@
export default Ember.Component.extend({
tagName: "section",
classNames: ["styleguide-example"],
+ value: null,
+
+ init() {
+ this._super(...arguments);
+ this.value = this.initialValue;
+ },
});
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
index a11836c7a39..ab2be7eb7d8 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
@@ -1,21 +1,20 @@
-import { later } from "@ember/runloop";
+import { afterRender } from "discourse-common/utils/decorators";
export default Ember.Component.extend({
tagName: "section",
classNames: ["styleguide-icons"],
- iconIDs: [],
+ iconIds: [],
- didInsertElement() {
+ init() {
this._super(...arguments);
+ this.setIconIds();
+ },
- later(() => {
- let IDs = $("#svg-sprites symbol")
- .map(function () {
- return this.id;
- })
- .get();
+ @afterRender
+ setIconIds() {
+ let symbols = document.querySelectorAll("#svg-sprites symbol");
+ let ids = Array.from(symbols).mapBy("id");
- this.set("iconIDs", IDs);
- }, 2000);
+ this.set("iconIds", ids);
},
});
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6 b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
index f334cdbbda9..c036e4c3668 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
@@ -1,4 +1,3 @@
-import EmberObject from "@ember/object";
import NavItem from "discourse/models/nav-item";
let topicId = 2000000;
@@ -48,7 +47,7 @@ export function createData(store) {
website_name: "My Website is Discourse",
location: "Toronto",
suspend_reason: "Some reason",
- displayGroups: [{ name: "Group 1" }, { name: "Group 2" }],
+ groups: [{ name: "Group 1" }, { name: "Group 2" }],
created_at: moment().subtract(10, "days"),
last_posted_at: moment().subtract(3, "days"),
last_seen_at: moment().subtract(1, "days"),
@@ -56,7 +55,7 @@ export function createData(store) {
invited_by: {
username: "user_2",
},
- trustLevel: { name: "Dummy" },
+ trust_level: 1,
publicUserFields: [
{
field: {
@@ -94,13 +93,13 @@ export function createData(store) {
{
id: topicId,
title: `Example Topic Title ${topicId}`,
- fancyTitle: `Example Topic Title ${topicId}`,
+ fancy_title: `Example Topic Title ${topicId}`,
slug: `example-topic-title-${topicId}`,
posts_count: ((topicId * 1234) % 100) + 1,
views: ((topicId * 123) % 1000) + 1,
like_count: topicId % 3,
created_at: `2017-03-${topicId}`,
- invisible: false,
+ visible: true,
posters: [
{ extras: "latest", user },
{ user: createUser() },
@@ -115,25 +114,25 @@ export function createData(store) {
};
let topic = createTopic({ tags: ["example", "apple"] });
+ topic.details.updateFromJson({
+ can_create_post: true,
+ can_invite_to: false,
+ can_delete: false,
+ can_close_topic: false,
+ });
topic.setProperties({
- details: EmberObject.create({
- can_create_post: true,
- can_invite_to: false,
- can_delete: false,
- can_close_topic: false,
- }),
- category: categories[0],
+ category_id: categories[0].id,
suggested_topics: [topic, topic, topic],
});
- let invisibleTopic = createTopic({ invisible: true });
+ let invisibleTopic = createTopic({ visible: false });
let closedTopic = createTopic({ closed: true });
- closedTopic.set("category", categories[1]);
+ closedTopic.set("category_id", categories[1].id);
let archivedTopic = createTopic({ archived: true });
let pinnedTopic = createTopic({ pinned: true });
pinnedTopic.set("clearPin", () => pinnedTopic.set("pinned", "unpinned"));
pinnedTopic.set("rePin", () => pinnedTopic.set("pinned", "pinned"));
- pinnedTopic.set("category", categories[2]);
+ pinnedTopic.set("category_id", categories[2].id);
let unpinnedTopic = createTopic({ unpinned: true });
let warningTopic = createTopic({ is_warning: true });
@@ -220,7 +219,7 @@ export function createData(store) {
navItems: ["latest", "categories", "top"].map((name) => {
let item = NavItem.fromText(name);
- item.set("href", "#");
+ // item.set("href", "#");
if (name === "categories") {
item.set("styleGuideActive", true);
@@ -256,8 +255,6 @@ export function createData(store) {
topicTimerUpdateDate: "2017-10-18 18:00",
- categoryNames: categories.map((c) => c.name),
-
groups: [
{ name: "staff", id: 1, automatic: false },
{ name: "lounge", id: 2, automatic: true },
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs
index 9a98389ca39..193911014cd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs
@@ -1,3 +1,3 @@
{{title}}
-
+
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs
index 996790bb484..4b0bf42fab7 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs
@@ -1,6 +1,6 @@
-{{#each iconIDs as |id|}}
+{{#each iconIds as |id|}}
- {{ d-icon id }}
+ {{d-icon id}}
{{id}}
{{/each}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
index 15508cddf6b..0089e62841b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
@@ -1,35 +1,29 @@
-{{#styleguide-example title="combo-box"}}
- {{combo-box content=dummy.options}}
+{{#styleguide-example title="combo-box" initialValue=dummy.options.[0].name as |value|}}
+ {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
{{/styleguide-example}}
-{{#styleguide-example title="filterable combo-box"}}
- {{combo-box content=dummy.categoryNames filterable=true}}
+{{#styleguide-example title="filterable combo-box" initialValue=dummy.categories.[0].name as |value|}}
+ {{combo-box content=dummy.categories value=value options=(hash filterable=true) onChange=(fn (mut value))}}
{{/styleguide-example}}
-{{#styleguide-example title="combo-box with a default state"}}
- {{combo-box content=dummy.options none="category.none"}}
+{{#styleguide-example title="combo-box with a default state" initialValue=dummy.options.[0].name as |value|}}
+ {{combo-box content=dummy.options value=value options=(hash none="category.none") onChange=(fn (mut value))}}
{{/styleguide-example}}
-{{#styleguide-example title="combo-box clearable"}}
- {{combo-box content=dummy.options none="category.none" clearable=true}}
+{{#styleguide-example title="combo-box clearable" initialValue=dummy.options.[0].name as |value|}}
+ {{combo-box content=dummy.options clearable=true value=value options=(hash none="category.none") onChange=(fn (mut value))}}
{{/styleguide-example}}
-{{#styleguide-example title="topic-notifications-options"}}
- {{topic-notifications-options topic=dummy.topic}}
-{{/styleguide-example}}
-
-{{#styleguide-example title="topic-notifications-button"}}
-
+{{#styleguide-example title="topic-notifications-options" initialValue=1 as |value|}}
+ {{topic-notifications-options topic=dummy.topic value=value onChange=(fn (mut value))}}
{{/styleguide-example}}
{{#styleguide-example title="topic-footer-mobile-dropdown"}}
{{topic-footer-mobile-dropdown topic=dummy.topic}}
{{/styleguide-example}}
-{{#styleguide-example title="category-chooser"}}
- {{category-chooser}}
+{{#styleguide-example title="category-chooser" initialValue=categories.[0].name as |value|}}
+ {{category-chooser value=value onChange=(fn (mut value))}}
{{/styleguide-example}}
{{#styleguide-example title="pinned-button"}}
@@ -41,19 +35,19 @@
{{/styleguide-example}}
{{#styleguide-example title="categories-admin-dropdown"}}
- {{categories-admin-dropdown}}
+ {{categories-admin-dropdown onChange=(action "dummy")}}
{{/styleguide-example}}
{{#styleguide-example title="category-notifications-button"}}
- {{category-notifications-button category=dummy.categories.[0]}}
+ {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
{{/styleguide-example}}
{{#styleguide-example title="notifications-button"}}
- {{notifications-button i18nPrefix="groups.notifications" value=1}}
+ {{notifications-button options=(hash i18nPrefix="groups.notifications") value=2 onChange=(action "dummy")}}
{{/styleguide-example}}
{{#styleguide-example title="dropdown-select-box"}}
- {{dropdown-select-box content=dummy.options}}
+ {{dropdown-select-box content=dummy.options onChange=(action "dummy")}}
{{/styleguide-example}}
{{#styleguide-example title="future-date-input-selector"}}
@@ -63,22 +57,22 @@
input=dummy.topicTimerUpdateDate
includeWeekend=true
includeForever=true
- none="topic.auto_update_input.none"
+ options=(hash none="topic.auto_update_input.none")
}}
{{/styleguide-example}}
{{#styleguide-example title="multi-select"}}
- {{multi-select none="test.none" content=dummy.options}}
+ {{multi-select content=dummy.options options=(hash none="test.none") onChange=(action "dummy")}}
{{/styleguide-example}}
-{{#styleguide-example title="admin-group-selector"}}
- {{admin-group-selector selected=dummy.selectedGroups content=dummy.groups}}
+{{#styleguide-example title="admin group-chooser"}}
+ {{group-chooser selected=dummy.selectedGroups content=dummy.groups onChange=(action "dummy")}}
{{/styleguide-example}}
{{#styleguide-example title="list-setting"}}
- {{list-setting settingValue=dummy.settings}}
+ {{list-setting settingValue=dummy.settings onChange=(action "dummy")}}
{{/styleguide-example}}
{{#styleguide-example title="list-setting with colors"}}
- {{list-setting settingValue=dummy.colors nameProperty="color"}}
+ {{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}}
{{/styleguide-example}}
diff --git a/plugins/styleguide/assets/stylesheets/styleguide.scss b/plugins/styleguide/assets/stylesheets/styleguide.scss
index 942a1d9496a..44c98340423 100644
--- a/plugins/styleguide/assets/stylesheets/styleguide.scss
+++ b/plugins/styleguide/assets/stylesheets/styleguide.scss
@@ -11,11 +11,13 @@
}
.styleguide-menu {
+ margin-top: 1em;
flex: 1 0 0;
ul {
list-style: none;
- margin-bottom: 2em;
+ margin-bottom: 1.5em;
+ margin-left: 0;
li.styleguide-heading {
color: var(--primary-medium, $primary-medium);
@@ -45,9 +47,9 @@
.styleguide-section {
.section-title {
- font-size: $font-up-6;
+ font-size: $font-up-5;
font-weight: normal;
- margin-bottom: 1em;
+ margin-bottom: 0.5em;
}
.section-description {
@@ -65,14 +67,15 @@
.styleguide-example {
.example-title {
color: var(--primary-medium, $primary-medium);
- font-size: 0.8em;
+ font-size: $font-0;
border-bottom: 1px solid var(--primary-low, $primary-low);
- margin-bottom: 0.8em;
+ margin-bottom: 1em;
}
.rendered {
width: 100%;
}
+
margin-bottom: 2em;
}
}