@hsds/utils-mixins - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

index.esm.js

 import isFunction from 'lodash.isfunction';
 import isNumber from 'lodash.isnumber';
 import isString from 'lodash.isstring';
+import { css } from 'styled-components';
 import { getColor, rgba } from '@hsds/utils-color';
-import { css } from 'styled-components';
 import { STATES } from '@hsds/utils-constants';
@@ -25,4 +25,9 @@ import { forEach } from '@hsds/utils-sass';
 
-function generateBreakPoint(value = 'md', styles) {
-  if (!isString(value) && !isNumber(value)) return '';
+function generateBreakPoint(value, styles) {
+  if (value === void 0) {
+    value = 'md';
+  }
+
+  if (!isString(value) && !isNumber(value)) return ''; // eslint-disable-next-line no-prototype-builtins
+
   const minWidth = breakpoints.hasOwnProperty(value) ? breakpoints[value] : isNumber(value) ? `${value}px` : value;
@@ -55,20 +60,7 @@ const compiledStyles = isFunction(styles) ? styles() : styles;
   const hoverShadow = '0 3px 12px 0 rgba(0, 0, 0, 0.1)';
-  return `
-    background-color: white;
-    border-radius: 3px;
-    box-shadow:
-      0 1px 3px 0 rgba(0, 0, 0, 0.1),
-      inset 0 0 0 1px ${rgba(color, 0.7)},
-      inset 0 -1px 0 0 ${bottomColor};
-    transition: box-shadow 200ms linear;
-    will-change: box-shadow;
-
-    &:hover {
-      box-shadow:
-        ${hoverShadow},
-        inset 0 0 0 1px ${colorHover},
-        inset 0 -1px 0 0 ${bottomColor}
-    }
-  `;
+  return css(["background-color:white;border-radius:3px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),inset 0 0 0 1px ", ",inset 0 -1px 0 0 ", ";transition:box-shadow 200ms linear;will-change:box-shadow;&:hover{box-shadow:", ",inset 0 0 0 1px ", ",inset 0 -1px 0 0 ", ";}"], rgba(color, 0.7), bottomColor, hoverShadow, colorHover, bottomColor);
 };
+const shadowlessCardBoxShadow = () => css(["box-shadow:0 1px 3px 0 rgba(0,0,0,0),inset 0 0 0 1px ", ",inset 0 -1px 0 0 ", ";"], rgba(getColor('grey.600'), 0.7), getColor('grey.700'));
+const shadowlessBoxShadowHover = () => css(["box-shadow:0 3px 12px 0 rgba(0,0,0,0.1),inset 0 0 0 1px ", ",inset 0 -1px 0 0 ", ";"], getColor('grey.600'), getColor('grey.700'));
+const shadowlessBoxShadowWithHover = () => css(["&.is-hoverable{", " &:hover{", "}}"], shadowlessCardBoxShadow(), shadowlessBoxShadowHover());
 
@@ -150,69 +142,10 @@ const common = `
 
-let _ = t => t,
-    _t;
-const focusShadow = `0 0 0 2px var(--focusRingColor, ${getColor('blue.500')});`;
+const focusShadow = `0 0 0 var(--focusRingSize, 2px) var(--focusRingColor, ${getColor('blue.500')});`;
 const focusShadowWithInset = `
-  0 0 0 2px var(--focusRingColor, ${getColor('blue.500')}), inset 0 0 0 2px white;
+  0 0 0 var(--focusRingSize, 2px) var(--focusRingColor, ${getColor('blue.500')}), inset 0 0 0 var(--focusRingSize, 2px) white;
 `;
-const focusRing = css(_t || (_t = _`
-  --focusRingColor: ${0};
-  --focusRingOffset: -2px;
-  --focusRingShadow: ${0};
-  --focusRingRadius: inherit;
-  outline: none;
-  position: relative;
+const focusRing = css(["--focusRingColor:", ";--focusRingOffset:-2px;--focusRingShadow:", ";--focusRingRadius:inherit;outline:none;position:relative;&:before{content:'';border-radius:var(--focusRingRadius);bottom:var(--focusRingOffset);box-shadow:var(--focusRingShadow);left:var(--focusRingOffset);pointer-events:none;position:absolute;right:var(--focusRingOffset);top:var(--focusRingOffset);opacity:0;background:transparent;z-index:3;}&:focus,&.is-focused{&:before{opacity:1;}}&:focus:not(:focus-visible){&:before{opacity:0;}}&:focus-visible{&:before{opacity:1 !important;transition:opacity ease 0.2s;}}"], getColor('blue.500'), focusShadow);
 
-  &:before {
-    content: '';
-    border-radius: var(--focusRingRadius);
-    bottom: var(--focusRingOffset);
-    box-shadow: var(--focusRingShadow);
-    left: var(--focusRingOffset);
-    pointer-events: none;
-    position: absolute;
-    right: var(--focusRingOffset);
-    top: var(--focusRingOffset);
-    opacity: 0;
-    background: transparent;
-    z-index: 3;
-  }
+const generateLinkStyles = () => css(["color:", ";cursor:pointer;text-decoration:none;&:hover{color:", ";outline-width:0;text-decoration:underline;}&:active{color:", ";outline-width:0;}"], getColor('link.base'), getColor('link.hover'), getColor('link.active'));
 
-  &:focus,
-  &.is-focused {
-    &:before {
-      opacity: 1;
-    }
-  }
-
-  &:focus:not(:focus-visible) {
-    &:before {
-      opacity: 0;
-    }
-  }
-
-  &:focus-visible {
-    &:before {
-      opacity: 1 !important;
-      transition: opacity ease 0.2s;
-    }
-  }
-`), getColor('blue.500'), focusShadow);
-
-const generateLinkStyles = () => `
-  color: ${getColor('link.base')};
-  cursor: pointer;
-  text-decoration: none;
-
-  &:hover {
-    color: ${getColor('link.hover')};
-    outline-width: 0;
-    text-decoration: underline;
-  }
-
-  &:active {
-    color: ${getColor('link.active')};
-    outline-width: 0;
-  }
-`;
-
 /**
@@ -224,3 +157,7 @@ * Generates the color CSS property for various states.
 
-const generateStateColorStyles = (prop = 'color') => {
+const generateStateColorStyles = function (prop) {
+  if (prop === void 0) {
+    prop = 'color';
+  }
+
   return forEach(STATES, state => `
@@ -262,2 +199,2 @@ &.is-${state} {
 
-export { breakpointAll, breakpoints, d100, d200, d200Effect, d300, d300Effect, d400, d400Effect, d500, d500Effect, d600, d600Effect, d700, depthLevels, focusRing, focusShadow, focusShadowWithInset, generateBreakPoint, generateCardStyles, generateLinkStyles, generateStateColorStyles, generateVisuallyHiddenStyles, noteBoxShadow, noteBoxShadowHover, noteBoxShadowWithHover };
+export { breakpointAll, breakpoints, d100, d200, d200Effect, d300, d300Effect, d400, d400Effect, d500, d500Effect, d600, d600Effect, d700, depthLevels, focusRing, focusShadow, focusShadowWithInset, generateBreakPoint, generateCardStyles, generateLinkStyles, generateStateColorStyles, generateVisuallyHiddenStyles, noteBoxShadow, noteBoxShadowHover, noteBoxShadowWithHover, shadowlessBoxShadowHover, shadowlessBoxShadowWithHover, shadowlessCardBoxShadow };

package.json

 {
   "name": "@hsds/utils-mixins",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "peerDependencies": {
     "styled-components": "5.1.1"
   },
-  "main": "./index.umd.js",
+  "main": "./index.cjs.js",
   "module": "./index.esm.js",
@@ -9,0 +9,0 @@ "typings": "./index.d.ts",

README.md

@@ -5,2 +5,57 @@ # mixins
 
+Includes:
+
+### breakpoints
+
+- `breakpoints`: lg, md, sm, xs
+- `generateBreakPoint`
+- `breakpointAll`
+
+### cardStyles
+
+- `generateCardStyles`
+- `shadowlessCardBoxShadow`
+- `shadowlessBoxShadowHover`
+- `shadowlessBoxShadowWithHover`
+
+### depth
+
+- `d100`
+- `d200`
+- `d200Effect`
+- `d300`
+- `d300Effect`
+- `d400`
+- `d400Effect`
+- `d500`
+- `d500Effect`
+- `d600`
+- `d600Effect`
+- `d700`
+- `depthLevels`
+
+### focusRing
+
+- `focusShadow`
+- `focusShadowWithInset`
+- `focusRing`
+
+### linkStyles
+
+- `generateLinkStyles`
+
+### stateStyles
+
+- `generateStateColorStyles`
+
+### noteStyles
+
+- `noteBoxShadow`
+- `noteBoxShadowHover`
+- `noteBoxShadowWithHover`
+
+### visuallyHidden
+
+- `generateVisuallyHiddenStyles`
+
 ## Running unit tests
@@ -10,2 +65,2 @@
 
-> Up to date with hsds-react `v3.54.2`
+> Up to date with hsds-react `v3.54.11`

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28788

increased by81.48%

Number of package files

21

increased by425%

Lines of code

736

increased by45.17%

Number of lines in readme file

65

increased by550%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes