@bbl-digital/snorre 4.1.35 → 4.1.37

package/esm/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/esm/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;