@spscommerce/ds-react 6.4.1 → 6.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +601 -194
- package/lib/index.es.js +588 -155
- package/lib/radio-button/SpsRadioButton.d.ts +2 -1
- package/package.json +11 -11
package/lib/index.es.js
CHANGED
|
@@ -2332,7 +2332,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
|
|
|
2332
2332
|
const key = item.textKey;
|
|
2333
2333
|
return item.value[key].toLowerCase().charAt([0]) === event.key.toLocaleLowerCase();
|
|
2334
2334
|
}
|
|
2335
|
-
return item.value.toLowerCase().charAt([0]) === event.key.toLocaleLowerCase();
|
|
2335
|
+
return item.value.toString().toLowerCase().charAt([0]) === event.key.toLocaleLowerCase();
|
|
2336
2336
|
});
|
|
2337
2337
|
if (newIndex > -1) {
|
|
2338
2338
|
setHighlightedOptionIndex(newIndex);
|
|
@@ -25442,8 +25442,12 @@ Object.assign(SpsLabel, {
|
|
|
25442
25442
|
displayName: "SpsLabel"
|
|
25443
25443
|
});
|
|
25444
25444
|
const SpsLabelExamples = {
|
|
25445
|
+
general: {
|
|
25446
|
+
label: "General Usage",
|
|
25447
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "In almost all cases, input fields should be paired with a label describing the value to be entered into the field. Certain labels can be accompanied by icons to provide additional information or context about that particular field.")
|
|
25448
|
+
},
|
|
25445
25449
|
basic: {
|
|
25446
|
-
label: "Basic",
|
|
25450
|
+
label: "Basic Label",
|
|
25447
25451
|
examples: {
|
|
25448
25452
|
basic: {
|
|
25449
25453
|
react: code`
|
|
@@ -25465,31 +25469,9 @@ const SpsLabelExamples = {
|
|
|
25465
25469
|
}
|
|
25466
25470
|
}
|
|
25467
25471
|
},
|
|
25468
|
-
|
|
25469
|
-
label: "
|
|
25470
|
-
|
|
25471
|
-
basic: {
|
|
25472
|
-
react: code`
|
|
25473
|
-
function DemoComponent() {
|
|
25474
|
-
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
25475
|
-
companyName: ""
|
|
25476
|
-
});
|
|
25477
|
-
|
|
25478
|
-
return <>
|
|
25479
|
-
<SpsLabel for={formMeta.fields.companyName} stronglySuggested>
|
|
25480
|
-
Company Name
|
|
25481
|
-
</SpsLabel>
|
|
25482
|
-
<SpsTextInput value={formValue.companyName}
|
|
25483
|
-
formMeta={formMeta.fields.companyName}
|
|
25484
|
-
></SpsTextInput>
|
|
25485
|
-
</>;
|
|
25486
|
-
}
|
|
25487
|
-
`
|
|
25488
|
-
}
|
|
25489
|
-
}
|
|
25490
|
-
},
|
|
25491
|
-
c_required: {
|
|
25492
|
-
label: "Required",
|
|
25472
|
+
required: {
|
|
25473
|
+
label: "Required Labels",
|
|
25474
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "Many forms contain input fields that require values in order for the form to be submitted. Such fields have an accompanying red asterisk to the left of the Label."),
|
|
25493
25475
|
examples: {
|
|
25494
25476
|
basic: {
|
|
25495
25477
|
react: code`
|
|
@@ -25516,11 +25498,12 @@ const SpsLabelExamples = {
|
|
|
25516
25498
|
}
|
|
25517
25499
|
}
|
|
25518
25500
|
},
|
|
25519
|
-
|
|
25520
|
-
label: "
|
|
25501
|
+
icons: {
|
|
25502
|
+
label: "Labels with Icons",
|
|
25503
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "Icons can be used with labels to reveal tooltips with additional contextual information or help text. Icons remain visible at all times, even when an input field is in an error state. For more information about error states view the Validation section of this page."),
|
|
25521
25504
|
examples: {
|
|
25522
|
-
|
|
25523
|
-
description: "
|
|
25505
|
+
infoIcon: {
|
|
25506
|
+
description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Info Icons"), /* @__PURE__ */ React.createElement("p", null, "Info Icons reveal a tooltip providing more information, such as instructions on correct formatting required for the input field.")),
|
|
25524
25507
|
react: code`
|
|
25525
25508
|
function DemoComponent() {
|
|
25526
25509
|
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
@@ -25529,7 +25512,8 @@ const SpsLabelExamples = {
|
|
|
25529
25512
|
|
|
25530
25513
|
return <>
|
|
25531
25514
|
<SpsLabel for={formMeta.fields.companyName}
|
|
25532
|
-
|
|
25515
|
+
helpIcon={SpsIcon.INFO}
|
|
25516
|
+
help="This is an informative and instructive tooltip."
|
|
25533
25517
|
>
|
|
25534
25518
|
Company Name
|
|
25535
25519
|
</SpsLabel>
|
|
@@ -25540,18 +25524,29 @@ const SpsLabelExamples = {
|
|
|
25540
25524
|
}
|
|
25541
25525
|
`
|
|
25542
25526
|
},
|
|
25543
|
-
|
|
25544
|
-
description: "
|
|
25527
|
+
settingsIcon: {
|
|
25528
|
+
description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Settings Icons"), /* @__PURE__ */ React.createElement("p", null, "The gear icon can be used to launch a ", /* @__PURE__ */ React.createElement(NavigateTo, {
|
|
25529
|
+
to: "modal"
|
|
25530
|
+
}, "Modal"), " window or ", /* @__PURE__ */ React.createElement(NavigateTo, {
|
|
25531
|
+
to: "focused-task"
|
|
25532
|
+
}, "Focused Task View"), " containing settings or preferences related to a specific input field.")),
|
|
25545
25533
|
react: code`
|
|
25546
25534
|
function DemoComponent() {
|
|
25547
25535
|
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
25548
25536
|
companyName: ""
|
|
25549
25537
|
});
|
|
25550
25538
|
|
|
25539
|
+
function iconClickHandler(event) {
|
|
25540
|
+
// screen out non-icon clicks
|
|
25541
|
+
if (event.target.tagName !== "I") return;
|
|
25542
|
+
alert("settings action triggered");
|
|
25543
|
+
}
|
|
25544
|
+
|
|
25551
25545
|
return <>
|
|
25552
25546
|
<SpsLabel for={formMeta.fields.companyName}
|
|
25553
25547
|
help="Pretend there's something helpful written here."
|
|
25554
|
-
helpIcon={SpsIcon.
|
|
25548
|
+
helpIcon={SpsIcon.GEAR}
|
|
25549
|
+
onClick={iconClickHandler}
|
|
25555
25550
|
>
|
|
25556
25551
|
Company Name
|
|
25557
25552
|
</SpsLabel>
|
|
@@ -25561,11 +25556,34 @@ const SpsLabelExamples = {
|
|
|
25561
25556
|
</>;
|
|
25562
25557
|
}
|
|
25563
25558
|
`
|
|
25559
|
+
},
|
|
25560
|
+
customIcons: {
|
|
25561
|
+
description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Custom Icons"), /* @__PURE__ */ React.createElement("p", null, "The icon can be customized, but only in the case when the Info Icon does not properly represent the tooltip message.")),
|
|
25562
|
+
react: code`
|
|
25563
|
+
function DemoComponent() {
|
|
25564
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
25565
|
+
companyName: ""
|
|
25566
|
+
});
|
|
25567
|
+
|
|
25568
|
+
return <>
|
|
25569
|
+
<SpsLabel for={formMeta.fields.companyName}
|
|
25570
|
+
helpIcon={SpsIcon.BELL}
|
|
25571
|
+
help="This is a custom icon"
|
|
25572
|
+
>
|
|
25573
|
+
Company Name
|
|
25574
|
+
</SpsLabel>
|
|
25575
|
+
<SpsTextInput formMeta={formMeta.fields.companyName}
|
|
25576
|
+
value={formValue.companyName}
|
|
25577
|
+
></SpsTextInput>
|
|
25578
|
+
</>
|
|
25579
|
+
}
|
|
25580
|
+
`
|
|
25564
25581
|
}
|
|
25565
25582
|
}
|
|
25566
25583
|
},
|
|
25567
|
-
|
|
25584
|
+
validation: {
|
|
25568
25585
|
label: "Validation",
|
|
25586
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "When an input field fails validation for any reason, an Error State style is applied, which includes an Error Icon tot he left of the label that reveals instructions for correcting the error."),
|
|
25569
25587
|
examples: {
|
|
25570
25588
|
basic: {
|
|
25571
25589
|
react: code`
|
|
@@ -25596,64 +25614,6 @@ const SpsLabelExamples = {
|
|
|
25596
25614
|
`
|
|
25597
25615
|
}
|
|
25598
25616
|
}
|
|
25599
|
-
},
|
|
25600
|
-
f_combinations: {
|
|
25601
|
-
label: "Combinations",
|
|
25602
|
-
examples: {
|
|
25603
|
-
a_combo1: {
|
|
25604
|
-
react: code`
|
|
25605
|
-
function DemoComponent() {
|
|
25606
|
-
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
25607
|
-
companyName: "Target"
|
|
25608
|
-
}, {
|
|
25609
|
-
"companyName": [SpsValidators.minLength(7)]
|
|
25610
|
-
});
|
|
25611
|
-
|
|
25612
|
-
React.useEffect(() => {
|
|
25613
|
-
// Make validation error visible for the purpose of this demo
|
|
25614
|
-
formMeta.markAsDirty();
|
|
25615
|
-
}, []);
|
|
25616
|
-
|
|
25617
|
-
return <>
|
|
25618
|
-
<SpsLabel for={formMeta.fields.companyName}
|
|
25619
|
-
stronglySuggested
|
|
25620
|
-
errors={() => formMeta.fields.companyName.hasError("minLength")
|
|
25621
|
-
&& "Company Name must be at least 7 characters."}
|
|
25622
|
-
>
|
|
25623
|
-
Company Name
|
|
25624
|
-
</SpsLabel>
|
|
25625
|
-
<SpsTextInput formMeta={formMeta.fields.companyName}
|
|
25626
|
-
value={formValue.companyName}
|
|
25627
|
-
></SpsTextInput>
|
|
25628
|
-
</>;
|
|
25629
|
-
}
|
|
25630
|
-
`
|
|
25631
|
-
},
|
|
25632
|
-
b_combo2: {
|
|
25633
|
-
react: code`
|
|
25634
|
-
function DemoComponent() {
|
|
25635
|
-
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
25636
|
-
companyName: ""
|
|
25637
|
-
}, {
|
|
25638
|
-
"companyName": [SpsValidators.required]
|
|
25639
|
-
});
|
|
25640
|
-
|
|
25641
|
-
return <>
|
|
25642
|
-
<SpsLabel for={formMeta.fields.companyName}
|
|
25643
|
-
help="Pretend there's something helpful written here."
|
|
25644
|
-
errors={() => formMeta.fields.companyName.hasError("required")
|
|
25645
|
-
&& "Please enter a company name."}
|
|
25646
|
-
>
|
|
25647
|
-
Company Name
|
|
25648
|
-
</SpsLabel>
|
|
25649
|
-
<SpsTextInput formMeta={formMeta.fields.companyName}
|
|
25650
|
-
value={formValue.companyName}
|
|
25651
|
-
></SpsTextInput>
|
|
25652
|
-
</>;
|
|
25653
|
-
}
|
|
25654
|
-
`
|
|
25655
|
-
}
|
|
25656
|
-
}
|
|
25657
25617
|
}
|
|
25658
25618
|
};
|
|
25659
25619
|
const propsDoc$Y = {
|
|
@@ -32608,6 +32568,7 @@ const propsDoc$w = {
|
|
|
32608
32568
|
disabled: "boolean",
|
|
32609
32569
|
formMeta: "SpsFormFieldMeta<any>",
|
|
32610
32570
|
inline: "boolean",
|
|
32571
|
+
centered: "boolean",
|
|
32611
32572
|
label: "string",
|
|
32612
32573
|
name: { type: "string", required: true },
|
|
32613
32574
|
onChange: "ChangeEventHandler",
|
|
@@ -32619,6 +32580,7 @@ const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
|
|
|
32619
32580
|
formControl: impl(),
|
|
32620
32581
|
formMeta: impl(),
|
|
32621
32582
|
inline: propTypes$1G.exports.bool,
|
|
32583
|
+
centered: propTypes$1G.exports.bool,
|
|
32622
32584
|
label: propTypes$1G.exports.string,
|
|
32623
32585
|
name: propTypes$1G.exports.string.isRequired,
|
|
32624
32586
|
onChange: fun(),
|
|
@@ -32635,6 +32597,7 @@ function SpsRadioButton(_Q) {
|
|
|
32635
32597
|
formMeta,
|
|
32636
32598
|
id: id2,
|
|
32637
32599
|
inline,
|
|
32600
|
+
centered,
|
|
32638
32601
|
label,
|
|
32639
32602
|
name,
|
|
32640
32603
|
onChange,
|
|
@@ -32650,6 +32613,7 @@ function SpsRadioButton(_Q) {
|
|
|
32650
32613
|
"formMeta",
|
|
32651
32614
|
"id",
|
|
32652
32615
|
"inline",
|
|
32616
|
+
"centered",
|
|
32653
32617
|
"label",
|
|
32654
32618
|
"name",
|
|
32655
32619
|
"onChange",
|
|
@@ -32660,7 +32624,7 @@ function SpsRadioButton(_Q) {
|
|
|
32660
32624
|
const meta = formMeta || formControl2;
|
|
32661
32625
|
const inputElement = React.useRef();
|
|
32662
32626
|
const { wrapperId, controlId } = useFormControlId(id2);
|
|
32663
|
-
const classes = clsx(unsafelyReplaceClassName || "sps-radio-button", "sps-checkable", inline && "sps-checkable--inline", !label && "sps-checkable--no-label", className);
|
|
32627
|
+
const classes = clsx(unsafelyReplaceClassName || "sps-radio-button", "sps-checkable", inline && "sps-checkable--inline", centered && "sps-checkable--centered", !label && "sps-checkable--no-label", className);
|
|
32664
32628
|
function handleChange(event) {
|
|
32665
32629
|
if (meta) {
|
|
32666
32630
|
meta.setValue(value);
|
|
@@ -32701,86 +32665,553 @@ Object.assign(SpsRadioButton, {
|
|
|
32701
32665
|
displayName: "SpsRadioButton"
|
|
32702
32666
|
});
|
|
32703
32667
|
const SpsRadioButtonExamples = {
|
|
32704
|
-
|
|
32705
|
-
label: "
|
|
32706
|
-
description: "
|
|
32668
|
+
general: {
|
|
32669
|
+
label: "General Usage",
|
|
32670
|
+
description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Use Radio Buttons:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, "When only one option can be selected from the available options.")), /* @__PURE__ */ React.createElement("h5", null, "Do Not Use Radio Buttons:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, "When a selection causes an immediate change in the system. Use a", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
|
|
32671
|
+
to: "toggle"
|
|
32672
|
+
}, "Toggle"), " instead."), /* @__PURE__ */ React.createElement("li", null, "When multiple options can be selected from the available options. Use", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
|
|
32673
|
+
to: "checkbox"
|
|
32674
|
+
}, "Checkboxes"), " instead."), /* @__PURE__ */ React.createElement("li", null, "When the list of available options requires too much space to list efficiently. Use", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
|
|
32675
|
+
to: "dropdown"
|
|
32676
|
+
}, "Dropdown"), " instead.")))
|
|
32677
|
+
},
|
|
32678
|
+
basic: {
|
|
32679
|
+
label: "Basic Radio Buttons",
|
|
32680
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "Radio Buttons that represent related options are grouped together with a label. The groups can be arranged horizontally or vertically to best utilize available space."),
|
|
32707
32681
|
examples: {
|
|
32708
|
-
|
|
32682
|
+
horizontal: {
|
|
32683
|
+
description: () => /* @__PURE__ */ React.createElement("h4", null, "Horizontal Group"),
|
|
32709
32684
|
react: code`
|
|
32710
32685
|
function DemoComponent() {
|
|
32711
|
-
|
|
32712
|
-
|
|
32713
|
-
|
|
32714
|
-
|
|
32715
|
-
|
|
32716
|
-
|
|
32717
|
-
|
|
32718
|
-
|
|
32719
|
-
|
|
32720
|
-
|
|
32721
|
-
|
|
32722
|
-
|
|
32723
|
-
|
|
32686
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
32687
|
+
option: "option1",
|
|
32688
|
+
});
|
|
32689
|
+
|
|
32690
|
+
return (
|
|
32691
|
+
<SpsForm formMeta={formMeta}>
|
|
32692
|
+
<SpsLabel for={formMeta.fields.option}>Radio Label</SpsLabel>
|
|
32693
|
+
<SpsRadioButton
|
|
32694
|
+
name="option1"
|
|
32695
|
+
value="option1"
|
|
32696
|
+
label="Option"
|
|
32697
|
+
formMeta={formMeta.fields.option}
|
|
32698
|
+
checked={formValue.option === "option1"}
|
|
32699
|
+
inline
|
|
32700
|
+
/>
|
|
32701
|
+
<SpsRadioButton
|
|
32702
|
+
name="option2"
|
|
32703
|
+
value="option2"
|
|
32704
|
+
label="Option"
|
|
32705
|
+
formMeta={formMeta.fields.option}
|
|
32706
|
+
checked={formValue.option === "option2"}
|
|
32707
|
+
inline
|
|
32708
|
+
/>
|
|
32709
|
+
<SpsRadioButton
|
|
32710
|
+
name="option3"
|
|
32711
|
+
value="option3"
|
|
32712
|
+
label="Option"
|
|
32713
|
+
formMeta={formMeta.fields.option}
|
|
32714
|
+
checked={formValue.option === "option3"}
|
|
32715
|
+
inline
|
|
32716
|
+
/>
|
|
32717
|
+
<SpsRadioButton
|
|
32718
|
+
name="option4"
|
|
32719
|
+
value="option4"
|
|
32720
|
+
label="Option"
|
|
32721
|
+
formMeta={formMeta.fields.option}
|
|
32722
|
+
checked={formValue.option === "option4"}
|
|
32723
|
+
inline
|
|
32724
|
+
/>
|
|
32725
|
+
<SpsRadioButton
|
|
32726
|
+
name="option5"
|
|
32727
|
+
value="option5"
|
|
32728
|
+
label="Option"
|
|
32729
|
+
formMeta={formMeta.fields.option}
|
|
32730
|
+
checked={formValue.option === "option5"}
|
|
32731
|
+
inline
|
|
32732
|
+
/>
|
|
32733
|
+
<SpsRadioButton
|
|
32734
|
+
name="option6"
|
|
32735
|
+
value="option6"
|
|
32736
|
+
label="Option"
|
|
32737
|
+
formMeta={formMeta.fields.option}
|
|
32738
|
+
checked={formValue.option === "option6"}
|
|
32739
|
+
inline
|
|
32740
|
+
/>
|
|
32724
32741
|
</SpsForm>
|
|
32742
|
+
);
|
|
32725
32743
|
}
|
|
32726
|
-
|
|
32744
|
+
`
|
|
32745
|
+
},
|
|
32746
|
+
vertical: {
|
|
32747
|
+
description: () => /* @__PURE__ */ React.createElement("h4", null, "Vertical Group"),
|
|
32748
|
+
react: code`
|
|
32749
|
+
function DemoComponent() {
|
|
32750
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
32751
|
+
option: "option1",
|
|
32752
|
+
});
|
|
32753
|
+
|
|
32754
|
+
return (
|
|
32755
|
+
<SpsForm formMeta={formMeta}>
|
|
32756
|
+
<SpsLabel for={formMeta.fields.option}>Radio Label</SpsLabel>
|
|
32757
|
+
<SpsRadioButton
|
|
32758
|
+
name="option1"
|
|
32759
|
+
value="option1"
|
|
32760
|
+
label="Option"
|
|
32761
|
+
formMeta={formMeta.fields.option}
|
|
32762
|
+
checked={formValue.option === "option1"}
|
|
32763
|
+
/>
|
|
32764
|
+
<SpsRadioButton
|
|
32765
|
+
name="option2"
|
|
32766
|
+
value="option2"
|
|
32767
|
+
label="Option"
|
|
32768
|
+
formMeta={formMeta.fields.option}
|
|
32769
|
+
checked={formValue.option === "option2"}
|
|
32770
|
+
/>
|
|
32771
|
+
<SpsRadioButton
|
|
32772
|
+
name="option3"
|
|
32773
|
+
value="option3"
|
|
32774
|
+
label="Option"
|
|
32775
|
+
formMeta={formMeta.fields.option}
|
|
32776
|
+
checked={formValue.option === "option3"}
|
|
32777
|
+
/>
|
|
32778
|
+
<SpsRadioButton
|
|
32779
|
+
name="option4"
|
|
32780
|
+
value="option4"
|
|
32781
|
+
label="Option"
|
|
32782
|
+
formMeta={formMeta.fields.option}
|
|
32783
|
+
checked={formValue.option === "option4"}
|
|
32784
|
+
/>
|
|
32785
|
+
<SpsRadioButton
|
|
32786
|
+
name="option5"
|
|
32787
|
+
value="option5"
|
|
32788
|
+
label="Option"
|
|
32789
|
+
formMeta={formMeta.fields.option}
|
|
32790
|
+
checked={formValue.option === "option5"}
|
|
32791
|
+
/>
|
|
32792
|
+
<SpsRadioButton
|
|
32793
|
+
name="option6"
|
|
32794
|
+
value="option6"
|
|
32795
|
+
label="Option"
|
|
32796
|
+
formMeta={formMeta.fields.option}
|
|
32797
|
+
checked={formValue.option === "option6"}
|
|
32798
|
+
/>
|
|
32799
|
+
</SpsForm>
|
|
32800
|
+
);
|
|
32801
|
+
}
|
|
32802
|
+
`
|
|
32803
|
+
},
|
|
32804
|
+
verticalAlternate: {
|
|
32805
|
+
description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Vertical Group Alternate"), /* @__PURE__ */ React.createElement("p", null, "Radio Buttons can be used in vertical groups with multiple columns when common radio options are shared across multiple categories. In these cases the options are represented as a column title and shared for every row or category (i.e. only one option can be selected in each row).")),
|
|
32806
|
+
react: code`
|
|
32807
|
+
function DemoComponent() {
|
|
32808
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
32809
|
+
categories: {
|
|
32810
|
+
category1: "category1.option1",
|
|
32811
|
+
category2: "category2.option2",
|
|
32812
|
+
category3: "category3.option3",
|
|
32813
|
+
category4: "",
|
|
32814
|
+
category5: "",
|
|
32815
|
+
category6: "",
|
|
32816
|
+
},
|
|
32817
|
+
});
|
|
32818
|
+
|
|
32819
|
+
return (
|
|
32820
|
+
<SpsForm formMeta={formMeta}>
|
|
32821
|
+
<table>
|
|
32822
|
+
<tr>
|
|
32823
|
+
<td style={{ width: 130 }}>
|
|
32824
|
+
<SpsLabel for={formMeta.fields.categories}>Radio Label</SpsLabel>
|
|
32825
|
+
</td>
|
|
32826
|
+
<td style={{ width: 50 }}>
|
|
32827
|
+
<div style={{ textAlign: "center", marginBottom: 5 }}>Option</div>
|
|
32828
|
+
</td>
|
|
32829
|
+
<td style={{ width: 50 }}>
|
|
32830
|
+
<div style={{ textAlign: "center", marginBottom: 5 }}>Option</div>
|
|
32831
|
+
</td>
|
|
32832
|
+
<td style={{ width: 50 }}>
|
|
32833
|
+
<div style={{ textAlign: "center", marginBottom: 5 }}>Option</div>
|
|
32834
|
+
</td>
|
|
32835
|
+
</tr>
|
|
32836
|
+
<tr>
|
|
32837
|
+
<td>
|
|
32838
|
+
<div className="mb-2">Category</div>
|
|
32839
|
+
</td>
|
|
32840
|
+
<td>
|
|
32841
|
+
<SpsRadioButton
|
|
32842
|
+
name="category1.option1"
|
|
32843
|
+
value="category1.option1"
|
|
32844
|
+
formMeta={formMeta.fields.categories.fields.category1}
|
|
32845
|
+
checked={formValue.categories.category1 === "category1.option1"}
|
|
32846
|
+
centered
|
|
32847
|
+
/>
|
|
32848
|
+
</td>
|
|
32849
|
+
<td>
|
|
32850
|
+
<SpsRadioButton
|
|
32851
|
+
name="category1.option2"
|
|
32852
|
+
value="category1.option2"
|
|
32853
|
+
formMeta={formMeta.fields.categories.fields.category1}
|
|
32854
|
+
checked={formValue.categories.category1 === "category1.option2"}
|
|
32855
|
+
centered
|
|
32856
|
+
/>
|
|
32857
|
+
</td>
|
|
32858
|
+
<td>
|
|
32859
|
+
<SpsRadioButton
|
|
32860
|
+
name="category1.option3"
|
|
32861
|
+
value="category1.option3"
|
|
32862
|
+
formMeta={formMeta.fields.categories.fields.category1}
|
|
32863
|
+
checked={formValue.categories.category1 === "category1.option3"}
|
|
32864
|
+
centered
|
|
32865
|
+
/>
|
|
32866
|
+
</td>
|
|
32867
|
+
</tr>
|
|
32868
|
+
<tr>
|
|
32869
|
+
<td>
|
|
32870
|
+
<div className="mb-2">Category</div>
|
|
32871
|
+
</td>
|
|
32872
|
+
<td>
|
|
32873
|
+
<SpsRadioButton
|
|
32874
|
+
name="category2.option1"
|
|
32875
|
+
value="category2.option1"
|
|
32876
|
+
formMeta={formMeta.fields.categories.fields.category2}
|
|
32877
|
+
checked={formValue.categories.category2 === "category2.option1"}
|
|
32878
|
+
centered
|
|
32879
|
+
/>
|
|
32880
|
+
</td>
|
|
32881
|
+
<td>
|
|
32882
|
+
<SpsRadioButton
|
|
32883
|
+
name="category2.option2"
|
|
32884
|
+
value="category2.option2"
|
|
32885
|
+
formMeta={formMeta.fields.categories.fields.category2}
|
|
32886
|
+
checked={formValue.categories.category2 === "category2.option2"}
|
|
32887
|
+
centered
|
|
32888
|
+
/>
|
|
32889
|
+
</td>
|
|
32890
|
+
<td>
|
|
32891
|
+
<SpsRadioButton
|
|
32892
|
+
name="category2.option3"
|
|
32893
|
+
value="category2.option3"
|
|
32894
|
+
formMeta={formMeta.fields.categories.fields.category2}
|
|
32895
|
+
checked={formValue.categories.category2 === "category2.option3"}
|
|
32896
|
+
centered
|
|
32897
|
+
/>
|
|
32898
|
+
</td>
|
|
32899
|
+
</tr>
|
|
32900
|
+
<tr>
|
|
32901
|
+
<td>
|
|
32902
|
+
<div className="mb-2">Category</div>
|
|
32903
|
+
</td>
|
|
32904
|
+
<td>
|
|
32905
|
+
<SpsRadioButton
|
|
32906
|
+
name="category3.option1"
|
|
32907
|
+
value="category3.option1"
|
|
32908
|
+
formMeta={formMeta.fields.categories.fields.category3}
|
|
32909
|
+
checked={formValue.categories.category3 === "category3.option1"}
|
|
32910
|
+
centered
|
|
32911
|
+
/>
|
|
32912
|
+
</td>
|
|
32913
|
+
<td>
|
|
32914
|
+
<SpsRadioButton
|
|
32915
|
+
name="category3.option2"
|
|
32916
|
+
value="category3.option2"
|
|
32917
|
+
formMeta={formMeta.fields.categories.fields.category3}
|
|
32918
|
+
checked={formValue.categories.category3 === "category3.option2"}
|
|
32919
|
+
centered
|
|
32920
|
+
/>
|
|
32921
|
+
</td>
|
|
32922
|
+
<td>
|
|
32923
|
+
<SpsRadioButton
|
|
32924
|
+
name="category3.option3"
|
|
32925
|
+
value="category3.option3"
|
|
32926
|
+
formMeta={formMeta.fields.categories.fields.category3}
|
|
32927
|
+
checked={formValue.categories.category3 === "category3.option3"}
|
|
32928
|
+
centered
|
|
32929
|
+
/>
|
|
32930
|
+
</td>
|
|
32931
|
+
</tr>
|
|
32932
|
+
<tr>
|
|
32933
|
+
<td>
|
|
32934
|
+
<div className="mb-2">Category</div>
|
|
32935
|
+
</td>
|
|
32936
|
+
<td>
|
|
32937
|
+
<SpsRadioButton
|
|
32938
|
+
name="category4.option1"
|
|
32939
|
+
value="category4.option1"
|
|
32940
|
+
formMeta={formMeta.fields.categories.fields.category4}
|
|
32941
|
+
checked={formValue.categories.category4 === "category4.option1"}
|
|
32942
|
+
centered
|
|
32943
|
+
/>
|
|
32944
|
+
</td>
|
|
32945
|
+
<td>
|
|
32946
|
+
<SpsRadioButton
|
|
32947
|
+
name="category4.option2"
|
|
32948
|
+
value="category4.option2"
|
|
32949
|
+
formMeta={formMeta.fields.categories.fields.category4}
|
|
32950
|
+
checked={formValue.categories.category4 === "category4.option2"}
|
|
32951
|
+
centered
|
|
32952
|
+
/>
|
|
32953
|
+
</td>
|
|
32954
|
+
<td>
|
|
32955
|
+
<SpsRadioButton
|
|
32956
|
+
name="category4.option3"
|
|
32957
|
+
value="category4.option3"
|
|
32958
|
+
formMeta={formMeta.fields.categories.fields.category4}
|
|
32959
|
+
checked={formValue.categories.category4 === "category4.option3"}
|
|
32960
|
+
centered
|
|
32961
|
+
/>
|
|
32962
|
+
</td>
|
|
32963
|
+
</tr>
|
|
32964
|
+
<tr>
|
|
32965
|
+
<td>
|
|
32966
|
+
<div className="mb-2">Category</div>
|
|
32967
|
+
</td>
|
|
32968
|
+
<td>
|
|
32969
|
+
<SpsRadioButton
|
|
32970
|
+
name="category5.option1"
|
|
32971
|
+
value="category5.option1"
|
|
32972
|
+
formMeta={formMeta.fields.categories.fields.category5}
|
|
32973
|
+
checked={formValue.categories.category5 === "category5.option1"}
|
|
32974
|
+
centered
|
|
32975
|
+
/>
|
|
32976
|
+
</td>
|
|
32977
|
+
<td>
|
|
32978
|
+
<SpsRadioButton
|
|
32979
|
+
name="category5.option2"
|
|
32980
|
+
value="category5.option2"
|
|
32981
|
+
formMeta={formMeta.fields.categories.fields.category5}
|
|
32982
|
+
checked={formValue.categories.category5 === "category5.option2"}
|
|
32983
|
+
centered
|
|
32984
|
+
/>
|
|
32985
|
+
</td>
|
|
32986
|
+
<td>
|
|
32987
|
+
<SpsRadioButton
|
|
32988
|
+
name="category5.option3"
|
|
32989
|
+
value="category5.option3"
|
|
32990
|
+
formMeta={formMeta.fields.categories.fields.category5}
|
|
32991
|
+
checked={formValue.categories.category5 === "category5.option3"}
|
|
32992
|
+
centered
|
|
32993
|
+
/>
|
|
32994
|
+
</td>
|
|
32995
|
+
</tr>
|
|
32996
|
+
<tr>
|
|
32997
|
+
<td>
|
|
32998
|
+
<div className="mb-2">Category</div>
|
|
32999
|
+
</td>
|
|
33000
|
+
<td>
|
|
33001
|
+
<SpsRadioButton
|
|
33002
|
+
name="category6.option1"
|
|
33003
|
+
value="category6.option1"
|
|
33004
|
+
formMeta={formMeta.fields.categories.fields.category6}
|
|
33005
|
+
checked={formValue.categories.category6 === "category6.option1"}
|
|
33006
|
+
centered
|
|
33007
|
+
/>
|
|
33008
|
+
</td>
|
|
33009
|
+
<td>
|
|
33010
|
+
<SpsRadioButton
|
|
33011
|
+
name="category6.option2"
|
|
33012
|
+
value="category6.option2"
|
|
33013
|
+
formMeta={formMeta.fields.categories.fields.category6}
|
|
33014
|
+
checked={formValue.categories.category6 === "category6.option2"}
|
|
33015
|
+
centered
|
|
33016
|
+
/>
|
|
33017
|
+
</td>
|
|
33018
|
+
<td>
|
|
33019
|
+
<SpsRadioButton
|
|
33020
|
+
name="category6.option3"
|
|
33021
|
+
value="category6.option3"
|
|
33022
|
+
formMeta={formMeta.fields.categories.fields.category6}
|
|
33023
|
+
checked={formValue.categories.category6 === "category6.option3"}
|
|
33024
|
+
centered
|
|
33025
|
+
/>
|
|
33026
|
+
</td>
|
|
33027
|
+
</tr>
|
|
33028
|
+
</table>
|
|
33029
|
+
</SpsForm>
|
|
33030
|
+
);
|
|
33031
|
+
}
|
|
33032
|
+
`
|
|
32727
33033
|
}
|
|
32728
33034
|
}
|
|
32729
33035
|
},
|
|
32730
|
-
|
|
32731
|
-
label: "
|
|
32732
|
-
description: "
|
|
33036
|
+
conditional: {
|
|
33037
|
+
label: "Radio Buttons With Conditional Inputs",
|
|
33038
|
+
description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Conditional input fields can be nested \u201Cunderneath\u201D radio buttons. These conditional inputs display only when the corresponding radio option is in the selected state. Multiple conditional inputs can be nested under a single radio buttons."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("i", null, "Note: Conditional Inputs can appear with or without labels, depending on context."))),
|
|
32733
33039
|
examples: {
|
|
32734
|
-
|
|
33040
|
+
horizontal: {
|
|
33041
|
+
description: () => /* @__PURE__ */ React.createElement("h4", null, "Horizontal"),
|
|
32735
33042
|
react: code`
|
|
32736
33043
|
function DemoComponent() {
|
|
32737
|
-
|
|
32738
|
-
|
|
32739
|
-
|
|
32740
|
-
|
|
32741
|
-
|
|
32742
|
-
|
|
32743
|
-
|
|
32744
|
-
|
|
32745
|
-
|
|
32746
|
-
|
|
32747
|
-
|
|
32748
|
-
|
|
32749
|
-
|
|
32750
|
-
|
|
32751
|
-
|
|
33044
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33045
|
+
radio1: "radio1.option1",
|
|
33046
|
+
radio2: "radio2.option1",
|
|
33047
|
+
});
|
|
33048
|
+
|
|
33049
|
+
return (
|
|
33050
|
+
<SpsForm formMeta={formMeta}>
|
|
33051
|
+
<SpsLabel for={formMeta.fields.radio1}>Radio Label</SpsLabel>
|
|
33052
|
+
<SpsInputGroup>
|
|
33053
|
+
<SpsRadioButton
|
|
33054
|
+
name="radio1.option1"
|
|
33055
|
+
value="radio1.option1"
|
|
33056
|
+
label="Option"
|
|
33057
|
+
formMeta={formMeta.fields.radio1}
|
|
33058
|
+
checked={formValue.radio1 === "radio1.option1"}
|
|
33059
|
+
inline
|
|
33060
|
+
/>
|
|
33061
|
+
|
|
33062
|
+
<SpsRadioButton
|
|
33063
|
+
name="radio1.option2"
|
|
33064
|
+
value="radio1.option2"
|
|
33065
|
+
label="Option"
|
|
33066
|
+
formMeta={formMeta.fields.radio1}
|
|
33067
|
+
checked={formValue.radio1 === "radio1.option2"}
|
|
33068
|
+
inline
|
|
33069
|
+
/>
|
|
33070
|
+
<SpsRadioButton
|
|
33071
|
+
name="radio1.option3"
|
|
33072
|
+
value="radio1.option3"
|
|
33073
|
+
label="Option"
|
|
33074
|
+
formMeta={formMeta.fields.radio1}
|
|
33075
|
+
checked={formValue.radio1 === "radio1.option3"}
|
|
33076
|
+
inline
|
|
33077
|
+
/>
|
|
33078
|
+
<SpsRadioButton
|
|
33079
|
+
name="radio1.option4"
|
|
33080
|
+
value="radio1.option4"
|
|
33081
|
+
label="Option"
|
|
33082
|
+
formMeta={formMeta.fields.radio1}
|
|
33083
|
+
checked={formValue.radio1 === "radio1.option4"}
|
|
33084
|
+
inline
|
|
33085
|
+
/>
|
|
33086
|
+
</SpsInputGroup>
|
|
33087
|
+
<SpsConditionalField
|
|
33088
|
+
showCondition={formValue.radio1 === "radio1.option1"}
|
|
33089
|
+
>
|
|
33090
|
+
<SpsLabel for={formMeta.fields.radio2}>Radio Label</SpsLabel>
|
|
33091
|
+
<SpsRadioButton
|
|
33092
|
+
name="radio2.option1"
|
|
33093
|
+
value="radio2.option1"
|
|
33094
|
+
label="Option"
|
|
33095
|
+
formMeta={formMeta.fields.radio2}
|
|
33096
|
+
checked={formValue.radio2 === "radio2.option1"}
|
|
33097
|
+
/>
|
|
33098
|
+
<SpsRadioButton
|
|
33099
|
+
name="radio2.option2"
|
|
33100
|
+
value="radio2.option2"
|
|
33101
|
+
label="Option"
|
|
33102
|
+
formMeta={formMeta.fields.radio2}
|
|
33103
|
+
checked={formValue.radio2 === "radio2.option2"}
|
|
33104
|
+
/>
|
|
33105
|
+
<SpsRadioButton
|
|
33106
|
+
name="radio2.option3"
|
|
33107
|
+
value="radio2.option3"
|
|
33108
|
+
label="Option"
|
|
33109
|
+
formMeta={formMeta.fields.radio2}
|
|
33110
|
+
checked={formValue.radio2 === "radio2.option3"}
|
|
33111
|
+
/>
|
|
33112
|
+
</SpsConditionalField>
|
|
32752
33113
|
</SpsForm>
|
|
33114
|
+
);
|
|
32753
33115
|
}
|
|
32754
|
-
|
|
33116
|
+
`
|
|
33117
|
+
},
|
|
33118
|
+
vertical: {
|
|
33119
|
+
description: () => /* @__PURE__ */ React.createElement("h4", null, "Vertical"),
|
|
33120
|
+
react: code`
|
|
33121
|
+
function DemoComponent() {
|
|
33122
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33123
|
+
radio: "option1",
|
|
33124
|
+
companyName: "",
|
|
33125
|
+
});
|
|
33126
|
+
|
|
33127
|
+
return (
|
|
33128
|
+
<SpsForm formMeta={formMeta}>
|
|
33129
|
+
<SpsLabel for={formMeta.fields.radio}>Radio Label</SpsLabel>
|
|
33130
|
+
<SpsInputGroup stacked>
|
|
33131
|
+
<SpsRadioButton
|
|
33132
|
+
name="option1"
|
|
33133
|
+
value="option1"
|
|
33134
|
+
label="Option"
|
|
33135
|
+
formMeta={formMeta.fields.radio}
|
|
33136
|
+
checked={formValue.radio === "option1"}
|
|
33137
|
+
/>
|
|
33138
|
+
<SpsConditionalField
|
|
33139
|
+
showCondition={formValue.radio === "option1"}
|
|
33140
|
+
>
|
|
33141
|
+
<div className="sfg-row">
|
|
33142
|
+
<div className="sfg-col-4">
|
|
33143
|
+
<SpsLabel for={formMeta.fields.companyName}>Company Name</SpsLabel>
|
|
33144
|
+
<SpsTextInput
|
|
33145
|
+
value={formValue.companyName}
|
|
33146
|
+
formMeta={formMeta.fields.companyName}
|
|
33147
|
+
placeholder="Enter a thing"
|
|
33148
|
+
/>
|
|
33149
|
+
</div>
|
|
33150
|
+
</div>
|
|
33151
|
+
</SpsConditionalField>
|
|
33152
|
+
<SpsRadioButton
|
|
33153
|
+
name="option2"
|
|
33154
|
+
value="option2"
|
|
33155
|
+
label="Option"
|
|
33156
|
+
formMeta={formMeta.fields.radio}
|
|
33157
|
+
checked={formValue.radio === "option2"}
|
|
33158
|
+
/>
|
|
33159
|
+
<SpsRadioButton
|
|
33160
|
+
name="option3"
|
|
33161
|
+
value="option3"
|
|
33162
|
+
label="Option"
|
|
33163
|
+
formMeta={formMeta.fields.radio}
|
|
33164
|
+
checked={formValue.radio === "option3"}
|
|
33165
|
+
/>
|
|
33166
|
+
<SpsRadioButton
|
|
33167
|
+
name="option4"
|
|
33168
|
+
value="option4"
|
|
33169
|
+
label="Option"
|
|
33170
|
+
formMeta={formMeta.fields.radio}
|
|
33171
|
+
checked={formValue.radio === "option4"}
|
|
33172
|
+
/>
|
|
33173
|
+
</SpsInputGroup>
|
|
33174
|
+
</SpsForm>
|
|
33175
|
+
);
|
|
33176
|
+
}
|
|
33177
|
+
`
|
|
32755
33178
|
}
|
|
32756
33179
|
}
|
|
32757
33180
|
},
|
|
32758
|
-
|
|
32759
|
-
label: "
|
|
32760
|
-
description: "
|
|
33181
|
+
disabled: {
|
|
33182
|
+
label: "Disabled State",
|
|
33183
|
+
description: "Radio Buttons have a disabled style for each possible state.",
|
|
32761
33184
|
examples: {
|
|
32762
|
-
|
|
33185
|
+
disabled: {
|
|
32763
33186
|
react: code`
|
|
32764
33187
|
function DemoComponent() {
|
|
32765
|
-
|
|
32766
|
-
|
|
32767
|
-
|
|
32768
|
-
|
|
32769
|
-
|
|
32770
|
-
|
|
32771
|
-
|
|
32772
|
-
|
|
32773
|
-
|
|
32774
|
-
|
|
32775
|
-
|
|
32776
|
-
|
|
32777
|
-
|
|
32778
|
-
|
|
32779
|
-
|
|
32780
|
-
|
|
32781
|
-
|
|
33188
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33189
|
+
option: "option1",
|
|
33190
|
+
});
|
|
33191
|
+
|
|
33192
|
+
return (
|
|
33193
|
+
<SpsForm formMeta={formMeta}>
|
|
33194
|
+
<SpsLabel for={formMeta.fields.option}>Radio Label</SpsLabel>
|
|
33195
|
+
<SpsRadioButton
|
|
33196
|
+
name="option1"
|
|
33197
|
+
value="option1"
|
|
33198
|
+
label="Option"
|
|
33199
|
+
formMeta={formMeta.fields.option}
|
|
33200
|
+
checked={formValue.option === "option1"}
|
|
33201
|
+
disabled
|
|
33202
|
+
/>
|
|
33203
|
+
<SpsRadioButton
|
|
33204
|
+
name="option2"
|
|
33205
|
+
value="option2"
|
|
33206
|
+
label="Option"
|
|
33207
|
+
formMeta={formMeta.fields.option}
|
|
33208
|
+
checked={formValue.option === "option2"}
|
|
33209
|
+
disabled
|
|
33210
|
+
/>
|
|
33211
|
+
</SpsForm>
|
|
33212
|
+
);
|
|
32782
33213
|
}
|
|
32783
|
-
|
|
33214
|
+
`
|
|
32784
33215
|
}
|
|
32785
33216
|
}
|
|
32786
33217
|
}
|
|
@@ -37667,6 +38098,7 @@ const MANIFEST = {
|
|
|
37667
38098
|
examples: SpsKeyValueListExamples
|
|
37668
38099
|
},
|
|
37669
38100
|
Label: {
|
|
38101
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "Labels provide a description for the value to be entered or selected in an accompanying input field."),
|
|
37670
38102
|
components: [SpsLabel],
|
|
37671
38103
|
examples: SpsLabelExamples
|
|
37672
38104
|
},
|
|
@@ -37718,6 +38150,7 @@ const MANIFEST = {
|
|
|
37718
38150
|
examples: SpsProgressBarExamples
|
|
37719
38151
|
},
|
|
37720
38152
|
"Radio Buttons": {
|
|
38153
|
+
description: "Radio Buttons allow a user to make single selection from a list of predefined options.",
|
|
37721
38154
|
components: [SpsRadioButton],
|
|
37722
38155
|
examples: SpsRadioButtonExamples
|
|
37723
38156
|
},
|