@ndla/ui 46.0.2 → 46.1.0

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 };

package/es/User/parseUserObject.js

@@ -1,101 +0,0 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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; }
-/**
- * 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 groupBy from 'lodash/groupBy';
-/**
- * The keys come from:
- *  https://docs.feide.no/reference/apis/groups_api/groups_data_model/primary_and_secondary_education_groups.html?highlight=gogroup#specific-attributes-for-fc-gogroup
- */
-var goGroupTypeMap = {
-  a: 'other',
-  b: 'basic',
-  u: 'teaching'
-};
-
-/**
- * @param groups GoGroups to be mapped to specific GoGroupType
- * @returns GoGroups mapped to GoGroupType. basic, teaching and other..
- */
-var createGroupings = function createGroupings(groups) {
-  return groups.reduce(function (acc, curr) {
-    var type = goGroupTypeMap[curr.go_type];
-    if (!acc[type]) return acc;
-    acc[type] = acc[type].concat(curr);
-    return acc;
-  }, {
-    basic: [],
-    teaching: [],
-    other: []
-  });
-};
-
-/**
- * @param groups GoGroups to be mapped to root/child relations.
- * @returns An object containing root groups mapped with children.
- */
-var parseOrgs = function parseOrgs(groups) {
-  var _groups$reduce = groups.reduce(function (acc, curr) {
-      if (curr.type === 'fc:org') {
-        return [acc[0].concat(curr), acc[1], acc[2]];
-      } else if (curr.type === 'fc:gogroup') {
-        return [acc[0], acc[1].concat(curr), acc[2]];
-      } else {
-        return [acc[0], acc[1], acc[2].concat(curr)];
-      }
-    }, [[], [], []]),
-    _groups$reduce2 = _slicedToArray(_groups$reduce, 3),
-    roots = _groups$reduce2[0],
-    children = _groups$reduce2[1],
-    grep = _groups$reduce2[2];
-  var childrenByParentId = groupBy(children, function (c) {
-    return c.parent;
-  });
-  var rootsWithChildren = roots.map(function (root) {
-    var _childrenByParentId$r;
-    return _objectSpread(_objectSpread({}, root), {}, {
-      children: (_childrenByParentId$r = childrenByParentId[root.id]) !== null && _childrenByParentId$r !== void 0 ? _childrenByParentId$r : []
-    });
-  });
-  return {
-    grepCodes: grep,
-    roots: rootsWithChildren.map(function (root) {
-      return _objectSpread(_objectSpread({}, root), {}, {
-        children: createGroupings(root.children)
-      });
-    })
-  };
-};
-
-/**
- * @param user A user object coming from the API
- * @returns A user object parsed in a presentable way to be handled by i.e UserInfo component.
- */
-export var parseUserObject = function parseUserObject(user) {
-  var _parseOrgs = parseOrgs(user.groups),
-    roots = _parseOrgs.roots,
-    grepCodes = _parseOrgs.grepCodes;
-  return {
-    uid: user.uid,
-    eduPersonAffiliation: user.eduPersonAffiliation,
-    displayName: user.displayName,
-    mail: user.mail,
-    organizations: roots,
-    grepCodes: grepCodes
-  };
-};

package/lib/User/UserInfo.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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 { FeideUserApiType } from './apiTypes';
-interface Props {
-    user: FeideUserApiType;
-}
-export declare const UserInfo: ({ user }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};