@helsenorge/designsystem-react 7.3.1 → 7.5.0

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "7.3.1",
+  "version": "7.5.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/scss/supernova/index.css

@@ -0,0 +1,3 @@
+/* This file was generated by Supernova and should not be changed manually */
+@import "./colors.css";
+@import "./typography.css";

package/scss/supernova/styles/colors.css

@@ -0,0 +1,173 @@
+/* stylelint-disable color-hex-length */
+
+/* This file was generated by Supernova and should not be changed manually */
+:root {
+  --core-color-black: #000000;
+  --core-color-white: #ffffff;
+  --core-color-blueberry-50: #e4f7f9;
+  --core-color-neutral-500: #989693;
+  --core-color-neutral-700: #62625f;
+  --color-action-text-ondark: #ffffff;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
+  --color-action-background-transparent-onlight-hover: #126f8721;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
+  --color-action-background-transparent-onlight-hoverselected: #126f872b;
+  --color-notification-background-info: #e4f7f9;
+  --color-notification-background-error: #fff2ea;
+  --color-destructive-graphics-normal: #c83521;
+  --color-base-text-onlight: #000000;
+  --color-action-background-ondark: #ffffff;
+  --color-action-border-ondark: #ffffff;
+  --color-action-border-ondark-focus: #ffffff;
+  --color-action-graphics-ondark: #ffffff;
+  --color-base-text-ondark: #ffffff;
+  --color-base-background-neutral: #f5f3f3;
+  --color-base-background-white: #ffffff;
+  --color-base-graphics-ondark: #ffffff;
+  --color-disabled-text-ondark: #ffffff;
+  --color-action-border-onlight: #188097;
+  --color-action-border-onlight-hover: #08667c;
+  --color-action-border-onlight-focus: #000000;
+  --color-action-text-onlight: #126f87;
+  --color-action-text-onlight-hover: #08667c;
+  --color-action-graphics-onlight: #188097;
+  --color-action-graphics-onlight-hover: #126f87;
+  --color-action-graphics-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-selected: #cae7ed;
+  --color-action-background-ondark-hoverselected: #afdae3;
+  --color-action-background-onlight: #188097;
+  --color-action-background-onlight-hover: #08667c;
+  --color-notification-background-warning: #fdf8df;
+  --color-notification-background-success: #e6f8ee;
+  --color-notification-border-info: #08667c;
+  --color-notification-border-error: #a31f0e;
+  --color-notification-border-warning: #ab7c00;
+  --color-notification-border-success: #078141;
+  --color-notification-graphics-info: #08667c;
+  --color-notification-graphics-error: #a31f0e;
+  --color-notification-graphics-warning: #ab7c00;
+  --color-notification-graphics-success: #078141;
+  --color-notification-status-warning: #ebc840;
+  --color-notification-status-success: #099150;
+  --color-destructive-graphics-hover: #b62e1c;
+  --color-destructive-text-normal: #b62e1c;
+  --color-destructive-text-hover: #a31f0e;
+  --color-disabled-background: #d6d4d3;
+  --color-disabled-text: #62625f;
+  --color-disabled-border: #7d7c79;
+  --color-disabled-graphics: #62625f;
+  --color-disabled-border-ondark: #d6d4d3;
+  --color-disabled-graphics-ondark: #d6d4d3;
+  --color-base-background-blueberry: #e4f7f9;
+  --color-base-background-cherry: #fff2ea;
+  --color-base-background-dark-blueberry: #188097;
+  --color-base-background-dark-cherry: #c83521;
+  --color-base-graphics-onlight: #000000;
+  --color-base-border-ondark: #d6d4d3;
+  --color-base-border-onlight: #989693;
+  --color-base-border-onlight-emphasized: #62625f;
+  --color-help-background: #efe4fd;
+  --color-help-graphics: #5b22a6;
+  --color-help-border: #5b22a6;
+  --core-color-blueberry-100: #cae7ed;
+  --core-color-blueberry-200: #afdae3;
+  --core-color-blueberry-300: #7abecc;
+  --core-color-blueberry-400: #58aabb;
+  --core-color-blueberry-500: #188097;
+  --core-color-blueberry-600: #126f87;
+  --core-color-blueberry-700: #08667c;
+  --core-color-blueberry-800: #06596c;
+  --core-color-blueberry-900: #084350;
+  --core-color-neutral-50: #f5f3f3;
+  --core-color-neutral-100: #eae7e7;
+  --core-color-neutral-200: #d6d4d3;
+  --core-color-neutral-300: #bdbab9;
+  --core-color-neutral-400: #aaa8a6;
+  --core-color-neutral-600: #7d7c79;
+  --core-color-neutral-800: #474745;
+  --core-color-neutral-900: #2b2c2b;
+  --core-color-banana-50: #fdf8df;
+  --core-color-banana-100: #fcf2bf;
+  --core-color-banana-200: #f9ea9f;
+  --core-color-banana-300: #f5e080;
+  --core-color-banana-400: #ebc840;
+  --core-color-banana-500: #ddab06;
+  --core-color-banana-600: #c59302;
+  --core-color-banana-700: #ab7c00;
+  --core-color-banana-800: #916500;
+  --core-color-banana-900: #764f00;
+  --core-color-cherry-50: #fff2ea;
+  --core-color-cherry-100: #f7e1d2;
+  --core-color-cherry-200: #eec0a5;
+  --core-color-cherry-300: #e39376;
+  --core-color-cherry-400: #d56147;
+  --core-color-cherry-500: #c83521;
+  --core-color-cherry-600: #b62e1c;
+  --core-color-cherry-700: #a31f0e;
+  --core-color-cherry-800: #912112;
+  --core-color-cherry-900: #7e1c0e;
+  --core-color-kiwi-50: #e6f8ee;
+  --core-color-kiwi-100: #c2edd6;
+  --core-color-kiwi-200: #9de2bf;
+  --core-color-kiwi-300: #79d6aa;
+  --core-color-kiwi-400: #56ca96;
+  --core-color-kiwi-500: #33be84;
+  --core-color-kiwi-600: #10b172;
+  --core-color-kiwi-700: #0ca161;
+  --core-color-kiwi-800: #099150;
+  --core-color-kiwi-900: #078141;
+  --core-color-plum-50: #efe4fd;
+  --core-color-plum-100: #d7bdf9;
+  --core-color-plum-200: #bf98f3;
+  --core-color-plum-300: #a875eb;
+  --core-color-plum-400: #9153e2;
+  --core-color-plum-500: #7a33d7;
+  --core-color-plum-600: #6a2abf;
+  --core-color-plum-700: #5b22a6;
+  --core-color-plum-800: #4c1b8c;
+  --core-color-plum-900: #3c1471;
+  --color-destructive-background-emphasized: #f7e1d2;
+  --color-destructive-background-normal: #fff2ea;
+  --brandcolor-white: #ffffff;
+  --brandcolor-black: #000000;
+  --brandcolor-neutral-verylight: #f5f3f3;
+  --brandcolor-neutral-light: #eae7e7;
+  --brandcolor-neutral-mediumlight: #d6d4d3;
+  --brandcolor-neutral-medium: #989693;
+  --brandcolor-neutral-dark: #62625f;
+  --brandcolor-neutral-verydark: #2b2c2b;
+  --brandcolor-blueberry-verylight: #e4f7f9;
+  --brandcolor-blueberry-light: #cae7ed;
+  --brandcolor-blueberry-mediumlight: #afdae3;
+  --brandcolor-blueberry-medium: #188097;
+  --brandcolor-blueberry-mediumdark: #126f87;
+  --brandcolor-blueberry-dark: #08667c;
+  --brandcolor-cherry-verylight: #fff2ea;
+  --brandcolor-cherry-light: #f7e1d2;
+  --brandcolor-cherry-medium: #c83521;
+  --brandcolor-cherry-mediumdark: #b62e1c;
+  --brandcolor-cherry-dark: #a31f0e;
+  --color-notification-status-info: #188097;
+  --color-notification-status-error: #c83521;
+  --color-destructive-border-normal: #c83521;
+  --color-action-border-ondark-hover: #e4f7f9;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
+  --color-action-background-transparent-ondark-hover: #00000026;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
+  --color-action-background-transparent-ondark-hoverselected: #00000040;
+  --color-base-background-dark-neutral: #2b2c2b;
+
+  /* Placeholdertext in input- and textarea-controls */
+  --color-placeholder-text-onlight: #62625f;
+  --color-base-border-onlight-subtle: #d6d4d3;
+  --color-base-border-neutral: #d6d4d3;
+
+  /* Subtle border for Blueberry 50 background */
+  --color-base-border-blueberry: #afdae3;
+  --color-base-border-cherry: #eec0a5;
+}

