@economic/taco 1.22.9 → 1.23.0

package/dist/types.d.ts

@@ -1,6 +1,8 @@
+import { AVAILABLE_COLORS } from './utils/taillwind';
 export declare type Appearance = 'default' | 'primary' | 'danger' | 'ghost' | 'discrete';
 export declare type State = 'default' | 'success' | 'error' | 'warning' | 'information';
 export declare type Locale = 'en-GB' | 'da-DK' | 'sv-SE' | 'no-NO';
 export declare type Orientation = 'horizontal' | 'vertical';
 export declare type Align = 'start' | 'center' | 'end';
 export declare type Placement = 'right' | 'left' | 'top' | 'bottom';
+export declare type Color = (typeof AVAILABLE_COLORS)[number];

package/dist/utils/taillwind.d.ts

@@ -1,4 +1,6 @@
-import { State, Appearance } from '../types';
-export declare const getAppearanceClasses: (value: Appearance | undefined) => string;
-export declare const getStateClasses: (value: State | undefined) => string;
-export declare const getOutlineClasses: (state: Appearance | State | undefined) => string;
+import { Color, State } from '../types';
+export declare const AVAILABLE_COLORS: readonly ["green", "yellow", "red", "blue", "purple", "brown", "pink", "orange", "grey", "transparent"];
+export declare const getColorByState: (state: State | undefined) => Color;
+export declare const getOutlineColorShadeClasses: (state: Color | undefined) => string;
+export declare const getSubtleColorShadeClasses: (value: Color | undefined) => string;
+export declare const getColorShadeClasses: (value: Color | undefined) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "1.22.9",
+    "version": "1.23.0",
     "description": "> TODO: description",
     "author": "Matt Daly <matthew.daly@visma.com>",
     "homepage": "https://github.com/e-conomic/taco#readme",
@@ -131,5 +131,5 @@
             "not ie < 11"
         ]
     },
-    "gitHead": "4e70ee12a5d7ab19e262bf1497b6572e1ce8a37c"
+    "gitHead": "a40cbd60fdf92d7944e07af8d2b8da38455059f7"
 }

package/tailwind.config.js

