monkey-style-guide 2.0.105 → 2.0.106

package/README.md

@@ -194,18 +194,101 @@ import { MonkeyCheckboxModule } from 'monkey-style-guide';
 
 ```HTML
 <monkey-checkbox
-  description="I Agree to Terms">
+  description="I Agree to Terms"
   errorMessage="Validation Message"
   formControlName="terms"
   helperMessage="Mandatory"
   infoMessage="Info message"
   label="Terms and Conditions"
-  type="single"
+  type="single">
 </monkey-checkbox>
 ```
 
 ---
 
+### **Date Range Picker**
+
+![Date Range Picker Demo Screen Shot][date-range-picker]
+
+Parameters:
+
+- **errorMessage** (string) message to alert user
+- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **i18n** (Object) an i18n object (see example)
+
+Events:
+
+- **onChange** event emited when user select a range of dates or when clicked on some action
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyDateRangePicker } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyDateRangePicker]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-date-range-picker
+  errorMessage="Error Message"
+  helperMessage="Helper Message"
+  infoMessage="Info Message"
+  label="Label"
+  [i18n]="i18n">
+</monkey-date-range-picker>
+```
+
+`example.component.ts`
+
+```Typescript
+...
+i18n = {
+    months: {
+      '1': 'January',
+      '2': 'Febuary',
+      '3': 'March',
+      '4': 'April',
+      '5': 'May',
+      '6': 'June',
+      '7': 'July',
+      '8': 'August',
+      '9': 'September',
+      '10': 'October',
+      '11': 'November',
+      '12': 'December'
+    },
+    days: {
+      '1': 'Sun.',
+      '2': 'Mon.',
+      '3': 'Tue.',
+      '4': 'Wed.',
+      '5': 'Thu.',
+      '6': 'Fri.',
+      '7': 'Sat.'
+    },
+    actions: {
+      '30': '30 days',
+      '60': '60 days',
+      '90': '90 days'
+    },
+    today: 'Today'
+  };
+...
+```
+
+---
+
 ### **Expansion**
 
 ![Expansion Demo Screen Shot][expansion-screenshot1]
@@ -501,13 +584,13 @@ import { MonkeyInputModule } from 'monkey-style-guide';
 
 ```HTML
 <monkey-input
-  errorMessage="Validation Message">
+  errorMessage="Validation Message"
   formControlName="name"
   helperMessage="Mandatory"
   icon="user-s20"
   infoMessage="Info message"
   label="Name"
-  placeholder="Input your full name"
+  placeholder="Input your full name">
 </monkey-input>
 ```
 
@@ -1065,6 +1148,7 @@ export class AppComponent {
 [input-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/input.png
 [select-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/select.png
 [checkbox-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/checkbox.png
+[date-range-picker]: https://user-images.githubusercontent.com/12416871/146080473-8543b9ae-7186-42ee-8ec8-bfd1eef09df6.png
 [expansion-screenshot1]: https://user-images.githubusercontent.com/10110065/111636157-f8b08080-87d6-11eb-86ab-86839297d068.png
 [expansion-screenshot2]: https://user-images.githubusercontent.com/10110065/111636340-24336b00-87d7-11eb-9f19-504ab96cc9af.png
 [file-upload-screenshot1]: https://user-images.githubusercontent.com/10110065/111640018-8b065380-87da-11eb-8d47-87ddea29b943.png

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monkey-style-guide",
-  "version": "2.0.105",
+  "version": "2.0.106",
   "author": "Monkey Exchange",
   "license": "MIT",
   "peerDependencies": {