Skip to content

✨ new(accordion) added blocks in accordion. #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: development
Choose a base branch
from
+438 −3
Open

✨ new(accordion) added blocks in accordion. #170

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9d5b263
initial changes
creador-dev Apr 1, 2022
408692e
accordion blocks
creador-dev Apr 4, 2022
5650bf1
added published and draft accordion blocks
creador-dev Apr 4, 2022
954647c
added published and draft accordion blocks
creador-dev Apr 4, 2022
1bd8f06
added published and draft accordion blocks
creador-dev Apr 4, 2022
c10866e
added published and draft accordion blocks
creador-dev Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 174 additions & 0 deletions packages/react-accordion/docs/demo-data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
import React from 'react'

const monthDays = [
'Aug 12 2018', 'Aug 13 2018', 'Aug 14 2018', 'Aug 15 2018', 'Aug 16 2018', 'Aug 17 2018', 'Aug 18 2018', 'Aug 19 2018', 'Aug 20 2018', 'Aug 21 2018',
'Aug 22 2018', 'Aug 23 2018', 'Aug 24 2018', 'Aug 25 2018', 'Aug 26 2018', 'Aug 27 2018', 'Aug 28 2018', 'Aug 29 2018', 'Aug 30 2018', 'Aug 31, 2018',
'Sep 1, 2018', 'Sep 2, 2018', 'Sep 3, 2018', 'Sep 4, 2018', 'Sep 5, 2018', 'Sep 6, 2018', 'Sep 7, 2018', 'Sep 8, 2018', 'Sep 9, 2018', 'Sep 10, 2018'
];

const views = [
300, 310, 305, 315, 300, 290, 270, 280, 275, 295,
320, 315, 310, 305, 310, 305, 310, 320, 330, 340,
330, 320, 315, 320, 325, 320, 315, 310, 305, 310
];

const viewsDraft = [
300, 310, 305, 315, 300, 290, 270, 280, 275, 295,
320, 315, 310, 305, 310, 305, 310, 320, 330, 340,
330, 320, 315, 320, 325, 320, 100, 10, 0, 0
];

const submissions = [
220, 230, 220, 225, 215, 230, 200, 210, 205, 195,
190, 150, 160, 155, 165, 170, 180, 160, 200, 180,
205, 210, 215, 220, 205, 210, 205, 210, 220, 230
];

const submissionsDraft = [
220, 230, 220, 225, 215, 230, 200, 210, 205, 195,
190, 150, 160, 155, 165, 170, 180, 160, 200, 180,
205, 210, 215, 220, 205, 210, 0, 0, 0, 0
];

const chartData = {
labels: monthDays,
datasets: [
{
label: 'Submissions',
data: submissions,
fill: 'origin',
backgroundColor: [
'#E1F6FF'
],
borderColor: [
'#17A8E3'
],
borderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderColor: '#17A8E3',
pointHoverBackgroundColor: '#17A8E3'
},
{
label: 'Views',
data: views,
fill: 'origin',
backgroundColor: [
'#F8F8F8'
],
borderColor: [
'#DDDDDD'
],
borderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderColor: '#DDDDDD',
pointHoverBackgroundColor: '#DDDDDD'
}
]
};

const chartDataDraft = {
labels: monthDays,
datasets: [
{
label: 'Submissions',
data: submissionsDraft,
fill: 'origin',
backgroundColor: [
'#E1F6FF'
],
borderColor: [
'#17A8E3'
],
borderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderColor: '#17A8E3',
pointHoverBackgroundColor: '#17A8E3'
},
{
label: 'Views',
data: viewsDraft,
fill: 'origin',
backgroundColor: [
'#F8F8F8'
],
borderColor: [
'#DDDDDD'
],
borderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderColor: '#DDDDDD',
pointHoverBackgroundColor: '#DDDDDD'
}
]
};

