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

more updates

Browse Source
This commit is contained in:
dharini committed 2022-01-16 16:37:55 -08:00
1 parent c807af02f4
commit bf09c9b0b8
6 files changed
+194 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/form/radio/radio-card/index.js
+1 -1
View File
@@ -4,4 +4,4 @@ export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioC
// =attributes
className = 'rose-form-radio-card';
}
}
addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
+120
View File
@@ -0,0 +1,120 @@
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/RadioCard" component="Form/Radio/Radio/RadioCard" />
# Form Radiofield
Renders a form radiofield.
```htmlbars
<Rose::Form::Radio::RadioCard
@label="Yes"
@error={{false}}
@value="yes-agree"
@selectedValue="yes-agree"
@disabled={{false}}
@changed={{fn}}
/>
```
<Preview>
<Story name="Basic" height="10rem">{{
template: hbs`
<Rose::Form::Radio::RadioCard
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
/>
`,
context: {
label: text('text', 'Radiofield'),
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'
),
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>
```htmlbars
<Rose::Form::Radio::RadioCard
@label="Yes"
@error={{false}}
@value="yes-agree"
@selectedValue="yes-agree"
@disabled={{false}}
@changed={{fn}}
@inline={{true}}
/>
```
<Preview>
<Story name="Radio with inline style" height="10rem">{{
template: hbs`
<Rose::Form::Radio::RadioCard
@label='Radiofield1'
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
/>
<Rose::Form::Radio::RadioCard
@label='Radiofield2'
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
/>
<Rose::Form::Radio::RadioCard
@label='Radiofield3'
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
/>
`,
context: {
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'
),
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
),
inline: boolean('inline', false)
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/radio/index.hbs
+2 -2
View File
@@ -1,5 +1,5 @@
<div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
<span class='radio-wrapper'>
<RadioButton
...attributes
@radioClass="rose-form-radio-field"
@@ -11,7 +11,7 @@
@groupValue={{@selectedValue}}
@disabled={{@disabled}}
@changed={{@changed}} />
</span>
<label class="rose-form-radio-label" for={{this.id}}>
{{#if @icon}}
addons/rose/addon/styles/rose/components/form/_index.scss
+1 -1
View File
@@ -6,4 +6,4 @@
@import 'select';
@import 'radio';
@import 'fieldset';
@import 'radioCard';
@import 'radioCard';
addons/rose/addon/styles/rose/components/form/_radioCard.scss
+69 -18
View File
@@ -1,22 +1,73 @@
.rose-form-radio-card {
position: relative;
width: 370px;
height: 115px;
background: #FFFFFF;
border: 1px solid #BAC1CC;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 2px;
font-size: 14px;
font-weight: bold;
.rose-form-radio-field {
top: 89px;
right: 176px;
position: absolute;
box-sizing: content-box;
flex-basis: 7rem;
width: 350px;
flex-direction: column-reverse;
justify-content: space-between;
display: flex;
border-radius: 2px;
text-align: center;
color: #6f7682;
font-weight: 600;
line-height: 1;
font-size: 12px;
border: 1px solid #bac1cc;
min-height: 115px;
/* Elevation / Low */
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 2px;
.radio-wrapper {
background: #f7f8fa;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
.rose-form-radio-field {
&:checked {
.radio-wrapper {
background: red;
}
}
}
}
&:hover {
border: 1px solid #6f7682;
.radio-wrapper {
background: #f7f8fa;
}
}
.rose-form-radio-label {
color: #000;
margin-top: 16px;
display: block;
margin-left: 48px;
width: 350px;
font-style: normal;
font-weight: bold;
font-size: 14px;
color: #000;
display: block;
position: absolute;
/* top: 40px; */
padding-top: 30px;
padding-bottom: 70px;
text-align: left;
&::before {
content: "";
padding-left: 40px;
}
&:checked {
background-color: salmon;
}
}
}
.rose-form-radio-label:checked {
background: red;
}
.rose-form-radio-field {
&:not(:disabled) {
&:checked {
~ .rose-form-radio-label {
background: red;
}
}
}
}
}
ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+1
View File
@@ -39,6 +39,7 @@
@name='Amazon Quipu'
@label='Amazon Quipu'
@value='Amazon Quipu'
@icon='flight-icons/svg/org-16'
>
</Rose::Form::Radio::RadioCard>
{{#if