Port & Refactor ResourceList component family from InfluxDB

src/Components/Label/Label.scss

@@ -20,6 +20,7 @@
   font-weight: 700;
   white-space: nowrap;
   margin: 0;
+  font-style: normal;
 }
 
 .label--clickable {

src/Components/Label/Label.tsx

@@ -4,12 +4,12 @@ import chroma from 'chroma-js'
 import classnames from 'classnames'
 
 // Types
-import {ComponentSize, InfluxColors} from '../../Types'
+import {StandardProps, ComponentSize, InfluxColors} from '../../Types'
 
 // Styles
 import './Label.scss'
 
-interface Props {
+interface Props extends StandardProps {
   /** Unique value to be returned when Label is clicked */
   id: string
   /** Name of the Label, appears inside the label */
@@ -24,10 +24,6 @@ interface Props {
   onDelete?: (id: string) => void
   /** Size of Label */
   size: ComponentSize
-  /** Test ID for Integration Tests */
-  testID: string
-  /** Class name for custom styles */
-  className?: string
 }
 
 interface State {

src/Components/ResourceList/Card/ResourceCard.md

@@ -0,0 +1,19 @@
+# ResourceCard
+
+`ResourceCard` is the parent component of the `ResourceCard` Family; every member of the component family can be accessed from this single import. `ResourceCard` is best used in tandem with `ResourceList`.
+
+### Usage
+```js
+import {ResourceCard} from '@influxdata/clockface'
+```
+
+Most of ResourceCard's props are render props with help enforce an opinionated structure on the layout. This ensures that if a card has all of its render props passed in the components look nice together. While any component can be passed into the render props we recommend using the components included in the ResourceCard family.
+
+### Example
+<!-- STORY -->
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/ResourceList/Card/ResourceCard.scss

@@ -0,0 +1,125 @@
+@import "../../../Styles/modules";
+
+/*
+  Resource Card
+  ------------------------------------------------------------------------------
+*/
+
+$resource-card--row-gap: $cf-marg-a - ($cf-border / 2);
+
+.resource-card {
+  width: 100%;
+}
+
+.resource-card,
+.resource-card--contents {
+  display: flex;
+}
+
+.resource-card {
+  flex-direction: row;
+  align-items: stretch;
+  position: relative;
+  color: $g13-mist;
+  background-color: $g3-castle;
+  border-radius: $cf-radius;
+  padding: $cf-marg-b $cf-marg-c;
+  padding-bottom: $cf-marg-b - $resource-card--row-gap;
+  margin-bottom: $cf-border;
+  transition: background-color 0.25s ease, color 0.25s ease;
+
+  &:hover {
+    color: $g16-pearl;
+    background-color: $g4-onyx;
+  }
+}
+
+.resource-card--contents {
+  flex-direction: column;
+  flex: 1 0 0;
+}
+
+.resource-card--row {
+  margin-bottom: $resource-card--row-gap;
+}
+
+.resource-list--toggle {
+  padding-right: $cf-marg-c;
+}
+
+.resource-list--meta {
+  display: flex;
+  align-items: center;
+  font-size: $form-xs-font;
+  font-weight: 600;
+  color: $g11-sidewalk;
+  padding-bottom: $cf-border;
+}
+
+.resource-list--meta-item {
+  transition: border-color 0.25s ease, color 0.25s ease;
+  border-right: $cf-border solid $g5-pepper;
+  padding-right: $cf-marg-b + $cf-marg-a;
+  margin-right: $cf-marg-b + $cf-marg-a;
+
+  &:last-child {
+    border-right: 0;
+    padding-right: 0;
+    margin-right: 0;
+  }
+
+  .resource-card:hover & {
+    color: $g15-platinum;
+    border-color: $g7-graphite;
+  }
+}
+
+.resource-list--context-menu {
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  position: absolute;
+  top: $cf-marg-b;
+  right: $cf-marg-b;
+
+  .resource-card:hover & {
+    opacity: 1;
+  }
+}
+
+/*
+  Disabled Card
+  ------------------------------------------------------------------------------
+*/
+
+.resource-card.resource-card__disabled {
+  background-color: rgba($g3-castle, 0.5);
+  color: $g9-mountain;
+  font-style: italic;
+
+  .resource-list--meta {
+    color: $g9-mountain;
+  }
+
+  &:hover .resource-list--meta {
+    color: $g12-forge;
+  }
+}
+
+/*
+  Depth Styling
+  ------------------------------------------------------------------------------
+*/
+
+.panel .resource-card,
+.tabs .resource-card {
+  background-color: $g4-onyx;
+
+  &:hover {
+    background-color: $g5-pepper;
+  }
+}
+
+.panel .resource-card.resource-card__disabled,
+.tabs .resource-card.resource-card__disabled {
+  background-color: rgba($g4-onyx, 0.5);
+}

src/Components/ResourceList/Card/ResourceCard.tsx

@@ -0,0 +1,115 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import classnames from 'classnames'
+
+// Components
+import {ResourceCardName} from './ResourceCardName'
+import {ResourceCardEditableName} from './ResourceCardEditableName'
+import {ResourceCardDescription} from './ResourceCardDescription'
+
+// Types
+import {StandardProps} from '../../../Types'
+
+// Styles
+import './ResourceCard.scss'
+
+interface Props extends StandardProps {
+  /** Renders the name component in its designated place */
+  name: JSX.Element
+  /** Renders the card with disabled styles */
+  disabled?: boolean
+  /** Renders the description component in its designated place */
+  description?: JSX.Element
+  /** Renders the labelling components in their designated place */
+  labels?: JSX.Element
+  /** Renders horizontal list of meta items in their designated place  */
+  metaData?: JSX.Element[]
+  /** Renders the context menu component in its designated place */
+  contextMenu?: JSX.Element
+  /** Renders the toggle component in its designated place */
+  toggle?: JSX.Element
+}
+
+export class ResourceCard extends PureComponent<Props> {
+  public static readonly displayName = 'ResourceCard'
+
+  public static defaultProps = {
+    testID: 'resource-card',
+  }
+
+  public static Name = ResourceCardName
+  public static EditableName = ResourceCardEditableName
+  public static Description = ResourceCardDescription
+
+  public render() {
+    const {description, labels, children, testID, name} = this.props
+
+    return (
+      <div className={this.className} data-testid={testID}>
+        {this.toggle}
+        <div className="resource-card--contents">
+          <div className="resource-card--row">{name}</div>
+          {description ? (
+            <div className="resource-card--row">{description}</div>
+          ) : null}
+          {this.formattedMetaData}
+          {labels ? <div className="resource-card--row">{labels}</div> : null}
+          {children ? (
+            <div className="resource-card--row">{children}</div>
+          ) : null}
+        </div>
+        {this.contextMenu}
+      </div>
+    )
+  }
+
+  private get className(): string {
+    const {disabled, className} = this.props
+
+    return classnames('resource-card', {
+      'resource-card__disabled': disabled,
+      [`${className}`]: className,
+    })
+  }
+
+  private get toggle(): JSX.Element | undefined {
+    const {toggle} = this.props
+
+    if (toggle) {
+      return <div className="resource-list--toggle">{toggle}</div>
+    }
+
+    return
+  }
+
+  private get formattedMetaData(): JSX.Element | undefined {
+    const {metaData} = this.props
+
+    if (metaData) {
+      return (
+        <div className="resource-card--row resource-list--meta">
+          {React.Children.map(metaData, (metaItem: JSX.Element) => (
+            <div
+              className="resource-list--meta-item"
+              data-testid="resource-list--meta-item"
+            >
+              {metaItem}
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    return
+  }
+
+  private get contextMenu(): JSX.Element | undefined {
+    const {contextMenu} = this.props
+
+    if (contextMenu) {
+      return <div className="resource-list--context-menu">{contextMenu}</div>
+    }
+
+    return
+  }
+}

src/Components/ResourceList/Card/ResourceCardDescription.md

@@ -0,0 +1,24 @@
+# ResourceCardDescription
+
+`ResourceCardDescription` is intended to be passed into the `description` prop in `ResourceCard`. It can be accessed via the single `ResourceCard` import as a subclass.
+
+### Usage
+```js
+import {ResourceCard} from '@influxdata/clockface'
+```
+```js
+<ResourceCard.Description />
+```
+
+### Interactions
+
+This component facilitates changes to saved text via keyboard and mouse. There are 2 modes: view and edit. When in edit mode a text input is visible and always focused. Hitting `enter` or blurring the input will cause it to fire `onUpdate` and return to view mode.
+
+### Example
+<!-- STORY -->
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/ResourceList/Card/ResourceCardDescription.scss

@@ -0,0 +1,78 @@
+@import "../../../Styles/modules.scss";
+
+/*
+  Resource Editable Description
+  ------------------------------------------------------------------------------
+*/
+
+.resource-description {
+  width: 100%;
+  min-height: $form-xs-height;
+}
+
+.resource-description--preview,
+.input.resource-description--input > input {
+  font-size: $form-xs-font;
+  font-weight: 500;
+  font-family: $cf-text-font;
+}
+
+.resource-description--preview,
+.resource-description--input {
+  position: relative;
+  width: 100%;
+}
+
+.resource-description--preview {
+  padding-top: $cf-marg-a;
+  width: auto;
+  display: inline-block;
+  border-radius: $cf-radius;
+  position: relative;
+  overflow: hidden;
+  @include no-user-select();
+  color: $g13-mist;
+  transition: color 0.25s ease, background-color 0.25s ease,
+    border-color 0.25s ease;
+  line-height: $form-xs-font + $cf-border;
+
+  .icon {
+    position: relative;
+    top: -2px;
+    display: inline-block;
+    margin-left: $cf-marg-b;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    color: $g11-sidewalk;
+  }
+
+  &:hover .icon {
+    opacity: 1;
+  }
+
+  &.untitled {
+    color: $g9-mountain;
+    font-style: italic;
+  }
+
+  &:hover {
+    cursor: text;
+    color: $g20-white;
+  }
+}
+
+/* Ensure placeholder text matches font weight of title */
+.input.resource-description--input > input {
+  &::-webkit-input-placeholder {
+    font-weight: 500 !important;
+  }
+  &::-moz-placeholder {
+    font-weight: 500 !important;
+  }
+  &:-ms-input-placeholder {
+    font-weight: 500 !important;
+  }
+  &:-moz-placeholder {
+    font-weight: 500 !important;
+  }
+}