monica-alexandria 3.2.18 → 3.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "3.2.18",
+  "version": "3.2.21",
   "description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/export/components/button/Cta_.js

@@ -17,8 +17,8 @@ const Cta = styled(Button)`
 
 export const Cta_ = (props) => {
   return (
-    <Cta variant_Size={props.variant_Size} onClick={props.onClick}>
-        <span>{props.text_Button}</span>
+    <Cta size={props.size} onClick={props.onClick}>
+        <span>{props.text}</span>
     </Cta>
   )
 }

package/src/export/components/button/Delete_Plain.js

@@ -29,19 +29,19 @@ const DeletePlain = styled(Button)`
 
 export const Delete_Plain = (props) => {
   return (
-    <DeletePlain className={props.className} noPadding={props.noPadding} variant_Size={props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <DeletePlain className={props.className} noPadding={props.noPadding} size={props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/Edit_.js

@@ -31,7 +31,7 @@ const Edit = styled(Button)`
 
 export const Edit_ = (props) => {
   return (
-    <Edit variant_Size='normal' onClick={props.onClick}>
+    <Edit size='normal' onClick={props.onClick}>
         <IconSvg Icon={props.icon} />
     </Edit>
   )

package/src/export/components/button/Focus_.js

@@ -23,19 +23,19 @@ const Focus = styled(Button)`
 
 export const Focus_ = (props) => {
   return (
-    <Focus variant_Size = {props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <Focus size = {props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/Focus_Plain.js

@@ -29,19 +29,19 @@ const FocusPlain = styled(Button)`
 
 export const Focus_Plain = (props) => {
   return (
-    <FocusPlain variant_Size = {props.variant_Size} onClick={props.onClick} onFocus={props.onFocus}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <FocusPlain size = {props.size} onClick={props.onClick} onFocus={props.onFocus}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/Grey_.js

@@ -24,19 +24,19 @@ const Grey = styled(Button)`
 
 export const Grey_ = (props) => {
   return (
-    <Grey variant_Size={props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <Grey size={props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/Grey_Link.js

@@ -30,19 +30,19 @@ const GreyLink = styled(Button)`
 
 export const Grey_Link = (props) => {
   return (
-    <GreyLink variant_Size={props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <GreyLink size={props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/Main_.js

@@ -24,19 +24,19 @@ const Main = styled(Button)`
 
 export const Main_ = (props) => {
   return (
-    <Main className={props.className} variant_Size={props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <Main className={props.className} size={props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/Main_Plain.js

@@ -29,19 +29,19 @@ const MainPlain = styled(Button)`
 
 export const Main_Plain = (props) => {
   return (
-    <MainPlain noPadding={props.noPadding} variant_Size={props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <MainPlain noPadding={props.noPadding} size={props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/button/White_Plain.js

@@ -29,19 +29,19 @@ const WhitePlain = styled(Button)`
 
 export const White_Plain = (props) => {
   return (
-    <WhitePlain variant_Size={props.variant_Size} onClick={props.onClick}>
-        {props.icon_Left ?
-            <IconSvg Icon={props.icon_Left} />
+    <WhitePlain size={props.size} onClick={props.onClick}>
+        {props.svgLeft ?
+            <IconSvg Icon={props.svgLeft} />
         :
             null
         }
-        {props.text_Button ?
-            <span>{props.text_Button}</span>
+        {props.text ?
+            <span>{props.text}</span>
         :
             null
         }
-        {props.icon_Right ?
-            <IconSvg Icon={props.icon_Right} />
+        {props.svgRight ?
+            <IconSvg Icon={props.svgRight} />
         :
             null
         }

package/src/export/components/confirmation/Confirmation_.js

@@ -53,13 +53,13 @@ export const Confirmation_ = (props) => {
               <ConfirmationActions>
                   <Main_ 
                       onClick = {props.onClick_Primary}
-                      icon_Left = {props.icon_Primary}
-                      text_Button = {props.text_Primary}
+                      svgLeft = {props.icon_Primary}
+                      text = {props.text_Primary}
                   />
                   <Main_Plain 
                       onClick = {props.onClick_Secondary}
-                      icon_Left = {props.icon_Secondary}
-                      text_Button = {props.text_Secondary}
+                      svgLeft = {props.icon_Secondary}
+                      text = {props.text_Secondary}
                   />
               </ConfirmationActions>
           </ConfirmationContainer>

package/src/export/components/form/Input_.js

@@ -23,9 +23,9 @@ export const Input_ = (props) => {
         <FormLabel>{props.text_Placeholder}</FormLabel>
         {props.variant_List ?  
           <Main_ 
-              variant_Size = 'small'
-              text_Button = {props.text_AddInput}
-              icon_Left = 'Add'
+              size = 'small'
+              text = {props.text_AddInput}
+              svgLeft = 'Add'
               className = 'FormAddButton'
               onClick = {props.onClick_AddInput}
           />
@@ -94,8 +94,8 @@ export const Input_ = (props) => {
                       <IconSvg Icon={props.icon_List} />
                       <h6>{item}</h6>
                       <Delete_Plain 
-                        variant_Size = 'small'
-                        icon_Left = 'Delete'
+                        size = 'small'
+                        svgLeft = 'Delete'
                       />
                   </li>
               )}

package/src/export/components/nav/Nav_Mid.js

@@ -15,8 +15,8 @@ export const Nav_Mid = (props) => {
   return (
     <NavMid>
         <Cta_ 
-            variant_Size = 'normal'
-            text_Button =  {props.text_Cta}
+            size = 'normal'
+            text =  {props.text_Cta}
             onClick = {props.onClick_Cta}
         />
     </NavMid>

package/src/export/components/nav/Nav_Protected.js

@@ -66,8 +66,8 @@ export const Nav_Protected = (props) => {
             <h5>{props.firstname_Account}</h5>
         </NavUser>
         <Grey_ 
-            variant_Size = 'small'
-            icon_Left = 'Ham'
+            size = 'small'
+            svgLeft = 'Ham'
             onClick = {() => setHamState(!hamState)}
         />
         {hamState ?

package/src/export/components/nav/Nav_Unprotected.js

@@ -31,14 +31,14 @@ export const Nav_Unprotected = (props) => {
     <NavUnprotected>
         <NavDesktop>
             <Main_Plain 
-                variant_Size = 'small'
-                text_Button = {props.text_Login}
+                size = 'small'
+                text = {props.text_Login}
                 onClick = {props.onClick_Login}
             />
         </NavDesktop>
         <Grey_ 
-            variant_Size = 'small'
-            icon_Left = 'Ham'
+            size = 'small'
+            svgLeft = 'Ham'
             onClick = {() => setHamState(!hamState)}
         />
         {hamState ?

package/src/export/components/slider/Slider_.js

@@ -43,15 +43,15 @@ const SliderContainer = styled.div`
 
 export const Slider_ = (props) => {
   return (
-    <Slider className='StoryBook_Fix1'>
+    <Slider className={props.className}>
         <SliderOverlay className='StoryBook_Fix2' onClick = {props.onClick_Close}></SliderOverlay>
         <SliderWrapper>
             <SliderTitle>
-                <h3>{props.text_Title}</h3>
+                <h3>{props.title}</h3>
                 <Main_ 
-                    text_Button = {props.text_MainButton}
-                    icon_Right = "Check"
-                    variant_Size = 'normal'
+                    text = {props.done}
+                    svgRight = "Check"
+                    size = 'normal'
                     onClick = {props.onClick_Close}
                 />
             </SliderTitle>

package/src/export/components/steps/Steps_Actions.js

@@ -13,13 +13,13 @@ export const Steps_Actions = (props) => {
   return (
     <StepsActions>
         <Grey_ 
-            icon_Left = {props.icon_Grey}
-            text_Button = {props.text_Grey}
+            svgLeft = {props.icon_Grey}
+            text = {props.text_Grey}
             onClick = {props.onClick_Grey}
         />
         <Main_ 
-          icon_Right = {props.icon_Main}
-          text_Button = {props.text_Main}
+          svgRight = {props.icon_Main}
+          text = {props.text_Main}
           onClick = {props.onClick_Main}
         />
     </StepsActions>

package/src/export/helpers/Button.js

@@ -11,8 +11,8 @@ export const Button = styled.button`
     transition-duration: .5s;
     padding: ${p => 
         p.noPadding === true ? '0 !important' :
-        p.variant_Size === 'small' ? 'var(--smallPads)' :
-        p.variant_Size === 'large' ? 'var(--largePads)' :
+        p.size === 'small' ? 'var(--smallPads)' :
+        p.size === 'large' ? 'var(--largePads)' :
         'var(--normalPads)'
     };
 
@@ -20,8 +20,8 @@ export const Button = styled.button`
         transition-property: fill;
         transition-duration: .5s;
         width: ${p => 
-            p.variant_Size === 'small' ? 'var(--smallIcon)' :
-            p.variant_Size === 'large' ? 'var(--largeIcon)' :
+            p.size === 'small' ? 'var(--smallIcon)' :
+            p.size === 'large' ? 'var(--largeIcon)' :
             'var(--normalIcon)'
         };
     }
@@ -31,8 +31,8 @@ export const Button = styled.button`
         transition-property: color;
         transition-duration: .5s;
         font-size: ${p => 
-            p.variant_Size === 'small' ? 'var(--smallText)' :
-            p.variant_Size === 'large' ? 'var(--largeText)' :
+            p.size === 'small' ? 'var(--smallText)' :
+            p.size === 'large' ? 'var(--largeText)' :
             'var(--normalText)'
         };
     }

package/src/stories/slider/Slider.stories.jsx

@@ -40,6 +40,6 @@ export const Default = (args) =>
 
 Default.args = {
     onClick_Close : '_',
-    text_Title : "This is the slider's title",
-    text_MainButton : 'Done'
+    title : "This is the slider's title",
+    done : 'Done'
 }