From 9d7af28e8725d13b04c318ae27ff6e505cf360e9 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:10:39 +0100 Subject: [PATCH] add AboutCard and IconLinkVertical to core --- .../src/components/AboutCard/AboutCard.tsx | 72 ++++++++++++ .../components/AboutCard/IconLinkVertical.tsx | 104 ++++++++++++++++++ .../src/components/AboutCard/SubHeader.tsx | 44 ++++++++ .../core/src/components/AboutCard/index.ts | 18 +++ .../core/src/components/AboutCard/types.ts | 24 ++++ 5 files changed, 262 insertions(+) create mode 100644 packages/core/src/components/AboutCard/AboutCard.tsx create mode 100644 packages/core/src/components/AboutCard/IconLinkVertical.tsx create mode 100644 packages/core/src/components/AboutCard/SubHeader.tsx create mode 100644 packages/core/src/components/AboutCard/index.ts create mode 100644 packages/core/src/components/AboutCard/types.ts diff --git a/packages/core/src/components/AboutCard/AboutCard.tsx b/packages/core/src/components/AboutCard/AboutCard.tsx new file mode 100644 index 0000000000..e18894f3fb --- /dev/null +++ b/packages/core/src/components/AboutCard/AboutCard.tsx @@ -0,0 +1,72 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { + Card, + CardContent, + CardHeader, + Divider, + makeStyles, +} from '@material-ui/core'; +import { SubHeader } from './SubHeader'; +import { SubHeaderLink } from './types'; + +const useStyles = makeStyles({ + gridItemCard: { + display: 'flex', + flexDirection: 'column', + height: 'calc(100% - 10px)', // for pages without content header + marginBottom: '10px', + }, + gridItemCardContent: { + flex: 1, + }, +}); + +type Props = { + title: string; + headerClass?: string; + headerAction?: React.ReactNode; + links: SubHeaderLink[]; + contentClass?: string; + content: React.ReactNode; + variant?: string; +}; + +export const AboutCard = ({ + title, + headerAction, + links, + content, + variant, +}: Props) => { + const classes = useStyles(); + return ( + + } + /> + + + {content} + + + ); +}; diff --git a/packages/core/src/components/AboutCard/IconLinkVertical.tsx b/packages/core/src/components/AboutCard/IconLinkVertical.tsx new file mode 100644 index 0000000000..f935d2fa6e --- /dev/null +++ b/packages/core/src/components/AboutCard/IconLinkVertical.tsx @@ -0,0 +1,104 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import classnames from 'classnames'; +import { makeStyles, Link } from '@material-ui/core'; +import LinkIcon from '@material-ui/icons/Link'; +import { Link as RouterLink } from 'react-router-dom'; + +type IconLinkVerticalProps = { + icon?: React.ReactNode; + href?: string; + disabled?: boolean; + title?: string; + label: string; + action?: React.ReactNode; +}; + +const useIconStyles = makeStyles(theme => ({ + link: { + display: 'grid', + justifyItems: 'center', + gridGap: 4, + textAlign: 'center', + }, + disabled: { + color: 'gray', + }, + label: { + fontSize: '0.7rem', + textTransform: 'uppercase', + fontWeight: 600, + letterSpacing: 1.2, + }, + linkStyle: { + color: theme.palette.secondary.main, + }, +})); + +export function IconLinkVertical({ + icon = , + href = '#', + disabled = false, + action, + ...props +}: IconLinkVerticalProps) { + const classes = useIconStyles(); + + if (disabled) { + return ( + + {icon} + {props.label} + + ); + } + + if (action) { + return ( + + {icon} + {action} + + ); + } + + // Absolute links should not be using RouterLink + if (href?.startsWith('//') || href?.includes('://')) { + return ( + + {icon} + {props.label} + + ); + } + + return ( + + {icon} + {props.label} + + ); +} diff --git a/packages/core/src/components/AboutCard/SubHeader.tsx b/packages/core/src/components/AboutCard/SubHeader.tsx new file mode 100644 index 0000000000..861821f89b --- /dev/null +++ b/packages/core/src/components/AboutCard/SubHeader.tsx @@ -0,0 +1,44 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { IconLinkVertical } from './IconLinkVertical'; +import { SubHeaderLink } from './types'; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + links: { + margin: theme.spacing(2, 0), + display: 'grid', + gridAutoFlow: 'column', + gridAutoColumns: 'min-content', + gridGap: theme.spacing(3), + }, +})); + +type Props = { + links: SubHeaderLink[]; +}; + +export const SubHeader = ({ links }: Props) => { + const classes = useStyles(); + return ( + + ); +}; diff --git a/packages/core/src/components/AboutCard/index.ts b/packages/core/src/components/AboutCard/index.ts new file mode 100644 index 0000000000..0491d467f8 --- /dev/null +++ b/packages/core/src/components/AboutCard/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { AboutCard } from './AboutCard'; +export { IconLinkVertical } from './IconLinkVertical'; diff --git a/packages/core/src/components/AboutCard/types.ts b/packages/core/src/components/AboutCard/types.ts new file mode 100644 index 0000000000..e1c3948797 --- /dev/null +++ b/packages/core/src/components/AboutCard/types.ts @@ -0,0 +1,24 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export type SubHeaderLink = { + icon?: React.ReactNode; + href?: string; + disabled?: boolean; + title?: string; + label: string; + action?: React.ReactNode; + edithref?: string; +};