vcc-ui - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

dist/components/block/block.js

@@ -18,2 +18,5 @@ "use strict";
 
+// TODO: Fix eslint issues the next time this file is edited.
+
+/* eslint-disable @typescript-eslint/ban-types */
 const style = {
@@ -20,0 +23,0 @@ display: 'block'

dist/components/col/col.d.ts

@@ -1,4 +0,5 @@
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 
 export type ColProps = {
+  children?: React.ReactNode;
   /**
@@ -5,0 +6,0 @@ * Size of the spacer as a multiple of the baseline grid.

dist/components/icon-button/IconButton.styles.d.ts

 import { ExtendCSS } from '../..';
 import { IconButtonProps } from '.';
-export declare const commonStyles: ({ size, bleed, }: {
+export declare const commonStyles: ({ size, bleed }: {
     size: number;
@@ -5,0 +5,0 @@ bleed: boolean;

dist/components/icon-button/IconButton.styles.js

@@ -15,33 +15,51 @@ "use strict";
   } = _ref;
-  return {
-    boxSizing: 'border-box',
-    height: (0, _sizeToRem.pxToRem)(size),
-    width: (0, _sizeToRem.pxToRem)(size),
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '50%',
-    transitionProperty: 'background-color, transform',
-    transitionDuration: '0.25s',
-    transitionTimingFunction: 'ease-in-out',
-    '[aria-disabled=true]': {
-      opacity: '0.3'
-    },
-    ':active:not([aria-disabled=true])': {
-      transform: 'scale(0.8)',
-      willChange: 'transform'
-    },
-    // Minimum touch area
-    ':after': {
-      content: '""',
-      position: 'absolute',
-      height: (0, _sizeToRem.pxToRem)(44),
-      width: (0, _sizeToRem.pxToRem)(44)
-    },
-    extend: [{
-      condition: bleed,
-      style: {
-        margin: (0, _sizeToRem.pxToRem)(-8)
-      }
-    }]
+  return _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return {
+      boxSizing: 'border-box',
+      height: (0, _sizeToRem.pxToRem)(size),
+      width: (0, _sizeToRem.pxToRem)(size),
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: '50%',
+      transitionProperty: 'background-color, transform',
+      transitionDuration: '0.25s',
+      transitionTimingFunction: 'ease-in-out',
+      '[aria-disabled=true]': {
+        opacity: '0.3'
+      },
+      ':active:not([aria-disabled=true])': {
+        transform: 'scale(0.8)',
+        willChange: 'transform'
+      },
+      // Replaces default outline with vcc-ui blue blurred focus outline
+      ':focus-visible': {
+        outline: 0,
+        ':before': {
+          content: '""',
+          borderRadius: '9999px',
+          position: 'absolute',
+          height: (0, _sizeToRem.pxToRem)(size),
+          width: (0, _sizeToRem.pxToRem)(size),
+          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 3px 2px`,
+          transform: 'scale(1.1)'
+        }
+      },
+      // Extends touch area outside IconButton dimensions
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        height: (0, _sizeToRem.pxToRem)(44),
+        width: (0, _sizeToRem.pxToRem)(44)
+      },
+      extend: [{
+        condition: bleed,
+        style: {
+          margin: (0, _sizeToRem.pxToRem)(-8)
+        }
+      }]
+    };
   };
@@ -52,3 +70,3 @@ };
 
-const iconButtonStyle = (variant, intent) => _ref2 => {
+const iconButtonStyle = (variant, intent) => _ref3 => {
   let {
@@ -61,3 +79,3 @@ theme: {
     }
-  } = _ref2;
+  } = _ref3;
 
@@ -64,0 +82,0 @@ if (variant === 'outline') {

dist/components/inline/inline.js

@@ -18,2 +18,5 @@ "use strict";
 
+// TODO: Fix eslint issues the next time this file is edited.
+
+/* eslint-disable @typescript-eslint/ban-types */
 const style = {
@@ -20,0 +23,0 @@ display: 'inline'

dist/components/message/index.d.ts

@@ -1,4 +0,5 @@
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 
 export type MessageProps = {
+  children: React.ReactNode;
   /** Sets the type of the message, e.g. an error is displayed in red with an error icon */
@@ -5,0 +6,0 @@ type?: 'error' | 'description';

dist/components/nav/index.d.ts

@@ -8,3 +8,5 @@ import React, { ReactNode } from 'react';
     onKeyDown: React.KeyboardEventHandler<T_1>;
-}, KeyboardNavigationProvider: React.FC<{}>;
+}, KeyboardNavigationProvider: React.FC<{
+    children: React.ReactNode;
+}>;
 export declare type NavProps = {
@@ -11,0 +13,0 @@ /** Automatically hide the sticky navigation if the user starts scrolling */

dist/components/text/text.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _click = require("../click");
+
 var _utils = require("./utils");
@@ -65,3 +67,8 @@
   } : {};
-  const Element = (0, _utils.getRenderedElement)(isRootElement, as, appliedVariant, appliedSubStyle, theme);
+  let Element = (0, _utils.getRenderedElement)(isRootElement, as, appliedVariant, appliedSubStyle, theme);
+
+  if (Element === 'a') {
+    Element = _click.Click;
+  }
+
   return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
@@ -68,0 +75,0 @@ ref: ref

dist/esm/components/block/block.js

 import _extends from "@babel/runtime/helpers/extends";
+// TODO: Fix eslint issues the next time this file is edited.
+
+/* eslint-disable @typescript-eslint/ban-types */
 import React from 'react';
@@ -3,0 +6,0 @@ import PropTypes from 'prop-types';

dist/esm/components/icon-button/IconButton.styles.js

@@ -7,36 +7,54 @@ import { pxToRem } from '../../utils/size-to-rem';
   } = _ref;
-  return {
-    boxSizing: 'border-box',
-    height: pxToRem(size),
-    width: pxToRem(size),
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '50%',
-    transitionProperty: 'background-color, transform',
-    transitionDuration: '0.25s',
-    transitionTimingFunction: 'ease-in-out',
-    '[aria-disabled=true]': {
-      opacity: '0.3'
-    },
-    ':active:not([aria-disabled=true])': {
-      transform: 'scale(0.8)',
-      willChange: 'transform'
-    },
-    // Minimum touch area
-    ':after': {
-      content: '""',
-      position: 'absolute',
-      height: pxToRem(44),
-      width: pxToRem(44)
-    },
-    extend: [{
-      condition: bleed,
-      style: {
-        margin: pxToRem(-8)
-      }
-    }]
+  return _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return {
+      boxSizing: 'border-box',
+      height: pxToRem(size),
+      width: pxToRem(size),
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: '50%',
+      transitionProperty: 'background-color, transform',
+      transitionDuration: '0.25s',
+      transitionTimingFunction: 'ease-in-out',
+      '[aria-disabled=true]': {
+        opacity: '0.3'
+      },
+      ':active:not([aria-disabled=true])': {
+        transform: 'scale(0.8)',
+        willChange: 'transform'
+      },
+      // Replaces default outline with vcc-ui blue blurred focus outline
+      ':focus-visible': {
+        outline: 0,
+        ':before': {
+          content: '""',
+          borderRadius: '9999px',
+          position: 'absolute',
+          height: pxToRem(size),
+          width: pxToRem(size),
+          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 3px 2px`,
+          transform: 'scale(1.1)'
+        }
+      },
+      // Extends touch area outside IconButton dimensions
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        height: pxToRem(44),
+        width: pxToRem(44)
+      },
+      extend: [{
+        condition: bleed,
+        style: {
+          margin: pxToRem(-8)
+        }
+      }]
+    };
   };
 };
-export const iconButtonStyle = (variant, intent) => _ref2 => {
+export const iconButtonStyle = (variant, intent) => _ref3 => {
   let {
@@ -49,3 +67,3 @@ theme: {
     }
-  } = _ref2;
+  } = _ref3;
 
@@ -52,0 +70,0 @@ if (variant === 'outline') {

dist/esm/components/inline/inline.js

 import _extends from "@babel/runtime/helpers/extends";
+// TODO: Fix eslint issues the next time this file is edited.
+
+/* eslint-disable @typescript-eslint/ban-types */
 import React from 'react';
@@ -3,0 +6,0 @@ import PropTypes from 'prop-types';

dist/esm/components/text/text.js

@@ -6,2 +6,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { responsiveStringProp } from '../../utils/prop-types-utils';
+import { Click } from '../click';
 import { getRenderedElement, mergeStyles, normalizeResponsiveValue } from './utils';
@@ -42,3 +43,8 @@ export const SUB_STYLES = ['standard', 'inline-link', 'emphasis'];
   } : {};
-  const Element = getRenderedElement(isRootElement, as, appliedVariant, appliedSubStyle, theme);
+  let Element = getRenderedElement(isRootElement, as, appliedVariant, appliedSubStyle, theme);
+
+  if (Element === 'a') {
+    Element = Click;
+  }
+
   return /*#__PURE__*/React.createElement(Element, _extends({
@@ -45,0 +51,0 @@ ref: ref

dist/esm/styling/theme-picker.js

@@ -6,3 +6,3 @@ import React, { useContext } from 'react';
 import { getTheme } from '../themes/getTheme';
-export function ThemePicker(_ref) {
+export const ThemePicker = _ref => {
   let {
@@ -41,3 +41,3 @@ direction,
   }, children);
-}
+};
 ThemePicker.propTypes = {
@@ -44,0 +44,0 @@ direction: PropTypes.oneOf(['ltr', 'rtl']),

dist/esm/themes/getTypeScale.js

@@ -113,2 +113,6 @@ import { lineHeightToNumber } from '../utils/line-height-to-number';
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -147,2 +151,6 @@ color: color.foreground.primary,
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -182,2 +190,6 @@ color: color.foreground.primary,
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -256,2 +268,6 @@ color: color.foreground.primary,
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -258,0 +274,0 @@ color: color.foreground.primary,

dist/styling/theme-picker.d.ts

@@ -1,9 +0,9 @@
-import { ComponentType } from 'react';
+import React from 'react';
 import { Direction } from '../types/shared';
-
-type ThemePickerProps = {
-  direction?: Direction;
-  variant?: 'light' | 'dark';
-};
-export const ThemePicker: ComponentType<ThemePickerProps>;
+interface ThemePickerProps {
+    children?: React.ReactNode;
+    direction?: Direction;
+    variant?: 'light' | 'dark';
+}
+export declare const ThemePicker: React.FC<ThemePickerProps>;
 export {};

dist/styling/theme-picker.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.ThemePicker = ThemePicker;
+exports.ThemePicker = void 0;
 
@@ -25,3 +25,3 @@ var _react = _interopRequireWildcard(require("react"));
 
-function ThemePicker(_ref) {
+const ThemePicker = _ref => {
   let {
@@ -60,4 +60,5 @@ direction,
   }, children);
-}
+};
 
+exports.ThemePicker = ThemePicker;
 ThemePicker.propTypes = {
@@ -64,0 +65,0 @@ direction: _propTypes.default.oneOf(['ltr', 'rtl']),

dist/themes/getTypeScale.d.ts

@@ -149,2 +149,6 @@ import { CurrentTheme } from '../types/shared';
                 color: string;
+                display: string;
+                '[href]': {
+                    textDecoration: string;
+                };
                 '&:hover': {
@@ -188,2 +192,6 @@ color: string;
                 color: string;
+                display: string;
+                '[href]': {
+                    textDecoration: string;
+                };
                 '&:hover': {
@@ -229,2 +237,6 @@ color: string;
                 color: string;
+                display: string;
+                '[href]': {
+                    textDecoration: string;
+                };
                 '&:hover': {
@@ -314,2 +326,6 @@ color: string;
                 color: string;
+                display: string;
+                '[href]': {
+                    textDecoration: string;
+                };
                 '&:hover': {
@@ -316,0 +332,0 @@ color: string;

dist/themes/getTypeScale.js

@@ -126,2 +126,6 @@ "use strict";
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -160,2 +164,6 @@ color: color.foreground.primary,
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -195,2 +203,6 @@ color: color.foreground.primary,
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -269,2 +281,6 @@ color: color.foreground.primary,
           color: color.foreground.secondary,
+          display: 'inline',
+          '[href]': {
+            textDecoration: 'underline'
+          },
           '&:hover': {
@@ -271,0 +287,0 @@ color: color.foreground.primary,

package.json

 {
   "name": "vcc-ui",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "license": "UNLICENSED",
@@ -35,24 +35,24 @@ "description": "A React library for building user interfaces at Volvo Cars",
     "@volvo-cars/react-aria": "^0.2.2",
-    "@volvo-cars/ui-design-tokens": "^2.13.1",
+    "@volvo-cars/ui-design-tokens": "^2.14.0",
     "css-in-js-utils": "^3.0.4",
     "csstype": "^3.0.6",
     "fast-loops": "^1.1.3",
-    "fela": "^12.0.2",
-    "fela-dom": "^12.0.2",
-    "fela-enforce-longhands": "^12.0.2",
-    "fela-plugin-embedded": "^12.0.2",
-    "fela-plugin-extend": "^12.0.2",
-    "fela-plugin-fallback-value": "^12.0.2",
-    "fela-plugin-hover-media": "^12.0.2",
-    "fela-plugin-named-keys": "^12.0.2",
-    "fela-plugin-prefixer": "^12.0.2",
-    "fela-plugin-responsive-value": "^12.0.2",
-    "fela-plugin-rtl": "^12.0.2",
-    "fela-plugin-theme-value": "^12.0.2",
-    "fela-plugin-unit": "^12.0.2",
-    "fela-sort-classnames": "^12.0.2",
-    "fela-sort-media-query-mobile-first": "^12.0.2",
-    "fela-tools": "^12.0.2",
+    "fela": "^12.2.0",
+    "fela-dom": "^12.2.0",
+    "fela-enforce-longhands": "^12.2.0",
+    "fela-plugin-embedded": "^12.2.0",
+    "fela-plugin-extend": "^12.2.0",
+    "fela-plugin-fallback-value": "^12.2.0",
+    "fela-plugin-hover-media": "^12.2.0",
+    "fela-plugin-named-keys": "^12.2.0",
+    "fela-plugin-prefixer": "^12.2.0",
+    "fela-plugin-responsive-value": "^12.2.0",
+    "fela-plugin-rtl": "^12.2.0",
+    "fela-plugin-theme-value": "^12.2.0",
+    "fela-plugin-unit": "^12.2.0",
+    "fela-sort-classnames": "^12.2.0",
+    "fela-sort-media-query-mobile-first": "^12.2.0",
+    "fela-tools": "^12.2.0",
     "hex-to-rgba": "^2.0.0",
-    "react-fela": "^12.0.2"
+    "react-fela": "^12.2.0"
   },
@@ -64,12 +64,12 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/cli": "7.17.10",
-    "@babel/plugin-proposal-class-properties": "7.17.12",
-    "@babel/plugin-transform-modules-commonjs": "7.18.2",
-    "@babel/plugin-transform-runtime": "7.18.2",
+    "@babel/cli": "7.18.10",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-transform-modules-commonjs": "7.18.6",
+    "@babel/plugin-transform-runtime": "7.18.10",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.18.2",
-    "@babel/preset-react": "7.17.12",
-    "@babel/preset-typescript": "7.17.12",
-    "@storybook/react": "6.5.9",
-    "@types/react": "17.0.47",
+    "@babel/preset-env": "7.18.10",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@storybook/react": "6.5.10",
+    "@types/react": "17.0.48",
     "@volvo-cars/browserslist-config": "workspace:*",
@@ -80,15 +80,15 @@ "babel-core": "7.0.0-bridge.0",
     "chromatic-cli": "1.0.0",
-    "core-js": "3.23.3",
+    "core-js": "3.24.1",
     "cpx": "1.5.0",
-    "fela-monolithic": "12.1.1",
+    "fela-monolithic": "12.2.0",
     "fs-extra": "10.1.0",
     "glob": "8.0.3",
-    "jsdom": "19.0.0",
+    "jsdom": "20.0.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",
-    "react-docgen": "5.4.2",
+    "react-docgen": "5.4.3",
     "react-docgen-typescript": "2.2.2",
     "react-test-renderer": "17.0.2",
     "shelljs": "0.8.5",
-    "typescript": "4.7.3",
+    "typescript": "4.7.4",
     "vcc-ui-docs-utils": "workspace:*",
@@ -95,0 +95,0 @@ "vcc-ui-testing": "workspace:*"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

543955

increased by0.61%

Lines of code

15615

increased by0.68%

Dependency changes

• Updated@volvo-cars/ui-design-tokens@^2.14.0

• Updatedfela@^12.2.0

• Updatedfela-dom@^12.2.0

• Updatedfela-enforce-longhands@^12.2.0

• Updatedfela-plugin-embedded@^12.2.0

• Updatedfela-plugin-extend@^12.2.0

• Updatedfela-plugin-fallback-value@^12.2.0

• Updatedfela-plugin-hover-media@^12.2.0

• Updatedfela-plugin-named-keys@^12.2.0

• Updatedfela-plugin-prefixer@^12.2.0

• Updatedfela-plugin-responsive-value@^12.2.0

• Updatedfela-plugin-rtl@^12.2.0

• Updatedfela-plugin-theme-value@^12.2.0

• Updatedfela-plugin-unit@^12.2.0

• Updatedfela-sort-classnames@^12.2.0

• Updatedfela-sort-media-query-mobile-first@^12.2.0

• Updatedfela-tools@^12.2.0

• Updatedreact-fela@^12.2.0