package/utils/accessibility.d.ts

@@ -6,4 +6,16 @@ interface AriaLabelAttributesConfig {
 }
 export type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
 export declare const getAriaLabelAttributes: (config: AriaLabelAttributesConfig) => AriaLabelAttributes | undefined;
+export interface ErrorAriaProps {
+    'aria-describedby'?: string;
+    errorText?: string;
+    errorTextId?: string;
+}
+/**
+ * Get IDs to be used with aria-describedby in form components like <Input />
+ * @param props Props from form component
+ * @param errorTextUuid Unique ID of the form component's error text
+ * @returns Element IDs or undefined if there is no aria-description
+ */
+export declare const getAriaDescribedBy: (props: ErrorAriaProps, errorTextUuid?: string) => string | undefined;
 export {};

package/utils/accessibility.js

@@ -1,19 +1,28 @@
-const l = (a) => {
-  const { label: r, id: e, prefer: i = "id" } = a;
-  if (e && i === "id")
+const l = (e) => {
+  const { label: i, id: r, prefer: a = "id" } = e;
+  if (r && a === "id")
     return {
-      "aria-labelledby": e
+      "aria-labelledby": r
     };
-  if (r)
+  if (i)
     return {
-      "aria-label": r
+      "aria-label": i
     };
-  if (e)
+  if (r)
     return {
-      "aria-labelledby": e
+      "aria-labelledby": r
     };
+}, b = (e, i) => {
+  const r = e["aria-describedby"], t = !!(e.errorText || e.errorTextId) ? i : void 0;
+  if (r && !t)
+    return r;
+  if (!r && t)
+    return t;
+  if (r && t)
+    return r + " " + t;
 };
 export {
+  b as getAriaDescribedBy,
   l as getAriaLabelAttributes
 };
 //# sourceMappingURL=accessibility.js.map

package/utils/accessibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n  label?: string;\n  id?: string;\n  prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n  const { label, id, prefer = 'id' } = config;\n\n  if (id && prefer === 'id') {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (label) {\n    return {\n      'aria-label': label,\n    };\n  }\n\n  if (id) {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n};\n"],"names":["getAriaLabelAttributes","config","label","id","prefer"],"mappings":"AAUa,MAAAA,IAAyB,CAACC,MAAuE;AAC5G,QAAM,EAAE,OAAAC,GAAO,IAAAC,GAAI,QAAAC,IAAS,SAASH;AAEjC,MAAAE,KAAMC,MAAW;AACZ,WAAA;AAAA,MACL,mBAAmBD;AAAA,IAAA;AAIvB,MAAID;AACK,WAAA;AAAA,MACL,cAAcA;AAAA,IAAA;AAIlB,MAAIC;AACK,WAAA;AAAA,MACL,mBAAmBA;AAAA,IAAA;AAGzB;"}
+{"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n  label?: string;\n  id?: string;\n  prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n  const { label, id, prefer = 'id' } = config;\n\n  if (id && prefer === 'id') {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (label) {\n    return {\n      'aria-label': label,\n    };\n  }\n\n  if (id) {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n};\n\nexport interface ErrorAriaProps {\n  'aria-describedby'?: string;\n  errorText?: string;\n  errorTextId?: string;\n}\n\n/**\n * Get IDs to be used with aria-describedby in form components like <Input />\n * @param props Props from form component\n * @param errorTextUuid Unique ID of the form component's error text\n * @returns Element IDs or undefined if there is no aria-description\n */\nexport const getAriaDescribedBy = (props: ErrorAriaProps, errorTextUuid?: string): string | undefined => {\n  const ariaDescribedBy: string | undefined = props['aria-describedby'];\n  const hasErrorText: boolean = !!(props.errorText || props.errorTextId);\n  const errorTextId: string | undefined = hasErrorText ? errorTextUuid : undefined;\n\n  if (ariaDescribedBy && !errorTextId) {\n    return ariaDescribedBy;\n  } else if (!ariaDescribedBy && errorTextId) {\n    return errorTextId;\n  } else if (ariaDescribedBy && errorTextId) {\n    return ariaDescribedBy + ' ' + errorTextId;\n  }\n};\n"],"names":["getAriaLabelAttributes","config","label","id","prefer","getAriaDescribedBy","props","errorTextUuid","ariaDescribedBy","errorTextId"],"mappings":"AAUa,MAAAA,IAAyB,CAACC,MAAuE;AAC5G,QAAM,EAAE,OAAAC,GAAO,IAAAC,GAAI,QAAAC,IAAS,SAASH;AAEjC,MAAAE,KAAMC,MAAW;AACZ,WAAA;AAAA,MACL,mBAAmBD;AAAA,IAAA;AAIvB,MAAID;AACK,WAAA;AAAA,MACL,cAAcA;AAAA,IAAA;AAIlB,MAAIC;AACK,WAAA;AAAA,MACL,mBAAmBA;AAAA,IAAA;AAGzB,GAcaE,IAAqB,CAACC,GAAuBC,MAA+C;AACjG,QAAAC,IAAsCF,EAAM,kBAAkB,GAE9DG,IADwB,CAAC,EAAEH,EAAM,aAAaA,EAAM,eACHC,IAAgB;AAEnE,MAAAC,KAAmB,CAACC;AACf,WAAAD;AACT,MAAW,CAACA,KAAmBC;AACtB,WAAAA;AACT,MAAWD,KAAmBC;AAC5B,WAAOD,IAAkB,MAAMC;AAEnC;"}