diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 57887cd3b..b83f1ed04 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,3 +1,4 @@
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: { expanded: true },
 };
diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx
index 0e2d80ce9..7b462e45d 100644
--- a/src/calendar/stories/Calendar.stories.tsx
+++ b/src/calendar/stories/Calendar.stories.tsx
@@ -1,18 +1,56 @@
+import "./index.css";
 import * as React from "react";
-import { Meta } from "@storybook/react";
+import { Meta, Story } from "@storybook/react";
 import { addWeeks, format, subWeeks } from "date-fns";
 
-import "./index.css";
 import { CalendarComponent } from "./CalendarComponent";
 
 export default {
   title: "Calendar",
+  component: CalendarComponent,
+  argTypes: {
+    value: { control: "date" },
+    minValue: { control: "date" },
+    maxValue: { control: "date" },
+    defaultValue: { control: "date", defaultValue: new Date() },
+  },
 } as Meta;
 
-export const Default = () => <CalendarComponent />;
-export const DefaultValue = () => (
-  <CalendarComponent defaultValue="2001-01-01" />
-);
+const Base: Story = args => {
+  args.value &&= format(new Date(args.value), "yyyy-MM-dd");
+  args.defaultValue &&= format(new Date(args.defaultValue), "yyyy-MM-dd");
+  args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
+  args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
+
+  return <CalendarComponent {...args} />;
+};
+
+export const Default = Base.bind({});
+
+export const DefaultValue = Base.bind({});
+DefaultValue.args = { defaultValue: "2001-01-01" };
+
+export const MinMaxDate = Base.bind({});
+MinMaxDate.args = {
+  minValue: format(new Date(), "yyyy-MM-dd"),
+  maxValue: format(addWeeks(new Date(), 1), "yyyy-MM-dd"),
+};
+
+export const MinMaxDefaultDate = Base.bind({});
+MinMaxDefaultDate.args = {
+  defaultValue: format(new Date(2020, 10, 7), "yyyy-MM-dd"),
+  minValue: format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd"),
+  maxValue: format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd"),
+};
+
+export const Options = Base.bind({});
+Options.args = {
+  value: format(new Date(), "yyyy-MM-dd"),
+  isDisabled: false,
+  isReadOnly: false,
+  autoFocus: false,
+};
+
 export const ControlledValue = () => {
   const [value, setValue] = React.useState("2020-10-13");
 
@@ -27,27 +65,3 @@ export const ControlledValue = () => {
     </div>
   );
 };
-
-export const MinMaxDate = () => (
-  <CalendarComponent
-    minValue={format(new Date(), "yyyy-MM-dd")}
-    maxValue={format(addWeeks(new Date(), 1), "yyyy-MM-dd")}
-  />
-);
-
-export const MinMaxDefaultDate = () => (
-  <CalendarComponent
-    defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
-    minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-    maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-  />
-);
-
-export const isDisabled = () => <CalendarComponent isDisabled />;
-
-export const isReadOnly = () => <CalendarComponent isReadOnly />;
-
-export const autoFocus = () => (
-  // eslint-disable-next-line jsx-a11y/no-autofocus
-  <CalendarComponent autoFocus />
-);
diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx
index c8e8ba0a1..71b352b89 100644
--- a/src/calendar/stories/RangeCalendar.stories.tsx
+++ b/src/calendar/stories/RangeCalendar.stories.tsx
@@ -1,94 +1,75 @@
-import * as React from "react";
-import { Meta } from "@storybook/react";
-import { addDays, addWeeks, subDays, format } from "date-fns";
 import "./range-style.css";
-
-import {
-  ChevronLeft,
-  ChevronRight,
-  DoubleChevronLeft,
-  DoubleChevronRight,
-} from "./svg-icons";
-
-import {
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
-  CalendarHeader,
-  CalendarButton,
-  CalendarCellButton,
-  CalendarWeekTitle,
-} from "../index";
 import {
-  useRangeCalendarState,
-  RangeCalendarInitialState,
-} from "../RangeCalendarState";
+  addDays,
+  addWeeks,
+  subDays,
+  format,
+  setDate,
+  subWeeks,
+} from "date-fns";
+import * as React from "react";
+import { Meta, Story } from "@storybook/react";
+import RangeCalendarComponent from "./RangeCalendarComponent";
 
 export default {
   title: "RangeCalendar",
+  component: RangeCalendarComponent,
+  argTypes: {
+    start: { control: "date", name: "value.start" },
+    end: { control: "date", name: "value.end" },
+    defaultStart: {
+      control: "date",
+      name: "default.start",
+    },
+    defaultEnd: {
+      control: "date",
+      name: "default.end",
+    },
+    minValue: { control: "date" },
+    maxValue: { control: "date" },
+  },
 } as Meta;
 
