diff --git a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
index fdb54ed70a..b7c2d1bd98 100644
--- a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
@@ -24,6 +24,7 @@ import { MatSelectChange } from '@angular/material/select';
 import { DateCloudFilterType } from '../../models/date-cloud-filter.model';
 import { DateRangeFilterService } from './date-range-filter.service';
 import moment from 'moment-es6';
+import { mockFilterProperty } from '../mock/date-range-filter.mock';
 
 describe('DateRangeFilterComponent', () => {
     let component: DateRangeFilterComponent;
@@ -122,22 +123,6 @@ describe('DateRangeFilterComponent', () => {
     });
 
     it('should preselect values if filterProperty has attribute', () => {
-        const mockFilterProperty = {
-            key: 'createdDate',
-            label: 'mock-filter',
-            value: {
-                createdDateType: DateCloudFilterType.RANGE,
-                _startFrom: new Date().toISOString(),
-                _startTo: new Date().toISOString()
-            },
-            type: 'dateRange',
-            options: null,
-            attributes: {
-                dateType: 'createdDateType',
-                from: '_startFrom',
-                to: '_startTo'
-            }
-        };
         component.processFilterProperty = mockFilterProperty;
         component.ngOnInit();
         fixture.detectChanges();
diff --git a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.stories.ts b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.stories.ts
new file mode 100644
index 0000000000..1d214df7e8
--- /dev/null
+++ b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.stories.ts
@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
+import { mockFilterProperty } from '../mock/date-range-filter.mock';
+import { ProcessCommonModule } from '../process-common.module';
+import { DateRangeFilterComponent } from './date-range-filter.component';
+
+export default {
+    component: DateRangeFilterComponent,
+    title: 'Process Services Cloud/Components/Date Range Filter',
+    decorators: [
+        moduleMetadata({
+            imports: [ProcessServicesCloudStoryModule, ProcessCommonModule]
+        })
+    ]
+} as Meta;
+
+const template: Story<DateRangeFilterComponent> = (args: DateRangeFilterComponent) => ({
+    props: args
+});
+
+export const primary = template.bind({});
+primary.args = {
+    processFilterProperty: mockFilterProperty
+};
diff --git a/lib/process-services-cloud/src/lib/common/mock/date-range-filter.mock.ts b/lib/process-services-cloud/src/lib/common/mock/date-range-filter.mock.ts
new file mode 100644
index 0000000000..6662b6e78e
--- /dev/null
+++ b/lib/process-services-cloud/src/lib/common/mock/date-range-filter.mock.ts
@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DateCloudFilterType } from '../../models/date-cloud-filter.model';
+
+export const mockFilterProperty = {
+    key: 'createdDate',
+    label: 'mock-filter',
+    value: {
+        createdDateType: DateCloudFilterType.RANGE,
+        _startFrom: new Date().toISOString(),
+        _startTo: new Date().toISOString()
+    },
+    type: 'dateRange',
+    options: null,
+    attributes: {
+        dateType: 'createdDateType',
+        from: '_startFrom',
+        to: '_startTo'
+    }
+};