@fellesdatakatalog/ui 1.0.7 → 1.0.9

package/README.md

@@ -2,7 +2,30 @@
 
 Library of React components for FDK frontend apps.
 
-## Getting started
+## How to use
+
+```bash
+yarn add @fellesdatakatalog/ui
+```
+
+```scss
+// In your app stylesheet
+@import '@fellesdatakatalog/ui/dist/styles.css';
+```
+
+```jsx
+import { HelpText } from '@fellesdatakatalog/ui';
+
+<HelpText>This is my helptext</HelpText>
+```
+
+Otherwise run this repo locally and have a look at the embedded Storybook for additional component documentation and usage examples.
+
+```bash
+yarn storybook
+```
+
+## Contributing
 
 ### Prerequisites
 

package/dist/shared-ui.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("classnames"),r=require("react"),l=require("@digdir/designsystemet-react");let o=0;const n=r.useId;function a(e){var t;if(void 0!==n){return n().replace(/(:)/g,"")}return null!==(t=function(e){const[t,l]=r.useState(e),n=e||t;return r.useEffect(()=>{null==t&&(o+=1,l(`aksel-icon-${o}`))},[t]),n}(e))&&void 0!==t?t:""}const i=r.forwardRef((e,t)=>{var{title:l,titleId:o}=e,n=function(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}(e,["title","titleId"]);let i=a();return i=l?o||"title-"+i:void 0,r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",focusable:!1,role:"img",ref:t,"aria-labelledby":i},n),l?r.createElement("title",{id:i},l):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M6.25 3A.75.75 0 0 1 7 2.25h10a.75.75 0 0 1 .75.75v6.25H21a.75.75 0 0 1 .75.75v11a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75V10A.75.75 0 0 1 3 9.25h3.25zm11.5 17.25v-9.5h2.5v9.5zm-1.5-16.5v16.5h-8.5V3.75zm-10 7v9.5h-2.5v-9.5zm3.75-5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75m3 0a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75m-2.25 6.75a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0zm2.25-.75a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75",clipRule:"evenodd"}))});const c=r.forwardRef((e,t)=>{var{title:l,titleId:o}=e,n=function(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}(e,["title","titleId"]);let i=a();return i=l?o||"title-"+i:void 0,r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",focusable:!1,role:"img",ref:t,"aria-labelledby":i},n),l?r.createElement("title",{id:i},l):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12 21.75c5.385 0 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25 2.25 6.615 2.25 12s4.365 9.75 9.75 9.75m4.954-12.475a.813.813 0 0 0-1.24-1.05l-5.389 6.368L7.7 11.967a.812.812 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.195-.05z",clipRule:"evenodd"}))});const s=r.forwardRef((e,t)=>{var{title:l,titleId:o}=e,n=function(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}(e,["title","titleId"]);let i=a();return i=l?o||"title-"+i:void 0,r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",focusable:!1,role:"img",ref:t,"aria-labelledby":i},n),l?r.createElement("title",{id:i},l):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M8.25 3.5c0-.69.56-1.25 1.25-1.25H14a.75.75 0 0 1 .53.22l5 5c.141.14.22.331.22.53v8.5c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25zm6.25 5.25c-.69 0-1.25-.56-1.25-1.25V3.75h-3.5v12.5h8.5v-7.5zm.25-3.94 2.44 2.44h-2.44zM6.502 7.75H5.75v12.5h8.5v-.748a.75.75 0 0 1 1.5 0v.998c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h1.002a.75.75 0 1 1 0 1.5",clipRule:"evenodd"}))}),d="_orgLogo_8xxnq_1",p=({className:r,orgLogoSrc:l,...o})=>e.jsx("div",{className:t(d,r),...o,children:l?e.jsx("img",{"aria-hidden":!0,src:l,alt:""}):e.jsx(i,{"aria-hidden":!0})}),v="_appBar_w0gn2_1",u="_wrapper_1dyfs_1",f=({children:r,className:l,...o})=>e.jsx("div",{className:t(u,l),...o,children:r}),m="_wrapper_m33an_1",h="_helptext_1go7v_1",g=r.forwardRef(function({placement:t="right",children:r,...o},n){return e.jsxs(l.Popover.TriggerContext,{children:[e.jsx(l.Popover.Trigger,{className:h,ref:n,variant:"tertiary","data-color":"info",...o}),e.jsx(l.Popover,{placement:t,"data-color":"info",children:r})]})});exports.AppBar=()=>e.jsx("div",{className:v,children:e.jsx(p,{})}),exports.CopyButton=({copyLabel:t,copiedLabel:o,copyOnClick:n,buttonProps:a,...i})=>{const[d,p]=r.useState(!1);return e.jsx(l.Tooltip,{content:d?e.jsxs(f,{children:[e.jsx(c,{color:"#D1F4E1",fontSize:"1.2em"}),o]}):t,placement:"top",children:e.jsxs(l.Button,{"data-size":"sm",variant:"secondary",onClick:()=>{return e=n,p(!0),void navigator.clipboard.writeText(e);var e},onMouseOver:()=>p(!1),...a,children:[e.jsx(s,{"aria-hidden":!0}),e.jsx("span",{className:"sr-only",children:t})]})})},exports.HStack=f,exports.HelpText=g,exports.OrgLogo=p,exports.VStack=({children:t,...r})=>e.jsx("div",{className:m,...r,children:t});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("classnames"),r=require("react"),l=require("@digdir/designsystemet-react");let o=0;const n=r.useId;function a(e){var t;if(void 0!==n){return n().replace(/(:)/g,"")}return null!==(t=function(e){const[t,l]=r.useState(e),n=e||t;return r.useEffect(()=>{null==t&&(o+=1,l(`aksel-icon-${o}`))},[t]),n}(e))&&void 0!==t?t:""}const i=r.forwardRef((e,t)=>{var{title:l,titleId:o}=e,n=function(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}(e,["title","titleId"]);let i=a();return i=l?o||"title-"+i:void 0,r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",focusable:!1,role:"img",ref:t,"aria-labelledby":i},n),l?r.createElement("title",{id:i},l):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M6.25 3A.75.75 0 0 1 7 2.25h10a.75.75 0 0 1 .75.75v6.25H21a.75.75 0 0 1 .75.75v11a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75V10A.75.75 0 0 1 3 9.25h3.25zm11.5 17.25v-9.5h2.5v9.5zm-1.5-16.5v16.5h-8.5V3.75zm-10 7v9.5h-2.5v-9.5zm3.75-5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75m3 0a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75m-2.25 6.75a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0zm2.25-.75a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75",clipRule:"evenodd"}))});const c=r.forwardRef((e,t)=>{var{title:l,titleId:o}=e,n=function(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}(e,["title","titleId"]);let i=a();return i=l?o||"title-"+i:void 0,r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",focusable:!1,role:"img",ref:t,"aria-labelledby":i},n),l?r.createElement("title",{id:i},l):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12 21.75c5.385 0 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25 2.25 6.615 2.25 12s4.365 9.75 9.75 9.75m4.954-12.475a.813.813 0 0 0-1.24-1.05l-5.389 6.368L7.7 11.967a.812.812 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.195-.05z",clipRule:"evenodd"}))});const s=r.forwardRef((e,t)=>{var{title:l,titleId:o}=e,n=function(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}(e,["title","titleId"]);let i=a();return i=l?o||"title-"+i:void 0,r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",focusable:!1,role:"img",ref:t,"aria-labelledby":i},n),l?r.createElement("title",{id:i},l):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M8.25 3.5c0-.69.56-1.25 1.25-1.25H14a.75.75 0 0 1 .53.22l5 5c.141.14.22.331.22.53v8.5c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25zm6.25 5.25c-.69 0-1.25-.56-1.25-1.25V3.75h-3.5v12.5h8.5v-7.5zm.25-3.94 2.44 2.44h-2.44zM6.502 7.75H5.75v12.5h8.5v-.748a.75.75 0 0 1 1.5 0v.998c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h1.002a.75.75 0 1 1 0 1.5",clipRule:"evenodd"}))}),d="_orgLogo_8xxnq_1",p=({className:r,orgLogoSrc:l,...o})=>e.jsx("div",{className:t(d,r),...o,children:l?e.jsx("img",{"aria-hidden":!0,src:l,alt:""}):e.jsx(i,{"aria-hidden":!0})}),v="_appBar_w0gn2_1",u="_wrapper_1dyfs_1",f=({children:r,className:l,...o})=>e.jsx("div",{className:t(u,l),...o,children:r}),m="_wrapper_m33an_1",h="_helptext_1o0ls_1",g=r.forwardRef(function({placement:t="right",children:r,...o},n){return e.jsxs(l.Popover.TriggerContext,{children:[e.jsx(l.Popover.Trigger,{className:h,ref:n,variant:"tertiary","data-color":"info",...o}),e.jsx(l.Popover,{placement:t,"data-color":"info",children:r})]})});exports.AppBar=()=>e.jsx("div",{className:v,children:e.jsx(p,{})}),exports.CopyButton=({copyLabel:t,copiedLabel:o,copyOnClick:n,buttonProps:a,...i})=>{const[d,p]=r.useState(!1);return e.jsx(l.Tooltip,{content:d?e.jsxs(f,{children:[e.jsx(c,{color:"#D1F4E1",fontSize:"1.2em"}),o]}):t,placement:"top",children:e.jsxs(l.Button,{"data-size":"sm",variant:"secondary",onClick:()=>{return e=n,p(!0),void navigator.clipboard.writeText(e);var e},onMouseOver:()=>p(!1),...a,children:[e.jsx(s,{"aria-hidden":!0}),e.jsx("span",{className:"sr-only",children:t})]})})},exports.HStack=f,exports.HelpText=g,exports.OrgLogo=p,exports.VStack=({children:t,...r})=>e.jsx("div",{className:m,...r,children:t});
 //# sourceMappingURL=shared-ui.cjs.map

