refactor(slider): ♻️ remove orientation from verticalSlider (#375)

refactor(slider): ♻️  remove orientation from verticalSlider

Author: kodiakhq[bot]

src/slider/stories/SliderSingleVertical.component.tsx

@@ -20,12 +20,13 @@ export type SliderSingleVerticalProps = SliderBaseStateProps & {
   showTip?: boolean;
 };
 
-export const SliderSingleVertical: React.FC<
-  SliderSingleVerticalProps
-> = props => {
+export const SliderSingleVertical: React.FC<SliderSingleVerticalProps> = ({
+  orientation = "vertical",
+  ...props
+}) => {
   const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const state = useSliderBaseState(props);
+  const state = useSliderBaseState({ ...props, orientation });
   const slider = useSliderState({ ...rest, label: sliderLabel, state });
   const { getThumbValueLabel, getValuePercent, values } = state;
 
@@ -52,7 +53,7 @@ export const SliderSingleVertical: React.FC<
         <Thumb
           index={0}
           state={state}
-          orientation={props.orientation}
+          orientation={orientation}
           isDisabled={props.isDisabled}
           trackRef={slider.trackRef}
           aria-label="Thumb"

src/slider/stories/SliderSingleVertical.stories.tsx

@@ -30,22 +30,18 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: {
-    orientation: "vertical",
-  },
+  args: {},
 };
 
 export const ThumbTip: Story = {
   args: {
-    orientation: "vertical",
     label: "Thumb Tipped",
     showTip: true,
   },
 };
 
 export const MinMax: Story = {
   args: {
-    orientation: "vertical",
     label: "Min Max",
     minValue: 20,
     maxValue: 80,
@@ -54,23 +50,20 @@ export const MinMax: Story = {
 
 export const Step: Story = {
   args: {
-    orientation: "vertical",
     label: "Stepped",
     step: 10,
   },
 };
 
 export const DefaultValue: Story = {
   args: {
-    orientation: "vertical",
     label: "Default Valued",
     defaultValue: [80],
   },
 };
 
 export const FormatOptions: Story = {
   args: {
-    orientation: "vertical",
     label: "Temperature Formatted",
     formatOptions: {
       style: "unit",
@@ -82,7 +75,6 @@ export const FormatOptions: Story = {
 
 export const Disabled: Story = {
   args: {
-    orientation: "vertical",
     label: "Disabled",
     isDisabled: true,
   },