@contentful/f36-icon - npm Package Compare versions

Comparing version 4.50.2 to 4.51.0-beta.0

dist/esm/index.js

@@ -1,10 +0,10 @@
-import u, { forwardRef } from 'react';
+import f, { forwardRef } from 'react';
 import { cx, css } from 'emotion';
+import { Box } from '@contentful/f36-core';
 import i from '@contentful/f36-tokens';
-import { Box } from '@contentful/f36-core';
 
-var G=Object.defineProperty,T=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var x=(e,o,t)=>o in e?G(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,r=(e,o)=>{for(var t in o||(o={}))g.call(o,t)&&x(e,t,o[t]);if(c)for(var t of c(o))P.call(o,t)&&x(e,t,o[t]);return e},a=(e,o)=>T(e,B(o));var f=(e,o)=>{var t={};for(var n in e)g.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&c)for(var n of c(e))o.indexOf(n)<0&&P.call(e,n)&&(t[n]=e[n]);return t};var V="svg",E={xlarge:{height:"48px",width:"48px"},large:{height:"32px",width:"32px"},medium:{height:"24px",width:"24px"},small:{height:"18px",width:"18px"},tiny:{height:"16px",width:"16px"}},k={muted:i.gray600,negative:i.red600,positive:i.green600,primary:i.blue600,secondary:i.gray900,warning:i.colorWarning,white:i.colorWhite,premium:i.purple500},_=e=>{let o=e["aria-label"],t=e["aria-labelledby"];return o||t?{}:{"aria-hidden":!0}};function z(O,v){var d=O,{as:e,children:o,className:t,variant:n="primary",role:m="img",size:p="small",testId:s="cf-ui-icon",trimmed:C,viewBox:b="0 0 24 24"}=d,l=f(d,["as","children","className","variant","role","size","testId","trimmed","viewBox"]);let I={className:cx(css({fill:k[n],height:E[p].height,width:C?"auto":E[p].width}),t),ref:v,testId:s,role:m},h=_(l);return e?u.createElement(Box,a(r(r(r({display:"inline-block"},h),l),I),{as:e})):u.createElement(Box,r(a(r(r({viewBox:b,display:"inline-block"},h),l),{as:V}),I),o)}var y=forwardRef(z);function N({name:e,path:o,props:t,trimmed:n,viewBox:m}){let p=function(s){return u.createElement(y,a(r(r({viewBox:m},t),s),{trimmed:n}),o)};return e&&(p.displayName=e),p}
+var G=Object.defineProperty,T=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var x=(e,o,n)=>o in e?G(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,r=(e,o)=>{for(var n in o||(o={}))g.call(o,n)&&x(e,n,o[n]);if(m)for(var n of m(o))w.call(o,n)&&x(e,n,o[n]);return e},c=(e,o)=>T(e,k(o));var P=(e,o)=>{var n={};for(var t in e)g.call(e,t)&&o.indexOf(t)<0&&(n[t]=e[t]);if(e!=null&&m)for(var t of m(e))o.indexOf(t)<0&&w.call(e,t)&&(n[t]=e[t]);return n};var R={muted:i.gray600,negative:i.red600,positive:i.green600,primary:i.blue600,secondary:i.gray900,warning:i.colorWarning,white:i.colorWhite,premium:i.purple500},A={xlarge:{height:"48px",width:"48px"},large:{height:"32px",width:"32px"},medium:{height:"24px",width:"24px"},small:{height:"18px",width:"18px"},tiny:{height:"16px",width:"16px"}},V={medium:{height:"20px",width:"20px"},small:{height:"16px",width:"16px"}},u=({isNewIcon:e,size:o,trimmed:n,variant:t})=>{let p=e?V:A;return {icon:css({fill:R[t],height:p[o].height,width:n?"auto":p[o].width})}};var L="svg",D=e=>{let o=e["aria-label"],n=e["aria-labelledby"];return o||n?{}:{"aria-hidden":!0}};function F(W,v){var y=W,{as:e,children:o,className:n,isNewIcon:t,variant:p=t?"secondary":"primary",role:a="img",size:s="small",testId:S="cf-ui-icon",trimmed:b,viewBox:z="0 0 24 24"}=y,l=P(y,["as","children","className","isNewIcon","variant","role","size","testId","trimmed","viewBox"]);let N=u({isNewIcon:t,size:s,trimmed:b,variant:p}),d={className:cx(N.icon,n),ref:v,testId:S,role:a},h=D(l);return e?f.createElement(Box,c(r(r(r({display:"inline-block"},h),l),d),{as:e})):f.createElement(Box,r(c(r(r({viewBox:z,display:"inline-block"},h),l),{as:L}),d),o)}var I=forwardRef(F);function U({name:e,path:o,props:n,trimmed:t,viewBox:p}){let a=function(s){return f.createElement(I,c(r(r({viewBox:p},n),s),{trimmed:t}),o)};return e&&(a.displayName=e),a}function H({sizes:e}){return function(n){let t=e.small;return n.size==="medium"&&(t=e.medium),f.createElement(t,c(r({},n),{isNewIcon:!0}))}}
 
-export { y as Icon, N as generateIcon };
+export { I as Icon, H as generateCombinedIcon, U as generateIcon };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -6,14 +6,20 @@ import React, { ExoticComponent, ComponentType, ReactElement, SVGAttributes } from 'react';
 declare type IconComponent = ExoticComponent<any> | ComponentType<any>;
+declare type NewIconSize = 'small' | 'medium';
 declare type IconSize = 'xlarge' | 'large' | 'medium' | 'small' | 'tiny';
 declare type IconVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'muted' | 'white' | 'premium';
-declare type IconInternalProps = CommonProps & {
-    children?: ReactElement | ReactElement[];
+declare type NewOrOldIconProps = {
+    isNewIcon: true;
     /**
      * Determines the size of the icon
      */
-    size?: IconSize;
+    size?: NewIconSize;
+} | {
+    isNewIcon?: false | never;
     /**
-     * Whether or not to trim the icon width, i.e. set `width` to `auto`
+     * Determines the size of the icon
      */
-    trimmed?: boolean;
+    size?: IconSize;
+};
+declare type IconInternalProps = CommonProps & NewOrOldIconProps & {
+    children?: ReactElement | ReactElement[];
     /**
@@ -27,2 +33,6 @@ * Determines the fill color used
     viewBox?: SVGAttributes<SVGSVGElement>['viewBox'];
+    /**
+     * Whether or not to trim the icon width, i.e. set `width` to `auto`
+     */
+    trimmed?: boolean;
 };
@@ -61,3 +71,7 @@ declare type IconProps<E extends React.ElementType = IconComponent> = PolymorphicProps<IconInternalProps, E, 'as' | 'children' | 'width' | 'height'>;
 };
+declare type GenerateCombinedIconParameters = {
+    sizes: Record<NewIconSize, IconComponent>;
+};
+declare function generateCombinedIcon({ sizes, }: GenerateCombinedIconParameters): (props: IconProps) => JSX.Element;
 
-export { GeneratedIconProps, Icon, IconComponent, IconProps, IconSize, IconVariant, generateIcon };
+export { GeneratedIconProps, Icon, IconComponent, IconProps, IconSize, IconVariant, generateCombinedIcon, generateIcon };

dist/index.js

 'use strict';
 
-var u = require('react');
+var f = require('react');
 var emotion = require('emotion');
+var f36Core = require('@contentful/f36-core');
 var i = require('@contentful/f36-tokens');
-var f36Core = require('@contentful/f36-core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var u__default = /*#__PURE__*/_interopDefault(u);
+var f__default = /*#__PURE__*/_interopDefault(f);
 var i__default = /*#__PURE__*/_interopDefault(i);
 
-var G=Object.defineProperty,T=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var x=(e,o,t)=>o in e?G(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,r=(e,o)=>{for(var t in o||(o={}))g.call(o,t)&&x(e,t,o[t]);if(c)for(var t of c(o))P.call(o,t)&&x(e,t,o[t]);return e},a=(e,o)=>T(e,B(o));var f=(e,o)=>{var t={};for(var n in e)g.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&c)for(var n of c(e))o.indexOf(n)<0&&P.call(e,n)&&(t[n]=e[n]);return t};var V="svg",E={xlarge:{height:"48px",width:"48px"},large:{height:"32px",width:"32px"},medium:{height:"24px",width:"24px"},small:{height:"18px",width:"18px"},tiny:{height:"16px",width:"16px"}},k={muted:i__default.default.gray600,negative:i__default.default.red600,positive:i__default.default.green600,primary:i__default.default.blue600,secondary:i__default.default.gray900,warning:i__default.default.colorWarning,white:i__default.default.colorWhite,premium:i__default.default.purple500},_=e=>{let o=e["aria-label"],t=e["aria-labelledby"];return o||t?{}:{"aria-hidden":!0}};function z(O,v){var d=O,{as:e,children:o,className:t,variant:n="primary",role:m="img",size:p="small",testId:s="cf-ui-icon",trimmed:C,viewBox:b="0 0 24 24"}=d,l=f(d,["as","children","className","variant","role","size","testId","trimmed","viewBox"]);let I={className:emotion.cx(emotion.css({fill:k[n],height:E[p].height,width:C?"auto":E[p].width}),t),ref:v,testId:s,role:m},h=_(l);return e?u__default.default.createElement(f36Core.Box,a(r(r(r({display:"inline-block"},h),l),I),{as:e})):u__default.default.createElement(f36Core.Box,r(a(r(r({viewBox:b,display:"inline-block"},h),l),{as:V}),I),o)}var y=u.forwardRef(z);function N({name:e,path:o,props:t,trimmed:n,viewBox:m}){let p=function(s){return u__default.default.createElement(y,a(r(r({viewBox:m},t),s),{trimmed:n}),o)};return e&&(p.displayName=e),p}
+var G=Object.defineProperty,T=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var x=(e,o,n)=>o in e?G(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,r=(e,o)=>{for(var n in o||(o={}))g.call(o,n)&&x(e,n,o[n]);if(m)for(var n of m(o))w.call(o,n)&&x(e,n,o[n]);return e},c=(e,o)=>T(e,k(o));var P=(e,o)=>{var n={};for(var t in e)g.call(e,t)&&o.indexOf(t)<0&&(n[t]=e[t]);if(e!=null&&m)for(var t of m(e))o.indexOf(t)<0&&w.call(e,t)&&(n[t]=e[t]);return n};var R={muted:i__default.default.gray600,negative:i__default.default.red600,positive:i__default.default.green600,primary:i__default.default.blue600,secondary:i__default.default.gray900,warning:i__default.default.colorWarning,white:i__default.default.colorWhite,premium:i__default.default.purple500},A={xlarge:{height:"48px",width:"48px"},large:{height:"32px",width:"32px"},medium:{height:"24px",width:"24px"},small:{height:"18px",width:"18px"},tiny:{height:"16px",width:"16px"}},V={medium:{height:"20px",width:"20px"},small:{height:"16px",width:"16px"}},u=({isNewIcon:e,size:o,trimmed:n,variant:t})=>{let p=e?V:A;return {icon:emotion.css({fill:R[t],height:p[o].height,width:n?"auto":p[o].width})}};var L="svg",D=e=>{let o=e["aria-label"],n=e["aria-labelledby"];return o||n?{}:{"aria-hidden":!0}};function F(W,v){var y=W,{as:e,children:o,className:n,isNewIcon:t,variant:p=t?"secondary":"primary",role:a="img",size:s="small",testId:S="cf-ui-icon",trimmed:b,viewBox:z="0 0 24 24"}=y,l=P(y,["as","children","className","isNewIcon","variant","role","size","testId","trimmed","viewBox"]);let N=u({isNewIcon:t,size:s,trimmed:b,variant:p}),d={className:emotion.cx(N.icon,n),ref:v,testId:S,role:a},h=D(l);return e?f__default.default.createElement(f36Core.Box,c(r(r(r({display:"inline-block"},h),l),d),{as:e})):f__default.default.createElement(f36Core.Box,r(c(r(r({viewBox:z,display:"inline-block"},h),l),{as:L}),d),o)}var I=f.forwardRef(F);function U({name:e,path:o,props:n,trimmed:t,viewBox:p}){let a=function(s){return f__default.default.createElement(I,c(r(r({viewBox:p},n),s),{trimmed:t}),o)};return e&&(a.displayName=e),a}function H({sizes:e}){return function(n){let t=e.small;return n.size==="medium"&&(t=e.medium),f__default.default.createElement(t,c(r({},n),{isNewIcon:!0}))}}
 
-exports.Icon = y;
-exports.generateIcon = N;
+exports.Icon = I;
+exports.generateCombinedIcon = H;
+exports.generateIcon = U;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-icon",
-  "version": "4.50.2",
+  "version": "4.51.0-beta.0",
   "description": "Forma 36: Icon component",
@@ -5,0 +5,0 @@ "license": "MIT",

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

32778

increased by24.9%

Lines of code

108

increased by21.35%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes