@potok/forms - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

components/Checkbox/Checkbox.jsx

 // @flow
 import * as React from 'react';
+import { colors } from '@potok/theme';
+import CheckIcon from '@potok/icons/glyph/clear/check-2';
+import LockIcon from '@potok/icons/glyph/clear/lock';
 import { Container, CheckboxWrapper, Input, Checkmark, Text } from './styled';
@@ -73,5 +76,8 @@
           />
-          <Checkmark disabled={disabled} checked={checked} />
+          <Checkmark checked={checked} disabled={disabled}>
+            <CheckIcon primaryColor="#fff" size="8px" />
+          </Checkmark>
         </CheckboxWrapper>
         {children !== undefined && <Text disabled={disabled}>{children}</Text>}
+        {disabled && <LockIcon primaryColor={colors.N30} size="11px" />}
       </Container>
@@ -78,0 +84,0 @@ );

components/Checkbox/styled/index.js

@@ -6,4 +6,4 @@ import styled, { css } from 'styled-components';
 function borderColor(props) {
-  if (props.disabled) {
-    return colors.N30;
+  if (props.disabled && props.checked) {
+    return colors.B100;
   }
@@ -15,6 +15,6 @@
 
-  return colors.N100;
+  return colors.N30;
 }
 
-const cursor = ifProp('disabled', 'not-allowed', 'pointer');
+const cursor = ifProp('disabled', 'default', 'pointer');
 const maybeZero = ifProp('checked', 1, 0);
@@ -24,13 +24,13 @@
   position: relative;
-  top: -1px;
-  margin: 0;
-  padding: 0;
   line-height: 1;
+  font-size: 14px;
 `;
 
-export const Checkmark = styled.div`
+export const Checkmark = styled.span`
   position: relative;
   top: 0;
   left: 0;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
@@ -42,23 +42,6 @@ height: 16px;
     'disabled',
-    colors.N0,
+    ifProp('checked', colors.B100, colors.N0),
     ifProp('checked', colors.B500, colors.N0)
   )};
-  transition: all 0.3s;
-
-  &::after {
-    box-sizing: border-box;
-    content: '';
-    position: absolute;
-    top: 1px;
-    left: 4px;
-    display: block;
-    width: 6px;
-    height: 9px;
-    border: 1px solid ${ifProp('disabled', colors.N100, colors.N0)};
-    border-top: 0;
-    border-left: 0;
-    transition: all 0.1s ease-in-out;
-    transform: rotate(45deg) scale(${maybeZero});
-    opacity: ${maybeZero};
-  }
+  transition: all 0.2s;
 `;
@@ -80,5 +63,7 @@
 export const Text = styled.span`
-  padding: 0 5px;
-  font-weight: 300;
+  padding: 0 5px 0 9px;
+  font-weight: 500;
+  font-size: 14px;
   cursor: ${cursor};
+  color: ${ifProp('disabled', colors.N900, colors.N500)};
 `;
@@ -89,10 +74,13 @@
   align-items: center;
-  ${ifNotProp(
-    'disabled',
-    css`
-      &:hover ${Checkmark} {
-        border-color: ${colors.B500};
-      }
-    `
-  )};
+
+  &:hover,
+  &:focus-within {
+    ${Text} {
+      color: ${colors.N900};
+    }
+  }
+
+  svg {
+    vertical-align: top;
+  }
 `;

package.json

 {
   "name": "@potok/forms",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Potok.io UI Kit Form Components",
@@ -5,0 +5,0 @@ "main": "./components/index.js",

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

260508

increased by0.02%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

3652

decreased by-0.19%

No dependency changes