Auth device list component (#36235)

* Auth device list component

* Review

* Fix licenses

web/packages/design/src/Box/Box.jsx

@@ -25,6 +25,7 @@ import {
   borderColor,
   flex,
   height,
+  lineHeight,
   maxWidth,
   minHeight,
   maxHeight,
@@ -43,6 +44,7 @@ const Box = styled.div`
   ${minWidth}
   ${space}
   ${height}
+  ${lineHeight}
   ${minHeight}
   ${maxHeight}
   ${width}

web/packages/design/src/Button/Button.jsx

@@ -131,6 +131,21 @@ export const kinds = props => {
           background: theme.colors.buttons.warning.active,
         },
       };
+    case 'warning-border':
+      return {
+        color: theme.colors.buttons.warning.default,
+        background: theme.colors.buttons.border.default,
+        border: '1px solid ' + theme.colors.buttons.warning.default,
+        '&:hover, &:focus': {
+          background: theme.colors.buttons.warning.hover,
+          color: theme.colors.buttons.warning.text,
+        },
+        '&:active': {
+          background: theme.colors.buttons.warning.active,
+          color: theme.colors.buttons.warning.text,
+        },
+      };
+
     case 'text':
       return {
         color: theme.colors.buttons.text,
@@ -238,4 +253,7 @@ export const ButtonPrimary = props => <Button kind="primary" {...props} />;
 export const ButtonSecondary = props => <Button kind="secondary" {...props} />;
 export const ButtonBorder = props => <Button kind="border" {...props} />;
 export const ButtonWarning = props => <Button kind="warning" {...props} />;
+export const ButtonWarningBorder = props => (
+  <Button kind="warning-border" {...props} />
+);
 export const ButtonText = props => <Button kind="text" {...props} />;

web/packages/design/src/MultiRowBox/MultiRowBox.story.test.tsx

@@ -0,0 +1,33 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import { render } from 'design/utils/testing';
+
+import { WithMultipleRows, WithSingleRow } from './MultiRowBox.story';
+
+test('renders single row', () => {
+  const { container } = render(<WithSingleRow />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('renders multiple rows', () => {
+  const { container } = render(<WithMultipleRows />);
+  expect(container.firstChild).toMatchSnapshot();
+});

web/packages/design/src/MultiRowBox/MultiRowBox.story.tsx

@@ -0,0 +1,41 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import { MultiRowBox, Row, SingleRowBox } from './MultiRowBox';
+
+export default {
+  title: 'Design/MultiRowBox',
+  component: MultiRowBox,
+};
+
+export const WithMultipleRows = () => (
+  <MultiRowBox>
+    <Row>Part 1</Row>
+    <Row>Part 2</Row>
+    <Row>Part 3</Row>
+  </MultiRowBox>
+);
+
+export const WithSingleRow = () => (
+  <SingleRowBox>
+    <div>Hello,</div>
+    <div>World!</div>
+  </SingleRowBox>
+);

web/packages/design/src/MultiRowBox/MultiRowBox.tsx

@@ -0,0 +1,65 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { ReactNode } from 'react';
+
+import styled from 'styled-components';
+
+import { Box } from 'design';
+
+type MultiRowBoxProps = {
+  children: ReactNode;
+};
+
+/**
+ * A box that displays a number of rows inside a rounded border, with horizontal
+ * lines between rows. Use together with {@link Row}. Example:
+ *
+ * ```tsx
+ * <MultiRowBox>
+ *   <Row>Row 1</Row>
+ *   <Row>Row 2</Row>
+ * </MultiRowBox>
+ * ```
+ */
+export const MultiRowBox = styled(Box)`
+  border: ${props =>
+    `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2]}`};
+  border-radius: ${props => props.theme.radii[2]}px;
+`;
+
+/** A single row of a {@link MultiRowBox}. */
+export const Row = styled(Box)`
+  padding: ${props => props.theme.space[4]}px;
+  &:not(:last-child) {
+    border-bottom: ${props =>
+      `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2]}`};
+  }
+`;
+
+/**
+ * A convenience utility to quickly render some components inside a single row
+ * with a rounded border.
+ */
+export function SingleRowBox({ children }: MultiRowBoxProps) {
+  return (
+    <MultiRowBox>
+      <Row>{children}</Row>
+    </MultiRowBox>
+  );
+}

web/packages/design/src/MultiRowBox/__snapshots__/MultiRowBox.story.test.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders multiple rows 1`] = `
+.c0 {
+  box-sizing: border-box;
+}
+
+.c1 {
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 4px;
+}
+
+.c2 {
+  padding: 24px;
+}
+
+.c2:not(:last-child) {
+  border-bottom: 1px solid rgba(255,255,255,0.18);
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c0 c2"
+  >
+    Part 1
+  </div>
+  <div
+    class="c0 c2"
+  >
+    Part 2
+  </div>
+  <div
+    class="c0 c2"
+  >
+    Part 3
+  </div>
+</div>
+`;
+
+exports[`renders single row 1`] = `
+.c0 {
+  box-sizing: border-box;
+}
+
+.c1 {
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 4px;
+}
+
+.c2 {
+  padding: 24px;
+}
+
+.c2:not(:last-child) {
+  border-bottom: 1px solid rgba(255,255,255,0.18);
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c0 c2"
+  >
+    <div>
+      Hello,
+    </div>
+    <div>
+      World!
+    </div>
+  </div>
+</div>
+`;

web/packages/design/src/MultiRowBox/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { MultiRowBox, SingleRowBox, Row } from './MultiRowBox';

web/packages/design/src/system/index.js

@@ -31,6 +31,7 @@ import {
   height,
   justifyContent,
   justifySelf,
+  lineHeight,
   maxHeight,
   maxWidth,
   minHeight,
@@ -74,6 +75,7 @@ export {
   height,
   justifyContent,
   justifySelf,
+  lineHeight,
   maxHeight,
   maxWidth,
   minHeight,

web/packages/design/src/theme/themes/bblpTheme.ts

@@ -75,16 +75,18 @@ const levels = {
   popout: '#373737',
 };
 
+const neutralColors = [
+  'rgba(255,255,255,0.07)',
+  'rgba(255,255,255,0.13)',
+  'rgba(255,255,255,0.18)',
+];
+
 const colors: ThemeColors = {
   ...sharedColors,
 
   levels,
 
-  spotBackground: [
-    'rgba(255,255,255,0.07)',
-    'rgba(255,255,255,0.13)',
-    'rgba(255,255,255,0.18)',
-  ],
+  spotBackground: neutralColors,
 
   brand: '#FFA028',
 
@@ -95,6 +97,7 @@ const colors: ThemeColors = {
         'rgba(255,160,40, 0.18)',
         'rgba(255,160,40, 0.25)',
       ],
+      neutral: neutralColors,
     },
   },
 

web/packages/design/src/theme/themes/darkTheme.ts

@@ -75,16 +75,18 @@ const levels = {
   popout: '#4A5688',
 };
 
+const neutralColors = [
+  'rgba(255,255,255,0.07)',
+  'rgba(255,255,255,0.13)',
+  'rgba(255,255,255,0.18)',
+];
+
 const colors: ThemeColors = {
   ...sharedColors,
 
   levels,
 
-  spotBackground: [
-    'rgba(255,255,255,0.07)',
-    'rgba(255,255,255,0.13)',
-    'rgba(255,255,255,0.18)',
-  ],
+  spotBackground: neutralColors,
 
   brand: '#9F85FF',
 
@@ -95,6 +97,7 @@ const colors: ThemeColors = {
         'rgba(159,133,255, 0.18)',
         'rgba(159,133,255, 0.25)',
       ],
+      neutral: neutralColors,
     },
   },
 

web/packages/design/src/theme/themes/lightTheme.ts

@@ -74,12 +74,18 @@ const levels = {
   popout: '#FFFFFF',
 };
 
+const neutralColors = [
+  'rgba(0,0,0,0.06)',
+  'rgba(0,0,0,0.13)',
+  'rgba(0,0,0,0.18)',
+];
+
 const colors: ThemeColors = {
   ...sharedColors,
 
   levels,
 
-  spotBackground: ['rgba(0,0,0,0.06)', 'rgba(0,0,0,0.13)', 'rgba(0,0,0,0.18)'],
+  spotBackground: neutralColors,
 
   brand: '#512FC9',
 
@@ -90,6 +96,7 @@ const colors: ThemeColors = {
         'rgba(81,47,201, 0.18)',
         'rgba(81,47,201, 0.25)',
       ],
+      neutral: neutralColors,
     },
   },