diff --git a/addons/rose/addon/components/rose/form/label.js b/addons/rose/addon/components/rose/form/label.js new file mode 100644 index 000000000..1d26edc8d --- /dev/null +++ b/addons/rose/addon/components/rose/form/label.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/form/label'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/form/label.stories.mdx b/addons/rose/addon/components/rose/form/label.stories.mdx new file mode 100644 index 000000000..fd263cedd --- /dev/null +++ b/addons/rose/addon/components/rose/form/label.stories.mdx @@ -0,0 +1,27 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Form Label + +Renders a simple form label. This componet is used and yielded by form fields +and should not be used directly. + +```htmlbars + + Form Label + +``` + + + {{ + template: hbs` + + Form Label + + ` + }} + diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs index b1d7e4183..1a6061750 100644 --- a/addons/rose/addon/templates/components/rose/form/input.hbs +++ b/addons/rose/addon/templates/components/rose/form/input.hbs @@ -1,8 +1,6 @@
- + {{@label}} {{#if @helperText}} + {{yield}} + diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs index e9a14539d..f2c5fa91a 100644 --- a/addons/rose/addon/templates/components/rose/form/select.hbs +++ b/addons/rose/addon/templates/components/rose/form/select.hbs @@ -1,8 +1,6 @@
- + {{@label}} {{#if @helperText}} - + {{@label}} {{#if @helperText}} + Form Label + + `); + assert.ok(find('.rose-form-label')); + assert.equal( + find('.rose-form-label').textContent.trim(), + 'Form Label' + ); + }); +});