@bbl-digital/snorre 4.1.35 → 4.1.37

package/lib/v2/core/Button/Button.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Button from '.';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const DefaultSmall: Story;
+export declare const Secondary: Story;
+export declare const SecondaryWithIcon: Story;
+export declare const SecondarySmall: Story;
+export declare const Ghost: Story;
+export declare const GhostSmall: Story;
+export declare const GhostSmallIcon: Story;
+export declare const IconBefore: Story;
+export declare const IconAfter: Story;
+export declare const SmallWithIcon: Story;
+export declare const Success: Story;
+export declare const Danger: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const Highlighted: Story;
+export declare const OutlineHighlighted: Story;
+export declare const Back: Story;
+export declare const Small: Story;
+export declare const DangerOutline: Story;
+export declare const TransparentBackground: Story;
+export declare const NoStyle: Story;
+export declare const EventKeyPresses: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/lib/v2/core/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,MAAM,MAAM,GAAG,CAAA;AAKtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAG7B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAID,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA"}

package/lib/v2/core/Button/Button.stories.js

@@ -0,0 +1,188 @@
+import Button from '.';
+import IconCaretDown from '../../../icons/General/IconCaretDown';
+import IconBookmarkFilled from '../../../icons/General/IconBookmarkFilled';
+import IconBookmarkOutline from '../../../icons/General/IconBookmarkOutline';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  title: 'v2/Core/Button',
+  component: Button
+};
+export default meta;
+export const Default = {
+  args: {
+    children: 'Standard button'
+  },
+  name: 'Default'
+};
+export const DefaultSmall = {
+  args: {
+    small: true,
+    children: 'Small button'
+  },
+  name: 'Default small'
+};
+export const Secondary = {
+  args: {
+    secondary: true,
+    children: 'Secondary button'
+  },
+  name: 'Secondary'
+};
+export const SecondaryWithIcon = {
+  args: {
+    secondary: true,
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkOutline, {}),
+    children: 'Secondary button'
+  },
+  name: 'Secondary with icon'
+};
+export const SecondarySmall = {
+  args: {
+    secondary: true,
+    small: true,
+    children: 'Secondary'
+  },
+  name: 'Secondary small'
+};
+export const Ghost = {
+  args: {
+    ghost: true,
+    children: 'Ghost button',
+    disabled: true
+  },
+  name: 'Ghost'
+};
+export const GhostSmall = {
+  args: {
+    ghost: true,
+    small: true,
+    children: 'Ghost small button'
+  },
+  name: 'Ghost small'
+};
+export const GhostSmallIcon = {
+  args: {
+    ghost: true,
+    small: true,
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkOutline, {}),
+    children: 'Ghost small button'
+  },
+  name: 'Ghost small icon'
+};
+export const IconBefore = {
+  args: {
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkFilled, {}),
+    children: 'Standard button'
+  },
+  name: 'Icon before'
+};
+
+// Rewrite all stories to use args instead of render
+
+export const IconAfter = {
+  args: {
+    afterIcon: /*#__PURE__*/_jsx(IconCaretDown, {}),
+    children: 'Standard button'
+  },
+  name: 'Icon after'
+};
+export const SmallWithIcon = {
+  args: {
+    small: true,
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkFilled, {}),
+    children: 'Small button'
+  },
+  name: 'Small with icon'
+};
+export const Success = {
+  args: {
+    success: true,
+    children: 'Success button'
+  },
+  name: 'Success'
+};
+export const Danger = {
+  args: {
+    danger: true,
+    children: 'Danger button'
+  },
+  name: 'Danger'
+};
+export const Loading = {
+  args: {
+    loading: true,
+    children: 'Loading button'
+  },
+  name: 'Loading'
+};
+export const Disabled = {
+  args: {
+    disabled: true,
+    children: 'Disabled button'
+  },
+  name: 'Disabled'
+};
+export const Highlighted = {
+  args: {
+    highlight: true,
+    children: 'Hightlighted button'
+  },
+  name: 'Highlighted'
+};
+export const OutlineHighlighted = {
+  args: {
+    highlight: true,
+    outline: true,
+    children: 'Hightlighted outline button'
+  },
+  name: 'Outline highlighted'
+};
+export const Back = {
+  args: {
+    back: true,
+    children: 'Go back'
+  },
+  name: 'Back'
+};
+export const Small = {
+  args: {
+    small: true,
+    children: 'Small button'
+  },
+  name: 'Small'
+};
+export const DangerOutline = {
+  args: {
+    danger: true,
+    outline: true,
+    children: 'Danger outline'
+  },
+  name: 'Danger outline'
+};
+export const TransparentBackground = {
+  args: {
+    outline: true,
+    transparentBg: true,
+    children: 'Danger outline'
+  },
+  name: 'Transparent background'
+};
+export const NoStyle = {
+  args: {
+    nostyle: true,
+    children: 'No style'
+  },
+  name: 'No style'
+};
+export const EventKeyPresses = {
+  args: {
+    onEnterKeyPress: () => console.log('Enter pressed'),
+    onEscapeKeyPress: () => console.log('Escape pressed'),
+    onCustomKeyPress: {
+      key: 'E',
+      action: e => console.log('Key pressed', e.key)
+    },
+    children: 'Actionlistener button'
+  },
+  name: 'Event key presses'
+};