package/dist/shared-ui.es.js

@@ -178,7 +178,7 @@ const VStack = ({ children, ...props }) => {
     }
   );
 };
-const helptext = "_helptext_1go7v_1";
+const helptext = "_helptext_1o0ls_1";
 const styles = {
   helptext
 };

package/dist/styles.css

@@ -1 +1 @@
-._orgLogo_8xxnq_1{display:flex;min-width:1.5rem;min-height:1.5rem;overflow:hidden;align-items:center;justify-content:center;position:relative}._orgLogo_8xxnq_1 svg,._orgLogo_8xxnq_1 img{width:100%;height:100%;object-fit:contain}._orgLogo_8xxnq_1 svg{color:var(--color-text)}._appBar_w0gn2_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1rem}._wrapper_1dyfs_1{display:flex;align-items:center;gap:.5rem}._wrapper_m33an_1{display:flex;flex-direction:column;gap:.5rem}._helptext_1go7v_1{--dsc-helptext-icon-size: 65%;--dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-helptext-size: var(--ds-size-7);border-radius:var(--ds-border-radius-full);border:max(1px,var(--ds-size-1) / 2) solid;box-sizing:border-box;height:var(--dsc-helptext-size);min-height:0;min-width:0;padding:0;position:relative;width:var(--dsc-helptext-size)}@media (forced-colors: active){._helptext_1go7v_1{color:ButtonText}}._helptext_1go7v_1:before{content:"";border-radius:inherit;background:currentcolor;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-image:var(--dsc-helptext-icon-url);mask-image:var(--dsc-helptext-icon-url);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),cover;mask-size:var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),cover;scale:1.1;width:100%;height:100%}@media (forced-colors: active){._helptext_1go7v_1:before{background:ButtonText}}._helptext_1go7v_1:has(+:popover-open):before{-webkit-mask-image:var(--dsc-helptext-icon-url),linear-gradient(currentcolor,currentcolor);mask-image:var(--dsc-helptext-icon-url),linear-gradient(currentcolor,currentcolor)}@media print{._helptext_1go7v_1{display:none}}
+._orgLogo_8xxnq_1{display:flex;min-width:1.5rem;min-height:1.5rem;overflow:hidden;align-items:center;justify-content:center;position:relative}._orgLogo_8xxnq_1 svg,._orgLogo_8xxnq_1 img{width:100%;height:100%;object-fit:contain}._orgLogo_8xxnq_1 svg{color:var(--color-text)}._appBar_w0gn2_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1rem}._wrapper_1dyfs_1{display:flex;align-items:center;gap:.5rem}._wrapper_m33an_1{display:flex;flex-direction:column;gap:.5rem}._helptext_1o0ls_1{--dsc-helptext-icon-size: 65%;--dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-helptext-size: var(--custom-helptext-size, var(--ds-size-7));border-radius:var(--ds-border-radius-full);border:max(1px,var(--ds-size-1) / 2) solid;box-sizing:border-box;height:var(--dsc-helptext-size);min-height:0;min-width:0;padding:0;position:relative;width:var(--dsc-helptext-size)}@media (forced-colors: active){._helptext_1o0ls_1{color:ButtonText}}._helptext_1o0ls_1:before{content:"";border-radius:inherit;background:currentcolor;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-image:var(--dsc-helptext-icon-url);mask-image:var(--dsc-helptext-icon-url);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),cover;mask-size:var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),cover;scale:1.1;width:100%;height:100%}@media (forced-colors: active){._helptext_1o0ls_1:before{background:ButtonText}}._helptext_1o0ls_1:has(+:popover-open):before{-webkit-mask-image:var(--dsc-helptext-icon-url),linear-gradient(currentcolor,currentcolor);mask-image:var(--dsc-helptext-icon-url),linear-gradient(currentcolor,currentcolor)}@media print{._helptext_1o0ls_1{display:none}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fellesdatakatalog/ui",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "React UI components for Felles Datakatalog",
   "main": "dist/shared-ui.cjs",
   "module": "dist/shared-ui.es.js",