@potok/forms - npm Package Compare versions

Comparing version 0.0.31 to 0.0.32

components/Checkbox/Checkbox.jsx

@@ -73,3 +73,3 @@ // @flow
     return (
-      <Container disabled={disabled} checked={checked} className={className}>
+      <Container checked={checked} disabled={disabled} className={className}>
         <CheckboxWrapper>
@@ -92,3 +92,2 @@ <Input
         )}
-        {disabled && <LockIcon primaryColor={colors.N30} size="11px" />}
       </Container>
@@ -95,0 +94,0 @@ );

components/Checkbox/styled/index.js

@@ -12,11 +12,11 @@ import styled, { css } from 'styled-components';
 function borderColor(props) {
-  if (props.disabled && props.checked) {
+  if (props.disabled) {
     return colors.N30;
   }
 
-  if (props.checked) {
+  if (props.checked && !props.disabled) {
     return colors.B500;
   }
 
-  return colors.N30;
+  return colors.N100;
 }
@@ -147,8 +147,13 @@
 
-    ${StyledCheckIcon} {
-      color: ${ifProp(
-        'disabled',
-        colors.N0,
-        ifProp('checked', colors.N0, colors.N30)
-      )};
+    ${Checkmark} {
+      ${switchProp('theme.device', {
+        [themeDevices.desktop]: css`
+          border-color: ${ifProp('disabled', colors.N30, colors.B400)};
+          background-color: ${ifProp(
+            'disabled',
+            colors.N30,
+            ifProp('checked', colors.B400, colors.N0)
+          )};
+        `,
+      })};
     }
@@ -155,0 +160,0 @@ }

components/PhoneInput/styled/index.js

 import styled from 'styled-components';
-import { ifProp } from 'styled-tools';
+import { ifProp, ifNotProp } from 'styled-tools';
 import PhoneInput from '../ReactPhoneInput';
@@ -85,3 +85,3 @@ import { borderRadius, colors } from '@potok/theme';
       .${buttonClass}.flag-dropdown, input[type='tel'].${inputClass} {
-        border-color: ${colors.N100};
+        border-color: ${ifNotProp('disabled', colors.B500, colors.N30)};
       }
@@ -88,0 +88,0 @@ }

components/Radio/styled/index.js

@@ -11,14 +11,2 @@ import styled, { css } from 'styled-components';
 
-const iconInnerHoveredMixin = css`
-  &:after {
-    ${ifNotProp(
-      'disabled',
-      css`
-        display: block;
-        background: ${ifProp('checked', colors.B500, colors.N100)};
-      `
-    )};
-  }
-`;
-
 export const RadioIcon = styled.span`
@@ -32,6 +20,11 @@ border-radius: 50%;
     'checked',
-    ifProp('disabled', colors.N100, colors.B500),
-    colors.N100
+    ifProp('disabled', colors.N30, colors.B500),
+    colors.N30
   )};
   position: relative;
+  background: ${ifProp(
+    'checked',
+    ifProp('disabled', colors.N30, colors.B500),
+    colors.N0
+  )};
 
@@ -47,7 +40,11 @@ &:after {
     display: ${ifProp('checked', 'block', 'none')};
-    background: ${ifProp('disabled', colors.N100, colors.B500)};
+    background: ${colors.N0};
   }
 
   &:hover {
-    ${iconInnerHoveredMixin};
+    border-color: ${ifProp(
+      'checked',
+      ifProp('disabled', colors.N100, colors.B500),
+      ifProp('disabled', colors.N30, colors.B500)
+    )};
   }
@@ -91,3 +88,3 @@
       margin-left: 20px;
-      font-weight: normal;
+      font-weight: ${fontWeightMedium};
       color: ${ifProp('checked', colors.N900, colors.N600)};
@@ -108,8 +105,2 @@ `,
   }
-
-  &:hover {
-    ${RadioIcon} {
-      ${iconInnerHoveredMixin};
-    }
-  }
 `;
@@ -116,0 +107,0 @@

components/Select/styled/index.js

@@ -52,3 +52,3 @@ import styled from 'styled-components';
       '&:hover': {
-        borderColor: colors.N100,
+        borderColor: colors.B500,
         'box-shadow': 'none',
@@ -55,0 +55,0 @@ },

package.json

 {
   "name": "@potok/forms",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Potok.io UI Kit Form Components",
@@ -15,3 +15,3 @@ "main": "./components/index.js",
   "dependencies": {
-    "@potok/theme": "^0.6.1",
+    "@potok/theme": "^0.6.3",
     "lodash": "^4.17.10",
@@ -18,0 +18,0 @@ "react-phone-input-2": "^2.6.0",

No alert changes

Improved metrics

Total package byte prevSize

264672

increased by0.04%

Worsened metrics

Lines of code

3807

decreased by-0.08%

Dependency changes

• Updated@potok/theme@^0.6.3