@bbl-digital/snorre 4.0.8 → 4.0.9

package/lib/core/Tag/Tag.stories.js

@@ -1,112 +1,113 @@
 import Tag from '.';
 import IconComment from '../../icons/General/IconComment';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Tag',
   component: Tag
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    children: "Here"
-  }),
-  name: 'Default'
+  name: 'Default',
+  args: {
+    children: 'Here'
+  }
 };
 export const Neutral = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    neutral: true,
-    children: "Here"
-  }),
-  name: 'Neutral'
+  name: 'Neutral',
+  args: {
+    children: 'Here',
+    neutral: true
+  }
 };
 export const Success = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    success: true,
-    children: "Here"
-  }),
-  name: 'Success'
+  name: 'Success',
+  args: {
+    children: 'here',
+    success: true
+  }
 };
 export const Info = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    info: true,
-    children: "Here"
-  }),
-  name: 'Info'
+  name: 'Info',
+  args: {
+    children: 'here',
+    info: true
+  }
 };
 export const Danger = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    danger: true,
-    children: "Here"
-  }),
-  name: 'Danger'
+  name: 'Danger',
+  args: {
+    children: 'here',
+    danger: true
+  }
 };
 export const Dark = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    dark: true,
-    children: "Here"
-  }),
-  name: 'Dark'
+  name: 'Dark',
+  args: {
+    children: 'here',
+    dark: true
+  }
 };
 export const Light = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    light: true,
-    children: "Here"
-  }),
-  name: 'Light'
+  name: 'Light',
+  args: {
+    children: 'here',
+    light: true
+  }
 };
 export const Outline = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    outline: true,
-    children: "There"
-  }),
-  name: 'Outline'
+  name: 'Outline',
+  args: {
+    children: 'here',
+    outline: true
+  }
 };
 export const TagWithClose = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close',
+  args: {
+    children: 'Click me',
     withclose: true,
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close'
+    onClick: () => console.log('close')
+  }
 };
 export const TagWithLoading = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    loading: true,
-    children: "Here"
-  }),
-  name: 'Tag with loading'
+  name: 'Tag with loading',
+  args: {
+    children: 'Here',
+    loading: true
+  }
 };
 export const TagWithCloseAndStrictClick = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close and strict click',
+  args: {
+    children: 'Have to close by clicking the "x"',
     strictClose: true,
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close and strict click'
+    onClick: () => console.log('close')
+  }
 };
 export const TagWithCloseLoadingAndStrictClick = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close, loading and strict click',
+  args: {
+    children: 'With loading',
     strictClose: true,
     loading: true,
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close, loading and strict click'
+    onClick: () => console.log('close')
+  }
 };
 export const TagWithCloseAndStrictClickWithColor = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close and strict click with color',
+  args: {
+    children: 'With custom close color',
     strictClose: true,
-    closeColor: "red",
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close and strict click with color'
+    closeColor: 'red',
+    onClick: () => console.log('close')
+  }
 };
 export const WithIcon = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'With icon',
+  args: {
+    children: '3',
     icon: /*#__PURE__*/_jsx(IconComment, {
       size: 14
-    }),
-    children: "3"
-  }),
-  name: 'With icon'
+    })
+  }
 };

package/lib/core/Tag/index.d.ts

@@ -35,6 +35,8 @@ interface IProps {
     trackingEvent?: string;
     /** Add a data-tracking-name attribute to close click */
     trackingName?: string;
+    /** Disables onClick functions */
+    disabled?: boolean;
     /** OnClick property returns cb with event */
     onClick?: (event: React.MouseEvent<any>) => void | undefined;
     /** Children */

package/lib/core/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Tag/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,MAAM;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,SAAS,CAAA;IAC5D,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAoDzB,CAAA;AAED,eAAe,GAAG,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Tag/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,MAAM;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,SAAS,CAAA;IAC5D,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwDzB,CAAA;AAED,eAAe,GAAG,CAAA"}

package/lib/core/Tag/index.js

@@ -11,6 +11,7 @@ const Tag = ({
   icon,
   trackingEvent,
   trackingName,
+  disabled,
   ...props
 }) => {
   const Tag = (props.withclose || props.onClick) && !props.strictClose ? 'button' : 'div';
@@ -18,6 +19,8 @@ const Tag = ({
     title: props.title,
     className: props.className,
     onClick: !props.strictClose ? props.onClick : undefined,
+    disabled: disabled,
+    role: !props.strictClose && props.onClick ? 'button' : undefined,
     css: theme => [styles.default(theme), props.neutral && styles.neutral(theme), props.success && styles.success(theme), props.info && styles.info(theme), props.danger && styles.danger(theme), props.dark && styles.dark(theme), props.light && styles.light(theme), props.outline && styles.outline(theme), props.withclose && styles.withclose, props.strictClose && styles.strictClose, icon && styles.withicon, props.loading && styles.loading],
     children: [icon && icon, props.children, props.loading ? _jsx(Spinner, {
       margin: "0 0 0 8px",
@@ -32,6 +35,7 @@ const Tag = ({
         onClick: props.onClick,
         trackingEvent: trackingEvent,
         trackingName: trackingEvent,
+        disabled: disabled,
         children: _jsx(IconClose, {
           color: props.closeColor || 'white',
           size: '14px'

package/lib/enums/ModifierKey.d.ts

@@ -0,0 +1,12 @@
+export declare enum ModifierKey {
+    enter = "Enter",
+    tab = "Tab",
+    space = " ",
+    escape = "Escape",
+    shift = "Shift",
+    right = "ArrowRight",
+    left = "ArrowLeft",
+    up = "ArrowUp",
+    down = "ArrowDown"
+}
+//# sourceMappingURL=ModifierKey.d.ts.map

package/lib/enums/ModifierKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModifierKey.d.ts","sourceRoot":"","sources":["../../src/packages/enums/ModifierKey.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,KAAK,MAAM;IACX,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,eAAe;IACpB,IAAI,cAAc;IAClB,EAAE,YAAY;IACd,IAAI,cAAc;CACnB"}

package/lib/enums/ModifierKey.js

@@ -0,0 +1,13 @@
+export let ModifierKey;
+
+(function (ModifierKey) {
+  ModifierKey["enter"] = "Enter";
+  ModifierKey["tab"] = "Tab";
+  ModifierKey["space"] = " ";
+  ModifierKey["escape"] = "Escape";
+  ModifierKey["shift"] = "Shift";
+  ModifierKey["right"] = "ArrowRight";
+  ModifierKey["left"] = "ArrowLeft";
+  ModifierKey["up"] = "ArrowUp";
+  ModifierKey["down"] = "ArrowDown";
+})(ModifierKey || (ModifierKey = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",