@spscommerce/ds-react 6.8.0 → 6.10.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 (3) hide show
  1. package/lib/index.cjs.js +196 -91
  2. package/lib/index.es.js +213 -62
  3. package/package.json +11 -11
package/lib/index.es.js CHANGED
@@ -36028,85 +36028,235 @@ Object.assign(SpsToggle, {
36028
36028
  displayName: "SpsToggle"
36029
36029
  });
36030
36030
  const SpsToggleExamples = {
36031
- small: {
36032
- label: "Small",
36031
+ general: {
36032
+ label: "General Usage",
36033
+ description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Use Toggles:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", {
36034
+ className: "mb-2"
36035
+ }, 'When an option represents a specific "on/off" state.'), /* @__PURE__ */ React.createElement("li", {
36036
+ className: "mb-2"
36037
+ }, "When the selection causes an imeediate change in the system.")), /* @__PURE__ */ React.createElement("h5", null, "Do Not Use Toggles:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", {
36038
+ className: "mb-2"
36039
+ }, "When a selection does not cause an immediate change in the system.", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
36040
+ to: "checkbox"
36041
+ }, "Checkboxes"), " or", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
36042
+ to: "radio-buttons"
36043
+ }, "Radio Buttons"), " instead."), /* @__PURE__ */ React.createElement("li", {
36044
+ className: "mb-2"
36045
+ }, "Inside a form with a save/submit button as this contradicts the immediate change in the system that a toggle controls.")))
36046
+ },
36047
+ basic: {
36048
+ label: "Basic Toggles",
36049
+ description: () => /* @__PURE__ */ React.createElement("p", null, "Basic toggles can appear with or without labels and can include an extended description if necessary."),
36033
36050
  examples: {
36034
- a_small: {
36051
+ basic: {
36052
+ description: () => /* @__PURE__ */ React.createElement("h4", {
36053
+ className: "mb-3"
36054
+ }, "Toggle"),
36035
36055
  react: code`
36036
- function DemoComponent() {
36037
- const { formValue, formMeta, updateForm } = useSpsForm({
36038
- toggle: false
36039
- });
36056
+ function DemoComponent() {
36057
+ const { formValue, formMeta, updateForm } = useSpsForm({
36058
+ toggle: true
36059
+ });
36040
36060
 
36041
- return <SpsToggle formMeta={formMeta.fields.toggle}
36042
- active={formValue.toggle}
36043
- label="Main Label"
36044
- description="Extra descriptive text"
36045
- />;
36046
- }
36047
- `
36061
+ return (
36062
+ <SpsToggle
36063
+ active={formValue.toggle}
36064
+ />
36065
+ )
36066
+ }
36067
+ `
36048
36068
  },
36049
- b_changeHandler: {
36050
- description: "With UseState",
36069
+ label: {
36070
+ description: () => /* @__PURE__ */ React.createElement("h4", {
36071
+ className: "mb-3"
36072
+ }, "Toggle + Label"),
36051
36073
  react: code`
36052
- function DemoComponent() {
36053
- function changeHandler() {
36054
- setActive(!checked);
36055
- }
36056
- const [active, setActive] = React.useState();
36057
- return (
36058
- <SpsToggle active={active} onChange={changeHandler}/>
36059
- )
36060
- }
36061
- `
36074
+ function DemoComponent() {
36075
+ const { formValue, formMeta, updateForm } = useSpsForm({
36076
+ toggle: true
36077
+ });
36078
+
36079
+ return (
36080
+ <SpsToggle
36081
+ active={formValue.toggle}
36082
+ label="Label"
36083
+ />
36084
+ )
36085
+ }
36086
+ `
36087
+ },
36088
+ extendedDescription: {
36089
+ description: () => /* @__PURE__ */ React.createElement("h4", {
36090
+ className: "mb-3"
36091
+ }, "Toggle + Label with Extended Description"),
36092
+ react: code`
36093
+ function DemoComponent() {
36094
+ const { formValue, formMeta, updateForm } = useSpsForm({
36095
+ toggle: true
36096
+ });
36097
+
36098
+ return (
36099
+ <SpsToggle
36100
+ active={formValue.toggle}
36101
+ label="Label"
36102
+ description="(optional extended description)"
36103
+ />
36104
+ )
36105
+ }
36106
+ `
36062
36107
  }
36063
36108
  }
36064
36109
  },
