mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-10-30 18:17:55 +00:00
d8112714cf
* adds ember-flight-icons dependecy * adds inline-json-import babel plugin * adds flight icon styling * updates Icon component to support flight icons * updates Icon component usages to new api and updates name values to flight icon set when available * fixes tests * updates icon story with flight mappings and fixes issue with flight icons not rendering in storybook * adds changelog * fixes typo in sign action glyph name in transit-key model * adds comments to icon-map * updates Icon component to use only supported flight icon sizes * adds icon transform codemod * updates icon transform formatting to handle edge case * runs icon transform on templates * updates Icon usage in toolbar-filter md and story * updates tests
40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import { assert } from '@ember/debug';
|
|
import layout from '../templates/components/icon';
|
|
import flightIconMap from '@hashicorp/flight-icons/catalog.json';
|
|
const flightIconNames = flightIconMap.assets.mapBy('iconName').uniq();
|
|
/**
|
|
* @module Icon
|
|
* `Icon` components are glyphs used to indicate important information.
|
|
*
|
|
* Flight icon documentation at https://flight-hashicorp.vercel.app/
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <Icon @name="cancel-square-outline" @size="24" />
|
|
* ```
|
|
* @param {string} name=null - The name of the SVG to render inline.
|
|
* @param {string} [size=16] - size for flight icon, can be 16 or 24
|
|
*
|
|
*/
|
|
export default Component.extend({
|
|
tagName: '',
|
|
layout,
|
|
name: null,
|
|
size: '16',
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
assert('Icon component size argument must be either "16" or "24"', ['16', '24'].includes(this.size));
|
|
},
|
|
|
|
// favor flight icon set and fall back to structure icons if not found
|
|
isFlightIcon: computed('name', function() {
|
|
return this.name ? flightIconNames.includes(this.name) : false;
|
|
}),
|
|
hsIconClass: computed('size', function() {
|
|
return this.size === '24' ? 'hs-icon-xl' : 'hs-icon-l';
|
|
}),
|
|
});
|