groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Pagination/Pagination.js

@@ -1,83 +1,59 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledPagination = styled.div`
-    display: flex;
-    align-items: center;
-    color: ${({ theme }) => theme.variant['neutral-2']};
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.variant['neutral-2']};
 `;
 
-StyledPagination.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 export const Pagination = ({ ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     return (
-        <StyledPagination>
-            {props.children}
-        </ StyledPagination>
+        <StyledPagination theme={activeTheme}>{props.children}</StyledPagination>
     );
 };
 
-Pagination.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-}
-
-Pagination.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 const Item = styled.div`
-    font-size: 14px;
-    color: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : null};
-
-    svg {
-        width: 14px;
-        height: 14px;
-        path {
-            fill: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
-        } 
+  font-size: 14px;
+  color: ${({ selected, theme }) =>
+        selected ? theme.variant['primary-1'] : null};
+
+  svg {
+    width: 14px;
+    height: 14px;
+    path {
+      fill: ${({ selected, theme }) =>
+        selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
     }
+  }
 
-    cursor: pointer;
-    &:not(:first-child):not(:last-child) {
-        margin: 0 22px;
-    }
+  cursor: pointer;
+  &:not(:first-child):not(:last-child) {
+    margin: 0 22px;
+  }
 `;
 
-Item.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 Pagination.PageItem = function PageItem({ selected, ...props }) {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
-        <Item selected={selected} {...props}>
+        <Item selected={selected} theme={activeTheme} {...props}>
             {props.children}
         </Item>
-    )
-}
+    );
+};
 
 Pagination.PageItem.propTypes = {
-    /**
-     *	Theme props
-    */
-    theme: PropTypes.object,
     /**
      *	Is Page selected?
-    */
+     */
     selected: PropTypes.bool,
-}
+};
 
 Pagination.PageItem.defaultProps = {
-    theme: defaultThemeColor,
     selected: false,
-}
-
-
-
+};

package/components/ProgressBar/ProgressBar.js

@@ -1,47 +1,68 @@
-import React from "react";
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
+import { hexToRGB } from '../constants/utils';
 import { Label } from '../Label';
-import { hexToRGB } from "../constants/utils";
 
 const WrapperDiv = styled.div`
-    //Set the styles from the default styles object
-    ${ ({ theme, type }) => {
-            return getDefaultStyles(theme, type);
-    }}
-    background-color: ${({ color }) => color? 
-        hexToRGB(color, 0.5) : 
-            defaultThemeColor.primary['primary-1']};
+  height: 10px;
+  border-radius: 10px;
+  margin-top: 13px;
+  margin-left: 13px;
+  margin-right: 13px;
+  width: inherit;
+  background-color: ${({ color, theme }) =>
+        color ? hexToRGB(color, 0.5) : hexToRGB(theme.primary['primary-1'], 0.5)};
 `;
 
 const Container = styled.div`
-    //Set the styles from the default styles object
-        ${ ({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-        
-    // custom styles
-    ${({ progressBarStyle }) => progressBarStyle}
-    width: ${({now }) => now+'%'};
-    background-color: ${({ color }) => color ?color :defaultThemeColor.primary['primary-1']};
+  height: inherit;
+  width: inherit;
+  transition: width 1s ease-in-out;
+  border-radius: inherit;
+  text-align: right;
+
+  // custom styles
+  ${({ progressBarStyle }) => progressBarStyle}
+  width: ${({ now }) => now + '%'};
+  background-color: ${({ color, theme }) =>
+        color ? color : theme.primary['primary-1']};
 `;
 
-export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...props}) => {
+export const ProgressBar = ({
+    labelStyle,
+    progressBarStyle,
+    label,
+    now,
+    color,
+    ...props
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
         <div>
             <Label
-                theme={defaultStyles}
+                inBuiltCss={defaultStyles}
                 customStyles={labelStyle}
                 type={'progressbarLabel'}
                 text={label}
-                {...props} />
-            <WrapperDiv progressBarStyle={progressBarStyle} theme={defaultStyles} 
-                type={'progressWrapper'} color={color} {...props}>
-                <Container progressBarStyle={progressBarStyle} now={now} theme={defaultStyles} 
-                    type={'containerWrapper'} color={color} {...props}/>
+                {...props}
+            />
+            <WrapperDiv
+                progressBarStyle={progressBarStyle}
+                theme={activeTheme}
+                color={color}
+                {...props}
+            >
+                <Container
+                    progressBarStyle={progressBarStyle}
+                    now={now}
+                    theme={activeTheme}
+                    color={color}
+                    {...props}
+                />
             </WrapperDiv>
         </div>
     );
@@ -49,19 +70,19 @@ export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...pro
 
 ProgressBar.propTypes = {
     /**
-     *	Custom style of the lable of the progressbar
+     *	Custom style of the label of the progressBar
      */
     labelStyle: PropTypes.object,
     /**
-     *	Custom style of the progressbar
+     *	Custom style of the progressBar
      */
     progressBarStyle: PropTypes.object,
-    
+
     /**
-     *	Custom color(HEX format) of the progressbar
+     *	Custom color(HEX format) of the progressBar
      */
     color: PropTypes.string,
-    
+
     /**
      *	label props
      */
@@ -73,12 +94,8 @@ ProgressBar.propTypes = {
 };
 
 ProgressBar.defaultProps = {
-    labelStyle:{},
+    labelStyle: {},
     progressBarStyle: {},
-    label:'',
-    now:0,
-    color: "#2E56F4"
-};
-
-
-
+    label: '',
+    now: 0,
+};

package/components/Rating/Rating.js

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
+import React, { useEffect, useState } from 'react';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledContainer = styled.div`
     box-sizing: border-box;
@@ -112,7 +111,6 @@ function getPercentage(value, maxRange) {
 }
 
 export const Rating = ({
-    theme,
     type,
     customStylesContainer,
     customStylesStar,
@@ -127,6 +125,7 @@ export const Rating = ({
     toggleSet,
     identifier,
     ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const [starArr, setStarArr] = useState(undefined);
     const [starVal, setStarVal] = useState(undefined);
@@ -182,18 +181,15 @@ export const Rating = ({
         </>
 
     return (
-        <StyledContainer theme={theme} customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
+        <StyledContainer customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
             {toggleStar ? stars :
-                <StyledPercentage theme={theme} type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
+                <StyledPercentage type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
         </StyledContainer>
     )
 }
 
 Rating.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
+
     /**
      *	Custom style object for container
      */
@@ -249,7 +245,6 @@ Rating.propTypes = {
 }
 
 Rating.defaultProps = {
-    theme: defaultStyles,
     customStylesContainer: null,
     customStylesStar: null,
     customStylesPercentage: null,
@@ -260,5 +255,4 @@ Rating.defaultProps = {
     toggleStar: true,
     toggleSet: false,
     color: '#F7B001'
-}
-
+}