feat(ItemLayout): added ItemLayout component (#60)

* -added item layout component identical to the list item implementation

* -added changelog and fixed examples

* -added CSS props for the parts of the Item layout
-updated ListItem component to work with the ItemLayout

* -merging changes

* -fixed test

* -added end media to the examples containing knobs in the item layout component

* -fixed issue with the header item layout font size

* -moved styling from ItemLayout to ListItem
-removed important prop from ItemLayout

* -removed console logs

* -removed unused variables from the list item variables

* -removed some comments

* -ensuring proper propagating of the styles

CHANGELOG.md

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `color` variables to Header and Header.Description @kuzhelov ([#72](https://github.com/stardust-ui/react/pull/72))
+- Add `ItemLayout` component @mnajdova ([#60](https://github.com/stardust-ui/react/pull/60))
 
 <!--------------------------------[ v0.2.6 ]------------------------------- -->
 ## [v0.2.6](https://github.com/stardust-ui/react/tree/v0.2.6) (2018-08-09)

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { ItemLayout } from '@stardust-ui/react'
+
+const ItemLayoutExampleContent = () => (
+  <ItemLayout content="Program the sensor to the SAS alarm through the haptic SQL card!" />
+)
+
+export default ItemLayoutExampleContent

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ItemLayout } from '@stardust-ui/react'
+
+const ItemLayoutExampleContentMediaShorthand = () => (
+  <ItemLayout
+    content="Program the sensor to the SAS alarm through the haptic SQL card!"
+    contentMedia="7:26:56 AM"
+  />
+)
+
+export default ItemLayoutExampleContentMediaShorthand

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { ItemLayout } from '@stardust-ui/react'
+
+const ellipsis = <span>&hellip;</span>
+
+const ItemLayoutExampleEndMediaShorthand = () => (
+  <ItemLayout
+    content="Program the sensor to the SAS alarm through the haptic SQL card!"
+    endMedia={ellipsis}
+  />
+)
+
+export default ItemLayoutExampleEndMediaShorthand

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ItemLayout } from '@stardust-ui/react'
+
+const ItemLayoutExampleHeader = () => <ItemLayout header="Irving Kuhic" />
+
+export default ItemLayoutExampleHeader

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ItemLayout } from '@stardust-ui/react'
+
+const ItemLayoutExampleHeaderContentShorthand = () => (
+  <ItemLayout
+    header="Irving Kuhic"
+    content="Program the sensor to the SAS alarm through the haptic SQL card!"
+  />
+)
+
+export default ItemLayoutExampleHeaderContentShorthand

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { ItemLayout } from '@stardust-ui/react'
+
+const ItemLayoutExampleHeaderMediaShorthand = () => (
+  <ItemLayout header="Irving Kuhic" headerMedia="7:26:56 AM" />
+)
+
+export default ItemLayoutExampleHeaderMediaShorthand

docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { ItemLayout, Image } from '@stardust-ui/react'
+
+const ItemLayoutExampleMediaShorthand = () => (
+  <ItemLayout
+    media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
+    header="Dante Schneider"
+    headerMedia="5:22:40 PM"
+    content="The GB pixel is down, navigate the virtual interface!"
+  />
+)
+
+export default ItemLayoutExampleMediaShorthand

docs/src/examples/components/ItemLayout/Content/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title="Content">
+    <ComponentExample
+      title="Content"
+      description="Item layout can contain content."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleContent"
+    />
+    <ComponentExample
+      title="Header"
+      description="Item layout can contain a header."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleHeader"
+    />
+    <ComponentExample
+      title="Header & Content"
+      description="Item layout can contain a header and content."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleHeaderContent"
+    />
+    <ComponentExample
+      title="Media"
+      description="Item layout can contain a piece of media."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleMedia"
+    />
+    <ComponentExample
+      title="Header Media"
+      description="Item layout can contain a header with its own media."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleHeaderMedia"
+    />
+    <ComponentExample
+      title="Content Media"
+      description="Item layout can contain content with its own media."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleContentMedia"
+    />
+    <ComponentExample
+      title="End Media"
+      description="Item layout can contain a piece of media at the end of the item."
+      examplePath="components/ItemLayout/Content/ItemLayoutExampleEndMedia"
+    />
+  </ExampleSection>
+)
+
+export default Content

docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Knobs from 'docs/src/components/Knobs/Knobs'
+
+const LayoutExampleGapKnobs: any = props => {
+  const { onKnobChange, debug } = props
+
+  return (
+    <Knobs>
+      <Knobs.Boolean name="debug" value={debug} onChange={onKnobChange} />
+    </Knobs>
+  )
+}
+
+LayoutExampleGapKnobs.propTypes = {
+  onKnobChange: PropTypes.func.isRequired,
+  debug: PropTypes.bool,
+}
+
+LayoutExampleGapKnobs.defaultProps = {
+  debug: false,
+}
+
+export default LayoutExampleGapKnobs

docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { ItemLayout, Image } from '@stardust-ui/react'
+
+const ellipsis = <span>&hellip;</span>
+
+const ItemLayoutExampleShorthand = ({ knobs }) => (
+  <ItemLayout
+    media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
+    header="Irving Kuhic"
+    headerMedia="7:26:56 AM"
+    content="Program the sensor to the SAS alarm through the haptic SQL card!"
+    contentMedia="!!"
+    endMedia={ellipsis}
+    debug={knobs.debug}
+  />
+)
+
+export default ItemLayoutExampleShorthand

docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Knobs from 'docs/src/components/Knobs/Knobs'
+
+const ItemLayoutExampleSelectionKnobs: any = props => {
+  const { onKnobChange, selection } = props
+
+  return (
+    <Knobs>
+      <Knobs.Boolean name="selection" value={selection} onChange={onKnobChange} />
+    </Knobs>
+  )
+}
+
+ItemLayoutExampleSelectionKnobs.propTypes = {
+  onKnobChange: PropTypes.func.isRequired,
+  selection: PropTypes.bool,
+}
+
+ItemLayoutExampleSelectionKnobs.defaultProps = {
+  selection: true,
+}
+
+export default ItemLayoutExampleSelectionKnobs

docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { ItemLayout, Image } from '@stardust-ui/react'
+
+const ItemLayoutExampleSelectionShorthand = ({ knobs }) => (
+  <ItemLayout
+    selection={knobs.selection}
+    media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
+    header="Irving Kuhic"
+    headerMedia="7:26:56 AM"
+    content="Program the sensor to the SAS alarm through the haptic SQL card!"
+  />
+)
+
+export default ItemLayoutExampleSelectionShorthand

docs/src/examples/components/ItemLayout/Types/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Item layout."
+      examplePath="components/ItemLayout/Types/ItemLayoutExample"
+    />
+    <ComponentExample
+      title="Selection"
+      description="An item layout can be formatted to indicate that its items can be selected."
+      examplePath="components/ItemLayout/Types/ItemLayoutExampleSelection"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Knobs from 'docs/src/components/Knobs/Knobs'
+
+const ItemLayoutExampleKnobs: any = props => {
+  const { onKnobChange, debug, truncateHeader, truncateContent, width } = props
+
+  return (
+    <Knobs>
+      <Knobs.Scalar name="width" value={width} onChange={onKnobChange} />
+      <Knobs.Boolean name="truncateHeader" value={truncateHeader} onChange={onKnobChange} />
+      <Knobs.Boolean name="truncateContent" value={truncateContent} onChange={onKnobChange} />
+      <Knobs.Boolean name="debug" value={debug} onChange={onKnobChange} />
+    </Knobs>
+  )
+}
+
+ItemLayoutExampleKnobs.propTypes = {
+  onKnobChange: PropTypes.func.isRequired,
+  debug: PropTypes.bool,
+  truncateContent: PropTypes.bool,
+  truncateHeader: PropTypes.bool,
+  width: PropTypes.string,
+}
+
+ItemLayoutExampleKnobs.defaultProps = {
+  debug: false,
+  truncateContent: true,
+  truncateHeader: true,
+  width: '25rem',
+}
+
+export default ItemLayoutExampleKnobs

docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ItemLayout, Image } from '@stardust-ui/react'
+
+const ellipsis = <span>&hellip;</span>
+
+const ItemLayoutExampleTruncateShorthand = ({ knobs }) => (
+  <div style={{ width: knobs.width }}>
+    <ItemLayout
+      debug={knobs.debug}
+      media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
+      header="Dante Schneider - Super long title here"
+      headerMedia="5:22:40 PM"
+      content="The GB pixel is down, navigate the virtual interface!"
+      contentMedia="!!"
+      endMedia={ellipsis}
+      truncateHeader={knobs.truncateHeader}
+      truncateContent={knobs.truncateContent}
+    />
+  </div>
+)
+
+export default ItemLayoutExampleTruncateShorthand

docs/src/examples/components/ItemLayout/Variations/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Truncate"
+      description="An item layout can truncate the header and content of items items."
+      examplePath="components/ItemLayout/Variations/ItemLayoutExampleTruncate"
+    />
+  </ExampleSection>
+)
+
+export default Variations

docs/src/examples/components/ItemLayout/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Types from './Types'
+import Content from './Content'
+import Variations from './Variations'
+
+const ItemLayoutExamples = () => (
+  <div>
+    <Types />
+    <Content />
+    <Variations />
+  </div>
+)
+
+export default ItemLayoutExamples