@automattic/vip-design-system 2.13.11 → 2.13.12

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 (8) hide show
  1. package/build/system/Wizard/Wizard.js +2 -0
  2. package/build/system/Wizard/Wizard.stories.js +1 -0
  3. package/build/system/Wizard/WizardStep.d.ts +2 -1
  4. package/build/system/Wizard/WizardStep.js +6 -3
  5. package/package.json +1 -1
  6. package/src/system/Wizard/Wizard.stories.tsx +1 -0
  7. package/src/system/Wizard/Wizard.tsx +2 -0
  8. package/src/system/Wizard/WizardStep.tsx +6 -3
package/build/system/Wizard/Wizard.js CHANGED
@@ -51,6 +51,7 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
51
51
  onChange = _ref2.onChange,
52
52
  actionLabel = _ref2.actionLabel,
53
53
  actionIcon = _ref2.actionIcon,
54
+ actionDisabled = _ref2.actionDisabled,
54
55
  summaryTitle = _ref2.summaryTitle;
55
56
  return _jsx(WizardStep, {
56
57
  active: index === activeStep,
@@ -69,6 +70,7 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
69
70
  showStepText: showStepText,
70
71
  summaryAs: summaryAs,
71
72
  summaryTitle: summaryTitle,
73
+ actionDisabled: actionDisabled,
72
74
  children: children
73
75
  }, index);
74
76
  })
package/build/system/Wizard/Wizard.stories.js CHANGED
@@ -95,6 +95,7 @@ export var WithTitleAutoFocus = function WithTitleAutoFocus() {
95
95
  return setActiveStep(1);
96
96
  },
97
97
  actionLabel: 'Edit',
98
+ actionDisabled: true,
98
99
  actionIcon: _jsx(BsPencil, {}),
99
100
  children: _jsxs(Box, {
100
101
  children: [_jsx(Label, {
package/build/system/Wizard/WizardStep.d.ts CHANGED
@@ -24,7 +24,8 @@ export interface WizardStepProps {
24
24
  summaryAs?: 'table' | 'dl';
25
25
  shouldFocusTitle?: boolean;
26
26
  actionLabel?: string;
27
- showStepText?: boolean;
28
27
  actionIcon?: React.ReactNode;
28
+ actionDisabled?: boolean;
29
+ showStepText?: boolean;
29
30
  }
30
31
  export declare const WizardStep: React.ForwardRefExoticComponent<WizardStepProps & React.RefAttributes<HTMLDivElement>>;
package/build/system/Wizard/WizardStep.js CHANGED
@@ -34,9 +34,11 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
34
34
  onChange = _ref.onChange,
35
35
  _ref$actionLabel = _ref.actionLabel,
36
36
  actionLabel = _ref$actionLabel === void 0 ? 'Change' : _ref$actionLabel,
37
+ actionIcon = _ref.actionIcon,
38
+ _ref$actionDisabled = _ref.actionDisabled,
39
+ actionDisabled = _ref$actionDisabled === void 0 ? false : _ref$actionDisabled,
37
40
  _ref$showStepText = _ref.showStepText,
38
- showStepText = _ref$showStepText === void 0 ? true : _ref$showStepText,
39
- actionIcon = _ref.actionIcon;
41
+ showStepText = _ref$showStepText === void 0 ? true : _ref$showStepText;
40
42
  var titleRef = React.useRef(null);
41
43
  var status = 'inactive';
42
44
  var statusText = 'Step not completed';
@@ -133,6 +135,7 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
133
135
  })]
134
136
  }), !active && (complete || skipped) && onChange && _jsxs(Button, {
135
137
  variant: "text",
138
+ disabled: actionDisabled,
136
139
  onClick: onChange,
137
140
  sx: {
138
141
  height: 'auto',
@@ -147,7 +150,7 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
147
150
  children: actionIcon
148
151
  })]
149
152
  })]
150
- }), !active && (complete || skipped) && summary && summary.length > 0 && _jsx(DescriptionList, {
153
+ }), !active && (complete || skipped) && summary && _jsx(DescriptionList, {
151
154
  as: summaryAs,
152
155
  list: summary,
153
156
  title: summaryTitle
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.13.11",
3
+ "version": "2.13.12",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
package/src/system/Wizard/Wizard.stories.tsx CHANGED
@@ -82,6 +82,7 @@ export const WithTitleAutoFocus = () => {
82
82
  titleVariant: 'h2',
83
83
  onChange: () => setActiveStep( 1 ),
84
84
  actionLabel: 'Edit',
85
+ actionDisabled: true,
85
86
  actionIcon: <BsPencil />,
86
87
  children: (
87
88
  <Box>
package/src/system/Wizard/Wizard.tsx CHANGED
@@ -58,6 +58,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
58
58
  onChange,
59
59
  actionLabel,
60
60
  actionIcon,
61
+ actionDisabled,
61
62
  summaryTitle,
62
63
  },
63
64
  index
@@ -80,6 +81,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
80
81
  showStepText={ showStepText }
81
82
  summaryAs={ summaryAs }
82
83
  summaryTitle={ summaryTitle }
84
+ actionDisabled={ actionDisabled }
83
85
  >
84
86
  { children }
85
87
  </WizardStep>
package/src/system/Wizard/WizardStep.tsx CHANGED
@@ -33,8 +33,9 @@ export interface WizardStepProps {
33
33
  summaryAs?: 'table' | 'dl';
34
34
  shouldFocusTitle?: boolean;
35
35
  actionLabel?: string;
36
- showStepText?: boolean;
37
36
  actionIcon?: React.ReactNode;
37
+ actionDisabled?: boolean;
38
+ showStepText?: boolean;
38
39
  }
39
40
 
40
41
  export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
@@ -55,8 +56,9 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
55
56
  summaryAs = 'table',
56
57
  onChange,
57
58
  actionLabel = 'Change',
58
- showStepText = true,
59
59
  actionIcon,
60
+ actionDisabled = false,
61
+ showStepText = true,
60
62
  },
61
63
  forwardRef
62
64
  ) => {
@@ -156,6 +158,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
156
158
  { ! active && ( complete || skipped ) && onChange && (
157
159
  <Button
158
160
  variant="text"
161
+ disabled={ actionDisabled }
159
162
  onClick={ onChange }
160
163
  sx={ { height: 'auto', alignSelf: 'flex-end' } }
161
164
  >
@@ -165,7 +168,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
165
168
  </Button>
166
169
  ) }
167
170
  </Flex>
168
- { ! active && ( complete || skipped ) && summary && summary.length > 0 && (
171
+ { ! active && ( complete || skipped ) && summary && (
169
172
  <DescriptionList as={ summaryAs } list={ summary } title={ summaryTitle } />
170
173
  ) }
171
174