IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Remove renderTemplate from the styleguide (#21660)

Browse Source 
Adds plugin API:

```js
import fidget from "../components/styleguide/molecules/fidget";

api.addStyleguideSection({
  component: fidget,
  id: "fidget",
  category: "molecules",
  priority: 0,
});
```

Removes notes. You can always add `<p class="styleguide-note">` to section components to annotate them.
This commit is contained in:
Jarek Radosz 2023-05-25 11:22:36 +02:00 committed by GitHub
parent b6c5a2da08
commit 22a6ae7e32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
75 changed files with 836 additions and 684 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
plugins/chat/assets/javascripts/discourse/templates/styleguide/organisms/chat.hbs → plugins/chat/assets/javascripts/discourse/components/styleguide/organisms/chat.hbs
View File

7
plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js
View File

@ -6,6 +6,7 @@ import { MENTION_KEYWORDS } from "discourse/plugins/chat/discourse/components/ch
import { clearChatComposerButtons } from "discourse/plugins/chat/discourse/lib/chat-composer-buttons";
import ChannelHashtagType from "discourse/plugins/chat/discourse/lib/hashtag-types/channel";
import { replaceIcon } from "discourse-common/lib/icon-library";
import chatStyleguide from "../components/styleguide/organisms/chat";
let _lastForcedRefreshAt;
const MIN_REFRESH_DURATION_MS = 180000; // 3 minutes
@ -144,6 +145,12 @@ export default {
api.addToHeaderIcons("chat-header-icon");
api.addStyleguideSection?.({
component: chatStyleguide,
category: "organisms",
id: "chat",
});
api.addChatDrawerStateCallback(({ isDrawerActive }) => {
if (isDrawerActive) {
document.body.classList.add("chat-drawer-active");

4
plugins/styleguide/assets/javascripts/discourse/components/color-example.hbs Normal file
View File

@ -0,0 +1,4 @@
<section class="color-example">
<div class="color-bg {{@color}}"></div>
<div class="color-name">var(--{{@color}})</div>
</section>

6
plugins/styleguide/assets/javascripts/discourse/components/color-example.js
View File

@ -1,6 +0,0 @@
import Component from "@ember/component";
export default Component.extend({
tagName: "section",
classNameBindings: [":color-example"],
});

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/00-typography.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/00-typography.hbs
View File

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/01-font-scale.hbs
View File

32
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/02-buttons.hbs
View File

@ -1,5 +1,5 @@
<StyleguideExample @title=".btn-icon - sizes (large, default, small)">
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<DButton
@icon="times"
@translatedTitle={{bs.text}}
@ -10,7 +10,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-icon - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<DButton
@icon="times"
@translatedTitle={{bs.text}}
@ -21,7 +21,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-text - sizes (large, default, small)">
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<DButton
@translatedLabel={{bs.text}}
@class={{bs.class}}
@ -31,7 +31,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-text - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<DButton
@translatedLabel={{bs.text}}
@class={{bs.class}}
@ -43,7 +43,7 @@
<StyleguideExample
@title=".btn-default .btn-icon-text - sizes (large, default, small)"
>
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<DButton
@icon="plus"
@translatedLabel={{bs.text}}
@ -54,7 +54,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-default .btn-icon-text - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<DButton
@icon="plus"
@translatedLabel={{bs.text}}
@ -67,7 +67,7 @@
<StyleguideExample
@title=".btn-primary .btn-icon-text - sizes (large, default, small)"
>
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<DButton
@class={{concat "btn-primary " bs.class}}
@icon="plus"
@ -78,7 +78,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-primary .btn-icon-text - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<DButton
@class={{concat "btn-primary " bs.class}}
@icon="plus"
@ -91,7 +91,7 @@
<StyleguideExample
@title=".btn-danger .btn-icon-text - sizes (large, default, small)"
>
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<DButton
@class={{concat "btn-danger " bs.class}}
@icon="trash-alt"
@ -102,7 +102,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-danger .btn-icon-text - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<DButton
@class={{concat "btn-danger " bs.class}}
@icon="trash-alt"
@ -113,7 +113,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-flat - sizes (large, default, small)">
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<FlatButton
@icon="trash-alt"
@disabled={{bs.disabled}}
@ -123,7 +123,7 @@
</StyleguideExample>
<StyleguideExample @title=".btn-flat - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<FlatButton
@icon="trash-alt"
@disabled={{bs.disabled}}
@ -135,7 +135,7 @@
<StyleguideExample
@title="<DButton> btn-flat btn-text - sizes (large, default, small)"
>
{{#each this.dummy.buttonSizes as |bs|}}
{{#each @dummy.buttonSizes as |bs|}}
<DButton
@class={{concat "btn-flat " bs.class}}
@disabled={{bs.disabled}}
@ -145,7 +145,7 @@
</StyleguideExample>
<StyleguideExample @title="<DButton> btn-flat btn-text - states">
{{#each this.dummy.buttonStates as |bs|}}
{{#each @dummy.buttonStates as |bs|}}
<DButton
@class={{concat "btn-flat " bs.class}}
@disabled={{bs.disabled}}
@ -156,10 +156,10 @@
<StyleguideExample @title="<DToggleSwitch>">
<DToggleSwitch
@state={{this.dummy.toggleSwitchState}}
@state={{@dummy.toggleSwitchState}}
{{on
"click"
(fn (mut this.dummy.toggleSwitchState) (not this.dummy.toggleSwitchState))
(fn (mut @dummy.toggleSwitchState) (not @dummy.toggleSwitchState))
}}
/>
</StyleguideExample>

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/03-colors.hbs
View File

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/04-icons.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/04-icons.hbs
View File

12
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-input-fields.hbs
View File

@ -44,13 +44,13 @@
<StyleguideExample
@title="inline-form with <ComboBox>"
@initialValue={{this.dummy.options.0.name}}
@initialValue={{@dummy.options.0.name}}
as |value|
>
<div class="inline-form">
<TextField @placeholder="Placeholder" />
<ComboBox
@content={{this.dummy.options}}
@content={{@dummy.options}}
@value={{value}}
@onChange={{fn (mut value)}}
/>
@ -66,7 +66,7 @@
<StyleguideExample @title="inline-form with <MultiSelect>">
<div class="inline-form">
<TextField />
<MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
<DButton
@class="btn-primary"
@icon="search"
@ -80,7 +80,7 @@
<div class="inline-form">
<label>Text:</label>
<TextField />
<MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
<DButton
@class="btn-primary"
@icon="search"
@ -99,9 +99,9 @@
<StyleguideExample @title="<CategoryNotificationsButton> and regular button">
<div class="inline-form">
<CategoryNotificationsButton
@category={{get this.dummy.categories 0}}
@category={{get @dummy.categories 0}}
@value={{1}}
@onChange={{action "dummy"}}
@onChange={{@dummyAction}}
/>
<DButton @icon="reply" @type="submit" @translatedLabel="Button" />
</div>

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/06-spinners.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/06-spinners.hbs
View File

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/date-time-inputs.hbs
View File

62
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs
View File

@ -1,10 +1,10 @@
<StyleguideExample
@title="<ComboBox>"
@initialValue={{this.dummy.options.0.name}}
@initialValue={{@dummy.options.0.name}}
as |value|
>
<ComboBox
@content={{this.dummy.options}}
@content={{@dummy.options}}
@value={{value}}
@onChange={{fn (mut value)}}
/>
@ -12,11 +12,11 @@
<StyleguideExample
@title="filterable <ComboBox>"
@initialValue={{this.dummy.categories.0.name}}
@initialValue={{@dummy.categories.0.name}}
as |value|
>
<ComboBox
@content={{this.dummy.categories}}
@content={{@dummy.categories}}
@value={{value}}
@options={{hash filterable=true}}
@onChange={{fn (mut value)}}
@ -25,11 +25,11 @@
<StyleguideExample
@title="<ComboBox> with a default state"
@initialValue={{this.dummy.options.0.name}}
@initialValue={{@dummy.options.0.name}}
as |value|
>
<ComboBox
@content={{this.dummy.options}}
@content={{@dummy.options}}
@value={{value}}
@options={{hash none="category.none"}}
@onChange={{fn (mut value)}}
@ -38,11 +38,11 @@
<StyleguideExample
@title="<ComboBox> clearable"
@initialValue={{this.dummy.options.0.name}}
@initialValue={{@dummy.options.0.name}}
as |value|
>
<ComboBox
@content={{this.dummy.options}}
@content={{@dummy.options}}
@clearable={{true}}
@value={{value}}
@options={{hash none="category.none"}}
@ -56,41 +56,41 @@
as |value|
>
<TopicNotificationsOptions
@topic={{this.dummy.topic}}
@topic={{@dummy.topic}}
@value={{value}}
@onChange={{fn (mut value)}}
/>
</StyleguideExample>
<StyleguideExample @title="<TopicFooterMobileDropdown>">
<TopicFooterMobileDropdown @topic={{this.dummy.topic}} />
<TopicFooterMobileDropdown @topic={{@dummy.topic}} />
</StyleguideExample>
<StyleguideExample
@title="<CategoryChooser>"
@initialValue={{this.categories.0.name}}
@initialValue={{@categories.0.name}}
as |value|
>
<CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
</StyleguideExample>
<StyleguideExample @title="<PinnedButton>">
<PinnedButton @topic={{this.dummy.pinnedTopic}} />
<PinnedButton @topic={{@dummy.pinnedTopic}} />
</StyleguideExample>
<StyleguideExample @title="<PinnedOptions>">
<PinnedOptions @topic={{this.dummy.pinnedTopic}} />
<PinnedOptions @topic={{@dummy.pinnedTopic}} />
</StyleguideExample>
<StyleguideExample @title="<CategoriesAdminDropdown>">
<CategoriesAdminDropdown @onChange={{action "dummy"}} />
<CategoriesAdminDropdown @onChange={{@dummyAction}} />
</StyleguideExample>
<StyleguideExample @title="<CategoryNotificationsButton>">
<CategoryNotificationsButton
@category={{get this.dummy.categories 0}}
@category={{get @dummy.categories 0}}
@value={{1}}
@onChange={{action "dummy"}}
@onChange={{@dummyAction}}
/>
</StyleguideExample>
@ -98,21 +98,21 @@
<NotificationsButton
@options={{hash i18nPrefix="groups.notifications"}}
@value={{2}}
@onChange={{action "dummy"}}
@onChange={{@dummyAction}}
/>
</StyleguideExample>
<StyleguideExample @title="<DropdownSelectBox>">
<DropdownSelectBox
@content={{this.dummy.options}}
@onChange={{action "dummy"}}
@content={{@dummy.options}}
@onChange={{@dummyAction}}
@options={{hash translatedNone="Something"}}
/>
</StyleguideExample>
<StyleguideExample @title="<FutureDateInputSelector>">
<FutureDateInputSelector
@input={{this.dummy.topicTimerUpdateDate}}
@input={{@dummy.topicTimerUpdateDate}}
@includeWeekend={{true}}
@includeForever={{true}}
@options={{hash none="time_shortcut.select_timeframe"}}
@ -120,35 +120,29 @@
</StyleguideExample>
<StyleguideExample @title="<MultiSelect>">
<MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
</StyleguideExample>
<StyleguideExample @title="admin <GroupChooser>">
<GroupChooser
@selected={{this.dummy.selectedGroups}}
@content={{this.dummy.groups}}
@onChange={{action "dummy"}}
@selected={{@dummy.selectedGroups}}
@content={{@dummy.groups}}
@onChange={{@dummyAction}}
/>
</StyleguideExample>
<StyleguideExample @title="<ListSetting>">
<ListSetting
@settingValue={{this.dummy.settings}}
@onChange={{action "dummy"}}
/>
<ListSetting @settingValue={{@dummy.settings}} @onChange={{@dummyAction}} />
</StyleguideExample>
<StyleguideExample @title="<ListSetting>">
<ListSetting
@settingValue={{this.dummy.colors}}
@settingValue={{@dummy.colors}}
@nameProperty="color"
@onChange={{action "dummy"}}
@onChange={{@dummyAction}}
/>
</StyleguideExample>
<StyleguideExample @title="<UserNotificationsDropdown>">
<UserNotificationsDropdown
@user={{this.currentUser}}
@value="changeToNormal"
/>
<UserNotificationsDropdown @user={{@currentUser}} @value="changeToNormal" />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-link.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="topic-link">
{{topic-link @dummy.topic}}
</StyleguideExample>

14
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-statuses.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-statuses.hbs
View File

@ -1,27 +1,27 @@
<StyleguideExample @title="invisible">
<TopicStatus @topic={{this.dummy.invisibleTopic}} />
<TopicStatus @topic={{@dummy.invisibleTopic}} />
</StyleguideExample>
<StyleguideExample @title="closed">
<TopicStatus @topic={{this.dummy.closedTopic}} />
<TopicStatus @topic={{@dummy.closedTopic}} />
</StyleguideExample>
<StyleguideExample @title="pinned">
<TopicStatus @topic={{this.dummy.pinnedTopic}} />
<TopicStatus @topic={{@dummy.pinnedTopic}} />
</StyleguideExample>
<StyleguideExample @title="unpinned">
<TopicStatus @topic={{this.dummy.unpinnedTopic}} />
<TopicStatus @topic={{@dummy.unpinnedTopic}} />
</StyleguideExample>
<StyleguideExample @title="archived">
<TopicStatus @topic={{this.dummy.archivedTopic}} />
<TopicStatus @topic={{@dummy.archivedTopic}} />
</StyleguideExample>
<StyleguideExample @title="warning">
<TopicStatus @topic={{this.dummy.warningTopic}} />
<TopicStatus @topic={{@dummy.warningTopic}} />
</StyleguideExample>
<StyleguideExample @title="no status">
<TopicStatus @topic={{this.dummy.topic}} />
<TopicStatus @topic={{@dummy.topic}} />
</StyleguideExample>

9
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/bread-crumbs.hbs Normal file
View File

@ -0,0 +1,9 @@
<StyleguideExample @title="category-breadcrumbs">
<BreadCrumbs @categories={{@dummy.categories}} @showTags={{false}} />
</StyleguideExample>
{{#if @siteSettings.tagging_enabled}}
<StyleguideExample @title="category-breadcrumbs - tags">
<BreadCrumbs @categories={{@dummy.categories}} @showTags={{true}} />
</StyleguideExample>
{{/if}}

8
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/categories.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/categories.hbs
View File

@ -1,23 +1,23 @@
<StyleguideExample @title="category-badge - bullet">
{{#each this.dummy.categories as |c|}}
{{#each @dummy.categories as |c|}}
{{category-badge c categoryStyle="bullet"}}
{{/each}}
</StyleguideExample>
<StyleguideExample @title="category-badge - bar">
{{#each this.dummy.categories as |c|}}
{{#each @dummy.categories as |c|}}
{{category-badge c categoryStyle="bar"}}
{{/each}}
</StyleguideExample>
<StyleguideExample @title="category-badge - box">
{{#each this.dummy.categories as |c|}}
{{#each @dummy.categories as |c|}}
{{category-badge c categoryStyle="box"}}
{{/each}}
</StyleguideExample>
<StyleguideExample @title="category-badge - none">
{{#each this.dummy.categories as |c|}}
{{#each @dummy.categories as |c|}}
{{category-badge c categoryStyle="none"}}
{{/each}}
</StyleguideExample>

11
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.hbs Normal file
View File

@ -0,0 +1,11 @@
<StyleguideExample @title="<CharCounter>">
<CharCounter @max="50" @value={{@dummy.charCounterContent}}>
<textarea
{{on
"input"
(action (mut @dummy.charCounterContent) value="target.value")
}}
class="styleguide--char-counter"
></textarea>
</CharCounter>
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/empty-state.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="<EmptyState>">
<EmptyState @title={{@dummy.sentence}} @body={{@dummy.short_sentence}} />
</StyleguideExample>

16
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/footer-message.hbs
View File

@ -1,25 +1,25 @@
<StyleguideExample @title="<FooterMessage> - default">
<FooterMessage
@education={{this.dummy.sentence}}
@message={{this.dummy.short_sentence}}
@education={{@dummy.sentence}}
@message={{@dummy.short_sentence}}
/>
</StyleguideExample>
<StyleguideExample @title="<FooterMessage> - latest">
<FooterMessage
@education={{this.dummy.sentence}}
@message={{this.dummy.short_sentence}}
@education={{@dummy.sentence}}
@message={{@dummy.short_sentence}}
@latest={{true}}
@canCreateTopicOnCategory={{true}}
@createTopic={{action "dummy"}}
@createTopic={{@dummyAction}}
/>
</StyleguideExample>
<StyleguideExample @title="<FooterMessage> - top">
<FooterMessage
@education={{this.dummy.sentence}}
@message={{this.dummy.short_sentence}}
@education={{@dummy.sentence}}
@message={{@dummy.short_sentence}}
@top={{true}}
@changePeriod={{action "dummy"}}
@changePeriod={{@dummyAction}}
/>
</StyleguideExample>

4
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/header-icons.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/header-icons.hbs
View File

@ -3,12 +3,12 @@
</StyleguideExample>
<StyleguideExample @title="header-icons - user">
<MountWidget @widget="header-icons" @args={{hash user=this.dummy.user}} />
<MountWidget @widget="header-icons" @args={{hash user=@dummy.user}} />
</StyleguideExample>
<StyleguideExample @title="header-icons - notifications">
<MountWidget
@widget="header-icons"
@args={{hash user=this.dummy.userWithUnread flagCount=5}}
@args={{hash user=@dummy.userWithUnread flagCount=5}}
/>
</StyleguideExample>

31
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-bar.hbs Normal file
View File

@ -0,0 +1,31 @@
<StyleguideExample @title="<NavigationBar>">
<NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
</StyleguideExample>
<StyleguideExample @title=".user-main .nav-pills">
<MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
{{#each @dummy.navItems as |ni|}}
<li>
<a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
{{ni.displayName}}
</a>
</li>
{{/each}}
</MobileNav>
</StyleguideExample>
<StyleguideExample @title="group page <NavigationBar>">
<MobileNav @class="group-nav" @desktopClass="nav nav-pills">
<li class="group-dropdown">
<GroupDropdown @groups={{@dummy.groupNames}} @value="staff" />
</li>
{{#each @dummy.navItems as |ni|}}
<li>
<a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
{{ni.displayName}}
</a>
</li>
{{/each}}
</MobileNav>
</StyleguideExample>

22
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-stacked.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-stacked.hbs
View File

@ -3,11 +3,12 @@
@class="preferences-nav"
@desktopClass="preferences-list action-list nav-stacked"
>
{{#each this.dummy.navItems as |ni|}}
<li><a
href={{ni.href}}
class={{if ni.styleGuideActive "active"}}
>{{ni.displayName}}</a></li>
{{#each @dummy.navItems as |ni|}}
<li>
<a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
{{ni.displayName}}
</a>
</li>
{{/each}}
</MobileNav>
</StyleguideExample>
@ -18,11 +19,12 @@
@class="preferences-nav"
@desktopClass="preferences-list action-list nav-stacked"
>
{{#each this.dummy.navItems as |ni|}}
<li><a
href={{ni.href}}
class={{if ni.styleGuideActive "active"}}
>{{ni.displayName}}</a></li>
{{#each @dummy.navItems as |ni|}}
<li>
<a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
{{ni.displayName}}
</a>
</li>
{{/each}}
</MobileNav>
</DSection>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/post-menu.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="post-menu">
<MountWidget @widget="post-menu" @args={{@dummy.transformedPost}} />
</StyleguideExample>

1
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/rich-tooltip.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/rich-tooltip.hbs
View File

@ -1,6 +1,7 @@
<StyleguideExample @title="<DTooltip>">
<DButton>
{{i18n "styleguide.sections.rich_tooltip.hover_to_see"}}
<DTooltip>
<h3>{{i18n "styleguide.sections.rich_tooltip.header"}}</h3>
{{i18n "styleguide.sections.rich_tooltip.description"}}

0
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/signup-cta.hbs
View File

8
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.hbs
View File

@ -1,7 +1,7 @@
<StyleguideExample @title="<TopicListItem>">
<table class="topic-list">
<tbody>
<TopicListItem @topic={{this.dummy.topic}} @showPosters={{true}} />
<TopicListItem @topic={{@dummy.topic}} @showPosters={{true}} />
</tbody>
</table>
</StyleguideExample>
@ -10,7 +10,7 @@
<table class="topic-list">
<tbody>
<TopicListItem
@topic={{this.dummy.topic}}
@topic={{@dummy.topic}}
@hideCategory={{true}}
@showPosters={{true}}
/>
@ -22,7 +22,7 @@
<table class="topic-list">
<tbody>
<TopicListItem
@topic={{this.dummy.topic}}
@topic={{@dummy.topic}}
@showLikes={{true}}
@showPosters={{true}}
/>
@ -31,5 +31,5 @@
</StyleguideExample>
<StyleguideExample @title="<TopicListItem> - latest" class="half-size">
<LatestTopicListItem @topic={{this.dummy.topic}} />
<LatestTopicListItem @topic={{@dummy.topic}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="<TopicNotificationsButton>">
<TopicNotificationsButton @topic={{@dummy.topic}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-timer-info.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="<TopicTimerInfo>">
<TopicTimerInfo @statusType="reminder" @executeAt={{@dummy.soon}} />
</StyleguideExample>

7
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/00-post.hbs Normal file
View File

@ -0,0 +1,7 @@
<StyleguideExample @title="post">
<MountWidget
@widget="post"
@model={{@dummy.postModel}}
@args={{@dummy.transformedPost}}
/>
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/01-topic-map.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="topic-map">
<MountWidget @widget="topic-map" @args={{@dummy.transformedPost}} />
</StyleguideExample>

2
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/03-topic-footer-buttons.hbs
View File

@ -1,5 +1,5 @@
<StyleguideExample @title="<TopicFooterButtons> - logged in">
<TopicFooterButtons @topic={{this.dummy.topic}} />
<TopicFooterButtons @topic={{@dummy.topic}} />
</StyleguideExample>
<StyleguideExample @title="<TopicFooterButtons> - anonymous">

7
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/04-topic-list.hbs Normal file
View File

@ -0,0 +1,7 @@
<StyleguideExample @title="<TopicList>">
<TopicList @topics={{@dummy.topics}} @showPosters={{true}} />
</StyleguideExample>
<StyleguideExample @title="<TopicList> - hide posters>">
<TopicList @topics={{@dummy.topics}} @showPosters={{false}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/basic-topic-list.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="<BasicTopicList>" class="half-size">
<BasicTopicList @topics={{@dummy.topics}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/categories-list.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="<CategoriesOnly>">
<CategoriesOnly @categories={{@dummy.categories}} />
</StyleguideExample>

5
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.hbs
View File

@ -1,12 +1,13 @@
<StyleguideExample @title="<DModal>">
<DModal
@closeModal={{action "dummy"}}
@closeModal={{@dummyAction}}
@modalStyle="inline-modal"
@title={{i18n "styleguide.sections.modal.header"}}
>
<DModalBody>
{{html-safe this.dummy.lorem}}
{{html-safe @dummy.lorem}}
</DModalBody>
<div class="modal-footer">
{{i18n "styleguide.sections.modal.footer"}}
</div>

5
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/navigation.hbs
View File

@ -2,8 +2,9 @@
<div class="list-controls">
<div class="container">
<DSection @class="navigation-container">
<BreadCrumbs @categories={{this.dummy.categories}} />
<NavigationBar @navItems={{this.dummy.navItems}} @filterMode="latest" />
<BreadCrumbs @categories={{@dummy.categories}} />
<NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
<div class="navigation-controls">
<CategoriesAdminDropdown />
<CreateTopicButton @canCreateTopic={{true}} />

5
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs → plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs
View File

@ -4,11 +4,12 @@
<div class="wrap">
<div class="contents">
<MountWidget @widget="home-logo" @args={{hash minimized=true}} />
<MountWidget @widget="header-topic-info" @args={{this.dummy}} />
<MountWidget @widget="header-topic-info" @args={{@dummy}} />
<div class="panel clearfix">
<MountWidget
@widget="header-icons"
@args={{hash user=this.dummy.user}}
@args={{hash user=@dummy.user}}
/>
</div>
</div>

3
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.hbs Normal file
View File

@ -0,0 +1,3 @@
<StyleguideExample @title="<SuggestedTopics>">
<SuggestedTopics @topic={{@dummy.topic}} />
</StyleguideExample>

403
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.hbs Normal file
View File

@ -0,0 +1,403 @@
<StyleguideExample @title=".user-main .about.collapsed-info.no-background">
<DSection @class="user-main">
<section class="collapsed-info about no-background">
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar @dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li>
<a href={{@dummy.user.adminPath}} class="btn">
{{d-icon "wrench"}}
{{i18n "admin.user.show_admin_profile"}}
</a>
</li>
<li>
<a href="#" class="btn">
{{d-icon "angle-double-down"}}
{{i18n "user.expand_profile"}}
</a>
</li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">
{{@dummy.user.username}}
{{d-icon "shield-alt"}}
</h1>
<h2 class="full-name">{{@dummy.user.name}}</h2>
<h3>{{@dummy.user.title}}</h3>
</div>
</div>
<div style="clear: both"></div>
</div>
</section>
</DSection>
</StyleguideExample>
<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
<DSection @class="user-main">
<section
class="collapsed-info about has-background"
style={{@dummy.user.profileBackground}}
>
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar @dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li>
<a href={{@dummy.user.adminPath}} class="btn">
{{d-icon "wrench"}}
{{i18n "admin.user.show_admin_profile"}}
</a>
</li>
<li>
<a href="#" class="btn">
{{d-icon "angle-double-down"}}
{{i18n "user.expand_profile"}}
</a>
</li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">
{{@dummy.user.username}}
{{d-icon "shield-alt"}}
</h1>
<h2 class="full-name">{{@dummy.user.name}}</h2>
<h3>{{@dummy.user.title}}</h3>
</div>
</div>
<div style="clear: both"></div>
</div>
</section>
</DSection>
</StyleguideExample>
<StyleguideExample @title=".user-main .about.no-background">
<DSection @class="user-main">
<section class="about no-background">
<div class="staff-counters">
<div>
<span class="helpful-flags">
{{@dummy.user.number_of_flags_given}}
</span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
</div>
<div>
<a href="#">
<span class="flagged-posts">
{{@dummy.user.number_of_flagged_posts}}
</span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
</a>
</div>
<div>
<a href="#">
<span class="deleted-posts">
{{@dummy.user.number_of_deleted_posts}}
</span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
</a>
</div>
<div>
<span class="suspensions">
{{@dummy.user.number_of_suspensions}}
</span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
</div>
<div>
<span class="warnings-received">
{{@dummy.user.warnings_received_count}}
</span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
</div>
</div>
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar @dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li>
<a href={{@dummy.user.adminPath}} class="btn">
{{d-icon "wrench"}}
{{i18n "admin.user.show_admin_profile"}}
</a>
</li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">
{{@dummy.user.username}}
{{d-icon "shield-alt"}}
</h1>
<h2 class="full-name">{{@dummy.user.name}}</h2>
<h3>{{@dummy.user.title}}</h3>
<h3>
{{d-icon "map-marker-alt"}}
{{@dummy.user.location}}
{{d-icon "globe"}}
<a
href={{@dummy.user.website}}
rel="nofollow noopener noreferrer"
target="_blank"
>
{{@dummy.user.website_name}}
</a>
</h3>
<div class="bio">
<div class="suspended">
{{d-icon "ban"}}
<b>
{{i18n
"user.suspended_notice"
date=@dummy.user.suspendedTillDate
}}
</b>
<br />
<b>{{i18n "user.suspended_reason"}}</b>
{{@dummy.user.suspend_reason}}
</div>
{{html-safe @dummy.user.bio_cooked}}
</div>
<div class="public-user-fields">
{{#each @dummy.user.publicUserFields as |uf|}}
{{#if uf.value}}
<div class="public-user-field {{uf.field.dasherized_name}}">
<span class="user-field-name">{{uf.field.name}}
</span>:
<span class="user-field-value">{{uf.value}}
</span>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="secondary">
<dl>
<dt>{{i18n "user.created"}}</dt>
<dd>{{bound-date @dummy.user.created_at}}</dd>
<dt>{{i18n "user.last_posted"}}</dt>
<dd>{{bound-date @dummy.user.last_posted_at}}</dd>
<dt>{{i18n "user.last_seen"}}</dt>
<dd>{{bound-date @dummy.user.last_seen_at}}</dd>
<dt>{{i18n "views"}}</dt>
<dd>{{@dummy.user.profile_view_count}}</dd>
<dt class="invited-by">{{i18n "user.invited_by"}}</dt>
<dd class="invited-by">
<a href="#">{{@dummy.user.invited_by.username}}</a>
</dd>
<dt class="trust-level">{{i18n "user.trust_level"}}</dt>
<dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
<dt>{{i18n "user.email.title"}}</dt>
<dd title={{@dummy.user.email}}>
<DButton
@icon="envelope"
@label="admin.users.check_email.text"
@class="btn-primary"
/>
</dd>
<dt class="groups">
{{i18n "groups.title" count=@dummy.user.displayGroups.length}}
</dt>
<dd class="groups">
{{#each @dummy.user.displayGroups as |group|}}
<span>
<a href="#" class="group-link">{{group.name}}</a>
</span>
{{/each}}
</dd>
<DButton
@icon="exclamation-triangle"
@label="user.admin_delete"
@class="btn-danger"
/>
</dl>
</div>
</section>
</DSection>
</StyleguideExample>
<StyleguideExample @title=".user-main .about.has-background">
<DSection @class="user-main">
<section
class="about has-background"
style={{@dummy.user.profileBackground}}
>
<div class="staff-counters">
<div>
<span class="helpful-flags">
{{@dummy.user.number_of_flags_given}}
</span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
</div>
<div>
<a href="#">
<span class="flagged-posts">
{{@dummy.user.number_of_flagged_posts}}
</span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
</a>
</div>
<div>
<a href="#">
<span class="deleted-posts">
{{@dummy.user.number_of_deleted_posts}}
</span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
</a>
</div>
<div>
<span class="suspensions">
{{@dummy.user.number_of_suspensions}}
</span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
</div>
<div>
<span class="warnings-received">
{{@dummy.user.warnings_received_count}}
</span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
</div>
</div>
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar @dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li>
<a href={{@dummy.user.adminPath}} class="btn">
{{d-icon "wrench"}}
{{i18n "admin.user.show_admin_profile"}}
</a>
</li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">
{{@dummy.user.username}}
{{d-icon "shield-alt"}}
</h1>
<h2 class="full-name">{{@dummy.user.name}}</h2>
<h3>{{@dummy.user.title}}</h3>
<h3>
{{d-icon "map-marker-alt"}}
{{@dummy.user.location}}
{{d-icon "globe"}}
<a
href={{@dummy.user.website}}
rel="nofollow noopener noreferrer"
target="_blank"
>
{{@dummy.user.website_name}}
</a>
</h3>
<div class="bio">
<div class="suspended">
{{d-icon "ban"}}
<b>
{{i18n
"user.suspended_notice"
date=@dummy.user.suspendedTillDate
}}
</b>
<br />
<b>{{i18n "user.suspended_reason"}}</b>
{{@dummy.user.suspend_reason}}
</div>
{{html-safe @dummy.user.bio_cooked}}
</div>
<div class="public-user-fields">
{{#each @dummy.user.publicUserFields as |uf|}}
{{#if uf.value}}
<div class="public-user-field {{uf.field.dasherized_name}}">
<span class="user-field-name">{{uf.field.name}}</span>:
<span class="user-field-value">{{uf.value}}</span>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="secondary">
<dl>
<dt>{{i18n "user.created"}}</dt>
<dd>{{bound-date @dummy.user.created_at}}</dd>
<dt>{{i18n "user.last_posted"}}</dt>
<dd>{{bound-date @dummy.user.last_posted_at}}</dd>
<dt>{{i18n "user.last_seen"}}</dt>
<dd>{{bound-date @dummy.user.last_seen_at}}</dd>
<dt>{{i18n "views"}}</dt>
<dd>{{@dummy.user.profile_view_count}}</dd>
<dt class="invited-by">{{i18n "user.invited_by"}}</dt>
<dd class="invited-by">
<a href="#">{{@dummy.user.invited_by.username}}</a>
</dd>
<dt class="trust-level">{{i18n "user.trust_level"}}</dt>
<dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
<dt>{{i18n "user.email.title"}}</dt>
<dd title={{@dummy.user.email}}>
<DButton
@icon="envelope"
@label="admin.users.check_email.text"
@class="btn-primary"
/>
</dd>
<dt class="groups">
{{i18n "groups.title" count=@dummy.user.displayGroups.length}}
</dt>
<dd class="groups">
{{#each @dummy.user.displayGroups as |group|}}
<span>
<a href="#" class="group-link">{{group.name}}</a>
</span>
{{/each}}
</dd>
<DButton
@icon="exclamation-triangle"
@label="user.admin_delete"
@class="btn-danger"
/>
</dl>
</div>
</section>
</DSection>
</StyleguideExample>

4
plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.hbs Normal file
View File

@ -0,0 +1,4 @@
<section class="styleguide-example">
<div class="example-title">{{@title}}</div>
<section class="rendered">{{yield this.value}}</section>
</section>

19
plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
View File

@ -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;
}
}

0
plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs → plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.hbs
View File

6
plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.hbs Normal file
View File

@ -0,0 +1,6 @@
<LinkTo
@route="styleguide.show"
@models={{array @section.category @section.id}}
>
{{section-title @section.id}}
</LinkTo>

5
plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js
View File

@ -1,5 +0,0 @@
import Component from "@ember/component";
export default Component.extend({
tagName: "",
});

0
plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-section.hbs → plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.hbs
View File

10
plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
View File

@ -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() {}
}

6
plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
View File

@ -1,5 +1,5 @@
import Controller from "@ember/controller";
export default Controller.extend({
sections: null,
});
export default class Styleguide extends Controller {
sections = null;
}

25
plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
View File

@ -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;

165
plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js
View File

@ -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];
}

42
plugins/styleguide/assets/javascripts/discourse/pre-initializers/styleguide-plugin-api.js Normal file
View File

@ -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);
},
});
}
});
},
};

23
plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
View File

@ -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",
});
},
});
}
}

9
plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
View File

@ -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);
},
});
}
}

2
plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
View File

@ -1,2 +0,0 @@
<div class="color-bg {{this.color}}"></div>
<div class="color-name">var(--{{this.color}})</div>

0
plugins/styleguide/assets/javascripts/discourse/templates/components/notes/.keep
View File

2
plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs
View File

@ -1,2 +0,0 @@
<div class="example-title">{{this.title}}</div>
<section class="rendered">{{yield this.value}}</section>

6
plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs
View File

@ -1,6 +0,0 @@
<LinkTo
@route="styleguide.show"
@models={{array this.section.category this.section.id}}
>
{{section-title this.section.id}}
</LinkTo>

8
plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
View File

@ -1,17 +1,19 @@
<section class="styleguide">
<section class="styleguide-menu">
<ToggleColorMode />
{{#each this.categories as |c|}}
<ul>
<li class="styleguide-heading">{{i18n
(concat "styleguide.categories." c.id)
}}</li>
<li class="styleguide-heading">
{{i18n (concat "styleguide.categories." c.id)}}
</li>
{{#each c.sections as |s|}}
<li><StyleguideLink @section={{s}} /></li>
{{/each}}
</ul>
{{/each}}
</section>
<section class="styleguide-contents">
{{outlet}}
</section>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-link.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="topic-link">
{{topic-link this.dummy.topic}}
</StyleguideExample>

9
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs
View File

@ -1,9 +0,0 @@
<StyleguideExample @title="category-breadcrumbs">
<BreadCrumbs @categories={{this.dummy.categories}} @showTags={{false}} />
</StyleguideExample>
{{#if this.siteSettings.tagging_enabled}}
<StyleguideExample @title="category-breadcrumbs - tags">
<BreadCrumbs @categories={{this.dummy.categories}} @showTags={{true}} />
</StyleguideExample>
{{/if}}

10
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs
View File

@ -1,10 +0,0 @@
<StyleguideExample @title="<CharCounter>">
<CharCounter @max="50" @value={{this.charCounterContent}}>
<textarea
placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
{{on "input" (action (mut this.charCounterContent) value="target.value")}}
class="styleguide--char-counter"
>
</textarea>
</CharCounter>
</StyleguideExample>

6
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
View File

@ -1,6 +0,0 @@
<StyleguideExample @title="<EmptyState>">
<EmptyState
@title={{this.dummy.sentence}}
@body={{this.dummy.short_sentence}}
/>
</StyleguideExample>

29
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
View File

@ -1,29 +0,0 @@
<StyleguideExample @title="<NavigationBar>">
<NavigationBar @navItems={{this.dummy.navItems}} @filterMode="latest" />
</StyleguideExample>
<StyleguideExample @title=".user-main .nav-pills">
<MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
{{#each this.dummy.navItems as |ni|}}
<li><a
href={{ni.href}}
class={{if ni.styleGuideActive "active"}}
>{{ni.displayName}}</a></li>
{{/each}}
</MobileNav>
</StyleguideExample>
<StyleguideExample @title="group page <NavigationBar>">
<MobileNav @class="group-nav" @desktopClass="nav nav-pills">
<li class="group-dropdown">
<GroupDropdown @groups={{this.dummy.groupNames}} @value="staff" />
</li>
{{#each this.dummy.navItems as |ni|}}
<li><a
href={{ni.href}}
class={{if ni.styleGuideActive "active"}}
>{{ni.displayName}}</a></li>
{{/each}}
</MobileNav>
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="post-menu">
<MountWidget @widget="post-menu" @args={{this.dummy.transformedPost}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="<TopicNotificationsButton>">
<TopicNotificationsButton @topic={{this.dummy.topic}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="<TopicTimerInfo>">
<TopicTimerInfo @statusType="reminder" @executeAt={{this.dummy.soon}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="post">
<MountWidget @widget="post" @args={{this.dummy.transformedPost}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="topic-map">
<MountWidget @widget="topic-map" @args={{this.dummy.transformedPost}} />
</StyleguideExample>

7
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
View File

@ -1,7 +0,0 @@
<StyleguideExample @title="<TopicList>">
<TopicList @topics={{this.dummy.topics}} @showPosters={{true}} />
</StyleguideExample>
<StyleguideExample @title="<TopicList> - hide posters>">
<TopicList @topics={{this.dummy.topics}} @showPosters={{false}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="<BasicTopicList>" class="half-size">
<BasicTopicList @topics={{this.dummy.topics}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="<CategoriesOnly>">
<CategoriesOnly @categories={{this.dummy.categories}} />
</StyleguideExample>

3
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
View File

@ -1,3 +0,0 @@
<StyleguideExample @title="<SuggestedTopics>">
<SuggestedTopics @topic={{this.dummy.topic}} />
</StyleguideExample>

377
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs
View File

@ -1,377 +0,0 @@
<StyleguideExample @title=".user-main .about.collapsed-info.no-background">
<DSection @class="user-main">
<section class="collapsed-info about no-background">
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar this.dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
"wrench"
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
<li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
"user.expand_profile"
}}</a></li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">{{this.dummy.user.username}}
{{d-icon "shield-alt"}}</h1>
<h2 class="full-name">{{this.dummy.user.name}}</h2>
<h3>{{this.dummy.user.title}}</h3>
</div>
</div>
<div style="clear: both"></div>
</div>
</section>
</DSection>
</StyleguideExample>
<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
<DSection @class="user-main">
<section
class="collapsed-info about has-background"
style={{this.dummy.user.profileBackground}}
>
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar this.dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
"wrench"
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
<li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
"user.expand_profile"
}}</a></li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">{{this.dummy.user.username}}
{{d-icon "shield-alt"}}</h1>
<h2 class="full-name">{{this.dummy.user.name}}</h2>
<h3>{{this.dummy.user.title}}</h3>
</div>
</div>
<div style="clear: both"></div>
</div>
</section>
</DSection>
</StyleguideExample>
<StyleguideExample @title=".user-main .about.no-background">
<DSection @class="user-main">
<section class="about no-background">
<div class="staff-counters">
<div><span
class="helpful-flags"
>{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n
"user.staff_counters.flags_given"
}}</div>
<div>
<a href="#">
<span
class="flagged-posts"
>{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n
"user.staff_counters.flagged_posts"
}}
</a>
</div>
<div>
<a href="#">
<span
class="deleted-posts"
>{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n
"user.staff_counters.deleted_posts"
}}
</a>
</div>
<div><span
class="suspensions"
>{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n
"user.staff_counters.suspensions"
}}</div>
<div><span
class="warnings-received"
>{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n
"user.staff_counters.warnings_received"
}}</div>
</div>
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar this.dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
"wrench"
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">{{this.dummy.user.username}}
{{d-icon "shield-alt"}}</h1>
<h2 class="full-name">{{this.dummy.user.name}}</h2>
<h3>{{this.dummy.user.title}}</h3>
<h3>
{{d-icon "map-marker-alt"}}
{{this.dummy.user.location}}
{{d-icon "globe"}}
<a
href={{this.dummy.user.website}}
rel="nofollow noopener noreferrer"
target="_blank"
>{{this.dummy.user.website_name}}</a>
</h3>
<div class="bio">
<div class="suspended">
{{d-icon "ban"}}
<b>{{i18n
"user.suspended_notice"
date=this.dummy.user.suspendedTillDate
}}</b><br />
<b>{{i18n "user.suspended_reason"}}</b>
{{this.dummy.user.suspend_reason}}
</div>
{{html-safe this.dummy.user.bio_cooked}}
</div>
<div class="public-user-fields">
{{#each this.dummy.user.publicUserFields as |uf|}}
{{#if uf.value}}
<div class="public-user-field {{uf.field.dasherized_name}}">
<span class="user-field-name">{{uf.field.name}}</span>:
<span class="user-field-value">{{uf.value}}</span>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="secondary">
<dl>
<dt>{{i18n "user.created"}}</dt><dd>{{bound-date
this.dummy.user.created_at
}}</dd>
<dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
this.dummy.user.last_posted_at
}}</dd>
<dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
this.dummy.user.last_seen_at
}}</dd>
<dt>{{i18n "views"}}</dt><dd
>{{this.dummy.user.profile_view_count}}</dd>
<dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
class="invited-by"
><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
<dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
class="trust-level"
>{{this.dummy.user.trustLevel.name}}</dd>
<dt>{{i18n "user.email.title"}}</dt>
<dd title={{this.dummy.user.email}}>
<DButton
@icon="envelope"
@label="admin.users.check_email.text"
@class="btn-primary"
/>
</dd>
<dt class="groups">{{i18n
"groups.title"
count=this.dummy.user.displayGroups.length
}}</dt>
<dd class="groups">
{{#each this.dummy.user.displayGroups as |group|}}
<span><a href="#" class="group-link">{{group.name}}</a></span>
{{/each}}
</dd>
<DButton
@icon="exclamation-triangle"
@label="user.admin_delete"
@class="btn-danger"
/>
</dl>
</div>
</section>
</DSection>
</StyleguideExample>
<StyleguideExample @title=".user-main .about.has-background">
<DSection @class="user-main">
<section
class="about has-background"
style={{this.dummy.user.profileBackground}}
>
<div class="staff-counters">
<div><span
class="helpful-flags"
>{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n
"user.staff_counters.flags_given"
}}</div>
<div>
<a href="#">
<span
class="flagged-posts"
>{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n
"user.staff_counters.flagged_posts"
}}
</a>
</div>
<div>
<a href="#">
<span
class="deleted-posts"
>{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n
"user.staff_counters.deleted_posts"
}}
</a>
</div>
<div><span
class="suspensions"
>{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n
"user.staff_counters.suspensions"
}}</div>
<div><span
class="warnings-received"
>{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n
"user.staff_counters.warnings_received"
}}</div>
</div>
<div class="profile-image"></div>
<div class="details">
<div class="primary">
{{bound-avatar this.dummy.user "huge"}}
<section class="controls">
<ul>
<li>
<a class="btn btn-primary">
{{d-icon "envelope"}}
{{i18n "user.private_message"}}
</a>
</li>
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
"wrench"
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
</ul>
</section>
<div class="primary-textual">
<h1 class="username">{{this.dummy.user.username}}
{{d-icon "shield-alt"}}</h1>
<h2 class="full-name">{{this.dummy.user.name}}</h2>
<h3>{{this.dummy.user.title}}</h3>
<h3>
{{d-icon "map-marker-alt"}}
{{this.dummy.user.location}}
{{d-icon "globe"}}
<a
href={{this.dummy.user.website}}
rel="nofollow noopener noreferrer"
target="_blank"
>{{this.dummy.user.website_name}}</a>
</h3>
<div class="bio">
<div class="suspended">
{{d-icon "ban"}}
<b>{{i18n
"user.suspended_notice"
date=this.dummy.user.suspendedTillDate
}}</b><br />
<b>{{i18n "user.suspended_reason"}}</b>
{{this.dummy.user.suspend_reason}}
</div>
{{html-safe this.dummy.user.bio_cooked}}
</div>
<div class="public-user-fields">
{{#each this.dummy.user.publicUserFields as |uf|}}
{{#if uf.value}}
<div class="public-user-field {{uf.field.dasherized_name}}">
<span class="user-field-name">{{uf.field.name}}</span>:
<span class="user-field-value">{{uf.value}}</span>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="secondary">
<dl>
<dt>{{i18n "user.created"}}</dt><dd>{{bound-date
this.dummy.user.created_at
}}</dd>
<dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
this.dummy.user.last_posted_at
}}</dd>
<dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
this.dummy.user.last_seen_at
}}</dd>
<dt>{{i18n "views"}}</dt><dd
>{{this.dummy.user.profile_view_count}}</dd>
<dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
class="invited-by"
><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
<dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
class="trust-level"
>{{this.dummy.user.trustLevel.name}}</dd>
<dt>{{i18n "user.email.title"}}</dt>
<dd title={{this.dummy.user.email}}>
<DButton
@icon="envelope"
@label="admin.users.check_email.text"
@class="btn-primary"
/>
</dd>
<dt class="groups">{{i18n
"groups.title"
count=this.dummy.user.displayGroups.length
}}</dt>
<dd class="groups">
{{#each this.dummy.user.displayGroups as |group|}}
<span><a href="#" class="group-link">{{group.name}}</a></span>
{{/each}}
</dd>
<DButton
@icon="exclamation-triangle"
@label="user.admin_delete"
@class="btn-danger"
/>
</dl>
</div>
</section>
</DSection>
</StyleguideExample>

14
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.hbs
View File

@ -1,9 +1,9 @@
<StyleguideSection @section={{this.section}}>
{{#if this.note}}
<div class="styleguide-note">
{{component (concat "notes/" this.note)}}
</div>
{{/if}}
{{outlet}}
{{#let this.section.component as |SectionComponent|}}
<SectionComponent
@dummy={{this.dummy}}
@dummyAction={{this.dummyAction}}
@siteSettings={{this.siteSettings}}
/>
{{/let}}
</StyleguideSection>

1
spec/integrity/coding_style_spec.rb
View File

@ -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([])