-const RangeCalendarComp: React.FC<RangeCalendarInitialState> = props => {
-  const state = useRangeCalendarState(props);
+const Base: Story = args => {
+  args.value = {
+    start: args.start && format(new Date(args.start), "yyyy-MM-dd"),
+    end: args.end && format(new Date(args.end), "yyyy-MM-dd"),
+  };
+  args.defaultValue = {
+    start:
+      args.defaultStart && format(new Date(args.defaultStart), "yyyy-MM-dd"),
+    end: args.defaultEnd && format(new Date(args.defaultEnd), "yyyy-MM-dd"),
+  };
+  args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
+  args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return (
-    <Calendar {...state} className="calendar-range">
-      <div className="header">
-        <CalendarButton {...state} goto="previousYear" className="prev-year">
-          <DoubleChevronLeft />
-        </CalendarButton>
-        <CalendarButton {...state} goto="previousMonth" className="prev-month">
-          <ChevronLeft />
-        </CalendarButton>
-        <CalendarHeader {...state} />
-        <CalendarButton {...state} goto="nextMonth" className="next-month">
-          <ChevronRight />
-        </CalendarButton>
-        <CalendarButton {...state} goto="nextYear" className="next-year">
-          <DoubleChevronRight />
-        </CalendarButton>
-      </div>
+  return <RangeCalendarComponent {...args} />;
+};
 
-      <CalendarGrid {...state} as="table" className="dates">
-        <thead>
-          <tr>
-            {state.weekDays.map((day, dayIndex) => {
-              return (
-                <CalendarWeekTitle
-                  {...state}
-                  as="th"
-                  scope="col"
-                  key={dayIndex}
-                  dayIndex={dayIndex}
-                >
-                  <abbr title={day.title}>{day.abbr}</abbr>
-                </CalendarWeekTitle>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {state.daysInMonth.map((week, weekIndex) => (
-            <tr key={weekIndex}>
-              {week.map((day, dayIndex) => (
-                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
-                  <CalendarCellButton {...state} date={day} />
-                </CalendarCell>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </CalendarGrid>
-    </Calendar>
-  );
+export const Default = Base.bind({});
+
+export const DefaultValue = Base.bind({});
+DefaultValue.args = {
+  defaultStart: setDate(new Date(), 10),
+  defaultEnd: new Date(),
+};
+
+export const MinMaxDefaultDate = Base.bind({});
+MinMaxDefaultDate.args = {
+  minValue: subWeeks(new Date(), 1),
+  maxValue: addWeeks(new Date(), 1),
 };
 
-export const Default = () => <RangeCalendarComp />;
-export const DefaultValue = () => (
-  <RangeCalendarComp
-    defaultValue={{ start: "2019-10-07", end: "2019-10-30" }}
-  />
-);
+export const Options = Base.bind({});
+Options.args = {
+  start: new Date(),
+  end: addWeeks(new Date(), 1),
+  minValue: null,
+  maxValue: null,
+  isDisabled: false,
+  isReadOnly: false,
+  autoFocus: false,
+};
 
 export const ControlledValue = () => {
   const [start, setStart] = React.useState(
@@ -106,7 +87,7 @@ export const ControlledValue = () => {
         value={start}
       />
       <input type="date" onChange={e => setEnd(e.target.value)} value={end} />
-      <RangeCalendarComp
+      <RangeCalendarComponent
         value={{ start, end }}
         onChange={({ end, start }) => {
           setStart(start);
@@ -116,19 +97,3 @@ export const ControlledValue = () => {
     </div>
   );
 };
-
-export const MinMaxDefaultDate = () => (
-  <RangeCalendarComp
-    minValue={format(new Date(), "yyyy-MM-dd")}
-    maxValue={format(addWeeks(new Date(), 1), "yyyy-MM-dd")}
-  />
-);
-
-export const isDisabled = () => <RangeCalendarComp isDisabled />;
-
-export const isReadOnly = () => <RangeCalendarComp isReadOnly />;
-
-export const autoFocus = () => (
-  // eslint-disable-next-line jsx-a11y/no-autofocus
-  <RangeCalendarComp autoFocus />
-);
diff --git a/src/calendar/stories/RangeCalendarComponent.tsx b/src/calendar/stories/RangeCalendarComponent.tsx
new file mode 100644
index 000000000..c364db215
--- /dev/null
+++ b/src/calendar/stories/RangeCalendarComponent.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  DoubleChevronLeft,
+  DoubleChevronRight,
+} from "./svg-icons";
+
+import {
+  Calendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarButton,
+  CalendarCellButton,
+  CalendarWeekTitle,
+} from "../index";
+import {
+  useRangeCalendarState,
+  RangeCalendarInitialState,
+} from "../RangeCalendarState";
+
+const RangeCalendarComponent: React.FC<RangeCalendarInitialState> = props => {
+  const state = useRangeCalendarState(props);
+
+  return (
+    <Calendar {...state} className="calendar-range">
+      <div className="header">
+        <CalendarButton {...state} goto="previousYear" className="prev-year">
+          <DoubleChevronLeft />
+        </CalendarButton>
+        <CalendarButton {...state} goto="previousMonth" className="prev-month">
+          <ChevronLeft />
+        </CalendarButton>
+        <CalendarHeader {...state} />
+        <CalendarButton {...state} goto="nextMonth" className="next-month">
+          <ChevronRight />
+        </CalendarButton>
+        <CalendarButton {...state} goto="nextYear" className="next-year">
+          <DoubleChevronRight />
+        </CalendarButton>
+      </div>
+
+      <CalendarGrid {...state} as="table" className="dates">
+        <thead>
+          <tr>
+            {state.weekDays.map((day, dayIndex) => {
+              return (
+                <CalendarWeekTitle
+                  {...state}
+                  as="th"
+                  scope="col"
+                  key={dayIndex}
+                  dayIndex={dayIndex}
+                >
+                  <abbr title={day.title}>{day.abbr}</abbr>
+                </CalendarWeekTitle>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {state.daysInMonth.map((week, weekIndex) => (
+            <tr key={weekIndex}>
+              {week.map((day, dayIndex) => (
+                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
+                  <CalendarCellButton {...state} date={day} />
+                </CalendarCell>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </CalendarGrid>
+    </Calendar>
+  );
+};
+
+export default RangeCalendarComponent;
diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx
index 5757c127f..c227cae6c 100644
--- a/src/datepicker/stories/DatePicker.stories.tsx
+++ b/src/datepicker/stories/DatePicker.stories.tsx
@@ -1,66 +1,59 @@
+import "./index.css";
 import * as React from "react";
-import { Meta } from "@storybook/react";
+import { Meta, Story } from "@storybook/react";
 import { addWeeks, subWeeks, format } from "date-fns";
 
-import "./index.css";
-import {
-  DatePicker,
-  DatePickerSegment,
-  DatePickerSegmentField,
-  DatePickerContent,
-  DatePickerTrigger,
-  useDatePickerState,
-  DatePickerInitialState,
-} from "../index";
-import { CalendarComp } from "../../calendar/stories/CalendarComponent";
+import DatePickerComponent from "./DatePickerComponent";
 
 export default {
+  component: DatePickerComponent,
   title: "DatePicker",
+  argTypes: {
+    value: { control: "date" },
+    minValue: { control: "date" },
+    maxValue: { control: "date" },
+    defaultValue: { control: "date" },
+  },
 } as Meta;
 
-const DatePickerComp: React.FC<DatePickerInitialState> = props => {
-  const state = useDatePickerState({
-    formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },
-    ...props,
-  });
-
-  return (
-    <>
-      <DatePicker className="datepicker" {...state}>
-        <div className="datepicker__header">
-          <DatePickerSegmentField {...state} className="datepicker__field">
-            {state.segments.map((segment, i) => (
-              <DatePickerSegment
-                key={i}
-                segment={segment}
-                className="datepicker__field--item"
-                {...state}
-              />
-            ))}
-          </DatePickerSegmentField>
+const Base: Story = args => {
+  args.value &&= format(new Date(args.value), "yyyy-MM-dd");
+  args.defaultValue &&= format(new Date(args.defaultValue), "yyyy-MM-dd");
+  args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
+  args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-          <DatePickerTrigger className="datepicker__trigger" {...state}>
-            <CalendarIcon />
-          </DatePickerTrigger>
-        </div>
-      </DatePicker>
-      <DatePickerContent {...state}>
-        <CalendarComp {...state.calendar} />
-      </DatePickerContent>
-    </>
-  );
+  return <DatePickerComponent {...args} />;
 };
 
-const CalendarIcon = () => (
-  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img">
-    <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path>
-    <path d="M6 12h4v4H6zM12 12h4v4h-4zM18 12h4v4h-4zM24 12h4v4h-4zM6 18h4v4H6zM12 18h4v4h-4zM18 18h4v4h-4zM24 18h4v4h-4zM6 24h4v4H6zM12 24h4v4h-4zM18 24h4v4h-4zM24 24h4v4h-4z"></path>
-  </svg>
-);
+export const Default = Base.bind({});
+
+export const InitialDate = Base.bind({});
+InitialDate.args = { defaultDate: "2020-02-29" };
 
-export const Default = () => <DatePickerComp />;
+export const MinMaxDate = Base.bind({});
+MinMaxDate.args = {
+  minValue: new Date(),
+  maxValue: addWeeks(new Date(), 2),
+};
 
-export const InitialDate = () => <DatePickerComp defaultValue="2020-02-29" />;
+export const InValidDate = Base.bind({});
+InValidDate.args = {
+  defaultValue: addWeeks(new Date(), 2),
+  minValue: subWeeks(new Date(), 1),
+  maxValue: addWeeks(new Date(), 1),
+};
+
+export const Options = Base.bind({});
+Options.args = {
+  defaultValue: addWeeks(new Date(), 2),
+  value: addWeeks(new Date(), 2),
+  minValue: null,
+  maxValue: null,
+  autoFocus: false,
+  isDisabled: false,
+  isReadOnly: false,
+  formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },
+};
 
 export const ControllableState = () => {
   const [value, setValue] = React.useState("2020-10-13");
@@ -72,31 +65,7 @@ export const ControllableState = () => {
         onChange={e => setValue(e.target.value)}
         value={value}
       />
-      <DatePickerComp value={value} onChange={setValue} />
+      <DatePickerComponent value={value} onChange={setValue} />
     </div>
   );
 };
-
-export const MinMaxDate = () => (
-  <DatePickerComp
-    minValue={format(new Date(), "yyyy-MM-dd")}
-    maxValue={format(addWeeks(new Date(), 1), "yyyy-MM-dd")}
-  />
-);
-
-export const InValidDate = () => (
-  <DatePickerComp
-    defaultValue={format(addWeeks(new Date(), 2), "yyyy-MM-dd")}
-    minValue={format(subWeeks(new Date(), 1), "yyyy-MM-dd")}
-    maxValue={format(addWeeks(new Date(), 1), "yyyy-MM-dd")}
-  />
-);
-
-export const isDisabled = () => <DatePickerComp isDisabled />;
-
-export const isReadOnly = () => <DatePickerComp isReadOnly />;
-
-export const autoFocus = () => (
-  // eslint-disable-next-line jsx-a11y/no-autofocus
-  <DatePickerComp autoFocus />
-);
diff --git a/src/datepicker/stories/DatePickerComponent.tsx b/src/datepicker/stories/DatePickerComponent.tsx
new file mode 100644
index 000000000..e15bf9df5
--- /dev/null
+++ b/src/datepicker/stories/DatePickerComponent.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import {
+  DatePicker,
+  DatePickerSegment,
+  DatePickerContent,
+  DatePickerTrigger,
+  useDatePickerState,
+  DatePickerInitialState,
+  DatePickerSegmentField,
+} from "../index";
+import { CalendarComp } from "../../calendar/stories/CalendarComponent";
+
+const DatePickerComponent: React.FC<DatePickerInitialState> = props => {
+  const state = useDatePickerState({
+    formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },
+    ...props,
+  });
+
+  return (
+    <>
+      <DatePicker className="datepicker" {...state}>
+        <div className="datepicker__header">
+          <DatePickerSegmentField {...state} className="datepicker__field">
+            {state.segments.map((segment, i) => (
+              <DatePickerSegment
+                key={i}
+                segment={segment}
+                className="datepicker__field--item"
+                {...state}
+              />
+            ))}
+          </DatePickerSegmentField>
+
+          <DatePickerTrigger className="datepicker__trigger" {...state}>
+            <CalendarIcon />
+          </DatePickerTrigger>
+        </div>
+      </DatePicker>
+      <DatePickerContent {...state}>
+        <CalendarComp {...state.calendar} />
+      </DatePickerContent>
+    </>
+  );
+};
+
+export const CalendarIcon = () => (
+  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img">
+    <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path>
+    <path d="M6 12h4v4H6zM12 12h4v4h-4zM18 12h4v4h-4zM24 12h4v4h-4zM6 18h4v4H6zM12 18h4v4h-4zM18 18h4v4h-4zM24 18h4v4h-4zM6 24h4v4H6zM12 24h4v4h-4zM18 24h4v4h-4zM24 24h4v4h-4z"></path>
+  </svg>
+);
+
+export default DatePickerComponent;
diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DateRangePicker.stories.tsx
index da5e8e9d3..15dd05f47 100644
--- a/src/datepicker/stories/DateRangePicker.stories.tsx
+++ b/src/datepicker/stories/DateRangePicker.stories.tsx
@@ -1,174 +1,54 @@
+import "./index.css";
 import * as React from "react";
-import { Meta } from "@storybook/react";
+import { format } from "date-fns";
+import { Meta, Story } from "@storybook/react";
 import { addWeeks, setDate, subWeeks } from "date-fns";
 
-import {
-  ChevronLeft,
-  ChevronRight,
-  DoubleChevronLeft,
-  DoubleChevronRight,
-} from "../../calendar/stories/svg-icons";
-import "./index.css";
-
-import {
-  DatePicker,
-  DatePickerContent,
-  DatePickerSegment,
-  DatePickerTrigger,
-  DatePickerSegmentField,
-} from "../index";
-import {
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
-  CalendarHeader,
-  CalendarButton,
-  CalendarWeekTitle,
-  CalendarCellButton,
-  RangeCalendarStateReturn,
-} from "../../calendar";
-import {
-  useDateRangePickerState,
-  DateRangePickerInitialState,
-} from "../DateRangePickerState";
-import { stringifyDate } from "../../utils";
+import DateRangePickerComponent from "./DateRangePickerComponent";
 
 export default {
   title: "DateRangePicker",
+  component: DateRangePickerComponent,
+  argTypes: {
+    start: { control: "date", name: "value.start" },
+    end: { control: "date", name: "value.end" },
+    minValue: { control: "date" },
+    maxValue: { control: "date" },
+  },
 } as Meta;
 
-const RangeCalendarComp: React.FC<RangeCalendarStateReturn> = state => {
-  return (
-    <Calendar {...state} className="calendar-range">
-      <div className="header">
-        <CalendarButton {...state} goto="previousYear" className="prev-year">
-          <DoubleChevronLeft />
-        </CalendarButton>
-        <CalendarButton {...state} goto="previousMonth" className="prev-month">
-          <ChevronLeft />
-        </CalendarButton>
-        <CalendarHeader {...state} />
-        <CalendarButton {...state} goto="nextMonth" className="next-month">
-          <ChevronRight />
-        </CalendarButton>
-        <CalendarButton {...state} goto="nextYear" className="next-year">
-          <DoubleChevronRight />
-        </CalendarButton>
-      </div>
+const Base: Story = args => {
+  args.value = {
+    start: args.start && format(new Date(args.start), "yyyy-MM-dd"),
+    end: args.end && format(new Date(args.end), "yyyy-MM-dd"),
+  };
+  args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
+  args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-      <CalendarGrid {...state} as="table" className="dates">
-        <thead>
-          <tr>
-            {state.weekDays.map((day, dayIndex) => {
-              return (
-                <CalendarWeekTitle
-                  {...state}
-                  as="th"
-                  scope="col"
-                  key={dayIndex}
-                  dayIndex={dayIndex}
-                >
-                  <abbr title={day.title}>{day.abbr}</abbr>
-                </CalendarWeekTitle>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {state.daysInMonth.map((week, weekIndex) => (
-            <tr key={weekIndex}>
-              {week.map((day, dayIndex) => (
-                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
-                  <CalendarCellButton {...state} date={day} />
-                </CalendarCell>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </CalendarGrid>
-    </Calendar>
-  );
+  return <DateRangePickerComponent {...args} />;
 };
 
-const DateRangePickerComp: React.FC<DateRangePickerInitialState> = props => {
-  const state = useDateRangePickerState({
-    formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },
-    ...props,
-  });
+export const Default = Base.bind({});
 
-  return (
-    <>
-      <DatePicker aria-label="Date Range" className="datepicker" {...state}>
-        <div className="datepicker__header">
-          <DatePickerSegmentField
-            {...state.startSegmentState}
-            className="datepicker__field"
-            aria-label="start date"
-          >
-            {state.startSegmentState.segments.map((segment, i) => (
-              <DatePickerSegment
-                key={i}
-                segment={segment}
-                className="datepicker__field--item"
-                {...state}
-                {...state.startSegmentState}
-              />
-            ))}
-          </DatePickerSegmentField>
-          &nbsp;-&nbsp;
-          <DatePickerSegmentField
-            {...state.endSegmentState}
-            className="datepicker__field"
-            aria-label="end date"
-          >
-            {state.endSegmentState.segments.map((segment, i) => (
-              <DatePickerSegment
-                key={i}
-                segment={segment}
-                className="datepicker__field--item"
-                {...state}
-                {...state.endSegmentState}
-              />
-            ))}
-          </DatePickerSegmentField>
-          <DatePickerTrigger className="datepicker__trigger" {...state}>
-            <CalendarIcon />
-          </DatePickerTrigger>
-        </div>
-      </DatePicker>
-      <DatePickerContent {...state}>
-        <RangeCalendarComp {...state.calendar} />
-      </DatePickerContent>
-    </>
-  );
+export const DefaultValue = Base.bind({});
+DefaultValue.args = {
+  start: setDate(new Date(), 10),
+  end: new Date(),
 };
 
-const CalendarIcon = () => (
-  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img">
-    <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path>
-    <path d="M6 12h4v4H6zM12 12h4v4h-4zM18 12h4v4h-4zM24 12h4v4h-4zM6 18h4v4H6zM12 18h4v4h-4zM18 18h4v4h-4zM24 18h4v4h-4zM6 24h4v4H6zM12 24h4v4h-4zM18 24h4v4h-4zM24 24h4v4h-4z"></path>
-  </svg>
-);
-
-export const Default = () => <DateRangePickerComp />;
-export const DefaultValue = () => (
-  <DateRangePickerComp
-    defaultValue={{
-      start: stringifyDate(setDate(new Date(), 10)),
-      end: stringifyDate(new Date()),
-    }}
-  />
-);
+export const DateRangePickerComp = Base.bind({});
+DateRangePickerComp.args = {
+  minValue: subWeeks(new Date(), 1),
+  maxValue: addWeeks(new Date(), 1),
+};
 
-export const MinMaxDefaultDate = () => (
-  <DateRangePickerComp
-    minValue={stringifyDate(subWeeks(new Date(), 1))}
-    maxValue={stringifyDate(addWeeks(new Date(), 1))}
-  />
-);
-export const isDisabled = () => <DateRangePickerComp isDisabled />;
-export const isReadOnly = () => <DateRangePickerComp isReadOnly />;
-export const autoFocus = () => (
-  // eslint-disable-next-line jsx-a11y/no-autofocus
-  <DateRangePickerComp autoFocus />
-);
+export const Options = Base.bind({});
+Options.args = {
+  start: new Date(),
+  end: addWeeks(new Date(), 1),
+  minValue: null,
+  maxValue: null,
+  isDisabled: false,
+  isReadOnly: false,
+  autoFocus: false,
+};
diff --git a/src/datepicker/stories/DateRangePickerComponent.tsx b/src/datepicker/stories/DateRangePickerComponent.tsx
new file mode 100644
index 000000000..b3dc4d1fc
--- /dev/null
+++ b/src/datepicker/stories/DateRangePickerComponent.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  DoubleChevronLeft,
+  DoubleChevronRight,
+} from "../../calendar/stories/svg-icons";
+
+import {
+  DatePicker,
+  DatePickerContent,
+  DatePickerSegment,
+  DatePickerTrigger,
+  DatePickerSegmentField,
+} from "../index";
+import {
+  Calendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarButton,
+  CalendarWeekTitle,
+  CalendarCellButton,
+  RangeCalendarStateReturn,
+} from "../../calendar";
+import {
+  useDateRangePickerState,
+  DateRangePickerInitialState,
+} from "../DateRangePickerState";
+import { CalendarIcon } from "./DatePickerComponent";
+
+const RangeCalendarComp: React.FC<RangeCalendarStateReturn> = state => {
+  return (
+    <Calendar {...state} className="calendar-range">
+      <div className="header">
+        <CalendarButton {...state} goto="previousYear" className="prev-year">
+          <DoubleChevronLeft />
+        </CalendarButton>
+        <CalendarButton {...state} goto="previousMonth" className="prev-month">
+          <ChevronLeft />
+        </CalendarButton>
+        <CalendarHeader {...state} />
+        <CalendarButton {...state} goto="nextMonth" className="next-month">
+          <ChevronRight />
+        </CalendarButton>
+        <CalendarButton {...state} goto="nextYear" className="next-year">
+          <DoubleChevronRight />
+        </CalendarButton>
+      </div>
+
+      <CalendarGrid {...state} as="table" className="dates">
+        <thead>
+          <tr>
+            {state.weekDays.map((day, dayIndex) => {
+              return (
+                <CalendarWeekTitle
+                  {...state}
+                  as="th"
+                  scope="col"
+                  key={dayIndex}
+                  dayIndex={dayIndex}
+                >
+                  <abbr title={day.title}>{day.abbr}</abbr>
+                </CalendarWeekTitle>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {state.daysInMonth.map((week, weekIndex) => (
+            <tr key={weekIndex}>
+              {week.map((day, dayIndex) => (
+                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
+                  <CalendarCellButton {...state} date={day} />
+                </CalendarCell>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </CalendarGrid>
+    </Calendar>
+  );
+};
+
+const DateRangePickerComponent: React.FC<DateRangePickerInitialState> = props => {
+  const state = useDateRangePickerState({
+    formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },
+    ...props,
+  });
+
+  return (
+    <>
+      <DatePicker aria-label="Date Range" className="datepicker" {...state}>
+        <div className="datepicker__header">
+          <DatePickerSegmentField
+            {...state.startSegmentState}
+            className="datepicker__field"
+            aria-label="start date"
+          >
+            {state.startSegmentState.segments.map((segment, i) => (
+              <DatePickerSegment
+                key={i}
+                segment={segment}
+                className="datepicker__field--item"
+                {...state}
+                {...state.startSegmentState}
+              />
+            ))}
+          </DatePickerSegmentField>
+          &nbsp;-&nbsp;
+          <DatePickerSegmentField
+            {...state.endSegmentState}
+            className="datepicker__field"
+            aria-label="end date"
+          >
+            {state.endSegmentState.segments.map((segment, i) => (
+              <DatePickerSegment
+                key={i}
+                segment={segment}
+                className="datepicker__field--item"
+                {...state}
+                {...state.endSegmentState}
+              />
+            ))}
+          </DatePickerSegmentField>
+          <DatePickerTrigger className="datepicker__trigger" {...state}>
+            <CalendarIcon />
+          </DatePickerTrigger>
+        </div>
+      </DatePicker>
+      <DatePickerContent {...state}>
+        <RangeCalendarComp {...state.calendar} />
+      </DatePickerContent>
+    </>
+  );
+};
+
+export default DateRangePickerComponent;