const chartOptions = {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
xAxes: {
display: false,
gridLines: {
color: 'rgba(0, 0, 0, 0)'
}
},
yAxes: {
display: false,
gridLines: {
color: 'rgba(0, 0, 0, 0)'
},
ticks: {
beginAtZero: false,
min: 0,
max: 350,
stepSize: 1
}
}
},
elements: {
line: {
tension: 0
},
point: {
radius: 0
}
},
tooltips: {
custom: function( tooltip ) {

if ( ! tooltip ) {
return;
}

// Disable displaying the color box
tooltip.displayColors = false;
},
callbacks: {
title: function( tooltipItem, data ) {
if ( 0 === tooltipItem[0].datasetIndex ) {
return tooltipItem[0].yLabel + ' Submissions';
} else if ( 1 === tooltipItem[0].datasetIndex ) {
return tooltipItem[0].yLabel + ' Views';
}
},
label: function( tooltipItem, data ) {
return tooltipItem.xLabel;
},

// Set label text color
labelTextColor: function( tooltipItem, chart ) {
return '#AAAAAA';
}
}
}
};

export {
chartData,
chartDataDraft,
chartOptions
}
242 changes: 242 additions & 0 deletions packages/react-accordion/docs/react-accordion-blocks.stories.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
import React, { useState, useEffect } from 'react';
import { Box, BoxBody } from '@wpmudev/react-box';
import { Accordion, AccordionItemHeader, AccordionItemBody } from '../lib/react-accordion';

import { Dropdown } from '@wpmudev/react-dropdown';
import { Button } from '@wpmudev/react-button';
import { Line } from "react-chartjs-2";
import { Chart, registerables } from 'chart.js';

import { chartData, chartDataDraft, chartOptions } from './demo-data';

Chart.register(...registerables);

export default {
title: 'Containers/Accordion/Blocks'
}

const Template = ({ children, ...props }) => {

const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
if (isOpen) {
const timer = setTimeout(() => {
setIsLoading(false);
}, 1200);
return () => clearTimeout(timer);
}
}, [isOpen]);

const toggle = e => {
if (
'sui-dropdown' !== e.target.className ||
'sui-button-icon undefined' !== e.target.className ||
'sui-icon-widget-settings-config' !== e.target.className
) {
setIsOpen(!isOpen);
setIsLoading(!isOpen);
}
};

let clazz = !isOpen
? 'sui-accordion-item'
: 'sui-accordion-item sui-accordion-item--open';

return (
<Box>

<Accordion { ...props }>

{ children.map( ( child, key ) => (
<div className={clazz} key={ key }>
<AccordionItemHeader
title={ child.title }
trimmed={ child.trimmed }
tag={ child.tag }
lastDate={ child.lastDate }
{ ... null !== child.image && '' !== child.image && {
image: child.image
} }
onClick={ e => toggle(e) }
>
<div>
<Button design="ghost" icon="pencil" label="Edit"/>
<Dropdown position="right">
<div icon="eye" name="Preview" />
<div icon="community-people" name="View" />
<div icon="page-multiple" name="Duplicate" />
<div icon="cloud-migration" name="Export" />
<div icon="trash" name="Delete" />
</Dropdown>
</div>
</AccordionItemHeader>

<AccordionItemBody>
{ child.chartTitles && (
<ul className={ `sui-accordion-item-data ${isLoading && ('sui-onload')}` }>
{child.chartTitles}
</ul>
)}

<div className={ `sui-chartjs sui-chartjs-animated ${!isLoading && ('sui-chartjs-loaded')}` }>

<div className="sui-chartjs-message sui-chartjs-message--loading">
<p><span className="sui-icon-loader sui-loading"></span> Loading data...</p>
</div>

{child.tag !== 'Published' && child.infoMessage && (
<div className={`sui-chartjs-message ${ !child.chartData ? ('sui-chartjs-message--empty') : '' }`}>
<p><span className="sui-icon-info"></span> {child.infoMessage}</p>
</div>
)}

<div className="sui-chartjs-canvas">
{child.chartData && (
<Line data={ child.chartData } options={ child.chartOptions } fill="start" />
)}
</div>

</div>
</AccordionItemBody>
</div>
) ) }

</Accordion>

</Box>
);
}

export const primary = Template.bind({});
primary.storyName = 'Published';
primary.args = {
classes: "sui-accordion-block",
children: [
{
title: 'This title can be cut-off (trim). Resize to test.',
tag: "Published",
trimmed: true,
lastDate: "March 11, 2017 @ 10:18am",
chartTitles: (
<>
<li data-col="large">
<strong>Last Submission</strong>
<span>March 11, 2017 @ 10:18am</span>
</li>
<li>
<strong>Views</strong>
<span>10000</span>
</li>
<li>
<strong>Submissions</strong>
<a href="">1000</a>
</li>
<li>
<strong>Conversion Rate</strong>
<span>10%</span>
</li>
<li>
<strong>Fields</strong>
<span>4</span>
</li>
</>
),
chartData: chartData,
chartOptions: chartOptions,
}
]
};

