@spscommerce/ds-react 6.12.0 → 6.12.1
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 +656 -482
- package/lib/index.es.js +349 -172
- package/package.json +9 -9
package/lib/index.es.js
CHANGED
|
@@ -21853,183 +21853,361 @@ Object.assign(SpsDt, {
|
|
|
21853
21853
|
displayName: "SpsDescriptionListTerm / SpsDt"
|
|
21854
21854
|
});
|
|
21855
21855
|
const SpsDescriptionListExamples = {
|
|
21856
|
+
general: {
|
|
21857
|
+
label: "General Usage",
|
|
21858
|
+
description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists should be used to group a series of related terms (and their accompanying descriptions) together in a tabular-like format."), /* @__PURE__ */ React__default.createElement("p", null, "Note: Description Lists are not the required pattern for listing terms and descriptions, but should be used when it benefits the legibility of the content over other typographic formats such as unordered lists or tables."), /* @__PURE__ */ React__default.createElement("h4", null, "Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
|
|
21859
|
+
className: "mb-2"
|
|
21860
|
+
}, "To display two or more terms that have accompanying descriptions or values.")), /* @__PURE__ */ React__default.createElement("h4", null, "Do Not Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
|
|
21861
|
+
className: "mb-2"
|
|
21862
|
+
}, "To display a single term"), /* @__PURE__ */ React__default.createElement("li", {
|
|
21863
|
+
className: "mb-2"
|
|
21864
|
+
}, "If the listed terms do not have descriptions")))
|
|
21865
|
+
},
|
|
21856
21866
|
basic: {
|
|
21857
|
-
label: "Basic Description
|
|
21867
|
+
label: "Basic Description Lists",
|
|
21868
|
+
description: () => /* @__PURE__ */ React__default.createElement("p", null, "Description Lists are available in two sizes. Additionally, the left column can be set to one of three different width options to best accomodate the content in each specific use case."),
|
|
21858
21869
|
examples: {
|
|
21859
|
-
|
|
21860
|
-
|
|
21870
|
+
standard: {
|
|
21871
|
+
description: "Standard Size Description Lists",
|
|
21872
|
+
react: code`
|
|
21873
|
+
function DemoComponent() {
|
|
21874
|
+
return (
|
|
21875
|
+
<SpsCardV2>
|
|
21876
|
+
<SpsTabsV2>
|
|
21877
|
+
<Item key="1-to-3" title="1-to-3">
|
|
21861
21878
|
<SpsDl>
|
|
21862
|
-
|
|
21863
|
-
|
|
21864
|
-
|
|
21865
|
-
|
|
21866
|
-
|
|
21867
|
-
|
|
21868
|
-
</SpsDt>
|
|
21869
|
-
<SpsDd>Definition</SpsDd>
|
|
21870
|
-
<SpsDt>Term</SpsDt>
|
|
21871
|
-
<SpsDd>
|
|
21872
|
-
Definition that has a LOOOOOOOOOOT of text in it.
|
|
21873
|
-
Definition that has a LOOOOOOOOOOT of text in it.
|
|
21874
|
-
</SpsDd>
|
|
21879
|
+
<SpsDt>Term 1</SpsDt>
|
|
21880
|
+
<SpsDd>Description 1</SpsDd>
|
|
21881
|
+
<SpsDt>Term 2</SpsDt>
|
|
21882
|
+
<SpsDd>Description 2</SpsDd>
|
|
21883
|
+
<SpsDt help="This is the third term">Term 3</SpsDt>
|
|
21884
|
+
<SpsDd>Description 3</SpsDd>
|
|
21875
21885
|
</SpsDl>
|
|
21876
|
-
|
|
21886
|
+
</Item>
|
|
21887
|
+
<Item key="1-to-2" title="1-to-2">
|
|
21888
|
+
<SpsDl wideTerms>
|
|
21889
|
+
<SpsDt>Term 1</SpsDt>
|
|
21890
|
+
<SpsDd>Description 1</SpsDd>
|
|
21891
|
+
<SpsDt>Term 2</SpsDt>
|
|
21892
|
+
<SpsDd>Description 2</SpsDd>
|
|
21893
|
+
<SpsDt help="This is the third term">Term 3</SpsDt>
|
|
21894
|
+
<SpsDd>Description 3</SpsDd>
|
|
21895
|
+
</SpsDl>
|
|
21896
|
+
</Item>
|
|
21897
|
+
<Item key="1-to-1" title="1-to-1">
|
|
21898
|
+
<SpsDl widerTerms>
|
|
21899
|
+
<SpsDt>Term 1</SpsDt>
|
|
21900
|
+
<SpsDd>Description 1</SpsDd>
|
|
21901
|
+
<SpsDt>Term 2</SpsDt>
|
|
21902
|
+
<SpsDd>Description 2</SpsDd>
|
|
21903
|
+
<SpsDt help="This is the third term">Term 3</SpsDt>
|
|
21904
|
+
<SpsDd>Description 3</SpsDd>
|
|
21905
|
+
</SpsDl>
|
|
21906
|
+
</Item>
|
|
21907
|
+
</SpsTabsV2>
|
|
21908
|
+
</SpsCardV2>
|
|
21909
|
+
)
|
|
21910
|
+
}
|
|
21911
|
+
`
|
|
21877
21912
|
},
|
|
21878
|
-
dynamic: {
|
|
21879
|
-
react: code`
|
|
21880
|
-
function DemoComponent() {
|
|
21881
|
-
const list = [
|
|
21882
|
-
{ term: "Term 1", definition: "Definition 1" },
|
|
21883
|
-
{ term: "Term 2", definition: "Definition 2" },
|
|
21884
|
-
{ term: "Term 3", definition: "Definition 3" },
|
|
21885
|
-
];
|
|
21886
|
-
|
|
21887
|
-
return (
|
|
21888
|
-
<SpsDl>
|
|
21889
|
-
{list.map((item, i) => (
|
|
21890
|
-
<React.Fragment>
|
|
21891
|
-
<SpsDt>{item.term}</SpsDt>
|
|
21892
|
-
<SpsDd>{item.definition}</SpsDd>
|
|
21893
|
-
</React.Fragment>
|
|
21894
|
-
))}
|
|
21895
|
-
</SpsDl>
|
|
21896
|
-
);
|
|
21897
|
-
}
|
|
21898
|
-
`
|
|
21899
|
-
}
|
|
21900
|
-
}
|
|
21901
|
-
},
|
|
21902
|
-
b_advanced: {
|
|
21903
|
-
label: "Advanced Description List",
|
|
21904
|
-
examples: {
|
|
21905
|
-
advanced: {
|
|
21906
|
-
react: code`
|
|
21907
|
-
function DemoComponent() {
|
|
21908
|
-
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
21909
|
-
firstName: "",
|
|
21910
|
-
lastName: "",
|
|
21911
|
-
title: "",
|
|
21912
|
-
accomplishments: ""
|
|
21913
|
-
}, {
|
|
21914
|
-
"lastName": [SpsValidators.required]
|
|
21915
|
-
})
|
|
21916
|
-
|
|
21917
|
-
React.useEffect(() => {
|
|
21918
|
-
// Make the error state visible for this demo
|
|
21919
|
-
formMeta.fields.lastName.markAsDirty()
|
|
21920
|
-
}, [])
|
|
21921
|
-
|
|
21922
|
-
return (
|
|
21923
|
-
<SpsCard>
|
|
21924
|
-
<SpsForm formMeta={formMeta}>
|
|
21925
|
-
<SpsDl>
|
|
21926
|
-
<SpsDt id="firstNameLabel" labelFor={formMeta.fields.firstName}>
|
|
21927
|
-
First Name
|
|
21928
|
-
</SpsDt>
|
|
21929
|
-
<SpsDd>
|
|
21930
|
-
<SpsTextInput
|
|
21931
|
-
aria-labelledby="firstNameLabel"
|
|
21932
|
-
value={formValue.firstName}
|
|
21933
|
-
formMeta={formMeta.fields.firstName}
|
|
21934
|
-
/>
|
|
21935
|
-
</SpsDd>
|
|
21936
|
-
<SpsDt
|
|
21937
|
-
id="lastNameLabel"
|
|
21938
|
-
labelFor={formMeta.fields.lastName}
|
|
21939
|
-
errors={() =>
|
|
21940
|
-
formMeta.fields.lastName.hasError("required") &&
|
|
21941
|
-
"Please enter a last name."
|
|
21942
|
-
}
|
|
21943
|
-
>
|
|
21944
|
-
Last Name
|
|
21945
|
-
</SpsDt>
|
|
21946
|
-
<SpsDd>
|
|
21947
|
-
<SpsTextInput
|
|
21948
|
-
aria-labelledby="lastNameLabel"
|
|
21949
|
-
value={formValue.lastName}
|
|
21950
|
-
formMeta={formMeta.fields.lastName}
|
|
21951
|
-
/>
|
|
21952
|
-
</SpsDd>
|
|
21953
|
-
<SpsDt id="titleLabel" labelFor={formMeta.fields.title}>
|
|
21954
|
-
Title
|
|
21955
|
-
</SpsDt>
|
|
21956
|
-
<SpsDd>
|
|
21957
|
-
<SpsTextInput
|
|
21958
|
-
aria-labelledby="titleLabel"
|
|
21959
|
-
value={formValue.title}
|
|
21960
|
-
formMeta={formMeta.fields.title}
|
|
21961
|
-
/>
|
|
21962
|
-
</SpsDd>
|
|
21963
|
-
<SpsDt
|
|
21964
|
-
id="accomplishmentsLabel"
|
|
21965
|
-
labelFor={formMeta.fields.accomplishments}
|
|
21966
|
-
help="If they haven't achieved anything, make stuff up."
|
|
21967
|
-
>
|
|
21968
|
-
Top 5 Greatest Accomplishments
|
|
21969
|
-
</SpsDt>
|
|
21970
|
-
<SpsDd>
|
|
21971
|
-
<SpsTextarea
|
|
21972
|
-
rows={3}
|
|
21973
|
-
value={formValue.accomplishments}
|
|
21974
|
-
formMeta={formMeta.fields.accomplishments}
|
|
21975
|
-
aria-labelledby="accomplishmentsLabel"
|
|
21976
|
-
/>
|
|
21977
|
-
</SpsDd>
|
|
21978
|
-
</SpsDl>
|
|
21979
|
-
</SpsForm>
|
|
21980
|
-
</SpsCard>
|
|
21981
|
-
)
|
|
21982
|
-
}
|
|
21983
|
-
`
|
|
21984
|
-
}
|
|
21985
|
-
}
|
|
21986
|
-
},
|
|
21987
|
-
c_compact: {
|
|
21988
|
-
label: "Compact Description List",
|
|
21989
|
-
examples: {
|
|
21990
21913
|
compact: {
|
|
21991
|
-
|
|
21914
|
+
description: "Compact Description Lists",
|
|
21915
|
+
react: code`
|
|
21916
|
+
function DemoComponent() {
|
|
21917
|
+
return (
|
|
21918
|
+
<SpsCardV2>
|
|
21919
|
+
<SpsTabsV2>
|
|
21920
|
+
<Item key="1-to-3" title="1-to-3">
|
|
21992
21921
|
<SpsDl compact>
|
|
21993
21922
|
<SpsDt>Term 1</SpsDt>
|
|
21994
|
-
<SpsDd>
|
|
21995
|
-
<SpsDt>Term</SpsDt>
|
|
21996
|
-
<SpsDd>
|
|
21997
|
-
<SpsDt
|
|
21998
|
-
<SpsDd>
|
|
21999
|
-
<SpsDt>Term</SpsDt>
|
|
22000
|
-
<SpsDd>Definition that has a LOOOOOOOOOOT of text in it. Definition that has a LOOOOOOOOOOT of text in it.
|
|
22001
|
-
</SpsDd>
|
|
21923
|
+
<SpsDd>Description 1</SpsDd>
|
|
21924
|
+
<SpsDt>Term 2</SpsDt>
|
|
21925
|
+
<SpsDd>Description 2</SpsDd>
|
|
21926
|
+
<SpsDt help="This is the third term">Term 3</SpsDt>
|
|
21927
|
+
<SpsDd>Description 3</SpsDd>
|
|
22002
21928
|
</SpsDl>
|
|
22003
|
-
|
|
21929
|
+
</Item>
|
|
21930
|
+
<Item key="1-to-2" title="1-to-2">
|
|
21931
|
+
<SpsDl compact wideTerms>
|
|
21932
|
+
<SpsDt>Term 1</SpsDt>
|
|
21933
|
+
<SpsDd>Description 1</SpsDd>
|
|
21934
|
+
<SpsDt>Term 2</SpsDt>
|
|
21935
|
+
<SpsDd>Description 2</SpsDd>
|
|
21936
|
+
<SpsDt help="This is the third term">Term 3</SpsDt>
|
|
21937
|
+
<SpsDd>Description 3</SpsDd>
|
|
21938
|
+
</SpsDl>
|
|
21939
|
+
</Item>
|
|
21940
|
+
<Item key="1-to-1" title="1-to-1">
|
|
21941
|
+
<SpsDl compact widerTerms>
|
|
21942
|
+
<SpsDt>Term 1</SpsDt>
|
|
21943
|
+
<SpsDd>Description 1</SpsDd>
|
|
21944
|
+
<SpsDt>Term 2</SpsDt>
|
|
21945
|
+
<SpsDd>Description 2</SpsDd>
|
|
21946
|
+
<SpsDt help="This is the third term">Term 3</SpsDt>
|
|
21947
|
+
<SpsDd>Description 3</SpsDd>
|
|
21948
|
+
</SpsDl>
|
|
21949
|
+
</Item>
|
|
21950
|
+
</SpsTabsV2>
|
|
21951
|
+
</SpsCardV2>
|
|
21952
|
+
)
|
|
21953
|
+
}
|
|
21954
|
+
`
|
|
22004
21955
|
}
|
|
22005
21956
|
}
|
|
22006
21957
|
},
|
|
22007
|
-
|
|
22008
|
-
label: "
|
|
21958
|
+
inputFields: {
|
|
21959
|
+
label: "Description Lists with Input Fields",
|
|
21960
|
+
description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists can be used to support form fields. In these instances, the left hand column is used for the label and the right hand column used for the corresponding input field."), /* @__PURE__ */ React__default.createElement("p", null, "Description Lists with Input Fields can appear in Standard or Compact sizes in either 1-to-3, 1-to-2 or 1-to-1 layouts."), /* @__PURE__ */ React__default.createElement("p", null, "Input Fields inside of Description Lists should follow standard Form rules. Visit the", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
|
|
21961
|
+
to: "form"
|
|
21962
|
+
}, "Forms"), " page for more information regarding Form rules."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("i", null, "Note: Description Lists with Input Fields should only be utilized when it benefits the usability of a form, and should not be used adjacent to forms that are not in Description Lists."))),
|
|
22009
21963
|
examples: {
|
|
22010
|
-
|
|
22011
|
-
|
|
22012
|
-
|
|
22013
|
-
|
|
22014
|
-
|
|
22015
|
-
|
|
22016
|
-
|
|
22017
|
-
|
|
22018
|
-
|
|
22019
|
-
|
|
22020
|
-
|
|
21964
|
+
standard: {
|
|
21965
|
+
description: "Standard Size Description Lists with Input Fields",
|
|
21966
|
+
react: code`
|
|
21967
|
+
function DemoComponent() {
|
|
21968
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
21969
|
+
term1: "",
|
|
21970
|
+
term2: "",
|
|
21971
|
+
term3: "",
|
|
21972
|
+
}, {
|
|
21973
|
+
"term1": [SpsValidators.required],
|
|
21974
|
+
"term2": [SpsValidators.minLength(1)],
|
|
21975
|
+
})
|
|
21976
|
+
|
|
21977
|
+
React.useEffect(() => {
|
|
21978
|
+
// Make the error state visible for this demo
|
|
21979
|
+
formMeta.fields.term2.markAsDirty();
|
|
21980
|
+
}, []);
|
|
21981
|
+
|
|
21982
|
+
return (
|
|
21983
|
+
<SpsCardV2>
|
|
21984
|
+
<SpsTabsV2>
|
|
21985
|
+
<Item key="1-to-3" title="1-to-3">
|
|
21986
|
+
<SpsForm formMeta={formMeta}>
|
|
21987
|
+
<SpsDl>
|
|
21988
|
+
<SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
|
|
21989
|
+
<SpsDd>
|
|
21990
|
+
<SpsTextInput
|
|
21991
|
+
value={formValue.term1}
|
|
21992
|
+
formMeta={formMeta.fields.term1}
|
|
21993
|
+
placeholder="Description"
|
|
21994
|
+
/>
|
|
21995
|
+
</SpsDd>
|
|
21996
|
+
<SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
|
|
21997
|
+
<SpsDd>
|
|
21998
|
+
<SpsTextInput
|
|
21999
|
+
value={formValue.term2}
|
|
22000
|
+
formMeta={formMeta.fields.term2}
|
|
22001
|
+
placeholder="Description"
|
|
22002
|
+
/>
|
|
22003
|
+
</SpsDd>
|
|
22004
|
+
<SpsDt
|
|
22005
|
+
id="accomplishmentsLabel"
|
|
22006
|
+
labelFor={formMeta.fields.term3}
|
|
22007
|
+
help="Enter a description"
|
|
22008
|
+
>
|
|
22009
|
+
Term3
|
|
22010
|
+
</SpsDt>
|
|
22011
|
+
<SpsDd>
|
|
22012
|
+
<SpsTextInput
|
|
22013
|
+
value={formValue.term3}
|
|
22014
|
+
formMeta={formMeta.fields.term3}
|
|
22015
|
+
placeholder="Description"
|
|
22016
|
+
/>
|
|
22017
|
+
</SpsDd>
|
|
22018
|
+
</SpsDl>
|
|
22019
|
+
</SpsForm>
|
|
22020
|
+
</Item>
|
|
22021
|
+
<Item key="1-to-2" title="1-to-2">
|
|
22022
|
+
<SpsForm formMeta={formMeta}>
|
|
22023
|
+
<SpsDl wideTerms>
|
|
22024
|
+
<SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
|
|
22025
|
+
<SpsDd>
|
|
22026
|
+
<SpsTextInput
|
|
22027
|
+
value={formValue.term1}
|
|
22028
|
+
formMeta={formMeta.fields.term1}
|
|
22029
|
+
placeholder="Description"
|
|
22030
|
+
/>
|
|
22031
|
+
</SpsDd>
|
|
22032
|
+
<SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
|
|
22033
|
+
<SpsDd>
|
|
22034
|
+
<SpsTextInput
|
|
22035
|
+
value={formValue.term2}
|
|
22036
|
+
formMeta={formMeta.fields.term2}
|
|
22037
|
+
placeholder="Description"
|
|
22038
|
+
/>
|
|
22039
|
+
</SpsDd>
|
|
22040
|
+
<SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
|
|
22041
|
+
>Term 3</SpsDt>
|
|
22042
|
+
<SpsDd>
|
|
22043
|
+
<SpsTextInput
|
|
22044
|
+
value={formValue.term3}
|
|
22045
|
+
formMeta={formMeta.fields.term3}
|
|
22046
|
+
placeholder="Description"
|
|
22047
|
+
/>
|
|
22048
|
+
</SpsDd>
|
|
22049
|
+
</SpsDl>
|
|
22050
|
+
</SpsForm>
|
|
22051
|
+
</Item>
|
|
22052
|
+
<Item key="1-to-1" title="1-to-1">
|
|
22053
|
+
<SpsForm formMeta={formMeta}>
|
|
22054
|
+
<SpsDl widerTerms>
|
|
22055
|
+
<SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
|
|
22056
|
+
<SpsDd>
|
|
22057
|
+
<SpsTextInput
|
|
22058
|
+
value={formValue.term1}
|
|
22059
|
+
formMeta={formMeta.fields.term1}
|
|
22060
|
+
placeholder="Description"
|
|
22061
|
+
/>
|
|
22062
|
+
</SpsDd>
|
|
22063
|
+
<SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
|
|
22064
|
+
<SpsDd>
|
|
22065
|
+
<SpsTextInput
|
|
22066
|
+
value={formValue.term2}
|
|
22067
|
+
formMeta={formMeta.fields.term2}
|
|
22068
|
+
placeholder="Description"
|
|
22069
|
+
/>
|
|
22070
|
+
</SpsDd>
|
|
22071
|
+
<SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
|
|
22072
|
+
<SpsDd>
|
|
22073
|
+
<SpsTextInput
|
|
22074
|
+
value={formValue.term3}
|
|
22075
|
+
formMeta={formMeta.fields.term3}
|
|
22076
|
+
placeholder="Description"
|
|
22077
|
+
/>
|
|
22078
|
+
</SpsDd>
|
|
22079
|
+
</SpsDl>
|
|
22080
|
+
</SpsForm>
|
|
22081
|
+
</Item>
|
|
22082
|
+
</SpsTabsV2>
|
|
22083
|
+
</SpsCardV2>
|
|
22084
|
+
)
|
|
22085
|
+
}
|
|
22086
|
+
`
|
|
22021
22087
|
},
|
|
22022
|
-
|
|
22023
|
-
|
|
22024
|
-
|
|
22025
|
-
|
|
22026
|
-
|
|
22027
|
-
|
|
22028
|
-
|
|
22029
|
-
|
|
22030
|
-
|
|
22031
|
-
|
|
22032
|
-
|
|
22088
|
+
compact: {
|
|
22089
|
+
description: "Compact Description Lists with Input Fields",
|
|
22090
|
+
react: code`
|
|
22091
|
+
function DemoComponent() {
|
|
22092
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
22093
|
+
term1: "",
|
|
22094
|
+
term2: "",
|
|
22095
|
+
term3: "",
|
|
22096
|
+
}, {
|
|
22097
|
+
"term1": [SpsValidators.required],
|
|
22098
|
+
"term2": [SpsValidators.minLength(1)],
|
|
22099
|
+
})
|
|
22100
|
+
|
|
22101
|
+
React.useEffect(() => {
|
|
22102
|
+
// Make the error state visible for this demo
|
|
22103
|
+
formMeta.fields.term2.markAsDirty();
|
|
22104
|
+
}, []);
|
|
22105
|
+
|
|
22106
|
+
return (
|
|
22107
|
+
<SpsCardV2>
|
|
22108
|
+
<SpsTabsV2>
|
|
22109
|
+
<Item key="1-to-3" title="1-to-3">
|
|
22110
|
+
<SpsForm formMeta={formMeta}>
|
|
22111
|
+
<SpsDl compact>
|
|
22112
|
+
<SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
|
|
22113
|
+
<SpsDd>
|
|
22114
|
+
<SpsTextInput
|
|
22115
|
+
value={formValue.term1}
|
|
22116
|
+
formMeta={formMeta.fields.term1}
|
|
22117
|
+
placeholder="Description"
|
|
22118
|
+
/>
|
|
22119
|
+
</SpsDd>
|
|
22120
|
+
<SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
|
|
22121
|
+
<SpsDd>
|
|
22122
|
+
<SpsTextInput
|
|
22123
|
+
value={formValue.term2}
|
|
22124
|
+
formMeta={formMeta.fields.term2}
|
|
22125
|
+
placeholder="Description"
|
|
22126
|
+
/>
|
|
22127
|
+
</SpsDd>
|
|
22128
|
+
<SpsDt
|
|
22129
|
+
id="accomplishmentsLabel"
|
|
22130
|
+
labelFor={formMeta.fields.term3}
|
|
22131
|
+
help="Enter a description"
|
|
22132
|
+
>
|
|
22133
|
+
Term3
|
|
22134
|
+
</SpsDt>
|
|
22135
|
+
<SpsDd>
|
|
22136
|
+
<SpsTextInput
|
|
22137
|
+
value={formValue.term3}
|
|
22138
|
+
formMeta={formMeta.fields.term3}
|
|
22139
|
+
placeholder="Description"
|
|
22140
|
+
/>
|
|
22141
|
+
</SpsDd>
|
|
22142
|
+
</SpsDl>
|
|
22143
|
+
</SpsForm>
|
|
22144
|
+
</Item>
|
|
22145
|
+
<Item key="1-to-2" title="1-to-2">
|
|
22146
|
+
<SpsForm formMeta={formMeta}>
|
|
22147
|
+
<SpsDl wideTerms compact>
|
|
22148
|
+
<SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
|
|
22149
|
+
<SpsDd>
|
|
22150
|
+
<SpsTextInput
|
|
22151
|
+
value={formValue.term1}
|
|
22152
|
+
formMeta={formMeta.fields.term1}
|
|
22153
|
+
placeholder="Description"
|
|
22154
|
+
/>
|
|
22155
|
+
</SpsDd>
|
|
22156
|
+
<SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
|
|
22157
|
+
<SpsDd>
|
|
22158
|
+
<SpsTextInput
|
|
22159
|
+
value={formValue.term2}
|
|
22160
|
+
formMeta={formMeta.fields.term2}
|
|
22161
|
+
placeholder="Description"
|
|
22162
|
+
/>
|
|
22163
|
+
</SpsDd>
|
|
22164
|
+
<SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
|
|
22165
|
+
>Term 3</SpsDt>
|
|
22166
|
+
<SpsDd>
|
|
22167
|
+
<SpsTextInput
|
|
22168
|
+
value={formValue.term3}
|
|
22169
|
+
formMeta={formMeta.fields.term3}
|
|
22170
|
+
placeholder="Description"
|
|
22171
|
+
/>
|
|
22172
|
+
</SpsDd>
|
|
22173
|
+
</SpsDl>
|
|
22174
|
+
</SpsForm>
|
|
22175
|
+
</Item>
|
|
22176
|
+
<Item key="1-to-1" title="1-to-1">
|
|
22177
|
+
<SpsForm formMeta={formMeta}>
|
|
22178
|
+
<SpsDl widerTerms compact>
|
|
22179
|
+
<SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
|
|
22180
|
+
<SpsDd>
|
|
22181
|
+
<SpsTextInput
|
|
22182
|
+
value={formValue.term1}
|
|
22183
|
+
formMeta={formMeta.fields.term1}
|
|
22184
|
+
placeholder="Description"
|
|
22185
|
+
/>
|
|
22186
|
+
</SpsDd>
|
|
22187
|
+
<SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
|
|
22188
|
+
<SpsDd>
|
|
22189
|
+
<SpsTextInput
|
|
22190
|
+
value={formValue.term2}
|
|
22191
|
+
formMeta={formMeta.fields.term2}
|
|
22192
|
+
placeholder="Description"
|
|
22193
|
+
/>
|
|
22194
|
+
</SpsDd>
|
|
22195
|
+
<SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
|
|
22196
|
+
<SpsDd>
|
|
22197
|
+
<SpsTextInput
|
|
22198
|
+
value={formValue.term3}
|
|
22199
|
+
formMeta={formMeta.fields.term3}
|
|
22200
|
+
placeholder="Description"
|
|
22201
|
+
/>
|
|
22202
|
+
</SpsDd>
|
|
22203
|
+
</SpsDl>
|
|
22204
|
+
</SpsForm>
|
|
22205
|
+
</Item>
|
|
22206
|
+
</SpsTabsV2>
|
|
22207
|
+
</SpsCardV2>
|
|
22208
|
+
)
|
|
22209
|
+
}
|
|
22210
|
+
`
|
|
22033
22211
|
}
|
|
22034
22212
|
}
|
|
22035
22213
|
}
|
|
@@ -32995,7 +33173,7 @@ const SpsSelectExamples = {
|
|
|
32995
33173
|
const sizes = [
|
|
32996
33174
|
{ size: "S", price: "10.99" },
|
|
32997
33175
|
{ size: "M", price: "12.99" },
|
|
32998
|
-
{ size: "
|
|
33176
|
+
{ size: "L", price: "14.99" },
|
|
32999
33177
|
]
|
|
33000
33178
|
|
|
33001
33179
|
return (
|
|
@@ -33014,9 +33192,9 @@ const SpsSelectExamples = {
|
|
|
33014
33192
|
react: code`
|
|
33015
33193
|
function DemoComponent() {
|
|
33016
33194
|
const sizes = [
|
|
33017
|
-
{ size: "S", price: "
|
|
33018
|
-
{ size: "M", price: "
|
|
33019
|
-
{ size: "
|
|
33195
|
+
{ size: "S", price: "10.99" },
|
|
33196
|
+
{ size: "M", price: "12.99" },
|
|
33197
|
+
{ size: "L", price: "14.99" },
|
|
33020
33198
|
]
|
|
33021
33199
|
return (
|
|
33022
33200
|
<div className="sfg-row">
|
|
@@ -33041,12 +33219,10 @@ const SpsSelectExamples = {
|
|
|
33041
33219
|
const colors = ["red", "blue", "green"];
|
|
33042
33220
|
const [action, updateAction] = useSpsAction(
|
|
33043
33221
|
{
|
|
33044
|
-
label: "
|
|
33045
|
-
icon: "
|
|
33046
|
-
href: "#/overview",
|
|
33047
|
-
newTab: true
|
|
33222
|
+
label: "Add Option",
|
|
33223
|
+
icon: "plus-sign",
|
|
33048
33224
|
},
|
|
33049
|
-
() =>
|
|
33225
|
+
() => alert("Add an option!")
|
|
33050
33226
|
);
|
|
33051
33227
|
|
|
33052
33228
|
function handleChange(event) {
|
|
@@ -37772,6 +37948,7 @@ const MANIFEST = {
|
|
|
37772
37948
|
examples: SpsDatetimeExamples
|
|
37773
37949
|
},
|
|
37774
37950
|
"Description Lists": {
|
|
37951
|
+
description: () => /* @__PURE__ */ React.createElement("p", null, "Description Lists display a series of terms with accompanying descriptions such as a glossary of terms."),
|
|
37775
37952
|
components: [SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListTerm],
|
|
37776
37953
|
examples: SpsDescriptionListExamples
|
|
37777
37954
|
},
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-react",
|
|
3
3
|
"description": "SPS Design System React components",
|
|
4
|
-
"version": "6.12.
|
|
4
|
+
"version": "6.12.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@react-stately/collections": "^3.3.3",
|
|
31
|
-
"@spscommerce/ds-colors": "6.12.
|
|
32
|
-
"@spscommerce/ds-illustrations": "6.12.
|
|
33
|
-
"@spscommerce/ds-shared": "6.12.
|
|
34
|
-
"@spscommerce/positioning": "6.12.
|
|
31
|
+
"@spscommerce/ds-colors": "6.12.1",
|
|
32
|
+
"@spscommerce/ds-illustrations": "6.12.1",
|
|
33
|
+
"@spscommerce/ds-shared": "6.12.1",
|
|
34
|
+
"@spscommerce/positioning": "6.12.1",
|
|
35
35
|
"@spscommerce/utils": "^6.11.3",
|
|
36
36
|
"moment": "^2.25.3",
|
|
37
37
|
"moment-timezone": "^0.5.28",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@react-stately/collections": "^3.3.3",
|
|
43
|
-
"@spscommerce/ds-colors": "6.12.
|
|
44
|
-
"@spscommerce/ds-illustrations": "6.12.
|
|
45
|
-
"@spscommerce/ds-shared": "6.12.
|
|
46
|
-
"@spscommerce/positioning": "6.12.
|
|
43
|
+
"@spscommerce/ds-colors": "6.12.1",
|
|
44
|
+
"@spscommerce/ds-illustrations": "6.12.1",
|
|
45
|
+
"@spscommerce/ds-shared": "6.12.1",
|
|
46
|
+
"@spscommerce/positioning": "6.12.1",
|
|
47
47
|
"@spscommerce/utils": "^6.11.3",
|
|
48
48
|
"@testing-library/react": "^9.3.2",
|
|
49
49
|
"@types/prop-types": "^15.7.1",
|