@bbl-digital/snorre 4.1.0-beta.2 → 4.1.0

package/esm/app-shell/index.js

@@ -3,8 +3,7 @@ import React from 'react';
 import { css, Global, ThemeProvider } from '@emotion/react';
 import AppLoader from '../core/AppLoader';
 import useSnorreTheme from '../utils/useSnorreTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ep4gpb60"
 } : {

package/esm/core/Alert/index.js

@@ -4,8 +4,7 @@ import { styles } from './styles';
 import Button from '../Button';
 import IconClose from '../../icons/General/IconClose';
 import VisuallyHidden from '../../shared/components/VisuallyHidden';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const Alert = ({
   primary,
   success,

package/esm/core/AppLoader/index.js

@@ -1,8 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import { styles } from './styles';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const AppLoader = ({
   color,
   ...restProps

package/esm/core/Autocomplete/Autocomplete.stories.js

@@ -4,8 +4,7 @@ import Tag from '../Tag';
 import Card from '../Card';
 import Text from '../Text';
 import Button from '../Button';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: 'Core/Autocomplete',
   component: Autocomplete

package/esm/core/Autocomplete/index.js

@@ -9,9 +9,7 @@ import Link from '../Link';
 import IconClose from '../../icons/General/IconClose';
 import useAutocomplete from './hooks/useAutocomplete';
 import IconChevronDown from '../../icons/General/IconChevronDown';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const Autocomplete = /*#__PURE__*/React.forwardRef(({
   height,
   css,

package/esm/core/Banner/index.js

@@ -2,8 +2,7 @@
 import React from 'react';
 import Alert from '../Alert';
 import { Content, LeftSide, RightSide, Wrapper } from './styles';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const Banner = ({
   children,
   danger,

package/esm/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js

@@ -65,6 +65,67 @@ const DefaultData = [{
   kostnad: -5500,
   akkumulert: 50500
 }];
+const ValuePairData = [{
+  name: 'Jan',
+  inntekt: 40000,
+  kostnad: 23000,
+  stackId: ''
+}, {
+  name: 'Feb',
+  inntekt: 60000,
+  kostnad: 25000,
+  stackId: ''
+}, {
+  name: 'Mars',
+  inntekt: 50000,
+  kostnad: 34000,
+  stackId: ''
+}, {
+  name: 'April',
+  inntekt: 55000,
+  kostnad: 20000,
+  stackId: ''
+}, {
+  name: 'Mai',
+  inntekt: 54400,
+  kostnad: 30000,
+  stackId: ''
+}, {
+  name: 'Jun',
+  inntekt: 65000,
+  kostnad: 25000,
+  stackId: ''
+}, {
+  name: 'Jul',
+  inntekt: 43000,
+  kostnad: 30000,
+  stackId: ''
+}, {
+  name: 'Aug',
+  inntekt: 60000,
+  kostnad: 40000,
+  stackId: ''
+}, {
+  name: 'Sept',
+  inntekt: 70000,
+  kostnad: 50000,
+  stackId: ''
+}, {
+  name: 'Okt',
+  inntekt: 60000,
+  kostnad: 34000,
+  stackId: ''
+}, {
+  name: 'Nov',
+  inntekt: 40040,
+  kostnad: 24000,
+  stackId: ''
+}, {
+  name: 'Des',
+  inntekt: 56000,
+  kostnad: 5500,
+  stackId: ''
+}];
 export const Default = {
   render: (_args, {
     loaded: {
@@ -91,4 +152,31 @@ export const Default = {
     xAxisDataKey: "name"
   }),
   name: 'Default'
+};
+export const ValuePair = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
+    data: ValuePairData,
+    bars: [{
+      name: 'Inntekt',
+      dataKey: 'inntekt',
+      fill: theme.primary50opa
+    }, {
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary
+    }],
+    hasYAxis: false,
+    cartesianGrid: false,
+    xAxisDataKey: "name",
+    stack: false,
+    maxBarSize: 10,
+    barGap: -20,
+    barRadius: 30,
+    legend: false
+  }),
+  name: 'ValuePair'
 };

package/esm/core/BarAndLineComposedChart/index.js

@@ -4,8 +4,7 @@ import { CustomLegend } from '../../shared/recharts/CustomLegend';
 import CustomTooltip from '../../shared/recharts/CustomTooltip';
 import { formatAxisPrice } from '../../utils/formatGraphPrice';
 import { BarAndLineComposedChartContainer } from './styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BarAndLineComposedChart = ({
   data = [],
   bars,
@@ -24,6 +23,14 @@ const BarAndLineComposedChart = ({
   legendPadding,
   layout = 'horizontal',
   lineStrokeWidth = 1,
+  hasYAxis = true,
+  cartesianGrid = true,
+  legend = true,
+  stack = true,
+  referenceLine = true,
+  maxBarSize,
+  barGap,
+  barRadius,
   ...rest
 }) => {
   return /*#__PURE__*/_jsx(BarAndLineComposedChartContainer, {
@@ -41,8 +48,12 @@ const BarAndLineComposedChart = ({
         },
         layout: layout && layout,
         stackOffset: "sign",
+        barGap: barGap,
         ...rest,
-        children: [/*#__PURE__*/_jsx(CartesianGrid, {
+        children: [referenceLine && /*#__PURE__*/_jsx(ReferenceLine, {
+          y: 0,
+          stroke: "white"
+        }), cartesianGrid && /*#__PURE__*/_jsx(CartesianGrid, {
           strokeDasharray: "0",
           vertical: false
         }), /*#__PURE__*/_jsx(XAxis, {
@@ -52,10 +63,7 @@ const BarAndLineComposedChart = ({
           type: layout === 'vertical' ? 'number' : 'category',
           tickMargin: 5,
           tickFormatter: formatAxisPrice
-        }), /*#__PURE__*/_jsx(ReferenceLine, {
-          y: 0,
-          stroke: "white"
-        }), /*#__PURE__*/_jsx(YAxis, {
+        }), hasYAxis && /*#__PURE__*/_jsx(YAxis, {
           dataKey: yAxisDataKey && yAxisDataKey,
           axisLine: yAxisLine && yAxisLine,
           tickLine: tickLineY && tickLineY,
@@ -66,7 +74,7 @@ const BarAndLineComposedChart = ({
             barConfig: bars && bars,
             lineConfig: lines && lines
           })
-        }), /*#__PURE__*/_jsx(Legend, {
+        }), legend && /*#__PURE__*/_jsx(Legend, {
           verticalAlign: legendVAlign && legendVAlign,
           align: legendHAlign && legendHAlign,
           content: /*#__PURE__*/_jsx(CustomLegend, {}),
@@ -81,7 +89,9 @@ const BarAndLineComposedChart = ({
             dataKey: bar.dataKey,
             fill: bar.fill,
             name: bar.name,
-            stackId: "stack"
+            maxBarSize: maxBarSize || undefined,
+            stackId: stack ? 'stack' : undefined,
+            radius: barRadius
           }, bar.name);
         }), lines?.length && lines.map(line => {
           return /*#__PURE__*/_jsx(Line, {

package/esm/core/BarChartWithCustomizedEvent/index.js

@@ -4,8 +4,7 @@ import { formatAxisPrice } from '../../utils/formatGraphPrice';
 import { useTheme } from '@emotion/react';
 import { CustomEventBarChartContainer } from './styles';
 import { CustomLegend } from '../../shared/recharts/CustomLegend';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChartWithCustomizedEvent = ({
   height = '300px',
   width = 'auto',

package/esm/core/Box/index.js

@@ -4,8 +4,7 @@ import { CollapseButton, ContentWrapper, HeaderWrapper, styles } from './styles'
 import IconMinus from '../../icons/General/IconMinus';
 import IconPlus from '../../icons/General/IconPlus';
 import IconChevronDown from '../../icons/General/IconChevronDown';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const Box = ({
   header,
   collapsable,