Skip to content

Commit

Permalink
feat: Adds octuple pills component (#22)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ychhabra-eightfold
ychhabra-eightfold authored Apr 1, 2022
1 parent a74420a commit 75e7c7f
Show file tree
Hide file tree
Showing 6 changed files with 514 additions and 6 deletions.
9 changes: 3 additions & 6 deletions src/components/Icon/icon.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
.iconWrapper {
display: inline-block;
.icon-wrapper {
display: flex;
align-items: center;
margin: 0;
padding: 0;

svg {
vertical-align: middle;
}
}
63 changes: 63 additions & 0 deletions src/components/Pills/Pill.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { FC } from 'react';
import { PillProps, PillSize, PillType } from './Pills.types';
import { classNames } from '../../shared/utilities';
import { Icon, IconName, IconSize } from '../Icon';

import styles from './pills.module.scss';
import { ButtonSize, DefaultButton } from '../Button';

export const Pill: FC<PillProps> = ({
color,
label,
icon,
theme = 'blue',
onClose,
onClick,
closeButtonProps,
pillButtonProps,
type = PillType.default,
size = PillSize.Large,
}) => {
const tagClassName: string = classNames([
styles.tagPills,
{ [styles.red]: theme === 'red' },
{ [styles.orange]: theme === 'orange' },
{ [styles.yellow]: theme === 'yellow' },
{ [styles.green]: theme === 'green' },
{ [styles.bluegreen]: theme === 'bluegreen' },
{ [styles.blue]: theme === 'blue' },
{ [styles.violet]: theme === 'violet' },
{ [styles.grey]: theme === 'grey' },
{ [styles.medium]: size === PillSize.Medium },
{ [styles.small]: size === PillSize.Small },
]);
return (
<div className={tagClassName} style={{ color }}>
{icon && (
<Icon
path={icon}
size={IconSize.Small}
className={styles.icon}
/>
)}
<span className={styles.label}>{label}</span>
{type === PillType.withButton && (
<DefaultButton
{...pillButtonProps}
onClick={onClick}
size={ButtonSize.Small}
className={styles.button}
/>
)}
{type === PillType.closable && (
<DefaultButton
{...closeButtonProps}
icon={IconName.mdiClose}
onClick={onClose}
size={ButtonSize.Small}
className={styles.closeButton}
/>
)}
</div>
);
};
259 changes: 259 additions & 0 deletions src/components/Pills/Pills.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
import React from 'react';
import { Pill, PillSize, PillType } from './';
import { OcThemeNames } from '../ConfigProvider';
import { Icon, IconName, IconSize } from '../Icon';

export default {
title: 'Pill',
component: Pill,
};

const themes: OcThemeNames[] = [
'red',
'orange',
'yellow',
'green',
'bluegreen',
'blue',
'violet',
'grey',
];

export const Pills = () => (
<>
<h2>Pills ({PillSize.Large})</h2>
<div style={{ display: 'flex', gap: '30px' }}>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill label={theme} theme={theme} key={theme} />
))}
</div>

<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
type={PillType.closable}
closeButtonProps={{
ariaLabel: 'Close',
}}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
icon={IconName.mdiInformationOutline}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
type={PillType.withButton}
pillButtonProps={{
icon: IconName.mdiThumbUpOutline,
text: '2',
ariaLabel: 'Thumbs up',
}}
/>
))}
</div>
</div>
<br />
<br />
<br />
<h2>Pills ({PillSize.Medium})</h2>
<div style={{ display: 'flex', gap: '30px' }}>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
size={PillSize.Medium}
/>
))}
</div>

<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
size={PillSize.Medium}
type={PillType.closable}
closeButtonProps={{
ariaLabel: 'Close',
}}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
icon={IconName.mdiInformationOutline}
size={PillSize.Medium}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
type={PillType.withButton}
size={PillSize.Medium}
pillButtonProps={{
icon: IconName.mdiThumbUpOutline,
text: '2',
ariaLabel: 'Thumbs up',
}}
/>
))}
</div>
</div>
<br />
<br />
<br />
<h2>Pills ({PillSize.Small})</h2>
<div style={{ display: 'flex', gap: '30px' }}>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
size={PillSize.Small}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
size={PillSize.Small}
type={PillType.closable}
closeButtonProps={{
ariaLabel: 'Close',
}}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
icon={IconName.mdiInformationOutline}
size={PillSize.Small}
/>
))}
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
type={PillType.withButton}
size={PillSize.Small}
pillButtonProps={{
icon: IconName.mdiThumbUpOutline,
text: '2',
ariaLabel: 'Thumbs up',
}}
/>
))}
</div>
</div>
</>
);
Loading

0 comments on commit 75e7c7f

Please sign in to comment.