@ndla/ui 46.0.1 → 46.1.0

package/src/RadioButtonGroup/RadioButtonGroup.stories.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+import { colors, misc, spacing, utils } from '@ndla/core';
+import RadioButtonGroup, { RadioButtonGroupRoot, RadioGroupItem } from './RadioButtonGroup';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Components/RadioButtonGroup',
+  component: RadioButtonGroup,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    uniqeIds: true,
+    label: 'Velg fag',
+    options: [
+      {
+        title: 'T1',
+        value: 't1',
+      },
+      {
+        title: 'R1',
+        value: 'r1',
+      },
+      {
+        title: 'R2',
+        value: 'r2',
+      },
+      {
+        title: 'S1',
+        value: 's1',
+        disabled: true,
+      },
+    ],
+  },
+} as Meta<typeof RadioButtonGroup>;
+
+export const RadioButtonGroupStory: StoryFn<typeof RadioButtonGroup> = ({ ...args }) => {
+  return <RadioButtonGroup {...args} />;
+};
+
+RadioButtonGroupStory.storyName = 'RadioButtonGroup';
+
+export const WithStandaloneComponents: StoryObj<typeof RadioButtonGroup> = {
+  args: {
+    onChange: () => {},
+    direction: 'vertical',
+    options: [
+      {
+        title: 'Vis navnet mitt når jeg deler en mappe',
+        value: 'showName',
+      },
+      {
+        title: 'Ikke vis navnet mitt når jeg deler en mappe',
+        value: 'dontShowName',
+      },
+      {
+        title: 'Kanskje vis navnet mitt når jeg deler en mappe',
+        value: 'maybeShowName',
+      },
+    ],
+  },
+  render: ({ options, ...args }) => {
+    return (
+      <RadioButtonGroupRoot
+        value={args.selected}
+        direction={args.direction}
+        defaultValue={args.selected ?? options[0].value}
+        onValueChange={args.onChange}
+        css={css`
+          gap: 0px;
+        `}
+        aria-labelledby="desc"
+      >
+        <span id="desc" css={css(utils.visuallyHidden)}>
+          {args.label}
+        </span>
+        {options.map((option) => (
+          <RadioGroupItem
+            key={option.value}
+            id={option.value}
+            css={css`
+              box-sizing: content-box;
+              border-radius: ${misc.borderRadius};
+              border: 1px solid ${colors.brand.greyLight};
+              border-radius: 0px;
+              padding: ${spacing.small};
+              border-color: ${colors.brand.light};
+
+              &:focus-within,
+              &[data-state='checked'] {
+                outline: 0px;
+                border-color: ${colors.brand.primary};
+                border-radius: 0px;
+                z-index: 1;
+              }
+              &:first-of-type {
+                border-top-left-radius: ${misc.borderRadius};
+                border-top-right-radius: ${misc.borderRadius};
+              }
+              &:not(:first-of-type) {
+                margin-top: -1px;
+              }
+              &:last-of-type {
+                border-bottom-left-radius: ${misc.borderRadius};
+                border-bottom-right-radius: ${misc.borderRadius};
+              }
+            `}
+            value={option.value}
+            title={option.title}
+            disabled={option.disabled}
+          />
+        ))}
+      </RadioButtonGroupRoot>
+    );
+  },
+};

package/src/RadioButtonGroup/RadioButtonGroup.tsx

@@ -6,147 +6,180 @@
  *
  */
 
-import { Fragment, Component, ChangeEvent } from 'react';
+import { useMemo } from 'react';
 import styled from '@emotion/styled';
-import { uuid } from '@ndla/util';
-import { spacing, fonts, colors } from '@ndla/core';
+import { uuid as uuidFunc } from '@ndla/util';
+import { Text } from '@ndla/typography';
+import { spacing, fonts, colors, misc } from '@ndla/core';
+import { Indicator, Item, RadioGroupItemProps, RadioGroupProps, Root } from '@radix-ui/react-radio-group';
 
 interface Props {
   selected?: string;
+  className?: string;
   options: {
     title: string;
     value: string;
     disabled?: boolean;
   }[];
+  direction?: 'horizontal' | 'vertical';
   label?: string;
   uniqeIds?: boolean;
   onChange: (value: string) => void;
 }
 
