-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-react): Introduce responsive layouts of Card #DS-1559
- Loading branch information
1 parent
361e478
commit 82f43fb
Showing
8 changed files
with
190 additions
and
15 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 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
74 changes: 74 additions & 0 deletions
74
packages/web-react/src/components/Card/demo/CardResponsiveCard.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,74 @@ | ||
| import React from 'react'; | ||
| import { ButtonLink } from '../../Button'; | ||
| import { Grid } from '../../Grid'; | ||
| import { PartnerLogo } from '../../PartnerLogo'; | ||
| import Card from '../Card'; | ||
| import CardBody from '../CardBody'; | ||
| import CardEyebrow from '../CardEyebrow'; | ||
| import CardFooter from '../CardFooter'; | ||
| import CardLink from '../CardLink'; | ||
| import CardLogo from '../CardLogo'; | ||
| import CardMedia from '../CardMedia'; | ||
| import CardTitle from '../CardTitle'; | ||
| import { LOGO, MEDIA_IMAGE } from './constants'; | ||
|
|
||
| const CardResponsiveCard = () => { | ||
| return ( | ||
| <Grid cols={{ mobile: 1, tablet: 2 }}> | ||
| <Card direction={{ mobile: 'vertical', tablet: 'horizontal', desktop: 'horizontal-reversed' }} isBoxed> | ||
| <CardMedia size="medium">{MEDIA_IMAGE}</CardMedia> | ||
| <CardLogo> | ||
| <PartnerLogo size="small" hasSafeArea> | ||
| {LOGO} | ||
| </PartnerLogo> | ||
| </CardLogo> | ||
| <CardBody> | ||
| <CardEyebrow>Responsive card layout</CardEyebrow> | ||
| <CardTitle isHeading> | ||
| <CardLink href="#">Vertical → horizontal → reversed horizontal</CardLink> | ||
| </CardTitle> | ||
| {/* User content */} | ||
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> | ||
| {/* End user content */} | ||
| </CardBody> | ||
| <CardFooter> | ||
| <ButtonLink href="#" color="primary"> | ||
| Primary | ||
| </ButtonLink> | ||
| <ButtonLink href="#" color="secondary"> | ||
| Secondary | ||
| </ButtonLink> | ||
| </CardFooter> | ||
| </Card> | ||
| <Card direction={{ mobile: 'vertical', tablet: 'horizontal', desktop: 'horizontal-reversed' }} isBoxed> | ||
| <CardMedia size="medium" isExpanded> | ||
| {MEDIA_IMAGE} | ||
| </CardMedia> | ||
| <CardLogo> | ||
| <PartnerLogo size="small" hasSafeArea> | ||
| {LOGO} | ||
| </PartnerLogo> | ||
| </CardLogo> | ||
| <CardBody> | ||
| <CardEyebrow>Responsive card layout</CardEyebrow> | ||
| <CardTitle isHeading> | ||
| <CardLink href="#">Vertical → horizontal → reversed horizontal, expanded media</CardLink> | ||
| </CardTitle> | ||
| {/* User content */} | ||
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> | ||
| {/* End user content */} | ||
| </CardBody> | ||
| <CardFooter> | ||
| <ButtonLink href="#" color="primary"> | ||
| Primary | ||
| </ButtonLink> | ||
| <ButtonLink href="#" color="secondary"> | ||
| Secondary | ||
| </ButtonLink> | ||
| </CardFooter> | ||
| </Card> | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| export default CardResponsiveCard; |
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 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 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 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 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,6 +1,45 @@ | ||
| /** | ||
| * Converts a kebab-case string to camelCase | ||
| * Converts a kebab-case string to camelCase. | ||
| * | ||
| * @param str | ||
| * @param {string} str - The kebab-case string to be converted. | ||
| * @returns {string} The camelCase version of the input string. | ||
| */ | ||
| export const kebabCaseToCamelCase = (str: string): string => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); | ||
|
|
||
| /** | ||
| * Converts an object with kebab-case string values to camelCase. | ||
| * | ||
| * @param {Record<string, string>} input - The input to be converted. | ||
| * @returns {Record<string, string>} The converted input. | ||
| */ | ||
| export const kebabCaseToCamelCaseValues = (input: Record<string, string>): Record<string, string> => { | ||
| if (typeof input === 'object' && input !== null) { | ||
| const result: Record<string, string> = {}; | ||
| for (const [key, value] of Object.entries(input)) { | ||
| result[key] = typeof value === 'string' ? kebabCaseToCamelCase(value) : value; | ||
| } | ||
|
|
||
| return result; | ||
| } | ||
|
|
||
| return input; | ||
| }; | ||
|
|
||
| /** | ||
| * Converts a kebab-case string or an object with kebab-case values to camelCase. | ||
| * | ||
| * @param {string | Record<string, string>} input - The input to be converted. | ||
| * @returns {string | Record<string, string>} The converted input. | ||
| */ | ||
| export const stringOrObjectKebabCaseToCamelCase = ( | ||
| input: string | Record<string, string>, | ||
| ): string | Record<string, string> => { | ||
| if (typeof input === 'string') { | ||
| return kebabCaseToCamelCase(input); | ||
| } | ||
| if (typeof input === 'object' && input !== null) { | ||
| return kebabCaseToCamelCaseValues(input); | ||
| } | ||
|
|
||
| return input; | ||
| }; |