refactor(CTooltip): update placement property

Author: mrholek

docs/4.0/components/CTooltip.mdx

@@ -54,7 +54,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
   </CTooltip>
   <CTooltip
     content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="end"
+    placement="right"
   >
     <CButton color="secondary">Tooltip on right</CButton>
   </CTooltip>
@@ -66,7 +66,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
   </CTooltip>
   <CTooltip
     content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="start"
+    placement="left"
   >
     <CButton color="secondary">Tooltip on left</CButton>
   </CTooltip>

src/components/tooltip/CTooltip.tsx

@@ -5,7 +5,7 @@ import { Manager, Popper, Reference } from 'react-popper'
 import { CSSTransition } from 'react-transition-group'
 
 import { CTooltipContent } from './CTooltipContent'
-import { Placements, Triggers, triggerPropType } from '../Types'
+import { Triggers, triggerPropType } from '../Types'
 
 export interface CTooltipProps {
   children: ReactElement
@@ -20,10 +20,10 @@ export interface CTooltipProps {
   /**
    * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. [docs]
    *
-   * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+   * @type 'top' | 'right' | 'bottom' | 'left'
    * @default 'top'
    */
-  placement?: Placements | 'start' | 'end' // TODO: find solution
+  placement?: 'top' | 'right' | 'bottom' | 'left'
   /**
    * Toggle the visibility of popover component. [docs]
    *
@@ -40,7 +40,6 @@ export const CTooltip: FC<CTooltipProps> = ({
   ...rest
 }) => {
   const [_visible, setVisible] = useState(visible)
-  const _placement = placement === 'start' ? 'left' : placement === 'end' ? 'right' : placement
 
   const getTransitionClass = (state: string) => {
     return state === 'entering'
@@ -86,11 +85,13 @@ export const CTooltip: FC<CTooltipProps> = ({
             {(state) => {
               const transitionClass = getTransitionClass(state)
               return (
-                <Popper placement={_placement}>
+                <Popper placement={placement}>
                   {(p) => (
                     <CTooltipContent
                       transitionClass={transitionClass}
-                      placementClassNamePostfix={placement}
+                      placementClassNamePostfix={
+                        placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                      }
                       {...rest}
                       {...p}
                     ></CTooltipContent>
@@ -107,23 +108,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 
 CTooltip.propTypes = {
   children: PropTypes.any,
-  placement: PropTypes.oneOf([
-    'auto',
-    'top-end',
-    'top',
-    'top-start',
-    'bottom-end',
-    'bottom',
-    'bottom-start',
-    'right-start',
-    'right',
-    'right-end',
-    'left-start',
-    'left',
-    'left-end',
-    'start',
-    'end',
-  ]),
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }