37 lines
1 KiB
JavaScript
37 lines
1 KiB
JavaScript
/**
|
|
* @module Chevron
|
|
* `Chevron` components render `Icon` with one of the `chevron-` glyphs.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <Chevron @direction="up" />
|
|
* ```
|
|
*
|
|
* @param [direction="right"] {String} - the direction the chevron icon points. Accepted values are
|
|
* "right", "down", "left", "up".
|
|
* @param [isButton=false] {String} - if true, adjusts the CSS classes to push the icon closer to the right of a button.
|
|
*
|
|
*/
|
|
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import { assert } from '@ember/debug';
|
|
|
|
import layout from '../templates/components/chevron';
|
|
|
|
const DIRECTIONS = ['right', 'left', 'up', 'down'];
|
|
|
|
export default Component.extend({
|
|
tagName: '',
|
|
layout,
|
|
direction: 'right',
|
|
isButton: false,
|
|
glyph: computed('direction', function () {
|
|
const { direction } = this;
|
|
assert(
|
|
`The direction property of ${this.toString()} must be one of the following: ${DIRECTIONS.join(', ')}`,
|
|
DIRECTIONS.includes(direction)
|
|
);
|
|
return `chevron-${direction}`;
|
|
}),
|
|
});
|