chore: 🤖 remove rose radiocard and styles (#1521)
chore: 🤖 remove rose radio card and styles
This commit is contained in:
Dharini Jeeva authored and 
GitHub committed
1 parent
ed9e674823
commit
92db4d4947
11 files changed
+46
-544
No files matched your search
@@ -1,25 +0,0 @@
|
||||
import RoseFormRadioRadioComponent from '../radio';
|
||||
import { deprecate } from '@ember/debug';
|
||||
|
||||
export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
|
||||
// =attributes
|
||||
layout = this.args.layout;
|
||||
className = `rose-form-radio-card ${this.layout}`;
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
deprecate(
|
||||
`Rose Form/Radio/Card component is deprecated, use HDS Form/RadioCard instead. For more info, refer to `,
|
||||
false,
|
||||
{
|
||||
id: 'rose.form.radio.card',
|
||||
until: '4.8.0',
|
||||
for: 'rose',
|
||||
since: {
|
||||
enabled: '3.28.8',
|
||||
},
|
||||
url: 'https://boundary-ui-storybook.vercel.app/?path=/docs/rose-form-radio-radio-card--card',
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,12 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
<Meta title="Rose/Form/Radio/Card" component="RadioCard" />
|
||||
<Meta title="Rose/Form/Radio/Card(removed)" component="RadioCard" />
|
||||
|
||||
# HDS::Form::RadioCard (Recommended)
|
||||
# RadioCard (removed)
|
||||
|
||||
> **_NOTE:_** Replaces the deprecated Rose/Form/Radio/Card.
|
||||
|
||||
Refer to the [HDS Form::RadioCard
|
||||
documentation](https://design-system-components-hashicorp.vercel.app/components/form/radio-card)
|
||||
for a complete overview
|
||||
Rose/Form/Select has been removed in favor of
|
||||
[HDS::Form::RadioCard](https://design-system-components-hashicorp.vercel.app/components/form/radio-card).
|
||||
|
||||
```handlebars
|
||||
<Hds::Form::RadioCard @checked={{true}} as |R|>
|
||||
@@ -44,78 +41,3 @@ export const HDSTemplate = (args) => ({
|
||||
{HDSTemplate.bind({})}
|
||||
</Story>
|
||||
</Preview>
|
||||
|
||||
# Rose/Form/Radio/Card (Deprecated)
|
||||
|
||||
Rose/Form/Radio/Card has been deprecated in favor of [HDS::Form::RadioCard](https://design-system-components-hashicorp.vercel.app/components/form/radio-card)
|
||||
|
||||
### <Rose::Form::Radio::Card> usage:
|
||||
|
||||
# Form Radiofield in a wide format
|
||||
|
||||
Renders a form radiofield in a Wide format.
|
||||
|
||||
```handlebars
|
||||
<Rose::Form::Radio::Card
|
||||
@label='Yes'
|
||||
@error={{false}}
|
||||
@value='yes-agree'
|
||||
@selectedValue='yes-agree'
|
||||
@disabled={{false}}
|
||||
@changed={{fn}}
|
||||
@layout='wide'
|
||||
/>
|
||||
```
|
||||
|
||||
Renders a form radiofield in a tile format.
|
||||
|
||||
```handlebars
|
||||
<Rose::Form::Radio::Card
|
||||
@label='Yes'
|
||||
@error={{false}}
|
||||
@value='yes-agree'
|
||||
@selectedValue='yes-agree'
|
||||
@disabled={{false}}
|
||||
@changed={{fn}}
|
||||
@layout='tile'
|
||||
/>
|
||||
```
|
||||
|
||||
export const Template = (args) => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Radio::Card
|
||||
@label={{label}}
|
||||
@error={{error}}
|
||||
@value={{value}}
|
||||
@selectedValue={{selectedValue}}
|
||||
@disabled={{disabled}}
|
||||
@icon={{icon}}
|
||||
@helperText={{helperText}}
|
||||
@layout={{Layout}}
|
||||
/>`,
|
||||
context: args,
|
||||
});
|
||||
|
||||
<Preview>
|
||||
<Story
|
||||
name="Rose Card"
|
||||
height="10rem"
|
||||
args={{
|
||||
label: 'Azure',
|
||||
error: false,
|
||||
value: 'value and selectedValue must match to select radiofield',
|
||||
selectedValue: 'value and selectedValue must match to select radiofield',
|
||||
helperText: 'Record financial transactions using',
|
||||
disabled: false,
|
||||
}}
|
||||
argTypes={{
|
||||
Layout: {
|
||||
control: 'inline-radio',
|
||||
options: ['wide', 'tile'],
|
||||
name: 'layout',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Preview>
|
||||
@@ -8,13 +8,5 @@
|
||||
changed=@changed
|
||||
inline=@inline
|
||||
)
|
||||
card=(component
|
||||
'rose/form/radio/card'
|
||||
name=@name
|
||||
selectedValue=@selectedValue
|
||||
disabled=@disabled
|
||||
changed=@changed
|
||||
layout=@layout
|
||||
)
|
||||
)
|
||||
}}
|
||||
@@ -75,9 +75,9 @@ export const Template = (args) => ({
|
||||
</Story>
|
||||
</Preview>
|
||||
|
||||
# HDS::Form::RadioCard::Group (Recommended)
|
||||
# HDS::Form::RadioCard::Group
|
||||
|
||||
> **_NOTE:_** Replaces the deprecated Rose/Form/Radio/Group/Card.
|
||||
> **_NOTE:_** Replaces the removed Rose/Form/Radio/Group/Card.
|
||||
|
||||
```handlebars
|
||||
<Hds::Form::RadioCard::Group
|
||||
@@ -144,83 +144,3 @@ export const HDSTemplate = (args) => ({
|
||||
{HDSTemplate.bind({})}
|
||||
</Story>
|
||||
</Preview>
|
||||
|
||||
# Rose::Form::Radio::Group::Card (Deprecated)
|
||||
|
||||
```handlebars
|
||||
<Rose::Form::Radio::Group
|
||||
@disabled={{false}}
|
||||
@name={{name}}
|
||||
@selectedValue='disagree'
|
||||
@changed={{fn}}
|
||||
@inline={{false}}
|
||||
as |radioGroup|
|
||||
>
|
||||
<radioGroup.Card
|
||||
@label='Agree'
|
||||
@value='agree'
|
||||
@layout='tile'
|
||||
@helperText='dwsd'
|
||||
/>
|
||||
<radioGroup.Card
|
||||
@label='disagree'
|
||||
@value='disagree'
|
||||
@layout='tile'
|
||||
@helperText='dwsd'
|
||||
/>
|
||||
<radioGroup.Card
|
||||
@label='maybe'
|
||||
@value='maybe'
|
||||
@layout='tile'
|
||||
@helperText='dwsd'
|
||||
/>
|
||||
</Rose::Form::Radio::Group>
|
||||
```
|
||||
|
||||
export const RoseTemplate = (args) => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Radio::Group
|
||||
@disabled={{disabled}}
|
||||
@name={{name}}
|
||||
@selectedValue={{selectedValue}}
|
||||
@changed={{changed}}
|
||||
as |radioGroup|
|
||||
>
|
||||
<radioGroup.card
|
||||
@label={{firstFieldLabel}}
|
||||
@value={{firstFieldValue}}
|
||||
@icon={{firstFieldIcon}}
|
||||
/>
|
||||
<radioGroup.card @label={{secondFieldLabel}} @value={{secondFieldValue}} />
|
||||
</Rose::Form::Radio::Group>`,
|
||||
context: args,
|
||||
});
|
||||
|
||||
<Preview>
|
||||
<Story
|
||||
name="Rose Basic"
|
||||
height="10rem"
|
||||
args={{
|
||||
name: 'mustagree',
|
||||
disabled: false,
|
||||
selectedValue: 'disagree',
|
||||
firstFieldLabel: 'Agree',
|
||||
firstFieldValue: 'agree',
|
||||
secondFieldLabel: 'Disagree',
|
||||
secondFieldValue: 'disagree',
|
||||
firstFieldIcon: 'flight-icons/svg/org-16',
|
||||
}}
|
||||
argTypes={{
|
||||
firstFieldIcon: {
|
||||
control: 'select',
|
||||
options: [
|
||||
'flight-icons/svg/org-16',
|
||||
'flight-icons/svg/clipboard-copy-16',
|
||||
],
|
||||
},
|
||||
changed: { action: 'changed' },
|
||||
}}
|
||||
>
|
||||
{RoseTemplate.bind({})}
|
||||
</Story>
|
||||
</Preview>
|
||||
@@ -6,4 +6,3 @@
|
||||
@import 'select';
|
||||
@import 'radio';
|
||||
@import 'fieldset';
|
||||
@import 'radio-card';
|
||||
@@ -1,240 +0,0 @@
|
||||
@use '../../variables/sizing';
|
||||
@use '../../utilities/type';
|
||||
@use '../../variables/typography';
|
||||
|
||||
$size-xxl: sizing.rems(xxl); // 48
|
||||
$size-xl: sizing.rems(xl); // 36
|
||||
$size-l: sizing.rems(l); // 24
|
||||
$size-m: sizing.rems(m); // 16
|
||||
$size-s: sizing.rems(s); // 12
|
||||
$size-xs: sizing.rems(xs); // 8
|
||||
$size-xxs: sizing.rems(xxs); // 4
|
||||
$size-xxxs: sizing.rems(xxxs); // 2
|
||||
$size-xxxxs: sizing.rems(xxxxs); // 1
|
||||
|
||||
$radio-svg: (
|
||||
'default':
|
||||
"<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'hover':
|
||||
"<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'focus':
|
||||
"<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'checked':
|
||||
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
|
||||
'disabled':
|
||||
"<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'disabled-checked':
|
||||
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
|
||||
'error':
|
||||
"<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'error-checked':
|
||||
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
|
||||
);
|
||||
|
||||
.rose-form-radio-card {
|
||||
$card-wide-width: $size-m * 10;
|
||||
$card-tile-width: $size-m * 7.25;
|
||||
$border-width: $size-xxxs * 2;
|
||||
|
||||
&.wide {
|
||||
width: ($size-m) * 20;
|
||||
}
|
||||
|
||||
&.tile {
|
||||
width: ($size-m) * 15;
|
||||
|
||||
.rose-icon {
|
||||
--size: #{$size-xl};
|
||||
|
||||
padding: $size-xxxs;
|
||||
}
|
||||
|
||||
.rose-form-radio-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: $size-m * 9;
|
||||
|
||||
&::after {
|
||||
left: $card-tile-width - $border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: $size-m $size-xs $size-m 0;
|
||||
|
||||
.radio-card-overlay {
|
||||
position: absolute;
|
||||
height: $size-l + $size-xxs;
|
||||
background-color: var(--ui-gray-subtler-5);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-bottom-left-radius: $size-xxxs;
|
||||
border-bottom-right-radius: $size-xxxs;
|
||||
}
|
||||
|
||||
.rose-form-radio-label {
|
||||
@include type.type(s, bold);
|
||||
|
||||
width: ($size-m) * 23;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
border: $size-xxxxs solid var(--ui-gray-subtler-2);
|
||||
box-shadow: 0 $size-xxs $size-xxs
|
||||
rgba(var(--stark-components), var(--opacity-2));
|
||||
border-radius: $size-xxs;
|
||||
padding: $size-s $size-m ($size-xl + $size-m);
|
||||
box-sizing: border-box;
|
||||
|
||||
.rose-form-helper-text {
|
||||
@include type.type(xs, normal);
|
||||
|
||||
padding-top: $size-xs;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: $size-xxs + $size-xxxxs;
|
||||
right: $card-wide-width - $border-width;
|
||||
display: block;
|
||||
width: $size-m;
|
||||
height: $size-m;
|
||||
transform: scale(2);
|
||||
pointer-events: none;
|
||||
content: ' ';
|
||||
background: no-repeat 50%/50% 50%;
|
||||
background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
|
||||
}
|
||||
}
|
||||
|
||||
.rose-form-radio-field {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: $size-xs;
|
||||
opacity: 0;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:focus {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'focus'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ .rose-form-radio-label {
|
||||
border: $size-xxxxs solid var(--ui-gray);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'checked'
|
||||
));
|
||||
}
|
||||
|
||||
.radio-card-overlay {
|
||||
background-color: var(--action-subtler-1h);
|
||||
|
||||
.ember-application.rose-theme-light & {
|
||||
background-color: var(--action-subtler-1h);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--action-subtler-1);
|
||||
}
|
||||
|
||||
.ember-application.rose-theme-dark & {
|
||||
background-color: var(--action-subtler-1);
|
||||
}
|
||||
}
|
||||
|
||||
border: $size-xxxxs solid var(--info-subtler-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .rose-form-radio-label {
|
||||
border: $size-xxxxs solid var(--ui-border-subtler-1);
|
||||
background-color: var(--ui-gray-subtler-6);
|
||||
color: var(--ui-gray-starker-1);
|
||||
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'disabled'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'disabled-checked'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.rose-form-radio-field {
|
||||
&:not(:disabled, :focus) {
|
||||
~ .rose-form-radio-label {
|
||||
color: var(--ui-gray);
|
||||
border: $size-xxxxs solid var(--failure);
|
||||
|
||||
.radio-card-overlay {
|
||||
background-color: var(--failure-subtler-2);
|
||||
}
|
||||
|
||||
.rose-form-helper-text.error {
|
||||
color: var(--ui-gray);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'error'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .rose-form-radio-label {
|
||||
color: var(--ui-gray);
|
||||
border: $size-xxxxs solid var(--failure);
|
||||
|
||||
.radio-card-overlay {
|
||||
background-color: var(--failure-subtler-2);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'error-checked'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
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.strictEqual(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('.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'));
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user