mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-10-30 18:17:55 +00:00
5eda22da7a
* add storybook * add storybook files * add ToggleButton and AlertBanner stories * add knobs addon * add notes addon * add ToggleButton and AlertsBanner notes * move panel to right * add ICon * create story blueprint * add header to blueprint * upgrade to storybook 5.0.1 * add confirm-action stories * move addon panel to bottom * update ConfirmAction * add jsdoc comments to alert banner component * add AlertInline * set showPanel to true in blueprint * include newly generated markdown for stories * adjust code example for toggle button * add json-to-markdown to package.json * update AuthForm * add Storybook readme * add AlertPopup * add story markdown custom template * make storybook dependencies optional * center all stories * use message-types helper to dynamically render alerts * hide panel * nest alert stories * move icons into table * separate homelink into multiple stories * add homelink with nav example * remove see links from alert-banner * add script to autogenerate markdown from component and add it to stories * add viewport addon and remove centered addon * update README to include markdown generation * remove @see links from jsdoc comments * update README to include jsdoc example * update alert banner md * get rid of trailing ###### * update jsdoc and regenerate notes files * update i-con md * Update ui/scripts/gen-story-md.js Co-Authored-By: noelledaley <noelledaley@users.noreply.github.com> * Update ui/scripts/gen-story-md.js Co-Authored-By: noelledaley <noelledaley@users.noreply.github.com> * add storybook docs to vault ui readme * add jsdoc comments to component blueprint, automatically import md file in story blueprint * add template template to component blueprint override * apply basic theme to storybook * remove comment * make sure all stories are using auto generated md * storybook: show optional props in brackets * storybook: 🔪 HomeLink * storybook: show AuthConfigForm stories with knobs
84 lines
1.8 KiB
JavaScript
84 lines
1.8 KiB
JavaScript
import { camelize } from '@ember/string';
|
|
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
|
|
/**
|
|
* @module ICon
|
|
* `ICon` components are glyphs used to indicate important information.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <ICon @glyph="cancel-square-outline" />
|
|
* ```
|
|
* @param glyph=null {String} - The glyph type.
|
|
*
|
|
*/
|
|
|
|
export const GLYPHS_WITH_SVG_TAG = [
|
|
'cancel-square-outline',
|
|
'cancel-square-fill',
|
|
'check-circle-fill',
|
|
'check-plain',
|
|
'checkmark-circled-outline',
|
|
'close-circled-outline',
|
|
'console',
|
|
'control-lock',
|
|
'docs',
|
|
'download',
|
|
'edition-enterprise',
|
|
'edition-oss',
|
|
'false',
|
|
'file',
|
|
'folder',
|
|
'hidden',
|
|
'information-reversed',
|
|
'learn',
|
|
'neutral-circled-outline',
|
|
'perf-replication',
|
|
'person',
|
|
'role',
|
|
'status-indicator',
|
|
'stopwatch',
|
|
'tour',
|
|
'true',
|
|
'upload',
|
|
'video',
|
|
'visible',
|
|
];
|
|
|
|
export default Component.extend({
|
|
layout: hbs`
|
|
{{#if excludeSVG}}
|
|
{{partial partialName}}
|
|
{{else}}
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 512 512">
|
|
{{partial partialName}}
|
|
</svg>
|
|
{{/if}}
|
|
`,
|
|
|
|
tagName: 'span',
|
|
excludeIconClass: false,
|
|
classNameBindings: ['excludeIconClass::icon'],
|
|
classNames: ['has-current-color-fill'],
|
|
|
|
attributeBindings: ['aria-label', 'aria-hidden'],
|
|
|
|
glyph: null,
|
|
|
|
excludeSVG: computed('glyph', function() {
|
|
let glyph = this.get('glyph');
|
|
return glyph.startsWith('enable/') || GLYPHS_WITH_SVG_TAG.includes(glyph);
|
|
}),
|
|
|
|
size: computed('glyph', function() {
|
|
return this.get('glyph').startsWith('enable/') ? 48 : 12;
|
|
}),
|
|
|
|
partialName: computed('glyph', function() {
|
|
const glyph = this.get('glyph');
|
|
return `svg/icons/${camelize(glyph)}`;
|
|
}),
|
|
});
|