add AboutCard and IconLinkVertical to core

2020-12-11 17:10:39 +01:00
parent e804237348
commit 9d7af28e87
5 changed files with 262 additions and 0 deletions
@@ -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 (
+    <Card className={variant === 'gridItem' ? classes.gridItemCard : ''}>
+      <CardHeader
+        title={title}
+        action={headerAction}
+        subheader={<SubHeader links={links} />}
+      />
+      <Divider />
+      <CardContent
+        className={variant === 'gridItem' ? classes.gridItemCardContent : ''}
+      >
+        {content}
+      </CardContent>
+    </Card>
+  );
+};
@@ -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 = <LinkIcon />,
+  href = '#',
+  disabled = false,
+  action,
+  ...props
+}: IconLinkVerticalProps) {
+  const classes = useIconStyles();
+
+  if (disabled) {
+    return (
+      <Link
+        className={classnames(classes.link, classes.disabled)}
+        underline="none"
+        title={props.title}
+        {...props}
+      >
+        {icon}
+        <span className={classes.label}>{props.label}</span>
+      </Link>
+    );
+  }
+
+  if (action) {
+    return (
+      <Link
+        className={classnames(classes.link, classes.linkStyle)}
+        href={href}
+        {...props}
+      >
+        {icon}
+        {action}
+      </Link>
+    );
+  }
+
+  // Absolute links should not be using RouterLink
+  if (href?.startsWith('//') || href?.includes('://')) {
+    return (
+      <Link className={classes.link} href={href} {...props}>
+        {icon}
+        <span className={classes.label}>{props.label}</span>
+      </Link>
+    );
+  }
+
+  return (
+    <Link className={classes.link} to={href} component={RouterLink} {...props}>
+      {icon}
+      <span className={classes.label}>{props.label}</span>
+    </Link>
+  );
+}
@@ -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 (
+    <nav className={classes.links}>
+      {links.map((link, index) => (
+        <IconLinkVertical key={index + 1} {...link} />
+      ))}
+    </nav>
+  );
+};
@@ -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';
@@ -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;
+};