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

refactor: 💡 refactor component layouts

Browse Source
This commit is contained in:
dharini committed 2022-01-23 21:13:00 -08:00
1 parent dd8cb5a77e
commit e374213553
10 files changed
+171 -128
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/form/radio/card/index.js
+7
View File
@@ -0,0 +1,7 @@
import RoseFormRadioRadioComponent from '../radio';
export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
// =attributes
layout = this.args.layout;
className = `rose-form-radio-card-${this.layout}`;
}
addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+110
View File
@@ -0,0 +1,110 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Radio/Radio/Card" component="Form/Radio/Radio/Card" />
# Form Radiofield in a wide format
Renders a form radiofield in a Wide format.
```htmlbars
<Rose::Form::Radio::Card
@label="Yes"
@error={{false}}
@value="yes-agree"
@selectedValue="yes-agree"
@disabled={{false}}
@changed={{fn}}
@layout='wide'
/>
```
<Preview>
<Story name="Basic Wide" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Card
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@helperText={{helperText}}
@layout='wide'
/>
`,
context: {
label: text('text', 'AWS'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
'selectedValue',
'value and selectedValue must match to select radiofield'
),
helperText: text('helperText', 'Record financial transactions using'),
disabled: boolean('disabled', false),
icon: select(
'icon',
{
'none': null,
'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
},
null
),
}
}}</Story>
</Preview>
Renders a form radiofield in a tile format.
```htmlbars
<Rose::Form::Radio::Card
@label="Yes"
@error={{false}}
@value="yes-agree"
@selectedValue="yes-agree"
@disabled={{false}}
@changed={{fn}}
@layout='tile'
/>
```
<Preview>
<Story name="Basic tile" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Card
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@helperText={{helperText}}
@layout='tile'
/>
`,
context: {
label: text('text', 'AWS'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
'selectedValue',
'value and selectedValue must match to select radiofield'
),
helperText: text('helperText', 'Record financial transactions using'),
disabled: boolean('disabled', false),
icon: select(
'icon',
{
'none': null,
'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
},
null
),
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/card/tile/index.js
-7
View File
@@ -1,7 +0,0 @@
import RoseFormRadioRadioComponent from '../../radio';
export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
// =attributes
className = 'rose-form-radio-card-tile';
}
addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
-56
View File
@@ -1,56 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Radio/Radio/Card/Tile" component="Form/Radio/Radio/Card/Tile" />
# Form RadioCard field in tile format
Renders a form radioCard field in a tile format.
```htmlbars
<Rose::Form::Radio::Card::Tile
@label="Yes"
@error={{false}}
@value="yes-agree"
@selectedValue="yes-agree"
@disabled={{false}}
@changed={{fn}}
/>
```
<Preview>
<Story name="Tile" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Card::Tile
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@helperText={{helperText}}
/>
`,
context: {
label: text('text', 'AWS Tile'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
'selectedValue',
'value and selectedValue must match to select radiofield'
),
helperText: text('helperText', 'Record financial transactions using'),
disabled: boolean('disabled', false),
icon: select(
'icon',
{
'none': null,
'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
},
null
),
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/card/wide/index.js
-7
View File
@@ -1,7 +0,0 @@
import RoseFormRadioRadioComponent from '../../radio';
export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
// =attributes
className = 'rose-form-radio-card-wide';
}
addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
-56
View File
@@ -1,56 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Radio/Radio/Card/Wide" component="Form/Radio/Radio/Card/Wide" />
# Form Radiofield in a wide format
Renders a form radiofield in a Wide format.
```htmlbars
<Rose::Form::Radio::Card::Wide
@label="Yes"
@error={{false}}
@value="yes-agree"
@selectedValue="yes-agree"
@disabled={{false}}
@changed={{fn}}
/>
```
<Preview>
<Story name="Wide" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Card::Wide
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@helperText={{helperText}}
/>
`,
context: {
label: text('text', 'AWS'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
'selectedValue',
'value and selectedValue must match to select radiofield'
),
helperText: text('helperText', 'Record financial transactions using'),
disabled: boolean('disabled', false),
icon: select(
'icon',
{
'none': null,
'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
},
null
),
}
}}</Story>
</Preview>
addons/rose/app/components/rose/form/radio/card.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/form/radio/card';
addons/rose/app/components/rose/form/radio/card/tile/index.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/form/radio/card/tile';
addons/rose/app/components/rose/form/radio/card/wide/index.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/form/radio/card/wide';
addons/rose/tests/integration/components/rose/form/radio/card-test.js
+53
View File
@@ -0,0 +1,53 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/form/radio/card', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Form::Radio::Card />`);
assert.ok(await find('input'));
assert.equal(await find('input').type, 'radio');
});
test('it renders in a tile format when tile layout is applied', async function (assert) {
await render(hbs`<Rose::Form::Radio::Card @layout="tile"/>`);
assert.ok(await find('.rose-form-radio-card-tile'));
});
test('it supports an icon', async function (assert) {
await render(
hbs`<Rose::Form::Radio::Card @icon="flight-icons/svg/user-circle-16" />`
);
assert.ok(find('svg'));
});
test('it is checked when @value and @selectedValue values match', async function (assert) {
await render(
hbs`<Rose::Form::Radio::Card @value="tree" @selectedValue="tree"/>`
);
assert.true(await find('input').checked);
});
test('it is not disabled by default', async function (assert) {
await render(hbs`<Rose::Form::Radio::Card />`);
assert.false(await find('input').disabled);
});
test('it is not in error state by default', async function (assert) {
await render(hbs`<Rose::Form::Radio::Card />`);
assert.notOk(await find('.error'));
});
test('it is disabled when @disabled={{true}}', async function (assert) {
await render(hbs`<Rose::Form::Radio::Card @disabled={{true}}/>`);
assert.true(await find('input').disabled);
});
test('it is in error state when @error={{true}}', async function (assert) {
await render(hbs`<Rose::Form::Radio::Card @error={{true}} />`);
assert.ok(await find('.error'));
});
});