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

add tile and wider radiocard

Browse Source
This commit is contained in:
dharini committed 2022-01-18 00:00:12 -08:00
1 parent bf09c9b0b8
commit 172c9dde69
8 files changed
+214 -91
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.stories.mdx
+9 -29
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a form radiofield.
```htmlbars
<Rose::Form::Radio::RadioCard
<Rose::Form::Radio::RadioCard::Wide
@label="Yes"
@error={{false}}
@value="yes-agree"
@@ -20,9 +20,9 @@ Renders a form radiofield.
```
<Preview>
<Story name="Basic" height="10rem">{{
<Story name="Wide" height="10rem">{{
template: hbs`
<Rose::Form::Radio::RadioCard
<Rose::Form::Radio::RadioCard::Wide
@label={{label}}
@error={{error}}
@value={{value}}
@@ -32,7 +32,7 @@ Renders a form radiofield.
/>
`,
context: {
label: text('text', 'Radiofield'),
label: text('text', 'AWS'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
@@ -55,49 +55,30 @@ Renders a form radiofield.
```htmlbars
<Rose::Form::Radio::RadioCard
<Rose::Form::Radio::RadioCard::Tile
@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">{{
<Story name="Tile" height="10rem">{{
template: hbs`
<Rose::Form::Radio::RadioCard
@label='Radiofield1'
<Rose::Form::Radio::RadioCard::Tile
@label={{label}}
@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: {
label: text('text', 'AWS Tile'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
@@ -114,7 +95,6 @@ Renders a form radiofield.
},
null
),
inline: boolean('inline', false)
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/radio-card/index.js → addons/rose/addon/components/rose/form/radio/radio-card/tile/index.js
+2 -2
View File
@@ -1,7 +1,7 @@
import RoseFormRadioRadioComponent from '../radio';
import RoseFormRadioRadioComponent from '../../radio';
export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
// =attributes
className = 'rose-form-radio-card';
className = 'rose-form-radio-card-tile';
}
addons/rose/addon/components/rose/form/radio/radio-card/wide/index.js
+7
View File
@@ -0,0 +1,7 @@
import RoseFormRadioRadioComponent from '../../radio';
export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
// =attributes
className = 'rose-form-radio-card-wide';
}
addons/rose/addon/components/rose/form/radio/radio/index.hbs
+3 -4
View File
@@ -1,5 +1,4 @@
<div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
<span class='radio-wrapper'>
<RadioButton
...attributes
@radioClass="rose-form-radio-field"
@@ -11,7 +10,8 @@
@groupValue={{@selectedValue}}
@disabled={{@disabled}}
@changed={{@changed}} />
</span>
<label class="rose-form-radio-label" for={{this.id}}>
{{#if @icon}}
@@ -22,9 +22,8 @@
{{/if}}
{{@label}}
<span class="overlay"></span>
</label>
{{yield}}
</div>
addons/rose/addon/styles/rose/components/form/_radioCard.scss
+188 -53
View File
@@ -1,73 +1,208 @@
.rose-form-radio-card {
box-sizing: content-box;
flex-basis: 7rem;
width: 350px;
flex-direction: column-reverse;
justify-content: space-between;
@use '../../variables/sizing';
@use '../../utilities/type';
.rose-form-radio-card-wide {
position: relative;
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 */
align-items: center;
width: 350px;
justify-content: center;
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;
}
}
.overlay {
position: absolute;
height: 30px;
background-color: #f7f8fa;
width: 348px;
bottom: 1px;
right: 0;
}
.rose-form-radio-label {
width: 350px;
font-style: normal;
font-weight: bold;
font-size: 14px;
color: #000;
width: 350px;
height: 115px;
display: block;
position: absolute;
/* top: 40px; */
padding-top: 30px;
padding-bottom: 70px;
position: relative;
text-align: left;
&::before {
content: "";
padding-left: 40px;
}
&:checked {
background-color: salmon;
}
word-break: break-all;
border: 1px solid #bac1cc;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 2px;
padding: 19px;
box-sizing: border-box;
background-color: #FFFFFF;
}
.rose-form-radio-label:checked {
background: red;
}
.rose-form-radio-field {
position: absolute;
margin-bottom: 3px;
z-index: 1;
bottom: 3px;
&:not(:disabled) {
&:hover {
~ .rose-form-radio-label {
border: 1px solid #6f7682;
}
}
&:checked {
~ .rose-form-radio-label {
background: red;
.overlay {
background-color: #f0f5ff;
}
border: 1px solid #1563ff;
}
}
}
&:disabled {
~ .rose-form-radio-label {
border: 1px solid #dce0e6;
background-color: #fbfbfc;
color: #626873;
}
}
}
&.error {
color: var(--failure);
.rose-form-radio-field {
opacity: 0;
&:not(:disabled):not(:focus) {
~ .rose-form-radio-label {
.overlay {
background-color: #f9ecee;
}
border: 1px solid #c73445;
}
&:checked {
~ .rose-form-radio-label {
&::after {
position: absolute;
bottom: 3px;
right: 161px;
display: block;
width: 1.2rem;
height: 1.2rem;
transform: scale(2);
pointer-events: none;
content: " ";
background: no-repeat 50%/50% 50%;
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'error-checked'
)); /* text-align: center; */
z-index: 2;
}
}
}
}
}
}
}
.rose-form-radio-card-tile {
position: relative;
display: flex;
align-items: center;
width: 240px;
justify-content: center;
.overlay {
position: absolute;
height: 30px;
background-color: #f7f8fa;
width: 238px;
bottom: 1px;
right: 0;
}
.rose-form-radio-label {
font-style: normal;
font-weight: bold;
font-size: 14px;
color: #000;
width: 240px;
height: 145px;
display: block;
position: relative;
text-align: left;
word-break: break-all;
border: 1px solid #bac1cc;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 2px;
padding: 19px;
box-sizing: border-box;
background-color: #FFFFFF;
}
.rose-form-radio-field {
position: absolute;
margin-bottom: 3px;
z-index: 1;
bottom: 3px;
&:not(:disabled) {
&:hover {
~ .rose-form-radio-label {
border: 1px solid #6f7682;
}
}
&:checked {
~ .rose-form-radio-label {
.overlay {
background-color: #f0f5ff;
}
border: 1px solid #1563ff;
}
}
}
&:disabled {
~ .rose-form-radio-label {
border: 1px solid #dce0e6;
background-color: #fbfbfc;
color: #626873;
}
}
}
&.error {
color: var(--failure);
.rose-form-radio-field {
opacity: 0;
&:not(:disabled):not(:focus) {
~ .rose-form-radio-label {
.overlay {
background-color: #f9ecee;
}
border: 1px solid #c73445;
}
&:checked {
~ .rose-form-radio-label {
&::after {
position: absolute;
bottom: 3px;
right: 109px;
display: block;
width: 1.2rem;
height: 1.2rem;
transform: scale(2);
pointer-events: none;
content: " ";
background: no-repeat 50%/50% 50%;
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'error-checked'
)); /* text-align: center; */
z-index: 2;
}
}
}
}
}
}
}
addons/rose/app/components/rose/form/radio/radio-card.js → addons/rose/app/components/rose/form/radio/radio-card/tile/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from 'rose/components/rose/form/radio/radio-card';
export { default } from 'rose/components/rose/form/radio/radio-card/tile';
addons/rose/app/components/rose/form/radio/radio-card/wide/index.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/form/radio/radio-card/wide';
ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+3 -2
View File
@@ -35,13 +35,14 @@
</page.actions>
<page.body>
<Rose::Form::Radio::RadioCard
<Rose::Form::Radio::RadioCard::Wide
@name='Amazon Quipu'
@label='Amazon Quipu'
@value='Amazon Quipu'
@icon='flight-icons/svg/org-16'
@disabled=true
>
</Rose::Form::Radio::RadioCard>
</Rose::Form::Radio::RadioCard::Wide>
{{#if
(or
@model