@spscommerce/ds-react 6.11.3 → 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.
Files changed (4) hide show
  1. package/lib/form/hooks/useSpsForm.d.ts +5 -1
  2. package/lib/index.cjs.js +656 -482
  3. package/lib/index.es.js +349 -172
  4. package/package.json +11 -11
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 List",
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
- basic: {
21860
- jsx: code`
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
- <SpsDt>Term 1</SpsDt>
21863
- <SpsDd>Definition</SpsDd>
21864
- <SpsDt>Term</SpsDt>
21865
- <SpsDd>Definition</SpsDd>
21866
- <SpsDt>
21867
- Term that wraps to the next line cause it's got so dang much text in it.
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
- jsx: code`
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>Definition</SpsDd>
21995
- <SpsDt>Term</SpsDt>
21996
- <SpsDd>Definition</SpsDd>
21997
- <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
21998
- <SpsDd>Definition</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
- d_columnWidths: {
22008
- label: "Alternate Column Widths",
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
- wideTerms: {
22011
- jsx: code`
22012
- <SpsDl wideTerms>
22013
- <SpsDt>Term 1</SpsDt>
22014
- <SpsDd>Definition</SpsDd>
22015
- <SpsDt>Term</SpsDt>
22016
- <SpsDd>Definition</SpsDd>
22017
- <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
22018
- <SpsDd>Definition</SpsDd>
22019
- </SpsDl>
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
- widerTerms: {
22023
- jsx: code`
22024
- <SpsDl widerTerms>
22025
- <SpsDt>Term 1</SpsDt>
22026
- <SpsDd>Definition</SpsDd>
22027
- <SpsDt>Term</SpsDt>
22028
- <SpsDd>Definition</SpsDd>
22029
- <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
22030
- <SpsDd>Definition</SpsDd>
22031
- </SpsDl>
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: "S", price: "10.99" },
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: "$10.99" },
33018
- { size: "M", price: "$12.99" },
33019
- { size: "S", price: "$10.99" },
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: "Go to Overview",
33045
- icon: "dashboard",
33046
- href: "#/overview",
33047
- newTab: true
33222
+ label: "Add Option",
33223
+ icon: "plus-sign",
33048
33224
  },
33049
- () => console.log("Action")
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.11.3",
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,11 +28,11 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@react-stately/collections": "^3.3.3",
31
- "@spscommerce/ds-colors": "6.11.3",
32
- "@spscommerce/ds-illustrations": "6.11.3",
33
- "@spscommerce/ds-shared": "6.11.3",
34
- "@spscommerce/positioning": "6.11.3",
35
- "@spscommerce/utils": "6.11.3",
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
+ "@spscommerce/utils": "^6.11.3",
36
36
  "moment": "^2.25.3",
37
37
  "moment-timezone": "^0.5.28",
38
38
  "react": "^16.9.0",
@@ -40,11 +40,11 @@
40
40
  },
41
41
  "devDependencies": {
42
42
  "@react-stately/collections": "^3.3.3",
43
- "@spscommerce/ds-colors": "6.11.3",
44
- "@spscommerce/ds-illustrations": "6.11.3",
45
- "@spscommerce/ds-shared": "6.11.3",
46
- "@spscommerce/positioning": "6.11.3",
47
- "@spscommerce/utils": "6.11.3",
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
+ "@spscommerce/utils": "^6.11.3",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",
50
50
  "@types/react": "^16.9.0",