Deploying to gh-pages from @ 30acbfc 🚀

assets/Accent-BgtjHAn9.js → assets/Accent-54G9ByZ7.js

@@ -1,4 +1,4 @@
-import{j as e,M as a}from"./index-4efzVFvR.js";import{useMDXComponents as r}from"./index-CVdx34fM.js";import"./iframe-CQf03YiD.js";import"./index-eCxJ45ll.js";import"./index-BhUHFDTH.js";import"./index-D3-0uUTW.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(t){const n={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{title:"Design/Farger/Accent"}),`
+import{j as e,M as a}from"./index-BzIi2iqi.js";import{useMDXComponents as r}from"./index-CVdx34fM.js";import"./iframe-B9y8CEWx.js";import"./index-eCxJ45ll.js";import"./index-BhUHFDTH.js";import"./index-D3-0uUTW.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(t){const n={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{title:"Design/Farger/Accent"}),`
 `,e.jsx(n.h1,{id:"accent",children:"Accent"}),`
 `,e.jsxs(n.p,{children:["Accent mode aktiveres med å legge klassen ",e.jsx(n.code,{children:"ffe-accent-mode"}),` på elementet eller på
 containeren til elementet. Trenger en default mode inne i eccentmode kan en legge på klassen `,e.jsx(n.code,{children:".ffe-default-mode"}),"."]}),`

assets/Accordion-B2khNuCO.js

@@ -0,0 +1,31 @@
+import{j as n,M as a,C as r,a as i}from"./index-BzIi2iqi.js";import{useMDXComponents as c}from"./index-CVdx34fM.js";import{A as l,W as m,S as t}from"./Accordion.stories-C4ZGr4eu.js";import{Standard as s}from"./AccordionItem.stories-CxFbIwP1.js";import"./iframe-B9y8CEWx.js";import"./index-eCxJ45ll.js";import"./index-BhUHFDTH.js";import"./index-D3-0uUTW.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./AccordionItem-B7HUufEr.js";import"./index-DezCrw0f.js";import"./Icon-B88nEPeu.js";import"./Collapse-CKwb5mfJ.js";function d(o){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...c(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(a,{of:l}),`
+`,n.jsx(e.h1,{id:"accordion",children:"Accordion"}),`
+`,n.jsx(e.p,{children:"Accordion brukes der du har mye informasjon som du ønsker å gjøre tilgjengelig for brukere, uten at alt er visuelt synlig samtidig. En accordion er bygget opp av en «header» og et «panel», og i SpareBank 1 er hele «headeren» klikkbar."}),`
+`,n.jsxs(e.p,{children:["En accordion er bygget opp av to komponenter: ",n.jsx(e.code,{children:"Accordion"})," og ",n.jsx(e.code,{children:"AccordionItem"}),". Accordion-komponenten legges rundt alle AccordionItem's, for å gruppere og sette samme overskriftsnivå på alle."]}),`
+`,n.jsx(e.h2,{id:"installasjon",children:"Installasjon"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-bash",children:`npm install @sb1/ffe-accordion @sb1/ffe-accordion-react
+`})}),`
+`,n.jsx(e.p,{children:"I prosjektets hovedstylingsfil importer stylingen"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-less",children:`@import '@sb1/ffe-accordion/less/ffe-accordion';
+`})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { Accordion, AccordionItem } from '@sb1/ffe-accordion';
+
+<Accordion {...args}>
+    <AccordionItem heading="Tittel">Skjult innhold</AccordionItem>
+    <AccordionItem heading={<span>Enda en tittel</span>}>
+        Mer skjult innhold
+    </AccordionItem>
+    <AccordionItem heading="En siste tittel">Enda mer innhold</AccordionItem>
+</Accordion>;
+`})}),`
+`,n.jsx(e.h2,{id:"med-subtil-bakgrunn",children:"Med subtil bakgrunn"}),`
+`,n.jsx(r,{of:m}),`
+`,n.jsx(e.h2,{id:"med-ingen-bakgrunn",children:"Med ingen bakgrunn"}),`
+`,n.jsx(r,{of:t}),`
+`,n.jsx(i,{of:t}),`
+`,n.jsx(e.h1,{id:"accordionitem",children:"AccordionItem"}),`
+`,n.jsxs(e.p,{children:["AccordionItem er hver enkel «header»- og «panel»-seksjon. De er lukket by default, men du kan velge at den skal være åpen fra start ved å sende med property ",n.jsx(e.code,{children:"defaultOpen"}),`.
+Alle `,n.jsx(e.code,{children:"<AccordionItem />"}),"-komponenter har innebygget funksjonalitet for å styre åpning og lukking. Men om ønskelig kan du også overstyre dette. Et bruksområde kan være å lage en komponent som kun kan ha ett element åpent om gangen."]}),`
+`,n.jsx(e.p,{children:"Bruker man isOpen-propen vil intern-logikk som styrer åpning og lukking være skrudd av."}),`
+`,n.jsx(r,{of:s}),`
+`,n.jsx(i,{of:s})]})}function S(o={}){const{wrapper:e}={...c(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(d,{...o})}):d(o)}export{S as default};

