├── .editorconfig ├── .ember-cli ├── .eslintignore ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── renovate.json └── workflows │ └── ci.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .npmignore ├── .prettierignore ├── .prettierrc.js ├── .template-lintrc.js ├── .watchmanconfig ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── addon-test-support └── mock-drop-zone-event.js ├── addon ├── -private │ ├── auto-wrapper.js │ └── drop-zone-state.js ├── .gitkeep ├── components │ ├── component-proxy.js │ ├── key-event-listener.js │ ├── polaris-action-list.js │ ├── polaris-action-list │ │ ├── item.js │ │ └── section.js │ ├── polaris-avatar.js │ ├── polaris-badge.js │ ├── polaris-banner.js │ ├── polaris-breadcrumbs.js │ ├── polaris-button-group.js │ ├── polaris-button-group │ │ └── item.js │ ├── polaris-button.js │ ├── polaris-button │ │ └── content.js │ ├── polaris-callout-card.js │ ├── polaris-caption.js │ ├── polaris-card.js │ ├── polaris-card │ │ ├── section-header.js │ │ └── section.js │ ├── polaris-checkbox.js │ ├── polaris-choice-list.js │ ├── polaris-choice.js │ ├── polaris-choice │ │ └── label.js │ ├── polaris-color-picker.js │ ├── polaris-color-picker │ │ ├── alpha-picker.js │ │ ├── hue-picker.js │ │ └── slidable.js │ ├── polaris-connected.js │ ├── polaris-connected │ │ └── item.js │ ├── polaris-data-table.js │ ├── polaris-data-table │ │ ├── cell.js │ │ ├── heading.js │ │ ├── navigation.js │ │ ├── row.js │ │ └── total.js │ ├── polaris-date-picker.js │ ├── polaris-date-picker │ │ ├── day.js │ │ ├── month.js │ │ └── weekday.js │ ├── polaris-description-list.js │ ├── polaris-display-text.js │ ├── polaris-drop-zone.js │ ├── polaris-drop-zone │ │ └── file-upload.js │ ├── polaris-empty-search-result.js │ ├── polaris-empty-state.js │ ├── polaris-empty-state │ │ └── details.js │ ├── polaris-footer-help.js │ ├── polaris-form-layout.js │ ├── polaris-form-layout │ │ ├── group.js │ │ └── item.js │ ├── polaris-form.js │ ├── polaris-heading.js │ ├── polaris-icon.js │ ├── polaris-inline-error.js │ ├── polaris-label.js │ ├── polaris-labelled.js │ ├── polaris-layout.js │ ├── polaris-layout │ │ ├── annotated-section.js │ │ ├── annotation-content.js │ │ ├── annotation.js │ │ └── section.js │ ├── polaris-link.js │ ├── polaris-list.js │ ├── polaris-list │ │ └── item.js │ ├── polaris-option-list.js │ ├── polaris-option-list │ │ ├── checkbox.js │ │ └── option.js │ ├── polaris-page-actions.js │ ├── polaris-page.js │ ├── polaris-page │ │ ├── action-icon.js │ │ ├── action.js │ │ ├── header.js │ │ └── header │ │ │ ├── action-group.js │ │ │ └── rollup.js │ ├── polaris-pagination.js │ ├── polaris-popover.js │ ├── polaris-popover │ │ └── content.js │ ├── polaris-progress-bar.js │ ├── polaris-radio-button.js │ ├── polaris-range-slider.js │ ├── polaris-resource-list.js │ ├── polaris-resource-list │ │ ├── bulk-actions.js │ │ ├── bulk-actions │ │ │ └── bulk-action-button.js │ │ ├── checkable-button.js │ │ ├── filter-control.js │ │ ├── filter-control │ │ │ ├── date-selector.js │ │ │ ├── filter-creator.js │ │ │ └── filter-value-selector.js │ │ ├── item.js │ │ ├── loading-overlay.js │ │ └── provider.js │ ├── polaris-select.js │ ├── polaris-setting-toggle.js │ ├── polaris-skeleton-body-text.js │ ├── polaris-skeleton-display-text.js │ ├── polaris-skeleton-page.js │ ├── polaris-skeleton-page │ │ └── action.js │ ├── polaris-skeleton-thumbnail.js │ ├── polaris-spinner.js │ ├── polaris-stack.js │ ├── polaris-stack │ │ └── item.js │ ├── polaris-sticky.js │ ├── polaris-subheading.js │ ├── polaris-tag.js │ ├── polaris-text-container.js │ ├── polaris-text-field.js │ ├── polaris-text-field │ │ ├── resizer.js │ │ └── spinner.js │ ├── polaris-text-style.js │ ├── polaris-thumbnail.js │ ├── polaris-unstyled-link.js │ ├── polaris-visually-hidden.js │ ├── render-content.js │ └── wrapper-element.js ├── helpers │ ├── is-component-definition.js │ ├── polaris-data-table │ │ └── insert-presentational-cell.js │ ├── polaris-date-picker │ │ └── derive-range.js │ └── polaris-select │ │ └── is-group.js ├── mixins │ └── components │ │ └── svg-handling.js ├── services │ └── sticky-manager.js ├── templates │ └── components │ │ ├── key-event-listener.hbs │ │ ├── polaris-action-list.hbs │ │ ├── polaris-action-list │ │ ├── item.hbs │ │ └── section.hbs │ │ ├── polaris-avatar.hbs │ │ ├── polaris-badge.hbs │ │ ├── polaris-banner.hbs │ │ ├── polaris-breadcrumbs.hbs │ │ ├── polaris-button-group.hbs │ │ ├── polaris-button-group │ │ └── item.hbs │ │ ├── polaris-button.hbs │ │ ├── polaris-button │ │ └── content.hbs │ │ ├── polaris-callout-card.hbs │ │ ├── polaris-caption.hbs │ │ ├── polaris-card.hbs │ │ ├── polaris-card │ │ ├── section-header.hbs │ │ └── section.hbs │ │ ├── polaris-checkbox.hbs │ │ ├── polaris-choice-list.hbs │ │ ├── polaris-choice.hbs │ │ ├── polaris-choice │ │ └── label.hbs │ │ ├── polaris-color-picker.hbs │ │ ├── polaris-color-picker │ │ ├── alpha-picker.hbs │ │ ├── hue-picker.hbs │ │ └── slidable.hbs │ │ ├── polaris-connected.hbs │ │ ├── polaris-connected │ │ └── item.hbs │ │ ├── polaris-data-table.hbs │ │ ├── polaris-data-table │ │ ├── cell.hbs │ │ ├── heading.hbs │ │ ├── navigation.hbs │ │ ├── row.hbs │ │ └── total.hbs │ │ ├── polaris-date-picker.hbs │ │ ├── polaris-date-picker │ │ ├── day.hbs │ │ ├── month.hbs │ │ └── weekday.hbs │ │ ├── polaris-description-list.hbs │ │ ├── polaris-display-text.hbs │ │ ├── polaris-drop-zone.hbs │ │ ├── polaris-drop-zone │ │ └── file-upload.hbs │ │ ├── polaris-empty-search-result.hbs │ │ ├── polaris-empty-state.hbs │ │ ├── polaris-empty-state │ │ └── details.hbs │ │ ├── polaris-footer-help.hbs │ │ ├── polaris-form-layout.hbs │ │ ├── polaris-form-layout │ │ ├── group.hbs │ │ └── item.hbs │ │ ├── polaris-form.hbs │ │ ├── polaris-heading.hbs │ │ ├── polaris-icon.hbs │ │ ├── polaris-inline-error.hbs │ │ ├── polaris-label.hbs │ │ ├── polaris-labelled.hbs │ │ ├── polaris-layout.hbs │ │ ├── polaris-layout │ │ ├── annotated-section.hbs │ │ ├── annotation-content.hbs │ │ ├── annotation.hbs │ │ └── section.hbs │ │ ├── polaris-link.hbs │ │ ├── polaris-list.hbs │ │ ├── polaris-list │ │ └── item.hbs │ │ ├── polaris-option-list.hbs │ │ ├── polaris-option-list │ │ ├── checkbox.hbs │ │ └── option.hbs │ │ ├── polaris-page-actions.hbs │ │ ├── polaris-page.hbs │ │ ├── polaris-page │ │ ├── action-icon.hbs │ │ ├── action.hbs │ │ ├── header.hbs │ │ └── header │ │ │ ├── action-group.hbs │ │ │ └── rollup.hbs │ │ ├── polaris-pagination.hbs │ │ ├── polaris-popover.hbs │ │ ├── polaris-popover │ │ └── content.hbs │ │ ├── polaris-progress-bar.hbs │ │ ├── polaris-radio-button.hbs │ │ ├── polaris-range-slider.hbs │ │ ├── polaris-resource-list.hbs │ │ ├── polaris-resource-list │ │ ├── bulk-actions.hbs │ │ ├── bulk-actions │ │ │ └── bulk-action-button.hbs │ │ ├── checkable-button.hbs │ │ ├── filter-control.hbs │ │ ├── filter-control │ │ │ ├── date-selector.hbs │ │ │ ├── filter-creator.hbs │ │ │ └── filter-value-selector.hbs │ │ ├── item.hbs │ │ └── loading-overlay.hbs │ │ ├── polaris-select.hbs │ │ ├── polaris-setting-toggle.hbs │ │ ├── polaris-skeleton-body-text.hbs │ │ ├── polaris-skeleton-display-text.hbs │ │ ├── polaris-skeleton-page.hbs │ │ ├── polaris-skeleton-page │ │ └── action.hbs │ │ ├── polaris-skeleton-thumbnail.hbs │ │ ├── polaris-spinner.hbs │ │ ├── polaris-stack.hbs │ │ ├── polaris-stack │ │ └── item.hbs │ │ ├── polaris-sticky.hbs │ │ ├── polaris-subheading.hbs │ │ ├── polaris-tag.hbs │ │ ├── polaris-text-container.hbs │ │ ├── polaris-text-field.hbs │ │ ├── polaris-text-field │ │ ├── resizer.hbs │ │ └── spinner.hbs │ │ ├── polaris-text-style.hbs │ │ ├── polaris-thumbnail.hbs │ │ ├── polaris-unstyled-link.hbs │ │ ├── polaris-visually-hidden.hbs │ │ ├── render-content.hbs │ │ └── wrapper-element.hbs └── utils │ ├── breakpoints.js │ ├── color.js │ ├── data-table.js │ ├── dates.js │ ├── deprecate-class-argument.js │ ├── dom.js │ ├── drop-zone.js │ ├── focus.js │ ├── id.js │ ├── math.js │ └── normalize-auto-complete.js ├── app ├── .gitkeep ├── components │ ├── component-proxy.js │ ├── key-event-listener.js │ ├── polaris-action-list.js │ ├── polaris-action-list │ │ ├── item.js │ │ └── section.js │ ├── polaris-avatar.js │ ├── polaris-badge.js │ ├── polaris-banner.js │ ├── polaris-breadcrumbs.js │ ├── polaris-button-group.js │ ├── polaris-button-group │ │ └── item.js │ ├── polaris-button.js │ ├── polaris-button │ │ └── content.js │ ├── polaris-callout-card.js │ ├── polaris-caption.js │ ├── polaris-card.js │ ├── polaris-card │ │ ├── section-header.js │ │ └── section.js │ ├── polaris-checkbox.js │ ├── polaris-choice-list.js │ ├── polaris-choice.js │ ├── polaris-choice │ │ └── label.js │ ├── polaris-color-picker.js │ ├── polaris-color-picker │ │ ├── alpha-picker.js │ │ ├── hue-picker.js │ │ └── slidable.js │ ├── polaris-connected.js │ ├── polaris-connected │ │ └── item.js │ ├── polaris-data-table.js │ ├── polaris-data-table │ │ ├── cell.js │ │ ├── heading.js │ │ ├── navigation.js │ │ ├── row.js │ │ └── total.js │ ├── polaris-date-picker.js │ ├── polaris-date-picker │ │ ├── day.js │ │ ├── month.js │ │ └── weekday.js │ ├── polaris-description-list.js │ ├── polaris-display-text.js │ ├── polaris-drop-zone.js │ ├── polaris-drop-zone │ │ └── file-upload.js │ ├── polaris-empty-search-result.js │ ├── polaris-empty-state.js │ ├── polaris-empty-state │ │ └── details.js │ ├── polaris-footer-help.js │ ├── polaris-form-layout.js │ ├── polaris-form-layout │ │ ├── group.js │ │ └── item.js │ ├── polaris-form.js │ ├── polaris-heading.js │ ├── polaris-icon.js │ ├── polaris-inline-error.js │ ├── polaris-label.js │ ├── polaris-labelled.js │ ├── polaris-layout.js │ ├── polaris-layout │ │ ├── annotated-section.js │ │ ├── annotation-content.js │ │ ├── annotation.js │ │ └── section.js │ ├── polaris-link.js │ ├── polaris-list.js │ ├── polaris-list │ │ └── item.js │ ├── polaris-option-list.js │ ├── polaris-option-list │ │ ├── checkbox.js │ │ └── option.js │ ├── polaris-page-actions.js │ ├── polaris-page.js │ ├── polaris-page │ │ ├── action-icon.js │ │ ├── action.js │ │ ├── header.js │ │ └── header │ │ │ ├── action-group.js │ │ │ └── rollup.js │ ├── polaris-pagination.js │ ├── polaris-popover.js │ ├── polaris-popover │ │ └── content.js │ ├── polaris-progress-bar.js │ ├── polaris-radio-button.js │ ├── polaris-range-slider.js │ ├── polaris-resource-list.js │ ├── polaris-resource-list │ │ ├── bulk-actions.js │ │ ├── bulk-actions │ │ │ └── bulk-action-button.js │ │ ├── checkable-button.js │ │ ├── filter-control.js │ │ ├── filter-control │ │ │ ├── date-selector.js │ │ │ ├── filter-creator.js │ │ │ └── filter-value-selector.js │ │ ├── item.js │ │ ├── loading-overlay.js │ │ └── provider.js │ ├── polaris-select.js │ ├── polaris-setting-toggle.js │ ├── polaris-skeleton-body-text.js │ ├── polaris-skeleton-display-text.js │ ├── polaris-skeleton-page.js │ ├── polaris-skeleton-page │ │ └── action.js │ ├── polaris-skeleton-thumbnail.js │ ├── polaris-spinner.js │ ├── polaris-stack.js │ ├── polaris-stack │ │ └── item.js │ ├── polaris-sticky.js │ ├── polaris-subheading.js │ ├── polaris-tag.js │ ├── polaris-text-container.js │ ├── polaris-text-field.js │ ├── polaris-text-field │ │ ├── resizer.js │ │ └── spinner.js │ ├── polaris-text-style.js │ ├── polaris-thumbnail.js │ ├── polaris-unstyled-link.js │ ├── polaris-visually-hidden.js │ ├── render-content.js │ └── wrapper-element.js ├── helpers │ ├── is-component-definition.js │ ├── polaris-data-table │ │ └── insert-presentational-cell.js │ ├── polaris-date-picker │ │ └── derive-range.js │ └── polaris-select │ │ └── is-group.js ├── services │ └── sticky-manager.js ├── styles │ ├── components │ │ └── polaris-popover.scss │ └── ember-polaris.scss └── utils │ ├── breakpoints.js │ ├── drop-zone.js │ ├── focus.js │ ├── id.js │ └── normalize-auto-complete.js ├── blueprints └── ember-polaris │ └── index.js ├── config ├── ember-try.js ├── environment.js └── release.js ├── docs ├── action-list.md ├── avatar.md ├── badge.md ├── banner.md ├── button-group.md ├── button.md ├── callout-card.md ├── caption.md ├── card.md ├── checkbox.md ├── choice-list.md ├── color-picker.md ├── data-table.md ├── date-picker.md ├── description-list.md ├── display-text.md ├── drop-zone.md ├── empty-state.md ├── footer-help.md ├── form-layout.md ├── form.md ├── heading.md ├── icon.md ├── inline-error.md ├── layout.md ├── link.md ├── list.md ├── option-list.md ├── page-actions.md ├── page.md ├── pagination.md ├── popover.md ├── progress-bar.md ├── radio-button.md ├── range-slider.md ├── resource-list.md ├── select.md ├── setting-toggle.md ├── skeleton-body-text.md ├── skeleton-display-text.md ├── skeleton-page.md ├── spinner.md ├── stack.md ├── subheading.md ├── tag.md ├── text-field.md ├── text-style.md ├── thumbnail.md └── visually-hidden.md ├── ember-cli-build.js ├── index.js ├── package.json ├── public ├── illustrations │ └── empty-search.svg └── images │ ├── file-upload.svg │ ├── image-upload.svg │ ├── spinner-large.svg │ └── spinner-small.svg ├── testem.js ├── tests ├── acceptance │ └── key-event-listener-test.js ├── dummy │ ├── app │ │ ├── app.js │ │ ├── components │ │ │ ├── .gitkeep │ │ │ └── resource-list │ │ │ │ ├── bulk-actions.js │ │ │ │ ├── filtering.js │ │ │ │ ├── persist-actions.js │ │ │ │ ├── persist-actions │ │ │ │ └── item.js │ │ │ │ ├── simple.js │ │ │ │ ├── simple │ │ │ │ └── item.js │ │ │ │ └── sorting.js │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ ├── application.js │ │ │ ├── dropzone.js │ │ │ ├── index.js │ │ │ └── test │ │ │ │ └── index.js │ │ ├── helpers │ │ │ └── .gitkeep │ │ ├── index.html │ │ ├── models │ │ │ └── .gitkeep │ │ ├── router.js │ │ ├── routes │ │ │ ├── .gitkeep │ │ │ ├── index.js │ │ │ ├── resource-list.js │ │ │ ├── select.js │ │ │ ├── sticky.js │ │ │ ├── test.js │ │ │ └── test │ │ │ │ ├── child.js │ │ │ │ ├── child │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── styles │ │ │ └── app.scss │ │ └── templates │ │ │ ├── application.hbs │ │ │ ├── components │ │ │ └── resource-list │ │ │ │ ├── bulk-actions.hbs │ │ │ │ ├── filtering.hbs │ │ │ │ ├── persist-actions.hbs │ │ │ │ ├── persist-actions │ │ │ │ └── item.hbs │ │ │ │ ├── simple.hbs │ │ │ │ ├── simple │ │ │ │ └── item.hbs │ │ │ │ └── sorting.hbs │ │ │ ├── dropzone.hbs │ │ │ ├── index.hbs │ │ │ ├── layout │ │ │ └── annotated-layout.hbs │ │ │ ├── resource-list.hbs │ │ │ ├── select.hbs │ │ │ ├── sticky.hbs │ │ │ ├── test.hbs │ │ │ └── test │ │ │ ├── child.hbs │ │ │ ├── child │ │ │ └── index.hbs │ │ │ └── index.hbs │ ├── config │ │ ├── deprecation-workflow.js │ │ ├── ember-cli-update.json │ │ ├── environment.js │ │ ├── optional-features.json │ │ └── targets.js │ └── public │ │ └── robots.txt ├── helpers │ ├── .gitkeep │ ├── build-nested-selector.js │ ├── component-attribute-capture.js │ └── stub-routing.js ├── index.html ├── integration │ ├── .gitkeep │ ├── components │ │ ├── key-event-listener-test.js │ │ ├── polaris-action-list-test.js │ │ ├── polaris-avatar-test.js │ │ ├── polaris-badge-test.js │ │ ├── polaris-banner-test.js │ │ ├── polaris-breadcrumbs-test.js │ │ ├── polaris-button-group-test.js │ │ ├── polaris-button-test.js │ │ ├── polaris-callout-card-test.js │ │ ├── polaris-caption-test.js │ │ ├── polaris-card-test.js │ │ ├── polaris-checkbox-test.js │ │ ├── polaris-choice-list-test.js │ │ ├── polaris-choice-test.js │ │ ├── polaris-color-picker-test.js │ │ ├── polaris-connected-test.js │ │ ├── polaris-data-table-test.js │ │ ├── polaris-date-picker-test.js │ │ ├── polaris-description-list-test.js │ │ ├── polaris-display-text-test.js │ │ ├── polaris-drop-zone-test.js │ │ ├── polaris-empty-search-result-test.js │ │ ├── polaris-empty-state-test.js │ │ ├── polaris-footer-help-test.js │ │ ├── polaris-form-layout-test.js │ │ ├── polaris-form-test.js │ │ ├── polaris-heading-test.js │ │ ├── polaris-icon-test.js │ │ ├── polaris-inline-error-test.js │ │ ├── polaris-label-test.js │ │ ├── polaris-labelled-test.js │ │ ├── polaris-layout-test.js │ │ ├── polaris-link-test.js │ │ ├── polaris-list-test.js │ │ ├── polaris-option-list-test.js │ │ ├── polaris-option-list │ │ │ ├── checkbox-test.js │ │ │ └── option-test.js │ │ ├── polaris-page-actions-test.js │ │ ├── polaris-page-test.js │ │ ├── polaris-pagination-test.js │ │ ├── polaris-popover-test.js │ │ ├── polaris-progress-bar-test.js │ │ ├── polaris-radio-button-test.js │ │ ├── polaris-range-slider-test.js │ │ ├── polaris-resource-list-test.js │ │ ├── polaris-resource-list │ │ │ ├── bulk-actions-test.js │ │ │ ├── checkable-button-test.js │ │ │ ├── filter-control-test.js │ │ │ ├── filter-control │ │ │ │ ├── date-selector-test.js │ │ │ │ ├── filter-creator-test.js │ │ │ │ └── filter-value-selector-test.js │ │ │ └── item-test.js │ │ ├── polaris-select-test.js │ │ ├── polaris-setting-toggle-test.js │ │ ├── polaris-skeleton-body-text-test.js │ │ ├── polaris-skeleton-display-text-test.js │ │ ├── polaris-skeleton-page-test.js │ │ ├── polaris-skeleton-thumbnail-test.js │ │ ├── polaris-spinner-test.js │ │ ├── polaris-stack-test.js │ │ ├── polaris-sticky-test.js │ │ ├── polaris-subheading-test.js │ │ ├── polaris-tag-test.js │ │ ├── polaris-text-container-test.js │ │ ├── polaris-text-field-test.js │ │ ├── polaris-text-style-test.js │ │ ├── polaris-thumbnail-test.js │ │ ├── polaris-unstyled-link-test.js │ │ ├── polaris-visually-hidden-test.js │ │ ├── render-content-test.js │ │ └── wrapper-element-test.js │ └── helpers │ │ └── is-component-definition-test.js ├── mocks │ └── components │ │ └── svg-jar.js ├── stubbers │ └── math │ │ └── random.js ├── test-helper.js └── unit │ ├── .gitkeep │ └── utils │ ├── color-test.js │ └── focus-test.js ├── vendor └── .gitkeep └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.hbs] 16 | insert_final_newline = false 17 | 18 | [*.{diff,md}] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .eslintcache 17 | 18 | # ember-try 19 | /.node_modules.ember-try/ 20 | /bower.json.ember-try 21 | /package.json.ember-try 22 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 'use strict'; 3 | 4 | module.exports = { 5 | plugins: ['smile-ember'], 6 | extends: ['plugin:smile-ember/addon'], 7 | rules: { 8 | // Temporary while upgrading to Ember Octane & Glimmer components 9 | 'ember/no-jquery': 'off', 10 | 'ember/no-get': 'off', 11 | 'ember/no-mixins': 'off', 12 | 'ember/no-classic-components': 'off', 13 | 'ember/no-classic-classes': 'off', 14 | 'ember/classic-decorator-hooks': 'off', 15 | 'ember/classic-decorator-no-classic-methods': 'off', 16 | 'ember/require-tagless-components': 'off', 17 | 'ember/no-computed-properties-in-native-classes': 'off', 18 | 'ember/no-component-lifecycle-hooks': 'off', 19 | // These are a lil broken right now (eslint-plugin-ember also disabled these) 20 | 'smile-ember/order-in-components': 'off', 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @smile-io/activation-squad-reviewers 2 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["github>smile-io/renovate-config:ember/addon"], 3 | "enabled": false, 4 | "packageRules": [ 5 | { 6 | "groupName": "shopify polaris", 7 | "packagePatterns": ["^@shopify"], 8 | "enabled": false 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist/ 5 | /tmp/ 6 | 7 | # dependencies 8 | /bower_components/ 9 | /node_modules/ 10 | 11 | # misc 12 | /.env* 13 | /.pnp* 14 | /.sass-cache 15 | /.eslintcache 16 | /connect.lock 17 | /coverage/ 18 | /libpeerconnection.log 19 | /npm-debug.log* 20 | /testem.log 21 | /yarn-error.log 22 | 23 | # ember-try 24 | /.node_modules.ember-try/ 25 | /bower.json.ember-try 26 | /package.json.ember-try 27 | 28 | .DS_Store 29 | package-lock.json 30 | jsconfig.json 31 | .vscode 32 | 33 | .eslintcache 34 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn precise-commits 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist/ 3 | /tmp/ 4 | 5 | # dependencies 6 | /bower_components/ 7 | 8 | # misc 9 | /.bowerrc 10 | /.editorconfig 11 | /.ember-cli 12 | /.env* 13 | /.eslintcache 14 | /.eslintignore 15 | /.eslintrc.js 16 | /.git/ 17 | /.gitignore 18 | /.prettierrc.js 19 | /.template-lintrc.js 20 | /.travis.yml 21 | /.watchmanconfig 22 | /bower.json 23 | /config/ember-try.js 24 | /CONTRIBUTING.md 25 | /ember-cli-build.js 26 | /testem.js 27 | /tests/ 28 | /yarn.lock 29 | .gitkeep 30 | 31 | # ember-try 32 | /.node_modules.ember-try/ 33 | /bower.json.ember-try 34 | /package.json.ember-try 35 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .eslintcache 17 | 18 | # ember-try 19 | /.node_modules.ember-try/ 20 | /bower.json.ember-try 21 | /package.json.ember-try 22 | 23 | *.md 24 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('@smile-io/ember-styleguide/.prettierrc'); 4 | -------------------------------------------------------------------------------- /.template-lintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | plugins: ['./node_modules/@smile-io/ember-styleguide/.template-lintrc'], 5 | extends: ['@smile-io/ember-styleguide:recommended'], 6 | rules: { 7 | 'attribute-indentation': false, 8 | 'no-inline-styles': false, 9 | 'no-action': false, 10 | 'no-implicit-this': false, 11 | 'no-curly-component-invocation': false, 12 | 'no-down-event-binding': false, 13 | 'no-yield-only': false, 14 | 'no-duplicate-id': false, 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How To Contribute 2 | 3 | ## Installation 4 | 5 | * `git clone ` 6 | * `cd ember-polaris` 7 | * `yarn install` 8 | 9 | ## Linting 10 | 11 | * `yarn lint:hbs` 12 | * `yarn lint:js` 13 | * `yarn lint:js --fix` 14 | 15 | ## Running tests 16 | 17 | * `ember test` – Runs the test suite on the current Ember version 18 | * `ember test --server` – Runs the test suite in "watch mode" 19 | * `ember try:each` – Runs the test suite against multiple Ember versions 20 | 21 | ## Running the dummy application 22 | 23 | * `ember serve` 24 | * Visit the dummy application at [http://localhost:4200](http://localhost:4200). 25 | 26 | For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). 27 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /addon-test-support/mock-drop-zone-event.js: -------------------------------------------------------------------------------- 1 | class DataTransfer { 2 | constructor(options = {}) { 3 | Object.assign(this, options); 4 | } 5 | } 6 | 7 | export default class MockEvent { 8 | constructor(options = {}) { 9 | this.dataTransfer = new DataTransfer(options.dataTransfer); 10 | this.originalEvent = this; 11 | } 12 | 13 | preventDefault() {} 14 | stopPropagation() {} 15 | } 16 | -------------------------------------------------------------------------------- /addon/-private/drop-zone-state.js: -------------------------------------------------------------------------------- 1 | import { capitalize } from '@ember/string'; 2 | 3 | const dropZone = { 4 | overlayTextFile: 'Drop file to upload', 5 | overlayTextImage: 'Drop image to upload', 6 | errorOverlayTextFile: 'File type is not valid', 7 | errorOverlayTextImage: 'Image type is not valid', 8 | }; 9 | 10 | export default class DropZoneState { 11 | /** 12 | * Whether is a file or an image 13 | * 14 | * @type {String} 15 | * @default 'file' 16 | */ 17 | type = 'file'; 18 | 19 | /** 20 | * The size of the dropzone 21 | * @type {String} 22 | * @default 'extraLarge' 23 | */ 24 | size = 'extraLarge'; 25 | 26 | /** 27 | * True, when dragging in progress 28 | * @type {Boolean} 29 | * @default false 30 | */ 31 | dragging = false; 32 | 33 | /** 34 | * True, when dropzone has errors 35 | * @type {Boolean} 36 | * @default false 37 | */ 38 | error = false; 39 | 40 | /** 41 | * Number of files 42 | * @type {Number} 43 | * @default 0 44 | */ 45 | numFiles = 0; 46 | 47 | constructor() { 48 | const suffix = capitalize(this.type); 49 | this.overlayText = dropZone[`overlayText${suffix}`]; 50 | this.errorOverlayText = dropZone[`errorOverlayText${suffix}`]; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/addon/.gitkeep -------------------------------------------------------------------------------- /addon/components/polaris-action-list/section.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { action, computed } from '@ember/object'; 3 | import { tagName, layout } from '@ember-decorators/component'; 4 | import template from '../../templates/components/polaris-action-list/section'; 5 | 6 | @tagName('') 7 | @layout(template) 8 | export default class PolarisActionListSection extends Component { 9 | /** 10 | * Collection of action items 11 | * 12 | * @type {Object} 13 | * @default null 14 | * @public 15 | */ 16 | section = null; 17 | 18 | /** 19 | * Whether the parent action list has multiple sections 20 | * 21 | * @type {Boolean} 22 | * @default false 23 | * @public 24 | */ 25 | hasMultipleSections = false; 26 | 27 | /** 28 | * Defines a specific role attribute for each action in the list 29 | * 30 | * @type {String} 31 | * @default null 32 | * @public 33 | */ 34 | actionRole = null; 35 | 36 | @computed('actionRole') 37 | get sectionRole() { 38 | return this.actionRole === 'option' ? 'presentation' : undefined; 39 | } 40 | 41 | @action 42 | handleAction(item, event) { 43 | event.preventDefault(); 44 | event.stopPropagation(); 45 | 46 | item.onAction?.(); 47 | this.onActionAnyItem?.(); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /addon/components/polaris-breadcrumbs.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed, action } from '@ember/object'; 3 | import { tagName, layout } from '@ember-decorators/component'; 4 | import { handleMouseUpByBlurring } from '../utils/focus'; 5 | import template from '../templates/components/polaris-breadcrumbs'; 6 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 7 | 8 | @deprecateClassArgument 9 | @tagName('') 10 | @layout(template) 11 | export default class PolarisBreadcrumbs extends Component { 12 | /** 13 | * Collection of breadcrumbs 14 | * 15 | * @type {Array} 16 | * @default [] 17 | * @public 18 | */ 19 | breadcrumbs = []; 20 | 21 | handleMouseUpByBlurring = handleMouseUpByBlurring; 22 | 23 | /** 24 | * The breadcrumb to render (the last of the list) 25 | * We're not always guaranteed to get an Ember array, 26 | * so we can't just use `breadcrumbs.lastObject` in the template. 27 | * 28 | * @type {Object} 29 | */ 30 | @computed('breadcrumbs.[]') 31 | get breadcrumb() { 32 | let { breadcrumbs } = this; 33 | return breadcrumbs[breadcrumbs.length - 1]; 34 | } 35 | 36 | @action 37 | handleClick() { 38 | this.breadcrumb.onAction(); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /addon/components/polaris-button/content.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { tagName, layout } from '@ember-decorators/component'; 4 | import template from '../../templates/components/polaris-button/content'; 5 | 6 | @tagName('') 7 | @layout(template) 8 | export default class PolarisButtonContent extends Component { 9 | @computed('primary', 'destructive') 10 | get spinnerColor() { 11 | let { primary, destructive } = this; 12 | return primary || destructive ? 'white' : 'inkLightest'; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /addon/components/polaris-caption.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout } from '@ember-decorators/component'; 3 | import template from '../templates/components/polaris-caption'; 4 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @layout(template) 9 | export default class PolarisCaption extends Component { 10 | /** 11 | * The content to use as a graph label or timestamp. 12 | * 13 | * This component can be used in block form, 14 | * in which case the block content will be used 15 | * instead of `text` 16 | * 17 | * @type {String} 18 | * @default null 19 | * @public 20 | */ 21 | text = null; 22 | } 23 | -------------------------------------------------------------------------------- /addon/components/polaris-card/section-header.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout } from '@ember-decorators/component'; 3 | import template from '../../templates/components/polaris-card/section-header'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @layout(template) 9 | export default class PolarisCardSectionHeader extends Component { 10 | /** 11 | * Title for the section 12 | * 13 | * @type {String|Component} 14 | * @default null 15 | * @public 16 | */ 17 | title = null; 18 | 19 | /** 20 | * Inner content of the section 21 | * 22 | * This component can be used in block form, 23 | * in which case the block content will be used 24 | * instead of `text` 25 | * 26 | * @type {String} 27 | * @default null 28 | * @public 29 | */ 30 | text = null; 31 | } 32 | -------------------------------------------------------------------------------- /addon/components/polaris-choice/label.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { tagName, layout } from '@ember-decorators/component'; 4 | import template from '../../templates/components/polaris-choice/label'; 5 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 6 | 7 | @deprecateClassArgument 8 | @tagName('') 9 | @layout(template) 10 | export default class PolarisChoiceLabel extends Component { 11 | @computed('labelHidden', 'disabled', 'class') 12 | get cssClasses() { 13 | let cssClasses = ['Polaris-Choice']; 14 | if (this.labelHidden) { 15 | cssClasses.push('Polaris-Choice--labelHidden'); 16 | } 17 | if (this.disabled) { 18 | cssClasses.push('Polaris-Choice--disabled'); 19 | } 20 | if (this.class) { 21 | cssClasses.push(this.class); 22 | } 23 | 24 | return cssClasses.join(' '); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /addon/components/polaris-data-table/navigation.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-data-table/navigation'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisDataTableNavigation extends Component { 10 | /** 11 | * @type {Boolean} 12 | * @public 13 | */ 14 | isScrolledFarthestLeft = false; 15 | 16 | /** 17 | * @type {Boolean} 18 | * @public 19 | */ 20 | isScrolledFarthestRight = false; 21 | 22 | /** 23 | * @type {Object[]} 24 | * @public 25 | */ 26 | columnVisibilityData = null; 27 | 28 | /** 29 | * @type {Function} 30 | * @default no-op 31 | * @public 32 | */ 33 | navigateTableLeft() {} 34 | 35 | /** 36 | * @type {Function} 37 | * @default no-op 38 | * @public 39 | */ 40 | navigateTableRight() {} 41 | } 42 | -------------------------------------------------------------------------------- /addon/components/polaris-data-table/total.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 4 | import layout from '../../templates/components/polaris-data-table/total'; 5 | 6 | @tagName('') 7 | @templateLayout(layout) 8 | export default class PolarisDataTableTotal extends Component { 9 | /** 10 | * @type {String|Number|Component} 11 | * @public 12 | */ 13 | total = null; 14 | 15 | /** 16 | * @type {Number} 17 | * @public 18 | */ 19 | index = null; 20 | 21 | /** 22 | * @type {Number[]} 23 | * @public 24 | */ 25 | heights = null; 26 | 27 | /** 28 | * @type {boolean} 29 | * @default false 30 | * @public 31 | */ 32 | truncate = false; 33 | 34 | /** 35 | * @type {String} 36 | * @public 37 | */ 38 | totalsRowHeading = null; 39 | 40 | @computed('total', 'index') 41 | get contentType() { 42 | let { total, index } = this; 43 | 44 | if (total !== '' && index > 0) { 45 | return 'numeric'; 46 | } 47 | 48 | return null; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /addon/components/polaris-date-picker/weekday.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-date-picker/weekday'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisDatePickerWeekday extends Component { 10 | /** 11 | * @type {String} 12 | * @default null 13 | * @public 14 | */ 15 | label = null; 16 | 17 | /** 18 | * @type {String} 19 | * @default null 20 | * @public 21 | */ 22 | title = null; 23 | 24 | /** 25 | * @type {Boolean} 26 | * @default false 27 | * @public 28 | */ 29 | current = false; 30 | } 31 | -------------------------------------------------------------------------------- /addon/components/polaris-description-list.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../templates/components/polaris-description-list'; 4 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisDescriptionList extends Component { 10 | /** 11 | * Collection of items for list 12 | * 13 | * format with `term` and `description` keys: 14 | * 15 | * [{ 16 | * term: 'Term here', 17 | * description: 'Description here' 18 | * }] 19 | * 20 | * values can also be set to custom components: 21 | * 22 | * items=(array 23 | * (hash 24 | * term=(component "my-term-component") 25 | * description=(component "my-description-component") 26 | * ) 27 | * ) 28 | * 29 | * @type {Array} 30 | * @default [] 31 | * @public 32 | */ 33 | items = []; 34 | } 35 | -------------------------------------------------------------------------------- /addon/components/polaris-empty-search-result.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../templates/components/polaris-empty-search-result'; 4 | 5 | @tagName('') 6 | @templateLayout(layout) 7 | export default class PolarisEmptySearchResult extends Component { 8 | /** 9 | * @type {String} 10 | * @default null 11 | * @public 12 | */ 13 | title = null; 14 | 15 | /** 16 | * @type {String} 17 | * @default null 18 | * @public 19 | */ 20 | description = null; 21 | 22 | /** 23 | * @type {Boolean} 24 | * @default false 25 | * @public 26 | */ 27 | withIllustration = false; 28 | } 29 | -------------------------------------------------------------------------------- /addon/components/polaris-empty-state/details.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-empty-state/details'; 4 | 5 | @tagName('') 6 | @templateLayout(layout) 7 | export default class PolarisEmptyStateDetails extends Component {} 8 | -------------------------------------------------------------------------------- /addon/components/polaris-footer-help.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../templates/components/polaris-footer-help'; 4 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 5 | 6 | /** 7 | * Polaris footer help component. 8 | * See https://polaris.shopify.com/components/titles-and-text/footer-help 9 | */ 10 | @deprecateClassArgument 11 | @tagName('') 12 | @templateLayout(layout) 13 | export default class PolarisFooterHelp extends Component { 14 | /** 15 | * The content to display inside the layout. 16 | * 17 | * This component can be used in block form, 18 | * in which case the block content will be used 19 | * instead of `text` 20 | * 21 | * @type {String} 22 | * @default null 23 | * @public 24 | */ 25 | text = null; 26 | } 27 | -------------------------------------------------------------------------------- /addon/components/polaris-form-layout/item.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-form-layout/item'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisFormLayoutItem extends Component {} 10 | -------------------------------------------------------------------------------- /addon/components/polaris-inline-error.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { assert } from '@ember/debug'; 3 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 4 | import layout from '../templates/components/polaris-inline-error'; 5 | 6 | @tagName('') 7 | @templateLayout(layout) 8 | export default class PolarisInlineError extends Component { 9 | /** 10 | * Unique identifier of the invalid form field that the message describes 11 | * 12 | * @type {String} 13 | * @default null 14 | * @public 15 | * @required 16 | */ 17 | fieldID = null; 18 | 19 | /** 20 | * Content briefly explaining how to resolve the invalid form field input. 21 | * 22 | * @type {String|Component} 23 | * @default null 24 | * @public 25 | */ 26 | message = null; 27 | 28 | dataTestInlineError = true; 29 | dataTestInlineErrorIcon = true; 30 | 31 | init() { 32 | super.init(...arguments); 33 | assert( 34 | '[polaris-inline-error] Missing required `fieldID` param!', 35 | this.fieldID 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /addon/components/polaris-label.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import { computedLabelId } from '@smile-io/ember-polaris/utils/id'; 4 | import layout from '../templates/components/polaris-label'; 5 | 6 | /** 7 | * Internal Polaris label component. 8 | */ 9 | @tagName('') 10 | @templateLayout(layout) 11 | export default class PolarisLabel extends Component { 12 | /** 13 | * A unique identifier for the label 14 | * 15 | * @type {String} 16 | * @public 17 | */ 18 | id = null; 19 | 20 | /** 21 | * Label content 22 | * 23 | * This component can be used in block form, 24 | * in which case the block content will be used 25 | * instead of `text` 26 | * 27 | * @type {String|Component} 28 | * @public 29 | */ 30 | text = null; 31 | 32 | /** 33 | * Visually hide the label 34 | * 35 | * @type {Boolean} 36 | * @default false 37 | * @public 38 | */ 39 | hidden = false; 40 | 41 | /** 42 | * ID for the label element 43 | * 44 | * @type {String} 45 | */ 46 | @computedLabelId('id') 47 | labelId; 48 | } 49 | -------------------------------------------------------------------------------- /addon/components/polaris-layout.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../templates/components/polaris-layout'; 4 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisLayout extends Component { 10 | /** 11 | * Automatically adds sections to layout 12 | * 13 | * @type {Boolean} 14 | * @default false 15 | * @public 16 | */ 17 | sectioned = false; 18 | 19 | /** 20 | * The content to display inside the layout 21 | * 22 | * This component can be used in block form, 23 | * in which case the block content will be used 24 | * instead of `text` 25 | * 26 | * @type {String} 27 | * @public 28 | */ 29 | text; 30 | } 31 | -------------------------------------------------------------------------------- /addon/components/polaris-layout/annotated-section.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-layout/annotated-section'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisLayoutAnnotatedSection extends Component { 10 | /** 11 | * Title for the section 12 | * 13 | * @type {String} 14 | * @public 15 | */ 16 | title; 17 | 18 | /** 19 | * Description for the section 20 | * 21 | * @type {String|Component|Object} 22 | * @public 23 | */ 24 | description; 25 | 26 | /** 27 | * Inner content of the section 28 | * 29 | * This component can be used in block form, 30 | * in which case the block content will be used 31 | * instead of `text` 32 | * 33 | * @type {String} 34 | * @public 35 | */ 36 | text; 37 | } 38 | -------------------------------------------------------------------------------- /addon/components/polaris-layout/annotation-content.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-layout/annotation-content'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisLayoutAnnotationContent extends Component { 10 | /** 11 | * Inner content of the section 12 | * 13 | * This component can be used in block form, 14 | * in which case the block content will be used 15 | * instead of `text` 16 | * 17 | * @type {String} 18 | * @public 19 | */ 20 | text; 21 | } 22 | -------------------------------------------------------------------------------- /addon/components/polaris-layout/annotation.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 4 | import layout from '../../templates/components/polaris-layout/annotation'; 5 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 6 | 7 | @deprecateClassArgument 8 | @tagName('') 9 | @templateLayout(layout) 10 | export default class PolarisLayoutAnnotation extends Component { 11 | /** 12 | * Title for the section 13 | * 14 | * @type {String} 15 | * @public 16 | */ 17 | title; 18 | 19 | /** 20 | * Description for the section 21 | * 22 | * @type {String|Component|Object} 23 | * @public 24 | */ 25 | description; 26 | 27 | @(computed('description').readOnly()) 28 | get hasStringDescription() { 29 | return typeof this.description === 'string'; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /addon/components/polaris-layout/section.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 4 | import layout from '../../templates/components/polaris-layout/section'; 5 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 6 | 7 | @deprecateClassArgument 8 | @tagName('') 9 | @templateLayout(layout) 10 | export default class PolarisLayoutSection extends Component { 11 | text = null; 12 | secondary = false; 13 | fullWidth = false; 14 | oneHalf = false; 15 | oneThird = false; 16 | 17 | @computed('secondary', 'fullWidth', 'oneHalf', 'oneThird', 'class') 18 | get cssClasses() { 19 | let cssClasses = ['Polaris-Layout__Section']; 20 | if (this.secondary) { 21 | cssClasses.push('Polaris-Layout__Section--secondary'); 22 | } 23 | if (this.fullWidth) { 24 | cssClasses.push('Polaris-Layout__Section--fullWidth'); 25 | } 26 | if (this.oneHalf) { 27 | cssClasses.push('Polaris-Layout__Section--oneHalf'); 28 | } 29 | if (this.oneThird) { 30 | cssClasses.push('Polaris-Layout__Section--oneThird'); 31 | } 32 | if (this.class) { 33 | cssClasses.push(this.class); 34 | } 35 | 36 | return cssClasses.join(' '); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /addon/components/polaris-list/item.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-list/item'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @templateLayout(layout) 9 | export default class PolarisListItem extends Component { 10 | /** 11 | * The content to display for this list item 12 | * 13 | * This component can be used in block form, 14 | * in which case the block content will be used 15 | * instead of `text` 16 | * 17 | * @type {String} 18 | * @default null 19 | */ 20 | text = null; 21 | } 22 | -------------------------------------------------------------------------------- /addon/components/polaris-page-actions.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { isArray } from '@ember/array'; 4 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 5 | import layout from '../templates/components/polaris-page-actions'; 6 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 7 | 8 | /** 9 | * Polaris page actions component. 10 | * See https://polaris.shopify.com/components/structure/page-actions 11 | */ 12 | @deprecateClassArgument 13 | @tagName('') 14 | @templateLayout(layout) 15 | export default class PolarisPageActions extends Component { 16 | /** 17 | * The primary action for the page 18 | * 19 | * @type {Object} 20 | * @default null 21 | * @public 22 | */ 23 | primaryAction = null; 24 | 25 | /** 26 | * The secondary actions for the page 27 | * 28 | * @type {Array} 29 | * @default null 30 | * @public 31 | */ 32 | secondaryActions = null; 33 | 34 | @(computed('secondaryActions').readOnly()) 35 | get showSecondaryActions() { 36 | return isArray(this.secondaryActions); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /addon/components/polaris-page/action-icon.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout } from '@ember-decorators/component'; 3 | import template from '../../templates/components/polaris-page/action-icon'; 4 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @layout(template) 9 | export default class PolarisPageActionIcon extends Component { 10 | /** 11 | * The icon to display 12 | * 13 | * @type {String} 14 | * @default null 15 | */ 16 | icon = null; 17 | } 18 | -------------------------------------------------------------------------------- /addon/components/polaris-page/header/action-group.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout } from '@ember-decorators/component'; 3 | import template from '../../../templates/components/polaris-page/header/action-group'; 4 | import deprecateClassArgument from '../../../utils/deprecate-class-argument'; 5 | 6 | @deprecateClassArgument 7 | @tagName('') 8 | @layout(template) 9 | export default class PolarisPageHeaderActionGroup extends Component { 10 | title = null; 11 | icon = null; 12 | groupActions = null; 13 | details = null; 14 | } 15 | -------------------------------------------------------------------------------- /addon/components/polaris-page/header/rollup.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout } from '@ember-decorators/component'; 3 | import template from '../../../templates/components/polaris-page/header/rollup'; 4 | 5 | @tagName('') 6 | @layout(template) 7 | export default class PolarisPageHeaderRollup extends Component { 8 | hasRollup = null; 9 | secondaryActions = null; 10 | actionGroupSections = null; 11 | } 12 | -------------------------------------------------------------------------------- /addon/components/polaris-resource-list/loading-overlay.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 3 | import layout from '../../templates/components/polaris-resource-list/loading-overlay'; 4 | 5 | /** 6 | * Internal component used to DRY up rendering resource list loading state. 7 | */ 8 | @tagName('') 9 | @templateLayout(layout) 10 | export default class PolarisResourceListLoadingOverlay extends Component { 11 | loading = false; 12 | spinnerStyle = null; 13 | spinnerSize = null; 14 | } 15 | -------------------------------------------------------------------------------- /addon/components/polaris-resource-list/provider.js: -------------------------------------------------------------------------------- 1 | import { context } from '@smile-io/ember-polaris/components/polaris-resource-list'; 2 | 3 | export default context.Provider; 4 | -------------------------------------------------------------------------------- /addon/components/polaris-skeleton-body-text.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 4 | import layout from '../templates/components/polaris-skeleton-body-text'; 5 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 6 | 7 | const defaultLines = 3; 8 | 9 | @deprecateClassArgument 10 | @tagName('') 11 | @templateLayout(layout) 12 | export default class PolarisSkeletonBodyText extends Component { 13 | /** 14 | * Number of lines to display 15 | * 16 | * @type {Number} 17 | * @default 3 18 | * @public 19 | */ 20 | lines = defaultLines; 21 | 22 | /** 23 | * Array of dummy lines to iterate over in template 24 | * 25 | * @type {Array} 26 | */ 27 | @computed('lines') 28 | get dummyLines() { 29 | let lines = parseInt(this.lines); 30 | if (isNaN(lines)) { 31 | lines = defaultLines; 32 | } 33 | 34 | return new Array(Math.max(lines, 0)); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /addon/components/polaris-skeleton-display-text.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { classify } from '@ember/string'; 4 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 5 | import layout from '../templates/components/polaris-skeleton-display-text'; 6 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 7 | 8 | const defaultSize = 'medium'; 9 | const allowedSizes = ['small', defaultSize, 'large', 'extraLarge']; 10 | 11 | @deprecateClassArgument 12 | @tagName('') 13 | @templateLayout(layout) 14 | export default class PolarisSkeletonDisplayText extends Component { 15 | /** 16 | * Size of the text 17 | * 18 | * @type {String} 19 | * @default 'medium' 20 | * @public 21 | */ 22 | size = defaultSize; 23 | 24 | /** 25 | * Class name to set the display text size. 26 | * 27 | * @type {String} 28 | */ 29 | @computed('size') 30 | get sizeClass() { 31 | let { size } = this; 32 | if (allowedSizes.indexOf(size) === -1) { 33 | size = defaultSize; 34 | } 35 | 36 | return `Polaris-SkeletonDisplayText--size${classify(size)}`; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /addon/components/polaris-skeleton-page/action.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { htmlSafe } from '@ember/string'; 4 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 5 | import layout from '../../templates/components/polaris-skeleton-page/action'; 6 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 7 | 8 | @deprecateClassArgument 9 | @tagName('') 10 | @templateLayout(layout) 11 | export default class PolarisSkeletonPageAction extends Component { 12 | @computed() 13 | get width() { 14 | return Math.round(Math.random() * 40 + 60); 15 | } 16 | 17 | @computed('width') 18 | get style() { 19 | return htmlSafe(`width: ${this.width}px;`); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /addon/components/polaris-skeleton-thumbnail.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { capitalize } from '@ember/string'; 4 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 5 | import layout from '../templates/components/polaris-skeleton-thumbnail'; 6 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 7 | 8 | const defaultSize = 'medium'; 9 | const allowedSizes = ['small', defaultSize, 'large']; 10 | 11 | @deprecateClassArgument 12 | @tagName('') 13 | @templateLayout(layout) 14 | export default class PolarisSkeletonThumbnail extends Component { 15 | /** 16 | * Size of the thumbnail 17 | * 18 | * @type {String} 19 | * @default 'medium' 20 | * @public 21 | */ 22 | size = defaultSize; 23 | 24 | /** 25 | * Class to apply the thumbnail size. 26 | * 27 | * @type {String} 28 | */ 29 | @computed('size') 30 | get sizeClass() { 31 | let { size } = this; 32 | if (allowedSizes.indexOf(size) === -1) { 33 | size = defaultSize; 34 | } 35 | 36 | return `Polaris-SkeletonThumbnail--size${capitalize(size)}`; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /addon/components/polaris-stack/item.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { layout, tagName } from '@ember-decorators/component'; 4 | import template from '../../templates/components/polaris-stack/item'; 5 | import deprecateClassArgument from '../../utils/deprecate-class-argument'; 6 | 7 | @deprecateClassArgument 8 | @tagName('') 9 | @layout(template) 10 | export default class PolarisStackItem extends Component { 11 | /** 12 | * Elements to display inside stack item 13 | * 14 | * @type {string} 15 | * @default null 16 | * @public 17 | */ 18 | text = null; 19 | 20 | /** 21 | * Fill the width of the stack 22 | * 23 | * @type {boolean} 24 | * @default false 25 | * @public 26 | */ 27 | fill = false; 28 | 29 | @computed('fill', 'class') 30 | get cssClasses() { 31 | let cssClasses = ['Polaris-Stack__Item']; 32 | if (this.fill) { 33 | cssClasses.push('Polaris-Stack__Item--fill'); 34 | } 35 | if (this.class) { 36 | cssClasses.push(this.class); 37 | } 38 | 39 | return cssClasses.join(' '); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /addon/components/polaris-text-container.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { classify } from '@ember/string'; 4 | import { tagName, layout as templateLayout } from '@ember-decorators/component'; 5 | import layout from '../templates/components/polaris-text-container'; 6 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 7 | 8 | const allowedSpacings = ['tight', 'loose']; 9 | 10 | /** 11 | * Undocumented Polaris text container component. 12 | */ 13 | @deprecateClassArgument 14 | @tagName('') 15 | @templateLayout(layout) 16 | export default class PolarisTextContainer extends Component { 17 | /** 18 | * The text to display. 19 | * 20 | * This component can be used in block form, 21 | * in which case the block content will be used 22 | * instead of `text` 23 | * 24 | * @type {String} 25 | * @public 26 | */ 27 | text; 28 | 29 | /** 30 | * The amount of vertical spacing children will get between them. 31 | * 32 | * @type {String} 33 | * @public 34 | */ 35 | spacing; 36 | 37 | @computed('spacing') 38 | get spacingClass() { 39 | if (allowedSpacings.indexOf(this.spacing) > -1) { 40 | return `Polaris-TextContainer--spacing${classify(this.spacing)}`; 41 | } 42 | 43 | return null; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /addon/components/polaris-text-field/spinner.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { action } from '@ember/object'; 3 | import { tagName, layout } from '@ember-decorators/component'; 4 | import template from '../../templates/components/polaris-text-field/spinner'; 5 | 6 | @tagName('') 7 | @layout(template) 8 | export default class PolarisTextFieldSpinner extends Component { 9 | /** 10 | * Called when the up/down icons are clicked 11 | * 12 | * @type {Function} 13 | * @default noop 14 | * @public 15 | */ 16 | onChange(/* number */) {} 17 | 18 | /** 19 | * Additional callback when any icon in the component is clicked 20 | * 21 | * @type {Function} 22 | * @default noop 23 | * @public 24 | */ 25 | onClick() {} 26 | 27 | onMouseDown(/* onChange */) {} 28 | onMouseUp() {} 29 | 30 | @action 31 | handleMouseDown(onChange, event) { 32 | if (event.button !== 0) { 33 | return; 34 | } 35 | this.onMouseDown(onChange); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /addon/components/polaris-visually-hidden.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { tagName, layout } from '@ember-decorators/component'; 3 | import template from '../templates/components/polaris-visually-hidden'; 4 | import deprecateClassArgument from '../utils/deprecate-class-argument'; 5 | 6 | /** 7 | * Polaris Visually hidden component. 8 | * See https://polaris.shopify.com/components/titles-and-text/visually-hidden 9 | */ 10 | @deprecateClassArgument 11 | @tagName('') 12 | @layout(template) 13 | export default class PolarisVisuallyHidden extends Component { 14 | /** 15 | * The content to be hidden visually 16 | * 17 | * This component can be used in block form, 18 | * in which case the block content will be used 19 | * instead of `text` 20 | * 21 | * @type {string} 22 | * @default null 23 | * @public 24 | */ 25 | text = null; 26 | } 27 | -------------------------------------------------------------------------------- /addon/components/render-content.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import { notEmpty } from '@ember/object/computed'; 4 | import layout from '../templates/components/render-content'; 5 | import { isComponentDefinition } from '@smile-io/ember-polaris/helpers/is-component-definition'; 6 | 7 | export default Component.extend({ 8 | tagName: '', 9 | 10 | layout, 11 | 12 | content: null, 13 | 14 | contentIsComponentHash: notEmpty('content.componentName').readOnly(), 15 | 16 | contentIsComponentDefinition: computed('content', function () { 17 | return isComponentDefinition(this.content); 18 | }).readOnly(), 19 | }).reopenClass({ 20 | positionalParams: ['content'], 21 | }); 22 | -------------------------------------------------------------------------------- /addon/helpers/polaris-data-table/insert-presentational-cell.js: -------------------------------------------------------------------------------- 1 | import { helper } from '@ember/component/helper'; 2 | 3 | export function polarisDataTableInsertPresentationalCell([cells]) { 4 | let [fixedCell, ...rest] = cells; 5 | return [fixedCell, '', ...rest]; 6 | } 7 | 8 | export default helper(polarisDataTableInsertPresentationalCell); 9 | -------------------------------------------------------------------------------- /addon/helpers/polaris-date-picker/derive-range.js: -------------------------------------------------------------------------------- 1 | import { helper } from '@ember/component/helper'; 2 | import { isPresent, typeOf } from '@ember/utils'; 3 | 4 | export function deriveRange(selected) { 5 | if (isPresent(selected) && typeOf(selected) === 'date') { 6 | return { start: selected, end: selected }; 7 | } 8 | 9 | return selected; 10 | } 11 | 12 | export default helper(function ([selected]) { 13 | return deriveRange(selected); 14 | }); 15 | -------------------------------------------------------------------------------- /addon/helpers/polaris-select/is-group.js: -------------------------------------------------------------------------------- 1 | import { helper } from '@ember/component/helper'; 2 | 3 | export function isGroup(option) { 4 | return option.options != null; 5 | } 6 | 7 | export default helper(([option]) => isGroup(option)); 8 | -------------------------------------------------------------------------------- /addon/templates/components/key-event-listener.hbs: -------------------------------------------------------------------------------- 1 | {{yield}} -------------------------------------------------------------------------------- /addon/templates/components/polaris-action-list.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (if this.hasMultipleSections "ul" "div")) as |ActionList|}} 2 | 3 | {{#each this.finalSections as |section|}} 4 | 10 | {{/each}} 11 | 12 | {{/let}} 13 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-action-list/item.hbs: -------------------------------------------------------------------------------- 1 | {{!-- TODO: add scroll support here when `polaris-scrollable` is available. --}} 2 |
  • 3 | 35 |
    • 36 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-action-list/section.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (if @hasMultipleSections "li" "")) as |ActionListSection|}} 2 | 5 |
    6 | {{#if @section.title}} 7 |

    8 | {{@section.title}} 9 |

    10 | {{/if}} 11 | 12 |
      16 | {{#each @section.items as |item|}} 17 | 31 | {{/each}} 32 |
    33 |
    34 |     35 | {{/let}} 36 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-avatar.hbs: -------------------------------------------------------------------------------- 1 | 8 | {{#if this.shouldShowInitials}} 9 | 10 | 11 | 19 | {{@initials}} 20 | 21 | 22 | 23 | {{/if}} 24 | 25 | {{#if this.shouldShowImage}} 26 | {{!-- TODO: replace this with polaris-image when implemented. --}} 27 | 35 | {{/if}} 36 | 37 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-badge.hbs: -------------------------------------------------------------------------------- 1 | 5 | {{#if this.statusDescription}} 6 | 7 | {{/if}} 8 | 9 | {{#if this.progressDescription}} 10 | 11 | 12 | 13 | {{/if}} 14 | 15 | {{#if (has-block)}} 16 | {{yield}} 17 | {{else}} 18 | {{@text}} 19 | {{/if}} 20 | 21 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-breadcrumbs.hbs: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-button-group.hbs: -------------------------------------------------------------------------------- 1 |
    8 | {{#if (has-block)}} 9 | {{yield 10 | (hash 11 | item=(component "polaris-button-group/item") 12 | ) 13 | }} 14 | {{else}} 15 | {{@text}} 16 | {{/if}} 17 |
    18 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-button-group/item.hbs: -------------------------------------------------------------------------------- 1 |
    9 | {{#if (has-block)}} 10 | {{yield}} 11 | {{else}} 12 | {{@text}} 13 | {{/if}} 14 |
    15 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-button/content.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#if @loading}} 3 | 4 | 9 | 10 | {{/if}} 11 | 12 | {{#if @icon}} 13 | 14 | {{#if (is-component-definition @icon)}} 15 | {{render-content @icon}} 16 | {{else}} 17 | 18 | {{/if}} 19 | 20 | {{/if}} 21 | 22 | {{#if (or @text (has-block))}} 23 | {{!-- TODO: prevent rendering empty span here if block is empty. --}} 24 | 25 | {{#if (has-block)}} 26 | {{yield}} 27 | {{else}} 28 | {{text}} 29 | {{/if}} 30 | 31 | {{/if}} 32 | 33 | {{#if @disclosure}} 34 | 35 | 36 | 37 | {{/if}} 38 | 39 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-caption.hbs: -------------------------------------------------------------------------------- 1 |

    2 | {{#if (has-block)}} 3 | {{yield}} 4 | {{else}} 5 | {{@text}} 6 | {{/if}} 7 |

    8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-card/section-header.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#if @title}} 3 | {{#if (is-component-definition @title)}} 4 | {{render-content @title}} 5 | {{else}} 6 | 7 | {{/if}} 8 | {{/if}} 9 | 10 | {{#if (has-block)}} 11 | {{yield}} 12 | {{else}} 13 | {{@text}} 14 | {{/if}} 15 |
    16 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-card/section.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#let (component "polaris-card/section-header") as |Header|}} 3 | {{#if @title}} 4 |
    5 | {{/if}} 6 | 7 | {{#if (has-block)}} 8 | {{yield (hash header=Header Header=Header)}} 9 | {{else}} 10 | {{@text}} 11 | {{/if}} 12 | {{/let}} 13 |
    14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-checkbox.hbs: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-choice.hbs: -------------------------------------------------------------------------------- 1 | {{#let 2 | (component "polaris-choice/label" 3 | inputId=@inputId 4 | label=@label 5 | labelHidden=this.labelHidden 6 | disabled=this.disabled 7 | ) 8 | as |ChoiceLabel| 9 | }} 10 | {{#if this.hasDescription}} 11 |
    12 | 13 | {{yield}} 14 | 15 | 16 |
    17 | {{#if this.shouldRenderError}} 18 |
    19 | 20 |
    21 | {{/if}} 22 | 23 | {{#if helpText}} 24 |
    25 | {{render-content @helpText}} 26 |
    27 | {{/if}} 28 |
    29 |
    30 | {{else}} 31 | 32 | {{yield}} 33 | 34 | {{/if}} 35 | {{/let}} 36 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-choice/label.hbs: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-color-picker.hbs: -------------------------------------------------------------------------------- 1 |
    6 |
    7 |
    8 | 13 |
    14 | 15 | 19 | 20 | {{#if @allowAlpha}} 21 | 26 | {{/if}} 27 |
    28 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-color-picker/alpha-picker.hbs: -------------------------------------------------------------------------------- 1 |
    5 |
    6 | 12 |
    13 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-color-picker/hue-picker.hbs: -------------------------------------------------------------------------------- 1 |
    5 | 11 |
    12 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-color-picker/slidable.hbs: -------------------------------------------------------------------------------- 1 | {{!-- template-lint-disable no-invalid-interactive --}} 2 |
    8 |
    9 |
    10 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-connected.hbs: -------------------------------------------------------------------------------- 1 | {{#if this.hasConnection}} 2 |
    3 | {{#if @left}} 4 | 5 | {{render-content @left}} 6 | 7 | {{/if}} 8 | 9 | 10 | {{yield}} 11 | 12 | 13 | {{#if @right}} 14 | 15 | {{render-content @right}} 16 | 17 | {{/if}} 18 |
    19 | {{else}} 20 | {{yield}} 21 | {{/if}} 22 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-connected/item.hbs: -------------------------------------------------------------------------------- 1 | {{!-- template-lint-disable no-invalid-interactive --}} 2 |
    8 | {{yield}} 9 |
    10 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-data-table/cell.hbs: -------------------------------------------------------------------------------- 1 | {{#if (or @header @fixed)}} 2 | {{#if @header}} 3 | 10 | {{#if sortable}} 11 | 25 | {{else}} 26 | {{render-content @text}} 27 | {{/if}} 28 | 29 | {{else}} 30 | 35 | {{render-content @text}} 36 | 37 | {{/if}} 38 | {{else}} 39 | 43 | {{render-content @text}} 44 | 45 | {{/if}} 46 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-data-table/heading.hbs: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-data-table/navigation.hbs: -------------------------------------------------------------------------------- 1 |
    2 | 9 | 10 | {{#each @columnVisibilityData as |column|}} 11 |
    12 | {{/each}} 13 | 14 | 21 |
    22 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-data-table/row.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#each @row as |cellText cellIndex|}} 3 | 10 | {{/each}} 11 | 12 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-data-table/total.hbs: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-date-picker/day.hbs: -------------------------------------------------------------------------------- 1 | {{#if @day}} 2 | {{!-- template-lint-disable no-positive-tabindex --}} 3 | 20 | {{else}} 21 |
    22 | {{/if}} 23 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-date-picker/weekday.hbs: -------------------------------------------------------------------------------- 1 |
    7 | {{@title}} 8 |
    9 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-description-list.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#each @items as |item|}} 3 |
    4 | {{render-content item.term}} 5 |
    6 |
    7 | {{render-content item.description}} 8 |
    9 | {{/each}} 10 |
    11 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-display-text.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (or @htmlTag @tagName "p")) as |DisplayText|}} 2 | 7 | {{#if (has-block)}} 8 | {{yield}} 9 | {{else}} 10 | {{@text}} 11 | {{/if}} 12 | 13 | {{/let}} 14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-empty-search-result.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#if @withIllustration}} 3 | 4 | {{!-- TODO: replace this with polaris-image when implemented. --}} 5 | Empty search results 11 | 12 | {{/if}} 13 | 14 | 15 | 16 | {{#if @description}} 17 | 18 | 19 |

    {{@description}}

    20 |     21 |     22 | {{/if}} 23 |     24 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-empty-state.hbs: -------------------------------------------------------------------------------- 1 |
    6 |
    7 |
    8 | {{#let 9 | (component "polaris-empty-state/details" 10 | heading=@heading 11 | text=@text 12 | primaryAction=this.mainAction 13 | secondaryAction=@secondaryAction 14 | ) 15 | as |Details| 16 | }} 17 | {{#if (has-block)}} 18 |
    19 | {{yield}} 20 |
    21 | {{else}} 22 |
    23 | {{/if}} 24 | {{/let}} 25 |
    26 | 27 |
    28 | {{!-- TODO: replace this with polaris-image when implemented. --}} 29 | 36 |
    37 |
    38 |
    39 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-empty-state/details.hbs: -------------------------------------------------------------------------------- 1 |
    6 | 7 | 8 |
    9 | {{#if (has-block)}} 10 | {{yield}} 11 | {{else}} 12 | {{@text}} 13 | {{/if}} 14 |
    15 |     16 | 17 | {{#if @primaryAction}} 18 |
    19 | 24 | 30 | 31 | {{#if @secondaryAction}} 32 | 33 | 38 | 39 | {{/if}} 40 | 41 |
    42 | {{/if}} 43 |
    44 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-footer-help.hbs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | 5 |
    6 | 7 |
    8 | {{#if (has-block)}} 9 | {{yield}} 10 | {{else}} 11 | {{@text}} 12 | {{/if}} 13 |
    14 |
    15 |
    16 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-form-layout.hbs: -------------------------------------------------------------------------------- 1 |
    8 | {{#if (has-block)}} 9 | {{yield 10 | (hash 11 | group=(component "polaris-form-layout/group") 12 | item=(component "polaris-form-layout/item") 13 | ) 14 | }} 15 | {{else}} 16 | {{@text}} 17 | {{/if}} 18 |
    19 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-form-layout/group.hbs: -------------------------------------------------------------------------------- 1 |
    9 | {{#if @title}} 10 |
    11 | {{@title}} 12 |
    13 | {{/if}} 14 | 15 |
    21 | {{#if (has-block)}} 22 | {{yield 23 | (hash 24 | item=(component "polaris-form-layout/item") 25 | ) 26 | }} 27 | {{else}} 28 | {{@text}} 29 | {{/if}} 30 |
    31 | 32 | {{#if @helpText}} 33 |
    34 | {{render-content @helpText}} 35 |
    36 | {{/if}} 37 |
    38 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-form-layout/item.hbs: -------------------------------------------------------------------------------- 1 |
    6 | {{yield}} 7 |
    8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-form.hbs: -------------------------------------------------------------------------------- 1 |
    15 | {{yield}} 16 | 17 | {{#if @implicitSubmit}} 18 | 19 | 20 | 21 | {{/if}} 22 |
    23 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-heading.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (or @htmlTag @tagName "h2")) as |Heading|}} 2 | 7 | {{#if (has-block)}} 8 | {{yield}} 9 | {{else}} 10 | {{@text}} 11 | {{/if}} 12 | 13 | {{/let}} 14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-icon.hbs: -------------------------------------------------------------------------------- 1 | 7 | {{#if this.showPlaceholder}} 8 |
    9 | {{else}} 10 | {{svg-jar this.iconSource 11 | class="Polaris-Icon__Svg" 12 | focusable="false" 13 | aria-hidden="true" 14 | id=this.svgElementId 15 | }} 16 | {{/if}} 17 |     18 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-inline-error.hbs: -------------------------------------------------------------------------------- 1 | {{#if @message}} 2 |
    8 |
    12 | 13 |
    14 | 15 | {{render-content @message}} 16 |
    17 | {{/if}} 18 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-label.hbs: -------------------------------------------------------------------------------- 1 |
    6 | 13 |
    14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-labelled.hbs: -------------------------------------------------------------------------------- 1 |
    6 | {{#if @label}} 7 |
    8 | 9 | {{@label}} 10 | 11 | 12 | {{#if this.mainAction}} 13 | 21 | {{/if}} 22 |
    23 | {{/if}} 24 | 25 | {{yield}} 26 | 27 | {{#if this.shouldRenderError}} 28 |
    29 | 30 |
    31 | {{/if}} 32 | 33 | {{#if @helpText}} 34 |
    39 | {{render-content @helpText}} 40 |
    41 | {{/if}} 42 |
    43 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-layout.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#if this.sectioned}} 3 | 4 | {{#if (has-block)}} 5 | {{yield 6 | (hash 7 | section=(component "polaris-layout/section") 8 | annotatedSection=(component "polaris-layout/annotated-section") 9 | ) 10 | }} 11 | {{else}} 12 | {{@text}} 13 | {{/if}} 14 | 15 | {{else}} 16 | {{#if (has-block)}} 17 | {{yield 18 | (hash 19 | section=(component "polaris-layout/section") 20 | annotatedSection=(component "polaris-layout/annotated-section") 21 | ) 22 | }} 23 | {{else}} 24 | {{@text}} 25 | {{/if}} 26 | {{/if}} 27 |
    28 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-layout/annotated-section.hbs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 | 5 | 6 | {{#if (has-block)}} 7 | {{yield}} 8 | {{else}} 9 | {{@text}} 10 | {{/if}} 11 | 12 |
    13 |
    14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-layout/annotation-content.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#if (has-block)}} 3 | {{yield}} 4 | {{else}} 5 | {{@text}} 6 | {{/if}} 7 |
    8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-layout/annotation.hbs: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 5 | {{#if @description}} 6 |
    7 | {{#if this.hasStringDescription}} 8 |

    9 | {{@description}} 10 |

    11 | {{else if @description}} 12 | {{render-content @description}} 13 | {{/if}} 14 |
    15 | {{/if}} 16 |     17 |
    18 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-layout/section.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#if (has-block)}} 3 | {{yield}} 4 | {{else}} 5 | {{@text}} 6 | {{/if}} 7 |
    8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-link.hbs: -------------------------------------------------------------------------------- 1 | {{#if @url}} 2 | 8 | {{#if (has-block)}} 9 | {{yield}} 10 | {{else}} 11 | {{@text}} 12 | {{/if}} 13 | 14 | {{else}} 15 | 26 | {{/if}} 27 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-list.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (if this.isBulletListType "ul" "ol")) as |List|}} 2 | 3 | {{yield 4 | (hash 5 | item=(component "polaris-list/item") 6 | ) 7 | }} 8 | 9 | {{/let}} 10 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-list/item.hbs: -------------------------------------------------------------------------------- 1 |
  • 2 | {{#if (has-block)}} 3 | {{yield}} 4 | {{else}} 5 | {{@text}} 6 | {{/if}} 7 |
    • 8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-option-list/checkbox.hbs: -------------------------------------------------------------------------------- 1 |
    5 | 17 |
    18 |
    19 | 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-page-actions.hbs: -------------------------------------------------------------------------------- 1 |
    2 | 6 | {{#if this.showSecondaryActions}} 7 | 8 | {{#each @secondaryActions as |secondaryAction|}} 9 | 17 | {{/each}} 18 | 19 | {{/if}} 20 | 21 | {{#if @primaryAction}} 22 | 29 | {{/if}} 30 | 31 |
    32 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-page.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#if this.hasHeaderContent}} 3 | 15 | {{/if}} 16 | 17 |
    18 | {{#if (has-block)}} 19 | {{yield}} 20 | {{else}} 21 | {{@text}} 22 | {{/if}} 23 |
    24 |
    25 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-page/action-icon.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-page/action.hbs: -------------------------------------------------------------------------------- 1 | {{! TODO: support url }} 2 | 27 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-page/header/action-group.hbs: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 10 | 11 | 12 | 13 | 17 | 18 | {{#if @details}} 19 |
    20 | {{render-content @details}} 21 |
    22 | {{/if}} 23 |     24 |     25 |
    26 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-page/header/rollup.hbs: -------------------------------------------------------------------------------- 1 | {{#if @hasRollup}} 2 |
    3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
    17 | {{/if}} 18 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-pagination.hbs: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-popover.hbs: -------------------------------------------------------------------------------- 1 | 7 | {{yield 8 | (hash 9 | activator=(component dd.Trigger style=this.triggerStyle) 10 | content=(component "polaris-popover/content" 11 | contentComponent=dd.Content 12 | uniqueId=dd.uniqueId 13 | sectioned=@sectioned 14 | fullWidth=@fullWidth 15 | fullHeight=@fullHeight 16 | ) 17 | open=dd.actions.open 18 | close=dd.actions.close 19 | toggle=dd.actions.toggle 20 | ) 21 | }} 22 | 23 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-progress-bar.hbs: -------------------------------------------------------------------------------- 1 |
    6 | 12 | 13 | 14 |
    19 | 20 | {{this.parsedProgress}}% 21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-radio-button.hbs: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-resource-list/checkable-button.hbs: -------------------------------------------------------------------------------- 1 | {{!-- template-lint-disable no-invalid-interactive --}} 2 |
    7 |
    8 | 14 |
    15 | {{@label}} 16 |
    17 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-resource-list/filter-control/date-selector.hbs: -------------------------------------------------------------------------------- 1 | 10 | 11 | {{#if showDatePredicate}} 12 |
    13 | 23 |
    24 |
    25 | 32 |
    33 | {{/if}} 34 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-resource-list/loading-overlay.hbs: -------------------------------------------------------------------------------- 1 | {{#if @loading}} 2 |
    3 | 4 |
    5 |
    6 | {{/if}} 7 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-setting-toggle.hbs: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 | {{#if (has-block)}} 5 | {{yield}} 6 | {{else}} 7 | {{@text}} 8 | {{/if}} 9 |
    10 | 11 |
    12 | {{#if this.mainAction}} 13 | 20 | {{/if}} 21 |
    22 |
    23 |     24 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-skeleton-body-text.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#each this.dummyLines}} 3 |
    4 | {{/each}} 5 |
    6 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-skeleton-display-text.hbs: -------------------------------------------------------------------------------- 1 |
    5 |
    6 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-skeleton-page/action.hbs: -------------------------------------------------------------------------------- 1 |
    2 | 6 |
    7 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-skeleton-thumbnail.hbs: -------------------------------------------------------------------------------- 1 |
    2 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-spinner.hbs: -------------------------------------------------------------------------------- 1 | {{!-- TODO: replace this with polaris-image when implemented. --}} 2 | 12 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-stack.hbs: -------------------------------------------------------------------------------- 1 |
    8 | {{#if (has-block)}} 9 | {{yield (hash item=(component "polaris-stack/item"))}} 10 | {{else}} 11 | {{text}} 12 | {{/if}} 13 |
    14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-stack/item.hbs: -------------------------------------------------------------------------------- 1 |
    6 | {{#if (has-block)}} 7 | {{yield}} 8 | {{else}} 9 | {{text}} 10 | {{/if}} 11 |
    12 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-sticky.hbs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | {{yield (hash 5 | isSticky=this.isSticky 6 | )}} 7 |
    8 |
    9 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-subheading.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (or @htmlTag @tagName "h3")) as |Subheading|}} 2 | 8 | 9 | {{#if (has-block)}} 10 | {{yield}} 11 | {{else}} 12 | {{@text}} 13 | {{/if}} 14 | 15 | 16 | {{/let}} 17 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-tag.hbs: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {{#if (has-block)}} 10 | {{yield}} 11 | {{else}} 12 | {{@text}} 13 | {{/if}} 14 | 15 | 16 | 17 | {{#if @onRemove}} 18 | 29 | {{/if}} 30 | 31 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-text-container.hbs: -------------------------------------------------------------------------------- 1 |
    2 | {{#if (has-block)}} 3 | {{yield}} 4 | {{else}} 5 | {{@text}} 6 | {{/if}} 7 |
    8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-text-field/resizer.hbs: -------------------------------------------------------------------------------- 1 | {{!-- 2 | N.B. the two dummy input divs in this component MUST be one-liners. 3 | If they are split onto multiple lines, they will be too big, and as a result 4 | the text area control will appear a couple of lines taller than it should do. 5 | This is because of the `white-space: pre-wrap` style applied by Polaris, 6 | which replicates the white space/wrapping behaviour of the textarea control. 7 | --}} 8 | {{!-- template-lint-disable no-invalid-interactive --}} 9 | 24 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-text-field/spinner.hbs: -------------------------------------------------------------------------------- 1 | {{! template-lint-disable no-invalid-interactive }} 2 |
    9 |
    18 |
    19 | 20 |
    21 |
    22 | 23 |
    32 |
    33 | 34 |
    35 |
    36 |
    37 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-text-style.hbs: -------------------------------------------------------------------------------- 1 | {{#let (element (if (eq this.elementTagName "code") "code" "span")) as |TextStyle|}} 2 | 7 | {{#if (has-block)}} 8 | {{yield}} 9 | {{else}} 10 | {{@text}} 11 | {{/if}} 12 | 13 | {{/let}} 14 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-thumbnail.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{@alt}} 7 | 8 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-unstyled-link.hbs: -------------------------------------------------------------------------------- 1 | {{!-- template-lint-disable no-positive-tabindex --}} 2 | 21 | {{#if (has-block)}} 22 | {{yield}} 23 | {{else}} 24 | {{text}} 25 | {{/if}} 26 | 27 | -------------------------------------------------------------------------------- /addon/templates/components/polaris-visually-hidden.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#if (has-block)}} 3 | {{yield}} 4 | {{else}} 5 | {{@text}} 6 | {{/if}} 7 | 8 | -------------------------------------------------------------------------------- /addon/templates/components/render-content.hbs: -------------------------------------------------------------------------------- 1 | {{#if contentIsComponentHash}} 2 | {{component-proxy componentName=content.componentName props=content.props}} 3 | {{else if contentIsComponentDefinition}} 4 | {{component content}} 5 | {{else}} 6 | {{content}} 7 | {{/if}} 8 | -------------------------------------------------------------------------------- /addon/templates/components/wrapper-element.hbs: -------------------------------------------------------------------------------- 1 | {{yield}} 2 | -------------------------------------------------------------------------------- /addon/utils/breakpoints.js: -------------------------------------------------------------------------------- 1 | const breakpoints = { 2 | navBarCollapsed: '769px', 3 | stackedContent: '1043px', 4 | }; 5 | 6 | const noWindowMatches = { 7 | media: '', 8 | addListener() {}, 9 | removeListener() {}, 10 | matches: false, 11 | }; 12 | 13 | export function stackedContent() { 14 | return typeof window === 'undefined' 15 | ? noWindowMatches 16 | : window.matchMedia(`(max-width: ${breakpoints.stackedContent})`); 17 | } 18 | -------------------------------------------------------------------------------- /addon/utils/deprecate-class-argument.js: -------------------------------------------------------------------------------- 1 | import { DEBUG } from '@glimmer/env'; 2 | import { deprecate } from '@ember/debug'; 3 | import { dasherize } from '@ember/string'; 4 | 5 | export default function deprecateClassArgument(target) { 6 | if (DEBUG) { 7 | const wrapperClass = class extends target { 8 | init() { 9 | const componentName = target.name; 10 | 11 | deprecate( 12 | `[${componentName}] Passing 'class' argument is deprecated! Switch to angle bracket invocation and pass an HTML attribute instead`, 13 | !this.class, 14 | { 15 | id: `ember-polaris.${dasherize(componentName)}.class-arg`, 16 | until: '7.0.0', 17 | } 18 | ); 19 | 20 | return super.init(...arguments); 21 | } 22 | }; 23 | 24 | return wrapperClass; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /addon/utils/dom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utility to wrap nodes in wrapper nodes 3 | * 4 | * @param {Array} nodesToWrap List of nodes to be wrapped 5 | * @param {HtmlNode} wrapper The node to wrap matching child nodes in. 6 | * 7 | */ 8 | export function wrapChildren(nodesToWrap, wrapper) { 9 | let clonedWrapper; 10 | 11 | nodesToWrap.forEach((node) => { 12 | clonedWrapper = wrapper.cloneNode(); 13 | node.parentNode.insertBefore(clonedWrapper, node); 14 | clonedWrapper.appendChild(node); 15 | }); 16 | } 17 | 18 | /** 19 | * Convert an htmlCollection into a filtered array. 20 | * 21 | */ 22 | export function rejectNodesByClassName(htmlCollection, className) { 23 | return [...htmlCollection].filter((el) => !el.classList.contains(className)); 24 | } 25 | -------------------------------------------------------------------------------- /addon/utils/focus.js: -------------------------------------------------------------------------------- 1 | export function handleMouseUpByBlurring({ currentTarget }) { 2 | currentTarget.blur(); 3 | } 4 | -------------------------------------------------------------------------------- /addon/utils/id.js: -------------------------------------------------------------------------------- 1 | import { computed } from '@ember/object'; 2 | 3 | function makeComputedIdGenerator(idGenerator) { 4 | return function (idPath, variation) { 5 | return computed(idPath, function () { 6 | return idGenerator(this.get(idPath), variation); 7 | }); 8 | }; 9 | } 10 | 11 | export function labelId(id) { 12 | return idVariation(id, 'Label'); 13 | } 14 | export const computedLabelId = makeComputedIdGenerator(labelId); 15 | 16 | export function errorId(id) { 17 | return idVariation(id, 'Error'); 18 | } 19 | export const computedErrorId = makeComputedIdGenerator(errorId); 20 | 21 | export function helpTextId(id) { 22 | return idVariation(id, 'HelpText'); 23 | } 24 | export const computedHelpTextId = makeComputedIdGenerator(helpTextId); 25 | 26 | export function idVariation(id, suffix) { 27 | return `${id}${suffix}`; 28 | } 29 | export const computedIdVariation = makeComputedIdGenerator(idVariation); 30 | -------------------------------------------------------------------------------- /addon/utils/math.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Clamps the input `num` between the `min` and `max` values. 3 | * 4 | * Examples: 5 | * clamp(5, 0, 10) // => 5 6 | * clamp(5, 7, 10) // => 7 7 | * clamp(5, 0, 3) // => 3 8 | */ 9 | export function clamp(num, min, max) { 10 | return Math.max(min, Math.min(max, num)); 11 | } 12 | -------------------------------------------------------------------------------- /addon/utils/normalize-auto-complete.js: -------------------------------------------------------------------------------- 1 | import { computed } from '@ember/object'; 2 | 3 | /** 4 | * Normalizes a boolean as a HTML auto-complete value 5 | * 6 | * @param {Boolean} autoComplete 7 | */ 8 | export function normalizeAutoComplete(autoComplete) { 9 | if (autoComplete == null) { 10 | return autoComplete; 11 | } 12 | 13 | return autoComplete ? 'on' : 'off'; 14 | } 15 | 16 | /** 17 | * Takes a property name and normalizes as a HTML auto-complete value 18 | * 19 | * @param {String} autoCompleteProperty 20 | */ 21 | export function normalizeAutoCompleteProperty(autoCompleteProperty) { 22 | return computed(autoCompleteProperty, function () { 23 | let autoComplete = this.get(autoCompleteProperty); 24 | return normalizeAutoComplete(autoComplete); 25 | }).readOnly(); 26 | } 27 | -------------------------------------------------------------------------------- /app/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/app/.gitkeep -------------------------------------------------------------------------------- /app/components/component-proxy.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/component-proxy'; 2 | -------------------------------------------------------------------------------- /app/components/key-event-listener.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/key-event-listener'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-action-list.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-action-list'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-action-list/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-action-list/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-action-list/section.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-action-list/section'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-avatar.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-avatar'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-badge.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-badge'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-banner.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-banner'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-breadcrumbs.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-breadcrumbs'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-button-group.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-button-group'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-button-group/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-button-group/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-button.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-button'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-button/content.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-button/content'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-callout-card.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-callout-card'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-caption.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-caption'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-card.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-card'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-card/section-header.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-card/section-header'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-card/section.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-card/section'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-checkbox.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-checkbox'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-choice-list.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-choice-list'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-choice.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-choice'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-choice/label.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-choice/label'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-color-picker.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-color-picker'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-color-picker/alpha-picker.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-color-picker/alpha-picker'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-color-picker/hue-picker.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-color-picker/hue-picker'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-color-picker/slidable.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-color-picker/slidable'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-connected.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-connected'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-connected/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-connected/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-data-table.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-data-table'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-data-table/cell.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-data-table/cell'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-data-table/heading.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-data-table/heading'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-data-table/navigation.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-data-table/navigation'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-data-table/row.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-data-table/row'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-data-table/total.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-data-table/total'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-date-picker.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-date-picker'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-date-picker/day.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-date-picker/day'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-date-picker/month.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-date-picker/month'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-date-picker/weekday.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-date-picker/weekday'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-description-list.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-description-list'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-display-text.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-display-text'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-drop-zone.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-drop-zone'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-drop-zone/file-upload.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-drop-zone/file-upload'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-empty-search-result.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-empty-search-result'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-empty-state.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-empty-state'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-empty-state/details.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-empty-state/details'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-footer-help.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-footer-help'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-form-layout.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-form-layout'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-form-layout/group.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-form-layout/group'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-form-layout/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-form-layout/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-form.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-form'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-heading.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-heading'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-icon.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-icon'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-inline-error.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-inline-error'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-label.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-label'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-labelled.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-labelled'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-layout.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-layout'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-layout/annotated-section.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-layout/annotated-section'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-layout/annotation-content.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-layout/annotation-content'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-layout/annotation.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-layout/annotation'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-layout/section.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-layout/section'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-link.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-link'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-list.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-list'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-list/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-list/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-option-list.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-option-list'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-option-list/checkbox.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-option-list/checkbox'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-option-list/option.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-option-list/option'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page-actions.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page-actions'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page/action-icon.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page/action-icon'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page/action.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page/action'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page/header.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page/header'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page/header/action-group.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page/header/action-group'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-page/header/rollup.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-page/header/rollup'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-pagination.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-pagination'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-popover.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-popover'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-popover/content.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-popover/content'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-progress-bar.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-progress-bar'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-radio-button.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-radio-button'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-range-slider.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-range-slider'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/bulk-actions.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/bulk-actions'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/bulk-actions/bulk-action-button.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/bulk-actions/bulk-action-button'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/checkable-button.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/checkable-button'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/filter-control.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/filter-control'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/filter-control/date-selector.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/filter-control/date-selector'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/filter-control/filter-creator.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/filter-control/filter-creator'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/filter-control/filter-value-selector.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/filter-control/filter-value-selector'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/loading-overlay.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/loading-overlay'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-resource-list/provider.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-resource-list/provider'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-select.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-select'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-setting-toggle.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-setting-toggle'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-skeleton-body-text.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-skeleton-body-text'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-skeleton-display-text.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-skeleton-display-text'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-skeleton-page.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-skeleton-page'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-skeleton-page/action.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-skeleton-page/action'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-skeleton-thumbnail.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-skeleton-thumbnail'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-spinner.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-spinner'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-stack.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-stack'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-stack/item.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-stack/item'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-sticky.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-sticky'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-subheading.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-subheading'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-tag.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-tag'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-text-container.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-text-container'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-text-field.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-text-field'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-text-field/resizer.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-text-field/resizer'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-text-field/spinner.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-text-field/spinner'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-text-style.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-text-style'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-thumbnail.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-thumbnail'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-unstyled-link.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-unstyled-link'; 2 | -------------------------------------------------------------------------------- /app/components/polaris-visually-hidden.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/polaris-visually-hidden'; 2 | -------------------------------------------------------------------------------- /app/components/render-content.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/render-content'; 2 | -------------------------------------------------------------------------------- /app/components/wrapper-element.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/components/wrapper-element'; 2 | -------------------------------------------------------------------------------- /app/helpers/is-component-definition.js: -------------------------------------------------------------------------------- 1 | export { 2 | default, 3 | isComponentDefinition, 4 | } from '@smile-io/ember-polaris/helpers/is-component-definition'; 5 | -------------------------------------------------------------------------------- /app/helpers/polaris-data-table/insert-presentational-cell.js: -------------------------------------------------------------------------------- 1 | export { 2 | default, 3 | polarisDataTableInsertPresentationalCell, 4 | } from '@smile-io/ember-polaris/helpers/polaris-data-table/insert-presentational-cell'; 5 | -------------------------------------------------------------------------------- /app/helpers/polaris-date-picker/derive-range.js: -------------------------------------------------------------------------------- 1 | export { 2 | default, 3 | deriveRange, 4 | } from '@smile-io/ember-polaris/helpers/polaris-date-picker/derive-range'; 5 | -------------------------------------------------------------------------------- /app/helpers/polaris-select/is-group.js: -------------------------------------------------------------------------------- 1 | export { 2 | default, 3 | polarisSelectIsGroup, 4 | } from '@smile-io/ember-polaris/helpers/polaris-select/is-group'; 5 | -------------------------------------------------------------------------------- /app/services/sticky-manager.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/services/sticky-manager'; 2 | -------------------------------------------------------------------------------- /app/styles/components/polaris-popover.scss: -------------------------------------------------------------------------------- 1 | .Polaris-PositionedOverlay { 2 | &.ember-basic-dropdown-content { 3 | background: transparent; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /app/styles/ember-polaris.scss: -------------------------------------------------------------------------------- 1 | @import './ember-polaris/styles'; 2 | 3 | @import 'components/polaris-popover'; 4 | -------------------------------------------------------------------------------- /app/utils/breakpoints.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/utils/breakpoints'; 2 | -------------------------------------------------------------------------------- /app/utils/drop-zone.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/utils/drop-zone'; 2 | -------------------------------------------------------------------------------- /app/utils/focus.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/utils/focus'; 2 | -------------------------------------------------------------------------------- /app/utils/id.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/utils/id'; 2 | -------------------------------------------------------------------------------- /app/utils/normalize-auto-complete.js: -------------------------------------------------------------------------------- 1 | export { default } from '@smile-io/ember-polaris/utils/normalize-auto-complete'; 2 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (/* environment, appConfig */) { 4 | return {}; 5 | }; 6 | -------------------------------------------------------------------------------- /config/release.js: -------------------------------------------------------------------------------- 1 | /* jshint node:true */ 2 | 3 | // For details on each option run `ember help release` 4 | module.exports = { 5 | local: false, 6 | remote: 'origin', 7 | annotation: 'Release %@', 8 | message: 'Bumped version to %@', 9 | manifest: ['package.json'], 10 | // Don't publish to npm 11 | publish: false, 12 | strategy: 'semver', 13 | }; 14 | -------------------------------------------------------------------------------- /docs/avatar.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Avatar 4 | 5 | `polaris-avatar` implements the [Polaris Avatar component](https://polaris.shopify.com/components/images-and-icons/avatar). Note that we have added an `avatarSourcePath` property which specifies the path to where the included Polaris avatar SVG images reside in the host application. 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{polaris-avatar name="Jim Smith"}} 13 | ``` 14 | 15 | Display a customer avatar with a specific image: 16 | 17 | ```hbs 18 | {{polaris-avatar customer=true source="/assets/avatars/jim-smith.png"}} 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/badge.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Badge 4 | 5 | `polaris-badge` implements the [Polaris Badge component](https://polaris.shopify.com/components/images-and-icons/badge). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{polaris-badge text="Fulfilled"}} 13 | ``` 14 | 15 | With a success status set: 16 | 17 | ```hbs 18 | {{polaris-badge status="success" text="Complete"}} 19 | ``` 20 | 21 | With a progress status set: 22 | 23 | ```hbs 24 | {{polaris-badge progress="partiallyComplete" text="Partially complete"}} 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/banner.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Banner 4 | 5 | `polaris-banner` implements the [Polaris Banner component](https://polaris.shopify.com/components/feedback-indicators/banner). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{polaris-banner text="This order has been shipped."}} 13 | ``` 14 | 15 | With a success status set, custom icon, content, dismiss button and actions: 16 | 17 | ```hbs 18 | {{#polaris-banner 19 | status="success" 20 | icon="confetti" 21 | action=(hash 22 | text="Track" 23 | onAction=(action "trackPackage") 24 | ) 25 | secondaryAction=(hash 26 | text="View" 27 | onAction=(action "viewOrder") 28 | ) 29 | onDismiss=(action "handleDismiss") 30 | }} 31 |

    This order has been shipped.

    32 | {{/polaris-banner}} 33 | ``` 34 | 35 | **NOTE:** If using the banner inside a card/modal, you need to manually pass `withinContentContainer=true`. This manual requirement won't be needed once `app-provider` component is implemented. 36 | -------------------------------------------------------------------------------- /docs/button.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Button 4 | 5 | `polaris-button` implements the [Polaris Button component](https://polaris.shopify.com/components/actions/button). 6 | 7 | In the future we intend to extend this component to be more Ember-friendly by adding support for `link-to` behavior; however, this is not yet implemented. In the meantime we suggest using something like [`ember-transition-helper`](https://github.com/peec/ember-transition-helper) to achieve the same result. 8 | 9 | ### Examples 10 | 11 | Basic button: 12 | 13 | ```hbs 14 | {{#polaris-button onClick=(action "doSomething")}} 15 | Push me! 16 | {{/polaris-button}} 17 | ``` 18 | 19 | Slim external link: 20 | 21 | ```hbs 22 | {{#polaris-button 23 | url="www.example.com" 24 | external=true 25 | size="slim" 26 | }} 27 | I'm a link 28 | {{/polaris-button}} 29 | ``` 30 | 31 | Loading button with a spinner: 32 | 33 | ```hbs 34 | {{polaris-button 35 | text="Load something" 36 | loading=isLoading 37 | onClick=(action (mut isLoading) true) 38 | }} 39 | ``` 40 | -------------------------------------------------------------------------------- /docs/callout-card.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Callout card 4 | 5 | `polaris-callout-card` implements the [Polaris Callout card component](https://polaris.shopify.com/components/structure/callout-card). 6 | 7 | ### Examples 8 | 9 | Inline usage without secondary action: 10 | 11 | ```hbs 12 | {{polaris-callout-card 13 | title="New feature" 14 | text="This new feature is awesome!" 15 | primaryAction=(hash 16 | text="Take a look" 17 | onAction=(action "showNewFeature") 18 | ) 19 | }} 20 | ``` 21 | 22 | Block usage with secondary action: 23 | 24 | ```hbs 25 | {{#polaris-callout-card 26 | title="New feature" 27 | primaryAction=(hash 28 | text="Take a look" 29 | onAction=(action "showNewFeature") 30 | ) 31 | secondaryAction=(hash 32 | text="Learn more" 33 | onAction=(action "showDetails") 34 | ) 35 | }} 36 | We've got an awesome new feature! 37 | {{/polaris-callout-card}} 38 | ``` 39 | -------------------------------------------------------------------------------- /docs/caption.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Caption 4 | 5 | `polaris-caption` implements the [Polaris Caption component](https://polaris.shopify.com/components/titles-and-text/caption). 6 | 7 | ### Examples 8 | 9 | Caption inline usage: 10 | 11 | ```hbs 12 | {{polaris-caption text="Caption text"}} 13 | ``` 14 | 15 | Caption block usage: 16 | 17 | ```hbs 18 | {{#polaris-caption}} 19 | Caption text 20 | {{/polaris-caption}} 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/checkbox.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Checkbox 4 | 5 | `polaris-checkbox` implements the [Polaris Checkbox component](https://polaris.shopify.com/components/forms/checkbox). 6 | 7 | **NOTE:** _the React component's `id` property has been renamed to `inputId` in this Ember implementation._ 8 | 9 | ### Examples 10 | 11 | Basic checkbox: 12 | 13 | ```hbs 14 | {{polaris-checkbox 15 | label="This is a checkbox" 16 | checked=checked 17 | onChange=(action (mut checked)) 18 | }} 19 | ``` 20 | 21 | Checkbox with help text and value: 22 | 23 | ```hbs 24 | {{polaris-checkbox 25 | label="This is a checkbox with help text" 26 | helpText="Click the checkbox to toggle something" 27 | value="my-checkbox-value" 28 | checked=checked 29 | onChange=(action (mut checked)) 30 | }} 31 | ``` 32 | 33 | Checkbox with a component rendered as its label: 34 | 35 | ```hbs 36 | {{polaris-checkbox 37 | label=(component "my-awesome-label" color="purple") 38 | checked=checked 39 | onChange=(action (mut checked)) 40 | }} 41 | ``` 42 | -------------------------------------------------------------------------------- /docs/color-picker.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Color picker 4 | 5 | `polaris-color-picker` implements the [Polaris Color picker component](https://polaris.shopify.com/components/forms/color-picker). 6 | 7 | ### Examples 8 | 9 | Default color picker: 10 | 11 | ```hbs 12 | {{polaris-color-picker 13 | color=color 14 | onChange=(action (mut color)) 15 | }} 16 | ``` 17 | 18 | Color picker with alpha: 19 | 20 | ```hbs 21 | {{polaris-color-picker 22 | color=color 23 | allowAlpha=true 24 | onChange=(action (mut color)) 25 | }} 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/date-picker.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Date picker 4 | 5 | `polaris-date-picker` implements the [Polaris Date picker component](https://polaris.shopify.com/components/forms/date-picker). 6 | 7 | ### Examples 8 | 9 | Default date picker: 10 | 11 | ```hbs 12 | {{polaris-date-picker 13 | month=month 14 | year=year 15 | selected=selected 16 | onChange=(action (mut selected)) 17 | onMonthChange=(action "handleMonthChange") 18 | }} 19 | ``` 20 | 21 | where `handleMonthChange` receives both `month` and `year` arguments as Numbers: 22 | 23 | ```javascript 24 | /** 25 | parent-component.js 26 | */ 27 | 28 | month: 1, 29 | year: 2018, 30 | selected: null, 31 | 32 | actions: { 33 | handleMonthChange(month, year) { 34 | this.setProperties({ 35 | month, 36 | year 37 | }); 38 | } 39 | } 40 | ``` 41 | 42 | Date picker with two months displayed at a time: 43 | 44 | ```hbs 45 | {{polaris-date-picker 46 | month=month 47 | year=year 48 | selected=selected 49 | multiMonth=true 50 | onChange=(action (mut selected)) 51 | onMonthChange=(action "handleMonthChange") 52 | }} 53 | ``` 54 | -------------------------------------------------------------------------------- /docs/description-list.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Description list 4 | 5 | `polaris-description-list` implements the [Polaris Description list component](https://polaris.shopify.com/components/lists/description-list). 6 | 7 | ### Example 8 | 9 | Basic description list usage (using [ember-array-helper](https://github.com/kellyselden/ember-array-helper)): 10 | 11 | ```hbs 12 | {{polaris-description-list 13 | items=(array 14 | (hash 15 | term="My term" 16 | description="My description" 17 | ) 18 | (hash 19 | term="Another term" 20 | description="Another description" 21 | ) 22 | ) 23 | }} 24 | ``` 25 | 26 | Rendering a component in place of `item` or `description`: 27 | 28 | ```hbs 29 | {{polaris-description-list 30 | items=(array 31 | (hash 32 | term=(component "my-term-component") 33 | description="..." 34 | ) 35 | (hash 36 | term="..." 37 | description=(component "my-description-component") 38 | ) 39 | ) 40 | }} 41 | ``` 42 | -------------------------------------------------------------------------------- /docs/display-text.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Display text 4 | 5 | `polaris-display-text` implements the [Polaris Display text component](https://polaris.shopify.com/components/titles-and-text/display-text). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{#polaris-display-text}} 13 | This is some basic display text 14 | {{/polaris-display-text}} 15 | ``` 16 | 17 | Extra-large heading: 18 | 19 | ```hbs 20 | {{#polaris-display-text 21 | htmlTag="h1" 22 | size="extraLarge" 23 | }} 24 | This is a LARGE heading 25 | {{/polaris-display-text}} 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/drop-zone.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Drop zone 4 | 5 | `polaris-drop-zone` implements the [Polaris Drop zone component](https://polaris.shopify.com/components/actions/drop-zone). 6 | 7 | ### Examples 8 | 9 | Plain drop zone: 10 | 11 | ```hbs 12 | {{polaris-drop-zone}} 13 | ``` 14 | 15 | Drop zone with image file upload: 16 | 17 | ```hbs 18 | {{#polaris-drop-zone 19 | accept="image/*" 20 | type="image" 21 | onDrop=(action "dropImages") 22 | as |dropZone| 23 | }} 24 | {{dropZone.fileUpload}} 25 | {{/polaris-drop-zone}} 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/empty-state.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Empty state 4 | 5 | `polaris-empty-state` implements the [Polaris Empty state component](https://polaris.shopify.com/components/structure/empty-state). 6 | 7 | **NOTE:** _the `largeImage` property is currently unimplemented._ 8 | 9 | ### Examples 10 | 11 | Inline usage without secondary action: 12 | 13 | ```hbs 14 | {{polaris-empty-state 15 | heading="Check out this new feature" 16 | image="new-feature.jpg" 17 | text="This new feature is great" 18 | action=(hash 19 | text="Take a look" 20 | onAction=(action "showNewFeature") 21 | ) 22 | }} 23 | ``` 24 | 25 | Block usage with secondary action: 26 | 27 | ```hbs 28 | {{#polaris-empty-state 29 | heading="Check out this new feature" 30 | image="new-feature.jpg" 31 | action=(hash 32 | text="Take a look" 33 | onAction=(action "showNewFeature") 34 | ) 35 | secondaryAction=(hash 36 | text="Learn more" 37 | onAction=(action "openBlog") 38 | ) 39 | }} 40 | We've got an awesome new feature! 41 | {{/polaris-empty-state}} 42 | ``` 43 | -------------------------------------------------------------------------------- /docs/footer-help.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Footer help 4 | 5 | `polaris-footer-help` implements the [Polaris Footer help component](https://polaris.shopify.com/components/titles-and-text/footer-help). 6 | 7 | ### Examples 8 | 9 | Inline usage: 10 | 11 | ```hbs 12 | {{polaris-footer-help text="Looking for help? Call us on 1234 56 78."}} 13 | ``` 14 | 15 | Block usage: 16 | 17 | ```hbs 18 | {{#polaris-footer-help}} 19 | Learn more about {{polaris-link url="http://www.some-product.com/this-one" text="this product"}}. 20 | {{/polaris-footer-help}} 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/form.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Form 4 | `polaris-form` implements the [Polaris Form component](https://polaris.shopify.com/components/forms/form). 5 | 6 | ### Examples 7 | 8 | ```hbs 9 | {{#polaris-form onSubmit=(action "handleFormSubmit")}} 10 | ... items... 11 | {{/polaris-form}} 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/heading.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Heading 4 | 5 | `polaris-heading` implements the [Polaris Heading component](https://polaris.shopify.com/components/titles-and-text/heading). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{#polaris-heading}} 13 | This is a basic heading 14 | {{/polaris-heading}} 15 | ``` 16 | 17 | Emphasised heading: 18 | 19 | ```hbs 20 | {{#polaris-heading 21 | tagName="em" 22 | }} 23 | This is an emphasised heading 24 | {{/polaris-heading}} 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/icon.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Icon 4 | 5 | `polaris-icon` implements the [Polaris Icon component](https://polaris.shopify.com/components/images-and-icons/icon). 6 | 7 | **NOTE:** The icon component uses [`ember-svg-jar`](https://github.com/ivanvotti/ember-svg-jar/) 8 | to render the SVG icons. You will have to make sure that you copy the icons into your public folder and 9 | configure `ember-svg-jar` to serve them from `polaris` namespace. 10 | 11 | ### Examples 12 | 13 | Basic usage: 14 | 15 | ```hbs 16 | {{polaris-icon source="notes"}} 17 | ``` 18 | 19 | Customizing with color and backdrop: 20 | 21 | ```hbs 22 | {{polaris-icon source="add" color="darkTeal" backdrop=true}} 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/inline-error.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Inline error 4 | 5 | `polaris-inline-error` implements the [Polaris Inline error component](https://polaris.shopify.com/components/forms/inline-error). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{polaris-inline-error 13 | fieldID="unique-ID" 14 | message="This username is already taken." 15 | }} 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/link.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Link 4 | 5 | `polaris-link` implements the [Polaris Link 6 | component](https://polaris.shopify.com/components/navigation/link). 7 | 8 | ### Examples 9 | 10 | Basic inline link usage: 11 | 12 | ```hbs 13 | {{polaris-link 14 | text="This is an inline link" 15 | url="http://www.somewhere.com/" 16 | }} 17 | ``` 18 | 19 | External link in block form: 20 | 21 | ```hbs 22 | {{#polaris-link 23 | url="http://www.somewhere.com/" 24 | external=true 25 | }} 26 | This is a block link 27 | {{/polaris-link}} 28 | ``` 29 | 30 | Button usage: 31 | 32 | ```hbs 33 | {{polaris-link 34 | text="Click me" 35 | onClick=(action "linkButtonClicked") 36 | }} 37 | ``` 38 | -------------------------------------------------------------------------------- /docs/list.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## List 4 | 5 | `polaris-list` implements the [Polaris List component](https://polaris.shopify.com/components/lists/list). This component should be used in block form to access the `list.item` component, as in the examples below. 6 | 7 | ### Examples 8 | 9 | Default (bulleted) list (this can also be achieved by explicitly passing `type="bullet"` to the `polaris-list`): 10 | 11 | ```hbs 12 | {{#polaris-list as |list|}} 13 | {{list.item text="Point one (inline form)"}} 14 | 15 | {{#list.item}} 16 | Second point (block form) 17 | {{/list.item}} 18 | {{/polaris-list}} 19 | ``` 20 | 21 | Numbered list iterating over a `numberedItems` array: 22 | 23 | ```hbs 24 | {{#polaris-list type="number" as |list|}} 25 | {{#each numberedItems as |item|}} 26 | {{list.item text=item}} 27 | {{/each}} 28 | {{/polaris-list}} 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/page-actions.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Page actions 4 | 5 | `polaris-page-actions` implements the [Polaris Page actions component](https://polaris.shopify.com/components/structure/page-actions). 6 | 7 | ### Examples 8 | 9 | Primary action only: 10 | 11 | ```hbs 12 | {{polaris-page-actions 13 | primaryAction=(hash 14 | text="Save" 15 | onAction=(action "save") 16 | ) 17 | }} 18 | ``` 19 | 20 | Primary action with two secondary actions (using [ember-array-helper](https://github.com/kellyselden/ember-array-helper)): 21 | 22 | ```hbs 23 | {{polaris-page-actions 24 | primaryAction=(hash 25 | text="Save" 26 | onAction=(action "save") 27 | ) 28 | secondaryActions=(array 29 | (hash 30 | text="Delete" 31 | onAction=(action "delete") 32 | ) 33 | (hash 34 | text="Cancel" 35 | onAction=(action "cancel") 36 | ) 37 | ) 38 | }} 39 | ``` 40 | -------------------------------------------------------------------------------- /docs/pagination.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Pagination 4 | 5 | `polaris-pagination` implements the [Polaris Pagination 6 | component](https://polaris.shopify.com/components/navigation/pagination). 7 | 8 | **NOTE:** _the - `nextTooltip`, `previousTooltip` `nextUrl` and `previousUrl` properties are not currently implemented._ 9 | 10 | ### Examples 11 | 12 | Basic usage: 13 | 14 | ```hbs 15 | {{polaris-pagination 16 | hasPrevious=true 17 | hasNext=true 18 | onPrevious=(action "handlePreviousButton") 19 | onNext=(action "handleNextButton") 20 | }} 21 | ``` 22 | 23 | Plain mode pagination: 24 | 25 | ```hbs 26 | {{polaris-pagination 27 | plain=true 28 | hasPrevious=true 29 | hasNext=true 30 | onPrevious=(action "handlePreviousButton") 31 | onNext=(action "handleNextButton") 32 | }} 33 | ``` 34 | 35 | With keyboard support: 36 | 37 | ```hbs 38 | {{polaris-pagination 39 | hasPrevious=true 40 | hasNext=true 41 | previousKeys=(array "ArrowLeft" "KeyH") 42 | nextKeys=(array "ArrowRight" "KeyL") 43 | onPrevious=(action "handlePreviousButton") 44 | onNext=(action "handleNextButton") 45 | }} 46 | ``` 47 | -------------------------------------------------------------------------------- /docs/popover.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Popover 4 | 5 | `polaris-popover` implements the [Polaris Popover 6 | component](https://polaris.shopify.com/components/overlays/popover). This component uses [`ember-basic-dropdown`](https://github.com/cibernox/ember-basic-dropdown) to implement popover functionality. Note that the usage is slightly different from the React implementation so please pay attention to the examples below. 7 | 8 | 9 | **NOTE:** _the `active`, `activatorWrapper`, and `preventAutofocus` properties are currently unimplemented._ 10 | 11 | ### Examples 12 | 13 | Basic usage: 14 | 15 | ```hbs 16 | {{#polaris-popover as |popover|}} 17 | {{#popover.activator}} 18 | {{polaris-button text="Toggle popover"}} 19 | {{/popover.activator}} 20 | 21 | {{#popover.content}} 22 | This is the popover content 23 | {{/popover.content}} 24 | {{/polaris-popover}} 25 | ``` 26 | 27 | Sectioned popover with `onClose` action: 28 | 29 | ```hbs 30 | {{#polaris-popover 31 | sectioned=true 32 | onClose=(action "myCloseAction") 33 | as |popover| 34 | }} 35 | {{#popover.activator}} 36 | {{polaris-button text="Toggle popover"}} 37 | {{/popover.activator}} 38 | 39 | {{#popover.content}} 40 | This is the popover content 41 | {{/popover.content}} 42 | {{/polaris-popover}} 43 | ``` 44 | -------------------------------------------------------------------------------- /docs/progress-bar.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Progress bar 4 | 5 | `polaris-progress-bar` implements the [Polaris Progress bar component](https://polaris.shopify.com/components/feedback-indicators/progress-bar). 6 | 7 | ### Example 8 | 9 | Basic usage (renders medium-sized progress bar): 10 | 11 | ```hbs 12 | {{polaris-progress-bar progress=75}} 13 | ``` 14 | 15 | With size option: 16 | 17 | ```hbs 18 | {{polaris-progress-bar size="large" progress=75}} 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/radio-button.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Radio button 4 | 5 | `polaris-radio-button` implements the [Polaris Radio button component](https://polaris.shopify.com/components/forms/radio-button). 6 | 7 | **NOTE:** _the React component's `id` property has been renamed to `inputId` in this Ember implementation._ 8 | 9 | ### Examples 10 | 11 | Basic radio button: 12 | 13 | ```hbs 14 | {{polaris-radio-button 15 | label="This is a radio button" 16 | value="option-1" 17 | onChange=(action (mut selectedValue)) 18 | }} 19 | ``` 20 | 21 | Radio button with help text: 22 | 23 | ```hbs 24 | {{polaris-radio-button 25 | label="This is a radio button" 26 | helpText="Click the button to change the selected value" 27 | value="option-1" 28 | onChange=(action (mut selectedValue)) 29 | }} 30 | ``` 31 | 32 | Radio button with custom label component: 33 | 34 | ```hbs 35 | {{polaris-radio-button 36 | label=(component "my-custom-label") 37 | value="option-1" 38 | onChange=(action (mut selectedValue)) 39 | }} 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/range-slider.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Range slider 4 | 5 | `polaris-range-slider` implements the [Polaris Range slider component](https://polaris.shopify.com/components/forms/range-slider). 6 | 7 | ### Examples 8 | 9 | Default range slider (range of `0`-`100`): 10 | 11 | ```hbs 12 | {{polaris-range-slider 13 | label="Opacity percentage" 14 | value=value 15 | onChange=(action (mut value)) 16 | }} 17 | ``` 18 | 19 | Range slider with custom minimum, maximum and step sizes: 20 | 21 | ```hbs 22 | {{polaris-range-slider 23 | label="Logo offset" 24 | min=-10 25 | max=10 26 | step=5 27 | value=value 28 | onChange=(action (mut value)) 29 | }} 30 | ``` 31 | 32 | Passing help text and error information: 33 | 34 | ```hbs 35 | {{polaris-range-slider 36 | label="Opacity percentage" 37 | value=value 38 | helpText="Choose the opacity of your logo image" 39 | error="Invalid opacity value" 40 | onChange=(action (mut value)) 41 | }} 42 | ``` 43 | -------------------------------------------------------------------------------- /docs/select.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Select 4 | 5 | `polaris-select` implements the [Polaris Select component](https://polaris.shopify.com/components/forms/select). 6 | 7 | **NOTE:** _the `groups` property in the Polaris documentation is not implemented because it is deprecated._ 8 | 9 | ### Examples 10 | 11 | Basic usage: 12 | 13 | ```hbs 14 | {{polaris-select 15 | label="Date range" 16 | options=(array 17 | (hash 18 | label="Today" 19 | value="today" 20 | ) 21 | (hash 22 | label="Yesterday" 23 | value="yesterday" 24 | ) 25 | (hash 26 | label="Last 7 days" 27 | value="lastWeek" 28 | ) 29 | ) 30 | value=selectedDateRange 31 | onChange=(action (mut selectedDateRange)) 32 | }} 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/setting-toggle.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Setting toggle 4 | 5 | `polaris-setting-toggle` implements the [Polaris Setting toggle component](https://polaris.shopify.com/components/actions/setting-toggle). 6 | 7 | ### Examples 8 | 9 | Inline usage: 10 | 11 | ```hbs 12 | {{polaris-setting-toggle 13 | text="Some boolean setting" 14 | enabled=enabled 15 | action=(hash 16 | text="Toggle it!" 17 | onAction=(action "toggleSetting") 18 | ) 19 | }} 20 | ``` 21 | 22 | Block usage: 23 | 24 | ```hbs 25 | {{#polaris-setting-toggle 26 | enabled=enabled 27 | action=(hash 28 | text="Disable it!" 29 | onAction=(action (mut enabled) false) 30 | ) 31 | }} 32 | This setting is currently 33 | {{polaris-text-style variation="strong"}} 34 | {{if enabled "enabled" "disabled"}} 35 | {{/polaris-text-style}} 36 | {{/polaris-setting-toggle}} 37 | ``` 38 | 39 | The `action` hash also supports `disabled` and `loading` flags: 40 | 41 | ```hbs 42 | {{polaris-setting-toggle 43 | text="Some boolean setting" 44 | action=(hash 45 | disabled=isToggleSettingDisabled 46 | loading=isToggleSettingRunning 47 | text="Toggle the setting" 48 | onAction=(action "toggleSetting") 49 | ) 50 | }} 51 | ``` 52 | -------------------------------------------------------------------------------- /docs/skeleton-body-text.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Skeleton body text 4 | 5 | `polaris-skeleton-body-text` implements the [Polaris Skeleton body text component](https://polaris.shopify.com/components/feedback-indicators/skeleton-body-text). 6 | 7 | ### Examples 8 | 9 | Basic usage (renders three skeleton text lines): 10 | 11 | ```hbs 12 | {{polaris-skeleton-body-text}} 13 | ``` 14 | 15 | Single skeleton text line: 16 | 17 | ```hbs 18 | {{polaris-skeleton-body-text lines=1}} 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/skeleton-display-text.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Skeleton display text 4 | 5 | `polaris-skeleton-display-text` implements the [Polaris Skeleton display text component](https://polaris.shopify.com/components/feedback-indicators/skeleton-display-text). 6 | 7 | ### Examples 8 | 9 | Basic usage (renders medium-sized skeleton display text): 10 | 11 | ```hbs 12 | {{polaris-skeleton-display-text}} 13 | ``` 14 | 15 | Large skeleton display text: 16 | 17 | ```hbs 18 | {{polaris-skeleton-display-text size="large"}} 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/skeleton-page.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Skeleton page 4 | 5 | `polaris-skeleton-page` implements the [Polaris Skeleton page component](https://polaris.shopify.com/components/feedback-indicators/skeleton-page). 6 | 7 | ### Examples 8 | 9 | Rendering a basic skeleton page with a dynamic title: 10 | 11 | ```hbs 12 | {{#polaris-skeleton-page}} 13 | ... page content here ... 14 | {{/polaris-skeleton-page}} 15 | ``` 16 | 17 | Skeleton page with a text title and skeleton breadcrumbs, a primary action, and two secondary actions: 18 | 19 | ```hbs 20 | {{#polaris-skeleton-page 21 | title="Skeleton Page" 22 | breadcrumbs=true 23 | primaryAction=true 24 | secondaryActions=2 25 | }} 26 | ... page content here ... 27 | {{/polaris-skeleton-page}} 28 | ``` 29 | -------------------------------------------------------------------------------- /docs/spinner.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Spinner 4 | 5 | `polaris-spinner` implements the [Polaris Spinner component](https://polaris.shopify.com/components/feedback-indicators/spinner). 6 | 7 | ### Examples 8 | 9 | Basic usage (renders a large, teal-colored spinner): 10 | 11 | ```hbs 12 | {{polaris-spinner}} 13 | ``` 14 | 15 | With a size and color specified and an accessibility label: 16 | 17 | ```hbs 18 | {{polaris-spinner 19 | size="small" 20 | color="inkLightest" 21 | accessibilityLabel="access granted" 22 | }} 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/subheading.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Subheading 4 | 5 | `polaris-subheading` implements the [Polaris Subheading component](https://polaris.shopify.com/components/titles-and-text/subheading). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{#polaris-subheading}} 13 | This is a basic subheading 14 | {{/polaris-subheading}} 15 | ``` 16 | 17 | Underlined subheading: 18 | 19 | ```hbs 20 | {{#polaris-subheading 21 | tagName="u" 22 | }} 23 | This is an underlined subheading 24 | {{/polaris-subheading}} 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/tag.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Tag 4 | 5 | `polaris-tag` implements the [Polaris Tag component](https://polaris.shopify.com/components/forms/tag). 6 | 7 | ### Examples 8 | 9 | Tag inline usage: 10 | 11 | ```hbs 12 | {{polaris-tag 13 | text="Wholesale" 14 | onRemove=(action "myTagRemoveAction") 15 | }} 16 | ``` 17 | 18 | Tag block usage: 19 | 20 | ```hbs 21 | {{#polaris-tag 22 | onRemove=(action "myTagRemoveAction") 23 | }} 24 | Wholesale 25 | {{/polaris-tag}} 26 | ``` 27 | 28 | Disabled tag: 29 | 30 | ```hbs 31 | {{polaris-tag 32 | text="Disabled" 33 | disabled=true 34 | }} 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/text-style.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Text style 4 | 5 | `polaris-text-style` implements the [Polaris Text style component](https://polaris.shopify.com/components/titles-and-text/text-style). The only available attribute is `variation` which specifies the style to apply to the `text` or block content. Allowed values are `positive` (green text), `negative` (red text), `strong` (bold text) and `subdued` (muted text). 6 | 7 | ### Examples 8 | 9 | Inline form with positive (green) text: 10 | 11 | ```hbs 12 | {{polaris-text-style variation="positive" text="This text is positive and green"}} 13 | ``` 14 | 15 | Block form with subdued (muted) text: 16 | 17 | ```hbs 18 | {{#polaris-text-style variation="subdued"}} 19 | This text is subdued and looks muted 20 | {{/polaris-text-style}} 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/thumbnail.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Thumbnail 4 | 5 | `polaris-thumbnail` implements the [Polaris Thumbnail component](https://polaris.shopify.com/components/images-and-icons/thumbnail). 6 | 7 | ### Examples 8 | 9 | Basic usage: 10 | 11 | ```hbs 12 | {{polaris-thumbnail source="image.jpg"}} 13 | ``` 14 | 15 | With alt text and size: 16 | 17 | ```hbs 18 | {{polaris-thumbnail size="small" source="image.jpg" alt="My image"}} 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/visually-hidden.md: -------------------------------------------------------------------------------- 1 | [< Back to Components List](../README.md#components) 2 | 3 | ## Visually hidden 4 | 5 | `polaris-visually-hidden` implements the [Polaris Visually hidden component](https://polaris.shopify.com/components/titles-and-text/visually-hidden). 6 | 7 | ### Examples 8 | 9 | Inline form: 10 | 11 | ```hbs 12 | {{polaris-visually-hidden text="something descriptive"}} 13 | ``` 14 | 15 | Block form: 16 | 17 | ```hbs 18 | {{#polaris-visually-hidden}} 19 | another description 20 | {{/polaris-visually-hidden}} 21 | ``` 22 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); 4 | // NOTE: We should be using `sass` instead of `node-sass` which is the default/recommended 5 | // by `ember-cli-sass` and it's the Dart implementation and should be much faster. 6 | // We're using this because Polaris uses multi-line which is not supported 7 | // ex: @shopify/polaris/styles/foundation/colors.scss#57 8 | const nodeSass = require('node-sass'); 9 | 10 | module.exports = function (defaults) { 11 | let app = new EmberAddon(defaults, { 12 | 'ember-cli-babel': { 13 | includePolyfill: true, 14 | }, 15 | 16 | sassOptions: { 17 | implementation: nodeSass, 18 | }, 19 | }); 20 | 21 | /** 22 | This build file specifies the options for the dummy test app of this 23 | addon, located in `/tests/dummy` 24 | This build file does *not* influence how the addon or the app using it 25 | behave. You most likely want to be modifying `./index.js` or app's build file 26 | */ 27 | app.import('node_modules/ember-source/dist/ember-template-compiler.js'); 28 | 29 | return app.toTree(); 30 | }; 31 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const resolve = require('resolve'); 5 | const Funnel = require('broccoli-funnel'); 6 | const MergeTrees = require('broccoli-merge-trees'); 7 | 8 | module.exports = { 9 | name: require('./package').name, 10 | 11 | options: { 12 | svgJar: { 13 | sourceDirs: [ 14 | 'public', 15 | 'tests/dummy/public/assets/images/svg', 16 | 'node_modules/@smile-io/ember-polaris/public', 17 | ], 18 | }, 19 | }, 20 | 21 | included: function (/* app */) { 22 | this._super.included.apply(this, arguments); 23 | }, 24 | 25 | treeForStyles(tree) { 26 | let packageRoot = path.dirname( 27 | resolve.sync('@shopify/polaris/package.json', { basedir: __dirname }) 28 | ); 29 | let polarisScssFiles = new Funnel(packageRoot, { 30 | include: ['styles.scss', 'styles/**/*'], 31 | srcDir: './', 32 | destDir: 'ember-polaris', 33 | annotation: 'PolarisScssFunnel', 34 | }); 35 | 36 | return this._super.treeForStyles( 37 | new MergeTrees([polarisScssFiles, tree], { overwrite: true }) 38 | ); 39 | }, 40 | 41 | isDevelopingAddon() { 42 | return process.env.SMILE_DEV; 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /public/images/spinner-large.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/images/spinner-small.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /testem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | test_page: 'tests/index.html?hidepassed', 5 | disable_watching: true, 6 | launch_in_ci: ['Chrome'], 7 | launch_in_dev: ['Chrome'], 8 | browser_start_timeout: 120, 9 | browser_args: { 10 | Chrome: { 11 | ci: [ 12 | // --no-sandbox is needed when running Chrome inside a container 13 | process.env.CI ? '--no-sandbox' : null, 14 | '--headless', 15 | '--disable-dev-shm-usage', 16 | '--disable-software-rasterizer', 17 | '--mute-audio', 18 | '--remote-debugging-port=0', 19 | '--window-size=1440,900', 20 | ].filter(Boolean), 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /tests/acceptance/key-event-listener-test.js: -------------------------------------------------------------------------------- 1 | import { visit } from '@ember/test-helpers'; 2 | import { setupApplicationTest } from 'ember-qunit'; 3 | import { module, test } from 'qunit'; 4 | import { keyDown } from 'ember-keyboard/test-support/test-helpers'; 5 | 6 | module('Acceptance | key event listener test', function (hooks) { 7 | setupApplicationTest(hooks); 8 | 9 | test('hidden easter egg works with key m only on index page', async function (assert) { 10 | await visit('/'); 11 | 12 | let easterEggBanner = '[data-test-banner="easter-egg-banner"]'; 13 | assert 14 | .dom(easterEggBanner) 15 | .doesNotExist(`Easter egg banner should be hidden by default`); 16 | 17 | await keyDown('KeyM'); 18 | assert 19 | .dom(easterEggBanner) 20 | .exists(`Easter egg banner should appear when m is pressed`); 21 | 22 | await visit('/test'); 23 | await keyDown('KeyM'); 24 | assert 25 | .dom(easterEggBanner) 26 | .exists( 27 | `Easter egg banner doesn't hide when pressing m on a page w/o the key-event-listener` 28 | ); 29 | 30 | await visit('/'); 31 | await keyDown('KeyM'); 32 | assert 33 | .dom(easterEggBanner) 34 | .doesNotExist( 35 | `Easter egg banner is hidden when pressing m on index page which has key-event-listener` 36 | ); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Application from '@ember/application'; 2 | import Resolver from 'ember-resolver'; 3 | import loadInitializers from 'ember-load-initializers'; 4 | import config from 'dummy/config/environment'; 5 | 6 | export default class App extends Application { 7 | modulePrefix = config.modulePrefix; 8 | podModulePrefix = config.podModulePrefix; 9 | Resolver = Resolver; 10 | } 11 | 12 | loadInitializers(App, config.modulePrefix); 13 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/dummy/app/components/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/bulk-actions.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import layout from '../../templates/components/resource-list/bulk-actions'; 3 | 4 | export default Component.extend({ 5 | layout, 6 | }); 7 | -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/filtering.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import layout from '../../templates/components/resource-list/filtering'; 3 | 4 | export default Component.extend({ 5 | layout, 6 | 7 | searchValue: '', 8 | appliedFilters: null, 9 | 10 | init() { 11 | this._super(...arguments); 12 | 13 | this.set('appliedFilters', [ 14 | { 15 | key: 'accountStatusFilter', 16 | value: 'Account enabled', 17 | }, 18 | ]); 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/persist-actions.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import layout from '../../templates/components/resource-list/persist-actions'; 3 | 4 | export default Component.extend({ 5 | layout, 6 | }); 7 | -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/persist-actions/item.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import layout from '../../../templates/components/resource-list/persist-actions/item'; 4 | 5 | export default Component.extend({ 6 | tagName: '', 7 | 8 | layout, 9 | 10 | // `item` and `itemId` will be passed in by `polaris-resource-list`. 11 | item: null, 12 | itemId: null, 13 | 14 | accessibilityLabel: computed('item.name', function () { 15 | return `View details for ${this.get('item.name')}`; 16 | }).readOnly(), 17 | }); 18 | -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/simple.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import layout from '../../templates/components/resource-list/simple'; 3 | 4 | export default Component.extend({ 5 | layout, 6 | }); 7 | -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/simple/item.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import { computed } from '@ember/object'; 3 | import layout from '../../../templates/components/resource-list/simple/item'; 4 | 5 | export default Component.extend({ 6 | tagName: '', 7 | 8 | layout, 9 | 10 | // `item` and `itemId` will be passed in by `polaris-resource-list`. 11 | item: null, 12 | itemId: null, 13 | 14 | accessibilityLabel: computed('item.name', function () { 15 | return `View details for ${this.get('item.name')}`; 16 | }).readOnly(), 17 | }); 18 | -------------------------------------------------------------------------------- /tests/dummy/app/components/resource-list/sorting.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | import layout from '../../templates/components/resource-list/sorting'; 3 | 4 | export default Component.extend({ 5 | layout, 6 | 7 | sortValue: 'DATE_MODIFIED_DESC', 8 | }); 9 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/dummy/app/controllers/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/controllers/application.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | 3 | export default Controller.extend({ 4 | hideMagicSection: true, 5 | }); 6 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/dropzone.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { action } from '@ember/object'; 3 | 4 | export default class DropzoneController extends Controller { 5 | @action 6 | drop() { 7 | // eslint-disable-next-line no-console 8 | console.log(...arguments); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/index.js: -------------------------------------------------------------------------------- 1 | import Controller, { inject as controller } from '@ember/controller'; 2 | 3 | export default Controller.extend({ 4 | application: controller(), 5 | }); 6 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/test/index.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | 3 | export default Controller.extend(); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/dummy/app/helpers/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy 7 | 8 | 9 | 10 | {{content-for "head"}} 11 | 12 | 13 | 14 | 15 | {{content-for "head-footer"}} 16 | 17 | 18 | {{content-for "body"}} 19 | 20 | 21 | 22 | 23 | {{content-for "body-footer"}} 24 | 25 | 26 | -------------------------------------------------------------------------------- /tests/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/dummy/app/models/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/router.js: -------------------------------------------------------------------------------- 1 | import EmberRouter from '@ember/routing/router'; 2 | import config from 'dummy/config/environment'; 3 | 4 | export default class Router extends EmberRouter { 5 | location = config.locationType; 6 | rootURL = config.rootURL; 7 | } 8 | 9 | Router.map(function () { 10 | this.route('test', function () { 11 | this.route('child', function () {}); 12 | }); 13 | 14 | this.route('layout', function () { 15 | this.route('annotated-layout'); 16 | }); 17 | 18 | this.route('dropzone'); 19 | this.route('sticky'); 20 | this.route('select'); 21 | 22 | this.route('resource-list', function () {}); 23 | }); 24 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/dummy/app/routes/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/routes/index.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | const samplePages = [ 4 | { 5 | path: 'layout.annotated-layout', 6 | text: 'Annotated Layout', 7 | }, 8 | { 9 | path: 'dropzone', 10 | text: 'Dropzone', 11 | }, 12 | { 13 | path: 'resource-list', 14 | text: 'Resource List', 15 | }, 16 | { 17 | path: 'sticky', 18 | text: 'Sticky', 19 | }, 20 | { 21 | path: 'select', 22 | text: 'Select', 23 | }, 24 | { 25 | path: 'test', 26 | text: 'Go to test route', 27 | }, 28 | { 29 | path: 'test.child', 30 | text: 'Go to child route', 31 | }, 32 | ]; 33 | 34 | export default Route.extend({ 35 | model() { 36 | return samplePages; 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/resource-list.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/select.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/sticky.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/test.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/test/child.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/test/child/index.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/test/index.js: -------------------------------------------------------------------------------- 1 | import Route from '@ember/routing/route'; 2 | 3 | export default Route.extend({}); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/app.scss: -------------------------------------------------------------------------------- 1 | @import "ember-polaris"; 2 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 | {{page-title "Dummy"}} 2 | 3 | {{outlet}} 4 | 5 | {{#unless hideMagicSection}} 6 | 11 | {{/unless}} 12 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/bulk-actions.hbs: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/filtering.hbs: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/persist-actions.hbs: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/persist-actions/item.hbs: -------------------------------------------------------------------------------- 1 | 16 |

    17 | 18 |

    19 |
    {{item.location}}
    20 |     21 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/simple.hbs: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/simple/item.hbs: -------------------------------------------------------------------------------- 1 | 12 |

    13 | 14 |

    15 |
    {{item.location}}
    16 |     17 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/resource-list/sorting.hbs: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/dropzone.hbs: -------------------------------------------------------------------------------- 1 | 5 | 6 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/layout/annotated-layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/resource-list.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 18 | {{#if exampleType}} 19 | 20 | {{component (concat "resource-list/" exampleType)}} 21 | 22 | {{/if}} 23 | 24 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/select.hbs: -------------------------------------------------------------------------------- 1 | {{!-- 2 | Ember port of the React test at https://codesandbox.io/s/53q709kxo4 3 | --}} 4 | 5 | 6 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/test.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/test/child.hbs: -------------------------------------------------------------------------------- 1 | {{outlet}} 2 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/test/child/index.hbs: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/test/index.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /tests/dummy/config/deprecation-workflow.js: -------------------------------------------------------------------------------- 1 | /* global window */ 2 | 3 | window.deprecationWorkflow = window.deprecationWorkflow || {}; 4 | window.deprecationWorkflow.config = { 5 | workflow: [ 6 | { 7 | handler: 'silence', 8 | matchId: 'ember-polaris.polaris-description-list.term-component', 9 | }, 10 | { 11 | handler: 'silence', 12 | matchId: 'ember-polaris.polaris-description-list.description-component', 13 | }, 14 | { handler: 'silence', matchId: 'computed-property.override' }, 15 | { 16 | handler: 'silence', 17 | matchId: 'ember-polaris.polaris-labelled.dataTestLabelled-arg', 18 | }, 19 | ], 20 | }; 21 | -------------------------------------------------------------------------------- /tests/dummy/config/ember-cli-update.json: -------------------------------------------------------------------------------- 1 | { 2 | "schemaVersion": "1.0.0", 3 | "packages": [ 4 | { 5 | "name": "ember-cli", 6 | "version": "3.25.3", 7 | "blueprints": [ 8 | { 9 | "name": "addon", 10 | "outputRepo": "https://github.com/ember-cli/ember-addon-output", 11 | "codemodsSource": "ember-addon-codemods-manifest@1", 12 | "isBaseBlueprint": true, 13 | "options": ["--yarn", "--no-welcome"] 14 | } 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tests/dummy/config/optional-features.json: -------------------------------------------------------------------------------- 1 | { 2 | "application-template-wrapper": false, 3 | "default-async-observers": true, 4 | "jquery-integration": false, 5 | "template-only-glimmer-components": true 6 | } 7 | -------------------------------------------------------------------------------- /tests/dummy/config/targets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const browsers = [ 4 | 'last 1 Chrome versions', 5 | 'last 1 Firefox versions', 6 | 'last 1 Safari versions', 7 | ]; 8 | 9 | const isCI = Boolean(process.env.CI); 10 | const isProduction = process.env.EMBER_ENV === 'production'; 11 | 12 | if (isCI || isProduction) { 13 | browsers.push('ie 11'); 14 | } 15 | 16 | module.exports = { 17 | browsers, 18 | }; 19 | -------------------------------------------------------------------------------- /tests/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tests/helpers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/helpers/.gitkeep -------------------------------------------------------------------------------- /tests/helpers/build-nested-selector.js: -------------------------------------------------------------------------------- 1 | export default function (...selectors) { 2 | return selectors.join('>'); 3 | } 4 | -------------------------------------------------------------------------------- /tests/helpers/component-attribute-capture.js: -------------------------------------------------------------------------------- 1 | export function setUpAttributeCaptureOnComponent( 2 | testContext, 3 | componentPath, 4 | componentClass, 5 | attributeName 6 | ) { 7 | testContext.owner.register( 8 | `component:${componentPath}`, 9 | componentClass.extend({ 10 | didReceiveAttrs() { 11 | this._super(...arguments); 12 | 13 | testContext.set(attributeName, this.get(attributeName)); 14 | }, 15 | }) 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /tests/helpers/stub-routing.js: -------------------------------------------------------------------------------- 1 | import { get } from '@ember/object'; 2 | import Service from '@ember/service'; 3 | 4 | const StubbedRoutingService = Service.extend({ 5 | _availableRoutes: null, 6 | 7 | availableRoutes() { 8 | return this.get('_availableRoutes'); 9 | }, 10 | 11 | hasRoute(name) { 12 | return this.availableRoutes().contains(name); 13 | }, 14 | 15 | isActiveForRoute() { 16 | // TODO 17 | return true; 18 | }, 19 | 20 | generateURL(routeName, models = [] /*, queryParams */) { 21 | let url = [ 22 | routeName.replace(/\./g, '/'), 23 | ...models.map((model) => get(model, 'id') || model), 24 | ].join('/'); 25 | 26 | return url; 27 | }, 28 | }); 29 | 30 | export default function (registry, availableRoutes) { 31 | StubbedRoutingService.reopenClass({ 32 | _availableRoutes: availableRoutes, 33 | }); 34 | 35 | registry.register('service:-routing', StubbedRoutingService); 36 | } 37 | -------------------------------------------------------------------------------- /tests/integration/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/integration/.gitkeep -------------------------------------------------------------------------------- /tests/integration/components/polaris-caption-test.js: -------------------------------------------------------------------------------- 1 | import { hbs } from 'ember-cli-htmlbars'; 2 | import { module, test } from 'qunit'; 3 | import { render } from '@ember/test-helpers'; 4 | import { setupRenderingTest } from 'ember-qunit'; 5 | 6 | module('Integration | Component | polaris caption', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | const caption = 'Received April 21, 2017'; 10 | const componentSelector = 'p.Polaris-Caption'; 11 | 12 | test('it renders the correct HTML with inline usage', async function (assert) { 13 | this.set('text', caption); 14 | await render(hbs`{{polaris-caption text=text}}`); 15 | 16 | const captionNode = assert.dom(componentSelector); 17 | 18 | captionNode.exists('it renders the caption'); 19 | captionNode.hasText(caption, 'it renders the correct caption text'); 20 | }); 21 | 22 | test('it renders the correct HTML with block usage', async function (assert) { 23 | this.set('caption', caption); 24 | await render(hbs` 25 | {{#polaris-caption}} 26 | {{caption}} 27 | {{/polaris-caption}} 28 | `); 29 | 30 | const captionNode = assert.dom(componentSelector); 31 | 32 | captionNode.exists('it renders the caption'); 33 | captionNode.hasText(caption, 'it renders the correct caption text'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /tests/integration/components/polaris-label-test.js: -------------------------------------------------------------------------------- 1 | import { hbs } from 'ember-cli-htmlbars'; 2 | import { module, test } from 'qunit'; 3 | import { setupRenderingTest } from 'ember-qunit'; 4 | import { render } from '@ember/test-helpers'; 5 | 6 | module('Integration | Component | polaris-label', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it uses the ID as the for attribute', async function (assert) { 10 | await render(hbs`{{polaris-label id="MyThing"}}`); 11 | assert.dom('.Polaris-Label label').hasAttribute('for', 'MyThing'); 12 | }); 13 | 14 | test('it creates an ID for the label from the ID of the connected resource', async function (assert) { 15 | await render(hbs`{{polaris-label id="MyThing"}}`); 16 | assert.dom('.Polaris-Label label').hasAttribute('id', 'MyThingLabel'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /tests/integration/components/polaris-sticky-test.js: -------------------------------------------------------------------------------- 1 | import { hbs } from 'ember-cli-htmlbars'; 2 | import { module, test } from 'qunit'; 3 | import { setupRenderingTest } from 'ember-qunit'; 4 | import { render } from '@ember/test-helpers'; 5 | 6 | module('Integration | Component | polaris-sticky', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('renders children component', async function (assert) { 10 | await render(hbs` 11 | {{#polaris-sticky}} 12 |

    Hello

    13 | {{/polaris-sticky}} 14 | `); 15 | 16 | assert.dom('h1').exists(); 17 | }); 18 | 19 | test('renders a function as child component with a boolean argument set to false by default', async function (assert) { 20 | await render(hbs` 21 | {{#polaris-sticky as |sticky|}} 22 | {{#if (eq sticky.isSticky false)}} 23 |

    it worked!

    24 | {{else}} 25 |

    it didn't

    26 | {{/if}} 27 | {{/polaris-sticky}} 28 | `); 29 | 30 | assert.dom('h1').exists(); 31 | assert.dom('h2').doesNotExist(); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /tests/integration/components/wrapper-element-test.js: -------------------------------------------------------------------------------- 1 | import { hbs } from 'ember-cli-htmlbars'; 2 | import { module, test } from 'qunit'; 3 | import { setupRenderingTest } from 'ember-qunit'; 4 | import { render } from '@ember/test-helpers'; 5 | 6 | module('Integration | Component | wrapper-element', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders block content', async function (assert) { 10 | await render(hbs` 11 | {{#wrapper-element tagName="my-element" my-attribute="hello"}} 12 |
    Content goes here
    13 | {{/wrapper-element}} 14 | `); 15 | 16 | assert.dom('my-element > div#block-content').hasText('Content goes here'); 17 | }); 18 | 19 | test('it passes arbitrary attributes to the rendered element', async function (assert) { 20 | await render( 21 | hbs`{{wrapper-element tagName="my-element" my-attribute="hello"}}` 22 | ); 23 | 24 | assert.dom('my-element').hasAttribute('my-attribute', 'hello'); 25 | }); 26 | 27 | test('it does not blow up when an empty `tagName` is set', async function (assert) { 28 | await render(hbs` 29 | {{#wrapper-element tagName="" my-attribute="hello"}} 30 |
    31 | {{/wrapper-element}} 32 | `); 33 | 34 | assert.dom('div#block-content').exists(); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /tests/mocks/components/svg-jar.js: -------------------------------------------------------------------------------- 1 | import Component from '@ember/component'; 2 | 3 | // Mock the svg-jar helper for testing, to avoid rendering SVGs. 4 | const SvgJar = Component.extend({ 5 | tagName: 'svg', 6 | 7 | // Bind attributes to the element's dataset for testing. 8 | attributeBindings: [ 9 | 'source:data-icon-source', 10 | 'aria-label', 11 | 'aria-hidden', 12 | 'focusable', 13 | ], 14 | 15 | source: null, 16 | }); 17 | 18 | SvgJar.reopenClass({ 19 | positionalParams: ['source'], 20 | }); 21 | 22 | export default SvgJar; 23 | -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import Application from 'dummy/app'; 2 | import config from 'dummy/config/environment'; 3 | import * as QUnit from 'qunit'; 4 | import { setApplication } from '@ember/test-helpers'; 5 | import { setup } from 'qunit-dom'; 6 | import { start } from 'ember-qunit'; 7 | 8 | setup(QUnit.assert); 9 | 10 | setApplication(Application.create(config.APP)); 11 | 12 | setup(QUnit.assert); 13 | 14 | start(); 15 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/tests/unit/.gitkeep -------------------------------------------------------------------------------- /tests/unit/utils/focus-test.js: -------------------------------------------------------------------------------- 1 | import focus from 'dummy/utils/focus'; 2 | import { module, test } from 'qunit'; 3 | 4 | module('Unit | Utility | focus', function () { 5 | test("handleMouseUpByBlurring calls blur on the passed in event's currentTarget", function (assert) { 6 | let blurCalled = false; 7 | let mockEvent = { 8 | currentTarget: { 9 | blur() { 10 | blurCalled = true; 11 | }, 12 | }, 13 | }; 14 | 15 | focus.handleMouseUpByBlurring(mockEvent); 16 | 17 | assert.ok(blurCalled, "blur called on event's currentTarget"); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /vendor/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smile-io/ember-polaris/a3a4685441051f123fd49ca2c50cce43555ae74b/vendor/.gitkeep --------------------------------------------------------------------------------