diff --git a/addons/rose/README.md b/addons/rose/README.md index 60f42e087..8e5a0127c 100644 --- a/addons/rose/README.md +++ b/addons/rose/README.md @@ -77,14 +77,6 @@ Before submitting your work, be sure to run auto-formatters To build a new component, start by generating it on the command line with `ember g component rose/component-name`. -## Using Components - -A few of the components have additional ember package dependencies that need to be installed before usage. - -| Component | Dependency | -| -------------- | -------------- | -| Rose::Dropdown | ember-modifier | - ## Running tests - `yarn test` – Runs the test suite on the current Ember version diff --git a/addons/rose/addon/components/rose/dropdown/button/index.hbs b/addons/rose/addon/components/rose/dropdown/button/index.hbs deleted file mode 100644 index 88ad67cca..000000000 --- a/addons/rose/addon/components/rose/dropdown/button/index.hbs +++ /dev/null @@ -1,23 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - - \ No newline at end of file diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs deleted file mode 100644 index 7c7c8a8ab..000000000 --- a/addons/rose/addon/components/rose/dropdown/index.hbs +++ /dev/null @@ -1,68 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - -
- - - - {{#if @icon}} - - {{/if}} - - - - {{@text}} - - {{#if @count}} - - {{/if}} - - - - - {{#if @ignoreClickInside}} -
- {{yield - (hash - link=(component 'rose/dropdown/link' style=this.style) - button=(component 'rose/dropdown/button' style=this.style) - item=(component 'rose/anonymous' class='rose-dropdown-item') - separator=(component - 'rose/anonymous' tagName='hr' class='rose-dropdown-separator' - ) - section=(component 'rose/dropdown/section' style=this.style) - key-value=(component 'rose/dropdown/key-value') - ) - }} -
- {{else}} -
- {{yield - (hash - link=(component 'rose/dropdown/link' style=this.style) - button=(component 'rose/dropdown/button' style=this.style) - item=(component 'rose/anonymous' class='rose-dropdown-item') - separator=(component - 'rose/anonymous' tagName='hr' class='rose-dropdown-separator' - ) - section=(component 'rose/dropdown/section' style=this.style) - key-value=(component 'rose/dropdown/key-value') - ) - }} -
- {{/if}} - -
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/dropdown/index.js b/addons/rose/addon/components/rose/dropdown/index.js deleted file mode 100644 index 778051db0..000000000 --- a/addons/rose/addon/components/rose/dropdown/index.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Component from '@glimmer/component'; -import { computed, action } from '@ember/object'; - -export default class RoseDropdownComponent extends Component { - // =attributes - - /** - * @type {boolean} - */ - @computed('args.showCaret') - get showCaret() { - return this.args.showCaret ?? true; - } - - // =actions - - /** - * Closes the details element by setting its `open` attribute to `false`. - * While the details element handles open/close functionality when clicking - * directly on the summary element without JavaScript, we include this helper - * action to ensure that when the user clicks _outside_ of the element, - * or _inside_ the content, it still closes. - * @param {HTMLElement} element - */ - @action - close(element) { - if (element.open) element.open = false; - if (element.parentElement.open) element.parentElement.open = false; - } -} diff --git a/addons/rose/addon/components/rose/dropdown/key-value/index.hbs b/addons/rose/addon/components/rose/dropdown/key-value/index.hbs deleted file mode 100644 index 1c4584a66..000000000 --- a/addons/rose/addon/components/rose/dropdown/key-value/index.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - -
-
- {{yield to='key'}} -
- -
- {{yield to='value'}} -
-
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/dropdown/link/index.hbs b/addons/rose/addon/components/rose/dropdown/link/index.hbs deleted file mode 100644 index 6363291bd..000000000 --- a/addons/rose/addon/components/rose/dropdown/link/index.hbs +++ /dev/null @@ -1,55 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - -{{! - Ember's LinkTo component won't accept nullish @query or @model, so we have to - overcompensate by duplicating it four times, one for every combination. - This is really unpleasant. -}} -{{#if @model}} - {{#if @query}} - - {{yield}} - - {{else}} - - {{yield}} - - {{/if}} -{{else}} - {{#if @query}} - - {{yield}} - - {{else}} - - {{yield}} - - {{/if}} -{{/if}} \ No newline at end of file diff --git a/addons/rose/addon/components/rose/dropdown/section/index.hbs b/addons/rose/addon/components/rose/dropdown/section/index.hbs deleted file mode 100644 index d3173830c..000000000 --- a/addons/rose/addon/components/rose/dropdown/section/index.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - -
- {{#if @title}} - - {{#if @icon}} - - {{/if}} - {{@title}} - - {{/if}} - - {{yield}} -
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/dropdown/section/index.js b/addons/rose/addon/components/rose/dropdown/section/index.js deleted file mode 100644 index faff30562..000000000 --- a/addons/rose/addon/components/rose/dropdown/section/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Component from '@glimmer/component'; -import { generateComponentID } from '../../../../utilities/component-auto-id'; - -export default class RoseDialogComponent extends Component { - // =attributes - - /** - * @type {string} - */ - id = generateComponentID(); -} diff --git a/addons/rose/addon/components/rose/header/nav/index.hbs b/addons/rose/addon/components/rose/header/nav/index.hbs index 7f129d10c..afee26cd0 100644 --- a/addons/rose/addon/components/rose/header/nav/index.hbs +++ b/addons/rose/addon/components/rose/header/nav/index.hbs @@ -4,5 +4,5 @@ }} \ No newline at end of file diff --git a/addons/rose/addon/components/rose/header/utilities/index.hbs b/addons/rose/addon/components/rose/header/utilities/index.hbs index 72a5abe48..e5a61a884 100644 --- a/addons/rose/addon/components/rose/header/utilities/index.hbs +++ b/addons/rose/addon/components/rose/header/utilities/index.hbs @@ -4,5 +4,5 @@ }}
- {{yield (hash dropdown=(component 'rose/dropdown' dropdownRight=true))}} + {{yield}}
\ No newline at end of file diff --git a/addons/rose/app/components/rose/dropdown.js b/addons/rose/app/components/rose/dropdown.js deleted file mode 100644 index 5a71e145d..000000000 --- a/addons/rose/app/components/rose/dropdown.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/dropdown'; diff --git a/addons/rose/app/components/rose/dropdown/button.js b/addons/rose/app/components/rose/dropdown/button.js deleted file mode 100644 index bc6061524..000000000 --- a/addons/rose/app/components/rose/dropdown/button.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/dropdown/button'; diff --git a/addons/rose/app/components/rose/dropdown/key-value.js b/addons/rose/app/components/rose/dropdown/key-value.js deleted file mode 100644 index c21ed6e4b..000000000 --- a/addons/rose/app/components/rose/dropdown/key-value.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/dropdown/key-value'; diff --git a/addons/rose/app/components/rose/dropdown/link.js b/addons/rose/app/components/rose/dropdown/link.js deleted file mode 100644 index 090fea137..000000000 --- a/addons/rose/app/components/rose/dropdown/link.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/dropdown/link'; diff --git a/addons/rose/app/components/rose/dropdown/section.js b/addons/rose/app/components/rose/dropdown/section.js deleted file mode 100644 index 51e04a1fc..000000000 --- a/addons/rose/app/components/rose/dropdown/section.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/dropdown/section'; diff --git a/addons/rose/app/styles/rose/components/_index.scss b/addons/rose/app/styles/rose/components/_index.scss index 4b3eecfb5..7035bdbb7 100644 --- a/addons/rose/app/styles/rose/components/_index.scss +++ b/addons/rose/app/styles/rose/components/_index.scss @@ -8,7 +8,6 @@ @use 'card'; @use 'cards'; @use 'code-editor'; -@use 'dropdown'; @use 'form'; @use 'frame'; @use 'header'; diff --git a/addons/rose/app/styles/rose/components/dropdown/_button.scss b/addons/rose/app/styles/rose/components/dropdown/_button.scss deleted file mode 100644 index 43e7cfacc..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_button.scss +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; -@use '../../utilities/type'; -@use 'sass:math'; - -.rose-dropdown-button { - @include type.type(s); - - display: block; - box-sizing: border-box; - width: 100%; - min-width: (sizing.rems(m)) * 13; - border: 0; - padding: 0 sizing.rems(s); - text-decoration: none; - text-align: left; - - $line-height: math.div(36, 14); - - line-height: $line-height; - - --background-color: transparent; - --color: var(--stark); - - color: var(--color); - background-color: var(--background-color); - - &:hover { - --background-color: var(--ui-gray-subtler-5); - } - - &.rose-dropdown-button-danger { - --background-color: var(--subtle); - --color: var(--failure); - - &:hover { - --color: var(--subtle); - --background-color: var(--failure); - } - } -} diff --git a/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss deleted file mode 100644 index 80ceb3fcc..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss +++ /dev/null @@ -1,151 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; -@use '../../utilities/type'; - -$xs: sizing.rems(xs); // 8 -$xxs: sizing.rems(xxs); // 4 -$chevron: url("data:image/svg+xml;utf-8,"); -$chevron-white: url("data:image/svg+xml;utf-8,"); -$chevron-grey: url("data:image/svg+xml;utf-8,"); - -.rose-dropdown { - --background-image-light: #{$chevron}; - --background-image-dark: #{$chevron-white}; - --background-image: var(--background-image-light); - - .ember-application.rose-theme-light & { - --background-image: var(--background-image-light); - } - - @media (prefers-color-scheme: dark) { - --background-image: var(--background-image-dark); - } - - .ember-application.rose-theme-dark & { - --background-image: var(--background-image-dark); - } - - position: relative; - display: inline-block; - vertical-align: middle; - - .rose-dropdown-trigger { - @include type.type(button, semibold); - - cursor: default; - overflow: hidden; - display: flex; - align-items: center; - - $y-padding: sizing.rems(xxs) + sizing.rems(xxxs); - - padding: $y-padding sizing.rems(m) $y-padding sizing.rems(l); - color: var(--stark); - border-radius: sizing.rems(xxxs); - white-space: nowrap; - - // Hide default twistie triangle - // Webkit / Chromium - &::-webkit-details-marker { - display: none; - } - - // Firefox - &::marker { - display: none; - } - - background-size: sizing.rems(m); - - &:hover { - background-color: var(--ui-gray-subtler-5); - } - - &:not(.has-icon-only) .hds-icon:first-child { - margin-left: -(sizing.rems(xs)); - margin-right: sizing.rems(xxs); - } - - &.has-icon-only { - padding-left: sizing.rems(s); - padding-right: sizing.rems(s); - background-position: right sizing.rems(xs) center; - - .rose-dropdown-trigger-text { - position: absolute; - top: -1000px; - left: -1000px; - width: 1px; - height: 1px; - opacity: 0; - } - } - - &.show-caret { - padding-right: sizing.rems(xl); - background: var(--background-image); - background-repeat: no-repeat; - background-position: right sizing.rems(m) center; - background-size: sizing.rems(m); - } - - // Firefox - list-style-type: none; - } - - &[open] > .rose-dropdown-trigger { - background-color: var(--ui-gray-subtler-4); - } - - .rose-dropdown-content { - position: absolute; - padding: $xxs 0; - border: 1px solid var(--ui-gray-subtler-2); - border-radius: sizing.rems(xxxs); - background: var(--subtle); - box-shadow: - 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)), - 0 $xxs $xs rgba(var(--stark-components), var(--opacity-4)); - z-index: 99; - } - - &.rose-dropdown-right { - .rose-dropdown-content { - right: 0; - } - } - - .rose-dropdown-separator { - background-color: var(--ui-gray-subtler-3); - height: sizing.rems(xxxxs); - border: none; - margin: $xxs 0; - } - - // Styles for condensed verion. Some are overrides - &.rose-dropdown-condensed { - --background-image: #{$chevron-grey}; - - border: sizing.rems(xxxxs) solid var(--ui-border); - border-radius: sizing.rems(xxs); - - .rose-dropdown-trigger { - color: var(--ui-gray-starker-1); - padding: 0 sizing.rems(s); // To clear the inherit padding. - - &.show-caret { - padding-right: sizing.rems(l) + sizing.rems(xs); // 32 - background-position: right sizing.rems(xs) center; - } - } - - .rose-dropdown-content { - border: none; - border: sizing.rems(xxxxs) solid var(--ui-border); - } - } -} diff --git a/addons/rose/app/styles/rose/components/dropdown/_index.scss b/addons/rose/app/styles/rose/components/dropdown/_index.scss deleted file mode 100644 index b67dca9f3..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_index.scss +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use 'dropdown'; -@use 'link'; -@use 'item'; -@use 'section'; -@use 'key-value'; diff --git a/addons/rose/app/styles/rose/components/dropdown/_item.scss b/addons/rose/app/styles/rose/components/dropdown/_item.scss deleted file mode 100644 index a24303920..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_item.scss +++ /dev/null @@ -1,156 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; -@use '../../utilities/type'; -@use 'sass:math'; - -$checkmark: url("data:image/svg+xml;utf-8,"); - -.rose-dropdown-item { - @include type.type(s); - - min-width: (sizing.rems(m)) * 20; - - $y-padding: math.div( - sizing.rems(xl) - (sizing.rems(m) + sizing.rems(xxxs)), - 2 - ); - $x-padding: sizing.rems(s); - - padding: $y-padding $x-padding; - - --color: var(--stark); - --background-color: transparent; - - color: var(--color); - background-color: var(--background-color); - - .rose-form-radio { - color: currentcolor; - margin-bottom: 0; - - .rose-form-radio-label { - display: block; - margin: -#{$y-padding} -#{$x-padding}; - padding-top: sizing.rems(xs) + sizing.rems(xxxxs); - padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs); - padding-left: sizing.rems(s); - padding-right: sizing.rems(xl); - font-weight: normal; - - &:hover { - background-color: var(--ui-gray-subtler-5); - } - - &::after { - top: sizing.rems(xxs) + sizing.rems(xxxs); - right: sizing.rems(xs); - left: auto; - transform: scale(1.5); - } - } - - .rose-form-radio-field { - &:not(:checked) { - ~ .rose-form-radio-label { - &::after { - opacity: 0.25; - } - } - } - - &:checked { - ~ .rose-form-radio-label { - color: var(--action); - background-color: var(--action-subtler-1h); - } - } - - &:disabled { - ~ .rose-form-radio-label { - opacity: 0.5; - } - } - } - } - - .rose-form-checkbox { - color: currentcolor; - margin-bottom: 0; - - .rose-form-checkbox-label { - display: block; - margin: -#{$y-padding} -#{$x-padding}; - padding-top: sizing.rems(xs) + sizing.rems(xxxxs); - padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs); - padding-left: sizing.rems(s); - padding-right: sizing.rems(xl) + sizing.rems(l); - font-weight: normal; - - &:hover { - background-color: var(--ui-gray-subtler-5); - } - - &::after { - top: sizing.rems(xxs); - right: sizing.rems(xs); - left: auto; - border: sizing.rems(xxxs) solid var(--ui-gray-subtler-2); - border-radius: sizing.rems(xxxs); - transform: scale(0.66); - } - - &::before { - position: absolute; - top: sizing.rems(xs); - left: 0; - display: block; - width: sizing.rems(m); - height: sizing.rems(m); - pointer-events: none; - content: ' '; - border: none; - } - } - - .rose-form-checkbox-field { - &:hover { - ~ .rose-form-checkbox-label { - &::after { - border-color: var(--ui-gray); - } - } - } - - &:checked { - ~ .rose-form-checkbox-label { - color: var(--action); - background-color: var(--action-subtler-1h); - - &::after { - border-color: var(--action); - background-size: sizing.rems(m); - } - } - } - - &:disabled { - ~ .rose-form-checkbox-label { - opacity: 0.5; - - &::after { - border-color: var(--ui-gray-subtler-2); - background-color: var(--ui-gray-subtler-4); - } - - &::before { - background: none; - } - } - } - } - } -} diff --git a/addons/rose/app/styles/rose/components/dropdown/_key-value.scss b/addons/rose/app/styles/rose/components/dropdown/_key-value.scss deleted file mode 100644 index 7d827abba..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_key-value.scss +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; - -.rose-dropdown-key-value { - .rose-dropdown-key { - text-transform: capitalize; - } - - .rose-dropdown-value { - color: var(--ui-gray); - padding: sizing.rems(xxs) sizing.rems(s) 0 0; - } -} diff --git a/addons/rose/app/styles/rose/components/dropdown/_link.scss b/addons/rose/app/styles/rose/components/dropdown/_link.scss deleted file mode 100644 index c74282574..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_link.scss +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; -@use '../../utilities/type'; -@use 'sass:math'; - -.rose-dropdown-link { - @include type.type(s); - - display: block; - box-sizing: border-box; - width: 100%; - min-width: (sizing.rems(m)) * 13; - border: 0; - padding: 0 sizing.rems(s); - text-decoration: none; - text-align: left; - - $line-height: math.div(36, 14); - - line-height: $line-height; - - --background-color: transparent; - --color: var(--stark); - - color: var(--color); - background-color: var(--background-color); - - &:hover { - --background-color: var(--ui-gray-subtler-5); - } - - &.rose-dropdown-link-danger { - --background-color: var(--subtle); - --color: var(--failure); - - &:hover { - --color: var(--subtle); - --background-color: var(--failure); - } - } -} diff --git a/addons/rose/app/styles/rose/components/dropdown/_section.scss b/addons/rose/app/styles/rose/components/dropdown/_section.scss deleted file mode 100644 index 1e3693237..000000000 --- a/addons/rose/app/styles/rose/components/dropdown/_section.scss +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; -@use '../../utilities/type'; -@use 'sass:math'; - -.rose-dropdown-section { - .rose-dropdown-section-title { - @include type.type(xs, normal); - - text-transform: uppercase; - padding: 0 sizing.rems(s); - margin: 0; - - $line-height: math.div(36, 14); - - line-height: $line-height; - color: var(--ui-gray); - - .hds-icon { - vertical-align: text-top; - } - } -} diff --git a/addons/rose/app/styles/rose/components/page-header/_title.scss b/addons/rose/app/styles/rose/components/page-header/_title.scss index a598b3258..9e0da1da9 100644 --- a/addons/rose/app/styles/rose/components/page-header/_title.scss +++ b/addons/rose/app/styles/rose/components/page-header/_title.scss @@ -22,18 +22,4 @@ width: sizing.rems(l); } } - - .rose-header-dropdown { - .rose-header-dropdown-trigger-text { - @include typography.type(h1, bold); - - margin-top: sizing.rems(xs); - margin-bottom: sizing.rems(xs); - margin-right: sizing.rems(xs); - } - - .rose-header-dropdown-trigger { - background-size: sizing.rems(l); - } - } } diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js deleted file mode 100644 index d2bf35e54..000000000 --- a/addons/rose/tests/integration/components/rose/dropdown-test.js +++ /dev/null @@ -1,112 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, click, find, findAll } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/dropdown', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-dropdown')); - assert.notOk(find('.rose-dropdown-right')); - }); - - test('it renders with html attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#custom-id')); - assert.ok(find('.custom-class')); - }); - - test('it renders with trigger', async function (assert) { - await render(hbs``); - assert.strictEqual( - find('.rose-dropdown-trigger').textContent.trim(), - 'Click me', - ); - }); - - test('it supports a count', async function (assert) { - await render(hbs``); - assert.strictEqual(find('.hds-badge-count').textContent.trim(), '2'); - }); - - test('it supports an icon', async function (assert) { - await render(hbs``); - assert.dom('svg').isVisible(); - }); - - test('it supports icon-only display', async function (assert) { - await render(hbs``); - assert.ok(find('.has-icon-only')); - }); - - test('it supports right aligned content', async function (assert) { - await render(hbs` - - `); - assert.ok(find('.rose-dropdown-right')); - }); - - test('it supports hiding dropdown caret', async function (assert) { - await render(hbs``); - assert.ok(find('.show-caret')); - - await render(hbs``); - assert.notOk(find('.show-caret')); - }); - - test('it renders with content', async function (assert) { - await render(hbs` - - - - - - `); - assert.ok(find('.rose-dropdown-content')); - assert.strictEqual(findAll('a').length, 2); - assert.strictEqual(findAll('button').length, 3); - }); - - test('it is toggled on click on trigger content', async function (assert) { - await render(hbs``); - - assert.notOk(find('#dropdown').open); - await click('summary'); - assert.ok(find('#dropdown').open); - await click('summary'); - assert.notOk(find('#dropdown').open); - }); - - test('it is closed with outside click is triggered', async function (assert) { - await render(hbs` -
- -
- `); - - await click('summary'); - assert.ok(find('#dropdown').open); - await click('#wrapper'); - assert.notOk(find('#dropdown').open); - }); - - test('it is closed when inside content is clicked', async function (assert) { - await render(hbs` - - Button - - `); - - await click('summary'); - assert.ok(find('.rose-dropdown').open); - await click('button'); - assert.notOk(find('.rose-dropdown').open); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/dropdown/button-test.js b/addons/rose/tests/integration/components/rose/dropdown/button-test.js deleted file mode 100644 index 1e9b63add..000000000 --- a/addons/rose/tests/integration/components/rose/dropdown/button-test.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/dropdown/button', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-dropdown-button')); - }); - - test('it is type="button" by default', async function (assert) { - await render(hbs``); - assert.strictEqual(find('button').type, 'button'); - }); - - test('it is type="submit" when @onSubmit={{true}}', async function (assert) { - await render(hbs``); - assert.strictEqual(find('button').type, 'submit'); - }); - - test('it is disabled when @disabled={{true}}', async function (assert) { - await render(hbs``); - assert.true(find('button').disabled); - }); - - test('it adds a style class', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-dropdown-button-warning')); - }); - - test('it supports an icon-only type', async function (assert) { - await render(hbs``); - assert.dom('.has-icon-only .hds-icon').isVisible(); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/dropdown/key-value-test.js b/addons/rose/tests/integration/components/rose/dropdown/key-value-test.js deleted file mode 100644 index 1a8cf698c..000000000 --- a/addons/rose/tests/integration/components/rose/dropdown/key-value-test.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/dropdown/key-value', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs` - - <:key>key - <:value>value - - `); - - assert.strictEqual(find('.rose-dropdown-key').textContent.trim(), 'key'); - assert.strictEqual( - find('.rose-dropdown-value').textContent.trim(), - 'value', - ); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/dropdown/link-test.js b/addons/rose/tests/integration/components/rose/dropdown/link-test.js deleted file mode 100644 index 8b9780b4d..000000000 --- a/addons/rose/tests/integration/components/rose/dropdown/link-test.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/dropdown/link', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('a')); - assert.ok(find('.rose-dropdown-link')); - }); - - test('it renders with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#dropdown')); - }); - - test('it renders with content', async function (assert) { - await render(hbs` - content - `); - assert.strictEqual( - find('.rose-dropdown-link').textContent.trim(), - 'content', - ); - }); - - test('it supports style', async function (assert) { - await render(hbs``); - assert.ok('.rose-dropdown-link-warning'); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/dropdown/section-test.js b/addons/rose/tests/integration/components/rose/dropdown/section-test.js deleted file mode 100644 index fd421ed68..000000000 --- a/addons/rose/tests/integration/components/rose/dropdown/section-test.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/dropdown/section', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs` - - template block text - - `); - assert.ok(find('.rose-dropdown-section')); - assert.strictEqual(this.element.textContent.trim(), 'template block text'); - }); - - test('it renders with optional @title', async function (assert) { - await render(hbs` - - template block text - - `); - assert.strictEqual( - find('.rose-dropdown-section-title').textContent.trim(), - 'Section Title', - ); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/header-test.js b/addons/rose/tests/integration/components/rose/header-test.js index 09627d6e9..aee18bbd2 100644 --- a/addons/rose/tests/integration/components/rose/header-test.js +++ b/addons/rose/tests/integration/components/rose/header-test.js @@ -34,19 +34,6 @@ module('Integration | Component | rose/header', function (hooks) { assert.notOk(find('.rose-header-utilities')); }); - test('it renders with nav elements', async function (assert) { - await render(hbs` - - - Menu item - Menu item - Button menu item - - - `); - assert.ok(find('.rose-dropdown')); - }); - test('it renders with utilities', async function (assert) { await render(hbs` @@ -56,12 +43,14 @@ module('Integration | Component | rose/header', function (hooks) { assert.ok(find('.rose-header-utilities')); }); - test('it renders with utility elements', async function (assert) { + test('it renders the hds dropdown within header utilities', async function (assert) { await render(hbs` - - + + + + `); - assert.ok(find('.rose-dropdown')); + assert.ok(find('.hds-dropdown')); }); }); diff --git a/addons/rose/tests/integration/components/rose/header/nav-test.js b/addons/rose/tests/integration/components/rose/header/nav-test.js index bda5b7400..cf52fb25f 100644 --- a/addons/rose/tests/integration/components/rose/header/nav-test.js +++ b/addons/rose/tests/integration/components/rose/header/nav-test.js @@ -5,7 +5,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find, findAll } from '@ember/test-helpers'; +import { render, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | rose/header/nav', function (hooks) { @@ -15,12 +15,4 @@ module('Integration | Component | rose/header/nav', function (hooks) { await render(hbs``); assert.ok(find('.rose-header-nav')); }); - - test('it renders nav dropdown elements', async function (assert) { - await render(hbs` - - - `); - assert.strictEqual(findAll('.rose-dropdown').length, 2); - }); }); diff --git a/addons/rose/tests/integration/components/rose/header/utilities-test.js b/addons/rose/tests/integration/components/rose/header/utilities-test.js index a04aac87c..15c5b060c 100644 --- a/addons/rose/tests/integration/components/rose/header/utilities-test.js +++ b/addons/rose/tests/integration/components/rose/header/utilities-test.js @@ -5,7 +5,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find, findAll } from '@ember/test-helpers'; +import { render, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | rose/header/utilities', function (hooks) { @@ -15,19 +15,4 @@ module('Integration | Component | rose/header/utilities', function (hooks) { await render(hbs``); assert.ok(find('.rose-header-utilities')); }); - - test('it renders nav dropdown elements', async function (assert) { - await render(hbs` - - - `); - assert.strictEqual(findAll('.rose-dropdown').length, 2); - }); - - test('it renders nav dropdown elements as right aligned', async function (assert) { - await render(hbs` - - `); - assert.ok(find('.rose-dropdown.rose-dropdown-right')); - }); }); diff --git a/ui/admin/app/components/auth-methods/auth-method/actions/index.hbs b/ui/admin/app/components/auth-methods/auth-method/actions/index.hbs index 629f8ddbf..60203da29 100644 --- a/ui/admin/app/components/auth-methods/auth-method/actions/index.hbs +++ b/ui/admin/app/components/auth-methods/auth-method/actions/index.hbs @@ -15,7 +15,6 @@ (if @model.isPrivate 'lock' 'check-circle') }} /> - {{#each @model.options.state as |state|}} {{/each}} - {{/if}} - {{#if @model.isPrimary}} @@ -58,7 +55,6 @@ {{/if}} {{/if}} - {{#if (can 'delete auth-method' @model)}} diff --git a/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/actions/index.hbs b/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/actions/index.hbs index d50ee384f..651db1e08 100644 --- a/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/actions/index.hbs +++ b/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/actions/index.hbs @@ -5,7 +5,6 @@ - {{#if (can 'addHosts hostSet' @model)}} - {{#if (can 'addHostSources target' @model)}} {{t 'resources.target.actions.add-host-sources'}} @@ -28,12 +27,10 @@ }} {{/if}} - {{#if (can 'delete model' @model)}} {{t 'resources.target.actions.delete'}} {{/if}} - \ No newline at end of file diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 4cdb61704..ef2b365a3 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -47,29 +47,6 @@ &:not(.full-width) { width: 66%; } - - .rose-dropdown { - $icon-width: sizing.rems(m) + sizing.rems(s); - $indent: $icon-width + sizing.rems(xs); - - .rose-form-radio-label { - display: flex; - } - - .indent-label-1 { - .rose-form-radio-label, - .rose-form-checkbox-label { - padding-left: $indent; - } - } - - .indent-label-2 { - .rose-form-radio-label, - .rose-form-checkbox-label { - padding-left: $indent + $icon-width; - } - } - } } .rose-header { @@ -998,12 +975,6 @@ margin-right: 1rem; } -.dropdown-radio-btn { - .hds-form-group__control-field { - padding: 0.25rem 0.75rem; - } -} - // worker filter generator .filter-generator-selection { .hds-form-group__control-field { diff --git a/ui/admin/tests/acceptance/aliases/delete-test.js b/ui/admin/tests/acceptance/aliases/delete-test.js index 1eb5271ab..e04d7e934 100644 --- a/ui/admin/tests/acceptance/aliases/delete-test.js +++ b/ui/admin/tests/acceptance/aliases/delete-test.js @@ -9,6 +9,7 @@ import { setupApplicationTest } from 'admin/tests/helpers'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { authenticateSession } from 'ember-simple-auth/test-support'; import { setupIndexedDb } from 'api/test-support/helpers/indexed-db'; +import * as commonSelectors from 'admin/tests/helpers/selectors'; module('Acceptance | aliases | delete', function (hooks) { setupApplicationTest(hooks); @@ -19,8 +20,6 @@ module('Acceptance | aliases | delete', function (hooks) { const DROPDOWN_BUTTON_SELECTOR = 'tbody tr td:last-child .hds-dropdown-toggle-icon'; - const DELETE_DROPDOWN_SELECTOR = - '.hds-dropdown-list-item--color-critical button'; const instances = { scopes: { @@ -68,7 +67,7 @@ module('Acceptance | aliases | delete', function (hooks) { assert.true(instances.alias.authorized_actions.includes('delete')); await visit(urls.aliases); await click(DROPDOWN_BUTTON_SELECTOR); - await click(DELETE_DROPDOWN_SELECTOR); + await click(commonSelectors.DELETE_BTN); assert.strictEqual(aliasCount(), count - 1); }); @@ -84,6 +83,6 @@ module('Acceptance | aliases | delete', function (hooks) { await click(`[href="${urls.aliases}"]`); await click(DROPDOWN_BUTTON_SELECTOR); - assert.dom(DELETE_DROPDOWN_SELECTOR).doesNotExist(); + assert.dom(commonSelectors.DELETE_BTN).doesNotExist(); }); }); diff --git a/ui/admin/tests/acceptance/authentication-test.js b/ui/admin/tests/acceptance/authentication-test.js index 4b9407433..b8c120d73 100644 --- a/ui/admin/tests/acceptance/authentication-test.js +++ b/ui/admin/tests/acceptance/authentication-test.js @@ -9,7 +9,6 @@ import { currentURL, fillIn, click, - findAll, getRootElement, } from '@ember/test-helpers'; import { setupApplicationTest } from 'admin/tests/helpers'; @@ -295,26 +294,6 @@ module('Acceptance | authentication', function (hooks) { assert.ok(currentSession().isAuthenticated); }); - // This test is disabled because it is no longer relevant. On deauth, - // the page is reloaded. If the user was viewing a route requiring - // authentication, they will be redirected accordingly. - test.skip('deauthentication redirects to first global authenticate method', async function (assert) { - await visit(authMethodAuthenticateURL); - await fillIn('[name="identification"]', 'test'); - await fillIn('[name="password"]', 'test'); - await click('[type="submit"]'); - assert.ok(currentSession().isAuthenticated); - // Open header utilities dropdown - await click('.rose-header-utilities .rose-dropdown summary'); - // Find and click on last element in dropdown - should be deauthenticate button - const menu = findAll( - '.rose-header-utilities .rose-dropdown .rose-dropdown-content button', - ); - await click(menu[menu.length - 1]); - assert.notOk(currentSession().isAuthenticated); - assert.equal(currentURL(), authMethodGlobalAuthenticateURL); - }); - test('401 responses result in deauthentication', async function (assert) { await authenticateSession({ scope: { id: globalScope.id, type: globalScope.type }, diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js index a94703a61..a8c69cfa8 100644 --- a/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js @@ -112,7 +112,9 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) { ); instances.hostSet.update({ authorized_actions }); await visit(urls.hostSetHosts); - assert.notOk(find('tbody tr .rose-dropdown-button-danger')); + assert.notOk( + find('tbody tr [data-test-host-set-hosts-dropdown-remove-host]'), + ); }); test('shows error message on host remove error', async function (assert) { diff --git a/ui/admin/tests/acceptance/targets/host-sources-test.js b/ui/admin/tests/acceptance/targets/host-sources-test.js index 6f2253e1b..6e8fbea1e 100644 --- a/ui/admin/tests/acceptance/targets/host-sources-test.js +++ b/ui/admin/tests/acceptance/targets/host-sources-test.js @@ -146,7 +146,9 @@ module('Acceptance | targets | host-sources', function (hooks) { await click(`[href="${urls.targetHostSources}"]`); - assert.dom('tbody tr .rose-dropdown-button-danger').doesNotExist(); + assert + .dom(`tbody tr ${commonSelectors.DELETE_BTN}`) + .doesNotExist(); }); test('removing a target host set which errors displays error messages', async function (assert) { diff --git a/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js b/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js index d5e80f580..a5b9e18e3 100644 --- a/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js +++ b/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js @@ -366,7 +366,9 @@ module( (item) => item !== 'remove-credential-sources', ); await visit(urls.injectedApplicationCredentialSources); - assert.dom('tbody tr .rose-dropdown-button-danger').doesNotExist(); + assert + .dom(`tbody tr ${commonSelectors.DELETE_BTN}`) + .doesNotExist(); }); test('removing a target credential library which errors displays error messages', async function (assert) { diff --git a/ui/admin/tests/acceptance/targets/manage-alias-test.js b/ui/admin/tests/acceptance/targets/manage-alias-test.js index 84b78d197..f64b4a56b 100644 --- a/ui/admin/tests/acceptance/targets/manage-alias-test.js +++ b/ui/admin/tests/acceptance/targets/manage-alias-test.js @@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import a11yAudit from 'ember-a11y-testing/test-support/audit'; import { authenticateSession } from 'ember-simple-auth/test-support'; import { TYPE_TARGET_TCP, TYPE_TARGET_SSH } from 'api/models/target'; +import * as commonSelectors from 'admin/tests/helpers/selectors'; module('Acceptance | targets | manage-alias', function (hooks) { setupApplicationTest(hooks); @@ -19,7 +20,6 @@ module('Acceptance | targets | manage-alias', function (hooks) { const ALIASES_SIDEBAR_LIST = '.link-list-item'; const DROPDOWN_ACTION = '[data-test-manage-target-alias] button'; const CLEAR_BTN_SELECTOR = '.hds-dropdown-list-item--color-action button'; - const DELETE_BTN_SELECTOR = '.hds-dropdown-list-item--color-critical button'; const LINK_TO_NEW_ALIAS = '.target-sidebar-aliases .hds-button'; const DEST_FIELD_SELECTOR = '[name="destination_id"]'; const ITEM_SELECTOR = '.link-list-item a'; @@ -144,7 +144,7 @@ module('Acceptance | targets | manage-alias', function (hooks) { assert.strictEqual(currentURL(), urls.tcpAlias); await click(DROPDOWN_ACTION); - await click(DELETE_BTN_SELECTOR); + await click(commonSelectors.DELETE_BTN); assert.strictEqual(getAliasCount(), aliasCount - 1); diff --git a/ui/admin/tests/helpers/selectors.js b/ui/admin/tests/helpers/selectors.js index a19720ed7..b48c4ddaf 100644 --- a/ui/admin/tests/helpers/selectors.js +++ b/ui/admin/tests/helpers/selectors.js @@ -6,6 +6,7 @@ export const SAVE_BTN = '[type=submit]'; export const CANCEL_BTN = '.rose-form-actions [type=button]'; export const EDIT_BTN = '.rose-form-actions [type=button]'; +export const DELETE_BTN = '.hds-dropdown-list-item--color-critical button'; export const FIELD_NAME = '[name=name]'; export const FIELD_NAME_VALUE = 'Random name'; diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index e4b569985..145499276 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -69,29 +69,6 @@ width: 66%; } - .rose-dropdown { - $icon-width: sizing.rems(m) + sizing.rems(s); - $indent: $icon-width + sizing.rems(xs); - - .rose-form-radio-label { - display: flex; - } - - .indent-label-1 { - .rose-form-radio-label, - .rose-form-checkbox-label { - padding-left: $indent; - } - } - - .indent-label-2 { - .rose-form-radio-label, - .rose-form-checkbox-label { - padding-left: $indent * 1.5; - } - } - } - fieldset { margin-bottom: sizing.rems(m); } @@ -105,12 +82,10 @@ .rose-header-brand, .rose-header-nav, - .rose-header-utilities .rose-dropdown, .rose-header-utilities button { -webkit-app-region: no-drag; } - - + &.header-cushion { padding-left: sizing.rems(l) * 3; } @@ -456,4 +431,4 @@ flex-basis: 100%; } } -} \ No newline at end of file +} diff --git a/ui/desktop/tests/acceptance/authentication-test.js b/ui/desktop/tests/acceptance/authentication-test.js index ff8ce96b4..fbc5e0a44 100644 --- a/ui/desktop/tests/acceptance/authentication-test.js +++ b/ui/desktop/tests/acceptance/authentication-test.js @@ -183,12 +183,12 @@ module('Acceptance | authentication', function (hooks) { assert.ok(currentSession().isAuthenticated); - await click('.rose-header-utilities .header-dropdown-button-override button'); + await click( + '.rose-header-utilities .header-dropdown-button-override button', + ); assert.strictEqual( - find( - '[data-test-sign-out]', - ).textContent.trim(), + find('[data-test-sign-out]').textContent.trim(), 'Sign Out', ); diff --git a/ui/desktop/tests/acceptance/scopes-test.js b/ui/desktop/tests/acceptance/scopes-test.js index caef320fd..e6c0a1c3b 100644 --- a/ui/desktop/tests/acceptance/scopes-test.js +++ b/ui/desktop/tests/acceptance/scopes-test.js @@ -229,6 +229,7 @@ module('Acceptance | scopes', function (hooks) { await visit(urls.targets); await click('.rose-header-nav .hds-dropdown-toggle-button'); + await click('.rose-header-nav .hds-dropdown-list-item:nth-of-type(3) a'); assert.strictEqual(currentURL(), urls.targets);