How to use ember-css-modules - 10 common examples

import styles from './styles';
import template from './template';

// TODO: Improve documentation in the future
/**
 * File browser widget
 *
 * Sample usage:
 * ```handlebars
 * {{file-browser
 * }}
 * ```
 * @class file-browser
 */
@layout(template, styles)
@localClassNames('FileList')
export default class FileList extends Component {
    @service currentUser!: CurrentUser;
    @service i18n!: I18N;

    node: Node | null = null;
    items: File[] = defaultTo(this.items, []);
    showFilterClicked: boolean = false;
    filter: string = defaultTo(this.filter, '');
    user?: User;
    @requiredAction openFile!: (item: File) => void;

    @notEmpty('filter') showFilterInput!: boolean;

    @computed('user')
    get edit(): boolean {
        return !!this.user && this.user.id === this.currentUser.currentUserId;

* @submodule components
 */

/**
 * Display the correct file tree icon for on the item to be displayed
 *
 * Sample usage:
 * ```handlebars
 * {{file-icon item=item}}
 * ```
 * @class file-icon
 */

@layout(template, styles)
@tagName('span')
@localClassNames('FileIcon')
export default class FileIcon extends Component {
    item: File = this.item;

    @computed('item', 'item.expanded')
    get iconName(): string {
        // TODO: More icons!

        if (this.item.isFolder) {
            return 'folder';
        }

        if (this.item.name) {
            return iconFromName(this.item.name);
        }

        if (this.item.isNode) {

import { action } from '@ember-decorators/object';
import { service } from '@ember-decorators/service';
import Component from '@ember/component';
import { task } from 'ember-concurrency';
import { localClassNames } from 'ember-css-modules';
import config from 'ember-get-config';

import { layout } from 'ember-osf-web/decorators/component';
import Analytics from 'ember-osf-web/services/analytics';
import CurrentUser from 'ember-osf-web/services/current-user';

import styles from './styles';
import template from './template';

@layout(template, styles)
@localClassNames('TosConsentBanner')
export default class TosConsentBanner extends Component {
    @service analytics!: Analytics;
    @service currentUser!: CurrentUser;

    // Private properties
    show = false;
    didValidate = false;
    hasSubmitted = false;

    saveUser = task(function *(this: TosConsentBanner) {
        const user = yield this.currentUser.user;
        const { validations } = yield user.validate();
        this.set('didValidate', true);
        this.analytics.click('button', 'ToS Consent Banner - continue');

        if (!validations.isValid) {

SuccessMove = 'successMove',
}

// TODO: Improve documentation in the future
/**
 * File browser widget
 *
 * Sample usage:
 * ```handlebars
 * {{file-browser
 * }}
 * ```
 * @class file-browser
 */
@layout(template, styles)
@localClassNames('file-browser')
export default class FileBrowser extends Component {
    @service analytics!: Analytics;
    @service currentUser!: CurrentUser;
    @service i18n!: I18N;
    @service ready!: Ready;
    @service store!: DS.Store;
    @service toast!: Toast;

    @requiredAction openFile!: (file: File, show: string) => void;
    @requiredAction moveFile!: (file: File, node: Node) => void;
    @requiredAction renameFile!: (file: File, renameValue: string, conflict?: string, conflictingItem?: File) => void;
    @requiredAction addFile!: (fileId: string) => void;
    @requiredAction deleteFiles!: (files: File[]) => void;

    clickHandler?: JQuery.EventHandlerBase;
    dismissPop?: () => void;

* ```
 * @class file-icon
 */
@layout(template, styles)
@classNames('container')
@localClassNames('file-browser-item')
export default class FileBrowserItem extends Component {
    @service analytics!: Analytics;
    @service store!: DS.Store;

    item?: File;
    @requiredAction openItem!: (item: File | undefined, show: string) => void;
    @requiredAction selectItem!: (item: File | undefined) => void;
    @requiredAction selectMultiple!: (item: File | undefined, metaKey: boolean) => void;

    @localClassName()
    @computed('item.isSelected')
    get selected(): boolean {
        return !!this.item && this.item.isSelected;
    }

    @computed('item.size')
    get size(): string {
        // TODO: This should be i18n-ized
        return this.item && this.item.size ? humanFileSize(this.item.size, true) : '';
    }

    @computed('item.dateModified')
    get date(): string {
        // TODO: This should be i18n-ized
        return this.item ? moment(this.item.dateModified).format('YYYY-MM-DD h:mm A') : '';
    }

import { computed } from '@ember-decorators/object';
import { service } from '@ember-decorators/service';
import Component from '@ember/component';
import { localClassNames } from 'ember-css-modules';
import Store from 'ember-data/store';

import { layout } from 'ember-osf-web/decorators/component';
import RegistrationSchema from 'ember-osf-web/models/registration-schema';
import Analytics from 'ember-osf-web/services/analytics';
import { ShareRegistration } from 'registries/services/share-search';
import template from './template';

@layout(template)
@localClassNames('RecentList')
export default class RegistriesRecentList extends Component {
    static positionalParams = ['items'];

    @service analytics!: Analytics;
    @service store!: Store;

    items!: ShareRegistration[];

    @computed('items')
    get registrations() {
        const schemaLookup = this.store.peekAll('registration-schema').reduce(
            (acc, schema) => ({ ...acc, [schema.name]: schema }),
            { } as { [key: string]: RegistrationSchema },
        );

        return this.items.map(item => {

* Sample usage:
 * ```handlebars
 * {{file-browser-item
 *    file=file
 *    selectItem=(action 'selectItem') - Action handling clicking on the body of the row
 *    openItem=(action 'openItem') - Action handling clicking the link-name of the file
 *    selectMultiple=(action 'selectMultiple') - Action handling clicking multiple rows, through cmd/ctrl and/or shift
 *    display=display Array[Strings] - Indicating which rows of information to display
 *    nameColumnWidth=nameColumnWidth String of number - How wide is the main collumn (name)
 * }}
 * ```
 * @class file-icon
 */
@layout(template, styles)
@classNames('container')
@localClassNames('file-browser-item')
export default class FileBrowserItem extends Component {
    @service analytics!: Analytics;
    @service store!: DS.Store;

    item?: File;
    @requiredAction openItem!: (item: File | undefined, show: string) => void;
    @requiredAction selectItem!: (item: File | undefined) => void;
    @requiredAction selectMultiple!: (item: File | undefined, metaKey: boolean) => void;

    @localClassName()
    @computed('item.isSelected')
    get selected(): boolean {
        return !!this.item && this.item.isSelected;
    }

    @computed('item.size')

import { action } from '@ember-decorators/object';
import { service } from '@ember-decorators/service';
import Component from '@ember/component';
import { localClassNames } from 'ember-css-modules';

import { layout, requiredAction } from 'ember-osf-web/decorators/component';
import Analytics from 'ember-osf-web/services/analytics';
import defaultTo from 'ember-osf-web/utils/default-to';
import template from './template';

@layout(template)
@localClassNames('RegistriesHeader')
export default class RegistriesHeader extends Component {
    @service analytics!: Analytics;
    @requiredAction onSearch!: (value: string) => void;

    today = new Date();
    showingHelp = false;
    value: string = defaultTo(this.value, '');
    searchable: number = defaultTo(this.searchable, 0);
    showHelp: boolean = defaultTo(this.showHelp, false);

    _onSearch() {
        this.analytics.click('link', 'Index - Search', this.value);
        this.onSearch(this.value);
    }

    @action

import { tagName } from '@ember-decorators/component';
import { action, computed } from '@ember-decorators/object';
import Component from '@ember/component';
import { localClassNames } from 'ember-css-modules';

import { layout } from 'ember-osf-web/decorators/component';
import defaultTo from 'ember-osf-web/utils/default-to';
import styles from './styles';
import template from './template';

@layout(template, styles)
@tagName('section')
@localClassNames('Component')
export default class SubmitSection extends Component {
    tooltip: string = this.tooltip;
    title: string = this.title;
    description?: string = this.description;
    section: number = this.section;
    activeSection: number = this.activeSection;
    savedSections: number[] = this.savedSections;
    editable: boolean = defaultTo(this.editable, true);

    @computed('activeSection', 'section')
    get isOpen(): boolean {
        return this.activeSection === this.section;
    }

    @computed('savedSections.[]', 'section')
    get didSave(): boolean {

import Preprint from 'ember-osf-web/models/preprint';
import Registration from 'ember-osf-web/models/registration';
import Analytics from 'ember-osf-web/services/analytics';
import Theme from 'ember-osf-web/services/theme';
import defaultTo from 'ember-osf-web/utils/default-to';

import { FacetContext } from '../discover-page/component';
import styles from './styles';
import template from './template';

type Collectable = Collection | Node | Preprint | Registration;
type CollectableType = keyof Pick;

@layout(template, styles)
@classNames('p-sm')
@localClassNames('search-result')
export default class CollectionSearchResult extends Component {
    @service analytics!: Analytics;
    @service theme!: Theme;

    hostAppName = config.hostAppName;
    maxTags: number = defaultTo(this.maxTags, 10);
    maxCreators: number = defaultTo(this.maxCreators, 10);
    maxDescription: number = defaultTo(this.maxDescription, 300);
    showBody: boolean = defaultTo(this.showBody, false);
    facetContexts: FacetContext[] = this.facetContexts;
    queryParams: string[] | null = defaultTo(this.queryParams, null);
    result: CollectedMetadatum = this.result;

    @alias('result.guid.content') item!: Collectable;
    @alias('item.constructor.modelName') type!: CollectableType;