Added option to allow click handlers

elastic · Feb 8, 2018 · 38b12e6 · 38b12e6
1 parent a373773
commit 38b12e6
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 0 deletions.
diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js
@@ -8,6 +8,7 @@ const horizontalSteps = [
   {
     title: 'Completed Step 1',
     isComplete: true,
+    onClick: () => window.alert('Step 1 clicked')
   },
   {
     title: 'Selected Step 2',

diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
@@ -34,6 +34,11 @@
     }
   }
 
+  // disabled state
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
   // create the connecting lines
   position: relative;
   &::before,

diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js
@@ -14,6 +14,7 @@ export const EuiStepHorizontal = ({
   title,
   isSelected,
   isComplete,
+  onClick,
   disabled,
   ...rest
 }) => {
@@ -49,6 +50,7 @@ export const EuiStepHorizontal = ({
       aria-selected={!!isSelected}
       type="button"
       className={classes}
+      onClick={onClick}
       disabled={disabled}
       title={buttonTitle}
       {...rest}

diff --git a/src/components/steps/steps_horizontal.js b/src/components/steps/steps_horizontal.js
@@ -13,6 +13,7 @@ function renderHorizontalSteps(steps) {
       className,
       disabled,
       isSelected,
+      onClick,
       ...rest
     } = step;
 
@@ -23,6 +24,7 @@ function renderHorizontalSteps(steps) {
         step={index + 1}
         disabled={disabled}
         isSelected={isSelected}
+        onClick={onClick}
         {...rest}
       >
         {children}

diff --git a/src/components/steps/steps_horizontal.test.js b/src/components/steps/steps_horizontal.test.js
@@ -8,6 +8,7 @@ const steps = [
   {
     title: 'Completed Step 1',
     isComplete: true,
+    onClick: () => window.alert('Step 1 clicked'),
   },
   {
     title: 'Selected Step 2',