CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reveal & Toolbar::Info Component cleanup (#2782)

Browse Source 
* refactor: 💡 remove desktop Reveal component

* refactor: 💡 remove Toolbar::Info component
This commit is contained in:
Cameron Perera authored and GitHub committed 2025-04-17 10:11:14 -05:00
1 parent e22ef12529
commit af705718ff
9 files changed
-211
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/toolbar/info/index.hbs
-8
View File
@@ -1,8 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
<span class='rose-toolbar-info'>
{{yield}}
</span>
addons/rose/app/components/rose/toolbar/info.js
-6
View File
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'rose/components/rose/toolbar/info';
addons/rose/app/styles/rose/components/toolbar/_index.scss
-1
View File
@@ -3,5 +3,4 @@
* SPDX-License-Identifier: BUSL-1.1
*/
@import 'info';
@import 'toolbar';
addons/rose/app/styles/rose/components/toolbar/_info.scss
-23
View File
@@ -1,23 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
@use '../../variables/sizing';
@use '../../variables/media';
@use '../../utilities/type';
.rose-toolbar-info {
@include type.type(button);
color: var(--ui-gray);
position: relative;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
$y-padding: sizing.rems(xxs) + sizing.rems(xxxs);
padding: $y-padding sizing.rems(m) $y-padding sizing.rems(l);
}
addons/rose/tests/integration/components/rose/toolbar/info-test.js
-31
View File
@@ -1,31 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
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`<Rose::Toolbar::Info />`);
assert.dom(this.element).hasText('');
// Template block usage:
await render(hbs`
<Rose::Toolbar::Info>
template block text
</Rose::Toolbar::Info>
`);
assert.dom(this.element).hasText('template block text');
});
});
ui/desktop/app/components/reveal/index.hbs
-19
View File
@@ -1,19 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
<details ...attributes class='reveal'>
<summary class='reveal-trigger'>
<span class='reveal-trigger-text-close'>
{{@textWhenClose}}
</span>
<span class='reveal-trigger-text-open'>
{{@textWhenOpen}}
</span>
</summary>
<content class='reveal-content'>
{{yield}}
</content>
</details>
ui/desktop/app/components/reveal/index.js
-8
View File
@@ -1,8 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import RoseDropdownComponent from 'rose/components/rose/dropdown';
export default class RevealComponent extends RoseDropdownComponent {}
ui/desktop/app/styles/app.scss
-62
View File
@@ -274,68 +274,6 @@
z-index: 5500;
}
// Reveal component (app/components/reveal)
$chevron-up: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563FF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.41 16L12 11.42L16.59 16L18 14.59L12 8.59L6 14.59L7.41 16Z' /></svg>");
$chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563FF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z' /></svg>");
.reveal {
--trigger-color: var(--action);
.reveal-trigger {
background: url($chevron-down) no-repeat right center;
color: var(--trigger-color);
cursor: default;
display: inline-block;
overflow: hidden;
padding-right: sizing.rems(l);
white-space: nowrap;
// Hide default twistie triangle
// Firefox
list-style-type: none;
// Webkit / Chromium
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&:hover {
--trigger-color: var(--action-starker-1);
}
}
&:not([open]) {
.reveal-trigger-text-close {
background: $chevron-down no-repeat right center;
padding-right: sizing.rems(l);
}
.reveal-trigger-text-open {
display: none;
}
}
&[open] {
.reveal-trigger-text-open {
background: $chevron-up no-repeat right center;
padding-right: sizing.rems(l);
}
.reveal-trigger-text-close {
display: none;
}
pre {
white-space: pre-wrap;
word-break: break-all;
}
}
}
// Card component (app/components/card)
.card {
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
ui/desktop/tests/integration/components/reveal-test.js
-53
View File
@@ -1,53 +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, click } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | reveal', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
assert.expect(3);
await render(hbs`
<Reveal
@textWhenOpen='Hide content'
@textWhenClose='View content'
/>
`);
assert.ok(find('.reveal'));
assert.ok(find('.reveal-trigger'));
assert.ok(find('.reveal-trigger').textContent.trim(), 'View content');
});
test('it renders with content, opens, show the content, close and hide the content', async function (assert) {
assert.expect(3);
await render(hbs`
<Reveal
@textWhenOpen='Hide content'
@textWhenClose='View content'
>
<pre>
<code>
{
"auth": null,
"lease_duration": 3600,
"lease_id": "",
"renewable": false
}
</code>
</pre>
</Reveal>
`);
assert.notOk(find('details').open);
await click('summary');
assert.ok(find('details').open);
await click('summary');
assert.notOk(find('details').open);
});
});