@contentful/f36-pill - npm Package Compare versions

Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438

dist/main.js

@@ -1,2 +0,134 @@
-var e=s(require("@babel/runtime/helpers/extends")),{cx:t,css:a}=require("emotion"),r=s(require("react")),{CloseIcon:n,DragIcon:o}=require("@contentful/f36-icons"),{Button:i}=require("@contentful/f36-button"),l=s(require("@contentful/f36-tokens"));function s(e){return e&&e.__esModule?e.default:e}var c,d,u,g,f={};c=f,d="Pill",u=()=>m,Object.defineProperty(c,d,{get:u,set:g,enumerable:!0,configurable:!0});const b=e=>a({display:"inline-flex",fontFamily:l.fontStackPrimary,alignItems:"center",borderRadius:l.borderRadiusSmall,border:"none",padding:0,maxWidth:"100%",...(e=>{switch(e){case"active":return{background:l.gray300};case"deleted":return{background:l.gray200,textDecoration:"line-through",opacity:"0.5"};default:return{background:l.gray200}}})(e)},"");const m=r.forwardRef(((s,c)=>{const{label:d,onClose:u,testId:g="cf-ui-pill",onDrag:f,className:m,dragHandleComponent:p,variant:y="idle",...h}=s,v=function(e){return{closeButton:a({borderLeft:`1px solid ${l.gray400}`,borderTopLeftRadius:0,borderBottomLeftRadius:0,padding:l.spacingXs,minHeight:"auto",transition:`background ${l.transitionDurationShort} ${l.transitionEasingDefault},\n    opacity ${l.transitionDurationDefault} ${l.transitionEasingDefault}`,"&:focus":{boxShadow:l.glowMuted,borderLeftColor:l.gray300},"&:hover, &:focus, &:active":{backgroundColor:l.gray300}},""),label:a({color:l.gray700,lineHeight:l.lineHeightM,padding:l.spacingXs,fontSize:l.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},""),icon:a({fill:l.gray600,verticalAlign:"middle",outline:"none"},""),dragIcon:a({padding:l.spacingXs,paddingRight:0,cursor:"move"},""),pill:b(e)}}(y);return r.createElement("div",e({className:t(v.pill,m),"data-test-id":g,onDrag:f,ref:c},h),f&&(p||r.createElement("span",{"aria-label":"Drag handler",className:v.dragIcon},r.createElement(o,{className:v.icon,variant:"muted"}))),r.createElement("span",{title:d,className:v.label},d),u&&r.createElement(i,{type:"button",variant:"transparent",startIcon:r.createElement(n,{"aria-label":"Close"}),"aria-label":"Close",onClick:u,className:v.closeButton}))}));var p,y;m.displayName="Pill",p=module.exports,y=f,Object.keys(y).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(p,e,{enumerable:!0,get:function(){return y[e]}})}));
+var $kKXtg$emotion = require("emotion");
+var $kKXtg$react = require("react");
+var $kKXtg$contentfulf36icons = require("@contentful/f36-icons");
+var $kKXtg$contentfulf36button = require("@contentful/f36-button");
+var $kKXtg$contentfulf36tokens = require("@contentful/f36-tokens");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "Pill", () => $bc3f6edf150dce19$export$d2cf3038149dd1b5);
+
+
+
+
+
+
+const $e04f4acba5620856$var$getCloseButtonStyle = ()=>{
+    return(/*#__PURE__*/ $kKXtg$emotion.css({
+        borderLeft: `1px solid ${$parcel$interopDefault($kKXtg$contentfulf36tokens).gray400}`,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        padding: $parcel$interopDefault($kKXtg$contentfulf36tokens).spacingXs,
+        minHeight: 'auto',
+        transition: `background ${$parcel$interopDefault($kKXtg$contentfulf36tokens).transitionDurationShort} ${$parcel$interopDefault($kKXtg$contentfulf36tokens).transitionEasingDefault},
+    opacity ${$parcel$interopDefault($kKXtg$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($kKXtg$contentfulf36tokens).transitionEasingDefault}`,
+        '&:focus': {
+            boxShadow: $parcel$interopDefault($kKXtg$contentfulf36tokens).glowMuted,
+            borderLeftColor: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray300
+        },
+        '&:hover, &:focus, &:active': {
+            backgroundColor: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray300
+        }
+    }));
+};
+const $e04f4acba5620856$var$getLabelStyle = ()=>{
+    return(/*#__PURE__*/ $kKXtg$emotion.css({
+        color: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray700,
+        lineHeight: $parcel$interopDefault($kKXtg$contentfulf36tokens).lineHeightM,
+        padding: $parcel$interopDefault($kKXtg$contentfulf36tokens).spacingXs,
+        fontSize: $parcel$interopDefault($kKXtg$contentfulf36tokens).fontSizeM,
+        flexGrow: 2,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+    }));
+};
+const $e04f4acba5620856$var$getPillStyle = (variant)=>{
+    const variantStyle = (variant)=>{
+        switch(variant){
+            case 'active':
+                return {
+                    background: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray300
+                };
+            case 'deleted':
+                return {
+                    background: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray200,
+                    textDecoration: 'line-through',
+                    opacity: '0.5'
+                };
+            default:
+                return {
+                    background: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray200
+                };
+        }
+    };
+    return(/*#__PURE__*/ $kKXtg$emotion.css({
+        display: 'inline-flex',
+        fontFamily: $parcel$interopDefault($kKXtg$contentfulf36tokens).fontStackPrimary,
+        alignItems: 'center',
+        borderRadius: $parcel$interopDefault($kKXtg$contentfulf36tokens).borderRadiusSmall,
+        border: 'none',
+        padding: 0,
+        maxWidth: '100%',
+        ...variantStyle(variant)
+    }));
+};
+function $e04f4acba5620856$export$f8a32d770d8a45c9(variant) {
+    return {
+        closeButton: $e04f4acba5620856$var$getCloseButtonStyle(),
+        label: $e04f4acba5620856$var$getLabelStyle(),
+        icon: /*#__PURE__*/ $kKXtg$emotion.css({
+            fill: $parcel$interopDefault($kKXtg$contentfulf36tokens).gray600,
+            verticalAlign: 'middle',
+            outline: 'none'
+        }),
+        dragIcon: /*#__PURE__*/ $kKXtg$emotion.css({
+            padding: $parcel$interopDefault($kKXtg$contentfulf36tokens).spacingXs,
+            paddingRight: 0,
+            cursor: 'move'
+        }),
+        pill: $e04f4acba5620856$var$getPillStyle(variant)
+    };
+}
+
+
+const $bc3f6edf150dce19$export$d2cf3038149dd1b5 = /*#__PURE__*/ $parcel$interopDefault($kKXtg$react).forwardRef((props, ref)=>{
+    const { label: label , onClose: onClose , testId: testId = 'cf-ui-pill' , onDrag: onDrag , className: className , dragHandleComponent: dragHandleComponent , variant: variant = 'idle' , ...otherProps } = props;
+    const styles = $e04f4acba5620856$export$f8a32d770d8a45c9(variant);
+    return(/*#__PURE__*/ $parcel$interopDefault($kKXtg$react).createElement("div", {
+        className: $kKXtg$emotion.cx(styles.pill, className),
+        "data-test-id": testId,
+        onDrag: onDrag,
+        ref: ref,
+        ...otherProps
+    }, onDrag && (dragHandleComponent ? dragHandleComponent : /*#__PURE__*/ $parcel$interopDefault($kKXtg$react).createElement("span", {
+        "aria-label": "Drag handler",
+        className: styles.dragIcon
+    }, /*#__PURE__*/ $parcel$interopDefault($kKXtg$react).createElement($kKXtg$contentfulf36icons.DragIcon, {
+        className: styles.icon,
+        variant: "muted"
+    }))), /*#__PURE__*/ $parcel$interopDefault($kKXtg$react).createElement("span", {
+        title: label,
+        className: styles.label
+    }, label), onClose && /*#__PURE__*/ $parcel$interopDefault($kKXtg$react).createElement($kKXtg$contentfulf36button.Button, {
+        type: "button",
+        variant: "transparent",
+        startIcon: /*#__PURE__*/ $parcel$interopDefault($kKXtg$react).createElement($kKXtg$contentfulf36icons.CloseIcon, {
+            "aria-label": "Close"
+        }),
+        "aria-label": "Close",
+        onClick: onClose,
+        className: styles.closeButton
+    })));
+});
+$bc3f6edf150dce19$export$d2cf3038149dd1b5.displayName = 'Pill';
+
+
+
+
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,127 @@
-import e from"@babel/runtime/helpers/esm/extends";import{cx as a,css as t}from"emotion";import r from"react";import{DragIcon as o,CloseIcon as n}from"@contentful/f36-icons";import{Button as i}from"@contentful/f36-button";import l from"@contentful/f36-tokens";var s,c,d,u;s={},c="Pill",d=()=>m,Object.defineProperty(s,c,{get:d,set:u,enumerable:!0,configurable:!0});const g=e=>t({display:"inline-flex",fontFamily:l.fontStackPrimary,alignItems:"center",borderRadius:l.borderRadiusSmall,border:"none",padding:0,maxWidth:"100%",...(e=>{switch(e){case"active":return{background:l.gray300};case"deleted":return{background:l.gray200,textDecoration:"line-through",opacity:"0.5"};default:return{background:l.gray200}}})(e)},"");const m=r.forwardRef(((s,c)=>{const{label:d,onClose:u,testId:m="cf-ui-pill",onDrag:f,className:p,dragHandleComponent:b,variant:y="idle",...h}=s,v=function(e){return{closeButton:t({borderLeft:`1px solid ${l.gray400}`,borderTopLeftRadius:0,borderBottomLeftRadius:0,padding:l.spacingXs,minHeight:"auto",transition:`background ${l.transitionDurationShort} ${l.transitionEasingDefault},\n    opacity ${l.transitionDurationDefault} ${l.transitionEasingDefault}`,"&:focus":{boxShadow:l.glowMuted,borderLeftColor:l.gray300},"&:hover, &:focus, &:active":{backgroundColor:l.gray300}},""),label:t({color:l.gray700,lineHeight:l.lineHeightM,padding:l.spacingXs,fontSize:l.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},""),icon:t({fill:l.gray600,verticalAlign:"middle",outline:"none"},""),dragIcon:t({padding:l.spacingXs,paddingRight:0,cursor:"move"},""),pill:g(e)}}(y);return r.createElement("div",e({className:a(v.pill,p),"data-test-id":m,onDrag:f,ref:c},h),f&&(b||r.createElement("span",{"aria-label":"Drag handler",className:v.dragIcon},r.createElement(o,{className:v.icon,variant:"muted"}))),r.createElement("span",{title:d,className:v.label},d),u&&r.createElement(i,{type:"button",variant:"transparent",startIcon:r.createElement(n,{"aria-label":"Close"}),"aria-label":"Close",onClick:u,className:v.closeButton}))}));m.displayName="Pill";export{m as Pill};
+import {cx as $eBAed$cx, css as $eBAed$css} from "emotion";
+import $eBAed$react from "react";
+import {DragIcon as $eBAed$DragIcon, CloseIcon as $eBAed$CloseIcon} from "@contentful/f36-icons";
+import {Button as $eBAed$Button} from "@contentful/f36-button";
+import $eBAed$contentfulf36tokens from "@contentful/f36-tokens";
+
+
+
+
+
+
+
+const $eb7861ccbf6e1309$var$getCloseButtonStyle = ()=>{
+    return(/*#__PURE__*/ $eBAed$css({
+        borderLeft: `1px solid ${$eBAed$contentfulf36tokens.gray400}`,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        padding: $eBAed$contentfulf36tokens.spacingXs,
+        minHeight: 'auto',
+        transition: `background ${$eBAed$contentfulf36tokens.transitionDurationShort} ${$eBAed$contentfulf36tokens.transitionEasingDefault},
+    opacity ${$eBAed$contentfulf36tokens.transitionDurationDefault} ${$eBAed$contentfulf36tokens.transitionEasingDefault}`,
+        '&:focus': {
+            boxShadow: $eBAed$contentfulf36tokens.glowMuted,
+            borderLeftColor: $eBAed$contentfulf36tokens.gray300
+        },
+        '&:hover, &:focus, &:active': {
+            backgroundColor: $eBAed$contentfulf36tokens.gray300
+        }
+    }));
+};
+const $eb7861ccbf6e1309$var$getLabelStyle = ()=>{
+    return(/*#__PURE__*/ $eBAed$css({
+        color: $eBAed$contentfulf36tokens.gray700,
+        lineHeight: $eBAed$contentfulf36tokens.lineHeightM,
+        padding: $eBAed$contentfulf36tokens.spacingXs,
+        fontSize: $eBAed$contentfulf36tokens.fontSizeM,
+        flexGrow: 2,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+    }));
+};
+const $eb7861ccbf6e1309$var$getPillStyle = (variant)=>{
+    const variantStyle = (variant)=>{
+        switch(variant){
+            case 'active':
+                return {
+                    background: $eBAed$contentfulf36tokens.gray300
+                };
+            case 'deleted':
+                return {
+                    background: $eBAed$contentfulf36tokens.gray200,
+                    textDecoration: 'line-through',
+                    opacity: '0.5'
+                };
+            default:
+                return {
+                    background: $eBAed$contentfulf36tokens.gray200
+                };
+        }
+    };
+    return(/*#__PURE__*/ $eBAed$css({
+        display: 'inline-flex',
+        fontFamily: $eBAed$contentfulf36tokens.fontStackPrimary,
+        alignItems: 'center',
+        borderRadius: $eBAed$contentfulf36tokens.borderRadiusSmall,
+        border: 'none',
+        padding: 0,
+        maxWidth: '100%',
+        ...variantStyle(variant)
+    }));
+};
+function $eb7861ccbf6e1309$export$f8a32d770d8a45c9(variant) {
+    return {
+        closeButton: $eb7861ccbf6e1309$var$getCloseButtonStyle(),
+        label: $eb7861ccbf6e1309$var$getLabelStyle(),
+        icon: /*#__PURE__*/ $eBAed$css({
+            fill: $eBAed$contentfulf36tokens.gray600,
+            verticalAlign: 'middle',
+            outline: 'none'
+        }),
+        dragIcon: /*#__PURE__*/ $eBAed$css({
+            padding: $eBAed$contentfulf36tokens.spacingXs,
+            paddingRight: 0,
+            cursor: 'move'
+        }),
+        pill: $eb7861ccbf6e1309$var$getPillStyle(variant)
+    };
+}
+
+
+const $cea80b934e2f5738$export$d2cf3038149dd1b5 = /*#__PURE__*/ $eBAed$react.forwardRef((props, ref)=>{
+    const { label: label , onClose: onClose , testId: testId = 'cf-ui-pill' , onDrag: onDrag , className: className , dragHandleComponent: dragHandleComponent , variant: variant = 'idle' , ...otherProps } = props;
+    const styles = $eb7861ccbf6e1309$export$f8a32d770d8a45c9(variant);
+    return(/*#__PURE__*/ $eBAed$react.createElement("div", {
+        className: $eBAed$cx(styles.pill, className),
+        "data-test-id": testId,
+        onDrag: onDrag,
+        ref: ref,
+        ...otherProps
+    }, onDrag && (dragHandleComponent ? dragHandleComponent : /*#__PURE__*/ $eBAed$react.createElement("span", {
+        "aria-label": "Drag handler",
+        className: styles.dragIcon
+    }, /*#__PURE__*/ $eBAed$react.createElement($eBAed$DragIcon, {
+        className: styles.icon,
+        variant: "muted"
+    }))), /*#__PURE__*/ $eBAed$react.createElement("span", {
+        title: label,
+        className: styles.label
+    }, label), onClose && /*#__PURE__*/ $eBAed$react.createElement($eBAed$Button, {
+        type: "button",
+        variant: "transparent",
+        startIcon: /*#__PURE__*/ $eBAed$react.createElement($eBAed$CloseIcon, {
+            "aria-label": "Close"
+        }),
+        "aria-label": "Close",
+        onClick: onClose,
+        className: styles.closeButton
+    })));
+});
+$cea80b934e2f5738$export$d2cf3038149dd1b5.displayName = 'Pill';
+
+
+
+
+export {$cea80b934e2f5738$export$d2cf3038149dd1b5 as Pill};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-pill",
-  "version": "4.0.1-next-v4-9789.2434+754dee05",
+  "version": "4.0.1-next-v4-9898.2438+c14d4c99",
   "description": "Forma 36: Pill component",
   "scripts": {
-    "build": "parcel build index.ts"
+    "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "4.0.1-next-v4-9789.2434+754dee05",
-    "@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05",
-    "@contentful/f36-icons": "4.0.1-next-v4-9789.2434+754dee05",
-    "@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05",
+    "@contentful/f36-button": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-icons": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99",
     "emotion": "^10.0.17"
@@ -37,3 +37,3 @@ },
   },
-  "gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d"
+  "gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008"
 }

README.md

 # @contentful/f36-pill
 
 This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning.
-Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components)
+
+Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components).

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

447

increased by91.85%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

6

increased by20%

Worsened metrics

Total package byte prevSize

37946

decreased by-39.59%

Dependency changes

• Updated@contentful/f36-button@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-core@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-icons@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-tokens@4.0.1-next-v4-9898.2438+c14d4c99