@@ -153,7 +153,7 @@ module.exports = {
                 },
                 '.wcag-pink-300': {
                     background: theme('colors.pink.300'),
-                    color: theme('colors.black'),
+                    color: theme('colors.pink.900'),
                 },
                 '.wcag-pink-500': {
                     background: theme('colors.pink.500'),
@@ -161,13 +161,12 @@ module.exports = {
                 },
                 '.wcag-pink-700': {
                     background: theme('colors.pink.700'),
-                    color: '#000000',
+                    color: theme('colors.white'),
                 },
                 '.wcag-pink-900': {
                     background: theme('colors.pink.900'),
                     color: theme('colors.white'),
                 },
-
                 '.wcag-purple-100': {
                     background: theme('colors.purple.100'),
                     color: theme('colors.purple.900'),
@@ -182,7 +181,7 @@ module.exports = {
                 },
                 '.wcag-purple-500': {
                     background: theme('colors.purple.500'),
-                    color: theme('colors.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-purple-700': {
                     background: theme('colors.purple.700'),
@@ -390,7 +389,6 @@ module.exports = {
                     background: theme('colors.yellow.900'),
                     color: theme('colors.white'),
                 },
-
                 '.wcag-brown-100': {
                     background: theme('colors.brown.100'),
                     color: theme('colors.brown.900'),
@@ -405,7 +403,7 @@ module.exports = {
                 },
                 '.wcag-brown-500': {
                     background: theme('colors.brown.500'),
-                    color: theme('colors.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-brown-700': {
                     background: theme('colors.brown.700'),
@@ -499,8 +497,8 @@ module.exports = {
                 },
                 '.yt-yellow-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.yellow.500')}`,
-                    color: theme('colors.yellow.500'),
+                    border: `1px solid ${theme('colors.yellow.700')}`,
+                    color: theme('colors.yellow.700'),
                 },
                 '.yt-red-solid': {
                     background: theme('colors.red.500'),
@@ -512,13 +510,13 @@ module.exports = {
                     color: theme('colors.red.500'),
                 },
                 '.yt-green-solid': {
-                    background: theme('colors.green.500'),
+                    background: theme('colors.green.700'),
                     color: theme('colors.white'),
                 },
                 '.yt-green-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.green.500')}`,
-                    color: theme('colors.green.500'),
+                    border: `1px solid ${theme('colors.green.700')}`,
+                    color: theme('colors.green.700'),
                 },
                 '.yt-grey-solid': {
                     background: theme('colors.grey.200'),

package/types.json

@@ -25,6 +25,32 @@
         ],
         "AccordionTriggerProps": "HTMLAttributes<HTMLElement>"
     },
+    "Alert": {
+        "AlertProps": {
+            "intersections": [
+                "Omit<HTMLAttributes<HTMLDivElement>, 'children'>"
+            ],
+            "props": [
+                {
+                    "name": "children",
+                    "optional": false,
+                    "type": "React.ReactNode"
+                },
+                {
+                    "name": "onClose",
+                    "optional": true,
+                    "type": {
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "name": "state",
+                    "optional": true,
+                    "type": "State"
+                }
+            ]
+        }
+    },
     "AlertDialog": {
         "AlertDialogProps": {
             "props": [
@@ -306,6 +332,16 @@
                         "returnValue": "void"
                     }
                 },
+                {
+                    "name": "setShouldPauseHoverState",
+                    "optional": false,
+                    "type": {
+                        "arguments": {
+                            "pause": "boolean"
+                        },
+                        "returnValue": "void"
+                    }
+                },
                 {
                     "name": "setValidationError",
                     "optional": false,
@@ -329,6 +365,11 @@
                         "returnValue": "void"
                     }
                 },
+                {
+                    "name": "shouldPauseHoverState",
+                    "optional": false,
+                    "type": "boolean"
+                },
                 {
                     "name": "tags",
                     "optional": true,
@@ -472,7 +513,7 @@
         "BackdropProps": "HTMLAttributes<HTMLDivElement>"
     },
     "Badge": {
-        "BadgeProps": {
+        "BadgeBaseProps": {
             "intersections": [
                 "HTMLAttributes<HTMLSpanElement>"
             ],
@@ -484,22 +525,49 @@
                     "type": "React.ReactNode"
                 },
                 {
-                    "description": "Show compact version",
-                    "name": "compact",
+                    "description": "Background color",
+                    "name": "color",
                     "optional": true,
-                    "type": "boolean"
+                    "type": "Color"
                 },
                 {
-                    "description": "Show outlined version",
-                    "name": "outline",
+                    "description": "Show small version of badge",
+                    "name": "small",
                     "optional": true,
                     "type": "boolean"
+                }
+            ]
+        },
+        "BadgeProps": [
+            "CompactBadgeProps",
+            "OutlineBadgeProps",
+            "SubtleBadgeProps",
+            "StatusBadgeProps"
+        ]
+    },
+    "BadgeIcon": {
+        "BadgeIconProps": {
+            "intersections": [
+                "HTMLAttributes<HTMLSpanElement>"
+            ],
+            "props": [
+                {
+                    "description": "Background color",
+                    "name": "color",
+                    "optional": true,
+                    "type": "Color"
                 },
                 {
-                    "description": "State will change the style of the badge",
-                    "name": "state",
+                    "description": "Icon type",
+                    "name": "icon",
+                    "optional": false,
+                    "type": "IconName"
+                },
+                {
+                    "description": "Show subtle version",
+                    "name": "subtle",
                     "optional": true,
-                    "type": "State"
+                    "type": "boolean"
                 }
             ]
         }
@@ -2719,11 +2787,6 @@
                     "optional": true,
                     "type": "Select2Value"
                 },
-                {
-                    "name": "disableSearch",
-                    "optional": true,
-                    "type": "boolean"
-                },
                 {
                     "name": "disabled",
                     "optional": true,
@@ -2925,7 +2988,7 @@
                 {
                     "name": "color",
                     "optional": true,
-                    "type": "TagColor"
+                    "type": "Color"
                 },
                 {
                     "name": "text",
@@ -2986,7 +3049,7 @@
                 {
                     "type": "reflection",
                     "declaration": {
-                        "id": 2945,
+                        "id": 2961,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
@@ -3186,7 +3249,7 @@
                     "constraint": {
                         "type": "reflection",
                         "declaration": {
-                            "id": 1673,
+                            "id": 1696,
                             "name": "__type",
                             "kind": 65536,
                             "kindString": "Type literal",
@@ -5697,18 +5760,6 @@
         }
     },
     "Tag": {
-        "TagColor": {
-            "type": "typeOperator",
-            "operator": "keyof",
-            "target": {
-                "type": "query",
-                "queryType": {
-                    "type": "reference",
-                    "id": 2797,
-                    "name": "TAG_COLORS"
-                }
-            }
-        },
         "TagProps": {
             "intersections": [
                 "Omit<HTMLAttributes<HTMLSpanElement>, 'children'>"
@@ -5722,7 +5773,7 @@
                 {
                     "name": "color",
                     "optional": true,
-                    "type": "TagColor"
+                    "type": "Color"
                 },
                 {
                     "name": "disabled",
@@ -6145,6 +6196,17 @@
             "'ghost'",
             "'discrete'"
         ],
+        "Color": {
+            "type": "indexedAccess",
+            "indexType": {
+                "type": "intrinsic",
+                "name": "number"
+            },
+            "objectType": {
+                "type": "intrinsic",
+                "name": "Object"
+            }
+        },
         "Locale": [
             "'en-GB'",
             "'da-DK'",

package/dist/components/Badge/Badge.stories.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-        children: React.ReactNode;
-        compact?: boolean | undefined;
-        outline?: boolean | undefined;
-        state?: "default" | "warning" | "information" | "success" | "error" | undefined;
-    } & React.RefAttributes<HTMLSpanElement>>;
-};
-export default _default;
-export declare const Default: () => JSX.Element;
-export declare const Outline: () => JSX.Element;
-export declare const CompactOutline: () => JSX.Element;
-export declare const KitchenSink: () => JSX.Element;

package/dist/components/Table2/hooks/useShouldPauseHoverState.d.ts

@@ -1,2 +0,0 @@
-import { OnChangeFn } from '@tanstack/react-table';
-export declare const useShouldPauseHoverState: () => [boolean, OnChangeFn<boolean>];

package/dist/esm/packages/taco/src/components/Table2/hooks/useShouldPauseHoverState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useShouldPauseHoverState.js","sources":["../../../../../../../../src/components/Table2/hooks/useShouldPauseHoverState.ts"],"sourcesContent":["import { OnChangeFn } from '@tanstack/react-table';\nimport React from 'react';\n\nexport const useShouldPauseHoverState = (): [boolean, OnChangeFn<boolean>] => {\n    const [shouldPauseHoverState, setShouldPauseHoverState] = React.useState<boolean>(false);\n\n    // as soon as the mouse starts moving again, unpause hover state\n    React.useEffect(() => {\n        const move = () => setShouldPauseHoverState(false);\n\n        if (shouldPauseHoverState) {\n            document.addEventListener('mousemove', move);\n        }\n\n        return () => {\n            document.removeEventListener('mousemove', move);\n        };\n    }, [shouldPauseHoverState]);\n\n    return [shouldPauseHoverState, setShouldPauseHoverState];\n};\n"],"names":["useShouldPauseHoverState","shouldPauseHoverState","setShouldPauseHoverState","React","useState","useEffect","move","document","addEventListener","removeEventListener"],"mappings":";;MAGaA,wBAAwB,GAAG;EACpC,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;;EAGxFD,cAAK,CAACE,SAAS,CAAC;IACZ,MAAMC,IAAI,GAAG,MAAMJ,wBAAwB,CAAC,KAAK,CAAC;IAElD,IAAID,qBAAqB,EAAE;MACvBM,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEF,IAAI,CAAC;;IAGhD,OAAO;MACHC,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEH,IAAI,CAAC;KAClD;GACJ,EAAE,CAACL,qBAAqB,CAAC,CAAC;EAE3B,OAAO,CAACA,qBAAqB,EAAEC,wBAAwB,CAAC;AAC5D;;;;"}

package/dist/utils/colors.d.ts

@@ -1,12 +0,0 @@
-export declare const colors: {
-    green: string;
-    yellow: string;
-    red: string;
-    blue: string;
-    purple: string;
-    orange: string;
-    brown: string;
-    pink: string;
-    grey: string;
-};
-export declare type Color = keyof typeof colors;