@sats-group/ui-lib 85.6.0 → 86.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "85.6.0",
+  "version": "86.0.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/chip/chip.js

@@ -1,2 +1,2 @@
-var n=Object.defineProperty;var i=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;var l=(e,r,p)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:p}):e[r]=p,f=(e,r)=>{for(var p in r||(r={}))h.call(r,p)&&l(e,p,r[p]);if(i)for(var p of i(r))o.call(r,p)&&l(e,p,r[p]);return e};var d=(e,r)=>{var p={};for(var s in e)h.call(e,s)&&r.indexOf(s)<0&&(p[s]=e[s]);if(e!=null&&i)for(var s of i(e))r.indexOf(s)<0&&o.call(e,s)&&(p[s]=e[s]);return p};import*as t from"react";import F from"classnames";import N from"../icons/16/close";import m from"../text";const c=g=>{var a=g,{className:e,customIcon:r,elementName:p="button",icon:s=!0,isSelected:x=!1,text:C}=a,_=d(a,["className","customIcon","elementName","icon","isSelected","text"]);return t.createElement(p,f({className:F("chip",e,{"chip--selected":x})},_),t.createElement(t.Fragment,null,t.createElement("div",{className:"chip__wrapper"},s?r!=null?r:t.createElement(N,null):null,t.createElement(m,{className:"chip__text",size:m.sizes.small,theme:m.themes.emphasis},C))))};var E=c;export{E as default};
+var v=Object.defineProperty;var p=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var c=(i,e,s)=>e in i?v(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,n=(i,e)=>{for(var s in e||(e={}))h.call(e,s)&&c(i,s,e[s]);if(p)for(var s of p(e))_.call(e,s)&&c(i,s,e[s]);return i};var f=(i,e)=>{var s={};for(var m in i)h.call(i,m)&&e.indexOf(m)<0&&(s[m]=i[m]);if(i!=null&&p)for(var m of p(i))e.indexOf(m)<0&&_.call(i,m)&&(s[m]=i[m]);return s};import*as t from"react";import o from"classnames";import x from"../icons/16/close";import r from"../text";const C=N=>{var l=N,{className:i,customIcon:e,elementName:s="button",icon:m=!1,isSelected:a=!1,text:d}=l,u=f(l,["className","customIcon","elementName","icon","isSelected","text"]);return t.createElement(s,n({className:o("chip",i,{"chip--selected":a})},u),t.createElement(t.Fragment,null,t.createElement("div",{className:"chip__wrapper"},m?t.createElement(x,null):null,e?t.createElement("div",{className:o("chip__custom-icon chip__custom-icon--animated",{"chip__custom-icon--visible":a})},e):null,t.createElement(r,{className:o("chip__text",{"chip__text--with-icon":m||e&&a}),size:r.sizes.small,theme:r.themes.emphasis},d))))};var T=C;export{T as default};
 //# sourceMappingURL=chip.js.map

package/react/chip/chip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/chip/chip.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport cn from 'classnames';\n\nimport Close from '../icons/16/close';\nimport Text from '../text';\n\nimport { Chip as Props } from './chip.types';\n\nconst Chip: React.FC<Props> = ({\n  className,\n  customIcon,\n  elementName = 'button',\n  icon = true,\n  isSelected = false,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn('chip', className, { 'chip--selected': isSelected }),\n      ...rest,\n    },\n    <React.Fragment>\n      <div className=\"chip__wrapper\">\n        {icon ? (customIcon ?? <Close />) : null}\n        <Text\n          className=\"chip__text\"\n          size={Text.sizes.small}\n          theme={Text.themes.emphasis}\n        >\n          {text}\n        </Text>\n      </div>\n    </React.Fragment>,\n  );\n\nexport default Chip;\n"],
-  "mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAIjB,MAAMC,EAAyBC,GAQ5B,CAR4B,IAAAC,EAAAD,EAC7B,WAAAE,EACA,WAAAC,EACA,YAAAC,EAAc,SACd,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,CAdF,EAQ+BN,EAO1BO,EAAAC,EAP0BR,EAO1B,CANH,YACA,aACA,cACA,OACA,aACA,SAGA,OAAAN,EAAM,cACJS,EACAM,EAAA,CACE,UAAWd,EAAG,OAAQM,EAAW,CAAE,iBAAkBI,CAAW,CAAC,GAC9DE,GAELb,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZU,EAAQF,GAAA,KAAAA,EAAcR,EAAA,cAACE,EAAA,IAAM,EAAM,KACpCF,EAAA,cAACG,EAAA,CACC,UAAU,aACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBS,CACH,CACF,CACF,CACF,GAEF,IAAOI,EAAQZ",
+  "sourcesContent": ["import * as React from 'react';\nimport cn from 'classnames';\n\nimport Close from '../icons/16/close';\nimport Text from '../text';\n\nimport { Chip as Props } from './chip.types';\n\nconst Chip: React.FC<Props> = ({\n  className,\n  customIcon,\n  elementName = 'button',\n  icon = false,\n  isSelected = false,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn('chip', className, {\n        'chip--selected': isSelected,\n      }),\n      ...rest,\n    },\n    <React.Fragment>\n      <div className=\"chip__wrapper\">\n        {icon ? <Close /> : null}\n        {customIcon ? (\n          <div\n            className={cn('chip__custom-icon chip__custom-icon--animated', {\n              'chip__custom-icon--visible': isSelected,\n            })}\n          >\n            {customIcon}\n          </div>\n        ) : null}\n        <Text\n          className={cn('chip__text', {\n            'chip__text--with-icon': icon || (customIcon && isSelected),\n          })}\n          size={Text.sizes.small}\n          theme={Text.themes.emphasis}\n        >\n          {text}\n        </Text>\n      </div>\n    </React.Fragment>,\n  );\n\nexport default Chip;\n"],
+  "mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAIjB,MAAMC,EAAyBC,GAQ5B,CAR4B,IAAAC,EAAAD,EAC7B,WAAAE,EACA,WAAAC,EACA,YAAAC,EAAc,SACd,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,CAdF,EAQ+BN,EAO1BO,EAAAC,EAP0BR,EAO1B,CANH,YACA,aACA,cACA,OACA,aACA,SAGA,OAAAN,EAAM,cACJS,EACAM,EAAA,CACE,UAAWd,EAAG,OAAQM,EAAW,CAC/B,iBAAkBI,CACpB,CAAC,GACEE,GAELb,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZU,EAAOV,EAAA,cAACE,EAAA,IAAM,EAAK,KACnBM,EACCR,EAAA,cAAC,OACC,UAAWC,EAAG,gDAAiD,CAC7D,6BAA8BU,CAChC,CAAC,GAEAH,CACH,EACE,KACJR,EAAA,cAACG,EAAA,CACC,UAAWF,EAAG,aAAc,CAC1B,wBAAyBS,GAASF,GAAcG,CAClD,CAAC,EACD,KAAMR,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBS,CACH,CACF,CACF,CACF,GAEF,IAAOI,EAAQZ",
   "names": ["React", "cn", "Close", "Text", "Chip", "_a", "_b", "className", "customIcon", "elementName", "icon", "isSelected", "text", "rest", "__objRest", "__spreadValues", "chip_default"]
 }

