Merge branch 'main' into chore/storefront-clean-layouts

digdir · Sep 25, 2023 · 28b3a5a · 28b3a5a
2 parents 00072e8 + bfd814c
commit 28b3a5a
Show file tree

Hide file tree

Showing 106 changed files with 16,438 additions and 16,710 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -46,6 +46,7 @@ module.exports = {
     'react/jsx-no-bind': 'off',
     'react/display-name': 'off',
     'import/no-unresolved': 'error',
+    'import/namespace': ['error', { allowComputed: true }],
     'import/order': [
       'warn',
       {

diff --git a/design-tokens/Base/Semantic.json b/design-tokens/Base/Semantic.json
@@ -856,6 +856,20 @@
       }
     },
     "error_message": {
+      "large": {
+        "value": {
+          "fontFamily": "{fontFamilies.inter}",
+          "fontWeight": "{fontWeights.regular}",
+          "lineHeight": "{lineHeights.300}",
+          "fontSize": "{font-size.f1}",
+          "letterSpacing": "{letterSpacing.1}",
+          "paragraphSpacing": "{paragraphSpacing.0}",
+          "paragraphIndent": "{paragraphIndent.0}",
+          "textCase": "{textCase.none}",
+          "textDecoration": "{textDecoration.none}"
+        },
+        "type": "typography"
+      },
       "medium": {
         "value": {
           "fontFamily": "{fontFamilies.inter}",

diff --git a/packages/Overview.mdx b/packages/Overview.mdx
@@ -40,8 +40,8 @@ V1 er klar når følgende komponenter er markert som "✅ Felles":
 | [Table](/docs/altinn-table--docs)                   | 🔵 Altinn        | Figma - Table                                                                                                                                                 | [Github - Table](https://github.com/digdir/designsystem/issues/90)          |
 | [Tabs](/docs/altinn-tabs--docs)                     | 🔵 Altinn        | [Figma - Tabs](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=9551%3A54208&t=Rlfq5UyNZBL69dFr-1)                    | [Github - Tabs](https://github.com/digdir/designsystem/issues/91)           |
 | [Tag](/docs/felles-tag--docs)                       | ✅ Felles        | [Figma - Tag](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=10185%3A59053&t=7Q2N4sUdQGhFZrPh-1)                                | [Github - Tag](https://github.com/digdir/designsystem/issues/322)           |
-| [Textarea](/docs/altinn-textarea--docs)             | 🔵 Altinn        | [Figma - Text area](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21873&t=7Q2N4sUdQGhFZrPh-1)                           | [Github - Textarea](https://github.com/digdir/designsystem/issues/323)      |
-| [Textfield](/docs/altinn-textfield--docs)           | 🔵 Altinn        | [Figma - Text Field](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A22228&t=7Q2N4sUdQGhFZrPh-1)                          | [Github - Textfield](https://github.com/digdir/designsystem/issues/92)      |
+| [Textarea](/docs/felles-textarea--docs)             | ✅ Felles        | [Figma - Text area](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21873&t=7Q2N4sUdQGhFZrPh-1)                           | [Github - Textarea](https://github.com/digdir/designsystem/issues/323)      |
+| [Textfield](/docs/felles-textfield--docs)           | ✅ Felles        | [Figma - Text Field](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A22228&t=7Q2N4sUdQGhFZrPh-1)                          | [Github - Textfield](https://github.com/digdir/designsystem/issues/92)      |
 | [ToggleGroup](/docs/altinn-togglebuttongroup--docs) | 🔵 Altinn        | Figma - Toggle Group                                                                                                                                          | [Github - ToggleGroup](https://github.com/digdir/designsystem/issues/304)   |
 | Tooltip                                             | 🚸 Ikke påbegynt | Figma - Tooltip                                                                                                                                               | [Github - Tooltip](https://github.com/digdir/designsystem/issues/93)        |
 | [Typography](/docs/felles-typography--docs)         | ✅ Felles        | [Figma - Typography](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=9219%3A49405&t=7Q2N4sUdQGhFZrPh-1)                          | [Github - Typography](https://github.com/digdir/designsystem/issues/324)    |

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.26.0](https://github.com/digdir/designsystem/compare/@digdir/[email protected]...@digdir/[email protected]) (2023-09-22)
+
+### Bug Fixes
+
+- **Textfield:** :lipstick: Style adjustments after feedback ([#852](https://github.com/digdir/designsystem/issues/852)) ([4544f1e](https://github.com/digdir/designsystem/commit/4544f1e96fb90c00360377b2a18998e9bce36f16))
+
+### Features
+
+- **Textarea:** :sparkles: New `Textarea` component ([#851](https://github.com/digdir/designsystem/issues/851)) ([9d9c3ab](https://github.com/digdir/designsystem/commit/9d9c3ab390cea40bd3137845fd2b7fb251c84b7a))
+- **TextArea:** :wastebasket: Change to Legacy ([#853](https://github.com/digdir/designsystem/issues/853)) ([9da973f](https://github.com/digdir/designsystem/commit/9da973f9db34576ad89f5d31f07ccfc933f84ee7))
+
+## [0.25.1](https://github.com/digdir/designsystem/compare/@digdir/[email protected]...@digdir/[email protected]) (2023-09-22)
+
+### Bug Fixes
+
+- **Textfield:** Prop typo ([#848](https://github.com/digdir/designsystem/issues/848)) ([0c59b86](https://github.com/digdir/designsystem/commit/0c59b86f661222e0021311cd5eba6c7aa429ea8c))
+
+# [0.25.0](https://github.com/digdir/designsystem/compare/@digdir/[email protected]...@digdir/[email protected]) (2023-09-21)
+
+### Features
+
+- **ErrorMessage:** :sparkles: Add new option to toggle error color ([#836](https://github.com/digdir/designsystem/issues/836)) ([8b177f3](https://github.com/digdir/designsystem/commit/8b177f3f25b3c2075d38f8f5e8a438d8727b5c98))
+- **ErrorMessage:** ✨ Add `large` size ([#840](https://github.com/digdir/designsystem/issues/840)) ([9742abf](https://github.com/digdir/designsystem/commit/9742abf1d002967fdfdb6b3caa8f33bb11a85019))
+- **Fieldset, Switch, Radio, Checkbox:** :sparkles: Add `large` size ([#841](https://github.com/digdir/designsystem/issues/841)) ([4e8052f](https://github.com/digdir/designsystem/commit/4e8052fc6a886b68676ca5de0a47d80eadb93656))
+- **Textfield:** :sparkles: New `Textfield` component ([#816](https://github.com/digdir/designsystem/issues/816)) ([0c14cfa](https://github.com/digdir/designsystem/commit/0c14cfa3c6add379ada2f5e11dd2b6a0de05aa56))
+- **TextField:** 🗑️ Change to Legacy ([#838](https://github.com/digdir/designsystem/issues/838)) ([c3d6d2d](https://github.com/digdir/designsystem/commit/c3d6d2d684ff764fe96a92e1852ddf115cf1ec62))
+
+## [0.24.2](https://github.com/digdir/designsystem/compare/@digdir/[email protected]...@digdir/[email protected]) (2023-09-19)
+
+### Bug Fixes
+
+- **Switch:** :bug: Adher to passed `checked` & `defaultChecked` props ([#832](https://github.com/digdir/designsystem/issues/832)) ([13a4577](https://github.com/digdir/designsystem/commit/13a45774943d01c6ea3cb9e7056b1686dfa9a358))
+
+## [0.24.1](https://github.com/digdir/designsystem/compare/@digdir/[email protected]...@digdir/[email protected]) (2023-09-18)
+
+### Bug Fixes
+
+- **Accordion:** hide content in Accordions from screen readers when Accordion is closed ([#815](https://github.com/digdir/designsystem/issues/815)) ([eea59af](https://github.com/digdir/designsystem/commit/eea59af9d09c59ba8da734a0b5cf60bd704661d1))
+- **Radio, Checkbox, Button, Chip.Toggle:** Remove sticky hover on touch devices ([#803](https://github.com/digdir/designsystem/issues/803)) ([a4be791](https://github.com/digdir/designsystem/commit/a4be7918b49a607ebfa7042b3aa2d8e2f798a016))
+- **Radio, Checkbox, Switch:** :bug: Remove z-index on selection control icon ([#798](https://github.com/digdir/designsystem/issues/798)) ([6c1db8b](https://github.com/digdir/designsystem/commit/6c1db8bf213e62eb9b788ac82e3114e90cd9f052))
+
 # [0.24.0](https://github.com/digdir/designsystem/compare/@digdir/[email protected]...@digdir/[email protected]) (2023-08-31)
 
 ### Features

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/design-system-react",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@altinn/figma-design-tokens": "^6.0.1",
-    "@digdir/design-system-tokens": "^0.5.0",
+    "@digdir/design-system-tokens": "^0.7.0",
     "@floating-ui/react": "0.25.2",
     "@navikt/aksel-icons": "^3.2.4",
     "react-number-format": "5.2.2"

diff --git a/packages/react/src/components/TextArea/TextArea.mdx b/packages/react/src/components/TextArea/TextArea.mdx
diff --git a/packages/react/src/components/TextArea/index.ts b/packages/react/src/components/TextArea/index.ts
diff --git a/packages/react/src/components/TextField/index.ts b/packages/react/src/components/TextField/index.ts
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
@@ -3,13 +3,23 @@
   --fdsc-bottom-spacing: var(--fds-spacing-5);
 
   margin: 0;
+}
+
+.errorMessage.error {
   color: var(--fds-semantic-text-danger-default);
 }
 
 .errorMessage.spacing {
   margin-bottom: var(--fdsc-bottom-spacing);
 }
 
+.errorMessage.large {
+  --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+  font: var(--fds-typography-error_message-large);
+  font-family: var(--fdsc-typography-font-family);
+}
+
 .errorMessage.medium {
   --fdsc-bottom-spacing: var(--fds-spacing-5);
 

diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
@@ -16,5 +16,6 @@ export const Preview: Story = {
     children: 'Dette er en beskrivende feilmelding.',
     spacing: false,
     size: 'medium',
+    error: 'true',
   },
 };
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
@@ -8,9 +8,11 @@ import classes from './ErrorMessage.module.css';
 
 export type ErrorMessageProps = {
   /** Changes text sizing */
-  size?: 'xsmall' | 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
   /** Adds margin-bottom */
   spacing?: boolean;
+  /** Toggle error color */
+  error?: boolean;
 } & HTMLAttributes<HTMLParagraphElement>;
 
 /** Use `ErrorMessage` to display text as error message. */
@@ -19,7 +21,14 @@ export const ErrorMessage: OverridableComponent<
   HTMLParagraphElement
 > = forwardRef(
   (
-    { className, size = 'medium', spacing, as: Component = 'p', ...rest },
+    {
+      className,
+      size = 'medium',
+      spacing,
+      as: Component = 'p',
+      error = true,
+      ...rest
+    },
     ref,
   ) => (
     <Component
@@ -31,6 +40,7 @@ export const ErrorMessage: OverridableComponent<
         {
           [classes.spacing]: !!spacing,
         },
+        error && classes.error,
         className,
       )}
     />

diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import utilityClasses from '../../utils/utility.module.css';
+import { ErrorMessage } from '../Typography';
+
+export type CharacterLimitProps = Omit<
+  CharacterCounterProps,
+  'id' | 'value' | 'size'
+>;
+
+type CharacterCounterProps = {
+  /** The message indicating the remaining character limit. */
+  label?: (count: number) => string;
+  /** The description of the maximum character limit for screen readers. */
+  srLabel?: string;
+  /** The maximum allowed character count. */
+  maxCount: number;
+  /** The current value. */
+  value: string;
+  /** The ID of the element that describes the maximum character limit for accessibility purposes. */
+  id: string;
+  /** Text size */
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
+};
+
+const defaultLabel: CharacterCounterProps['label'] = (count) =>
+  count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
+
+const defaultSrLabel = (maxCount: number) =>
+  `Tekstfelt med plass til ${maxCount} tegn`;
+
+export const CharacterCounter = ({
+  label = defaultLabel,
+  srLabel: propsSrLabel,
+  maxCount,
+  value,
+  id,
+  size,
+}: CharacterCounterProps): JSX.Element => {
+  const currentCount = maxCount - value.length;
+  const hasExceededLimit = value.length > maxCount;
+  const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
+
+  return (
+    <>
+      <span
+        className={utilityClasses.visuallyHidden}
+        id={id}
+      >
+        {srLabel}
+      </span>
+      <ErrorMessage
+        as='span'
+        size={size}
+        aria-live={hasExceededLimit ? 'polite' : 'off'}
+        error={hasExceededLimit}
+      >
+        {label(currentCount)}
+      </ErrorMessage>
+    </>
+  );
+};
diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -5,17 +5,15 @@ import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { Label, Paragraph, ErrorMessage } from '../../Typography';
 import utilityclasses from '../../../utils/utility.module.css';
+import type { FormFieldProps } from '../useFormField';
 
 import { useFieldset } from './useFieldset';
 import classes from './Fieldset.module.css';
 
-export type FieldsetContextType = {
-  error?: ReactNode;
-  errorId?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: 'xsmall' | 'small' | 'medium';
-};
+export type FieldsetContextType = Pick<
+  FormFieldProps,
+  'error' | 'errorId' | 'disabled' | 'readOnly' | 'size'
+>;
 
 export const FieldsetContext = createContext<FieldsetContextType | null>(null);
 
@@ -28,14 +26,13 @@ export type FieldsetProps = {
   error?: ReactNode;
   /** The legend of the fieldset. */
   legend?: ReactNode;
-  /** The size of the fieldset. */
-  size?: 'xsmall' | 'small' | 'medium';
   /** Toggle `readOnly` on fieldset context.
    * @note This does not prevent fieldset values from being submited */
   readOnly?: boolean;
   /** Visually hide `legend` and `description` (still available for screen readers)  */
   hideLegend?: boolean;
-} & FieldsetHTMLAttributes<HTMLFieldSetElement>;
+} & Pick<FormFieldProps, 'size'> &
+  FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {

diff --git a/packages/react/src/components/form/Switch/useSwitch.ts b/packages/react/src/components/form/Switch/useSwitch.ts
@@ -33,14 +33,12 @@ export const useSwitch: UseCheckbox = (props) => {
       ...inputProps,
       readOnly,
       type: 'checkbox',
-      defaultChecked:
-        checkboxGroup?.defaultValue === undefined
-          ? undefined
-          : checkboxGroup?.defaultValue.includes(propsValue),
-      checked:
-        checkboxGroup?.value === undefined
-          ? undefined
-          : checkboxGroup?.value.includes(propsValue),
+      defaultChecked: checkboxGroup?.defaultValue
+        ? checkboxGroup?.defaultValue.includes(propsValue)
+        : props.defaultChecked,
+      checked: checkboxGroup?.value
+        ? checkboxGroup?.value.includes(propsValue)
+        : props.checked,
       onClick: (e) => {
         if (readOnly) {
           e.preventDefault();

diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx
@@ -0,0 +1,22 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../../docs-components';
+import * as TextareaStories from './Textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+<Primary />
+<Controls />
+
+## Antall tegn
+
+<Canvas of={TextareaStories.WithCharacterCounter} />
+
+## Kontrollert
+
+<Canvas of={TextareaStories.Controlled} />
+
+## Full bredde
+
+<Canvas of={TextareaStories.FullWidth} />