diff --git a/packages/clay-card/package.json b/packages/clay-card/package.json index 962a308fd9..ae28a620e2 100644 --- a/packages/clay-card/package.json +++ b/packages/clay-card/package.json @@ -26,6 +26,11 @@ "react" ], "dependencies": { + "@clayui/drop-down": "^3.0.0-milestone.1", + "@clayui/form": "^3.0.0-milestone.1", + "@clayui/icon": "^3.0.0-milestone.1", + "@clayui/label": "^3.0.0-milestone.1", + "@clayui/sticker": "^3.0.0-milestone.1", "classnames": "^2.2.6" }, "devDependencies": { diff --git a/packages/clay-card/src/CardWithHorizontal.tsx b/packages/clay-card/src/CardWithHorizontal.tsx new file mode 100644 index 0000000000..5cdf5a0da0 --- /dev/null +++ b/packages/clay-card/src/CardWithHorizontal.tsx @@ -0,0 +1,105 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import ClayCard from './Card'; +import ClayForm from '@clayui/form'; +import ClayIcon from '@clayui/icon'; +import ClaySticker from '@clayui/sticker'; +import React from 'react'; +import {ClayDropDownWithBasicItems} from '@clayui/drop-down'; + +interface IProps { + actions?: React.ComponentProps['items']; + /** + * Path or URL to item + */ + href?: string; + + /** + * Callback for when item is selected + */ + onSelectChange?: (val: boolean) => void; + + /** + * Flag to indicate if card is selected + */ + selected?: boolean; + + /** + * Path to clay icon spritemap + */ + spritemap: string; + + /** + * Name of icon symbol + */ + symbol?: string; + + /** + * Name of the item + */ + title: string; +} + +export const ClayCardWithHorizontal: React.FunctionComponent = ({ + actions, + href, + onSelectChange, + selected = false, + spritemap, + symbol = 'folder', + title, +}) => { + const content = ( + +
+ + + +
+ +
+ + {title} + +
+ + {actions && ( +
+ + + + } + /> +
+ )} + + ); + + return ( + + {onSelectChange && ( + onSelectChange(!selected)} + > + {content} + + )} + + {!onSelectChange && content} + + ); +}; diff --git a/packages/clay-card/src/CardWithInfo.tsx b/packages/clay-card/src/CardWithInfo.tsx new file mode 100644 index 0000000000..56625b581d --- /dev/null +++ b/packages/clay-card/src/CardWithInfo.tsx @@ -0,0 +1,202 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import classNames from 'classnames'; +import ClayCard from './Card'; +import ClayForm from '@clayui/form'; +import ClayIcon from '@clayui/icon'; +import ClayLabel from '@clayui/label'; +import ClaySticker from '@clayui/sticker'; +import React, {ImgHTMLAttributes} from 'react'; +import {ClayDropDownWithBasicItems} from '@clayui/drop-down'; + +interface IProps { + /** + * List of actions in the dropdown menu + */ + actions?: React.ComponentProps['items']; + + /** + * Description of the file + */ + description?: React.ReactText; + + /** + * Flag to indicate if `aspect-ratio-item-flush` class should be + * applied to the image. + */ + flushHorizontal?: boolean; + + /** + * Flag to indicate if `aspect-ratio-item-vertical-flush` class should be + * applied to the image. + */ + flushVertical?: boolean; + + /** + * Path or URL to file + */ + href?: string; + + /** + * Object of props for `` or string path to image + */ + imgProps?: React.ImgHTMLAttributes | string; + + /** + * List of labels that are applied to the file + */ + labels?: Array< + React.ComponentProps & {value: React.ReactText} + >; + + /** + * Callback for when item is selected + */ + onSelectChange?: (val: boolean) => void; + + /** + * Flag to indicate if card is selected + */ + selected?: boolean; + + /** + * Path to clay icon spritemap + */ + spritemap: string; + + /** + * Values used in displaying bottom-left icon + */ + stickerProps?: { + content: React.ReactNode; + displayType: React.ComponentProps['displayType']; + }; + + /** + * Name of icon + */ + symbol?: string; + + /** + * Name of the file + */ + title: string; +} + +export const ClayCardWithInfo: React.FunctionComponent = ({ + actions, + description, + flushHorizontal, + flushVertical, + href, + imgProps, + labels, + onSelectChange, + selected = false, + spritemap, + stickerProps, + symbol = 'documents-and-media', + title, +}) => { + const headerContent = ( + + {!imgProps && ( +
+ +
+ )} + + {imgProps && ( + + )} + + + {stickerProps ? ( + stickerProps.content + ) : ( + + )} + + + ); + + return ( + + {onSelectChange && ( + onSelectChange(!selected)} + > + {headerContent} + + )} + + {!onSelectChange && headerContent} + + +
+ + {title} + + + + {description} + + + {labels && ( + + {labels.map(({value, ...others}, i: number) => ( + + {value} + + ))} + + )} +
+ + {actions && ( +
+ + + + } + /> +
+ )} + + + ); +}; diff --git a/packages/clay-card/src/CardWithNavigation.tsx b/packages/clay-card/src/CardWithNavigation.tsx index ad4e446c8f..196a758cc9 100644 --- a/packages/clay-card/src/CardWithNavigation.tsx +++ b/packages/clay-card/src/CardWithNavigation.tsx @@ -15,6 +15,11 @@ interface IProps { */ description?: React.ReactText; + /** + * Path or url for click through + */ + href?: string; + /** * Flag to indicate if card should be the `horizontal` variant */ @@ -25,11 +30,6 @@ interface IProps { */ horizontalSymbol?: string; - /** - * Path or url for click through - */ - href?: string; - /** * Callback for when card is clicked on */ diff --git a/packages/clay-card/src/CardWithUser.tsx b/packages/clay-card/src/CardWithUser.tsx index b02c9205d2..99fcd2d80d 100644 --- a/packages/clay-card/src/CardWithUser.tsx +++ b/packages/clay-card/src/CardWithUser.tsx @@ -10,8 +10,14 @@ import ClayIcon from '@clayui/icon'; import ClayLabel from '@clayui/label'; import ClaySticker, {DisplayType as StickerDisplayType} from '@clayui/sticker'; import React from 'react'; +import {ClayDropDownWithBasicItems} from '@clayui/drop-down'; interface IProps { + /** + * List of actions in the dropdown menu + */ + actions?: React.ComponentProps['items']; + /** * Value of the description of the user */ @@ -25,7 +31,7 @@ interface IProps { /** * List of labels that are applied to the user */ - labels: Array< + labels?: Array< React.ComponentProps & {value: React.ReactText} >; @@ -61,6 +67,7 @@ interface IProps { } export const ClayCardWithUser: React.FunctionComponent = ({ + actions, description, href, labels, @@ -117,14 +124,33 @@ export const ClayCardWithUser: React.FunctionComponent = ({ {description} - - {labels.map(({value, ...others}, i: number) => ( - - {value} - - ))} - + {labels && ( + + {labels.map(({value, ...others}, i: number) => ( + + {value} + + ))} + + )} + + {actions && ( +
+ + + + } + /> +
+ )} ); diff --git a/packages/clay-card/src/Description.tsx b/packages/clay-card/src/Description.tsx index 2932e80721..5c3ea69e7e 100644 --- a/packages/clay-card/src/Description.tsx +++ b/packages/clay-card/src/Description.tsx @@ -5,14 +5,13 @@ */ import classNames from 'classnames'; -import Context from './Context'; import React from 'react'; type CardDescriptionDisplayType = 'text' | 'title' | 'subtitle'; interface ICardDescriptionProps extends React.HTMLAttributes< - HTMLAnchorElement | HTMLDivElement | HTMLSpanElement + HTMLHeadingElement | HTMLDivElement | HTMLSpanElement > { /** * Type of description that can be applied for a text. @@ -30,6 +29,12 @@ interface ICardDescriptionProps truncate?: boolean; } +const CARD_TYPE_ELEMENTS = { + subtitle: 'span', + text: 'div', + title: 'h3', +}; + const ClayCardDescription: React.FunctionComponent = ({ children, className, @@ -38,22 +43,24 @@ const ClayCardDescription: React.FunctionComponent = ({ truncate = true, ...otherProps }: ICardDescriptionProps) => { - const {interactive} = React.useContext(Context); - - const interactiveTag = interactive ? 'span' : 'div'; - - const TagName = href ? 'a' : interactiveTag; + const OuterTag = CARD_TYPE_ELEMENTS[displayType] as ('span' | 'div' | 'h3'); + const InnerTag = href ? 'a' : 'span'; return ( - - {children} - + + + {children} + + + ); }; diff --git a/packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap index e6f78ef4ed..27c7324121 100644 --- a/packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap +++ b/packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap @@ -1,108 +1,138 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ClayCard renders ClayCardWithNavigation with image 1`] = ` - -`; - -exports[`ClayCard renders ClayCardWithUser as selectable 1`] = ` +exports[`ClayCard renders a ClayCard as a directory 1`] = `
-
+
+
+
+`; + +exports[`ClayCard renders a ClayCard as a file card 1`] = ` +
+
+
+
+ + + +
+ + + DOC + + +
+
-
- - Foo Bar - -
+ + deliverable.doc + + + + - Test -
+ + + Stevie Ray Vaughn + + +
@@ -112,11 +142,11 @@ exports[`ClayCard renders ClayCardWithUser as selectable 1`] = ` - Awesome + Approved
-
+
@@ -124,10 +154,10 @@ exports[`ClayCard renders ClayCardWithUser as selectable 1`] = `
`; -exports[`ClayCard renders ClayCardWithUser with icon 1`] = ` +exports[`ClayCard renders a ClayCard as a selectable file card 1`] = `
- +
- - Foo Bar - -
- Test -
-
+

+ + + deliverable.doc + + +

- Awesome + + Stevie Ray Vaughn + -
+
+ + + Approved + + +
+
@@ -197,121 +263,179 @@ exports[`ClayCard renders ClayCardWithUser with icon 1`] = `
`; -exports[`ClayCard renders ClayCardWithUser with image 1`] = ` +exports[`ClayCard renders a ClayCard as a selectable folder 1`] = `
-
+
-
-
-
- - Foo Bar - -
- Test -
-
- - Awesome + + + + + - +
+
+

+ + + Very Large Folder + + +

+
-
+
`; -exports[`ClayCard renders a ClayCard as a directory 1`] = ` +exports[`ClayCard renders a ClayCard as a selectable image card 1`] = `
-
+
+ +
+
+
+
+

+ + + thumbnail_coffee.jpg + + +

+ + + + Author Action + + +
-
- Very Large Folder -
+ + Approved + +
@@ -321,33 +445,87 @@ exports[`ClayCard renders a ClayCard as a directory 1`] = `
`; -exports[`ClayCard renders a ClayCard as a file card 1`] = ` +exports[`ClayCard renders a ClayCard as a template navigation card truncating text on description 1`] = `
-
-
+ + content image + + + +

+ + + Content Page + + +

- - - + + This is an example of card-type-template using an anchor tag. + +
+ + +
+`; + +exports[`ClayCard renders a ClayCard as image card 1`] = ` +
+
+
+ thumbnail - DOC + + +
@@ -360,33 +538,47 @@ exports[`ClayCard renders a ClayCard as a file card 1`] = `
-
-
- deliverable.doc -
-
+ thumbnail_coffee.jpg + + + + + - Stevie Ray Vaughn -
-
+ Author Action + + + +
+ - - Approved - + Approved -
-
+ +
@@ -394,51 +586,194 @@ exports[`ClayCard renders a ClayCard as a file card 1`] = `
`; -exports[`ClayCard renders a ClayCard as a selectable file card 1`] = ` +exports[`ClayCard renders a ClayCard as template navigation card 1`] = `
-
-
+ + portlet image + + + +

+ + + Widget Page + + +

-
-
+ + +
+`; + +exports[`ClayCard renders a ClayCard as template navigation card as horizontal card 1`] = ` + +`; + +exports[`ClayCard renders a ClayCard as template navigation card with icon instead of image 1`] = ` + +`; + +exports[`ClayCard renders a ClayCard as user card 1`] = ` +
+
+
+
+
+ + + + + - +
-
-
- deliverable.doc -
-
- Stevie Ray Vaughn -
-
- - Approved - + Adélaide -
-
-
-
-
-
-
-
-`; - -exports[`ClayCard renders a ClayCard as a selectable folder 1`] = ` -
-
-
-
`; -exports[`ClayCard renders a ClayCard as a selectable image card 1`] = ` +exports[`ClayCard renders a ClayCard as user selectable card 1`] = `
- thumbnail -
- - - - - - - + + + + + + +
+
@@ -609,26 +893,44 @@ exports[`ClayCard renders a ClayCard as a selectable image card 1`] = `
-
- thumbnail_coffee.jpg -
-
+ + Adélaide + + + + - Author Action -
+ + + Author Action + + +
- Approved + Rejected
@@ -640,103 +942,447 @@ exports[`ClayCard renders a ClayCard as a selectable image card 1`] = `
`; -exports[`ClayCard renders a ClayCard as a template navigation card truncating text on description 1`] = ` +exports[`ClayCard renders a group of ClayCards 1`] = ` +
+
+
+
+

+ + + deliverable.doc + + +

+ + + + Stevie Ray Vaughn + + + +
+ + + Approved + + +
+
+
+
+
+
+ +
  • +
    - This is an example of card-type-template using an anchor tag. - - - -
    -`; - -exports[`ClayCard renders a ClayCard as image card 1`] = ` -
    -
    +
    + + + +
    + + + DOC + + +
    +
    +
    +
    +
    +

    + + + deliverable.doc + + +

    + + + + Stevie Ray Vaughn + + + +
    + + + Approved + + +
    +
    +
    +
    +
    +
    +
    • + +
      -
      - thumbnail - - + +
    • +
      +
      - - - - - -
      +
      + + + + + + + +
      +
      +
      +
      +
      +

      + + + Adélaide + + +

      + + + + Author Action + + + +
      + + + Approved + + +
      +
      +
      +
      +
      • +
    + +
  • +
    +
    +
    +
    + + + + + + + +
    +
    +
    +
    +
    +

    + + + Adélaide + + +

    + + + + Author Action + + + +
    + + + Approved + + +
    +
    +
    +
    +
    +
    +
    • + + +`; + +exports[`ClayCardWithHorizontal renders as not selectable 1`] = ` +
    +
    - thumbnail_coffee.jpg -
    -
    - Author Action + + + + + + +
    - - Approved + + Foo Bar + - +
    @@ -745,192 +1391,167 @@ exports[`ClayCard renders a ClayCard as image card 1`] = `
    `; -exports[`ClayCard renders a ClayCard as template navigation card 1`] = ` +exports[`ClayCardWithHorizontal renders as selectable 1`] = ` -`; - -exports[`ClayCard renders a ClayCard as template navigation card as horizontal card 1`] = ` - +
    +
    + + + `; -exports[`ClayCard renders a ClayCard as template navigation card with icon instead of image 1`] = ` +exports[`ClayCardWithInfo renders as not selectable 1`] = ` - Blog + + + + + - - - -`; - -exports[`ClayCard renders a ClayCard as user card 1`] = ` -
    -
    +
    +

    + + + Very Large File + + +

    - - - + A cool description + -
    -
    -
    -
    -
    - Adélaide -
    -
    - Author Action -
    -
    - - Approved - + class="label-item label-item-expand" + > + Awesome -
    +
    @@ -939,55 +1560,59 @@ exports[`ClayCard renders a ClayCard as user card 1`] = `
    `; -exports[`ClayCard renders a ClayCard as user selectable card 1`] = ` +exports[`ClayCardWithInfo renders as selectable 1`] = `
    -
    -
    +
    -
    - Adélaide -
    -
    - Author Action -
    -
    + + Foo Bar + + + + - Rejected - + class="text-truncate" + /> -
    +
    @@ -1029,194 +1657,89 @@ exports[`ClayCard renders a ClayCard as user selectable card 1`] = `
    `; -exports[`ClayCard renders a group of ClayCards 1`] = ` +exports[`ClayCardWithUser renders ClayCardWithNavigation with image 1`] = `
    -
      -
    • -

      - Test Files -

      -
      • -
    • + + + -
      -
      -
      - - - -
      - - DOC - + Layout Page -
      -
      -
      -
      -
      -
      - deliverable.doc -
      -
      - Stevie Ray Vaughn -
      -
      - - - Approved - - -
      -
      -
      -
      -
      -
      -
      • -
    • + +
      -
      -
      - - - -
      - - DOC - + Pick and choose your layout... -
      -
      -
      -
      -
      -
      - deliverable.doc -
      -
      - Stevie Ray Vaughn -
      -
      - - - Approved - - -
      -
      -
      -
      -
      +
      -
      • -
    -
      + +
    +`; + +exports[`ClayCardWithUser renders as selectable 1`] = ` +
    +
    -
  • -

    - Test Users -

    -
    • -
  • -
    +
    + +
    +
    +
    +
    -
    -
    -
    - Adélaide -
    -
    + + + + + - Author Action -
    -
    + + +
    + + - - - Approved - - -
    -
    + Awesome + +
    -
    • -
  • +
    • +
    +`; + +exports[`ClayCardWithUser renders with icon 1`] = ` +
    +
    +
    + + + + + + + +
    +
    +
    +
    +

    + + + Foo Bar + + +

    + + + + Test + + +
    - - - + Awesome
    +
    +
    +
    +
    +
    +`; + +exports[`ClayCardWithUser renders with image 1`] = ` +
    +
    +
    +
    +
    + + + thumbnail + + +
    +
    +
    +
    -
    -
    -
    - Adélaide -
    -
    + + + + + - Author Action -
    -
    + + +
    + + - - - Approved - - -
    -
    + Awesome + +
    - - +
    +
    `; diff --git a/packages/clay-card/src/__tests__/index.tsx b/packages/clay-card/src/__tests__/index.tsx index b74f44d02b..8e7baeb6e2 100644 --- a/packages/clay-card/src/__tests__/index.tsx +++ b/packages/clay-card/src/__tests__/index.tsx @@ -4,7 +4,12 @@ * SPDX-License-Identifier: BSD-3-Clause */ -import ClayCard, {ClayCardWithNavigation, ClayCardWithUser} from '../index'; +import ClayCard, { + ClayCardWithHorizontal, + ClayCardWithInfo, + ClayCardWithNavigation, + ClayCardWithUser, +} from '../index'; import ClayForm from '@clayui/form'; import ClayIcon from '@clayui/icon'; import ClayLabel from '@clayui/label'; @@ -561,8 +566,12 @@ describe('ClayCard', () => { expect(container).toMatchSnapshot(); }); +}); + +describe('ClayCardWithUser', () => { + afterEach(cleanup); - it('renders ClayCardWithUser as selectable', () => { + it('renders as selectable', () => { const onSelectChangeFn = jest.fn(); const {container} = render( @@ -589,7 +598,7 @@ describe('ClayCard', () => { expect(onSelectChangeFn).toHaveBeenCalled(); }); - it('renders ClayCardWithUser with icon', () => { + it('renders with icon', () => { const {container} = render( { expect(container).toMatchSnapshot(); }); - it('renders ClayCardWithUser with image', () => { + it('renders with image', () => { const {container} = render( { expect(onClickFn).toHaveBeenCalledTimes(1); }); }); + +describe('ClayCardWithHorizontal', () => { + afterEach(cleanup); + + it('renders as not selectable', () => { + const {container} = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('renders as selectable', () => { + const onSelectChangeFn = jest.fn(); + + const {container} = render( + + ); + + expect(container).toMatchSnapshot(); + + fireEvent.click(container.querySelector('label') as HTMLElement, {}); + + expect(onSelectChangeFn).toHaveBeenCalled(); + }); +}); + +describe('ClayCardWithInfo', () => { + afterEach(cleanup); + + it('renders as not selectable', () => { + const {container} = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('renders as selectable', () => { + const onSelectChangeFn = jest.fn(); + + const {container} = render( + + ); + + expect(container).toMatchSnapshot(); + + fireEvent.click(container.querySelector('label') as HTMLElement, {}); + + expect(onSelectChangeFn).toHaveBeenCalledTimes(1); + }); + + it('clicking dropdown item calls callback and not call onSelectChange', () => { + const onDropDownItemClick = jest.fn(); + const onSelectChangeFn = jest.fn(); + + const {container} = render( + + ); + + fireEvent.click( + container.querySelector('.dropdown-toggle') as HTMLElement, + {} + ); + + fireEvent.click( + document.querySelector('.dropdown-item') as HTMLElement, + {} + ); + + expect(onDropDownItemClick).toHaveBeenCalledTimes(1); + expect(onSelectChangeFn).not.toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/clay-card/src/index.tsx b/packages/clay-card/src/index.tsx index f3033fd39d..efcddee733 100644 --- a/packages/clay-card/src/index.tsx +++ b/packages/clay-card/src/index.tsx @@ -5,9 +5,16 @@ */ import ClayCard from './Card'; +import {ClayCardWithHorizontal} from './CardWithHorizontal'; +import {ClayCardWithInfo} from './CardWithInfo'; import {ClayCardWithNavigation} from './CardWithNavigation'; import {ClayCardWithUser} from './CardWithUser'; -export {ClayCardWithNavigation, ClayCardWithUser}; +export { + ClayCardWithInfo, + ClayCardWithHorizontal, + ClayCardWithNavigation, + ClayCardWithUser, +}; export default ClayCard; diff --git a/packages/clay-card/stories/index.tsx b/packages/clay-card/stories/index.tsx index 3c0c973f3e..6e4624d5c4 100644 --- a/packages/clay-card/stories/index.tsx +++ b/packages/clay-card/stories/index.tsx @@ -5,7 +5,12 @@ */ import '@clayui/css/lib/css/atlas.css'; -import ClayCard, {ClayCardWithNavigation, ClayCardWithUser} from '../src'; +import ClayCard, { + ClayCardWithHorizontal, + ClayCardWithInfo, + ClayCardWithNavigation, + ClayCardWithUser, +} from '../src'; import ClayForm from '@clayui/form'; import ClayIcon from '@clayui/icon'; import ClayLabel from '@clayui/label'; @@ -34,54 +39,246 @@ const ClayCheckboxWithState = (props: any) => { }; storiesOf('ClayCard', module) - .add('with folder card', () => ( + .add('ClayCardWithInfo', () => { + const [value, setValue] = React.useState(false); + + return ( +
    +
    + +
    + +
    + { + alert('you clicked!'); + }, + }, + {type: 'divider'}, + { + href: '#', + label: 'linkable', + }, + ]} + description="A cool description" + href="#" + labels={[ + { + displayType: 'success', + value: 'Awesome', + }, + { + displayType: 'danger', + value: 'Crazy', + }, + ]} + onSelectChange={newVal => setValue(newVal)} + selected={value} + spritemap={spritemap} + stickerProps={{ + content: 'DOC', + displayType: 'danger', + }} + title="Selectable File" + /> +
    +
    + ); + }) + .add('CardWithFile w/ image', () => { + const [value, setValue] = React.useState(false); + + const flushHorizontal = boolean('Horizontal Flush', false); + const flushVertical = boolean('Vertical Flush', false); + + return ( +
    +
    + +
    + +
    + +
    +
    + ); + }) + .add('CardWithHorizontal', () => { + const [value, setValue] = React.useState(false); + + return ( +
    +
    + +
    + +
    + { + alert('you clicked!'); + }, + }, + {type: 'divider'}, + { + href: '#', + label: 'linkable', + }, + ]} + href="#" + onSelectChange={setValue} + selected={value} + spritemap={spritemap} + title="Selectable Folder" + /> +
    +
    + ); + }) + .add('CardWithNavigation', () => (
    - - -
    - - - -
    -
    -
    - - {'Very Large Folder'} - -
    -
    -     -     + alert('clicked')} + spritemap={spritemap} + title="onClick Card with icon" + > + +
    -
    - - - -
    - - - -
    -
    - - {'Very Large Folder'} - -
    -     -     -     + + portlet image + +
    +
    +
    )) - .add('with group', () => ( + .add('CardWithUser', () => { + const [value, setValue] = React.useState(false); + + return ( +
    +
    + { + alert('you clicked!'); + }, + }, + {type: 'divider'}, + { + href: '#', + label: 'linkable', + }, + ]} + description="Assistant to the regional manager" + href="#" + labels={[ + { + displayType: 'success', + value: 'Awesome', + }, + { + displayType: 'danger', + value: 'Crazy', + }, + ]} + name="Abraham Kuyper" + onSelectChange={() => {}} + selected={boolean('selected', false)} + spritemap={spritemap} + /> + + +
    +
    + ); + }) + .add('low-level w/ groups', () => ( <> @@ -226,195 +423,4 @@ storiesOf('ClayCard', module) - )) - .add('with image', () => ( -
    -
    - - - - - thumbnail - - - - - - - - -
    - - {'thumbnail_coffee.jpg'} - - - {'Author Action'} - - - - {'Approved'} - - -
    -     -     -
    - -
    - - - thumbnail - - - - - - -
    - - {'thumbnail_coffee.jpg'} - - - {'Author Action'} - - - - {'Approved'} - - -
    -     -     -
    -
    - )) - .add('with navigation card variant', () => ( -
    -
    - alert('clicked')} - spritemap={spritemap} - title="onClick Card with icon" - > - - -
    -
    - - portlet image - -
    -
    - -
    -
    - )) - .add('with user', () => ( -
    -
    - {}} - selected={boolean('selected', false)} - spritemap={spritemap} - /> - - {}} - selected={boolean('selected', false)} - spritemap={spritemap} - userImageSrc="https://via.placeholder.com/256" - /> -
    - -
    - - -
    - - - -
    -     - - -
    - - {'Adélaide'} - - - {'Author Action'} - - - - {'Approved'} - - -
    -     -     -
    -
    )); diff --git a/packages/clay-drop-down/src/DropDownWithBasicItems.tsx b/packages/clay-drop-down/src/DropDownWithBasicItems.tsx index 87560fa27f..abee549704 100644 --- a/packages/clay-drop-down/src/DropDownWithBasicItems.tsx +++ b/packages/clay-drop-down/src/DropDownWithBasicItems.tsx @@ -79,7 +79,7 @@ export const ClayDropDownWithBasicItems: React.FunctionComponent = ({ {items.map((item: IItem, i: number) => { if (item.type === 'divider') { - return ; + return ; } return (