@bbl-digital/snorre 4.1.36 → 4.1.38

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import ButtonsFilter from '.';
+declare const meta: Meta<typeof ButtonsFilter>;
+export default meta;
+type Story = StoryObj<typeof ButtonsFilter>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const ObjectValues: Story;
+//# sourceMappingURL=ButtonsFilter.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonsFilter.stories.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/ButtonsFilter/ButtonsFilter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,aAAa,MAAM,GAAG,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA"}

package/lib/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/lib/v2/core/ButtonsFilter/index.d.ts

@@ -0,0 +1,14 @@
+/** @jsxImportSource @emotion/react */
+import { AriaAttributes } from 'react';
+interface IProps extends AriaAttributes {
+    values: Array<string | Record<string, any>>;
+    labelField: string;
+    valueField: string;
+    disabled?: boolean;
+    loading?: boolean;
+    skeletons?: number;
+    onChange?: (value: string) => void;
+}
+declare const ButtonsFilter: React.FC<IProps>;
+export default ButtonsFilter;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/ButtonsFilter/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,OAAO,EAAE,cAAc,EAAgC,MAAM,OAAO,CAAA;AAKpE,UAAU,MAAO,SAAQ,cAAc;IACrC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;IAC3C,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAMD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA2EnC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/lib/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/lib/v2/core/ButtonsFilter/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/ButtonsFilter/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;eAO0b,WAAW;yGADxd,CAAA"}

package/lib/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/package.json

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