This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
feat(ItemLayout): added ItemLayout component #60
Merged
Merged
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
86d5f3d
-added item layout component identical to the list item implementation
ed788c0
-added changelog and fixed examples
96f7ca1
-added CSS props for the parts of the Item layout
c5d847d
Merge branch 'master' into feat/item-layout
0ebdc71
-merging changes
452705c
-fixed test
f8b8df9
-added end media to the examples containing knobs in the item layout …
abf8464
-fixed issue with the header item layout font size
80745c8
Merge branch 'master' into feat/item-layout
b7f81db
-moved styling from ItemLayout to ListItem
420db87
-removed console logs
243e8e2
-removed unused variables from the list item variables
cd848bb
-removed some comments
52bb357
-ensuring proper propagating of the styles
b5b94a2
Merge branch 'master' into feat/item-layout
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
11 changes: 11 additions & 0 deletions
11
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
13 changes: 13 additions & 0 deletions
13
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React from 'react' | ||
import { ItemLayout } from '@stardust-ui/react' | ||
|
||
const ellipsis = <span>…</span> | ||
|
||
const ItemLayoutExampleEndMediaShorthand = () => ( | ||
<ItemLayout | ||
content="Program the sensor to the SAS alarm through the haptic SQL card!" | ||
endMedia={ellipsis} | ||
/> | ||
) | ||
|
||
export default ItemLayoutExampleEndMediaShorthand |
6 changes: 6 additions & 0 deletions
6
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import React from 'react' | ||
import { ItemLayout } from '@stardust-ui/react' | ||
|
||
const ItemLayoutExampleHeader = () => <ItemLayout header="Irving Kuhic" /> | ||
|
||
export default ItemLayoutExampleHeader |
11 changes: 11 additions & 0 deletions
11
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
8 changes: 8 additions & 0 deletions
8
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
13 changes: 13 additions & 0 deletions
13
docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
25 changes: 25 additions & 0 deletions
25
docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
18 changes: 18 additions & 0 deletions
18
docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react' | ||
import { ItemLayout, Image } from '@stardust-ui/react' | ||
|
||
const ellipsis = <span>…</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 |
24 changes: 24 additions & 0 deletions
24
docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
14 changes: 14 additions & 0 deletions
14
docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
33 changes: 33 additions & 0 deletions
33
docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
22 changes: 22 additions & 0 deletions
22
docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React from 'react' | ||
import { ItemLayout, Image } from '@stardust-ui/react' | ||
|
||
const ellipsis = <span>…</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 |
15 changes: 15 additions & 0 deletions
15
docs/src/examples/components/ItemLayout/Variations/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this is the full example with a debug display knob to help the user understand the full layout, let's also include some
endMedia
here. Perhaps some kind of icon would be great.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added the end media with ellipses (…) to this examples, as well as the truncate example, as we have there even more knobs.