@bbl-digital/snorre 4.1.37 → 4.1.39

package/esm/v2/core/ButtonsFilter/ButtonsFilter.stories.js

@@ -0,0 +1,38 @@
+import ButtonsFilter from '.';
+const meta = {
+  title: 'v2/Core/ButtonsFilter',
+  component: ButtonsFilter
+};
+export default meta;
+export const Default = {
+  name: 'Default',
+  args: {
+    values: ['One', 'Two', 'Three'],
+    disabled: false,
+    onChange: e => console.log(e)
+  }
+};
+export const Loading = {
+  name: 'Loading',
+  args: {
+    loading: true
+  }
+};
+export const ObjectValues = {
+  name: 'Object Values',
+  args: {
+    values: [{
+      label: 'One',
+      value: 15
+    }, {
+      label: 'Two',
+      value: 2
+    }, {
+      label: 'Three',
+      value: 5
+    }],
+    labelField: 'label',
+    valueField: 'value',
+    onChange: e => console.log(e)
+  }
+};

package/esm/v2/core/ButtonsFilter/index.js

@@ -0,0 +1,73 @@
+/** @jsxImportSource @emotion/react */
+
+import { useEffect, useMemo, useState } from 'react';
+import Button from '../Button';
+import { Wrapper } from './styles';
+import Skeleton from '../../../core/Skeleton';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const resolve = (value, field) => {
+  const valueIsObject = typeof value === 'object';
+  return valueIsObject ? value[field] : value;
+};
+const ButtonsFilter = ({
+  values,
+  disabled,
+  skeletons = 3,
+  labelField,
+  valueField,
+  loading,
+  onChange,
+  ...rest
+}) => {
+  const [selected, setSelected] = useState(undefined);
+  const isEmpty = !values?.length;
+  const handleClick = value => {
+    setSelected(value);
+    onChange?.(value);
+  };
+  const resolvedValues = useMemo(() => {
+    if (!values) return [];
+    return values.map(value => ({
+      label: resolve(value, labelField),
+      value: resolve(value, valueField)
+    }));
+  }, [values, labelField, valueField]);
+  useEffect(() => {
+    if (loading || isEmpty || selected !== undefined) return;
+    const firstValue = resolve(values[0], valueField);
+    const selectedExists = resolvedValues.some(({
+      value
+    }) => value === selected);
+    if (!selectedExists) {
+      setSelected(firstValue);
+      onChange?.(firstValue);
+    }
+  }, [values, loading, selected, isEmpty, valueField, onChange]);
+  if (loading) return _jsx(Wrapper, {
+    children: Array.from({
+      length: skeletons
+    }).map((_, index) => _jsx(Skeleton, {
+      width: "100px",
+      height: "32px",
+      borderRadius: "100px",
+      rectangle: true
+    }, index))
+  });
+  if (isEmpty) return null;
+  return _jsx(Wrapper, {
+    children: resolvedValues.map(({
+      label,
+      value
+    }) => _jsx(Button, {
+      small: true,
+      title: label,
+      onClick: () => handleClick(value),
+      secondary: selected !== value,
+      "aria-pressed": selected === value,
+      disabled: disabled,
+      ...rest,
+      children: label
+    }, value))
+  });
+};
+export default ButtonsFilter;

package/esm/v2/core/ButtonsFilter/styles.js

@@ -0,0 +1,16 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1djumss0"
+} : {
+  target: "e1djumss0",
+  label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "11impfd",
+  styles: "display:flex;gap:8px;margin-bottom:16px;flex-flow:wrap;width:100%"
+} : {
+  name: "11impfd",
+  styles: "display:flex;gap:8px;margin-bottom:16px;flex-flow:wrap;width:100%",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL0J1dHRvbnNGaWx0ZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvdjIvY29yZS9CdXR0b25zRmlsdGVyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogOHB4O1xuICBtYXJnaW4tYm90dG9tOiAxNnB4O1xuICBmbGV4LWZsb3c6IHdyYXA7XG4gIHdpZHRoOiAxMDAlO1xuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/esm/v2/index.js

@@ -1,3 +1,4 @@
 import Chip from './core/Chip';
 import Button from './core/Button';
-export { Chip, Button };
+import ButtonsFilter from './core/ButtonsFilter';
+export { Chip, Button, ButtonsFilter };

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

@@ -1 +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"}
+{"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;qBAuBT,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"}