fix: conflicts between next and main v2 (#281)

CODEOWNERS

@@ -1 +1 @@
-* @nlopin @martimalek @div-Leo @rafael-sepeda @jonotrujillo
+* @nlopin @martimalek @div-Leo @jonotrujillo

docs/changelog.mdx

@@ -5,7 +5,26 @@ cardHeadline: Changelog
 cardSubHeadline: Keep up to date with the latest releases of @freenow/wave
 ---
 
-## [2.1.0-next.1](https://github.com/freenowtech/wave/compare/v2.0.0...v2.1.0-next.1) (2021-10-14)
+## [1.27.0](https://github.com/freenowtech/wave/compare/v1.26.1...v1.27.0) (2022-08-19)
+
+
+### Features
+
+* Tooltip with react-popper ([#267](https://github.com/freenowtech/wave/issues/267)) ([6965ef4](https://github.com/freenowtech/wave/commit/6965ef42b5f4257825b2fc86eeb1033eb4f06aa9))
+
+### [1.25.3](https://github.com/freenowtech/wave/compare/v1.25.2...v1.25.3) (2022-07-21)
+
+
+### Bug Fixes
+
+* expose padding prop and adjust z-index for Popover component ([#263](https://github.com/freenowtech/wave/issues/263)) ([da0e80b](https://github.com/freenowtech/wave/commit/da0e80be5df4274220336451641b31d1fe8d524f))
+
+### [1.25.2](https://github.com/freenowtech/wave/compare/v1.25.1...v1.25.2) (2022-07-11)
+
+
+### Bug Fixes
+
+* display semantic colors in table and allow to filter them ([#258](https://github.com/freenowtech/wave/issues/258)) ([2e83e76](https://github.com/freenowtech/wave/commit/2e83e763427fb5ce67fc99719a0a3a8837be086c))
 
 ### [1.25.1](https://github.com/freenowtech/wave/compare/v1.25.0...v1.25.1) (2022-06-16)
 

docs/contributing.mdx

@@ -6,7 +6,7 @@ cardSubHeadline: Everyone is welcome to make contributions to the design system.
 ---
 
 import workflowImageUrl from './contributing-new-pattern-workflow.svg'
-import { ImageModal } from './components/ImageModal.tsx';
+import { ImageModal } from './components/ImageModal';
 
 ## Reporting Bugs
 

fixtures/typescript-build/src/index.tsx

@@ -21,6 +21,7 @@ import {
     Logo,
     Modal,
     Pagination,
+    PhoneInput,
     RadioButton,
     Select,
     TabBar,
@@ -439,6 +440,26 @@ const TestTooltip: React.FC = () => (
     </>
 );
 
+const TestPhoneInput = () => (
+    <>
+        <PhoneInput />
+        <PhoneInput id="hello" />
+        <PhoneInput variant="boxed" size="medium" />
+        <PhoneInput variant="bottom-lined" size="small" />
+        <PhoneInput text="my text" />
+        <PhoneInput
+            inputProps={{
+                onFocus: () => {}
+            }}
+        />
+        <PhoneInput
+            selectListProps={{
+                onFocus: () => {}
+            }}
+        />
+    </>
+);
+
 const App: React.FC = () => (
     <>
         <TestBanner />
@@ -467,6 +488,7 @@ const App: React.FC = () => (
         <TestTextarea />
         <TestToggle />
         <TestTooltip />
+        <TestPhoneInput />
     </>
 );
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@freenow/wave",
-    "version": "2.1.0-next.1",
+    "version": "1.27.0",
     "description": "React components of the Wave design system for your Front-End project",
     "main": "lib/cjs/index.js",
     "typings": "lib/types/index.d.ts",

src/components/Accordion/docs/Accordion.mdx

@@ -5,10 +5,10 @@ route: /components/accordion
 ---
 
 import { Playground } from 'docz';
-import { Box } from '../../Box/Box.tsx';
-import { Accordion } from '../Accordion.tsx';
-import { AccordionPropsTable } from './AccordionPropsTable.tsx';
-import { OnExpandExample } from './OnExpandExample.tsx';
+import { Box } from '../../Box/Box';
+import { Accordion } from '../Accordion';
+import { AccordionPropsTable } from './AccordionPropsTable';
+import { OnExpandExample } from './OnExpandExample';
 
 # Accordion
 Accordion component is use to display large amount of content in a compress and progressive way.

src/components/Banner/docs/Banner.mdx

@@ -4,11 +4,11 @@ menu: Components
 route: /components/banner
 ---
 
-import { Banner } from '../Banner.tsx';
+import { Banner } from '../Banner';
 import { Text, Headline, Button } from '../..';
-import { BannerCreator } from './BannerCreator.tsx';
-import { BannerPropsTable } from './BannerPropsTable.tsx';
-import { ContainedBanner } from './ContainedBanner.ts';
+import { BannerCreator } from './BannerCreator';
+import { BannerPropsTable } from './BannerPropsTable';
+import { ContainedBanner } from './ContainedBanner';
 
 # Banner
 

src/components/Box/docs/Box.mdx

@@ -5,7 +5,7 @@ route: /components/box
 ---
 
 import { Playground } from 'docz';
-import { Box } from '../Box.tsx';
+import { Box } from '../Box';
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
 
 # Box

src/components/Button/docs/Button.mdx

@@ -10,8 +10,8 @@ import { TextButton } from '../TextButton';
 import { Box } from '../../Box/Box';
 import { Headline } from '../../Headline/Headline';
 import { Text } from '../../Text/Text';
-import { TrashBinIcon, CloseIcon } from '../../../icons/index.ts';
-import { ButtonPropsTable } from './ButtonPropsTable.tsx';
+import { TrashBinIcon, CloseIcon } from '../../../icons/index';
+import { ButtonPropsTable } from './ButtonPropsTable';
 import { Combination } from '../../../docs/Combination'
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
 

src/components/Card/docs/Card.mdx

@@ -5,8 +5,8 @@ route: /components/card
 ---
 
 import { Playground } from 'docz';
-import { Card } from '../Card.tsx';
-import { Text } from '../../Text/Text.tsx';
+import { Card } from '../Card';
+import { Text } from '../../Text/Text';
 import { CardPropsTable } from './CardPropsTable'
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
 import { Combination } from '../../../docs/Combination'

src/components/Checkbox/docs/Checkbox.mdx

@@ -6,7 +6,7 @@ route: /components/Checkbox
 
 import { Playground } from 'docz';
 import { Checkbox } from '../Checkbox';
-import { CheckboxPropsTable } from './CheckboxPropsTable.tsx';
+import { CheckboxPropsTable } from './CheckboxPropsTable';
 
 # Checkbox
 

src/components/Datepicker/DatepickerRangeInput.tsx

@@ -105,15 +105,15 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
      */
     label?: string;
     /**
-     * Function that used when datepicker closes without selected date.
+     * Function that is used when datepicker closes without selected date.
      */
     onClose?: () => void;
     /**
      * Set the value for the date
      */
     value?: DateRange;
     /**
-     * Function that used when datepicker selects new date.
+     * Function that is used when datepicker selects new date.
      */
     onChange?: (change: DateRange) => void;
     /**

src/components/Datepicker/DatepickerSingleInput.tsx

@@ -23,11 +23,11 @@ interface DatepickerSingleInputProps extends MarginProps, WidthProps {
      */
     label?: string;
     /**
-     * Function that used when datepicker closes without selected date.
+     * Function that is used when datepicker closes without selected date.
      */
     onClose?: () => void;
     /**
-     * Function that used when datepicker selects new date.
+     * Function that is used when datepicker selects new date.
      */
     onChange?: (date?: Date) => void;
     /**

src/components/Datepicker/docs/Datepicker.mdx

@@ -5,11 +5,14 @@ route: /components/date-picker
 ---
 
 import { Playground } from 'docz';
+import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
 import { DatepickerRangeInput as DateRangePicker } from '../DatepickerRangeInput';
 import { DatepickerSingleInput as DatePicker } from '../DatepickerSingleInput';
 import { ControlledDatepickerSingleInput } from './ControlledDatepickerSingleInput';
 import { ControlledDatepickerRangeInput } from './ControlledDatepickerRangeInput';
 import { DatepickerOnModal } from './DatepickerOnModal';
+import { DatepickerSingleInputPropsTable } from './DatepickerSingleInputPropsTable';
+import { DatepickerRangeInputPropsTable } from './DatepickerRangeInputPropsTable';
 
 # Datepicker
 
@@ -19,15 +22,19 @@ import { DatepickerOnModal } from './DatepickerOnModal';
 
 ### Single datepicker props
 
-<Props of={DatePicker} />
+<DatepickerSingleInputPropsTable />
+<br />
+<StyledSystemLinks component="DatePicker" supportedProps={['margin', 'width']} />
 
 ## Range
 
 <ControlledDatepickerRangeInput label="Date Range" />
 
 ### Range datepicker props
 
-<Props of={DateRangePicker} />
+<DatepickerRangeInputPropsTable />
+<br />
+<StyledSystemLinks component="DateRangePicker" supportedProps={['margin', 'width']} />
 
 ## Datepicker on Modal
 

src/components/Datepicker/docs/DatepickerRangeInputPropsTable.tsx

@@ -0,0 +1,105 @@
+import React, { FC } from 'react';
+
+import { PropsTable } from '../../../docs/PropsTable';
+
+export const DatepickerRangeInputPropsTable: FC = () => {
+    const props = [
+        {
+            name: 'startPlaceholder',
+            type: 'string',
+            description: 'Placeholder for start date.'
+        },
+        {
+            name: 'endPlaceholder',
+            type: 'string',
+            description: 'Placeholder for end date.'
+        },
+        {
+            name: 'label',
+            type: 'string',
+            description: 'Label for the input.'
+        },
+        {
+            name: 'onClose',
+            type: 'Function => void',
+            description: 'Function that is used when datepicker closes without selected date.'
+        },
+        {
+            name: 'value',
+            type: 'DateRange (interface containing startDate and endDate properties)',
+            description: 'Set the value for the date.'
+        },
+        {
+            name: 'onChange',
+            type: 'Function (change: DateRange) => void',
+            description: 'Function that is used when datepicker selects new date.'
+        },
+        {
+            name: 'minDate',
+            type: 'Date',
+            description: 'Minimal date to select from.'
+        },
+        {
+            name: 'maxDate',
+            type: 'Date',
+            description: 'Maximum date to select from.'
+        },
+        {
+            name: 'firstDayOfWeek',
+            type: 'FirstDayOfWeek (number from 0-6)',
+            description: 'Accepts a number for first day of the week from 0 (Sunday) to 6 (Saturday).',
+            defaultValue: '1'
+        },
+        {
+            name: 'isDateBlocked',
+            type: 'Function => boolean',
+            description: 'Function that runs for each date and returns boolean whether date is disabled or not.',
+            defaultValue: '() => false'
+        },
+        {
+            name: 'placement',
+            type: "'left' | 'right' | 'center'",
+            description: 'Used to align the datepicker in relation to input.',
+            defaultValue: 'left'
+        },
+        {
+            name: 'displayFormat',
+            type: 'string',
+            description: 'String to format dates.',
+            defaultValue: 'dd/MM/yyyy'
+        },
+        {
+            name: 'locale',
+            type: 'string',
+            description: 'String to define the locale in ISO-639-1.',
+            defaultValue: 'en-US'
+        },
+        {
+            name: 'errorHandler',
+            type: '(Function => void) | string',
+            description: 'Text to be shown if error filling the input or fn to be trigger as a callback when error.'
+        },
+        {
+            name: 'startInputId',
+            type: 'string',
+            description: 'The id to be assigned to the start date input.'
+        },
+        {
+            name: 'endInputId',
+            type: 'string',
+            description: 'The id to be assigned to the end date input.'
+        },
+        {
+            name: 'variant',
+            type: "'compact' | 'normal'",
+            description: "Determines the variant, 'compact' displays only a single month",
+            defaultValue: "'normal'"
+        },
+        {
+            name: 'disabled',
+            type: 'boolean',
+            description: 'Determines whether the datePicker is disabled or not.'
+        }
+    ];
+    return <PropsTable props={props} />;
+};