Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.6

.specifyrc.json

@@ -0,0 +1,57 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "updated-specify-tokens",
+  "base": "master",
+  "rules": [
+    {
+      "name": "Specify / Icons",
+      "path": "@navikt/ds-icons/svg",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "name-assets-files-by-pattern",
+          "options": {
+            "pattern": "{{name}}.{{format}}"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Specify / Icons - metadata",
+      "path": "@navikt/ds-icons/figma-api/metadata-specify.json",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "pick",
+          "options": {
+            "keys": [
+              "name",
+              "createdAt",
+              "updatedAt",
+              "meta.description",
+              "meta.parentFrame",
+              "meta.frame",
+              "page"
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}

@navikt/ds-css/alert.css

@@ -3,18 +3,19 @@
   border: var(--navds-border-default);
 
   /* Padding calculated based on 18px font for 64px tall alert */
-  padding: 1.0625rem var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-4);
   display: grid;
   grid-auto-flow: column;
   justify-content: start;
+  min-height: 64px;
 }
 
 .navds-alert--s {
-  padding: 0.1875rem var(--navds-spacing-4);
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  min-height: 32px;
 }
 
-.navds-alert > svg {
-  align-self: center;
+.navds-alert > span > svg {
   margin-right: var(--navds-spacing-3);
   font-size: 1.5rem;
   background: radial-gradient(
@@ -25,8 +26,15 @@
   );
 }
 
+.navds-alert > div {
+  display: flex;
+  align-items: center;
+}
+
 .navds-alert > span {
-  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  max-height: calc(var(--navds-spacing-8) - 2px);
 }
 
 .navds-alert--error {
@@ -34,7 +42,7 @@
   background-color: var(--navds-color-error-background);
 }
 
-.navds-alert--error > svg {
+.navds-alert--error > span > svg {
   color: var(--navds-color-red-60);
 }
 
@@ -43,7 +51,7 @@
   background-color: var(--navds-color-warning-background);
 }
 
-.navds-alert--warning > svg {
+.navds-alert--warning > span > svg {
   color: var(--navds-color-orange-40);
   background: radial-gradient(
     circle,
@@ -58,7 +66,7 @@
   background-color: var(--navds-color-info-background);
 }
 
-.navds-alert--info > svg {
+.navds-alert--info > span > svg {
   color: var(--navds-color-lightblue-70);
 }
 
@@ -67,6 +75,6 @@
   background-color: var(--navds-color-success-background);
 }
 
-.navds-alert--success > svg {
+.navds-alert--success > span > svg {
   color: var(--navds-color-green-70);
 }

@navikt/ds-css/button.css

@@ -10,14 +10,16 @@
   border-radius: 2px;
   border-style: solid;
   border-width: 2px;
+  min-height: 48px;
 
   /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.65625rem var(--navds-spacing-3);
+  padding: calc(var(--navds-spacing-3) - 2px) var(--navds-spacing-3);
 }
 
 .navds-button--s {
   /* Padding calculated based on 16px font for 32px tall button */
   padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
+  min-height: 32px;
 }
 
 .navds-button:focus {
@@ -34,15 +36,6 @@
   color: var(--navds-color-text-inverse);
   background-color: var(--navds-color-action-hover);
   border-color: transparent;
-
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.53125rem var(--navds-spacing-3);
-}
-
-.navds-button--primary:hover.navds-button--s,
-.navds-button--primary:active.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }
 
 .navds-button--primary:active {
@@ -118,8 +111,6 @@
  **************************/
 
 .navds-button:disabled:disabled {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
   background-color: var(--navds-color-disabled);
   color: var(--navds-color-text-inverse);
   cursor: not-allowed;
@@ -127,8 +118,3 @@
   box-shadow: none;
   transform: none;
 }
-
-.navds-button:disabled:disabled.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/ds-react/src/accordion-menu/AccordionMenuCollapsable.tsx

@@ -32,6 +32,7 @@ const AccordionMenuCollapsable = forwardRef<
         {title}
         <Expand
           role="img"
+          focusable="false"
           aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
           className="navds-accordion-menu-collapsable__expand-icon"
         />

@navikt/ds-react/src/accordion/Accordion.tsx

@@ -88,12 +88,16 @@ const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
             {heading}
           </span>
           <Expand
+            focusable="false"
+            role="img"
             className={cl(
               "navds-accordion__chevron",
               `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
             )}
           />
           <ExpandFilled
+            focusable="false"
+            role="img"
             className={cl(
               "navds-accordion__chevron",
               "navds-accordion__chevron--filled",

@navikt/ds-react/src/alert/Alert.tsx

@@ -30,13 +30,37 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled />;
+      return (
+        <ErrorFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "warning":
-      return <WarningFilled />;
+      return (
+        <WarningFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "info":
-      return <InformationFilled />;
+      return (
+        <InformationFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "success":
-      return <SuccessFilled />;
+      return (
+        <SuccessFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     default:
       return null;
   }
@@ -56,8 +80,11 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
       )}
       {...rest}
     >
-      <Icon variant={variant} />
-      <span>{children}</span>
+      <span>
+        <span className="sr-only">{`${variant}-ikon`}</span>
+        <Icon variant={variant} />
+      </span>
+      <div>{children}</div>
     </div>
   )
 );

@navikt/ds-react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -61,7 +61,15 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           onClick={handleClick}
           {...rest}
         >
-          {icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
+          {icon ? (
+            <>{icon}</>
+          ) : (
+            <Copy
+              focusable="false"
+              role="img"
+              aria-label="Fil ikon for kopiering"
+            />
+          )}
           {children ? children : <span className="sr-only">{title}</span>}
         </Button>
         <Popover

@navikt/ds-react/src/modal/Modal.tsx

@@ -86,7 +86,11 @@ const Modal: ModalLifecycle &
           aria-label="lukk modalvindu"
           onClick={onClose}
         >
-          <Close />
+          <Close
+            focusable="false"
+            role="img"
+            aria-label="X-ikon for å lukke modal"
+          />
         </Button>
       </ReactModal>
     );

package.json

@@ -10,7 +10,7 @@
     "clean": "yarn workspace website clean",
     "build:gatsby": "yarn react-docgen && yarn workspace website build:gatsby",
     "serve": "yarn workspace website serve",
-    "storybook": "yarn run start-storybook -p 6006",
+    "storybook": "yarn run start-storybook --loglevel warn --quiet -p 6006",
     "build-storybook": "build-storybook",
     "watch-css": "yarn workspace @navikt/ds-css run watch",
     "chromatic": "STORYBOOK_CHROMATIC=true npx chromatic --project-token x3xqdfgkujg",

packages/nav-frontend-hjelpetekst/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-hjelpetekst",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "lib/hjelpetekst.js",
   "types": "lib/hjelpetekst.d.ts",
   "license": "MIT",

packages/nav-frontend-hjelpetekst/src/hjelpetekst.tsx

@@ -75,6 +75,11 @@ class Hjelpetekst extends React.Component<HjelpetekstProps, State> {
     }
   };
 
+  handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    this.togglePopover(e);
+    this.props.onClick && this.props.onClick(e);
+  };
+
   render() {
     const {
       children,
@@ -82,6 +87,7 @@ class Hjelpetekst extends React.Component<HjelpetekstProps, State> {
       popoverProps,
       type,
       tittel,
+      onClick,
       ...rest
     } = this.props;
 
@@ -90,7 +96,7 @@ class Hjelpetekst extends React.Component<HjelpetekstProps, State> {
         <button
           type="button"
           className="hjelpetekst__apneknapp"
-          onClick={this.togglePopover}
+          onClick={this.handleClick}
           title={tittel}
           aria-expanded={this.state.ankerEl !== undefined}
           aria-controls={this.popoverId}