@ndla/ui 30.6.0 → 30.7.0

package/lib/index.d.ts

@@ -95,3 +95,4 @@ export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps } from './TreeStructure';
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
+export { default as LetterFilter } from './LetterFilter';

package/lib/index.js

@@ -199,7 +199,8 @@ var _exportNames = {
   SearchResultList: true,
   SearchResultItem: true,
   ActiveFilters: true,
-  ToggleSearchButton: true
+  ToggleSearchButton: true,
+  LetterFilter: true
 };
 Object.defineProperty(exports, "AboutNdlaFilm", {
   enumerable: true,
@@ -759,6 +760,12 @@ Object.defineProperty(exports, "LearningPathWrapper", {
     return _LearningPaths.LearningPathWrapper;
   }
 });
+Object.defineProperty(exports, "LetterFilter", {
+  enumerable: true,
+  get: function get() {
+    return _LetterFilter["default"];
+  }
+});
 Object.defineProperty(exports, "ListResource", {
   enumerable: true,
   get: function get() {
@@ -1458,6 +1465,7 @@ var _SnackBar = require("./SnackBar");
 var _InfoBlock = require("./InfoBlock");
 var _TreeStructure = require("./TreeStructure");
 var _Search = require("./Search");
+var _LetterFilter = _interopRequireDefault(require("./LetterFilter"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.6.0",
+  "version": "30.7.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.9",
-    "@ndla/button": "^5.2.0",
-    "@ndla/carousel": "^2.0.5",
-    "@ndla/core": "^3.0.0",
-    "@ndla/forms": "^4.0.11",
+    "@ndla/button": "^6.0.0",
+    "@ndla/carousel": "^2.0.6",
+    "@ndla/core": "^3.0.1",
+    "@ndla/forms": "^4.0.12",
     "@ndla/hooks": "^1.1.13",
-    "@ndla/icons": "^2.0.5",
-    "@ndla/licenses": "^6.0.5",
-    "@ndla/modal": "^2.1.0",
-    "@ndla/notion": "^4.0.12",
-    "@ndla/safelink": "^3.0.11",
-    "@ndla/switch": "^1.0.0",
-    "@ndla/tabs": "^2.0.7",
-    "@ndla/tooltip": "^3.0.1",
+    "@ndla/icons": "^2.0.6",
+    "@ndla/licenses": "^6.0.6",
+    "@ndla/modal": "^2.1.1",
+    "@ndla/notion": "^4.0.13",
+    "@ndla/safelink": "^3.0.12",
+    "@ndla/switch": "^1.0.1",
+    "@ndla/tabs": "^2.0.8",
+    "@ndla/tooltip": "^3.0.2",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.7",
     "@reach/menu-button": "^0.16.2",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e1afd33a2d6aec21ea78153251643f8a79164c4e"
+  "gitHead": "ca95292ccece036a5da6c3d4b5c494b35171a71f"
 }

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+import React from 'react';
+import { defaultParameters } from '../../../designmanual/stories/defaults';
+import LetterFilter from './LetterFilter';
+
+export default {
+  title: 'Enkle komponenter/LetterFilter',
+  component: LetterFilter,
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    enabledLetters: ['a', 'c'],
+    onChange: (value?: string) => {},
+  },
+} as ComponentMeta<typeof LetterFilter>;
+
+export const LetterFilterStory: ComponentStory<typeof LetterFilter> = (args) => {
+  const [, updateArgs] = useArgs();
+
+  return <LetterFilter {...args} onChange={(val) => updateArgs({ value: val })} />;
+};
+
+LetterFilterStory.storyName = 'LetterFilter';

package/src/LetterFilter/LetterFilter.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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 styled from '@emotion/styled';
+import React, { useMemo } from 'react';
+import { colors, fonts, spacing } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+import { IconButtonV2 as IconButton } from '@ndla/button';
+import { alphabet } from './alphabet';
+
+const StyledUL = styled.ul`
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${spacing.xsmall};
+`;
+
+const StyledButton = styled(IconButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${spacing.normal};
+  height: ${spacing.normal};
+  padding: 0;
+  ${fonts.sizes(18)};
+  && {
+    font-weight: ${fonts.weight.semibold};
+  }
+
+  :disabled {
+    pointer-events: none;
+    color: ${colors.brand.light};
+  }
+`;
+
+interface Props {
+  value?: string | undefined;
+  onChange: (value?: string) => void;
+  enabledLetters: string[];
+}
+
+const LetterFilter = ({ value, onChange, enabledLetters }: Props) => {
+  const { t } = useTranslation();
+  const uppercaseLetters = useMemo(() => enabledLetters.map((letter) => letter.toUpperCase()), [enabledLetters]);
+
+  return (
+    <StyledUL>
+      {alphabet.map((letter) => {
+        const disabled = !uppercaseLetters.includes(letter.toUpperCase());
+        const selected = letter.toUpperCase() === value?.toUpperCase();
+        return (
+          <li key={letter}>
+            <StyledButton
+              onClick={() => (selected ? onChange(undefined) : onChange(letter))}
+              aria-label={t('listview.filters.alphabet.letterFilter', { letter })}
+              variant={!selected ? 'ghost' : undefined}
+              colorTheme={!selected ? 'lighter' : 'primary'}
+              disabled={disabled}
+              size="xsmall">
+              {letter}
+            </StyledButton>
+          </li>
+        );
+      })}
+    </StyledUL>
+  );
+};
+
+export default LetterFilter;

package/src/LetterFilter/alphabet.ts

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ */
+
+export const alphabet = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
+  'Æ',
+  'Ø',
+  'Å',
+];

package/src/LetterFilter/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 LetterFilter from './LetterFilter';
+
+export default LetterFilter;

package/src/User/apiTypes.ts

@@ -80,4 +80,5 @@ export interface FeideUser {
 export interface FeideUserApiType extends FeideUser {
   groups: FeideGroup[];
   primarySchool?: FeideGroup;
+  baseOrg?: FeideGroup;
 }

package/src/index.ts

@@ -254,3 +254,4 @@ export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps } from './TreeStructure';
 
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
+export { default as LetterFilter } from './LetterFilter';