diff --git a/ui/desktop/.stylelintrc.json b/ui/desktop/.stylelintrc.json index b20f46ce4..d28c485da 100644 --- a/ui/desktop/.stylelintrc.json +++ b/ui/desktop/.stylelintrc.json @@ -6,6 +6,7 @@ "scss/at-extend-no-missing-placeholder": null, "function-parentheses-space-inside": null, "property-no-vendor-prefix": null, - "at-rule-no-vendor-prefix": null + "at-rule-no-vendor-prefix": null, + "order/properties-alphabetical-order": null } } diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs new file mode 100644 index 000000000..8e15785dd --- /dev/null +++ b/ui/desktop/app/components/reveal/index.hbs @@ -0,0 +1,14 @@ +
+ + + {{@textWhenClose}} + + + {{@textWhenOpen}} + + + + + {{yield}} + +
\ No newline at end of file diff --git a/ui/desktop/app/components/reveal/index.js b/ui/desktop/app/components/reveal/index.js new file mode 100644 index 000000000..a4db866c4 --- /dev/null +++ b/ui/desktop/app/components/reveal/index.js @@ -0,0 +1,3 @@ +import RoseDropdownComponent from 'rose/components/rose/dropdown'; + +export default class RevealComponent extends RoseDropdownComponent {} diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 537e540ed..00313f9ea 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -361,7 +361,57 @@ } } -// Card component (app/componetns/card) +// Reveal component (app/components/reveal) +$chevron-up: url("data:image/svg+xml;utf-8,"); +$chevron-down: url("data:image/svg+xml;utf-8,"); + +.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-open { + display: none; + } + } + + &[open] { + .reveal-trigger { + background: url($chevron-up) no-repeat right center; + } + + .reveal-trigger-text-close { + display: none; + } + } +} + +// Card component (app/components/card) .card { border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); display: flex; diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs index 1fa2603c6..fb0d61f56 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs @@ -30,11 +30,20 @@

- {{! + {{!--

Credentials

+ <:header> + + + <:body> @@ -55,8 +64,25 @@ - - }} + <:footer> + + 
+                    
+  {
+    "auth": null,
+    "lease_duration": 3600,
+    "lease_id": "",
+    "renewable": false
+  }
+                    
+
+ + + --}} + <:footer>
diff --git a/ui/desktop/tests/integration/components/reveal-test.js b/ui/desktop/tests/integration/components/reveal-test.js new file mode 100644 index 000000000..4d63473f5 --- /dev/null +++ b/ui/desktop/tests/integration/components/reveal-test.js @@ -0,0 +1,48 @@ +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` + + `); + 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` + + 
+          
+            {
+              "auth": null,
+              "lease_duration": 3600,
+              "lease_id": "",
+              "renewable": false
+            }
+          
+
+ + `); + + assert.notOk(find('details').open); + await click('summary'); + assert.ok(find('details').open); + await click('summary'); + assert.notOk(find('details').open); + }); +});