-interface State {
-  selected: string;
-}
+const GroupLabel = styled(Text)`
+  font-family: ${fonts.sans};
+  font-weight: ${fonts.weight.semibold};
+`;
 
-const RadioButtonGroupWrapper = styled.div`
-  padding: ${spacing.small} 0;
+const RadioButtonGroupLabel = styled(Text)`
+  color: ${colors.brand.primary};
   font-family: ${fonts.sans};
+  &[data-disabled='true'] {
+    color: ${colors.brand.light};
+  }
+`;
+
+const RadioButtonWrapper = styled.div`
   display: flex;
   align-items: center;
+  padding: 0px ${spacing.small};
+  gap: ${spacing.small};
+  &:focus-within {
+    outline: 2px solid ${colors.brand.primary};
+    border-radius: ${misc.borderRadius};
+  }
 `;
 
-const RadioButtonGroupLabelHeading = styled.h1`
-  ${fonts.sizes('16px', '20px')};
-  margin: 0 ${spacing.normal} 0 0;
-  font-weight: 600;
+export const StyledRadioGroupItem = styled(Item)`
+  all: unset;
+  transition: 200ms all ease;
+  box-shadow: 0 0 0 2px ${colors.brand.light};
+  min-width: ${spacing.nsmall};
+  min-height: ${spacing.nsmall};
+  width: ${spacing.nsmall};
+  height: ${spacing.nsmall};
+  border-radius: 100%;
+  &[data-state='checked'] {
+    box-shadow: 0 0 0 2px ${colors.brand.primary};
+  }
 `;
 
-const RadioButtonGroupLabel = styled.label`
-  ${fonts.sizes('16px', '28px')};
-  color: ${colors.brand.primary};
+const RadioButtonIndicator = styled(Indicator)`
+  display: flex;
   align-items: center;
