Merge pull request #3704 from backstage/samiram/aboutCard

Samiram/about card

packages/core/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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, IconLinkVerticalProps } from './IconLinkVertical';
+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: IconLinkVerticalProps[];
+};
+
+export const HeaderIconLinkRow = ({ links }: Props) => {
+  const classes = useStyles();
+  return (
+    <nav className={classes.links}>
+      {links.map((link, index) => (
+        <IconLinkVertical key={index + 1} {...link} />
+      ))}
+    </nav>
+  );
+};

packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 '../Link';
+
+export type IconLinkVerticalProps = {
+  icon?: React.ReactNode;
+  href?: string;
+  disabled?: boolean;
+  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"
+        {...props}
+      >
+        {icon}
+        <span className={classes.label}>{props.label}</span>
+      </Link>
+    );
+  }
+
+  if (action) {
+    return (
+      <Link className={classnames(classes.link, classes.linkStyle)} {...props}>
+        {icon}
+        {action}
+      </Link>
+    );
+  }
+
+  return (
+    <Link className={classes.link} to={href} component={RouterLink} {...props}>
+      {icon}
+      <span className={classes.label}>{props.label}</span>
+    </Link>
+  );
+}

packages/core/src/components/HeaderIconLinkRow/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { HeaderIconLinkRow } from './HeaderIconLinkRow';

packages/core/src/components/index.ts

@@ -38,3 +38,4 @@ export * from './TrendLine';
 export * from './WarningPanel';
 export * from './EmptyState';
 export * from './MarkdownContent';
+export * from './HeaderIconLinkRow';