36065
- b_large: {
36066
- label: "Large",
36110
+ groups: {
36111
+ label: "Toggle Groups",
36112
+ description: () => /* @__PURE__ */ React.createElement("p", null, "Toggle Groups can appear as one of the two types listed."),
36067
36113
  examples: {
36068
- a_large: {
36114
+ group: {
36115
+ description: () => /* @__PURE__ */ React.createElement("h4", {
36116
+ className: "mb-3"
36117
+ }, "Toggle Group"),
36069
36118
  react: code`
36070
- function DemoComponent() {
36071
- const { formValue, formMeta, updateForm } = useSpsForm({
36072
- toggle: true
36073
- });
36119
+ function DemoComponent() {
36120
+ const { formValue, formMeta, updateForm } = useSpsForm({
36121
+ toggleLabel: true,
36122
+ toggle1: true,
36123
+ toggle2: true,
36124
+ toggle3: true,
36125
+ });
36074
36126
 
36075
- return <SpsToggle large formMeta={formMeta.fields.toggle}
36076
- active={formValue.toggle}
36077
- />;
36078
- }
36079
- `
36127
+ return (
36128
+ <>
36129
+ <SpsLabel for={formMeta.fields.toggleLabel}>Section Label</SpsLabel>
36130
+ <SpsToggle
36131
+ active={formValue.toggle1}
36132
+ label="Label"
36133
+ description="(optional extended description)"
36134
+ />
36135
+ <SpsToggle
36136
+ active={formValue.toggle2}
36137
+ label="Label"
36138
+ />
36139
+ <SpsToggle
36140
+ active={formValue.toggle3}
36141
+ label="Label"
36142
+ description="(optional extended description)"
36143
+ />
36144
+ </>
36145
+ )
36146
+ }
36147
+ `
36148
+ },
36149
+ alternate: {
36150
+ description: () => /* @__PURE__ */ React.createElement("h4", {
36151
+ className: "mb-3"
36152
+ }, "Toggle Group Alternate"),
36153
+ react: code`
36154
+ function DemoComponent() {
36155
+ const { formValue, formMeta, updateForm } = useSpsForm({
36156
+ toggleLabel: true,
36157
+ toggle1: true,
36158
+ toggle2: true,
36159
+ toggle3: true,
36160
+ });
36161
+
36162
+ return (
36163
+ <>
36164
+ <SpsLabel for={formMeta.fields.toggleLabel}>Section Label</SpsLabel>
36165
+ <div className="sfg-row">
36166
+ <div className="sfg-col-3">
36167
+ <div className="sfg-row">
36168
+ <div className="sfg-col-6">
36169
+ <span>Label</span>
36170
+ </div>
36171
+ <div className="sfg-col-6">
36172
+ <SpsToggle
36173
+ active={formValue.toggle1}
36174
+ />
36175
+ </div>
36176
+ </div>
36177
+ <div className="sfg-row">
36178
+ <div className="sfg-col-6">
36179
+ <span>Label</span>
36180
+ </div>
36181
+ <div className="sfg-col-6">
36182
+ <SpsToggle
36183
+ active={formValue.toggle2}
36184
+ />
36185
+ </div>
36186
+ </div>
36187
+ <div className="sfg-row">
36188
+ <div className="sfg-col-6">
36189
+ <span>Label</span>
36190
+ </div>
36191
+ <div className="sfg-col-6">
36192
+ <SpsToggle
36193
+ active={formValue.toggle3}
36194
+ />
36195
+ </div>
36196
+ </div>
36197
+ </div>
36198
+ </div>
36199
+ </>
36200
+ )
36201
+ }
36202
+ `
36080
36203
  }
36081
36204
  }
36082
36205
  },
36083
- d_disabled: {
36084
- label: "Disabled",
36206
+ disabled: {
36207
+ label: "Disabled States",
36208
+ description: () => /* @__PURE__ */ React.createElement("p", null, "Toggles have a disabled style for each possible state."),
36085
36209
  examples: {
36086
- disabled: {
36210
+ basic: {
36087
36211
  react: code`
36088
- function DemoComponent() {
36089
- const { formValue, formMeta, updateForm } = useSpsForm({
36090
- toggleA: false,
36091
- toggleB: true,
36092
- });
36212
+ function DemoComponent() {
36213
+ const { formValue, formMeta, updateForm } = useSpsForm({
36214
+ toggle: true
36215
+ });
36093
36216
 
36094
- return <>
36095
- <SpsToggle formMeta={formMeta.fields.toggleA}
36096
- active={formValue.toggleA}
36097
- label="Main Label"
36098
- description="Extra descriptive text"
36099
- disabled
36100
- />
36101
- <SpsToggle formMeta={formMeta.fields.toggleB}
36102
- active={formValue.toggleB}
36103
- label="Main Label"
36104
- description="Extra descriptive text"
36105
- disabled
36106
- />
36107
- </>;
36108
- }
36109
- `
36217
+ return (
36218
+ <SpsToggle
36219
+ active={formValue.toggle}
36220
+ disabled
36221
+ />
36222
+ )
36223
+ }
36224
+ `
36225
+ },
36226
+ label: {
36227
+ react: code`
36228
+ function DemoComponent() {
36229
+ const { formValue, formMeta, updateForm } = useSpsForm({
36230
+ toggle: true
36231
+ });
36232
+
36233
+ return (
36234
+ <SpsToggle
36235
+ active={formValue.toggle}
36236
+ label="Label"
36237
+ disabled
36238
+ />
36239
+ )
36240
+ }
36241
+ `
36242
+ },
36243
+ extendedDescription: {
36244
+ react: code`
36245
+ function DemoComponent() {
36246
+ const { formValue, formMeta, updateForm } = useSpsForm({
36247
+ toggle: true
36248
+ });
36249
+
36250
+ return (
36251
+ <SpsToggle
36252
+ active={formValue.toggle}
36253
+ label="Label"
36254
+ description="(optional extended description)"
36255
+ disabled
36256
+ />
36257
+ )
36258
+ }
36259
+ `
36110
36260
  }
36111
36261
  }
36112
36262
  }
@@ -37783,6 +37933,7 @@ const MANIFEST = {
37783
37933
  examples: SpsTextareaExamples
37784
37934
  },
37785
37935
  Toggle: {
37936
+ description: () => /* @__PURE__ */ React.createElement("p", null, "Toggles allow a user to immediately turn a setting on or off."),
37786
37937
  components: [SpsToggle],
37787
37938
  examples: SpsToggleExamples
37788
37939
  },
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.8.0",
4
+ "version": "6.10.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.8.0",
32
- "@spscommerce/ds-illustrations": "6.8.0",
33
- "@spscommerce/ds-shared": "6.8.0",
34
- "@spscommerce/positioning": "6.8.0",
35
- "@spscommerce/utils": "6.8.0",
31
+ "@spscommerce/ds-colors": "6.10.1",
32
+ "@spscommerce/ds-illustrations": "6.10.1",
33
+ "@spscommerce/ds-shared": "6.10.1",
34
+ "@spscommerce/positioning": "6.10.1",
35
+ "@spscommerce/utils": "6.10.1",
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.8.0",
44
- "@spscommerce/ds-illustrations": "6.8.0",
45
- "@spscommerce/ds-shared": "6.8.0",
46
- "@spscommerce/positioning": "6.8.0",
47
- "@spscommerce/utils": "6.8.0",
43
+ "@spscommerce/ds-colors": "6.10.1",
44
+ "@spscommerce/ds-illustrations": "6.10.1",
45
+ "@spscommerce/ds-shared": "6.10.1",
46
+ "@spscommerce/positioning": "6.10.1",
47
+ "@spscommerce/utils": "6.10.1",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",
50
50
  "@types/react": "^16.9.0",