assets/Accordion.stories-C4ZGr4eu.js

@@ -0,0 +1,45 @@
+import{R as e}from"./index-eCxJ45ll.js";import{A as a,a as n}from"./AccordionItem-B7HUufEr.js";const g={title:"Komponenter/Accordion/Accordion",component:a},r={args:{headingLevel:2},parameters:{docs:{description:{story:"Dette eksempelet viser "}}},render:o=>e.createElement("div",{style:{backgroundColor:"var(--ffe-color-background-subtle)",padding:"var(--ffe-spacing-md)",borderRadius:"8px",border:"1px dashed var(--ffe-color-border-primary-subtle)"}},e.createElement(a,{...o},e.createElement(n,{heading:"Accordion med subtil bakgrunn"},"Denne accordionen vises på en subtil bakgrunn"),e.createElement(n,{heading:"Mer informasjon"},"Accordion-innholdet har standard bakgrunnsfarge"),e.createElement(n,{heading:"Ytterligere detaljer"},"Legg merke til kontrasten mellom den subtile container-bakgrunnen og standardbakgrunnen til det utvidede innholdet")))},t={args:{headingLevel:2},render:o=>e.createElement(a,{...o},e.createElement(n,{heading:"Tittel"},"Skjult innhold"),e.createElement(n,{heading:e.createElement("span",null,"Enda en tittel")},"Mer skjult innhold"),e.createElement(n,{heading:"En siste tittel"},"Enda mer innhold"))};var d,i,c;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:`{
+  args: {
+    headingLevel: 2
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dette eksempelet viser '
+      }
+    }
+  },
+  render: args => <div style={{
+    backgroundColor: 'var(--ffe-color-background-subtle)',
+    padding: 'var(--ffe-spacing-md)',
+    borderRadius: '8px',
+    border: '1px dashed var(--ffe-color-border-primary-subtle)'
+  }}>
+            <Accordion {...args}>
+                <AccordionItem heading="Accordion med subtil bakgrunn">
+                    Denne accordionen vises på en subtil bakgrunn
+                </AccordionItem>
+                <AccordionItem heading="Mer informasjon">
+                    Accordion-innholdet har standard bakgrunnsfarge
+                </AccordionItem>
+                <AccordionItem heading="Ytterligere detaljer">
+                    Legg merke til kontrasten mellom den subtile
+                    container-bakgrunnen og standardbakgrunnen til det utvidede
+                    innholdet
+                </AccordionItem>
+            </Accordion>
+        </div>
+}`,...(c=(i=r.parameters)==null?void 0:i.docs)==null?void 0:c.source}}};var s,l,m;t.parameters={...t.parameters,docs:{...(s=t.parameters)==null?void 0:s.docs,source:{originalSource:`{
+  args: {
+    headingLevel: 2
+  },
+  render: args => <Accordion {...args}>
+            <AccordionItem heading="Tittel">Skjult innhold</AccordionItem>
+            <AccordionItem heading={<span>Enda en tittel</span>}>
+                Mer skjult innhold
+            </AccordionItem>
+            <AccordionItem heading="En siste tittel">
+                Enda mer innhold
+            </AccordionItem>
+        </Accordion>
+}`,...(m=(l=t.parameters)==null?void 0:l.docs)==null?void 0:m.source}}};const u=["WithSubtleBackground","Standard"],h=Object.freeze(Object.defineProperty({__proto__:null,Standard:t,WithSubtleBackground:r,__namedExportsOrder:u,default:g},Symbol.toStringTag,{value:"Module"}));export{h as A,t as S,r as W};

assets/AccordionItem.stories-CxFbIwP1.js

@@ -0,0 +1,10 @@
+import{R as r}from"./index-eCxJ45ll.js";import{a as t,A as i}from"./AccordionItem-B7HUufEr.js";import"./index-DezCrw0f.js";import"./Icon-B88nEPeu.js";import"./Collapse-CKwb5mfJ.js";const g={title:"Komponenter/Accordion/AccordionItem",component:t,argTypes:{ariaLabel:{type:"string"}}},e={args:{heading:"Tittel",children:"Skjult innhold",isOpen:!1},render:c=>r.createElement(i,{headingLevel:2},r.createElement(t,{...c}))};var n,o,a;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  args: {
+    heading: 'Tittel',
+    children: 'Skjult innhold',
+    isOpen: false
+  },
+  render: args => <Accordion headingLevel={2}>
+            <AccordionItem {...args} />
+        </Accordion>
+}`,...(a=(o=e.parameters)==null?void 0:o.docs)==null?void 0:a.source}}};const h=["Standard"];export{e as Standard,h as __namedExportsOrder,g as default};