@contentful/f36-icon
Advanced tools
Comparing version 4.58.0 to 5.0.0-alpha.0
@@ -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 |
@@ -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 }; |
'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 |
{ | ||
"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": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
31625
101
2
2