@potok/forms - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

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';
+import {
+  Container,
+  CheckboxWrapper,
+  Input,
+  Checkmark,
+  Text,
+  StyledCheckIcon,
+} from './styled';
 
@@ -77,6 +83,10 @@ type Props = {
           <Checkmark checked={checked} disabled={disabled}>
-            <CheckIcon primaryColor="#fff" size="8px" />
+            <StyledCheckIcon checked={checked} />
           </Checkmark>
         </CheckboxWrapper>
-        {children !== undefined && <Text disabled={disabled}>{children}</Text>}
+        {children !== undefined && (
+          <Text checked={checked} disabled={disabled}>
+            {children}
+          </Text>
+        )}
         {disabled && <LockIcon primaryColor={colors.N30} size="11px" />}
@@ -83,0 +93,0 @@ </Container>

components/Checkbox/styled/index.js

 import styled, { css } from 'styled-components';
-import { ifProp, ifNotProp } from 'styled-tools';
-import { colors, borderRadius } from '@potok/theme';
+import { ifProp, ifNotProp, switchProp } from 'styled-tools';
+import { colors, borderRadius, themeDevices } from '@potok/theme';
+import CheckIcon from '@potok/icons/glyph/clear/check-2';
 
@@ -33,12 +34,24 @@ function borderColor(props) {
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: 1px solid ${borderColor};
+  border: 1px solid;
   ${borderRadius};
-  background-color: ${ifProp(
-    'disabled',
-    ifProp('checked', colors.B100, colors.N0),
-    ifProp('checked', colors.B500, colors.N0)
-  )};
   transition: all 0.2s;
+
+  ${switchProp('theme.device', {
+    [themeDevices.desktop]: css`
+      width: 16px;
+      height: 16px;
+      border-color: ${borderColor};
+      background-color: ${ifProp(
+        'disabled',
+        ifProp('checked', colors.B100, colors.N0),
+        ifProp('checked', colors.B500, colors.N0)
+      )};
+    `,
+    [themeDevices.mobile]: css`
+      width: 20px;
+      height: 20px;
+      border-color: ${ifProp('checked', colors.B500, colors.N30)};
+      background-color: ${colors.N0};
+    `,
+  })};
 `;
@@ -67,2 +80,9 @@
   user-select: none;
+
+  ${switchProp('theme.device', {
+    [themeDevices.mobile]: css`
+      color: ${ifProp('checked', colors.N900, colors.N600)};
+      padding-left: 20px;
+    `,
+  })};
 `;
@@ -85,1 +105,28 @@
 `;
+
+export const StyledCheckIcon = styled(CheckIcon)`
+  display: flex;
+
+  ${switchProp('theme.device', {
+    [themeDevices.desktop]: css`
+      color: ${colors.N0};
+      &,
+      svg,
+      span {
+        height: 8px;
+        width: 8px;
+      }
+    `,
+    [themeDevices.mobile]: css`
+      color: ${ifProp('checked', colors.B500, colors.N0)};
+      margin-top: -2px;
+
+      &,
+      svg,
+      span {
+        height: 13px;
+        width: 13px;
+      }
+    `,
+  })};
+`;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

263243

increased by0.4%

Lines of code

3752

increased by1.41%

No dependency changes