Skip to content

Commit

Permalink
feat: Add some polish to the prop list
Browse files Browse the repository at this point in the history
jerelmiller committed Jun 15, 2020
1 parent 52e0c85 commit c5cc80f
Showing 2 changed files with 26 additions and 25 deletions.
30 changes: 17 additions & 13 deletions src/components/PropList.js
Original file line number Diff line number Diff line change
@@ -20,28 +20,28 @@ const PropTypeInfo = ({ type }) => {
const { itemTypes } = type.meta;

return itemTypes.raw === 'oneOf' ? (
<div className={styles.listLike}>
<code className={styles.listLike}>
<div>{'<Array of'}</div>
<div className={styles.arg}>
<PropTypeInfo type={itemTypes} />
</div>
<div>{'>'}</div>
</div>
</code>
) : (
<PropTypeInfo type={itemTypes} />
);
}
case 'oneOf':
return (
<div className={styles.listLike}>
<code className={styles.listLike}>
<div>{'<One of'}</div>
<div className={styles.arg}>
{type.meta.constants.map((constant) => (
<div key={constant}>{constant},</div>
))}
</div>
<div>{'>'}</div>
</div>
</code>
);
case 'oneOfType':
return type.meta.types.map((type, idx) => (
@@ -86,20 +86,24 @@ const PropList = ({ propTypes }) => {
return (
<div key={name} className={styles.container}>
<div className={styles.info}>
<code>{name}</code>
{isRequired && <span className={styles.flagged}>required</span>}
{deprecation && (
<span className={styles.flagged}>deprecated</span>
)}
<div className={styles.type}>{type.name}</div>
<div>
<code className={styles.propName}>{name}</code>
{isRequired && (
<span className={styles.flagged}>required</span>
)}
{deprecation && (
<span className={styles.flagged}>deprecated</span>
)}
</div>
<code className={styles.type}>{type.name}</code>
{defaultValue !== undefined && (
<div className={styles.default}>
<p>DEFAULT</p>
<p>{String(defaultValue)}</p>
<div className={styles.label}>DEFAULT</div>
<code>{String(defaultValue)}</code>
</div>
)}
</div>
<div className={styles.propInfo}>
<div>
{deprecation && (
<div className={styles.deprecation}>
<div className={styles.deprecationDate}>
21 changes: 9 additions & 12 deletions src/components/PropList.module.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.container {
display: flex;
display: grid;
grid-template-columns: 30% 1fr;
grid-gap: 1rem;

&:not(:last-child) {
margin-bottom: 2rem;
@@ -8,14 +10,13 @@
}
}

.propName {
font-weight: bold;
}

.info {
width: 30%;
word-break: break-all;

code {
font-weight: bold;
}

h3 {
margin-top: 0;
}
@@ -25,8 +26,9 @@
margin-top: 2rem;
color: var(--color-neutrals-700);

p:first-of-type {
.label {
font-size: 0.75rem;
font-weight: bold;
}
}

@@ -46,10 +48,6 @@
margin-bottom: 1rem;
}

.propInfo {
width: 70%;
}

.markdownContainer > *:first-child {
margin-top: 0;
}
@@ -73,7 +71,6 @@
}

.listLike {
font-family: var(--code-font);
font-size: 0.875rem;
color: var(--color-neutrals-600);
max-height: 320px;

0 comments on commit c5cc80f

Please sign in to comment.