diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs
similarity index 78%
rename from plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs
rename to plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs
index 2c4cdad51ad..6c6f1b75217 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs
@@ -4,11 +4,12 @@
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.hbs
similarity index 57%
rename from plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
rename to plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.hbs
index 901338bfe27..7ed102ae577 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.hbs
@@ -1,3 +1,3 @@
-
+
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.hbs
new file mode 100644
index 00000000000..f28074719ac
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.hbs
@@ -0,0 +1,403 @@
+
+
+
+
+
+
+
+ {{bound-avatar @dummy.user "huge"}}
+
+
+
+
+ {{@dummy.user.username}}
+ {{d-icon "shield-alt"}}
+
+ {{@dummy.user.name}}
+ {{@dummy.user.title}}
+
+
+
+
+
+
+
+
+
+
+
+ {{bound-avatar @dummy.user "huge"}}
+
+
+
+
+ {{@dummy.user.username}}
+ {{d-icon "shield-alt"}}
+
+ {{@dummy.user.name}}
+ {{@dummy.user.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{@dummy.user.number_of_flags_given}}
+ {{i18n "user.staff_counters.flags_given"}}
+
+
+
+
+
+ {{@dummy.user.number_of_suspensions}}
+ {{i18n "user.staff_counters.suspensions"}}
+
+
+
+ {{@dummy.user.warnings_received_count}}
+ {{i18n "user.staff_counters.warnings_received"}}
+
+
+
+ {{bound-avatar @dummy.user "huge"}}
+
+
+
+
+ {{@dummy.user.username}}
+ {{d-icon "shield-alt"}}
+
+
{{@dummy.user.name}}
+
{{@dummy.user.title}}
+
+ {{d-icon "map-marker-alt"}}
+ {{@dummy.user.location}}
+ {{d-icon "globe"}}
+
+ {{@dummy.user.website_name}}
+
+
+
+
+
+ {{d-icon "ban"}}
+
+ {{i18n
+ "user.suspended_notice"
+ date=@dummy.user.suspendedTillDate
+ }}
+
+
+ {{i18n "user.suspended_reason"}}
+ {{@dummy.user.suspend_reason}}
+
+ {{html-safe @dummy.user.bio_cooked}}
+
+
+
+ {{#each @dummy.user.publicUserFields as |uf|}}
+ {{#if uf.value}}
+
+ {{uf.field.name}}
+ :
+ {{uf.value}}
+
+
+ {{/if}}
+ {{/each}}
+
+
+
+
+
+
+ - {{i18n "user.created"}}
+ - {{bound-date @dummy.user.created_at}}
+ - {{i18n "user.last_posted"}}
+ - {{bound-date @dummy.user.last_posted_at}}
+ - {{i18n "user.last_seen"}}
+ - {{bound-date @dummy.user.last_seen_at}}
+ - {{i18n "views"}}
+ - {{@dummy.user.profile_view_count}}
+ - {{i18n "user.invited_by"}}
+ -
+ {{@dummy.user.invited_by.username}}
+
+ - {{i18n "user.trust_level"}}
+ - {{@dummy.user.trustLevel.name}}
+ - {{i18n "user.email.title"}}
+ -
+
+
+ -
+ {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
+
+ -
+ {{#each @dummy.user.displayGroups as |group|}}
+
+ {{group.name}}
+
+ {{/each}}
+
+
+
+
+
+
+
+
+
+
+
+ {{@dummy.user.number_of_flags_given}}
+ {{i18n "user.staff_counters.flags_given"}}
+
+
+
+
+
+ {{@dummy.user.number_of_suspensions}}
+ {{i18n "user.staff_counters.suspensions"}}
+
+
+
+ {{@dummy.user.warnings_received_count}}
+ {{i18n "user.staff_counters.warnings_received"}}
+
+
+
+ {{bound-avatar @dummy.user "huge"}}
+
+
+
+
+ {{@dummy.user.username}}
+ {{d-icon "shield-alt"}}
+
+
{{@dummy.user.name}}
+
{{@dummy.user.title}}
+
+ {{d-icon "map-marker-alt"}}
+ {{@dummy.user.location}}
+ {{d-icon "globe"}}
+
+ {{@dummy.user.website_name}}
+
+
+
+
+
+ {{d-icon "ban"}}
+
+ {{i18n
+ "user.suspended_notice"
+ date=@dummy.user.suspendedTillDate
+ }}
+
+
+ {{i18n "user.suspended_reason"}}
+ {{@dummy.user.suspend_reason}}
+
+ {{html-safe @dummy.user.bio_cooked}}
+
+
+
+ {{#each @dummy.user.publicUserFields as |uf|}}
+ {{#if uf.value}}
+
+ {{uf.field.name}}:
+ {{uf.value}}
+
+ {{/if}}
+ {{/each}}
+
+
+
+
+
+
+ - {{i18n "user.created"}}
+ - {{bound-date @dummy.user.created_at}}
+ - {{i18n "user.last_posted"}}
+ - {{bound-date @dummy.user.last_posted_at}}
+ - {{i18n "user.last_seen"}}
+ - {{bound-date @dummy.user.last_seen_at}}
+ - {{i18n "views"}}
+ - {{@dummy.user.profile_view_count}}
+ - {{i18n "user.invited_by"}}
+ -
+ {{@dummy.user.invited_by.username}}
+
+ - {{i18n "user.trust_level"}}
+ - {{@dummy.user.trustLevel.name}}
+ - {{i18n "user.email.title"}}
+ -
+
+
+ -
+ {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
+
+ -
+ {{#each @dummy.user.displayGroups as |group|}}
+
+ {{group.name}}
+
+ {{/each}}
+
+
+
+
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.hbs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.hbs
new file mode 100644
index 00000000000..25f0cd276af
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.hbs
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
index a01de1ca449..551b6d69036 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
@@ -1,12 +1,11 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
-export default Component.extend({
- tagName: "section",
- classNames: ["styleguide-example"],
- value: null,
+export default class StyleguideExample extends Component {
+ @tracked value = null;
- init() {
- this._super(...arguments);
- this.value = this.initialValue;
- },
-});
+ constructor() {
+ super(...arguments);
+ this.value = this.args.initialValue;
+ }
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.hbs
similarity index 100%
rename from plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs
rename to plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.hbs
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.hbs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.hbs
new file mode 100644
index 00000000000..2ac1c204bb3
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.hbs
@@ -0,0 +1,6 @@
+
+ {{section-title @section.id}}
+
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js
deleted file mode 100644
index 44494409ab5..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({
- tagName: "",
-});
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-section.hbs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.hbs
similarity index 100%
rename from plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-section.hbs
rename to plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.hbs
diff --git a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
index ac5d206d4fe..bedefb4deae 100644
--- a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
+++ b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
@@ -1,7 +1,7 @@
import Controller from "@ember/controller";
+import { action } from "@ember/object";
-export default Controller.extend({
- actions: {
- dummy() {},
- },
-});
+export default class StyleguideShow extends Controller {
+ @action
+ dummyAction() {}
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
index 1626769068c..30d43970834 100644
--- a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
+++ b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
@@ -1,5 +1,5 @@
import Controller from "@ember/controller";
-export default Controller.extend({
- sections: null,
-});
+export default class Styleguide extends Controller {
+ sections = null;
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
index 1416d0b7951..f1f2260c554 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
@@ -98,7 +98,7 @@ export function createData(store) {
posts_count: ((topicId * 1234) % 100) + 1,
views: ((topicId * 123) % 1000) + 1,
like_count: topicId % 3,
- created_at: `2017-03-${topicId}`,
+ created_at: `2017-03-${topicId % 30}T12:30:00.000Z`,
visible: true,
posters: [
{ extras: "latest", user },
@@ -157,9 +157,9 @@ export function createData(store) {
id: 1234,
cooked,
created_at: moment().subtract(3, "days"),
- user_id: user.get("id"),
- username: user.get("username"),
- avatar_template: user.get("avatar_template"),
+ user_id: user.id,
+ username: user.username,
+ avatar_template: user.avatar_template,
showLike: true,
canToggleLike: true,
canFlag: true,
@@ -168,10 +168,10 @@ export function createData(store) {
canBookmark: true,
canManage: true,
canDelete: true,
- createdByUsername: user.get("username"),
- createdByAvatarTemplate: user.get("avatar_template"),
- lastPostUsername: user.get("username"),
- lastPostAvatarTemplate: user.get("avatar_template"),
+ createdByUsername: user.username,
+ createdByAvatarTemplate: user.avatar_template,
+ lastPostUsername: user.username,
+ lastPostAvatarTemplate: user.avatar_template,
topicReplyCount: 123,
topicViews: 3456,
participantCount: 10,
@@ -179,6 +179,7 @@ export function createData(store) {
topicLinkLength: 5,
topicPostsCount: 4,
participants: [createUser(), createUser(), createUser(), createUser()],
+ post_number: 1,
topicLinks: [
{
title: "Evil Trout",
@@ -195,6 +196,11 @@ export function createData(store) {
],
};
+ const postModel = store.createRecord("post", {
+ ...transformedPost,
+ topic: createTopic(),
+ });
+
_data = {
options: [
{ id: 1, name: "Orange" },
@@ -246,6 +252,7 @@ export function createData(store) {
soon: moment().add(2, "days"),
transformedPost,
+ postModel,
user,
@@ -271,6 +278,8 @@ export function createData(store) {
settings: "bold|italic|strike|underline",
colors: "f49|c89|564897",
+
+ charCounterContent: "",
};
return _data;
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js
index aac2b772ef5..7239cf85326 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js
@@ -1,10 +1,113 @@
-import DiscourseTemplateMap from "discourse-common/lib/discourse-template-map";
+import typography from "../components/sections/atoms/00-typography";
+import fontScale from "../components/sections/atoms/01-font-scale";
+import buttons from "../components/sections/atoms/02-buttons";
+import colors from "../components/sections/atoms/03-colors";
+import icons from "../components/sections/atoms/04-icons";
+import inputFields from "../components/sections/atoms/05-input-fields";
+import spinners from "../components/sections/atoms/06-spinners";
+import dateTimeInputs from "../components/sections/atoms/date-time-inputs";
+import dropdowns from "../components/sections/atoms/dropdowns";
+import topicLink from "../components/sections/atoms/topic-link";
+import topicStatuses from "../components/sections/atoms/topic-statuses";
+import breadCrumbs from "../components/sections/molecules/bread-crumbs";
+import categories from "../components/sections/molecules/categories";
+import charCounter from "../components/sections/molecules/char-counter";
+import emptyState from "../components/sections/molecules/empty-state";
+import footerMessage from "../components/sections/molecules/footer-message";
+import headerIcons from "../components/sections/molecules/header-icons";
+import navigationBar from "../components/sections/molecules/navigation-bar";
+import navigationStacked from "../components/sections/molecules/navigation-stacked";
+import postMenu from "../components/sections/molecules/post-menu";
+import richTooltip from "../components/sections/molecules/rich-tooltip";
+import signupCta from "../components/sections/molecules/signup-cta";
+import topicListItem from "../components/sections/molecules/topic-list-item";
+import topicNotifications from "../components/sections/molecules/topic-notifications";
+import topicTimerInfo from "../components/sections/molecules/topic-timer-info";
+import post from "../components/sections/organisms/00-post";
+import topicMap from "../components/sections/organisms/01-topic-map";
+import topicFooterButtons from "../components/sections/organisms/03-topic-footer-buttons";
+import topicList from "../components/sections/organisms/04-topic-list";
+import basicTopicList from "../components/sections/organisms/basic-topic-list";
+import categoriesList from "../components/sections/organisms/categories-list";
+import modal from "../components/sections/organisms/modal";
+import navigation from "../components/sections/organisms/navigation";
+import siteHeader from "../components/sections/organisms/site-header";
+import suggestedTopics from "../components/sections/organisms/suggested-topics";
+import userAbout from "../components/sections/organisms/user-about";
+
let _allCategories = null;
let _sectionsById = {};
-let _notes = {};
export const CATEGORIES = ["atoms", "molecules", "organisms"];
+const SECTIONS = [
+ { component: typography, category: "atoms", id: "typography", priority: 0 },
+ { component: fontScale, category: "atoms", id: "font-scale", priority: 1 },
+ { component: buttons, category: "atoms", id: "buttons", priority: 2 },
+ { component: colors, category: "atoms", id: "colors", priority: 3 },
+ { component: icons, category: "atoms", id: "icons", priority: 4 },
+ {
+ component: inputFields,
+ category: "atoms",
+ id: "input-fields",
+ priority: 5,
+ },
+ { component: spinners, category: "atoms", id: "spinners", priority: 6 },
+ { component: dateTimeInputs, category: "atoms", id: "date-time-inputs" },
+ { component: dropdowns, category: "atoms", id: "dropdowns" },
+ { component: topicLink, category: "atoms", id: "topic-link" },
+ { component: topicStatuses, category: "atoms", id: "topic-statuses" },
+ { component: breadCrumbs, category: "molecules", id: "bread-crumbs" },
+ { component: categories, category: "molecules", id: "categories" },
+ { component: charCounter, category: "molecules", id: "char-counter" },
+ { component: emptyState, category: "molecules", id: "empty-state" },
+ { component: footerMessage, category: "molecules", id: "footer-message" },
+ { component: headerIcons, category: "molecules", id: "header-icons" },
+ { component: navigationBar, category: "molecules", id: "navigation-bar" },
+ {
+ component: navigationStacked,
+ category: "molecules",
+ id: "navigation-stacked",
+ },
+ { component: postMenu, category: "molecules", id: "post-menu" },
+ { component: richTooltip, category: "molecules", id: "rich-tooltip" },
+ { component: signupCta, category: "molecules", id: "signup-cta" },
+ { component: topicListItem, category: "molecules", id: "topic-list-item" },
+ {
+ component: topicNotifications,
+ category: "molecules",
+ id: "topic-notifications",
+ },
+ { component: topicTimerInfo, category: "molecules", id: "topic-timer-info" },
+ { component: post, category: "organisms", id: "post", priority: 0 },
+ { component: topicMap, category: "organisms", id: "topic-map", priority: 1 },
+ {
+ component: topicFooterButtons,
+ category: "organisms",
+ id: "topic-footer-buttons",
+ priority: 3,
+ },
+ {
+ component: topicList,
+ category: "organisms",
+ id: "topic-list",
+ priority: 4,
+ },
+ { component: basicTopicList, category: "organisms", id: "basic-topic-list" },
+ { component: categoriesList, category: "organisms", id: "categories-list" },
+ { component: modal, category: "organisms", id: "modal" },
+ { component: navigation, category: "organisms", id: "navigation" },
+ { component: siteHeader, category: "organisms", id: "site-header" },
+ { component: suggestedTopics, category: "organisms", id: "suggested-topics" },
+ { component: userAbout, category: "organisms", id: "user-about" },
+];
+
+export function addSection(section) {
+ if (!SECTIONS.some((s) => s.id === section.id)) {
+ SECTIONS.push(section);
+ }
+}
+
export function sectionById(id) {
// prime cache
allCategories();
@@ -13,11 +116,13 @@ export function sectionById(id) {
}
function sortSections(a, b) {
- let result = a.priority - b.priority;
- if (result === 0) {
- return a.id < b.id ? -1 : 1;
+ const result = a.priority - b.priority;
+
+ if (result !== 0) {
+ return result;
}
- return result;
+
+ return a.id < b.id ? -1 : 1;
}
export function allCategories() {
@@ -25,50 +130,26 @@ export function allCategories() {
return _allCategories;
}
- let categories = {};
+ for (const section of SECTIONS) {
+ section.priority ??= 100;
- let paths = CATEGORIES.join("|");
+ categories[section.category] ||= [];
+ categories[section.category].push(section);
- // Find a list of sections based on what templates are available
- // eslint-disable-next-line no-undef
- DiscourseTemplateMap.keys().forEach((e) => {
- let regexp = new RegExp(`styleguide\/(${paths})\/(\\d+)?\\-?([^\\/]+)$`);
- let matches = e.match(regexp);
- if (matches) {
- let section = {
- id: matches[3],
- priority: parseInt(matches[2] || "100", 10),
- category: matches[1],
- templateName: e.replace(/^.*styleguide\//, ""),
- };
- if (!categories[section.category]) {
- categories[section.category] = [];
- }
- categories[section.category].push(section);
- _sectionsById[section.id] = section;
- }
-
- // Look for notes
- regexp = new RegExp(`components\/notes\/(\\d+)?\\-?([^\\/]+)$`);
- matches = e.match(regexp);
- if (matches) {
- _notes[matches[2]] = e.replace(/^.*notes\//, "");
- }
- });
+ _sectionsById[section.id] = section;
+ }
_allCategories = [];
- CATEGORIES.forEach((c) => {
- let sections = categories[c];
+ for (const category of CATEGORIES) {
+ const sections = categories[category];
+
if (sections) {
_allCategories.push({
- id: c,
+ id: category,
sections: sections.sort(sortSections),
});
}
- });
+ }
+
return _allCategories;
}
-
-export function findNote(section) {
- return _notes[section.id];
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/pre-initializers/styleguide-plugin-api.js b/plugins/styleguide/assets/javascripts/discourse/pre-initializers/styleguide-plugin-api.js
new file mode 100644
index 00000000000..3873ab5e961
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/pre-initializers/styleguide-plugin-api.js
@@ -0,0 +1,42 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { addSection } from "../lib/styleguide";
+
+/**
+ * Add a section to the styleguide
+ *
+ * @function addStyleguideSection
+ * @param {Object} section
+ * @param {Component} section.component
+ * @param {string} options.id
+ * @param {string} options.category
+ * @param {number} [options.priority]
+ * @example
+ *
+ * import fidget from "../components/styleguide/molecules/fidget";
+ *
+ * api.addStyleguideSection({
+ * component: fidget,
+ * id: "fidget",
+ * category: "molecules",
+ * priority: 0,
+ * });
+ */
+
+export default {
+ name: "styleguide-plugin-api",
+ before: "inject-discourse-objects",
+
+ initialize() {
+ withPluginApi("1.2.0", (api) => {
+ const apiPrototype = Object.getPrototypeOf(api);
+
+ if (!apiPrototype.hasOwnProperty("addStyleguideSection")) {
+ Object.defineProperty(apiPrototype, "addStyleguideSection", {
+ value(section) {
+ addSection(section);
+ },
+ });
+ }
+ });
+ },
+};
diff --git a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
index 04ef4ba03d2..ad1d00f4185 100644
--- a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
+++ b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
@@ -1,29 +1,16 @@
import Route from "@ember/routing/route";
-import {
- findNote,
- sectionById,
-} from "discourse/plugins/styleguide/discourse/lib/styleguide";
+import { sectionById } from "discourse/plugins/styleguide/discourse/lib/styleguide";
import { createData } from "discourse/plugins/styleguide/discourse/lib/dummy-data";
-export default Route.extend({
+export default class StyleguideShow extends Route {
model(params) {
return sectionById(params.section);
- },
+ }
setupController(controller, section) {
- let note = findNote(section);
-
controller.setProperties({
section,
- note,
dummy: createData(this.store),
});
- },
-
- renderTemplate(controller, section) {
- this.render("styleguide.show");
- this.render(`styleguide/${section.templateName}`, {
- into: "styleguide.show",
- });
- },
-});
+ }
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
index c1962576f38..cdbd22d54bb 100644
--- a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
+++ b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
@@ -1,11 +1,12 @@
import Route from "@ember/routing/route";
import { allCategories } from "discourse/plugins/styleguide/discourse/lib/styleguide";
-export default Route.extend({
+
+export default class Styleguide extends Route {
model() {
return allCategories();
- },
+ }
setupController(controller, categories) {
controller.set("categories", categories);
- },
-});
+ }
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
deleted file mode 100644
index 6f7866b73c6..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
var(--{{this.color}})
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/notes/.keep b/plugins/styleguide/assets/javascripts/discourse/templates/components/notes/.keep
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs
deleted file mode 100644
index a5824bf64cc..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-
{{this.title}}
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs
deleted file mode 100644
index 07640eb94e9..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-
- {{section-title this.section.id}}
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
index 7e9b054a118..ee4dd54db9e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
@@ -1,17 +1,19 @@
+
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs
deleted file mode 100644
index c099c85df1c..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-{{#if this.siteSettings.tagging_enabled}}
-
-
-
-{{/if}}
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs
deleted file mode 100644
index d0089a21ea2..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
deleted file mode 100644
index 39ba76d543a..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
deleted file mode 100644
index b4849cdb7b5..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
-
-
- {{#each this.dummy.navItems as |ni|}}
- {{ni.displayName}}
- {{/each}}
-
-
-
-
-
-
-
-
-
- {{#each this.dummy.navItems as |ni|}}
- {{ni.displayName}}
- {{/each}}
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs
deleted file mode 100644
index 47fa184f2da..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
deleted file mode 100644
index 56ae94484b5..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs
deleted file mode 100644
index 6383c187018..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs
deleted file mode 100644
index 80e509f62ce..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs
deleted file mode 100644
index bbb294a2139..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs
+++ /dev/null
@@ -1,377 +0,0 @@
-
-
-
-
-
-
- {{bound-avatar this.dummy.user "huge"}}
-
-
-
-
{{this.dummy.user.username}}
- {{d-icon "shield-alt"}}
- {{this.dummy.user.name}}
- {{this.dummy.user.title}}
-
-
-
-
-
- {{bound-avatar this.dummy.user "huge"}}
-
-
-
-
{{this.dummy.user.username}}
- {{d-icon "shield-alt"}}
- {{this.dummy.user.name}}
- {{this.dummy.user.title}}
-
-
-
-
-
{{this.dummy.user.number_of_flags_given}} {{i18n
- "user.staff_counters.flags_given"
- }}
-
-
-
{{this.dummy.user.number_of_suspensions}} {{i18n
- "user.staff_counters.suspensions"
- }}
-
{{this.dummy.user.warnings_received_count}} {{i18n
- "user.staff_counters.warnings_received"
- }}
-
-
- {{bound-avatar this.dummy.user "huge"}}
-
-
-
-
{{this.dummy.user.username}}
- {{d-icon "shield-alt"}}
-
{{this.dummy.user.name}}
-
{{this.dummy.user.title}}
-
- {{d-icon "map-marker-alt"}}
- {{this.dummy.user.location}}
- {{d-icon "globe"}}
- {{this.dummy.user.website_name}}
-
-
-
-
- {{d-icon "ban"}}
- {{i18n
- "user.suspended_notice"
- date=this.dummy.user.suspendedTillDate
- }}
- {{i18n "user.suspended_reason"}}
- {{this.dummy.user.suspend_reason}}
-
- {{html-safe this.dummy.user.bio_cooked}}
-
-
-
- {{#each this.dummy.user.publicUserFields as |uf|}}
- {{#if uf.value}}
-
- {{uf.field.name}}:
- {{uf.value}}
-
- {{/if}}
- {{/each}}
-
-
-
-
-
-
- - {{i18n "user.created"}}
- {{bound-date
- this.dummy.user.created_at
- }}
- - {{i18n "user.last_posted"}}
- {{bound-date
- this.dummy.user.last_posted_at
- }}
- - {{i18n "user.last_seen"}}
- {{bound-date
- this.dummy.user.last_seen_at
- }}
- - {{i18n "views"}}
- {{this.dummy.user.profile_view_count}}
- - {{i18n "user.invited_by"}}
- {{this.dummy.user.invited_by.username}}
- - {{i18n "user.trust_level"}}
- {{this.dummy.user.trustLevel.name}}
- - {{i18n "user.email.title"}}
- -
-
-
- - {{i18n
- "groups.title"
- count=this.dummy.user.displayGroups.length
- }}
- -
- {{#each this.dummy.user.displayGroups as |group|}}
- {{group.name}}
- {{/each}}
-
-
-
-
-
{{this.dummy.user.number_of_flags_given}} {{i18n
- "user.staff_counters.flags_given"
- }}
-
-
-
{{this.dummy.user.number_of_suspensions}} {{i18n
- "user.staff_counters.suspensions"
- }}
-
{{this.dummy.user.warnings_received_count}} {{i18n
- "user.staff_counters.warnings_received"
- }}
-
-
- {{bound-avatar this.dummy.user "huge"}}
-
-
-
-
{{this.dummy.user.username}}
- {{d-icon "shield-alt"}}
-
{{this.dummy.user.name}}
-
{{this.dummy.user.title}}
-
- {{d-icon "map-marker-alt"}}
- {{this.dummy.user.location}}
- {{d-icon "globe"}}
- {{this.dummy.user.website_name}}
-
-
-
-
- {{d-icon "ban"}}
- {{i18n
- "user.suspended_notice"
- date=this.dummy.user.suspendedTillDate
- }}
- {{i18n "user.suspended_reason"}}
- {{this.dummy.user.suspend_reason}}
-
- {{html-safe this.dummy.user.bio_cooked}}
-
-
-
- {{#each this.dummy.user.publicUserFields as |uf|}}
- {{#if uf.value}}
-
- {{uf.field.name}}:
- {{uf.value}}
-
- {{/if}}
- {{/each}}
-
-
-
-
-
-
-
- - {{i18n "user.created"}}
- {{bound-date
- this.dummy.user.created_at
- }}
- - {{i18n "user.last_posted"}}
- {{bound-date
- this.dummy.user.last_posted_at
- }}
- - {{i18n "user.last_seen"}}
- {{bound-date
- this.dummy.user.last_seen_at
- }}
- - {{i18n "views"}}
- {{this.dummy.user.profile_view_count}}
- - {{i18n "user.invited_by"}}
- {{this.dummy.user.invited_by.username}}
- - {{i18n "user.trust_level"}}
- {{this.dummy.user.trustLevel.name}}
- - {{i18n "user.email.title"}}
- -
-
-
- - {{i18n
- "groups.title"
- count=this.dummy.user.displayGroups.length
- }}
- -
- {{#each this.dummy.user.displayGroups as |group|}}
- {{group.name}}
- {{/each}}
-
-
-
-
- {{component (concat "notes/" this.note)}}
-
- {{/if}}
-
- {{outlet}}
+ {{#let this.section.component as |SectionComponent|}}
+
+ {{/let}}
\ No newline at end of file
diff --git a/spec/integrity/coding_style_spec.rb b/spec/integrity/coding_style_spec.rb
index 4f42b71bd93..7d91c4fbc0c 100644
--- a/spec/integrity/coding_style_spec.rb
+++ b/spec/integrity/coding_style_spec.rb
@@ -53,6 +53,7 @@ RSpec.describe "Coding style" do
"wizard" => "app/assets/javascripts/wizard/addon/templates/components",
"chat/discourse" => "plugins/chat/assets/javascripts/discourse/templates/components",
"chat/admin" => "plugins/chat/assets/javascripts/admin/templates/components",
+ "styleguide" => "plugins/styleguide/assets/javascripts/discourse/templates/components",
}.each_pair do |name, dir|
it "do not exist for #{name}" do
expect(list_files(dir)).to eq([])