@servesall/atoms 1.0.55 → 1.1.0

package/src/Layout/index.js

@@ -6,6 +6,7 @@ import MarginHorizontal from "./MarginHorizontal";
 import MarginVertical from "./MarginVertical";
 import MarginBottom from "./MarginBottom";
 import MarginTop from "./MarginTop";
+import MarginRight from "./MarginRight";
 import Padding from "./Padding";
 import PaddingHorizontal from "./PaddingHorizontal";
 import PaddingVertical from "./PaddingVertical";
@@ -14,6 +15,8 @@ import Row from "./Row";
 import Stretch from "./Stretch";
 import FullScreen from "./FullScreen";
 import WebSmallWrapper from "./WebSmallWrapper";
+import Box from "./Box";
+import RoundedTopBox from "./RoundedTopBox";
 
 export {
   Center,
@@ -24,6 +27,7 @@ export {
   MarginVertical,
   MarginBottom,
   MarginTop,
+  MarginRight,
   Padding,
   PaddingHorizontal,
   PaddingVertical,
@@ -32,4 +36,6 @@ export {
   Stretch,
   FullScreen,
   WebSmallWrapper,
+  Box,
+  RoundedTopBox,
 };

package/src/Switch/index.js

@@ -46,13 +46,16 @@ export default function Switch({
   value = false,
   onValueChange = () => {},
   micro = false,
+  radio = false,
+  borderColor = false,
+  style,
 }) {
   const [isEnabled, setIsEnabled] = useState(value);
   const toggleSwitch = () => {
     enabled &&
       setIsEnabled((previousState) => {
         onValueChange(!previousState);
-        return !previousState;
+        return !radio ? !previousState : true;
       });
   };
 
@@ -64,10 +67,17 @@ export default function Switch({
     <RoundedBtn
       style={{
         borderWidth: 1,
-        borderColor: isEnabled ? colors.color15 : colors.color10,
+        borderColor: isEnabled
+          ? borderColor
+            ? borderColor
+            : colors.color15
+          : borderColor
+          ? borderColor
+          : colors.color10,
         opacity: enabled ? 1 : 0.6,
+        ...style,
       }}
-      color={colors.color1}
+      color="transparent"
       onClick={toggleSwitch}
     >
       <CheckMark isEnabled={isEnabled} micro={micro} />

package/src/Text/H5.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { H5 } from "./Text.style";
+
+const H5Text = ({
+  children,
+  style,
+  align = "left",
+  color,
+  fontFamily,
+  ...rest
+}) => {
+  return (
+    <H5
+      {...rest}
+      style={style}
+      align={align}
+      color={color}
+      fontFamily={fontFamily}
+    >
+      {children}
+    </H5>
+  );
+};
+
+H5Text.propTypes = {
+  style: PropTypes.object,
+};
+
+export default H5Text;

package/src/Text/Text.style.js

@@ -36,6 +36,15 @@ export const H4 = styled.Text`
   ${(props) => props.style};
 `;
 
+export const H5 = styled.Text`
+  font-size: ${(props) => props.theme.xssmall};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) => props.color || props.theme.color2};
+  line-height: ${(props) => props.theme.xssmall};
+  ${(props) => props.style};
+`;
+
 export const Span = styled.Text`
   font-size: ${(props) => props.theme.small};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};

package/src/Text/index.js

@@ -1,8 +1,9 @@
-import H1 from './H1';
-import H2 from './H2';
-import H3 from './H3';
-import H4 from './H4';
-import P from './P';
-import Span from './Span';
+import H1 from "./H1";
+import H2 from "./H2";
+import H3 from "./H3";
+import H4 from "./H4";
+import H5 from "./H5";
+import P from "./P";
+import Span from "./Span";
 
-export { H1, H2, H3, H4, P, Span };
+export { H1, H2, H3, H4, H5, P, Span };

package/src/Theme/definitions/colors.js

@@ -1,6 +1,6 @@
 const colors = {
   color1: "#FFFFFF",
-  color2: "#000000",
+  color2: "#020202",
   color3: "#74b9ff",
   color3light: "#E1F0FF",
   color4: "#0984e3",
@@ -12,19 +12,22 @@ const colors = {
   color7: "#dfe6e9",
   color8: "#F8F9FB",
   color9: "#FFA15F",
-  color9light: "#FFF0E6",
+  color9light: "#F9F0EA",
+  color9dark: "#804F2D",
   color9border: "#DDD1C9",
   color10: "#F2F3F7",
   color11: "#00b894",
   color11light: "#EEFFFC",
   color11border: "#D2E3E0",
-  color12: "#a29bfe",
+  color12: "#9F8CD1",
   color12light: "#F5F4FF",
   color12border: "#DFDDEA",
+  color12dark: "#584E74",
   color13: "#fab1a0",
   color14: "#00b894",
   color15: "#00cec9",
   color16: "#636e72",
   color17: "#6c5ce7",
+  color18: "#81ecec",
 };
 export default colors;

package/src/Theme/definitions/fonts.js

@@ -1,4 +1,5 @@
 const fonts = {
+  xssmall: "14px",
   xsmall: "16px",
   lhXsmall: "15px",
   small: "18px",

package/src/index.js

@@ -1,5 +1,5 @@
 import { ThemeWrapper, useThemeContext } from "./Theme";
-import { H1, H2, H3, H4, P, Span } from "./Text";
+import { H1, H2, H3, H4, H5, P, Span } from "./Text";
 import {
   Center,
   CenterLeft,
@@ -9,6 +9,7 @@ import {
   MarginVertical,
   MarginBottom,
   MarginTop,
+  MarginRight,
   Padding,
   PaddingHorizontal,
   PaddingVertical,
@@ -17,6 +18,8 @@ import {
   Stretch,
   FullScreen,
   WebSmallWrapper,
+  Box,
+  RoundedTopBox,
 } from "./Layout";
 import { Input, AnimatedPlaceholder, InputOtp } from "./Inputs";
 import {
@@ -25,6 +28,7 @@ import {
   RoundBtn,
   FloatingBtn,
   AnimatedButton,
+  FeedbackButton,
 } from "./Buttons";
 import Loader from "./Loader";
 import Success from "./Success";
@@ -42,6 +46,7 @@ export {
   H2,
   H3,
   H4,
+  H5,
   P,
   Span,
   Center,
@@ -52,6 +57,7 @@ export {
   MarginVertical,
   MarginBottom,
   MarginTop,
+  MarginRight,
   Padding,
   PaddingHorizontal,
   PaddingVertical,
@@ -60,6 +66,8 @@ export {
   Stretch,
   FullScreen,
   WebSmallWrapper,
+  Box,
+  RoundedTopBox,
   Input,
   AnimatedPlaceholder,
   InputOtp,
@@ -68,6 +76,7 @@ export {
   RoundBtn,
   FloatingBtn,
   AnimatedButton,
+  FeedbackButton,
   Loader,
   Success,
   Error,