refactor(ui): Extract OAuth LogoGroup components (#8282)

Author: alexcarpenter

packages/ui/src/components/OAuthConsent/ListGroup.tsx

@@ -0,0 +1,123 @@
+import { Box, Text, descriptors } from '@/ui/customizables';
+import { common } from '@/ui/styledSystem';
+import { colors } from '@/ui/utils/colors';
+import type { ComponentProps } from 'react';
+
+export function ListGroup({ children, sx, ...props }: Omit<ComponentProps<typeof Box>, 'elementDescriptor'>) {
+  return (
+    <Box
+      {...props}
+      sx={[
+        t => ({
+          textAlign: 'start',
+          borderWidth: t.borderWidths.$normal,
+          borderStyle: t.borderStyles.$solid,
+          borderColor: t.colors.$borderAlpha100,
+          borderRadius: t.radii.$lg,
+          overflow: 'hidden',
+        }),
+        sx,
+      ]}
+      elementDescriptor={descriptors.listGroup}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function ListGroupHeader({ children, sx, ...props }: Omit<ComponentProps<typeof Box>, 'elementDescriptor'>) {
+  return (
+    <Box
+      {...props}
+      sx={[
+        t => ({
+          padding: t.space.$3,
+          background: common.mergedColorsBackground(
+            colors.setAlpha(t.colors.$colorBackground, 1),
+            t.colors.$neutralAlpha50,
+          ),
+        }),
+        sx,
+      ]}
+      elementDescriptor={descriptors.listGroupHeader}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function ListGroupHeaderTitle(props: Omit<ComponentProps<typeof Text>, 'elementDescriptor'>) {
+  return (
+    <Text
+      {...props}
+      variant='subtitle'
+      elementDescriptor={descriptors.listGroupHeaderTitle}
+    />
+  );
+}
+
+export function ListGroupContent({
+  children,
+  sx,
+  ...props
+}: Omit<ComponentProps<typeof Box>, 'as' | 'elementDescriptor'>) {
+  return (
+    <Box
+      {...props}
+      as='ul'
+      sx={[t => ({ margin: t.sizes.$none, padding: t.sizes.$none }), sx]}
+      elementDescriptor={descriptors.listGroupContent}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function ListGroupItem({
+  children,
+  sx,
+  ...props
+}: Omit<ComponentProps<typeof Box>, 'as' | 'elementDescriptor'>) {
+  return (
+    <Box
+      {...props}
+      as='li'
+      sx={[
+        t => ({
+          display: 'flex',
+          alignItems: 'baseline',
+          paddingInline: t.space.$3,
+          paddingBlock: t.space.$2,
+          borderTopWidth: t.borderWidths.$normal,
+          borderTopStyle: t.borderStyles.$solid,
+          borderTopColor: t.colors.$borderAlpha100,
+          '&::before': {
+            content: '""',
+            display: 'inline-block',
+            width: t.space.$1,
+            height: t.space.$1,
+            background: t.colors.$colorMutedForeground,
+            borderRadius: t.radii.$circle,
+            transform: 'translateY(-0.1875rem)',
+            marginInlineEnd: t.space.$2,
+            flexShrink: 0,
+          },
+        }),
+        sx,
+      ]}
+      elementDescriptor={descriptors.listGroupItem}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function ListGroupItemLabel(props: Omit<ComponentProps<typeof Text>, 'elementDescriptor'>) {
+  return (
+    <Text
+      {...props}
+      variant='subtitle'
+      elementDescriptor={descriptors.listGroupItemLabel}
+    />
+  );
+}

packages/ui/src/components/OAuthConsent/LogoGroup.tsx

@@ -0,0 +1,100 @@
+import { descriptors, Flex } from '@/ui/customizables';
+import type { ComponentProps } from 'react';
+import type { ThemableCssProp } from '@/ui/styledSystem';
+import { Box, Icon } from '@/ui/customizables';
+import { LockDottedCircle } from '@/ui/icons';
+import { colors } from '@/ui/utils/colors';
+import { common } from '@/ui/styledSystem';
+
+export function LogoGroup({ children }: { children: React.ReactNode }) {
+  return (
+    <Flex
+      justify='center'
+      align='center'
+      gap={4}
+      sx={t => ({
+        marginBlockEnd: t.space.$6,
+      })}
+      elementDescriptor={descriptors.logoGroup}
+    >
+      {children}
+    </Flex>
+  );
+}
+
+export function LogoGroupItem({ children, sx, ...props }: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      {...props}
+      sx={[{ flex: 1 }, sx]}
+      elementDescriptor={descriptors.logoGroupItem}
+    >
+      {children}
+    </Flex>
+  );
+}
+
+export function LogoGroupIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: ThemableCssProp }) {
+  const scale: ThemableCssProp = t => {
+    const value = size === 'sm' ? t.space.$6 : t.space.$12;
+    return {
+      width: value,
+      height: value,
+    };
+  };
+
+  return (
+    <Box
+      sx={t => [
+        {
+          background: common.mergedColorsBackground(
+            colors.setAlpha(t.colors.$colorBackground, 1),
+            t.colors.$neutralAlpha50,
+          ),
+          borderRadius: t.radii.$circle,
+          borderWidth: t.borderWidths.$normal,
+          borderStyle: t.borderStyles.$solid,
+          borderColor: t.colors.$borderAlpha100,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        scale,
+        sx,
+      ]}
+      elementDescriptor={descriptors.logoGroupIcon}
+    >
+      <Icon
+        icon={LockDottedCircle}
+        sx={t => ({
+          color: t.colors.$primary500,
+        })}
+      />
+    </Box>
+  );
+}
+
+export function LogoGroupSeparator() {
+  return (
+    <Box
+      as='svg'
+      // @ts-ignore - valid SVG attribute
+      fill='none'
+      viewBox='0 0 16 2'
+      height={2}
+      aria-hidden
+      sx={t => ({
+        color: t.colors.$colorMutedForeground,
+      })}
+      elementDescriptor={descriptors.logoGroupSeparator}
+    >
+      <path
+        stroke='currentColor'
+        strokeDasharray='0.1 4'
+        strokeLinecap='round'
+        strokeWidth='2'
+        d='M1 1h14'
+      />
+    </Box>
+  );
+}