Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(community-testimonial): upgrade to styled-components
BREAKING CHANGE: styled-components now a peer dependency
- Loading branch information
Showing
7 changed files
with
220 additions
and
75 deletions.
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
This file was deleted.
Oops, something went wrong.
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
218 changes: 182 additions & 36 deletions
218
packages/Testimonial/__tests__/__snapshots__/Testimonial.spec.jsx.snap
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 |
|---|---|---|
| @@ -1,51 +1,197 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Testimonial renders 1`] = ` | ||
| <Box | ||
| between={3} | ||
| inline={false} | ||
| tag="div" | ||
| .c0 { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-direction: column; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
| } | ||
| .c1 { | ||
| font-size: 0; | ||
| margin-bottom: 1rem; | ||
| max-width: 60px; | ||
| max-height: 60px; | ||
| } | ||
| @media (min-width:576px) { | ||
| .c0 { | ||
| -webkit-flex-direction: row; | ||
| -ms-flex-direction: row; | ||
| flex-direction: row; | ||
| -webkit-align-items: center; | ||
| -webkit-box-align: center; | ||
| -ms-flex-align: center; | ||
| align-items: center; | ||
| } | ||
| } | ||
| @media (min-width:576px) { | ||
| .c1 { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-align-items: center; | ||
| -webkit-box-align: center; | ||
| -ms-flex-align: center; | ||
| align-items: center; | ||
| max-height: 60px; | ||
| max-width: 60px; | ||
| margin-right: 1rem; | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| <Testimonial | ||
| additionalInfo="Pinnacle Reforestation" | ||
| image={ | ||
| <Image | ||
| alt="Image of co-workers collaborating" | ||
| height={60} | ||
| rounded="circle" | ||
| src="image-example.jpg" | ||
| width={60} | ||
| /> | ||
| } | ||
| testimonial="My office is where ever my customers are. TELUS helps me stay connected whether I'm making a sale or doing payroll." | ||
| testimonialStyle="largeText" | ||
| title="Dave Smith, Foreman" | ||
| > | ||
| <Paragraph | ||
| align="left" | ||
| bold={false} | ||
| invert={false} | ||
| size="large" | ||
| > | ||
| My office is where ever my customers are. TELUS helps me stay connected whether I'm making a sale or doing payroll. | ||
| </Paragraph> | ||
| <div | ||
| className="imageAndQuote" | ||
| <Box | ||
| between={3} | ||
| inline={false} | ||
| tag="div" | ||
| > | ||
| <div | ||
| className="image" | ||
| className="TDS_Box-modules__betweenBottomMargin-3___1jBrz TDS_Box-modules__stack___33m4D" | ||
| > | ||
| <Image | ||
| alt="Image of co-workers collaborating" | ||
| height={60} | ||
| rounded="circle" | ||
| src="image-example.jpg" | ||
| width={60} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <Paragraph | ||
| align="left" | ||
| bold={true} | ||
| invert={false} | ||
| size="medium" | ||
| > | ||
| Dave Smith, Foreman | ||
| </Paragraph> | ||
| <Paragraph | ||
| align="left" | ||
| bold={false} | ||
| invert={false} | ||
| size="medium" | ||
| size="large" | ||
| > | ||
| Pinnacle Reforestation | ||
| <p | ||
| className="TDS_Typography-modules__wordBreak___3OZx_ TDS_Spacing-modules__noSpacing___XPYDG TDS_Typography-modules__color___2CNH8 TDS_Typography-modules__large___24W-w TDS_Typography-modules__wordBreak___3OZx_ TDS_Typography-modules__largeFont___3k7bm TDS_Typography-modules__wordBreak___3OZx_ TDS_Paragraph-modules__leftAlign___KgwhE" | ||
| > | ||
| My office is where ever my customers are. TELUS helps me stay connected whether I'm making a sale or doing payroll. | ||
| </p> | ||
| </Paragraph> | ||
| <Testimonial__StyledImageAndQuote> | ||
| <StyledComponent | ||
| forwardedComponent={ | ||
| Object { | ||
| "$$typeof": Symbol(react.forward_ref), | ||
| "attrs": Array [], | ||
| "componentStyle": ComponentStyle { | ||
| "componentId": "Testimonial__StyledImageAndQuote-sc-9sgiob-0", | ||
| "isStatic": true, | ||
| "lastClassName": "c0", | ||
| "rules": Array [ | ||
| "display: flex; flex-direction: column; @media (min-width: 576px) { | ||
| flex-direction: row; align-items: center; | ||
| }", | ||
| ], | ||
| }, | ||
| "displayName": "Testimonial__StyledImageAndQuote", | ||
| "foldedComponentIds": Array [], | ||
| "render": [Function], | ||
| "styledComponentId": "Testimonial__StyledImageAndQuote-sc-9sgiob-0", | ||
| "target": "div", | ||
| "toString": [Function], | ||
| "warnTooManyClasses": [Function], | ||
| "withComponent": [Function], | ||
| } | ||
| } | ||
| forwardedRef={null} | ||
| > | ||
| <div | ||
| className="c0" | ||
| > | ||
| <Testimonial__StyledImage> | ||
| <StyledComponent | ||
| forwardedComponent={ | ||
| Object { | ||
| "$$typeof": Symbol(react.forward_ref), | ||
| "attrs": Array [], | ||
| "componentStyle": ComponentStyle { | ||
| "componentId": "Testimonial__StyledImage-sc-9sgiob-1", | ||
| "isStatic": true, | ||
| "lastClassName": "c1", | ||
| "rules": Array [ | ||
| "font-size: 0; margin-bottom: 1rem; max-width: 60px; max-height: 60px; @media (min-width: 576px) { | ||
| display: flex; align-items: center; max-height: 60px; max-width: 60px; margin-right: 1rem; margin-bottom: 0; | ||
| }", | ||
| ], | ||
| }, | ||
| "displayName": "Testimonial__StyledImage", | ||
| "foldedComponentIds": Array [], | ||
| "render": [Function], | ||
| "styledComponentId": "Testimonial__StyledImage-sc-9sgiob-1", | ||
| "target": "div", | ||
| "toString": [Function], | ||
| "warnTooManyClasses": [Function], | ||
| "withComponent": [Function], | ||
| } | ||
| } | ||
| forwardedRef={null} | ||
| > | ||
| <div | ||
| className="c1" | ||
| > | ||
| <Image | ||
| alt="Image of co-workers collaborating" | ||
| height={60} | ||
| rounded="circle" | ||
| src="image-example.jpg" | ||
| width={60} | ||
| > | ||
| <img | ||
| alt="Image of co-workers collaborating" | ||
| className="TDS_Image-modules__fluid___1qw3M TDS_Borders-modules__circular___OppHT" | ||
| height={60} | ||
| src="image-example.jpg" | ||
| width={60} | ||
| /> | ||
| </Image> | ||
| </div> | ||
| </StyledComponent> | ||
| </Testimonial__StyledImage> | ||
| <div> | ||
| <Paragraph | ||
| align="left" | ||
| bold={true} | ||
| invert={false} | ||
| size="medium" | ||
| > | ||
| <p | ||
| className="TDS_Typography-modules__wordBreak___3OZx_ TDS_Spacing-modules__noSpacing___XPYDG TDS_Typography-modules__color___2CNH8 TDS_Typography-modules__medium___1rxfE TDS_Typography-modules__wordBreak___3OZx_ TDS_Typography-modules__boldFont___2YS3O TDS_Typography-modules__wordBreak___3OZx_ TDS_Paragraph-modules__leftAlign___KgwhE" | ||
| > | ||
| Dave Smith, Foreman | ||
| </p> | ||
| </Paragraph> | ||
| <Paragraph | ||
| align="left" | ||
| bold={false} | ||
| invert={false} | ||
| size="medium" | ||
| > | ||
| <p | ||
| className="TDS_Typography-modules__wordBreak___3OZx_ TDS_Spacing-modules__noSpacing___XPYDG TDS_Typography-modules__color___2CNH8 TDS_Typography-modules__medium___1rxfE TDS_Typography-modules__wordBreak___3OZx_ TDS_Typography-modules__mediumFont___XMrRj TDS_Paragraph-modules__leftAlign___KgwhE" | ||
| > | ||
| Pinnacle Reforestation | ||
| </p> | ||
| </Paragraph> | ||
| </div> | ||
| </div> | ||
| </StyledComponent> | ||
| </Testimonial__StyledImageAndQuote> | ||
| </div> | ||
| </div> | ||
| </Box> | ||
| </Box> | ||
| </Testimonial> | ||
| `; |
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 |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| require('./dist/index.css') | ||
| const Testimonial = require('./dist/index.cjs') | ||
|
|
||
| module.exports = Testimonial |
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 |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| import './dist/index.css' | ||
| import Testimonial from './dist/index.es' | ||
|
|
||
| export default Testimonial |
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