From 2063faca9993ddf589a4144528387793923956b6 Mon Sep 17 00:00:00 2001 From: Samuel Nwosu Date: Wed, 6 Feb 2019 18:24:47 -0500 Subject: [PATCH 1/6] docs(AccordionExampleStandardShorthand): Custom Title Icon Example Added an example on how to add a custom icon via the standard Shorthand --- .../AccordionExampleStandardShorthand.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js index d511ccfe23..31083996c5 100644 --- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js +++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js @@ -38,6 +38,26 @@ const panels = [ ), }, }, + { + key: 'care-for-dogs', + title:{ + children:( +
+ How do I care for a dog? +
+ ), + }, + content: { + content: ( +
+

+ It is entirely acceptable to feed your dog a pure kibble diet. + Or you can mix their diet up with some cooked or raw meat, fish, vegetables and rice. +

+
+ ), + }, + }, ] const AccordionExampleStandardShorthand = () => From e98893089a0e11479cc0ba905057ad55f7b2ec5d Mon Sep 17 00:00:00 2001 From: sako9 Date: Thu, 7 Feb 2019 09:37:24 -0500 Subject: [PATCH 2/6] fixed lint issues --- .../AccordionExampleStandardShorthand.js | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js index 31083996c5..67ecc4476b 100644 --- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js +++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js @@ -1,5 +1,5 @@ import React from 'react' -import { Accordion } from 'semantic-ui-react' +import { Accordion, Icon } from 'semantic-ui-react' const panels = [ { @@ -25,14 +25,15 @@ const panels = [ content: (

- Three common ways for a prospective owner to acquire a dog is from pet shops, private - owners, or shelters. + Three common ways for a prospective owner to acquire a dog is from + pet shops, private owners, or shelters.

- A pet shop may be the most convenient way to buy a dog. Buying a dog from a private - owner allows you to assess the pedigree and upbringing of your dog before choosing to - take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog - who may not find one so readily. + A pet shop may be the most convenient way to buy a dog. Buying a dog + from a private owner allows you to assess the pedigree and + upbringing of your dog before choosing to take it home. Lastly, + finding your dog from a shelter, helps give a good home to a dog who + may not find one so readily.

), @@ -40,10 +41,10 @@ const panels = [ }, { key: 'care-for-dogs', - title:{ - children:( + title: { + children: (
- How do I care for a dog? + How do I care for a dog?
), }, @@ -51,15 +52,18 @@ const panels = [ content: (

- It is entirely acceptable to feed your dog a pure kibble diet. - Or you can mix their diet up with some cooked or raw meat, fish, vegetables and rice. + It is entirely acceptable to feed your dog a pure kibble diet. Or + you can mix their diet up with some cooked or raw meat, fish, + vegetables and rice.

), - }, + }, }, ] -const AccordionExampleStandardShorthand = () => +const AccordionExampleStandardShorthand = () => ( + +) export default AccordionExampleStandardShorthand From 11d21636ad2fcfbc452156b9ee0df31545eb9fae Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 11 Feb 2019 18:36:28 +0200 Subject: [PATCH 3/6] feat(Accordion): add `icon` shorthand for AccordionTitle --- .../Advanced/AccordionExampleIconShorthand.js | 42 +++++++++++++++++++ .../modules/Accordion/Advanced/index.js | 5 +++ .../AccordionExampleStandardShorthand.js | 23 +--------- src/modules/Accordion/AccordionTitle.js | 7 +++- .../modules/Accordion/AccordionTitle-test.js | 4 +- 5 files changed, 55 insertions(+), 26 deletions(-) create mode 100644 docs/src/examples/modules/Accordion/Advanced/AccordionExampleIconShorthand.js diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleIconShorthand.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleIconShorthand.js new file mode 100644 index 0000000000..040c55352e --- /dev/null +++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleIconShorthand.js @@ -0,0 +1,42 @@ +import React from 'react' +import { Accordion } from 'semantic-ui-react' + +const panels = [ + { + key: 'acquire-dog', + title: { + content: 'How do you acquire a dog?', + icon: 'question', + }, + content: { + content: ( + + Three common ways for a prospective owner to acquire a dog is from pet + shops, private owners, or shelters. + + ), + }, + }, + { + key: 'care-for-dogs', + title: { + content: 'How do I care for a dog?', + icon: 'question', + }, + content: { + content: ( + + It is entirely acceptable to feed your dog a pure kibble diet. Or you + can mix their diet up with some cooked or raw meat, fish, vegetables + and rice. + + ), + }, + }, +] + +const AccordionExampleIconShorthand = () => ( + +) + +export default AccordionExampleIconShorthand diff --git a/docs/src/examples/modules/Accordion/Advanced/index.js b/docs/src/examples/modules/Accordion/Advanced/index.js index 3223f50f19..66a25b0ba8 100644 --- a/docs/src/examples/modules/Accordion/Advanced/index.js +++ b/docs/src/examples/modules/Accordion/Advanced/index.js @@ -28,6 +28,11 @@ const AccordionAdvancedExamples = () => ( description='Panels of Accordion can be rendered via shorthand prop.' examplePath='modules/Accordion/Advanced/AccordionExampleShorthand' /> + ) diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js index 67ecc4476b..530a9ddf0a 100644 --- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js +++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js @@ -1,5 +1,5 @@ import React from 'react' -import { Accordion, Icon } from 'semantic-ui-react' +import { Accordion } from 'semantic-ui-react' const panels = [ { @@ -39,27 +39,6 @@ const panels = [ ), }, }, - { - key: 'care-for-dogs', - title: { - children: ( -
- How do I care for a dog? -
- ), - }, - content: { - content: ( -
-

- It is entirely acceptable to feed your dog a pure kibble diet. Or - you can mix their diet up with some cooked or raw meat, fish, - vegetables and rice. -

-
- ), - }, - }, ] const AccordionExampleStandardShorthand = () => ( diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js index 30bd84430c..f2a050abef 100644 --- a/src/modules/Accordion/AccordionTitle.js +++ b/src/modules/Accordion/AccordionTitle.js @@ -32,6 +32,9 @@ export default class AccordionTitle extends Component { /** Shorthand for primary content. */ content: customPropTypes.contentShorthand, + /** Shorthand for Icon. */ + icon: customPropTypes.itemShorthand, + /** AccordionTitle index inside Accordion. */ index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -47,7 +50,7 @@ export default class AccordionTitle extends Component { handleClick = e => _.invoke(this.props, 'onClick', e, this.props) render() { - const { active, children, className, content } = this.props + const { active, children, className, content, icon } = this.props const classes = cx(useKeyOnly(active, 'active'), 'title', className) const rest = getUnhandledProps(AccordionTitle, this.props) @@ -63,7 +66,7 @@ export default class AccordionTitle extends Component { return ( - + {Icon.create(_.isNil(icon) ? 'dropdown' : icon, { autoGenerateKey: false })} {content} ) diff --git a/test/specs/modules/Accordion/AccordionTitle-test.js b/test/specs/modules/Accordion/AccordionTitle-test.js index bad5cf396d..f8522edad9 100644 --- a/test/specs/modules/Accordion/AccordionTitle-test.js +++ b/test/specs/modules/Accordion/AccordionTitle-test.js @@ -9,6 +9,7 @@ describe('AccordionTitle', () => { common.rendersChildren(AccordionTitle) common.implementsCreateMethod(AccordionTitle) + common.implementsIconProp(AccordionTitle, { autoGenerateKey: false }) common.propKeyOnlyToClassName(AccordionTitle, 'active') @@ -18,8 +19,7 @@ describe('AccordionTitle', () => { const event = { target: null } const props = { content: 'title', index: 0 } - shallow() - .simulate('click', event) + shallow().simulate('click', event) spy.should.have.been.calledOnce() spy.should.have.been.calledWithMatch(event, props) From b946afd10c89c4a46243bef25a3d05dbdc7032de Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 11 Feb 2019 18:55:39 +0200 Subject: [PATCH 4/6] fix typings & style --- src/modules/Accordion/AccordionTitle.d.ts | 5 ++++- src/modules/Accordion/AccordionTitle.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/modules/Accordion/AccordionTitle.d.ts b/src/modules/Accordion/AccordionTitle.d.ts index b7aff437b0..24dd51c616 100644 --- a/src/modules/Accordion/AccordionTitle.d.ts +++ b/src/modules/Accordion/AccordionTitle.d.ts @@ -1,5 +1,5 @@ import * as React from 'react' -import { SemanticShorthandContent } from '../../generic' +import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic' export interface AccordionTitleProps extends StrictAccordionTitleProps { [key: string]: any @@ -21,6 +21,9 @@ export interface StrictAccordionTitleProps { /** Shorthand for primary content. */ content?: SemanticShorthandContent + /** Shorthand for Icon. */ + icon?: SemanticShorthandItem + /** AccordionTitle index inside Accordion. */ index?: number | string diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js index f2a050abef..c8a24b3f9f 100644 --- a/src/modules/Accordion/AccordionTitle.js +++ b/src/modules/Accordion/AccordionTitle.js @@ -55,6 +55,7 @@ export default class AccordionTitle extends Component { const classes = cx(useKeyOnly(active, 'active'), 'title', className) const rest = getUnhandledProps(AccordionTitle, this.props) const ElementType = getElementType(AccordionTitle, this.props) + const iconValue = _.isNil(icon) ? 'dropdown' : icon if (_.isNil(content)) { return ( @@ -66,7 +67,7 @@ export default class AccordionTitle extends Component { return ( - {Icon.create(_.isNil(icon) ? 'dropdown' : icon, { autoGenerateKey: false })} + {Icon.create(iconValue, { autoGenerateKey: false })} {content} ) From 9c60160f527a1409b810553453211dcd680e4e93 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 11 Feb 2019 19:01:36 +0200 Subject: [PATCH 5/6] fix tests --- src/modules/Accordion/AccordionTitle.js | 3 ++- test/specs/modules/Accordion/AccordionTitle-test.js | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js index c8a24b3f9f..581865783c 100644 --- a/src/modules/Accordion/AccordionTitle.js +++ b/src/modules/Accordion/AccordionTitle.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { + childrenUtils, createShorthandFactory, customPropTypes, getElementType, @@ -57,7 +58,7 @@ export default class AccordionTitle extends Component { const ElementType = getElementType(AccordionTitle, this.props) const iconValue = _.isNil(icon) ? 'dropdown' : icon - if (_.isNil(content)) { + if (!childrenUtils.isNil(children)) { return ( {children} diff --git a/test/specs/modules/Accordion/AccordionTitle-test.js b/test/specs/modules/Accordion/AccordionTitle-test.js index f8522edad9..5f80d41fa1 100644 --- a/test/specs/modules/Accordion/AccordionTitle-test.js +++ b/test/specs/modules/Accordion/AccordionTitle-test.js @@ -9,7 +9,10 @@ describe('AccordionTitle', () => { common.rendersChildren(AccordionTitle) common.implementsCreateMethod(AccordionTitle) - common.implementsIconProp(AccordionTitle, { autoGenerateKey: false }) + common.implementsIconProp(AccordionTitle, { + alwaysPresent: true, + autoGenerateKey: false, + }) common.propKeyOnlyToClassName(AccordionTitle, 'active') From d0bc4c9a61789944e1332503b9c26fed9b615423 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 11 Feb 2019 19:05:11 +0200 Subject: [PATCH 6/6] fix types --- src/modules/Accordion/AccordionTitle.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/modules/Accordion/AccordionTitle.d.ts b/src/modules/Accordion/AccordionTitle.d.ts index 24dd51c616..70e24ff775 100644 --- a/src/modules/Accordion/AccordionTitle.d.ts +++ b/src/modules/Accordion/AccordionTitle.d.ts @@ -1,4 +1,6 @@ import * as React from 'react' + +import { IconProps } from '../../elements/Icon' import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic' export interface AccordionTitleProps extends StrictAccordionTitleProps { @@ -22,7 +24,7 @@ export interface StrictAccordionTitleProps { content?: SemanticShorthandContent /** Shorthand for Icon. */ - icon?: SemanticShorthandItem + icon?: SemanticShorthandItem /** AccordionTitle index inside Accordion. */ index?: number | string