v0.10.8 -> v0.10.10

.github/workflows/chromatic.yml

@@ -17,10 +17,12 @@ jobs:
                   rm -rf tsconfig.rollup.json
                   npm install
               env:
+                  FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
             - uses: chromaui/action@v1
               # options required to the GitHub chromatic action
               env:
+                  FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
               with:
                   # our project token, to see how to obtain it

.github/workflows/node.js.yml

@@ -23,4 +23,5 @@ jobs:
                   npm run build
               env:
                   CI: true
+                  FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmrc

@@ -3,3 +3,6 @@ registry=https://registry.npmjs.org
 
 @dassana-io:registry=https://npm.pkg.github.com/
 //npm.pkg.github.com/:_authToken=${NPM_TOKEN}
+
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONT_AWESOME_AUTH_TOKEN}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.10.8",
+	"version": "0.10.10",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
@@ -14,6 +14,8 @@
 		"@dassana-io/web-utils": "^0.8.0",
 		"@fortawesome/fontawesome-svg-core": "^1.2.32",
 		"@fortawesome/free-solid-svg-icons": "^5.15.1",
+		"@fortawesome/pro-light-svg-icons": "^5.15.3",
+		"@fortawesome/pro-regular-svg-icons": "^5.15.3",
 		"@fortawesome/react-fontawesome": "^0.1.14",
 		"antd": "~4.12.3",
 		"bytes": "^3.1.0",

rollup.config.ts

