PR#36: Enhanced the collapsed now the buttons of colapsed would showMoreOrLess - fedora-qa/landingpage

fedora-qa / landingpage

#36 Enhanced the collapsed now the buttons of colapsed would showMoreOrLess

Closed 2 years ago by lbrabec. Opened 3 years ago by alisina92.

fedora-qa/ alisina92/landingpage showMoreOrLess-Alisina into master

I have fixed the CSS standardazied format

[Alisina92] • 3 years ago

d8b17ca

Enhanced the collapsed now the buttons of colapsed would showMoreOrLess

[Alisina92] • 3 years ago

a4155bb

src/wizard/components.js

file modified

+61 -52

		`@@ -1,59 +1,68 @@`
		`- import React, { Component } from "react"`
		`- import { Card, CardHeader, CardBody, UncontrolledCollapse, Row } from "reactstrap"`
		`- import _ from "lodash"`
		`+ import React, { useState } from "react";`
		`+ import {`
		`+ Card,`
		`+ CardHeader,`
		`+ CardBody,`
		`+ Row,`
		`+ UncontrolledCollapse,`
		`+ Collapse,`
		`+ } from "reactstrap";`
		`+ import _ from "lodash";`

		`- class CollapsableCard extends Component {`
		`- render() {`
		`- const { title, expand_text, expand_class, children } = this.props`
		`- const id = _.uniqueId("collapsable-card-id-")`
		`- return (`
		`- <Card>`
		`- <CardHeader>`
		`- <Row>`
		`- <div className="col-md-11">{title}</div>`
		`- <div className="col-md-1">`
		`- <Toggler id={id} color={expand_class} text={expand_text} />`
		`- </div>`
		`- </Row>`
		`- </CardHeader>`
		`- <UncontrolledCollapse toggler={"#" + id}>`
		`- <CardBody>{children}</CardBody>`
		`- </UncontrolledCollapse>`
		`- </Card>`
		`- )`
		`- }`
		`- }`
		`+ const CollapsableCard = ({ title, children, color }) => {`
		`+ const id = _.uniqueId("collapsable-card-id-");`
		`+ const [isCollapsed, setIsCollapsed] = useState(false);`
		`+ const toggleHandler = () => {`
		`+ setIsCollapsed(!isCollapsed);`
		`+ };`
		`+ const classes = "btn btn-sm float-right btn-" + color;`
		`+ return (`
		`+ <Card>`
		`+ <CardHeader>`
		`+ <Row>`
		`+ <div className="col-md-11">{title}</div>`
		`+ </Row>`
		`+ </CardHeader>`
		`+ <Collapse isOpen={isCollapsed}>`
		`+ <CardBody>{children}</CardBody>`
		`+ </Collapse>`
		`+ <button`
		`+ onClick={() => toggleHandler()}`
		`+ className={classes}`
		`+ style={{`
		`+ color: "#fff",`
		`+ backgroundColor: "#3c6eb4",`
		`+ borderColor: "#3c6eb4",`
		`+ }}`
		`+ href="#"`
		`+ id={id}`
		`+ >`
		`+ {isCollapsed ? "show Less" : "show More!"}`
		`+ </button>`
		`+ </Card>`
		`+ );`
		`+ };`

		`- class CollapsableBadge extends Component {`
		`- render() {`
		`- const { expand_text, expand_class, children, type } = this.props`
		`- const id = _.uniqueId("collapsable-badge-id-")`
		`- return (`
		`- <span>`
		`- <a class={type + " " + type + "-" + expand_class} href="#" id={id} role="button">`
		`- {expand_text}`
		`- </a>`
		`- <UncontrolledCollapse toggler={"#" + id}>{children}</UncontrolledCollapse>`
		`- </span>`
		`- )`
		`- }`
		`- }`
		`+ const CollapsableBadge = ({ expand_text, expand_class, children, type }) => {`
		`+ const id = _.uniqueId("collapsable-badge-id-");`
		`+ return (`
		`+ <span>`
		`+ <a`
		`+ class={type + " " + type + "-" + expand_class}`
		`+ href="#"`
		`+ id={id}`
		`+ role="button"`
		`+ >`
		`+ {expand_text}`
		`+ </a>`
		`+ <UncontrolledCollapse toggler={"#" + id}>{children}</UncontrolledCollapse>`
		`+ </span>`
		`+ );`
		`+ };`

		`CollapsableBadge.defaultProps = {`
		`type: "badge",`
		`expand_class: "primary",`
		`- }`
		`-`
		`- class Toggler extends Component {`
		`- render() {`
		`- const { id, text, color } = this.props`
		`- const classes = "btn btn-sm float-right btn-" + color`
		`- return (`
		`- <button className={classes} href="#" id={id}>`
		`- {text}`
		`- </button>`
		`- )`
		`- }`
		`- }`
		`+ };`

		`- export { CollapsableCard, CollapsableBadge }`
		`+ export { CollapsableCard, CollapsableBadge };`

alisina92 commented 3 years ago

https://pagure.io/fedora-qa/landingpage/issue/35

/ The button of the Accardeon now will show more or less depending on the state of the accordion /

1 new commit added

I have fixed the CSS standardazied format

3 years ago

lbrabec commented 2 years ago

Thanks for participating in contribution period of Outreachy. This pull-request has not been selected to be merged and will be closed for housecleaning purposes. We may revisit this pull-request later, but as of now we will focus on merging pull-requests from our accepted intern.