@sats-group/ui-lib 89.1.0 → 89.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/react/chip/chip.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Chip as Props } from './chip.types';
|
|
3
|
-
declare const
|
|
2
|
+
import { Chip as Props, variants } from './chip.types';
|
|
3
|
+
declare const ChipRef: React.FC<Props>;
|
|
4
|
+
declare const Chip: typeof ChipRef & {
|
|
5
|
+
variants: typeof variants;
|
|
6
|
+
};
|
|
4
7
|
export default Chip;
|
package/react/chip/chip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var x=Object.defineProperty;var p=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var l=(i,s,t)=>s in i?x(i,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[s]=t,_=(i,s)=>{for(var t in s||(s={}))n.call(s,t)&&l(i,t,s[t]);if(p)for(var t of p(s))f.call(s,t)&&l(i,t,s[t]);return i};var v=(i,s)=>{var t={};for(var e in i)n.call(i,e)&&s.indexOf(e)<0&&(t[e]=i[e]);if(i!=null&&p)for(var e of p(i))s.indexOf(e)<0&&f.call(i,e)&&(t[e]=i[e]);return t};import*as a from"react";import o from"classnames";import g from"../icons/16/close";import r from"../text";import{variants as C}from"./chip.types";const N=F=>{var c=F,{className:i,customIcon:s,elementName:t="button",icon:e=!1,isSelected:m=!1,text:d,variant:h=C.light}=c,u=v(c,["className","customIcon","elementName","icon","isSelected","text","variant"]);return a.createElement(t,_({className:o("chip",i,{"chip--selected":m,[`chip--variant-${h}`]:h})},u),a.createElement(a.Fragment,null,a.createElement("div",{className:"chip__wrapper"},e?a.createElement(g,null):null,s?a.createElement("div",{className:o("chip__custom-icon chip__custom-icon--animated",{"chip__custom-icon--visible":m})},s):null,a.createElement(r,{className:o("chip__text",{"chip__text--with-icon":e||s&&m}),size:r.sizes.small,theme:r.themes.emphasis},d))))},b=Object.assign(N,{variants:C});var E=b;export{E as default};
|
|
2
2
|
//# sourceMappingURL=chip.js.map
|
package/react/chip/chip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../library/react/chip/chip.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,
|
|
6
|
-
"names": ["React", "cn", "Close", "Text", "
|
|
4
|
+
"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, variants } from './chip.types';\n\nconst ChipRef: React.FC<Props> = ({\n className,\n customIcon,\n elementName = 'button',\n icon = false,\n isSelected = false,\n text,\n variant = variants.light,\n ...rest\n}) =>\n React.createElement(\n elementName,\n {\n className: cn('chip', className, {\n 'chip--selected': isSelected,\n [`chip--variant-${variant}`]: variant,\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\nconst Chip: typeof ChipRef & {\n variants: typeof variants;\n} = Object.assign(ChipRef, {\n variants,\n});\n\nexport default Chip;\n"],
|
|
5
|
+
"mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAwB,YAAAC,MAAgB,eAExC,MAAMC,EAA4BC,GAS/B,CAT+B,IAAAC,EAAAD,EAChC,WAAAE,EACA,WAAAC,EACA,YAAAC,EAAc,SACd,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,EACA,QAAAC,EAAUV,EAAS,KAfrB,EAQkCG,EAQ7BQ,EAAAC,EAR6BT,EAQ7B,CAPH,YACA,aACA,cACA,OACA,aACA,OACA,YAGA,OAAAP,EAAM,cACJU,EACAO,EAAA,CACE,UAAWhB,EAAG,OAAQO,EAAW,CAC/B,iBAAkBI,EAClB,CAAC,iBAAiBE,CAAO,EAAE,EAAGA,CAChC,CAAC,GACEC,GAELf,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZW,EAAOX,EAAA,cAACE,EAAA,IAAM,EAAK,KACnBO,EACCT,EAAA,cAAC,OACC,UAAWC,EAAG,gDAAiD,CAC7D,6BAA8BW,CAChC,CAAC,GAEAH,CACH,EACE,KACJT,EAAA,cAACG,EAAA,CACC,UAAWF,EAAG,aAAc,CAC1B,wBAAyBU,GAASF,GAAcG,CAClD,CAAC,EACD,KAAMT,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBU,CACH,CACF,CACF,CACF,GAEIK,EAEF,OAAO,OAAOb,EAAS,CACzB,SAAAD,CACF,CAAC,EAED,IAAOe,EAAQD",
|
|
6
|
+
"names": ["React", "cn", "Close", "Text", "variants", "ChipRef", "_a", "_b", "className", "customIcon", "elementName", "icon", "isSelected", "text", "variant", "rest", "__objRest", "__spreadValues", "Chip", "chip_default"]
|
|
7
7
|
}
|
package/react/chip/chip.scss
CHANGED
|
@@ -2,9 +2,8 @@
|
|
|
2
2
|
@use '../../tokens/spacing';
|
|
3
3
|
|
|
4
4
|
.chip {
|
|
5
|
-
background-color: var(--background-secondary-default);
|
|
6
5
|
border-radius: 40px; // NOTE: Custom border radius by design
|
|
7
|
-
border: 1px solid
|
|
6
|
+
border: 1px solid;
|
|
8
7
|
box-sizing: border-box;
|
|
9
8
|
cursor: pointer;
|
|
10
9
|
display: inline-block;
|
|
@@ -12,23 +11,6 @@
|
|
|
12
11
|
padding: 0;
|
|
13
12
|
text-decoration: none;
|
|
14
13
|
|
|
15
|
-
@media (hover: hover) {
|
|
16
|
-
&:not([disabled]):hover {
|
|
17
|
-
background-color: var(--ge-chips-unselected-hover);
|
|
18
|
-
color: var(--on-ge-on-chips-unselected-default);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&--selected {
|
|
23
|
-
border-color: var(--ge-chips-selected-default);
|
|
24
|
-
|
|
25
|
-
@media (hover: hover) {
|
|
26
|
-
&:not([disabled]):hover {
|
|
27
|
-
background-color: var(--ge-chips-selected-hover);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
14
|
&__wrapper {
|
|
33
15
|
display: flex;
|
|
34
16
|
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
|
|
@@ -36,12 +18,6 @@
|
|
|
36
18
|
padding: spacing.$xs spacing.$m;
|
|
37
19
|
}
|
|
38
20
|
|
|
39
|
-
&[disabled] {
|
|
40
|
-
background-color: var(--ge-chips-selected-disabled);
|
|
41
|
-
color: var(--on-ge-on-chips-selected-disabled);
|
|
42
|
-
cursor: not-allowed;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
21
|
&__custom-icon {
|
|
46
22
|
align-items: center;
|
|
47
23
|
display: inline-flex;
|
|
@@ -88,4 +64,69 @@
|
|
|
88
64
|
transition: margin-left 220ms ease;
|
|
89
65
|
}
|
|
90
66
|
}
|
|
67
|
+
|
|
68
|
+
&--variant-light {
|
|
69
|
+
background-color: var(--background-secondary-default);
|
|
70
|
+
border-color: var(--ge-chips-unselected-default);
|
|
71
|
+
|
|
72
|
+
@media (hover: hover) {
|
|
73
|
+
&:not([disabled]):hover {
|
|
74
|
+
background-color: var(--ge-chips-unselected-hover);
|
|
75
|
+
color: var(--on-ge-on-chips-unselected-default);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&.chip--selected {
|
|
80
|
+
border-color: var(--ge-chips-selected-default);
|
|
81
|
+
|
|
82
|
+
@media (hover: hover) {
|
|
83
|
+
&:not([disabled]):hover {
|
|
84
|
+
background-color: var(--ge-chips-selected-hover);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&[disabled] {
|
|
90
|
+
background-color: var(--ge-chips-selected-disabled);
|
|
91
|
+
color: var(--on-ge-on-chips-selected-disabled);
|
|
92
|
+
cursor: not-allowed;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&--variant-fixed {
|
|
97
|
+
border-color: var(--ge-fixed-chips-unselected-default);
|
|
98
|
+
color: var(--on-ge-on-fixed-chips-unselected-default);
|
|
99
|
+
background-color: var(--fixed-background-secondary-default);
|
|
100
|
+
|
|
101
|
+
@media (hover: hover) {
|
|
102
|
+
&:not([disabled]):hover {
|
|
103
|
+
background-color: var(--ge-fixed-chips-unselected-hover);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&.chip--selected {
|
|
108
|
+
background-color: var(--ge-fixed-chips-selected-default);
|
|
109
|
+
border-color: var(--on-ge-on-fixed-chips-selected-default);
|
|
110
|
+
color: var(--on-ge-on-fixed-chips-selected-default);
|
|
111
|
+
|
|
112
|
+
@media (hover: hover) {
|
|
113
|
+
&:not([disabled]):hover {
|
|
114
|
+
background-color: var(--ge-fixed-chips-selected-hover);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&[disabled] {
|
|
120
|
+
border-color: var(--ge-fixed-chips-unselected-disabled);
|
|
121
|
+
color: var(--on-ge-on-fixed-chips-unselected-disabled);
|
|
122
|
+
cursor: not-allowed;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&.chip--selected[disabled] {
|
|
126
|
+
background-color: var(--ge-fixed-chips-selected-disabled);
|
|
127
|
+
border-color: transparent;
|
|
128
|
+
color: var(--on-ge-on-fixed-chips-selected-disabled);
|
|
129
|
+
cursor: not-allowed;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
91
132
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { ButtonHtmlProps, LinkHtmlProps } from '../types';
|
|
2
|
+
import { ButtonHtmlProps, LinkHtmlProps, ObjectValues } from '../types';
|
|
3
3
|
type BasicChipProps = {
|
|
4
4
|
elementName: string;
|
|
5
5
|
isSelected?: boolean;
|
|
6
6
|
text: string;
|
|
7
|
+
variant?: ObjectValues<typeof variants>;
|
|
7
8
|
};
|
|
8
9
|
type ChipWithCustomicon = {
|
|
9
10
|
customIcon: ReactElement;
|
|
@@ -13,6 +14,10 @@ type ChipWithDefaultIcon = {
|
|
|
13
14
|
customIcon?: never;
|
|
14
15
|
icon?: boolean;
|
|
15
16
|
};
|
|
17
|
+
export declare const variants: {
|
|
18
|
+
readonly light: "light";
|
|
19
|
+
readonly fixed: "fixed";
|
|
20
|
+
};
|
|
16
21
|
type ChipWithIcon = ChipWithCustomicon | ChipWithDefaultIcon;
|
|
17
22
|
export type ChipButton = ButtonHtmlProps;
|
|
18
23
|
export type ChipLink = LinkHtmlProps;
|
package/react/chip/chip.types.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [],
|
|
4
|
-
"sourcesContent": [],
|
|
5
|
-
"mappings": "",
|
|
6
|
-
"names": []
|
|
3
|
+
"sources": ["../../../library/react/chip/chip.types.ts"],
|
|
4
|
+
"sourcesContent": ["import { ReactElement } from 'react';\nimport { ButtonHtmlProps, LinkHtmlProps, ObjectValues } from '../types';\n\ntype BasicChipProps = {\n elementName: string;\n isSelected?: boolean;\n text: string;\n variant?: ObjectValues<typeof variants>;\n};\n\ntype ChipWithCustomicon = {\n customIcon: ReactElement;\n icon?: never;\n};\n\ntype ChipWithDefaultIcon = {\n customIcon?: never;\n icon?: boolean;\n};\n\nexport const variants = {\n light: 'light',\n fixed: 'fixed',\n} as const;\n\ntype ChipWithIcon = ChipWithCustomicon | ChipWithDefaultIcon;\n\nexport type ChipButton = ButtonHtmlProps;\n\nexport type ChipLink = LinkHtmlProps;\n\nexport type Chip = ChipWithIcon &\n BasicChipProps &\n (\n | ({ elementName: 'button' } & ChipButton)\n | ({ elementName: 'a' } & ChipLink)\n | ({ elementName: string } & (ChipLink | ChipButton))\n );\n"],
|
|
5
|
+
"mappings": "AAoBO,MAAMA,EAAW,CACtB,MAAO,QACP,MAAO,OACT",
|
|
6
|
+
"names": ["variants"]
|
|
7
7
|
}
|