New: Project Aphrodite

frontend/src/Components/DescriptionList/DescriptionList.css

@@ -0,0 +1,4 @@
+.descriptionList {
+  margin-top: 0;
+  margin-bottom: 0;
+}

frontend/src/Components/DescriptionList/DescriptionList.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import styles from './DescriptionList.css';
+
+class DescriptionList extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      children
+    } = this.props;
+
+    return (
+      <dl className={className}>
+        {children}
+      </dl>
+    );
+  }
+}
+
+DescriptionList.propTypes = {
+  className: PropTypes.string.isRequired,
+  children: PropTypes.node
+};
+
+DescriptionList.defaultProps = {
+  className: styles.descriptionList
+};
+
+export default DescriptionList;

frontend/src/Components/DescriptionList/DescriptionListItem.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import DescriptionListItemTitle from './DescriptionListItemTitle';
+import DescriptionListItemDescription from './DescriptionListItemDescription';
+
+class DescriptionListItem extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      titleClassName,
+      descriptionClassName,
+      title,
+      data
+    } = this.props;
+
+    return (
+      <span>
+        <DescriptionListItemTitle
+          className={titleClassName}
+        >
+          {title}
+        </DescriptionListItemTitle>
+
+        <DescriptionListItemDescription
+          className={descriptionClassName}
+        >
+          {data}
+        </DescriptionListItemDescription>
+      </span>
+    );
+  }
+}
+
+DescriptionListItem.propTypes = {
+  titleClassName: PropTypes.string,
+  descriptionClassName: PropTypes.string,
+  title: PropTypes.string,
+  data: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
+};
+
+export default DescriptionListItem;

frontend/src/Components/DescriptionList/DescriptionListItemDescription.css

@@ -0,0 +1,13 @@
+.description {
+  line-height: $lineHeight;
+}
+
+.description {
+  margin-left: 0;
+}
+
+@media (min-width: 768px) {
+  .description {
+    margin-left: 180px;
+  }
+}

frontend/src/Components/DescriptionList/DescriptionListItemDescription.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './DescriptionListItemDescription.css';
+
+function DescriptionListItemDescription(props) {
+  const {
+    className,
+    children
+  } = props;
+
+  return (
+    <dd className={className}>
+      {children}
+    </dd>
+  );
+}
+
+DescriptionListItemDescription.propTypes = {
+  className: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
+};
+
+DescriptionListItemDescription.defaultProps = {
+  className: styles.description
+};
+
+export default DescriptionListItemDescription;

frontend/src/Components/DescriptionList/DescriptionListItemTitle.css

@@ -0,0 +1,18 @@
+.title {
+  line-height: $lineHeight;
+}
+
+.title {
+  font-weight: bold;
+}
+
+@media (min-width: 768px) {
+  .title {
+    @add-mixin truncate;
+
+    float: left;
+    clear: left;
+    width: 160px;
+    text-align: right;
+  }
+}

frontend/src/Components/DescriptionList/DescriptionListItemTitle.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './DescriptionListItemTitle.css';
+
+function DescriptionListItemTitle(props) {
+  const {
+    className,
+    children
+  } = props;
+
+  return (
+    <dt className={className}>
+      {children}
+    </dt>
+  );
+}
+
+DescriptionListItemTitle.propTypes = {
+  className: PropTypes.string.isRequired,
+  children: PropTypes.string
+};
+
+DescriptionListItemTitle.defaultProps = {
+  className: styles.title
+};
+
+export default DescriptionListItemTitle;