mirror of
https://github.com/discourse/discourse.git
synced 2025-05-28 13:51:18 +08:00
DEV: Remove last few curly-component invocations
This commit is contained in:
David Taylor
@ -1,3 +1,3 @@
|
||||
{{#link-to "styleguide.show" section.category section.id}}
|
||||
<LinkTo @route="styleguide.show" @models={{array section.category section.id}}>
|
||||
{{section-title section.id}}
|
||||
{{/link-to}}
|
||||
</LinkTo>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<ul>
|
||||
<li class="styleguide-heading">{{i18n (concat "styleguide.categories." c.id)}}</li>
|
||||
{{#each c.sections as |s|}}
|
||||
<li>{{styleguide-link section=s}}</li>
|
||||
<li><StyleguideLink @section={{s}} /></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/each}}
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
{{#styleguide-example title="h1"}}
|
||||
<StyleguideExample @title="h1">
|
||||
<h1>{{i18n "styleguide.sections.typography.example"}}</h1>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="h2"}}
|
||||
<StyleguideExample @title="h2">
|
||||
<h2>{{i18n "styleguide.sections.typography.example"}}</h2>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="h3"}}
|
||||
<StyleguideExample @title="h3">
|
||||
<h3>{{i18n "styleguide.sections.typography.example"}}</h3>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="h4"}}
|
||||
<StyleguideExample @title="h4">
|
||||
<h4>{{i18n "styleguide.sections.typography.example"}}</h4>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="h5"}}
|
||||
<StyleguideExample @title="h5">
|
||||
<h5>{{i18n "styleguide.sections.typography.example"}}</h5>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="h6"}}
|
||||
<StyleguideExample @title="h6">
|
||||
<h6>{{i18n "styleguide.sections.typography.example"}}</h6>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="p"}}
|
||||
<StyleguideExample @title="p">
|
||||
<p>{{i18n "styleguide.sections.typography.paragraph"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -46,54 +46,54 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{#styleguide-example title="var(--font-up-6), 2.296em"}}
|
||||
<StyleguideExample @title="var(--font-up-6), 2.296em">
|
||||
<p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-up-5), 2em"}}
|
||||
<StyleguideExample @title="var(--font-up-5), 2em">
|
||||
<p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-up-4), 1.7511em"}}
|
||||
<StyleguideExample @title="var(--font-up-4), 1.7511em">
|
||||
<p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-up-3), 1.5157em"}}
|
||||
<StyleguideExample @title="var(--font-up-3), 1.5157em">
|
||||
<p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-up-2), 1.3195em"}}
|
||||
<StyleguideExample @title="var(--font-up-2), 1.3195em">
|
||||
<p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-up-1), 1.1487em"}}
|
||||
<StyleguideExample @title="var(--font-up-1), 1.1487em">
|
||||
<p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-0), 1em — base font"}}
|
||||
<StyleguideExample @title="var(--font-0), 1em — base font">
|
||||
<p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-down-1), 0.8706em"}}
|
||||
<StyleguideExample @title="var(--font-down-1), 0.8706em">
|
||||
<p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-down-2), 0.7579em"}}
|
||||
<StyleguideExample @title="var(--font-down-2), 0.7579em">
|
||||
<p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-down-3), 0.6599em"}}
|
||||
<StyleguideExample @title="var(--font-down-3), 0.6599em">
|
||||
<p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-down-4), 0.5745em"}}
|
||||
<StyleguideExample @title="var(--font-down-4), 0.5745em">
|
||||
<p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-down-5), 0.5em"}}
|
||||
<StyleguideExample @title="var(--font-down-5), 0.5em">
|
||||
<p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="var(--font-down-6), 0.4355em"}}
|
||||
<StyleguideExample @title="var(--font-down-6), 0.4355em">
|
||||
<p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,91 +1,71 @@
|
||||
{{#styleguide-example title=".btn-icon - sizes (large, default, small)"}}
|
||||
<StyleguideExample @title=".btn-icon - sizes (large, default, small)">
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
|
||||
<DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-icon - states"}}
|
||||
<StyleguideExample @title=".btn-icon - states">
|
||||
{{#each dummy.buttonStates as |bs|}}
|
||||
{{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
|
||||
<DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-text - sizes (large, default, small)"}}
|
||||
<StyleguideExample @title=".btn-text - sizes (large, default, small)">
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
|
||||
<DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-text - states"}}
|
||||
<StyleguideExample @title=".btn-text - states">
|
||||
{{#each dummy.buttonStates as |bs|}}
|
||||
{{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
|
||||
<DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-default .btn-icon-text - sizes (large, default, small)"}}
|
||||
<StyleguideExample @title=".btn-default .btn-icon-text - sizes (large, default, small)">
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
|
||||
<DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-default .btn-icon-text - states"}}
|
||||
<StyleguideExample @title=".btn-default .btn-icon-text - states">
|
||||
{{#each dummy.buttonStates as |bs|}}
|
||||
{{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
|
||||
<DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-primary .btn-icon-text - sizes (large, default, small)"}}
|
||||
<StyleguideExample @title=".btn-primary .btn-icon-text - sizes (large, default, small)">
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button
|
||||
class=(concat "btn-primary " bs.class)
|
||||
icon="plus"
|
||||
translatedLabel=bs.text
|
||||
disabled=bs.disabled
|
||||
}}
|
||||
<DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-primary .btn-icon-text - states"}}
|
||||
<StyleguideExample @title=".btn-primary .btn-icon-text - states">
|
||||
{{#each dummy.buttonStates as |bs|}}
|
||||
{{d-button
|
||||
class=(concat "btn-primary " bs.class)
|
||||
icon="plus"
|
||||
translatedLabel=bs.text
|
||||
disabled=bs.disabled
|
||||
}}
|
||||
<DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-danger .btn-icon-text - sizes (large, default, small)"}}
|
||||
<StyleguideExample @title=".btn-danger .btn-icon-text - sizes (large, default, small)">
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button
|
||||
class=(concat "btn-danger " bs.class)
|
||||
icon="trash-alt"
|
||||
translatedLabel=bs.text
|
||||
disabled=bs.disabled
|
||||
}}
|
||||
<DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-danger .btn-icon-text - states"}}
|
||||
<StyleguideExample @title=".btn-danger .btn-icon-text - states">
|
||||
{{#each dummy.buttonStates as |bs|}}
|
||||
{{d-button
|
||||
class=(concat "btn-danger " bs.class)
|
||||
icon="trash-alt"
|
||||
translatedLabel=bs.text
|
||||
disabled=bs.disabled
|
||||
}}
|
||||
<DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-flat - sizes (large, default, small)"}}
|
||||
<StyleguideExample @title=".btn-flat - sizes (large, default, small)">
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
|
||||
<FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".btn-flat - states"}}
|
||||
<StyleguideExample @title=".btn-flat - states">
|
||||
{{#each dummy.buttonStates as |bs|}}
|
||||
{{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
|
||||
<FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,122 +1,122 @@
|
||||
{{#styleguide-example title="primary"}}
|
||||
<StyleguideExample @title="primary">
|
||||
<section class="color-row">
|
||||
{{color-example color="primary-very-low"}}
|
||||
{{color-example color="primary-low"}}
|
||||
{{color-example color="primary-low-mid"}}
|
||||
<ColorExample @color="primary-very-low" />
|
||||
<ColorExample @color="primary-low" />
|
||||
<ColorExample @color="primary-low-mid" />
|
||||
</section>
|
||||
<section class="color-row">
|
||||
{{color-example color="primary-medium"}}
|
||||
{{color-example color="primary-high"}}
|
||||
{{color-example color="primary"}}
|
||||
<ColorExample @color="primary-medium" />
|
||||
<ColorExample @color="primary-high" />
|
||||
<ColorExample @color="primary" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="primary-100"}}
|
||||
<StyleguideExample @title="primary-100">
|
||||
<section class="color-row">
|
||||
{{color-example color="primary-50"}}
|
||||
{{color-example color="primary-100"}}
|
||||
{{color-example color="primary-200"}}
|
||||
{{color-example color="primary-300"}}
|
||||
{{color-example color="primary-400"}}
|
||||
{{color-example color="primary-500"}}
|
||||
<ColorExample @color="primary-50" />
|
||||
<ColorExample @color="primary-100" />
|
||||
<ColorExample @color="primary-200" />
|
||||
<ColorExample @color="primary-300" />
|
||||
<ColorExample @color="primary-400" />
|
||||
<ColorExample @color="primary-500" />
|
||||
</section>
|
||||
<section class="color-row">
|
||||
{{color-example color="primary-600"}}
|
||||
{{color-example color="primary-700"}}
|
||||
{{color-example color="primary-800"}}
|
||||
{{color-example color="primary-900"}}
|
||||
{{color-example color="primary"}}
|
||||
<ColorExample @color="primary-600" />
|
||||
<ColorExample @color="primary-700" />
|
||||
<ColorExample @color="primary-800" />
|
||||
<ColorExample @color="primary-900" />
|
||||
<ColorExample @color="primary" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="secondary"}}
|
||||
<StyleguideExample @title="secondary">
|
||||
<section class="color-row">
|
||||
{{color-example color="secondary-low"}}
|
||||
{{color-example color="secondary-medium"}}
|
||||
{{color-example color="secondary-high"}}
|
||||
{{color-example color="secondary"}}
|
||||
<ColorExample @color="secondary-low" />
|
||||
<ColorExample @color="secondary-medium" />
|
||||
<ColorExample @color="secondary-high" />
|
||||
<ColorExample @color="secondary" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="tertiary"}}
|
||||
<StyleguideExample @title="tertiary">
|
||||
<section class="color-row">
|
||||
{{color-example color="tertiary-low"}}
|
||||
{{color-example color="tertiary-medium"}}
|
||||
{{color-example color="tertiary-high"}}
|
||||
{{color-example color="tertiary"}}
|
||||
<ColorExample @color="tertiary-low" />
|
||||
<ColorExample @color="tertiary-medium" />
|
||||
<ColorExample @color="tertiary-high" />
|
||||
<ColorExample @color="tertiary" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="tertiary-100"}}
|
||||
<StyleguideExample @title="tertiary-100">
|
||||
<section class="color-row">
|
||||
{{color-example color="tertiary-50"}}
|
||||
{{color-example color="tertiary-100"}}
|
||||
{{color-example color="tertiary-200"}}
|
||||
{{color-example color="tertiary-300"}}
|
||||
{{color-example color="tertiary-400"}}
|
||||
{{color-example color="tertiary-500"}}
|
||||
<ColorExample @color="tertiary-50" />
|
||||
<ColorExample @color="tertiary-100" />
|
||||
<ColorExample @color="tertiary-200" />
|
||||
<ColorExample @color="tertiary-300" />
|
||||
<ColorExample @color="tertiary-400" />
|
||||
<ColorExample @color="tertiary-500" />
|
||||
</section>
|
||||
<section class="color-row">
|
||||
{{color-example color="tertiary-600"}}
|
||||
{{color-example color="tertiary-700"}}
|
||||
{{color-example color="tertiary-800"}}
|
||||
{{color-example color="tertiary-900"}}
|
||||
{{color-example color="tertiary"}}
|
||||
<ColorExample @color="tertiary-600" />
|
||||
<ColorExample @color="tertiary-700" />
|
||||
<ColorExample @color="tertiary-800" />
|
||||
<ColorExample @color="tertiary-900" />
|
||||
<ColorExample @color="tertiary" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="quaternary"}}
|
||||
<StyleguideExample @title="quaternary">
|
||||
<section class="color-row">
|
||||
{{color-example color="quaternary-low"}}
|
||||
{{color-example color="quaternary"}}
|
||||
<ColorExample @color="quaternary-low" />
|
||||
<ColorExample @color="quaternary" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="highlight"}}
|
||||
<StyleguideExample @title="highlight">
|
||||
<section class="color-row">
|
||||
{{color-example color="highlight-low"}}
|
||||
{{color-example color="highlight-medium"}}
|
||||
{{color-example color="highlight"}}
|
||||
{{color-example color="highlight-high"}}
|
||||
<ColorExample @color="highlight-low" />
|
||||
<ColorExample @color="highlight-medium" />
|
||||
<ColorExample @color="highlight" />
|
||||
<ColorExample @color="highlight-high" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="danger"}}
|
||||
<StyleguideExample @title="danger">
|
||||
<section class="color-row">
|
||||
{{color-example color="danger-low"}}
|
||||
{{color-example color="danger-low-mid"}}
|
||||
{{color-example color="danger-medium"}}
|
||||
{{color-example color="danger"}}
|
||||
<ColorExample @color="danger-low" />
|
||||
<ColorExample @color="danger-low-mid" />
|
||||
<ColorExample @color="danger-medium" />
|
||||
<ColorExample @color="danger" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="success"}}
|
||||
<StyleguideExample @title="success">
|
||||
<section class="color-row">
|
||||
{{color-example color="success-low"}}
|
||||
{{color-example color="success-medium"}}
|
||||
{{color-example color="success"}}
|
||||
<ColorExample @color="success-low" />
|
||||
<ColorExample @color="success-medium" />
|
||||
<ColorExample @color="success" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="love"}}
|
||||
<StyleguideExample @title="love">
|
||||
<section class="color-row">
|
||||
{{color-example color="love-low"}}
|
||||
{{color-example color="love"}}
|
||||
<ColorExample @color="love-low" />
|
||||
<ColorExample @color="love" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="header_primary"}}
|
||||
<StyleguideExample @title="header_primary">
|
||||
<section class="color-row">
|
||||
{{color-example color="header_background"}}
|
||||
<ColorExample @color="header_background" />
|
||||
</section>
|
||||
<section class="color-row">
|
||||
{{color-example color="header_primary"}}
|
||||
{{color-example color="header_primary-very-high"}}
|
||||
{{color-example color="header_primary-high"}}
|
||||
<ColorExample @color="header_primary" />
|
||||
<ColorExample @color="header_primary-very-high" />
|
||||
<ColorExample @color="header_primary-high" />
|
||||
</section>
|
||||
<section class="color-row">
|
||||
{{color-example color="header_primary-medium"}}
|
||||
{{color-example color="header_primary-low-mid"}}
|
||||
{{color-example color="header_primary-low"}}
|
||||
<ColorExample @color="header_primary-medium" />
|
||||
<ColorExample @color="header_primary-low-mid" />
|
||||
<ColorExample @color="header_primary-low" />
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
<p>By default, all icons have the <pre class="pre-inline">.d-icon</pre> class applied along with a class containing the name of the icon (e.g., <pre class="pre-inline">.d-icon-link</pre>)</p>
|
||||
</div>
|
||||
|
||||
{{#styleguide-example title="d-icon - all available icons"}}
|
||||
{{styleguide-icons}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="d-icon - all available icons">
|
||||
<StyleguideIcons />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,76 +1,76 @@
|
||||
{{#styleguide-example title="text-field"}}
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="text-field">
|
||||
<TextField @placeholder="Placeholder" />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="password"}}
|
||||
{{password-field type="password" placeholder="Placeholder"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="password">
|
||||
<PasswordField @type="password" @placeholder="Placeholder" />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="textarea"}}
|
||||
{{textarea placeholder="Placeholder"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="textarea">
|
||||
<Textarea placeholder="Placeholder" />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="inline-form"}}
|
||||
<StyleguideExample @title="inline-form">
|
||||
<div class="inline-form">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
<TextField @placeholder="Placeholder" />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="inline-form with icon button"}}
|
||||
<StyleguideExample @title="inline-form with icon button">
|
||||
<div class="inline-form">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit"}}
|
||||
<TextField @placeholder="Placeholder" />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="full-width inline-form with single input"}}
|
||||
<StyleguideExample @title="full-width inline-form with single input">
|
||||
<div class="inline-form full-width">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
<TextField @placeholder="Placeholder" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="full-width inline-form with input and icon button"}}
|
||||
<StyleguideExample @title="full-width inline-form with input and icon button">
|
||||
<div class="inline-form full-width">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit"}}
|
||||
<TextField @placeholder="Placeholder" />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="inline-form with combo-box" initialValue=dummy.options.[0].name as |value|}}
|
||||
<StyleguideExample @title="inline-form with combo-box" @initialValue={{dummy.options.[0].name}} as |value|>
|
||||
<div class="inline-form">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
<TextField @placeholder="Placeholder" />
|
||||
<ComboBox @content={{dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="inline-form with multi-select"}}
|
||||
<StyleguideExample @title="inline-form with multi-select">
|
||||
<div class="inline-form">
|
||||
{{text-field}}
|
||||
{{multi-select content=dummy.options onChange=(action "dummy")}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
<TextField />
|
||||
<MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="inline-form with multi-select and label"}}
|
||||
<StyleguideExample @title="inline-form with multi-select and label">
|
||||
<div class="inline-form">
|
||||
<label>Text:</label>
|
||||
{{text-field}}
|
||||
{{multi-select content=dummy.options onChange=(action "dummy")}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
<TextField />
|
||||
<MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="full-width inline-form with search type input"}}
|
||||
<StyleguideExample @title="full-width inline-form with search type input">
|
||||
<div class="inline-form full-width">
|
||||
{{input placeholder="Search type input" type="search"}}
|
||||
<Input placeholder="Search type input" @type="search" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="category-notifications-button and regular button"}}
|
||||
<StyleguideExample @title="category-notifications-button and regular button">
|
||||
<div class="inline-form">
|
||||
{{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
|
||||
{{d-button icon="reply" type="submit" translatedLabel="Button"}}
|
||||
<CategoryNotificationsButton @category={{dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
|
||||
<DButton @icon="reply" @type="submit" @translatedLabel="Button" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{#styleguide-example title="spinner - small"}}
|
||||
<StyleguideExample @title="spinner - small">
|
||||
<div class="spinner small"></div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="spinner - regular"}}
|
||||
<StyleguideExample @title="spinner - regular">
|
||||
<div class="spinner"></div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,31 +1,28 @@
|
||||
{{#styleguide-example title="time-input"}}
|
||||
{{time-input}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="time-input">
|
||||
<TimeInput />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="date-input"}}
|
||||
{{date-input}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="date-input">
|
||||
<DateInput />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="date-time-input"}}
|
||||
{{date-time-input clearable=true}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="date-time-input">
|
||||
<DateTimeInput @clearable={{true}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="date-time-input-range"}}
|
||||
{{date-time-input-range}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="date-time-input-range">
|
||||
<DateTimeInputRange />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="date-time-input-range"}}
|
||||
{{date-time-input-range showFromTime=false showToTime=false}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="date-time-input-range">
|
||||
<DateTimeInputRange @showFromTime={{false}} @showToTime={{false}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="future-date-input"}}
|
||||
{{future-date-input
|
||||
displayLabelIcon="far-clock"
|
||||
clearable=true
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="future-date-input">
|
||||
<FutureDateInput @displayLabelIcon="far-clock" @clearable={{true}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="date-picker"}}
|
||||
{{date-picker defaultDate="YYYY-MM-DD"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="date-picker">
|
||||
<DatePicker @defaultDate="YYYY-MM-DD" />
|
||||
</StyleguideExample>
|
||||
|
||||
|
||||
@ -1,86 +1,77 @@
|
||||
{{#styleguide-example title="combo-box" initialValue=dummy.options.[0].name as |value|}}
|
||||
{{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="combo-box" @initialValue={{dummy.options.[0].name}} as |value|>
|
||||
<ComboBox @content={{dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="filterable combo-box" initialValue=dummy.categories.[0].name as |value|}}
|
||||
{{combo-box content=dummy.categories value=value options=(hash filterable=true) onChange=(fn (mut value))}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="filterable combo-box" @initialValue={{dummy.categories.[0].name}} as |value|>
|
||||
<ComboBox @content={{dummy.categories}} @value={{value}} @options={{hash filterable=true}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="combo-box with a default state" initialValue=dummy.options.[0].name as |value|}}
|
||||
{{combo-box content=dummy.options value=value options=(hash none="category.none") onChange=(fn (mut value))}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="combo-box with a default state" @initialValue={{dummy.options.[0].name}} as |value|>
|
||||
<ComboBox @content={{dummy.options}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="combo-box clearable" initialValue=dummy.options.[0].name as |value|}}
|
||||
{{combo-box content=dummy.options clearable=true value=value options=(hash none="category.none") onChange=(fn (mut value))}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="combo-box clearable" @initialValue={{dummy.options.[0].name}} as |value|>
|
||||
<ComboBox @content={{dummy.options}} @clearable={{true}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic-notifications-options" initialValue=1 as |value|}}
|
||||
{{topic-notifications-options topic=dummy.topic value=value onChange=(fn (mut value))}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-notifications-options" @initialValue={{1}} as |value|>
|
||||
<TopicNotificationsOptions @topic={{dummy.topic}} @value={{value}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic-footer-mobile-dropdown"}}
|
||||
{{topic-footer-mobile-dropdown topic=dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-footer-mobile-dropdown">
|
||||
<TopicFooterMobileDropdown @topic={{dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="category-chooser" initialValue=categories.[0].name as |value|}}
|
||||
{{category-chooser value=value onChange=(fn (mut value))}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="category-chooser" @initialValue={{categories.[0].name}} as |value|>
|
||||
<CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="pinned-button"}}
|
||||
{{pinned-button topic=dummy.pinnedTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="pinned-button">
|
||||
<PinnedButton @topic={{dummy.pinnedTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="pinned-options"}}
|
||||
{{pinned-options topic=dummy.pinnedTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="pinned-options">
|
||||
<PinnedOptions @topic={{dummy.pinnedTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="categories-admin-dropdown"}}
|
||||
{{categories-admin-dropdown onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="categories-admin-dropdown">
|
||||
<CategoriesAdminDropdown @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="category-notifications-button"}}
|
||||
{{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="category-notifications-button">
|
||||
<CategoryNotificationsButton @category={{dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="notifications-button"}}
|
||||
{{notifications-button options=(hash i18nPrefix="groups.notifications") value=2 onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="notifications-button">
|
||||
<NotificationsButton @options={{hash i18nPrefix="groups.notifications"}} @value={{2}} @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="dropdown-select-box"}}
|
||||
{{dropdown-select-box
|
||||
content=dummy.options
|
||||
onChange=(action "dummy")
|
||||
options=(hash
|
||||
<StyleguideExample @title="dropdown-select-box">
|
||||
<DropdownSelectBox @content={{dummy.options}} @onChange={{action "dummy"}} @options={{hash
|
||||
translatedNone="Something"
|
||||
)
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="future-date-input-selector"}}
|
||||
{{future-date-input-selector
|
||||
input=dummy.topicTimerUpdateDate
|
||||
includeWeekend=true
|
||||
includeForever=true
|
||||
options=(hash none="time_shortcut.select_timeframe")
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="future-date-input-selector">
|
||||
<FutureDateInputSelector @input={{dummy.topicTimerUpdateDate}} @includeWeekend={{true}} @includeForever={{true}} @options={{hash none="time_shortcut.select_timeframe"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="multi-select"}}
|
||||
{{multi-select content=dummy.options onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="multi-select">
|
||||
<MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="admin group-chooser"}}
|
||||
{{group-chooser selected=dummy.selectedGroups content=dummy.groups onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="admin group-chooser">
|
||||
<GroupChooser @selected={{dummy.selectedGroups}} @content={{dummy.groups}} @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="list-setting"}}
|
||||
{{list-setting settingValue=dummy.settings onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="list-setting">
|
||||
<ListSetting @settingValue={{dummy.settings}} @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="list-setting with colors"}}
|
||||
{{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="list-setting with colors">
|
||||
<ListSetting @settingValue={{dummy.colors}} @nameProperty="color" @onChange={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="user-notifications-dropdown"}}
|
||||
{{user-notifications-dropdown user=currentUser value="changeToNormal"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="user-notifications-dropdown">
|
||||
<UserNotificationsDropdown @user={{currentUser}} @value="changeToNormal" />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="topic-link"}}
|
||||
<StyleguideExample @title="topic-link">
|
||||
{{topic-link dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
{{#styleguide-example title="invisible"}}
|
||||
{{topic-status topic=dummy.invisibleTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="invisible">
|
||||
<TopicStatus @topic={{dummy.invisibleTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="closed"}}
|
||||
{{topic-status topic=dummy.closedTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="closed">
|
||||
<TopicStatus @topic={{dummy.closedTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="pinned"}}
|
||||
{{topic-status topic=dummy.pinnedTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="pinned">
|
||||
<TopicStatus @topic={{dummy.pinnedTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="unpinned"}}
|
||||
{{topic-status topic=dummy.unpinnedTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="unpinned">
|
||||
<TopicStatus @topic={{dummy.unpinnedTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="archived"}}
|
||||
{{topic-status topic=dummy.archivedTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="archived">
|
||||
<TopicStatus @topic={{dummy.archivedTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="warning"}}
|
||||
{{topic-status topic=dummy.warningTopic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="warning">
|
||||
<TopicStatus @topic={{dummy.warningTopic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="no status"}}
|
||||
{{topic-status topic=dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="no status">
|
||||
<TopicStatus @topic={{dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{#styleguide-section title="styleguide.title"}}
|
||||
<StyleguideSection @title="styleguide.title">
|
||||
<div class="description">
|
||||
{{i18n "styleguide.welcome"}}
|
||||
</div>
|
||||
{{/styleguide-section}}
|
||||
</StyleguideSection>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{#styleguide-example title="category-breadcrumbs"}}
|
||||
{{bread-crumbs categories=dummy.categories showTags=false}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="category-breadcrumbs">
|
||||
<BreadCrumbs @categories={{dummy.categories}} @showTags={{false}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#if siteSettings.tagging_enabled}}
|
||||
{{#styleguide-example title="category-breadcrumbs - tags"}}
|
||||
{{bread-crumbs categories=dummy.categories showTags=true}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="category-breadcrumbs - tags">
|
||||
<BreadCrumbs @categories={{dummy.categories}} @showTags={{true}} />
|
||||
</StyleguideExample>
|
||||
{{/if}}
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
{{#styleguide-example title="category-badge - bullet"}}
|
||||
<StyleguideExample @title="category-badge - bullet">
|
||||
{{#each dummy.categories as |c|}}
|
||||
{{category-badge c categoryStyle="bullet"}}
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="category-badge - bar"}}
|
||||
<StyleguideExample @title="category-badge - bar">
|
||||
{{#each dummy.categories as |c|}}
|
||||
{{category-badge c categoryStyle="bar"}}
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="category-badge - box"}}
|
||||
<StyleguideExample @title="category-badge - box">
|
||||
{{#each dummy.categories as |c|}}
|
||||
{{category-badge c categoryStyle="box"}}
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="category-badge - none"}}
|
||||
<StyleguideExample @title="category-badge - none">
|
||||
{{#each dummy.categories as |c|}}
|
||||
{{category-badge c categoryStyle="none"}}
|
||||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
{{#styleguide-example title="empty-state"}}
|
||||
{{empty-state
|
||||
title=dummy.sentence
|
||||
body=dummy.short_sentence
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="empty-state">
|
||||
<EmptyState @title={{dummy.sentence}} @body={{dummy.short_sentence}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,23 +1,12 @@
|
||||
{{#styleguide-example title="footer-message - default"}}
|
||||
{{footer-message education=dummy.sentence message=dummy.short_sentence}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="footer-message - default">
|
||||
<FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="footer-message - latest"}}
|
||||
{{footer-message
|
||||
education=dummy.sentence
|
||||
message=dummy.short_sentence
|
||||
latest=true
|
||||
canCreateTopicOnCategory=true
|
||||
createTopic=(action "dummy")
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="footer-message - latest">
|
||||
<FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} @latest={{true}} @canCreateTopicOnCategory={{true}} @createTopic={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="footer-message - top"}}
|
||||
{{footer-message
|
||||
education=dummy.sentence
|
||||
message=dummy.short_sentence
|
||||
top=true
|
||||
changePeriod=(action "dummy")
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="footer-message - top">
|
||||
<FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} @top={{true}} @changePeriod={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
{{#styleguide-example title="header-icons"}}
|
||||
{{mount-widget widget="header-icons"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="header-icons">
|
||||
<MountWidget @widget="header-icons" />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="header-icons - user"}}
|
||||
{{mount-widget widget="header-icons" args=(hash user=dummy.user)}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="header-icons - user">
|
||||
<MountWidget @widget="header-icons" @args={{hash user=dummy.user}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="header-icons - notifications"}}
|
||||
{{mount-widget
|
||||
widget="header-icons"
|
||||
args=(hash user=dummy.userWithUnread flagCount=5)}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="header-icons - notifications">
|
||||
<MountWidget @widget="header-icons" @args={{hash user=dummy.userWithUnread flagCount=5}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
{{#styleguide-example title="navigation-bar"}}
|
||||
{{navigation-bar navItems=dummy.navItems filterMode="latest"}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="navigation-bar">
|
||||
<NavigationBar @navItems={{dummy.navItems}} @filterMode="latest" />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".user-main .nav-pills"}}
|
||||
{{#mobile-nav class="main-nav" desktopClass="nav nav-pills user-nav"}}
|
||||
<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}}
|
||||
{{/mobile-nav}}
|
||||
{{/styleguide-example}}
|
||||
</MobileNav>
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="group page navigation-bar"}}
|
||||
{{#mobile-nav class="group-nav" desktopClass="nav nav-pills"}}
|
||||
<StyleguideExample @title="group page navigation-bar">
|
||||
<MobileNav @class="group-nav" @desktopClass="nav nav-pills">
|
||||
<li class="group-dropdown">
|
||||
{{group-dropdown groups=dummy.groupNames value="staff"}}
|
||||
<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}}
|
||||
{{/mobile-nav}}
|
||||
{{/styleguide-example}}
|
||||
</MobileNav>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{{#styleguide-example title=".nav-stacked" class="half-size"}}
|
||||
{{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
|
||||
<StyleguideExample @title=".nav-stacked" class="half-size">
|
||||
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
|
||||
{{#each dummy.navItems as |ni|}}
|
||||
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
|
||||
{{/each}}
|
||||
{{/mobile-nav}}
|
||||
{{/styleguide-example}}
|
||||
</MobileNav>
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".user-navigation .nav-stacked" class="half-size"}}
|
||||
{{#d-section class="user-navigation"}}
|
||||
{{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
|
||||
<StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
|
||||
<DSection @class="user-navigation">
|
||||
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
|
||||
{{#each dummy.navItems as |ni|}}
|
||||
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
|
||||
{{/each}}
|
||||
{{/mobile-nav}}
|
||||
{{/d-section}}
|
||||
{{/styleguide-example}}
|
||||
</MobileNav>
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="post-menu"}}
|
||||
{{mount-widget widget="post-menu" args=dummy.transformedPost}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="post-menu">
|
||||
<MountWidget @widget="post-menu" @args={{dummy.transformedPost}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#styleguide-example title="signup-cta"}}
|
||||
{{signup-cta}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="signup-cta">
|
||||
<SignupCta />
|
||||
</StyleguideExample>
|
||||
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
{{#styleguide-example title="topic list item"}}
|
||||
<StyleguideExample @title="topic list item">
|
||||
<table class="topic-list">
|
||||
<tbody>
|
||||
{{topic-list-item topic=dummy.topic showPosters=true}}
|
||||
<TopicListItem @topic={{dummy.topic}} @showPosters={{true}} />
|
||||
</tbody>
|
||||
</table>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic list item - hide category"}}
|
||||
<StyleguideExample @title="topic list item - hide category">
|
||||
<table class="topic-list">
|
||||
<tbody>
|
||||
{{topic-list-item topic=dummy.topic hideCategory=true showPosters=true}}
|
||||
<TopicListItem @topic={{dummy.topic}} @hideCategory={{true}} @showPosters={{true}} />
|
||||
</tbody>
|
||||
</table>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic list item - show likes"}}
|
||||
<StyleguideExample @title="topic list item - show likes">
|
||||
<table class="topic-list">
|
||||
<tbody>
|
||||
{{topic-list-item topic=dummy.topic showLikes=true showPosters=true}}
|
||||
<TopicListItem @topic={{dummy.topic}} @showLikes={{true}} @showPosters={{true}} />
|
||||
</tbody>
|
||||
</table>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic list item - latest" class="half-size"}}
|
||||
{{latest-topic-list-item topic=dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic list item - latest" class="half-size">
|
||||
<LatestTopicListItem @topic={{dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="topic-notifications-button"}}
|
||||
{{topic-notifications-button topic=dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-notifications-button">
|
||||
<TopicNotificationsButton @topic={{dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="topic-timer-info"}}
|
||||
{{topic-timer-info statusType="reminder" executeAt=dummy.soon}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-timer-info">
|
||||
<TopicTimerInfo @statusType="reminder" @executeAt={{dummy.soon}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="post"}}
|
||||
{{mount-widget widget="post" args=dummy.transformedPost}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="post">
|
||||
<MountWidget @widget="post" @args={{dummy.transformedPost}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="topic-map"}}
|
||||
{{mount-widget widget="topic-map" args=dummy.transformedPost}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-map">
|
||||
<MountWidget @widget="topic-map" @args={{dummy.transformedPost}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{#styleguide-example title="topic-footer-buttons - logged in"}}
|
||||
{{topic-footer-buttons topic=dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-footer-buttons - logged in">
|
||||
<TopicFooterButtons @topic={{dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic-footer-buttons - anonymous"}}
|
||||
<StyleguideExample @title="topic-footer-buttons - anonymous">
|
||||
<div id="topic-footer-buttons">
|
||||
{{d-button icon="reply" class="btn-primary pull-right" label="topic.reply.title"}}
|
||||
<DButton @icon="reply" @class="btn-primary pull-right" @label="topic.reply.title" />
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{#styleguide-example title="topic-list"}}
|
||||
{{topic-list topics=dummy.topics showPosters=true}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-list">
|
||||
<TopicList @topics={{dummy.topics}} @showPosters={{true}} />
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title="topic-list - hide posters"}}
|
||||
{{topic-list topics=dummy.topics showPosters=false}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="topic-list - hide posters">
|
||||
<TopicList @topics={{dummy.topics}} @showPosters={{false}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="basic-topic-list" class="half-size"}}
|
||||
{{basic-topic-list topics=dummy.topics}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="basic-topic-list" class="half-size">
|
||||
<BasicTopicList @topics={{dummy.topics}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="categories-only"}}
|
||||
{{categories-only categories=dummy.categories}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="categories-only">
|
||||
<CategoriesOnly @categories={{dummy.categories}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{{#styleguide-example title="d-modal"}}
|
||||
{{#d-modal closeModal=(action "dummy") modalStyle="inline-modal" title=(i18n "styleguide.sections.modal.header")}}
|
||||
{{#d-modal-body}}
|
||||
<StyleguideExample @title="d-modal">
|
||||
<DModal @closeModal={{action "dummy"}} @modalStyle="inline-modal" @title={{i18n "styleguide.sections.modal.header"}}>
|
||||
<DModalBody>
|
||||
{{html-safe dummy.lorem}}
|
||||
{{/d-modal-body}}
|
||||
</DModalBody>
|
||||
<div class="modal-footer">
|
||||
{{i18n "styleguide.sections.modal.footer"}}
|
||||
</div>
|
||||
{{/d-modal}}
|
||||
{{/styleguide-example}}
|
||||
</DModal>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{{#styleguide-example title="navigation"}}
|
||||
<StyleguideExample @title="navigation">
|
||||
<div class="list-controls">
|
||||
<div class="container">
|
||||
{{#d-section class="navigation-container"}}
|
||||
{{bread-crumbs categories=dummy.categories}}
|
||||
{{navigation-bar navItems=dummy.navItems filterMode="latest"}}
|
||||
<DSection @class="navigation-container">
|
||||
<BreadCrumbs @categories={{dummy.categories}} />
|
||||
<NavigationBar @navItems={{dummy.navItems}} @filterMode="latest" />
|
||||
<div class="navigation-controls">
|
||||
{{categories-admin-dropdown}}
|
||||
{{create-topic-button canCreateTopic=true}}
|
||||
<CategoriesAdminDropdown />
|
||||
<CreateTopicButton @canCreateTopic={{true}} />
|
||||
</div>
|
||||
{{/d-section}}
|
||||
</DSection>
|
||||
</div>
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
{{#styleguide-example title="site header - in topic - scrolled"}}
|
||||
<StyleguideExample @title="site header - in topic - scrolled">
|
||||
<div class="d-header-wrap">
|
||||
<header class="d-header">
|
||||
<div class="wrap">
|
||||
<div class="contents">
|
||||
{{mount-widget widget="home-logo" args=(hash minimized=true)}}
|
||||
{{mount-widget widget="header-topic-info" args=dummy}}
|
||||
<MountWidget @widget="home-logo" @args={{hash minimized=true}} />
|
||||
<MountWidget @widget="header-topic-info" @args={{dummy}} />
|
||||
<div class="panel clearfix">
|
||||
{{mount-widget widget="header-icons" args=(hash user=dummy.user)}}
|
||||
<MountWidget @widget="header-icons" @args={{hash user=dummy.user}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
</StyleguideExample>
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{#styleguide-example title="suggested-topics"}}
|
||||
{{suggested-topics topic=dummy.topic}}
|
||||
{{/styleguide-example}}
|
||||
<StyleguideExample @title="suggested-topics">
|
||||
<SuggestedTopics @topic={{dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{#styleguide-example title=".user-main .about.collapsed-info.no-background"}}
|
||||
{{#d-section class="user-main"}}
|
||||
<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">
|
||||
@ -27,11 +27,11 @@
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
</section>
|
||||
{{/d-section}}
|
||||
{{/styleguide-example}}
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".user-main .about.collapsed-info.has-background"}}
|
||||
{{#d-section class="user-main"}}
|
||||
<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">
|
||||
@ -59,11 +59,11 @@
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
</section>
|
||||
{{/d-section}}
|
||||
{{/styleguide-example}}
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".user-main .about.no-background"}}
|
||||
{{#d-section class="user-main"}}
|
||||
<StyleguideExample @title=".user-main .about.no-background">
|
||||
<DSection @class="user-main">
|
||||
<section class="about no-background">
|
||||
|
||||
<div class="staff-counters">
|
||||
@ -142,7 +142,7 @@
|
||||
<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}}>
|
||||
{{d-button icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
|
||||
<DButton @icon="far-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">
|
||||
@ -150,15 +150,15 @@
|
||||
<span><a href="#" class="group-link">{{group.name}}</a></span>
|
||||
{{/each}}
|
||||
</dd>
|
||||
{{d-button icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
|
||||
<DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
{{/d-section}}
|
||||
{{/styleguide-example}}
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
|
||||
{{#styleguide-example title=".user-main .about.has-background"}}
|
||||
{{#d-section class="user-main"}}
|
||||
<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> {{i18n "user.staff_counters.flags_given"}}</div>
|
||||
@ -237,7 +237,7 @@
|
||||
<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}}>
|
||||
{{d-button icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
|
||||
<DButton @icon="far-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">
|
||||
@ -245,9 +245,9 @@
|
||||
<span><a href="#" class="group-link">{{group.name}}</a></span>
|
||||
{{/each}}
|
||||
</dd>
|
||||
{{d-button icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
|
||||
<DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
{{/d-section}}
|
||||
{{/styleguide-example}}
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#styleguide-section section=section}}
|
||||
<StyleguideSection @section={{section}}>
|
||||
{{#if note}}
|
||||
<div class="styleguide-note">
|
||||
{{component (concat "notes/" note)}}
|
||||
@ -6,4 +6,4 @@
|
||||
{{/if}}
|
||||
|
||||
{{outlet}}
|
||||
{{/styleguide-section}}
|
||||
</StyleguideSection>
|
||||
|
||||
Reference in New Issue
Block a user