add circle icon helper (#27185)

web/packages/design/src/Icon/IconCircle.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * 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 { useTheme } from 'styled-components';
+
+import { Box } from 'design';
+
+type IconCircleProps = {
+  Icon: React.ElementType;
+  size: number;
+  bg?: string;
+  fill?: string;
+};
+
+/**
+ * Returns an Icon with a circular background
+ *
+ * @remarks
+ * background fill and text color will default to the current theme if not provided
+ *
+ * @param Icon - the Icon to render
+ * @param bg - optional background color
+ * @param size - the Icon size including the circle
+ * @param fill - optional text color
+ * @returns JSX Element
+ *
+ */
+export const IconCircle = ({ Icon, bg, size, fill }: IconCircleProps) => {
+  const theme = useTheme();
+  const background = bg ? bg : theme.colors.spotBackground[0];
+  const color = fill ? fill : theme.colors.text.main;
+
+  return (
+    <Box
+      bg={background}
+      borderRadius="50%"
+      p={size / 4}
+      width={size}
+      height={size}
+    >
+      <Icon size={size / 2} bg={background} fill={color} />
+    </Box>
+  );
+};

web/packages/design/src/SVGIcon/SvgIcon.story.tsx

@@ -15,8 +15,12 @@
  */
 import React from 'react';
 
+import { useTheme } from 'styled-components';
+
+import { IconCircle } from 'design/Icon/IconCircle';
+
 import Flex from '../Flex';
-import Box from '../Box';
+import Text from '../Text';
 
 import * as SvgIcons from '.';
 
@@ -30,17 +34,55 @@ export const PreferSvgIcons = () => {
     <Flex flexWrap="wrap">
       {icons.map(icon => {
         // eslint-disable-next-line import/namespace
-        return <IconBox Icon={SvgIcons[icon]} text={icon} />;
+        const S = SvgIcons[icon];
+        const size = 64;
+
+        return (
+          <>
+            <IconBox text={icon}>
+              <IconContainer Icon={S} size={size} />
+            </IconBox>
+            <IconBox text={icon}>
+              <IconCircle Icon={S} size={size} />
+            </IconBox>
+          </>
+        );
       })}
     </Flex>
   );
 };
 
-const IconBox = ({ Icon, text }) => (
-  <Flex m={3} width="300px">
-    <Box width="40px" textAlign="center">
-      <Icon />
-    </Box>
-    <Box ml={2}>{text}</Box>
-  </Flex>
-);
+const IconBox = ({ children, text }) => {
+  const theme = useTheme();
+
+  return (
+    <Flex
+      width="150px"
+      height="150px"
+      alignItems="center"
+      justifyContent="center"
+      bg={theme.colors.spotBackground[0]}
+      flexDirection="column"
+      m={1}
+    >
+      <Flex justifyContent="center" p={2}>
+        {children}
+      </Flex>
+      <Text typography="paragraph2" mt={2}>
+        {text}
+      </Text>
+    </Flex>
+  );
+};
+
+const IconContainer = ({ Icon, size }) => {
+  const theme = useTheme();
+
+  return (
+    <Icon
+      size={size}
+      bg={theme.colors.spotBackground[0]}
+      fill={theme.colors.text.main}
+    />
+  );
+};