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

Merge pull request #924 from hashicorp/add-radioCard-support

Browse Source 
feat:  add radiocard support to group
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2022-01-27 08:58:14 -08:00
2 parents a380bccbf1 a011278c41
commit f74e2a6e2c
4 files changed
+176 -5
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.stories.mdx
+2 -2
View File
@@ -21,7 +21,7 @@ Renders a form radiofield in a Wide format.
```
<Preview>
<Story name="Basic Wide" height="10rem">{{
<Story name="Wide" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Card
@label={{label}}
@@ -64,7 +64,7 @@ Renders a form radiofield in a tile format.
```
<Preview>
<Story name="Basic tile" height="10rem">{{
<Story name="Tile" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Card
@label={{label}}
addons/rose/addon/components/rose/form/radio/group/index.hbs
+1
View File
@@ -1,3 +1,4 @@
{{yield (hash
radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed layout=@layout)
)}}
addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+170
View File
@@ -81,3 +81,173 @@ Renders a form radiofield group.
}
}}</Story>
</Preview>
```htmlbars
<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>
```
<Preview>
<Story name="Card: Tile" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Group
@disabled={{disabled}}
@name={{name}}
@selectedValue={{selectedValue}}
@changed={{changed}}
as |radioGroup|
>
<radioGroup.card
@label={{firstFieldLabel}}
@value={{firstFieldValue}}
@icon={{firstFieldIcon}}
@layout='tile'
/>
<radioGroup.card
@label={{secondFieldLabel}}
@value={{secondFieldValue}}
@icon={{secondFieldIcon}}
@layout="tile"
/>
<radioGroup.card
@label={{thirdFieldLabel}}
@value={{thirdFieldValue}}
@icon={{thirdFieldIcon}}
@layout="tile"
/>
</Rose::Form::Radio::Group>
`,
context: {
name: text('name', 'mustagree'),
disabled: boolean('disabled', false),
selectedValue: text('selectedValue', 'disagree'),
firstFieldLabel: text('first label', 'Agree'),
firstFieldValue: text('first value', 'agree'),
firstFieldIcon: select(
'firstFieldIcon',
{
'none': null,
'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
},
null
),
secondFieldIcon: select(
'secondFieldIcon',
{
'none': null,
'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
},
null
),
thirdFieldIcon: select(
'thirdFieldIcon',
{
'none': null,
'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
},
null
),
secondFieldLabel: text('second label', 'Maybe'),
secondFieldValue: text('second value', 'maybe'),
thirdFieldLabel: text('third label', 'Disagree'),
thirdFieldValue: text('third value', 'disagree'),
changed: action('changed')
}
}}</Story>
</Preview>
```htmlbars
<Rose::Form::Radio::Group
@disabled={{false}}
@name={{name}}
@selectedValue="disagree"
@changed={{fn}}
@inline={{false}}
as |radioGroup|
>
<radioGroup.Card
@label="Agree"
@value="agree"
@layout='wide'
/>
<radioGroup.Card
@label="disagree"
@value="disagree"
@layout='wide'
/>
</Rose::Form::Radio::Group>
```
<Preview>
<Story name="Card: Wide" height="10rem">{{
template: hbs`
<Rose::Form::Radio::Group
@disabled={{disabled}}
@name={{name}}
@selectedValue={{selectedValue}}
@changed={{changed}}
as |radioGroup|
>
<radioGroup.card
@label={{firstFieldLabel}}
@value={{firstFieldValue}}
@icon={{firstFieldIcon}}
@layout="wide"
/>
<radioGroup.card
@label={{secondFieldLabel}}
@value={{secondFieldValue}}
@layout="wide"
/>
<radioGroup.card
@label={{thirdFieldLabel}}
@value={{thirdFieldValue}}
@layout="wide"
/>
</Rose::Form::Radio::Group>
`,
context: {
name: text('name', 'mustagree'),
disabled: boolean('disabled', false),
selectedValue: text('selectedValue', 'disagree'),
firstFieldLabel: text('first label', 'Agree'),
firstFieldValue: text('first value', 'agree'),
firstFieldIcon: select(
'firstFieldIcon',
{
'none': null,
'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
},
null
),
secondFieldLabel: text('second label', 'Maybe'),
secondFieldValue: text('second value', 'maybe'),
thirdFieldLabel: text('third label', 'Disagree'),
thirdFieldValue: text('third value', 'disagree'),
changed: action('changed')
}
}}</Story>
</Preview>
addons/rose/addon/styles/rose/components/form/_radio-card.scss
+3 -3
View File
@@ -58,9 +58,10 @@ $radio-svg: (
}
}
position: relative;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
margin: $size-m $size-xs $size-xl 0;
.radio-card-overlay {
position: absolute;
@@ -81,8 +82,7 @@ $radio-svg: (
display: block;
position: relative;
text-align: left;
word-break: break-all;
border: $size-xxxxs solid var(--ui-gray-subtler-6);
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;