docs(DatePicker): refactor jsx examples to tsx (#2204)

dnbexperience · May 31, 2023 · d2f1b42 · d2f1b42
1 parent 534294e
commit d2f1b42
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 50 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx
@@ -9,6 +9,7 @@ import styled from '@emotion/styled'
 import addDays from 'date-fns/addDays'
 import startOfMonth from 'date-fns/startOfMonth'
 import lastDayOfMonth from 'date-fns/lastDayOfMonth'
+import isWeekend from 'date-fns/isWeekend'
 import { DatePicker, FormRow, HelpButton } from '@dnb/eufemia/src'
 
 const Wrapper = styled.div`
@@ -260,3 +261,60 @@ export const DatePickerScreenshotTests = () => {
     </Wrapper>
   )
 }
+
+export const DatePickerDateFns = () =>
+  global.IS_TEST ? null : (
+    <ComponentBox scope={{ addDays }} hidePreview hideToolbar>
+      <DatePicker
+        shortcuts={[
+          { title: 'Set date', date: '1969-07-15' },
+          {
+            title: 'Relative +3 days',
+            date: ({ date }) => date && addDays(date, 3),
+          },
+        ]}
+      />
+    </ComponentBox>
+  )
+
+export const DatePickerDateFnsRange = () =>
+  global.IS_TEST ? null : (
+    <ComponentBox
+      scope={{ startOfMonth, lastDayOfMonth }}
+      hidePreview
+      hideToolbar
+    >
+      <DatePicker
+        shortcuts={[
+          {
+            title: 'Set date period',
+            start_date: '1969-07-15',
+            end_date: '1969-07-15',
+            close_on_select: true, // will close the picker
+          },
+          {
+            title: 'This month',
+            start_date: startOfMonth(new Date()),
+            end_date: lastDayOfMonth(new Date()),
+          },
+        ]}
+      />
+    </ComponentBox>
+  )
+
+export const DatePickerDateFnsRangeIsWeekend = () =>
+  global.IS_TEST ? null : (
+    <ComponentBox scope={{ isWeekend }} hidePreview>
+      <DatePicker
+        on_days_render={(days, calendarNumber = 0) => {
+          return days.map((dayObject) => {
+            if (isWeekend(dayObject.date)) {
+              dayObject.isInactive = true
+              dayObject.className = 'dnb-date-picker__day--weekend' // custom css
+            }
+            return dayObject
+          })
+        }}
+      />
+    </ComponentBox>
+  )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import { DatePickerDateFnsRangeIsWeekend } from 'Docs/uilib/components/date-picker/Examples'
+
 ## Events
 
 | Events           | Description                                                                                             |
@@ -64,23 +66,7 @@ The callback event `on_days_render` gives you the possibility to manipulate the
 
 Please use [date-fns](https://date-fns.org) to make the calculations.
 
-```jsx
-import isWeekend from 'date-fns/isWeekend'
-
-render(
-  <DatePicker
-    on_days_render={(days, calendarNumber = 0) => {
-      return days.map((dayObject) => {
-        if (isWeekend(dayObject.date)) {
-          dayObject.isInactive = true
-          date.className = 'dnb-date-picker__day--weekend' // custom css
-        }
-        return dayObject
-      })
-    }}
-  />
-)
-```
+<DatePickerDateFnsRangeIsWeekend />
 
 The `dayObject` object contains:
 

diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx b/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx
@@ -2,6 +2,11 @@
 showTabs: true
 ---
 
+import {
+  DatePickerDateFns,
+  DatePickerDateFnsRange,
+} from 'Docs/uilib/components/date-picker/Examples'
+
 ## Properties
 
 | Properties                                  | Description                                                                                                                                                                                                                                                                                                                                                                          |
@@ -54,39 +59,8 @@ showTabs: true
 
 You may use [date-fns](https://date-fns.org) to make date calculations.
 
-```jsx
-import addDays from 'date-fns/addDays'
-
-const shortcuts = [
-  { title: 'Set date', date: '1969-07-15' },
-  {
-    title: 'Relative +3 days',
-    date: ({ date }) => date && addDays(date, 3)
-  }
-]
-
-<DatePicker shortcuts={shortcuts} />
-```
+<DatePickerDateFns />
 
 With range enabled.
 
-```jsx
-import startOfMonth from 'date-fns/startOfMonth'
-import lastDayOfMonth from 'date-fns/lastDayOfMonth'
-
-const shortcuts = [
-  {
-    title: 'Set date period',
-    start_date: '1969-07-15',
-    end_date: '1969-07-15',
-    close_on_select: true,// will close the picker
-  },
-  {
-    title: 'This month',
-    start_date: startOfMonth(new Date()),
-    end_date: lastDayOfMonth(new Date())
-  }
-]
-
-<DatePicker shortcuts={shortcuts} />
-```
+<DatePickerDateFnsRange />