package/lib/v2/core/Button/index.d.ts

@@ -0,0 +1,94 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+import { Props as ButtonOrLinkProps } from '../../../core/private/ButtonOrLink';
+export type IProps = ButtonOrLinkProps & {
+    /** Success color styling */
+    success?: boolean;
+    /** Danger color styling */
+    danger?: boolean;
+    /** Bigger button */
+    highlight?: boolean;
+    /** Secondary color styling */
+    secondary?: boolean;
+    /** Ghost is a button without a backgound */
+    ghost?: boolean;
+    /** Outlined button styling */
+    outline?: boolean;
+    /** Without style */
+    nostyle?: boolean;
+    /** Adds focus outline, i.e. for nostyle buttons */
+    focusable?: boolean;
+    /** Custom border */
+    border?: string;
+    /** Custom css */
+    css?: SerializedStyles;
+    /** Shows loader instead of children */
+    loading?: boolean;
+    /** Backbutton style */
+    back?: boolean;
+    /** Smaller button size */
+    small?: boolean;
+    /** Transparent bg toggle */
+    transparentBg?: boolean;
+    /** Set tabindex */
+    tabIndex?: number;
+};
+declare const Button: React.ForwardRefExoticComponent<React.HTMLAttributes<import("../../../core/private/ButtonOrLink").ButtonOrLinkTypes> & {
+    afterIcon?: React.ReactNode;
+    beforeIcon?: React.ReactNode;
+    children: NonNullable<React.ReactNode>;
+    disabled?: boolean;
+    href?: string;
+    loading?: boolean;
+    onClick?: (event: React.MouseEvent<import("../../../core/private/ButtonOrLink").ButtonOrLinkTypes>) => void;
+    onMouseUp?: (event: React.MouseEvent<import("../../../core/private/ButtonOrLink").ButtonOrLinkTypes>) => void;
+    onCustomKeyPress?: {
+        key: string;
+        action: (event: KeyboardEvent) => void;
+    };
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onEnterKeyPress?: (event: KeyboardEvent) => void;
+    onEscapeKeyPress?: (event: KeyboardEvent) => void;
+    openInNewWindow?: boolean;
+    rel?: string;
+    trackingEvent?: string;
+    trackingName?: string;
+    type?: "button" | "submit" | "reset";
+    target?: string;
+    download?: any;
+    tabIndex?: number;
+} & {
+    /** Success color styling */
+    success?: boolean;
+    /** Danger color styling */
+    danger?: boolean;
+    /** Bigger button */
+    highlight?: boolean;
+    /** Secondary color styling */
+    secondary?: boolean;
+    /** Ghost is a button without a backgound */
+    ghost?: boolean;
+    /** Outlined button styling */
+    outline?: boolean;
+    /** Without style */
+    nostyle?: boolean;
+    /** Adds focus outline, i.e. for nostyle buttons */
+    focusable?: boolean;
+    /** Custom border */
+    border?: string;
+    /** Custom css */
+    css?: SerializedStyles;
+    /** Shows loader instead of children */
+    loading?: boolean;
+    /** Backbutton style */
+    back?: boolean;
+    /** Smaller button size */
+    small?: boolean;
+    /** Transparent bg toggle */
+    transparentBg?: boolean;
+    /** Set tabindex */
+    tabIndex?: number;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=index.d.ts.map

package/lib/v2/core/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/Button/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGjD,OAAqB,EACnB,KAAK,IAAI,iBAAiB,EAC3B,MAAM,oCAAoC,CAAA;AAM3C,MAAM,MAAM,MAAM,GAAG,iBAAiB,GAAG;IACvC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB;IACjB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM;sBAtC2B,SAAS;uBAEN,SAAS;gCAG3C,SAAS;;;;4BASwB,UACrC;8BAMF,UADS;;;;;;;;;;;;;;;;;IAdT,4BAA4B;cAClB,OAAO;IACjB,2BAA2B;aAClB,OAAO;IAChB,oBAAoB;gBACR,OAAO;IACnB,8BAA8B;gBAClB,OAAO;IACnB,4CAA4C;YACpC,OAAO;IACf,8BAA8B;cACpB,OAAO;IACjB,oBAAoB;cACV,OAAO;IACjB,mDAAmD;gBACvC,OAAO;IACnB,oBAAoB;aACX,MAAM;IACf,iBAAiB;UACX,gBAAgB;IACtB,uCAAuC;cAC7B,OAAO;IACjB,uBAAuB;WAChB,OAAO;IACd,0BAA0B;YAClB,OAAO;IACf,4BAA4B;oBACZ,OAAO;IACvB,mBAAmB;eACR,MAAM;2CAuFjB,CAAA;AACF,eAAe,MAAM,CAAA"}

package/lib/v2/core/Button/index.js

@@ -0,0 +1,67 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import ButtonOrLink from '../../../core/private/ButtonOrLink';
+import styles from './styles';
+import IconChevronLeft from '../../../icons/General/IconChevronLeft';
+import AppLoader from '../../../core/AppLoader';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    secondary,
+    ghost,
+    danger,
+    success,
+    highlight,
+    disabled,
+    outline,
+    afterIcon,
+    beforeIcon,
+    border,
+    nostyle,
+    css,
+    loading,
+    back,
+    small,
+    transparentBg,
+    focusable,
+    tabIndex,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+  const accessibilityProps = {};
+  const getLoaderColor = () => {
+    if (!outline && !transparentBg || success) return theme.btnDefaultFontColor;
+    if (danger) return theme.btnDanger;
+    return theme.secondary;
+  };
+  if (loading) {
+    accessibilityProps['aria-busy'] = props.loading;
+    accessibilityProps['aria-disabled'] = props.loading;
+    accessibilityProps['aria-live'] = props['aria-live'] || 'polite';
+    accessibilityProps['aria-label'] = props['aria-label'] || 'Laster';
+  }
+  if (disabled) {
+    accessibilityProps['aria-disabled'] = props.disabled;
+  }
+  if (back) {
+    accessibilityProps['aria-label'] = props['aria-label'] || 'Gå tilbake';
+  }
+  return _jsx(ButtonOrLink, {
+    tabIndex: tabIndex,
+    disabled: disabled,
+    loading: loading,
+    ref: ref,
+    css: theme => [styles.default(theme), secondary && styles.secondary(theme), outline && styles.outline(theme), danger && styles.danger(theme), success && styles.success(theme), highlight && styles.highlighted, ghost && styles.ghost(theme), disabled && styles.disabled(theme), (beforeIcon || afterIcon) && styles.icon(theme), border && styles.border(border), nostyle && styles.nostyle, loading && styles.loading(theme), back && styles.back(theme), css && css, small && styles.small, danger && outline && styles.dangerOutline(theme), success && outline && styles.successOutline(theme), transparentBg && styles.transparentBg, focusable && styles.focusable],
+    afterIcon: afterIcon,
+    beforeIcon: back ? _jsx(IconChevronLeft, {
+      size: '12px'
+    }) : beforeIcon,
+    ...accessibilityProps,
+    ...restProps,
+    children: loading ? _jsx(AppLoader, {
+      color: getLoaderColor()
+    }) : props.children
+  });
+});
+export default Button;

