@contentful/f36-icon - npm Package Compare versions

Comparing version 4.58.0 to 5.0.0-alpha.0

dist/esm/index.js

@@ -1,10 +0,10 @@
-import u, { forwardRef } from 'react';
+import g, { forwardRef } from 'react';
+import b from '@contentful/f36-tokens';
 import { cx, css } from 'emotion';
-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 R=Object.defineProperty,S=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var P=(e,n,o)=>n in e?R(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,r=(e,n)=>{for(var o in n||(n={}))h.call(n,o)&&P(e,o,n[o]);if(s)for(var o of s(n))C.call(n,o)&&P(e,o,n[o]);return e},p=(e,n)=>S(e,z(n));var l=(e,n)=>{var o={};for(var t in e)h.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&s)for(var t of s(e))n.indexOf(t)<0&&C.call(e,t)&&(o[t]=e[t]);return o};var V=(o=>(o.Active="active",o.Default="default",o))(V||{});function E({variants:e}){return function(o){return o.isActive?e.active(o):e.default(o)}}var F="svg",I={tiny:"14px",small:"16px",medium:"20px"},L=e=>{let n=e["aria-label"],o=e["aria-labelledby"];return n||o?{}:{"aria-hidden":!0}};function N(H,B){var d=H,{as:e,children:n,className:o,isActive:t=!1,color:i=t?b.blue500:b.gray900,role:m="img",size:f="medium",testId:a="cf-ui-icon",viewBox:T="0 0 20 20"}=d,y=l(d,["as","children","className","isActive","color","role","size","testId","viewBox"]);let u={className:cx(css({fill:i,height:I[f],width:I[f]}),o),ref:B,testId:a,role:m},x=L(y);return e?g.createElement(Box,p(r(r(r({display:"inline-block"},x),y),u),{as:e})):g.createElement(Box,r(p(r(r({viewBox:T,display:"inline-block"},x),y),{as:F}),u),n)}var c=forwardRef(N);function A(e){return f=>{var a=f,{isActive:o=!1,color:t=o?b.blue500:b.gray900,size:i="medium"}=a,m=l(a,["isActive","color","size"]);return g.createElement(c,p(r({},m),{as:()=>g.createElement(e,p(r({},m),{color:t,size:I[i]}))}))}}function ie(e){let n=A(e);return E({variants:{active:o=>g.createElement(n,p(r({},o),{weight:"fill"})),default:n}})}function le({name:e,path:n,props:o,viewBox:t}){let i=function(m){return g.createElement(c,r(r({viewBox:t},o),m),n)};return e&&(i.displayName=e),i}
 
-export { y as Icon, N as generateIcon };
+export { c as Icon, V as IconVariant, E as generateComponentWithVariants, ie as generateForma36Icon, le as generateIconComponent };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -1,22 +0,27 @@
-import React, { ExoticComponent, ComponentType, ReactElement, SVGAttributes } from 'react';
+import * as React$1 from 'react';
+import React__default, { ExoticComponent, ComponentType, ElementType, ReactElement, SVGAttributes } from 'react';
 import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps } from '@contentful/f36-core';
 
+declare type IconComponent = ExoticComponent<any> | ComponentType<any>;
+declare type IconSize = 'medium' | 'small' | 'tiny';
+declare enum IconVariant {
+    Active = "active",
+    Default = "default"
+}
+
 declare const ICON_DEFAULT_TAG = "svg";
-declare type IconComponent = ExoticComponent<any> | ComponentType<any>;
-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[];
     /**
-     * Determines the size of the icon
+     * Determines the color of the icon
      */
-    size?: IconSize;
+    color?: string;
     /**
-     * Whether or not to trim the icon width, i.e. set `width` to `auto`
+     * Determines the active state of the icon
      */
-    trimmed?: boolean;
+    isActive?: boolean;
     /**
-     * Determines the fill color used
+     * Determines the size of the icon
      */
-    variant?: IconVariant;
+    size?: IconSize;
     /**
@@ -27,3 +32,3 @@ * Custom SVG viewBox attribute to use
 };
-declare type IconProps<E extends React.ElementType = IconComponent> = PolymorphicProps<IconInternalProps, E, 'as' | 'children' | 'width' | 'height'>;
+declare type IconProps<E extends ElementType = IconComponent> = PolymorphicProps<IconInternalProps, E, 'as' | 'children' | 'width' | 'height'>;
 declare const Icon: PolymorphicComponent<ExpandProps<IconInternalProps>, typeof ICON_DEFAULT_TAG, 'width' | 'height'>;
@@ -34,3 +39,3 @@
 };
-declare type GenerateIconParameters = {
+declare type GenerateIconComponentParameters = {
     /**
@@ -49,6 +54,2 @@ * Icon name is used as the generated icon's component display name
     /**
-     * Whether or not to trim the icon width, i.e. set `width` to `auto`
-     */
-    trimmed?: IconProps['trimmed'];
-    /**
      * Custom SVG viewBox attribute to use for the generated icon
@@ -58,3 +59,3 @@ */
 };
