all files / addon/components/ polaris-skeleton-page.js

100% Statements 5/5
100% Branches 2/2
100% Functions 2/2
100% Lines 5/5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125                                                                                                                                                                                                                                               
import Component from '@ember/component';
import { computed } from '@ember/object';
import { notEmpty } from '@ember/object/computed';
import layout from '../templates/components/polaris-skeleton-page';
 
export default Component.extend({
  classNames: ['Polaris-SkeletonPage__Page'],
  classNameBindings: ['fullWidth:Polaris-SkeletonPage--fullWidth'],
  attributeBindings: [
    'role',
    'ariaLabel:aria-label'
  ],
 
  layout,
 
  /**
   * Page title, in large type
   *
   * @property title
   * @public
   * @type {String}
   * @default ''
   */
  title: '',
 
  /**
   * Remove the normal max-width on the page
   *
   * @property fullwidth
   * @public
   * @type {boolean}
   * @default false
   */
  fullwidth: false,
 
  /**
   * Number of secondary page-level actions to display
   *
   * @property secondaryActions
   * @public
   * @type {Number}
   * @default null
   */
  secondaryActions: null,
 
  /**
   * Shows a skeleton over the breadcrumb
   *
   * @property breadcrumbs
   * @public
   * @type {boolean}
   * @default null
   */
  breadcrumbs: null,
 
  /**
   * The contents of the page
   *
   * This component can be used in block form,
   * in which case the block content will be used
   * instead of `text`
   *
   * @property text
   * @public
   * @type {String}
   * @default null
   */
  text: null,
 
  /**
   * The role of this component, for accessibility purposes
   *
   * @property role
   * @private
   * @type {String}
   */
  role: 'status',
 
  /**
   * The accessibility label of this component
   *
   * @property ariaLabel
   * @private
   * @type {String}
   */
  ariaLabel: 'Page loading',
 
  /**
   * Whether the page should display any kind of title
   *
   * @property hasTitle
   * @private
   * @type {boolean}
   */
  hasTitle: computed('title', function() {
    return this.get('title') !== null;
  }).readOnly(),
 
  /**
   * Whether the page has an actual text title to display
   *
   * @property hasTitleText
   * @private
   * @type {boolean}
   */
  hasTitleText: notEmpty('title').readOnly(),
 
  /**
   * Array of dummy secondary actions to iterate over in template
   *
   * @property dummySecondaryActions
   * @private
   * @type {Array}
   */
  dummySecondaryActions: computed('secondaryActions', function() {
    let secondaryActions = parseInt(this.get('secondaryActions'));
    if (isNaN(secondaryActions)) {
      return null;
    }
 
    return new Array(Math.max(secondaryActions, 0));
  }).readOnly(),
});