fix(Carousel): fix issue on custom carousel pagination

components/constants/colour.js

@@ -2,22 +2,18 @@
  * Components - Theme - Variables - Colour
  */
 const THEME_COLOUR = {
-  white: 'rgb(255, 255, 255)',
   black: 'rgb(0, 0, 0)',
-
   dark: 'rgb(63, 81, 90)',
+  info: 'rgb(25, 129, 255)',
+  help: 'rgb(255, 203, 68)',
+  gray: 'rgb(63, 81, 90)',
   light: 'rgb(242, 242, 242)',
-
   primary: 'rgb(51, 51, 255)',
   secondary: 'rgb(6, 121, 216)',
   success: 'rgb(89, 217, 143)',
-  info: 'rgb(25, 129, 255)',
+  transparent: 'transparent',
   warning: 'rgb(250, 207, 56)',
-  danger: 'rgb(255, 51, 51)',
-
-  help: 'rgb(255, 203, 68)',
-
-  transparent: 'transparent'
+  white: 'rgb(255, 255, 255)'
 }
 
 export default THEME_COLOUR

components/molecules/carousel/__tests__/stories.js

@@ -121,6 +121,22 @@ export const withPagination = (args) => (
   </BaseComponent>
 )
 
+// Sample use of custom Pagination
+const CustomPagination = ({ size, active, label, onClick }) => {
+  return (
+    <Button context={active ? 'info' : 'primary'} onClick={onClick}>
+      {label}
+    </Button>
+  )
+}
+
+export const customPagination = (args) => (
+  <BaseComponent {...{ ...args, showPagination: true, paginationProps: { CustomPagination } }}>
+    <SampleSlide />
+    <SampleSlide />
+  </BaseComponent>
+)
+
 export const withImageComponent = (args) => (
   <BaseComponent {...args}>
     <CarouselSlide>

components/molecules/carousel/components/props.js

@@ -3,6 +3,7 @@
  */
 
 // React
+import React from 'react'
 import {
   any,
   arrayOf,

components/molecules/pagination/pagination.js

@@ -20,6 +20,7 @@ const Pagination = ({
   children,
   context,
   currentPage,
+  CustomPagination,
   hideWhenOnlyOnePage,
   nextLabel,
   onPageChange,
@@ -84,7 +85,16 @@ const Pagination = ({
       )}
 
       {currentChunk.map((p) => {
-        return (
+        return CustomPagination ? (
+          <CustomPagination
+            active={p === currentPage}
+            context={context}
+            key={p}
+            label={p}
+            onClick={() => handleChange(p)}
+            size={size}
+          />
+        ) : (
           <PaginationItem
             active={p === currentPage}
             context={context}

components/molecules/tree/__tests__/stories.js

@@ -18,7 +18,7 @@ import { treeData } from '../__mocks__/default'
 export default {
   args: {
     data: treeData,
-    onClick: (node) => alert(JSON.stringify(node))
+    onClick: (node) => console.log(JSON.stringify(node))
   },
   argTypes: {
     context: ContextControl()

components/molecules/tree/components/Expand.js

@@ -19,7 +19,6 @@ const Expand = ({ childVisible }) => {
 
 const StyledWrapper = styled.div`
   padding-top: 6px;
-  padding-right: 5px;
   cursor: pointer;
 `
 Expand.propTypes = { childVisible: bool }

components/molecules/tree/components/node.js

@@ -13,23 +13,23 @@ import Tree from '../tree'
 import Expand from './Expand'
 
 // Style
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
-const TreeNode = ({ node, onClick }) => {
+const TreeNode = ({ node, label, onClick }) => {
   const [childVisible, setChildVisiblity] = useState(false)
 
   const hasChild = node.children ? true : false
 
   const onNodeClick = () => {
     if (hasChild) {
       setChildVisiblity(!childVisible)
-    } else {
-      onClick(node)
     }
+
+    onClick(node, label)
   }
 
   return (
-    <StyledLi>
+    <StyledLi hasChild={hasChild}>
       <StylesContainer onClick={onNodeClick}>
         {hasChild && <Expand childVisible={childVisible} />}
         <StyledLabel>
@@ -41,7 +41,7 @@ const TreeNode = ({ node, onClick }) => {
 
       {hasChild && childVisible && (
         <StyledUl>
-          <Tree data={node.children} onClick={onClick} />
+          <Tree data={node.children} label={node.label} onClick={onClick} />
         </StyledUl>
       )}
     </StyledLi>
@@ -50,6 +50,23 @@ const TreeNode = ({ node, onClick }) => {
 
 const StyledLi = styled.li`
   list-style: none;
+  padding-top: 10px;
+  position: relative;
+
+  ${({ hasChild }) =>
+    !hasChild &&
+    css`
+      &:before {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        left: -15px;
+        top: 17px;
+        background-color: ${({ theme }) => theme.COLOUR.gray};
+        border-radius: 50% 50%;
+      }
+    `}
 `
 
 const StylesContainer = styled.div`
@@ -66,6 +83,7 @@ const StyledLabel = styled.div`
 const StyledUl = styled.ul`
   display: flex;
   flex-direction: column;
+  margin-top: -10px !important;
 `
 
 TreeNode.propTypes = {

components/molecules/tree/tree.js

@@ -12,12 +12,11 @@ import TreeNode from './components/node'
 // Style
 import styled from 'styled-components'
 
-const Tree = ({ data, onClick }) => {
-  console.log('onClick', onClick)
+const Tree = ({ data, label, onClick }) => {
   return (
     <StyledUl>
       {data.map((tree) => (
-        <TreeNode node={tree} onClick={onClick} />
+        <TreeNode node={tree} label={label} onClick={onClick} />
       ))}
     </StyledUl>
   )