-  display: inline-flex;
-  &:before {
-    content: '';
-    margin-right: ${spacing.small};
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    border: 2px solid ${colors.brand.tertiary};
-    transition: 200ms border-color ease;
-  }
-  &:after {
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &::after {
     content: '';
-    background: transparent;
-    width: 10px;
-    height: 10px;
-    border-radius: 100%;
-    position: absolute;
-    transform: translateX(5px) scale(0, 0);
+    display: block;
+    width: 0px;
+    height: 0px;
+    border-radius: 50%;
+    background-color: ${colors.brand.light};
     transition: 200ms all ease;
   }
-  &:not(:last-child) {
-    margin-right: ${spacing.medium};
-  }
-`;
-
-const RadioButtonGroupInput = styled.input`
-  opacity: 0;
-  position: absolute;
-  width: auto;
-  &:hover + ${RadioButtonGroupLabel} {
-    outline: 1px dotted #212121;
-    outline: -webkit-focus-ring-color auto 5px;
-    &:after {
-      transform: translateX(5px) scale(1, 1);
-      background: ${colors.brand.tertiary};
+  &:hover,
+  &:focus-visible,
+  &[data-state='checked'] {
+    &::after {
+      width: ${spacing.small};
+      height: ${spacing.small};
     }
   }
-  // emotion does not seem to support several selectors combined with targeting another emotion component
-  // so we duplicate the css for :hover and :focus.
-  &:focus + ${RadioButtonGroupLabel} {
-    outline: 1px dotted #212121;
-    outline: -webkit-focus-ring-color auto 5px;
-    &:after {
-      transform: translateX(5px) scale(1, 1);
-      background: ${colors.brand.tertiary};
+  &[data-disabled] {
+    &::after {
+      width: 0px;
+      height: 0px;
     }
   }
-  &:checked + ${RadioButtonGroupLabel} {
-    &:before {
-      border-color: ${colors.brand.primary};
-    }
-    &:after {
-      transform: translateX(5px) scale(1, 1);
-      background: ${colors.brand.primary};
+
+  &[data-state='checked'] {
+    &::after {
+      background-color: ${colors.brand.primary};
     }
   }
 `;
 
-class RadioButtonGroup extends Component<Props, State> {
-  private readonly uuid?: string;
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      selected: props.selected || props.options[0].value,
-    };
-    this.handleOnChange = this.handleOnChange.bind(this);
-    this.uuid = this.props.uniqeIds ? uuid() : undefined;
+export const StyledRadioButtonGroupRoot = styled(Root)`
+  padding: ${spacing.small} 0;
+  gap: ${spacing.small};
+  display: flex;
+  font-family: ${fonts.sans};
+  align-items: center;
+  &[data-direction='vertical'] {
+    flex-direction: column;
+    align-items: unset;
   }
+`;
 
-  handleOnChange(e: ChangeEvent<HTMLInputElement>) {
-    this.setState({
-      selected: e.target.value,
-    });
-    this.props.onChange(e.target.value);
-  }
+interface ItemProps extends RadioGroupItemProps {}
 
-  render() {
-    return (
-      <section>
-        <RadioButtonGroupWrapper role="radiogroup">
-          {this.props.label && <RadioButtonGroupLabelHeading>{this.props.label}</RadioButtonGroupLabelHeading>}
-          {this.props.options.map((option) => {
-            const id = this.uuid ? `${this.uuid}_${option.value}` : option.value;
-            return (
-              <Fragment key={option.value}>
-                <RadioButtonGroupInput
-                  disabled={option.disabled}
-                  aria-checked={this.state.selected === option.value}
-                  checked={this.state.selected === option.value}
-                  type="radio"
-                  value={option.value}
-                  id={id}
-                  name={id}
-                  onChange={this.handleOnChange}
-                />
-                <RadioButtonGroupLabel htmlFor={id}>{option.title}</RadioButtonGroupLabel>
-              </Fragment>
-            );
-          })}
-        </RadioButtonGroupWrapper>
-      </section>
-    );
-  }
+export const RadioGroupItem = ({ value, disabled, id, title, className }: ItemProps) => {
+  return (
+    <RadioButtonWrapper key={value} className={className}>
+      <StyledRadioGroupItem disabled={disabled} value={value} id={id}>
+        <RadioButtonIndicator forceMount />
+      </StyledRadioGroupItem>
+      <RadioButtonGroupLabel element="label" textStyle="content" margin="none" htmlFor={id} data-disabled={disabled}>
+        {title}
+      </RadioButtonGroupLabel>
+    </RadioButtonWrapper>
+  );
+};
+
+interface RootProps extends RadioGroupProps {
+  direction?: 'horizontal' | 'vertical';
 }
 
+export const RadioButtonGroupRoot = ({ children, direction, ...rest }: RootProps) => {
+  return (
+    <StyledRadioButtonGroupRoot data-direction={direction} {...rest}>
+      {children}
+    </StyledRadioButtonGroupRoot>
+  );
+};
+
+const RadioButtonGroup = ({
+  selected,
+  options,
+  label,
+  uniqeIds,
+  onChange,
+  direction = 'horizontal',
+  className,
+}: Props) => {
+  const uuid = useMemo(() => (uniqeIds ? uuidFunc() : undefined), [uniqeIds]);
+
+  return (
+    <RadioButtonGroupRoot
+      data-direction={direction}
+      value={selected}
+      defaultValue={selected ?? options[0].value}
+      className={className}
+      onValueChange={onChange}
+    >
+      {label && (
+        <GroupLabel element="span" textStyle="content">
+          {label}
+        </GroupLabel>
+      )}
+      {options.map((option) => {
+        const id = uuid ? `${uuid}_${option.value}` : option.value;
+        return (
+          <RadioGroupItem
+            key={option.value}
+            disabled={option.disabled}
+            value={option.value}
+            id={id}
+            title={option.title}
+          />
+        );
+      })}
+    </RadioButtonGroupRoot>
+  );
+};
+
 export default RadioButtonGroup;

package/src/index.ts

@@ -121,16 +121,6 @@ export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';
 
 export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
-export { UserInfo } from './User';
-export type {
-  AffiliationType,
-  FeideGoGroup,
-  FeideGroup,
-  FeideOrg,
-  FeideUserApiType,
-  FeideMembershipType,
-  FeideUser,
-} from './User';
 
 export { default as resourceTypeColor } from './utils/resourceTypeColor';
 

package/es/User/UserInfo.js

@@ -1,114 +0,0 @@
-import _styled from "@emotion/styled/base";
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-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)."; }
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import { parseUserObject } from './parseUserObject';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var InfoList = /*#__PURE__*/_styled("ul", {
-  target: "egwtjgg1",
-  label: "InfoList"
-})("padding:0 0 0 ", spacing.normal, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlVzZXJJbmZvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhMEIiLCJmaWxlIjoiVXNlckluZm8udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBGZWlkZVVzZXJBcGlUeXBlIH0gZnJvbSAnLi9hcGlUeXBlcyc7XG5pbXBvcnQgeyBwYXJzZVVzZXJPYmplY3QgfSBmcm9tICcuL3BhcnNlVXNlck9iamVjdCc7XG5cbmNvbnN0IEluZm9MaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwIDAgMCAke3NwYWNpbmcubm9ybWFsfTtcbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHVzZXI6IEZlaWRlVXNlckFwaVR5cGU7XG59XG5cbmNvbnN0IFNob3J0SW5mb0RpdiA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogMnJlbSBhdXRvO1xuYDtcblxuY29uc3QgaXNUZWFjaGVyID0gKGFmZmlsaWF0aW9uczogRmVpZGVVc2VyQXBpVHlwZVsnZWR1UGVyc29uQWZmaWxpYXRpb24nXSkgPT4gYWZmaWxpYXRpb25zLmluY2x1ZGVzKCdlbXBsb3llZScpO1xuXG5leHBvcnQgY29uc3QgVXNlckluZm8gPSAoeyB1c2VyIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBwYXJzZWRVc2VyID0gcGFyc2VVc2VyT2JqZWN0KHVzZXIpO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIHtcbiAgICAgICAgPHA+XG4gICAgICAgICAge3QoJ3VzZXIubG9nZ2VkSW5BcycsIHtcbiAgICAgICAgICAgIHJvbGU6IHQoYHVzZXIucm9sZS4ke2lzVGVhY2hlcihwYXJzZWRVc2VyLmVkdVBlcnNvbkFmZmlsaWF0aW9uKSA/ICdlbXBsb3llZScgOiAnc3R1ZGVudCd9YCksXG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvcD5cbiAgICAgIH1cblxuICAgICAgPFNob3J0SW5mb0Rpdj5cbiAgICAgICAgPGRpdiBkYXRhLWhqLXN1cHByZXNzPlxuICAgICAgICAgIHt0KCd1c2VyLnVzZXJuYW1lJyl9OiA8Yj57dXNlci51aWR9PC9iPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBkYXRhLWhqLXN1cHByZXNzPlxuICAgICAgICAgIHt0KCd1c2VyLm5hbWUnKX06IDxiPnt1c2VyLmRpc3BsYXlOYW1lfTwvYj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgZGF0YS1oai1zdXBwcmVzcz5cbiAgICAgICAgICB7dCgndXNlci5tYWlsJyl9OiA8Yj57dXNlci5tYWlsPy5qb2luKCcsICcpfTwvYj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIHt1c2VyLnByZWZlcnJlZExhbmd1YWdlICYmIChcbiAgICAgICAgICA8ZGl2IGRhdGEtaGotc3VwcHJlc3M+XG4gICAgICAgICAgICB7dCgndXNlci5wcmVmZXJyZWRMYW5ndWFnZScpfTogPGI+e3QoYGxhbmd1YWdlcy4ke3VzZXIucHJlZmVycmVkTGFuZ3VhZ2V9YCl9PC9iPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApfVxuICAgICAgICB7dXNlci5tb2JpbGUgJiYgKFxuICAgICAgICAgIDxkaXYgZGF0YS1oai1zdXBwcmVzcz5cbiAgICAgICAgICAgIHt0KCd1c2VyLm1vYmlsZScpfTogPGI+e3VzZXIubW9iaWxlfTwvYj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvU2hvcnRJbmZvRGl2PlxuXG4gICAgICA8SW5mb0xpc3QgZGF0YS1oai1zdXBwcmVzcz5cbiAgICAgICAge3BhcnNlZFVzZXIub3JnYW5pemF0aW9ucy5tYXAoKG9yZykgPT4gKFxuICAgICAgICAgIDxsaSBrZXk9e29yZy5pZH0+XG4gICAgICAgICAgICB7YCR7b3JnLmRpc3BsYXlOYW1lfSR7b3JnLm1lbWJlcnNoaXAucHJpbWFyeVNjaG9vbCA/IGAgKCR7dCgndXNlci5wcmltYXJ5U2Nob29sJyl9KWAgOiAnJ31gfVxuICAgICAgICAgICAgPEluZm9MaXN0PlxuICAgICAgICAgICAgICB7T2JqZWN0LmVudHJpZXMob3JnLmNoaWxkcmVuKS5tYXAoKFtncm91cFR5cGUsIHZhbF0pID0+IHtcbiAgICAgICAgICAgICAgICBpZiAodmFsLmxlbmd0aCA8IDEpIHJldHVybiBudWxsO1xuICAgICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgICA8bGkga2V5PXtncm91cFR5cGV9PlxuICAgICAgICAgICAgICAgICAgICB7dChgdXNlci5ncm91cFR5cGVzLiR7Z3JvdXBUeXBlfWApfVxuICAgICAgICAgICAgICAgICAgICA8SW5mb0xpc3Q+XG4gICAgICAgICAgICAgICAgICAgICAge3ZhbC5tYXAoKGdyb3VwKSA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8bGkga2V5PXtncm91cC5pZH0+e2Ake2dyb3VwLmRpc3BsYXlOYW1lfSR7Z3JvdXAuZ3JlcCA/IGAgKCR7Z3JvdXAuZ3JlcC5jb2RlfSlgIDogJyd9YH08L2xpPlxuICAgICAgICAgICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgICAgICAgICA8L0luZm9MaXN0PlxuICAgICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgIDwvSW5mb0xpc3Q+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgKSl9XG4gICAgICA8L0luZm9MaXN0PlxuICAgICAge3BhcnNlZFVzZXIuZ3JlcENvZGVzLmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICA8SW5mb0xpc3QgZGF0YS1oai1zdXBwcmVzcz5cbiAgICAgICAgICA8bGkga2V5PVwiZ3JlcENvZGVzXCI+XG4gICAgICAgICAgICB7dCgndXNlci5ncm91cFR5cGVzLmdyZXBDb2RlJyl9XG4gICAgICAgICAgICA8SW5mb0xpc3Q+XG4gICAgICAgICAgICAgIHtwYXJzZWRVc2VyLmdyZXBDb2Rlcy5tYXAoKGNvZGUpID0+IChcbiAgICAgICAgICAgICAgICA8bGkga2V5PXtjb2RlLmlkfT57YCR7Y29kZS5kaXNwbGF5TmFtZX0gKCR7Y29kZS5jb2RlfSlgfTwvbGk+XG4gICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgPC9JbmZvTGlzdD5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICA8L0luZm9MaXN0PlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */"));
-var ShortInfoDiv = /*#__PURE__*/_styled("div", {
-  target: "egwtjgg0",
-  label: "ShortInfoDiv"
-})(process.env.NODE_ENV === "production" ? {
-  name: "xsvpxu",
-  styles: "margin:2rem auto"
-} : {
-  name: "xsvpxu",
-  styles: "margin:2rem auto",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlVzZXJJbmZvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQitCIiwiZmlsZSI6IlVzZXJJbmZvLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgRmVpZGVVc2VyQXBpVHlwZSB9IGZyb20gJy4vYXBpVHlwZXMnO1xuaW1wb3J0IHsgcGFyc2VVc2VyT2JqZWN0IH0gZnJvbSAnLi9wYXJzZVVzZXJPYmplY3QnO1xuXG5jb25zdCBJbmZvTGlzdCA9IHN0eWxlZC51bGBcbiAgcGFkZGluZzogMCAwIDAgJHtzcGFjaW5nLm5vcm1hbH07XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICB1c2VyOiBGZWlkZVVzZXJBcGlUeXBlO1xufVxuXG5jb25zdCBTaG9ydEluZm9EaXYgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW46IDJyZW0gYXV0bztcbmA7XG5cbmNvbnN0IGlzVGVhY2hlciA9IChhZmZpbGlhdGlvbnM6IEZlaWRlVXNlckFwaVR5cGVbJ2VkdVBlcnNvbkFmZmlsaWF0aW9uJ10pID0+IGFmZmlsaWF0aW9ucy5pbmNsdWRlcygnZW1wbG95ZWUnKTtcblxuZXhwb3J0IGNvbnN0IFVzZXJJbmZvID0gKHsgdXNlciB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgcGFyc2VkVXNlciA9IHBhcnNlVXNlck9iamVjdCh1c2VyKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICB7XG4gICAgICAgIDxwPlxuICAgICAgICAgIHt0KCd1c2VyLmxvZ2dlZEluQXMnLCB7XG4gICAgICAgICAgICByb2xlOiB0KGB1c2VyLnJvbGUuJHtpc1RlYWNoZXIocGFyc2VkVXNlci5lZHVQZXJzb25BZmZpbGlhdGlvbikgPyAnZW1wbG95ZWUnIDogJ3N0dWRlbnQnfWApLFxuICAgICAgICAgIH0pfVxuICAgICAgICA8L3A+XG4gICAgICB9XG5cbiAgICAgIDxTaG9ydEluZm9EaXY+XG4gICAgICAgIDxkaXYgZGF0YS1oai1zdXBwcmVzcz5cbiAgICAgICAgICB7dCgndXNlci51c2VybmFtZScpfTogPGI+e3VzZXIudWlkfTwvYj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgZGF0YS1oai1zdXBwcmVzcz5cbiAgICAgICAgICB7dCgndXNlci5uYW1lJyl9OiA8Yj57dXNlci5kaXNwbGF5TmFtZX08L2I+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGRhdGEtaGotc3VwcHJlc3M+XG4gICAgICAgICAge3QoJ3VzZXIubWFpbCcpfTogPGI+e3VzZXIubWFpbD8uam9pbignLCAnKX08L2I+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB7dXNlci5wcmVmZXJyZWRMYW5ndWFnZSAmJiAoXG4gICAgICAgICAgPGRpdiBkYXRhLWhqLXN1cHByZXNzPlxuICAgICAgICAgICAge3QoJ3VzZXIucHJlZmVycmVkTGFuZ3VhZ2UnKX06IDxiPnt0KGBsYW5ndWFnZXMuJHt1c2VyLnByZWZlcnJlZExhbmd1YWdlfWApfTwvYj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgICAge3VzZXIubW9iaWxlICYmIChcbiAgICAgICAgICA8ZGl2IGRhdGEtaGotc3VwcHJlc3M+XG4gICAgICAgICAgICB7dCgndXNlci5tb2JpbGUnKX06IDxiPnt1c2VyLm1vYmlsZX08L2I+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICl9XG4gICAgICA8L1Nob3J0SW5mb0Rpdj5cblxuICAgICAgPEluZm9MaXN0IGRhdGEtaGotc3VwcHJlc3M+XG4gICAgICAgIHtwYXJzZWRVc2VyLm9yZ2FuaXphdGlvbnMubWFwKChvcmcpID0+IChcbiAgICAgICAgICA8bGkga2V5PXtvcmcuaWR9PlxuICAgICAgICAgICAge2Ake29yZy5kaXNwbGF5TmFtZX0ke29yZy5tZW1iZXJzaGlwLnByaW1hcnlTY2hvb2wgPyBgICgke3QoJ3VzZXIucHJpbWFyeVNjaG9vbCcpfSlgIDogJyd9YH1cbiAgICAgICAgICAgIDxJbmZvTGlzdD5cbiAgICAgICAgICAgICAge09iamVjdC5lbnRyaWVzKG9yZy5jaGlsZHJlbikubWFwKChbZ3JvdXBUeXBlLCB2YWxdKSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKHZhbC5sZW5ndGggPCAxKSByZXR1cm4gbnVsbDtcbiAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgPGxpIGtleT17Z3JvdXBUeXBlfT5cbiAgICAgICAgICAgICAgICAgICAge3QoYHVzZXIuZ3JvdXBUeXBlcy4ke2dyb3VwVHlwZX1gKX1cbiAgICAgICAgICAgICAgICAgICAgPEluZm9MaXN0PlxuICAgICAgICAgICAgICAgICAgICAgIHt2YWwubWFwKChncm91cCkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgPGxpIGtleT17Z3JvdXAuaWR9PntgJHtncm91cC5kaXNwbGF5TmFtZX0ke2dyb3VwLmdyZXAgPyBgICgke2dyb3VwLmdyZXAuY29kZX0pYCA6ICcnfWB9PC9saT5cbiAgICAgICAgICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgICAgICAgICAgPC9JbmZvTGlzdD5cbiAgICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICA8L0luZm9MaXN0PlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgICkpfVxuICAgICAgPC9JbmZvTGlzdD5cbiAgICAgIHtwYXJzZWRVc2VyLmdyZXBDb2Rlcy5sZW5ndGggPiAwICYmIChcbiAgICAgICAgPEluZm9MaXN0IGRhdGEtaGotc3VwcHJlc3M+XG4gICAgICAgICAgPGxpIGtleT1cImdyZXBDb2Rlc1wiPlxuICAgICAgICAgICAge3QoJ3VzZXIuZ3JvdXBUeXBlcy5ncmVwQ29kZScpfVxuICAgICAgICAgICAgPEluZm9MaXN0PlxuICAgICAgICAgICAgICB7cGFyc2VkVXNlci5ncmVwQ29kZXMubWFwKChjb2RlKSA9PiAoXG4gICAgICAgICAgICAgICAgPGxpIGtleT17Y29kZS5pZH0+e2Ake2NvZGUuZGlzcGxheU5hbWV9ICgke2NvZGUuY29kZX0pYH08L2xpPlxuICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIDwvSW5mb0xpc3Q+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgPC9JbmZvTGlzdD5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var isTeacher = function isTeacher(affiliations) {
-  return affiliations.includes('employee');
-};
-export var UserInfo = function UserInfo(_ref) {
-  var _user$mail;
-  var user = _ref.user;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var parsedUser = parseUserObject(user);
-  return _jsxs("div", {
-    children: [_jsx("p", {
-      children: t('user.loggedInAs', {
-        role: t("user.role.".concat(isTeacher(parsedUser.eduPersonAffiliation) ? 'employee' : 'student'))
-      })
-    }), _jsxs(ShortInfoDiv, {
-      children: [_jsxs("div", {
-        "data-hj-suppress": true,
-        children: [t('user.username'), ": ", _jsx("b", {
-          children: user.uid
-        })]
-      }), _jsxs("div", {
-        "data-hj-suppress": true,
-        children: [t('user.name'), ": ", _jsx("b", {
-          children: user.displayName
-        })]
-      }), _jsxs("div", {
-        "data-hj-suppress": true,
-        children: [t('user.mail'), ": ", _jsx("b", {
-          children: (_user$mail = user.mail) === null || _user$mail === void 0 ? void 0 : _user$mail.join(', ')
-        })]
-      }), user.preferredLanguage && _jsxs("div", {
-        "data-hj-suppress": true,
-        children: [t('user.preferredLanguage'), ": ", _jsx("b", {
-          children: t("languages.".concat(user.preferredLanguage))
-        })]
-      }), user.mobile && _jsxs("div", {
-        "data-hj-suppress": true,
-        children: [t('user.mobile'), ": ", _jsx("b", {
-          children: user.mobile
-        })]
-      })]
-    }), _jsx(InfoList, {
-      "data-hj-suppress": true,
-      children: parsedUser.organizations.map(function (org) {
-        return _jsxs("li", {
-          children: ["".concat(org.displayName).concat(org.membership.primarySchool ? " (".concat(t('user.primarySchool'), ")") : ''), _jsx(InfoList, {
-            children: Object.entries(org.children).map(function (_ref2) {
-              var _ref3 = _slicedToArray(_ref2, 2),
-                groupType = _ref3[0],
-                val = _ref3[1];
-              if (val.length < 1) return null;
-              return _jsxs("li", {
-                children: [t("user.groupTypes.".concat(groupType)), _jsx(InfoList, {
-                  children: val.map(function (group) {
-                    return _jsx("li", {
-                      children: "".concat(group.displayName).concat(group.grep ? " (".concat(group.grep.code, ")") : '')
-                    }, group.id);
-                  })
-                })]
-              }, groupType);
-            })
-          })]
-        }, org.id);
-      })
-    }), parsedUser.grepCodes.length > 0 && _jsx(InfoList, {
-      "data-hj-suppress": true,
-      children: _jsxs("li", {
-        children: [t('user.groupTypes.grepCode'), _jsx(InfoList, {
-          children: parsedUser.grepCodes.map(function (code) {
-            return _jsx("li", {
-              children: "".concat(code.displayName, " (").concat(code.code, ")")
-            }, code.id);
-          })
-        })]
-      }, "grepCodes")
-    })]
-  });
-};

package/es/User/apiTypes.js

@@ -1 +0,0 @@
-export {};

package/es/User/index.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2021-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { UserInfo } from './UserInfo';
-export { UserInfo };