-declare function generateIcon({ name, path, props: defaultProps, trimmed, viewBox, }: GenerateIconParameters): {
+declare function generateIconComponent({ name, path, props: defaultProps, viewBox, }: GenerateIconComponentParameters): {
     (props: IconProps): JSX.Element;
@@ -64,2 +65,11 @@ displayName: string;
 
-export { GeneratedIconProps, Icon, IconComponent, IconProps, IconSize, IconVariant, generateIcon };
+declare function generateComponentWithVariants({ variants, }: {
+    variants: Record<IconVariant, React.FunctionComponent<GeneratedIconProps>>;
+}): (props: GeneratedIconProps) => React$1.ReactElement<any, any>;
+
+/**
+ * Helper function to generate a Forma 36 icon component from a Phosphor icon component
+ */
+declare function generateForma36Icon(PhosphorIcon: any): (props: GeneratedIconProps) => React__default.ReactElement<any, any>;
+
+export { GeneratedIconProps, Icon, IconComponent, IconProps, IconSize, IconVariant, generateComponentWithVariants, generateForma36Icon, generateIconComponent };

dist/index.js

 'use strict';
 
-var u = require('react');
+var g = require('react');
+var b = require('@contentful/f36-tokens');
 var emotion = require('emotion');
-var i = require('@contentful/f36-tokens');
 var f36Core = require('@contentful/f36-core');
@@ -10,10 +10,13 @@
 
-var u__default = /*#__PURE__*/_interopDefault(u);
-var i__default = /*#__PURE__*/_interopDefault(i);
+var g__default = /*#__PURE__*/_interopDefault(g);
+var b__default = /*#__PURE__*/_interopDefault(b);
 
-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 R=Object.defineProperty,S=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var P=(e,n,o)=>n in e?R(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,r=(e,n)=>{for(var o in n||(n={}))h.call(n,o)&&P(e,o,n[o]);if(s)for(var o of s(n))C.call(n,o)&&P(e,o,n[o]);return e},p=(e,n)=>S(e,z(n));var l=(e,n)=>{var o={};for(var t in e)h.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&s)for(var t of s(e))n.indexOf(t)<0&&C.call(e,t)&&(o[t]=e[t]);return o};var V=(o=>(o.Active="active",o.Default="default",o))(V||{});function E({variants:e}){return function(o){return o.isActive?e.active(o):e.default(o)}}var F="svg",I={tiny:"14px",small:"16px",medium:"20px"},L=e=>{let n=e["aria-label"],o=e["aria-labelledby"];return n||o?{}:{"aria-hidden":!0}};function N(H,B){var d=H,{as:e,children:n,className:o,isActive:t=!1,color:i=t?b__default.default.blue500:b__default.default.gray900,role:m="img",size:f="medium",testId:a="cf-ui-icon",viewBox:T="0 0 20 20"}=d,y=l(d,["as","children","className","isActive","color","role","size","testId","viewBox"]);let u={className:emotion.cx(emotion.css({fill:i,height:I[f],width:I[f]}),o),ref:B,testId:a,role:m},x=L(y);return e?g__default.default.createElement(f36Core.Box,p(r(r(r({display:"inline-block"},x),y),u),{as:e})):g__default.default.createElement(f36Core.Box,r(p(r(r({viewBox:T,display:"inline-block"},x),y),{as:F}),u),n)}var c=g.forwardRef(N);function A(e){return f=>{var a=f,{isActive:o=!1,color:t=o?b__default.default.blue500:b__default.default.gray900,size:i="medium"}=a,m=l(a,["isActive","color","size"]);return g__default.default.createElement(c,p(r({},m),{as:()=>g__default.default.createElement(e,p(r({},m),{color:t,size:I[i]}))}))}}function ie(e){let n=A(e);return E({variants:{active:o=>g__default.default.createElement(n,p(r({},o),{weight:"fill"})),default:n}})}function le({name:e,path:n,props:o,viewBox:t}){let i=function(m){return g__default.default.createElement(c,r(r({viewBox:t},o),m),n)};return e&&(i.displayName=e),i}
 
-exports.Icon = y;
-exports.generateIcon = N;
+exports.Icon = c;
+exports.IconVariant = V;
+exports.generateComponentWithVariants = E;
+exports.generateForma36Icon = ie;
+exports.generateIconComponent = le;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-icon",
-  "version": "4.58.0",
+  "version": "5.0.0-alpha.0",
   "description": "Forma 36: Icon component",
@@ -15,3 +15,4 @@ "license": "MIT",
   "devDependencies": {
-    "react-icons": "^4.4.0"
+    "react-icons": "^4.4.0",
+    "@contentful/f36-icons-v4": "npm:@contentful/f36-icons@^4.0.0"
   },
@@ -18,0 +19,0 @@ "peerDependencies": {

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

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

31625

increased by20.16%

Lines of code

101

increased by13.48%

Worsened metrics

Dev dependency count

2

increased by100%

Number of low quality alerts

2

increased by100%

No dependency changes