all files / addon/components/ polaris-stack.js

100% Statements 14/14
100% Branches 8/8
100% Functions 4/4
100% Lines 14/14
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 126 127 128 129                                                                                                                                                                                  19× 19×     11×       21× 21× 15×           21× 21×     13×             36×     36×            
import Component from '@ember/component';
import { computed } from '@ember/object';
import { equal } from '@ember/object/computed';
import { isBlank } from '@ember/utils';
import { classify } from '@ember/string';
import layout from '../templates/components/polaris-stack';
 
/**
 * Polaris stack component.
 * See https://polaris.shopify.com/components/structure/stack
 */
export default Component.extend({
  classNames: ['Polaris-Stack'],
  classNameBindings: [
    'vertical:Polaris-Stack--vertical',
    'spacingClassName',
    'alignmentClassName',
    'distributionClassName',
    'noWrap:Polaris-Stack--noWrap',
  ],
 
  layout,
 
  /**
   * Elements to display inside stack
   *
   * @property text
   * @public
   * @type {string}
   * @default null
   */
  text: null,
 
  /**
   * Stack the elements vertically
   *
   * @property vertical
   * @public
   * @type {boolean}
   * @default false
   */
  vertical: false,
 
  /**
   * Adjust spacing between elements
   *
   * @property spacing
   * @public
   * @type {enum}
   * @default null
   */
  spacing: null,
 
  /**
   * Adjust alignment of elements
   *
   * @property alignment
   * @public
   * @type {enum}
   * @default null
   */
  alignment: null,
 
  /**
   * Adjust distribution of elements
   *
   * @property distribution
   * @public
   * @type {enum}
   * @default baseline
   */
  distribution: 'baseline',
 
  /**
   * Wrap stack elements to additional rows as needed on small screens (Defaults to true)
   *
   * @property wrap
   * @public
   * @type {boolean}
   * @default true
   */
  wrap: true,
 
  /*
  * Internal properties.
  */
  noWrap: equal('wrap', false).readOnly(),
 
  spacingClassName: computed('spacing', function() {
    const spacing = this.get('spacing');
    if (isBlank(spacing)) {
      return null;
    }
 
    return `Polaris-Stack--spacing${classify(spacing)}`;
  }).readOnly(),
 
  alignmentClassName: computed('alignment', function() {
    const alignment = this.get('alignment');
    if (isBlank(alignment)) {
      return null;
    }
 
    return `Polaris-Stack--alignment${classify(alignment)}`;
  }).readOnly(),
 
  distributionClassName: computed('distribution', function() {
    const distribution = this.get('distribution');
    if (isBlank(distribution) || distribution === 'baseline') {
      return null;
    }
 
    return `Polaris-Stack--distribution${classify(distribution)}`;
  }).readOnly(),
 
  /**
  * Lifecycle hooks.
  */
  didRender() {
    this._super(...arguments);
 
    // Wrap each child element that isn't already a stack item.
    this.$().children()
      .not('div.Polaris-Stack__Item')
      .wrap('<div class="Polaris-Stack__Item"></div>');
    },
});