package/react/chip/chip.scss

@@ -2,15 +2,15 @@
 @use '../../tokens/spacing';
 
 .chip {
+  background-color: var(--background-secondary-default);
+  border-radius: 40px; // NOTE: Custom border radius by design
+  border: 1px solid var(--ge-chips-unselected-default);
   box-sizing: border-box;
   cursor: pointer;
+  display: inline-block;
   outline: 0;
   padding: 0;
   text-decoration: none;
-  display: inline-block;
-  border-radius: 40px; // NOTE: Custom border radius by design
-  background-color: transparent;
-  border: 1px solid var(--ge-chips-unselected-default);
 
   @media (hover: hover) {
     &:not([disabled]):hover {
@@ -33,7 +33,7 @@
 
   &__wrapper {
     display: flex;
-    gap: spacing.$xs;
+    gap: 0; // NOTE: This is 0 because it can't be animated, wherase margin can, so margin is used on the text when an icon is present instead
     align-items: center;
     padding: spacing.$xs spacing.$m;
   }
@@ -43,4 +43,41 @@
     color: var(--on-ge-on-chips-selected-disabled);
     cursor: not-allowed;
   }
+
+  &__custom-icon {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    max-width: 0;
+    min-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    transform: scale(0.85);
+  }
+
+  &__custom-icon--visible {
+    max-width: 999px; // NOTE: This is just so that the component can grow as much as it needs when the icon is shown
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &__custom-icon--animated {
+    transition:
+      max-width 220ms ease,
+      opacity 160ms ease,
+      transform 200ms ease;
+  }
+
+  &__text {
+    margin-left: 0;
+
+    &--with-icon {
+      margin-left: spacing.$xs;
+    }
+  }
+
+  &__custom-icon--animated ~ .chip__text {
+    transition: margin-left 220ms ease;
+  }
 }

package/react/chip/chip.types.d.ts

@@ -1,20 +1,26 @@
 import { ReactElement } from 'react';
 import { ButtonHtmlProps, LinkHtmlProps } from '../types';
 type BasicChipProps = {
-    className?: string;
-    customIcon?: ReactElement;
     elementName: string;
-    icon?: boolean;
     isSelected?: boolean;
     text: string;
 };
-export type ChipButton = BasicChipProps & ButtonHtmlProps;
-export type ChipLink = BasicChipProps & LinkHtmlProps;
-export type Chip = ({
+type ChipWithCustomicon = {
+    customIcon: ReactElement;
+    icon?: never;
+};
+type ChipWithDefaultIcon = {
+    customIcon?: never;
+    icon?: boolean;
+};
+type ChipWithIcon = ChipWithCustomicon | ChipWithDefaultIcon;
+export type ChipButton = ButtonHtmlProps;
+export type ChipLink = LinkHtmlProps;
+export type Chip = ChipWithIcon & BasicChipProps & (({
     elementName: 'button';
 } & ChipButton) | ({
     elementName: 'a';
 } & ChipLink) | ({
     elementName: string;
-} & (ChipLink | ChipButton));
+} & (ChipLink | ChipButton)));
 export {};