export const secondary = Template.bind({});
secondary.storyName = 'Draft';
secondary.args = {
classes: "sui-accordion-block",
children: [
{
title: 'Title',
tag: "Draft",
trimmed: true,
lastDate: "March 12, 2018 @ 10:18am",
infoMessage: "This form is in draft state, so we’ve paused collecting data until you publish it live.",
chartTitles: (
<>
<li data-col="large">
<strong>Last Submission</strong>
<span>March 11, 2017 @ 10:18am</span>
</li>

<li>
<strong>Views</strong>
<span>10000</span>
</li>

<li>
<strong>Submissions</strong>
<a href="">1000</a>
</li>

<li>
<strong>Conversion Rate</strong>
<span>10%</span>
</li>

<li>
<strong>Fields</strong>
<span>4</span>
</li>
</>
),
chartData: chartDataDraft,
chartOptions: chartOptions,
}
]
};

secondary.argTypes = {};

export const ternary = Template.bind({});
ternary.storyName = 'Empty';
ternary.args = {
classes: "sui-accordion-block",
children: [
{
title: 'Title',
tag: "Draft",
trimmed: true,
lastDate: "March 12, 2018 @ 10:18am",
infoMessage: "This form is still in draft state. You can test your form, but we won't start collecting conversion data until you publish it live.",
chartTitles: (
<>
<li data-col="large">
<strong>Last Submission</strong>
<span>Never</span>
</li>

<li>
<strong>Views</strong>
<span>0</span>
</li>

<li>
<strong>Submissions</strong>
<a href="">0</a>
</li>

<li>
<strong>Conversion Rate</strong>
<span>0%</span>
</li>

<li>
<strong>Fields</strong>
<span>7</span>
</li>
</>
)
}
]
};

ternary.argTypes = {};
23 changes: 20 additions & 3 deletions packages/react-accordion/lib/react-accordion.js
View file
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ const useToggle = ( initialValue = false ) => {

const Accordion = ({ children, ...props }) => {
return (
<div className="sui-accordion" { ...props }>
<div className={ `sui-accordion ${props.classes ? props.classes : ''}` } { ...props }>
{ children }
</div>
);
@@ -53,6 +53,8 @@ const AccordionItem = ({
icon={ icon }
image={ image }
onClick={ setIsOpen }
tag={ props.tag }
trimmed={ props.trimmed }
/>
<AccordionItemBody>
{ children }
@@ -84,9 +86,17 @@ const AccordionItemHeader = ({
? ' sui-accordion-col-' + titleSize
: '';

const tagContent = 'undefined' !== typeof props.tag && '' !== props.tag && (
<span className={ props.tag === 'Published' ? "sui-tag sui-tag-blue" : "sui-tag" }>{props.tag}</span>
);

const titleContent = 'undefined' !== typeof props.trimmed && '' !== props.trimmed ?
<span className="sui-trim-text">{title}{tagContent}</span>
: title;

const titleColumn = (
<div className={ `sui-accordion-item-title${ titleColumnSize }` }>
{ titleColumnIcon }{ titleColumnImage }{ title }
<div className={ `sui-accordion-item-title${ titleColumnSize }` + (props.trimmed ? (' sui-trim-title') : '') }>
{ titleColumnIcon }{ titleColumnImage }{ titleContent }
</div>
);

@@ -120,12 +130,19 @@ const AccordionItemHeader = ({
</div>
);

const lastdate = (props.lastDate && (
<div className="sui-accordion-item-date">
<strong>Last Submission</strong> {props.lastDate}
</div>
));

return (
<div
className="sui-accordion-item-header"
{ ...props }
>
{ titleColumn }
{ lastdate }
{ countChildren > 0 ? columns : actions }
</div>
);
2 changes: 2 additions & 0 deletions packages/react-accordion/package.json
View file
Original file line number Diff line number Diff line change
@@ -48,6 +48,8 @@
},
"dependencies": {
"@wpmudev/react-button-icon": "^1.1.0",
"chart.js": "^3.7.1",
"react-chartjs-2": "^4.0.1",
"styled-components": "^5.3.0"
}
}