package/lib/v2/core/Button/styles.d.ts

@@ -0,0 +1,25 @@
+import IAppTheme from '../../../app-shell/theme';
+export declare const Btn: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const styles: {
+    default: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    highlighted: import("@emotion/react").SerializedStyles;
+    secondary: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    ghost: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    icon: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    outline: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    success: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    danger: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    border: (color: string) => import("@emotion/react").SerializedStyles;
+    loading: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    nostyle: import("@emotion/react").SerializedStyles;
+    back: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    dangerOutline: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    successOutline: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    transparentBg: import("@emotion/react").SerializedStyles;
+    focusable: import("@emotion/react").SerializedStyles;
+};
+export default styles;
+export { styles };
+//# sourceMappingURL=styles.d.ts.map

package/lib/v2/core/Button/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/Button/styles.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,0BAA0B,CAAA;AAEhD,eAAO,MAAM,GAAG,mKAAuB,CAAA;AAEvC,QAAA,MAAM,MAAM;qBACO,SAAS;;uBAoCP,SAAS;mBAab,SAAS;kBAcV,SAAS;qBAsBN,SAAS;qBAqBT,SAAS;oBAgBV,SAAS;sBAcP,SAAS;oBAWX,MAAM;qBAGL,SAAS;;kBA6BZ,SAAS;;2BA8BA,SAAS;4BAIR,SAAS;;;CAalC,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}