@kvdbil/components 17.4.2 → 17.5.0

package/cjs/components/Accordion/index.js

@@ -1,51 +1,36 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("react-collapse"),s=require("../../shared/media-queries.js"),i=require("../../icons/components/ArrowDownIcon.js"),n=require("../../hooks/useNameAndId.js");require("../../shared/helpers.js");var a,l=(a=r)&&a.__esModule?a:{default:a};const d=l.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("react-collapse"),o=require("../../hooks/useNameAndId.js"),s=require("../ToggleArrow/index.js"),d=require("../../typography/BodyText/index.js");require("../../shared/helpers.js"),require("../../icons/components/ShowMoreIcon.js"),require("../../shared/media-queries.js");var l,n=(l=t)&&l.__esModule?l:{default:l};const a=n.default.div`
   display: flex;
   flex-direction: column;
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,c=l.default.ul`
+`,c=n.default.ul`
   margin: 0;
   padding: 0;
   list-style: none;
-`,m=l.default.div`
+`,u=n.default.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
-  margin: 0.5rem 0;
-`,u=l.default.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.75rem;
-  color: ${({theme:e})=>e.colors.text.dark};
-  transition: 200ms ease-in-out;
-  transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
-`,p=l.default.li`
+  padding: 1rem 0;
+`,p=n.default.li`
   border-top: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
-  padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
 
   &:last-child {
     border-bottom: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   }