@@ -34,6 +34,8 @@ export default {
 		'@dassana-io/web-utils',
 		'@fortawesome/fontawesome-svg-core',
 		'@fortawesome/free-solid-svg-icons',
+		'@fortawesome/pro-light-svg-icons',
+		'@fortawesome/pro-regular-svg-icons',
 		'@fortawesome/react-fontawesome',
 		'antd',
 		'bytes',

src/components/Accordion/Accordion.stories.tsx

@@ -1,12 +1,11 @@
-import React from 'react'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { styleguide } from 'components/assets/styles'
 import { Accordion, AccordionProps, Panel } from './index'
 import { Meta, Story } from '@storybook/react/types-6-0'
+import React, { FC, ReactNode } from 'react'
 
-const mockPanels: Panel[] = [
-	{ content: 'Content1', key: 1, title: 'Title 1' },
-	{ content: 'Content2', key: 2, title: 'Title 2' },
-	{ content: 'Content3', key: 3, title: 'Title 3' }
-]
+const { font, spacing } = styleguide
 
 export default {
 	argTypes: {
@@ -20,15 +19,56 @@ export default {
 	title: 'Accordion'
 } as Meta
 
+interface Props {
+	children: ReactNode
+}
+
+const Content: FC<Props> = ({ children }: Props) => (
+	<div
+		style={{
+			...font.body,
+			padding: spacing.m,
+			paddingTop: 0
+		}}
+	>
+		{children}
+	</div>
+)
+
+const mockPanels: Panel[] = [
+	{
+		content: <Content>Lorem ipsum dolor sit amet.</Content>,
+		key: 1,
+		title: '1. Identify Vendor'
+	},
+	{
+		content: <Content>Consectetur adipiscing elit.</Content>,
+		headerRightContent: <FontAwesomeIcon icon={faCheckCircle} />,
+		key: 2,
+		title: '2. Map Policy'
+	},
+	{
+		content: (
+			<Content>
+				Sed do eiusmod tempor incididunt ut labore et dolore magna
+				aliqua.
+			</Content>
+		),
+		key: 3,
+		title: '3. Extract Resource Information'
+	}
+]
+
 const Template: Story<AccordionProps> = args => (
 	<Accordion {...args} panels={mockPanels} />
 )
 
 export const Default = Template.bind({})
 
-export const Exclusive = Template.bind({})
-Exclusive.args = {
-	exclusive: true
+export const ExpandOneAtATime = Template.bind({})
+ExpandOneAtATime.args = {
+	defaultExpandedKeys: [1],
+	expandMultiple: false
 }
 
 export const ExpandAll = Template.bind({})

src/components/Accordion/Animate.tsx

@@ -0,0 +1,32 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import React, { FC, ReactNode } from 'react'
+
+interface AnimateProps {
+	children: ReactNode
+	isExpanded: boolean
+}
+
+export const Animate: FC<AnimateProps> = ({
+	children,
+	isExpanded
+}: AnimateProps) => (
+	<AnimatePresence initial={false}>
+		{isExpanded && (
+			<motion.section
+				animate='open'
+				exit='collapsed'
+				initial='collapsed'
+				transition={{
+					duration: 0.8,
+					ease: [0.04, 0.62, 0.23, 0.98]
+				}}
+				variants={{
+					collapsed: { height: 0, opacity: 0 },
+					open: { height: 'auto', opacity: 1 }
+				}}
+			>
+				{children}
+			</motion.section>
+		)}
+	</AnimatePresence>
+)

src/components/Accordion/CollapseIndicator.tsx

@@ -1,4 +1,4 @@
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown } from '@fortawesome/pro-light-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { motion } from 'framer-motion'
 import React, { FC } from 'react'
@@ -12,11 +12,11 @@ export const CollapseIndicator: FC<CollapseIndicatorProps> = ({
 }: CollapseIndicatorProps) => (
 	<motion.div
 		animate={{
-			rotate: isCollapsed ? 0 : 180
+			rotate: isCollapsed ? -90 : 0
 		}}
 		transition={{ duration: 0.5 }}
 		whileHover={{ scale: 1.1 }}
 	>
-		<FontAwesomeIcon icon={faChevronDown} />
+		<FontAwesomeIcon icon={faChevronDown} size='sm' />
 	</motion.div>
 )

src/components/Accordion/Header.tsx

@@ -0,0 +1,48 @@
+import { CollapseIndicator } from './CollapseIndicator'
+import { createUseStyles } from 'react-jss'
+import { generateHeaderStyles } from './utils'
+import { Panel } from './types'
+import React, { FC } from 'react'
+import { styleguide, themes, ThemeType } from '../assets/styles'
+
+const { dark, light } = ThemeType
+const { spacing } = styleguide
+
+const useStyles = createUseStyles({
+	header: generateHeaderStyles(),
+	title: { color: themes[light].primary, marginLeft: spacing['s+'] },
+	titleWrapper: {
+		display: 'flex',
+		padding: spacing['s+'],
+		paddingLeft: 0
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $title': { color: themes[dark].state.hover }
+		}
+	}
+})
+
+interface Props extends Pick<Panel, 'title' | 'headerRightContent'> {
+	onHeaderClick?: () => void
+	isExpanded: boolean
+}
+
+export const Header: FC<Props> = ({
+	headerRightContent,
+	onHeaderClick,
+	isExpanded,
+	title
+}: Props) => {
+	const classes = useStyles()
+	return (
+		<div className={classes.header} onClick={onHeaderClick}>
+			<div className={classes.titleWrapper}>
+				<CollapseIndicator isCollapsed={!isExpanded} />
+				<span className={classes.title}>{title}</span>
+			</div>
+			{headerRightContent && headerRightContent}
+		</div>
+	)
+}

src/components/Accordion/PanelContent.tsx

@@ -1,47 +1,12 @@
-import { createUseStyles } from 'react-jss'
-import { styleguide } from '../assets/styles'
-import { AnimatePresence, motion } from 'framer-motion'
+import { Animate } from './Animate'
 import React, { FC, ReactNode } from 'react'
 
-const { spacing } = styleguide
-
-const useStyles = createUseStyles({
-	content: {
-		padding: spacing.m,
-		paddingTop: 0
-	}
-})
-
 interface PanelContentProps {
 	children: ReactNode
-	isActive: boolean
+	isExpanded: boolean
 }
 
 export const PanelContent: FC<PanelContentProps> = ({
 	children,
-	isActive
-}: PanelContentProps) => {
-	const classes = useStyles()
-
-	return (
-		<AnimatePresence initial={false}>
-			{isActive && (
-				<motion.section
-					animate='open'
-					exit='collapsed'
-					initial='collapsed'
-					transition={{
-						duration: 0.8,
-						ease: [0.04, 0.62, 0.23, 0.98]
-					}}
-					variants={{
-						collapsed: { height: 0, opacity: 0 },
-						open: { height: 'auto', opacity: 1 }
-					}}
-				>
-					<div className={classes.content}>{children}</div>
-				</motion.section>
-			)}
-		</AnimatePresence>
-	)
-}
+	isExpanded
+}: PanelContentProps) => <Animate isExpanded={isExpanded}>{children}</Animate>