Skip to content

Commit

Permalink
add all pill types and sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ychhabra-eightfold
ychhabra-eightfold committed Apr 1, 2022
1 parent f986424 commit 11980e9
Show file tree
Hide file tree
Showing 4 changed files with 262 additions and 28 deletions.
24 changes: 17 additions & 7 deletions src/components/Pills/Pill.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React, { FC } from 'react';
import { PillProps } from './Pills.types';
import { PillProps, PillSize, PillType } from './Pills.types';
import { classNames } from '../../shared/utilities';
import { Icon, IconName, IconSize } from '../Icon';

import styles from './pills.module.scss';

export const Pill: FC<PillProps> = ({
color,
children,
label,
icon,
onClose,
theme = 'blue',
closable,
onClose,
onClick,
buttonContent,
type = PillType.default,
size = PillSize.Large,
}) => {
const tagClassName: string = classNames([
styles.tagPills,
Expand All @@ -23,6 +26,8 @@ export const Pill: FC<PillProps> = ({
{ [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 }}>
Expand All @@ -33,9 +38,14 @@ export const Pill: FC<PillProps> = ({
className={styles.icon}
/>
)}
{children}
{closable && (
<button onClick={onClose} className={styles.closeIconWrapper}>
<span className={styles.label}>{label}</span>
{type === PillType.withButton && (
<button onClick={onClick} className={styles.button}>
{buttonContent}
</button>
)}
{type === PillType.closable && (
<button onClick={onClose} className={styles.closeButton}>
<Icon path={IconName.mdiClose} size={IconSize.Small} />
</button>
)}
Expand Down
220 changes: 202 additions & 18 deletions src/components/Pills/Pills.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Pill } from './';
import { Pill, PillSize, PillType } from './';
import { OcThemeNames } from '../ConfigProvider';
import { IconName } from '../Icon';
import { Icon, IconName, IconSize } from '../Icon';

export default {
title: 'Pill',
Expand All @@ -21,7 +21,7 @@ const themes: OcThemeNames[] = [

export const Pills = () => (
<>
<h2>Pills</h2>
<h2>Pills ({PillSize.Large})</h2>
<div style={{ display: 'flex', gap: '30px' }}>
<div
style={{
Expand All @@ -31,11 +31,7 @@ export const Pills = () => (
}}
>
{themes.map((theme) => (
<Pill theme={theme} key={theme}>
<span style={{ textTransform: 'capitalize' }}>
{theme}
</span>
</Pill>
<Pill label={theme} theme={theme} key={theme} />
))}
</div>

Expand All @@ -47,11 +43,93 @@ export const Pills = () => (
}}
>
{themes.map((theme) => (
<Pill theme={theme} key={theme} closable={true}>
<span style={{ textTransform: 'capitalize' }}>
{theme}
</span>
</Pill>
<Pill
label={theme}
theme={theme}
key={theme}
type={PillType.closable}
/>
))}
</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}
buttonContent={
<>
<Icon
path={IconName.mdiThumbUpOutline}
size={IconSize.Small}
/>
<span style={{ marginLeft: '4px' }}>2</span>
</>
}
/>
))}
</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}
/>
))}
</div>
<div
Expand All @@ -63,14 +141,120 @@ export const Pills = () => (
>
{themes.map((theme) => (
<Pill
label={theme}
theme={theme}
key={theme}
icon={IconName.mdiInformationOutline}
>
<span style={{ textTransform: 'capitalize' }}>
{theme}
</span>
</Pill>
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}
buttonContent={
<>
<Icon
path={IconName.mdiThumbUpOutline}
size={IconSize.Small}
/>
<span style={{ marginLeft: '4px' }}>2</span>
</>
}
/>
))}
</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}
/>
))}
</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}
buttonContent={
<>
<Icon
path={IconName.mdiThumbUpOutline}
size={IconSize.Small}
/>
<span style={{ marginLeft: '4px' }}>2</span>
</>
}
/>
))}
</div>
</div>
Expand Down
18 changes: 17 additions & 1 deletion src/components/Pills/Pills.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,26 @@ import * as React from 'react';
import { IconName } from '../Icon';
import { OcThemeNames } from '../ConfigProvider';

export enum PillType {
default = 'default',
closable = 'closable',
withButton = 'withButton',
}

export enum PillSize {
Large = 'large',
Medium = 'medium',
Small = 'small',
}

export interface PillProps {
label: string;
theme?: OcThemeNames;
color?: string;
icon?: IconName;
closable?: boolean;
type?: PillType;
size?: PillSize;
buttonContent?: React.ReactNode;
onClose?: React.MouseEventHandler<HTMLButtonElement>;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
28 changes: 26 additions & 2 deletions src/components/Pills/pills.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,23 @@
width: fit-content;
display: flex;
align-items: center;
font-weight: $text-font-weight-semibold;

.label {
font-weight: $text-font-weight-semibold;
font-size: $text-font-size-5;
}

&.medium {
.label {
font-size: $text-font-size-3;
}
}

&.small {
.label {
font-size: $text-font-size-2;
}
}

&:hover {
--bg: var(--hover-bg);
Expand Down Expand Up @@ -70,13 +86,21 @@
--hover-bg: var(--grey-color-30);
}

.close-icon-wrapper {
.button,
.close-button {
border: none;
background: inherit;
color: inherit;
padding: 0;
cursor: pointer;
margin: 0 0 0 $space-xxs;
display: flex;
align-items: center;
}

.label + .button:not(:empty) {
border-left: 1px solid var(--label);
padding-left: $space-xxs;
}

.icon {
Expand Down

0 comments on commit 11980e9

Please sign in to comment.