-`,h=l.default.span`
-  color: ${({theme:e})=>e.colors.text.dark};
-  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  font-size: 0.9375rem;
-  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
-`,f=l.default.div`
-  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  color: ${({theme:e})=>e.colors.text.dark};
-  font-size: 0.9375rem;
-  font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
-  line-height: 1.3;
-  transition: 200ms ease-in-out;
-  ${s.mq("tablet")} {
-    padding: 0;
-  }
-  & > * {
+`,x=n.default.div`
+  padding-bottom: 1rem;
+
+  & > :first-child,
+  & > * :first-child {
     margin-top: 0;
+    padding-top: 0;
+  }
+  & > :last-child,
+  & > * :last-child {
     margin-bottom: 0;
+    padding-bottom: 0rem;
   }
-`,y=({items:r,...s})=>{const[a,l]=t.useState({}),{id:y}=n.useNameAndId("accordion"),g=e=>{l((t=>({...t,[e]:!t[e]})))},x=e=>()=>{g(e)},$=e=>t=>{("Enter"===t.key||" "===t.key)&&(t.preventDefault(),g(e))};return e.jsx(d,{...s,children:e.jsx(c,{className:"accordionList",children:r.map(((t,r)=>{const s=!!a[r],n=`${y}-${r}-header`,l=`${y}-${r}-content`;return e.jsxs(p,{isOpen:s,className:"accordionItem",children:[e.jsxs(m,{id:n,onClick:x(r),onKeyDown:$(r),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":s,"aria-controls":l,children:[e.jsx(h,{as:"span",children:t.title}),e.jsx(u,{isOpen:s,children:e.jsx(i.default,{})})]}),e.jsx(o.UnmountClosed,{isOpened:s,children:e.jsx(f,{id:l,"aria-labelledby":n,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:t.text}})},r)]},t.title)}))})})};exports.Accordion=y,exports.default=y;
+`,m=({items:t,...l})=>{const[n,m]=r.useState({}),{id:h}=o.useNameAndId("accordion"),f=e=>{m((r=>({...r,[e]:!r[e]})))},g=e=>()=>{f(e)},j=e=>r=>{("Enter"===r.key||" "===r.key)&&(r.preventDefault(),f(e))};return e.jsx(a,{...l,children:e.jsx(c,{className:"accordionList",children:t.map(((r,t)=>{const o=!!n[t],l=`${h}-${t}-header`,a=`${h}-${t}-content`;return e.jsxs(p,{isOpen:o,className:"accordionItem",children:[e.jsxs(u,{id:l,onClick:g(t),onKeyDown:j(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":o,"aria-controls":a,children:[e.jsx(d.BodyLink,{as:"span",children:r.title}),e.jsx(s.default,{isExpanded:o})]}),e.jsx(i.Collapse,{isOpened:o,children:e.jsx(x,{id:a,"aria-labelledby":l,role:"region",...o?null:{inert:""},children:"string"==typeof r.text?e.jsx(d.BodyText,{children:r.text}):r.text})},t)]},r.title)}))})})};exports.Accordion=m,exports.default=m;

package/esm/components/Accordion/index.js

@@ -1,51 +1,36 @@
-import{jsx as i,jsxs as d}from"react/jsx-runtime";import{useState as $}from"react";import r from"styled-components";import{UnmountClosed as u}from"react-collapse";import{mq as x}from"../../shared/media-queries.js";import b from"../../icons/components/ArrowDownIcon.js";import{useNameAndId as w}from"../../hooks/useNameAndId.js";import"../../shared/helpers.js";const k=r.div`
+import{jsx as i,jsxs as c}from"react/jsx-runtime";import{useState as y}from"react";import n from"styled-components";import{Collapse as b}from"react-collapse";import{useNameAndId as u}from"../../hooks/useNameAndId.js";import $ from"../ToggleArrow/index.js";import{BodyLink as k,BodyText as v}from"../../typography/BodyText/index.js";import"../../shared/helpers.js";import"../../icons/components/ShowMoreIcon.js";import"../../shared/media-queries.js";const T=n.div`
   display: flex;
   flex-direction: column;
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,O=r.ul`
+`,I=n.ul`
   margin: 0;
   padding: 0;
   list-style: none;
-`,v=r.div`
+`,N=n.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
-  margin: 0.5rem 0;
-`,B=r.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.75rem;
-  color: ${({theme:e})=>e.colors.text.dark};
-  transition: 200ms ease-in-out;
-  transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
-`,I=r.li`
-  border-top: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
-  padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
+  padding: 1rem 0;
+`,j=n.li`
+  border-top: ${({theme:o})=>`1px solid ${o.colors.grayscaleToned.light2}`};
 
   &:last-child {
-    border-bottom: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
-  }
-`,N=r.span`
-  color: ${({theme:e})=>e.colors.text.dark};
-  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  font-size: 0.9375rem;
-  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
-`,T=r.div`
-  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  color: ${({theme:e})=>e.colors.text.dark};
-  font-size: 0.9375rem;
-  font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
-  line-height: 1.3;
-  transition: 200ms ease-in-out;
-  ${x("tablet")} {
-    padding: 0;
+    border-bottom: ${({theme:o})=>`1px solid ${o.colors.grayscaleToned.light2}`};
   }
-  & > * {
+`,w=n.div`
+  padding-bottom: 1rem;
+
+  & > :first-child,
+  & > * :first-child {
     margin-top: 0;
+    padding-top: 0;
+  }
+  & > :last-child,
+  & > * :last-child {
     margin-bottom: 0;
+    padding-bottom: 0rem;
   }
-`,c=({items:e,...p})=>{const[h,f]=$({}),{id:a}=w("accordion"),s=o=>{f(t=>({...t,[o]:!t[o]}))},g=o=>()=>{s(o)},y=o=>t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(o))};return i(k,{...p,children:i(O,{className:"accordionList",children:e.map((o,t)=>{const n=!!h[t],l=`${a}-${t}-header`,m=`${a}-${t}-content`;return d(I,{isOpen:n,className:"accordionItem",children:[d(v,{id:l,onClick:g(t),onKeyDown:y(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":n,"aria-controls":m,children:[i(N,{as:"span",children:o.title}),i(B,{isOpen:n,children:i(b,{})})]}),i(u,{isOpened:n,children:i(T,{id:m,"aria-labelledby":l,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})},t)]},o.title)})})})};export{c as Accordion,c as default};
+`,m=({items:o,...p})=>{const[h,f]=y({}),{id:l}=u("accordion"),d=e=>{f(t=>({...t,[e]:!t[e]}))},g=e=>()=>{d(e)},x=e=>t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),d(e))};return i(T,{...p,children:i(I,{className:"accordionList",children:o.map((e,t)=>{const r=!!h[t],a=`${l}-${t}-header`,s=`${l}-${t}-content`;return c(j,{isOpen:r,className:"accordionItem",children:[c(N,{id:a,onClick:g(t),onKeyDown:x(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":r,"aria-controls":s,children:[i(k,{as:"span",children:e.title}),i($,{isExpanded:r})]}),i(b,{isOpened:r,children:i(w,{id:s,"aria-labelledby":a,role:"region",...r?null:{inert:""},children:typeof e.text=="string"?i(v,{children:e.text}):e.text})},t)]},e.title)})})})};export{m as Accordion,m as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.4.2",
+  "version": "17.5.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.4.2",
+  "version": "17.5.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Accordion/index.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 interface IItem {
     title: string;
-    text: string;
+    text: ReactNode;
 }
 export interface AccordionProps {
     items: IItem[];