diff --git a/addons/rose/addon/components/rose/toolbar/info/index.hbs b/addons/rose/addon/components/rose/toolbar/info/index.hbs new file mode 100644 index 000000000..dc6c7f517 --- /dev/null +++ b/addons/rose/addon/components/rose/toolbar/info/index.hbs @@ -0,0 +1,3 @@ + + {{yield}} + \ No newline at end of file diff --git a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx new file mode 100644 index 000000000..e12b7c5cf --- /dev/null +++ b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx @@ -0,0 +1,25 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; + + + +# Toolbar Info + +Used to display non-interactive information in a toolbar. + +```htmlbars + + 30 seconds ago + +``` + + + {{ + template: hbs` + + 30 seconds ago + + `, + }} + diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss index c72d1654c..49ae314e2 100644 --- a/addons/rose/addon/styles/rose/components/toolbar/_index.scss +++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss @@ -1 +1,2 @@ +@import 'info'; @import 'toolbar'; diff --git a/addons/rose/addon/styles/rose/components/toolbar/_info.scss b/addons/rose/addon/styles/rose/components/toolbar/_info.scss new file mode 100644 index 000000000..7565bdd86 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/toolbar/_info.scss @@ -0,0 +1,17 @@ +@use '../../variables/sizing'; +@use '../../variables/media'; +@use '../../utilities/type'; + +.rose-toolbar { + .rose-toolbar-info { + @include type.type(button); + color: var(--ui-gray); + position: relative; + display: inline-block; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + $yPadding: sizing.rems(xxs) + sizing.rems(xxxs); + padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l); + } +} diff --git a/addons/rose/app/components/rose/toolbar/info.js b/addons/rose/app/components/rose/toolbar/info.js new file mode 100644 index 000000000..18fc673e1 --- /dev/null +++ b/addons/rose/app/components/rose/toolbar/info.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/toolbar/info'; diff --git a/addons/rose/package.json b/addons/rose/package.json index 43a537553..dfed2ed32 100644 --- a/addons/rose/package.json +++ b/addons/rose/package.json @@ -16,7 +16,8 @@ "lint:hbs:fix": "ember-template-lint . --fix", "lint:js": "eslint .", "lint:sass": "sass-lint -v -q", - "format": "npm run format:js && npm run format:sass", + "format": "npm-run-all format:*", + "format:hbs": "prettier --write 'addon/**/*.hbs'", "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js", "format:sass": "prettier --write addon/**/*.scss", "lint:js:fix": "eslint . --fix", diff --git a/addons/rose/tests/integration/components/rose/toolbar/info-test.js b/addons/rose/tests/integration/components/rose/toolbar/info-test.js new file mode 100644 index 000000000..90837d5ee --- /dev/null +++ b/addons/rose/tests/integration/components/rose/toolbar/info-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | rose/toolbar/info', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +});