@hashicorp/react-accordion - npm Package Compare versions

Comparing version

CHANGELOG.md

partials/AccordionItems/style.module.css

partials/Collapsible/style.module.css

style.module.css

index.js

		import React from 'react'
		import AccordionItems, { AccordionItem } from './partials/AccordionItems'
		import classNames from 'classnames'
		import s from './style.module.css'

		function Accordion({ heading, items }) {
		function Accordion({ heading, items, className }) {
		return (
		<section className="g-accordion">
		<section className={classNames(s.root, className)}>
		<div className="g-grid-container">
		{heading && (
		<h2 className="g-type-display-2" data-testid="heading">
		<h2 className={s.heading} data-testid="heading">
		{heading}
		@@ -11,0 +13,0 @@ </h2>

package.json

		{
		"name": "@hashicorp/react-accordion",
		"description": "A block that displays a set of title + content items, with content collapsed by default, but expandable to view. Also includes an optional heading for the block.",
		"version": "2.0.3",
		"version": "3.0.0",
		"author": "HashiCorp",
		"contributors": [
		"Zach Shilton"
		],
		"contributors": ["Zach Shilton"],
		"dependencies": {
		"@hashicorp/react-inline-svg": "^1.0.2"
		"@hashicorp/react-inline-svg": "^6.0.2",
		"classnames": "^2.3.1"
		},
		@@ -19,4 +18,3 @@ "license": "MPL-2.0",
		"access": "public"
		},
		"gitHead": "0b085b7b2f0e49bac3578aa41836b68d5d8509a9"
		}
		}

partials/AccordionItems/index.js

		import React, { useState } from 'react'
		import InlineSvg from '@hashicorp/react-inline-svg'
		import SvgArrowDown from './icons/arrow-down.svg?include'

		import classnames from 'classnames'
		import Collapsible from '../Collapsible'
		import s from './style.module.css'

		function AccordionItem({ heading, children, isCollapsed, toggleCollapsed }) {
		return (
		<div className="g-accordion-item">
		<div className={s.accordionItem}>
		<button
		className="trigger g-type-body-strong"
		className={classnames(s.trigger, { [s.isCollapsed]: isCollapsed })}
		onMouseDown={(e) => e.preventDefault()}
		onClick={toggleCollapsed}
		>
		<span className="text">{heading}</span>
		<span className={`icon ${!isCollapsed ? 'expanded' : ''}`}>
		<span className={s.triggerText}>{heading}</span>
		<span className={s.triggerIcon}>
		<InlineSvg src={SvgArrowDown} />
		@@ -21,3 +22,3 @@ </span>
		<Collapsible isCollapsed={isCollapsed}>
		<div className="content">{children}</div>
		<div className={s.content}>{children}</div>
		</Collapsible>
		@@ -28,7 +29,11 @@ </div>

		function AccordionItems({ items }) {
		function AccordionItems({ items, className, withTopBorder = true }) {
		const [expandedIdx, setExpandedIdx] = useState(null)

		return (
		<div className="g-accordion-items">
		<div
		className={classnames(s.root, className, {
		[s.withTopBorder]: withTopBorder,
		})}
		>
		{items.map((item, stableIdx) => {
		@@ -41,3 +46,3 @@ const isCollapsed = stableIdx !== expandedIdx
		<div
		className="html-content"
		className={s.htmlContent}
		dangerouslySetInnerHTML={{ __html: item.content }}
		@@ -44,0 +49,0 @@ />

partials/Collapsible/index.js

		import React, { useRef, useEffect } from 'react'
		import s from './style.module.css'

		@@ -21,4 +22,4 @@ /*
		return (
		<div className="g-collapsible" ref={parentElem}>
		<div className="inner" data-is-collapsed={isCollapsed}>
		<div className={s.root} ref={parentElem}>
		<div className={s.inner} data-is-collapsed={isCollapsed}>
		{children}
		@@ -25,0 +26,0 @@ </div>

partials/AccordionItems/style.css

partials/AccordionItems/styles/content.css

partials/AccordionItems/styles/index.css

partials/Collapsible/style.css

styles/index.css

New alerts