Skip to content

feat: add list of user's groups to Accounts page #10522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Nov 7, 2023
Merged

feat: add list of user's groups to Accounts page #10522

Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
00d819f
chore: add query for a user's groups
Parkreiner Nov 1, 2023
1d646eb
chore: integrate user groups into UI
Parkreiner Nov 1, 2023
024879d
refactor: split UI card into separate component
Parkreiner Nov 2, 2023
102b1e0
chore: enforce alt text for AvatarCard
Parkreiner Nov 2, 2023
e8c713c
chore: add proper alt text support for Avatar
Parkreiner Nov 2, 2023
22e9573
fix: update props for Avatar call sites
Parkreiner Nov 2, 2023
acf2500
finish AccountPage changes
Parkreiner Nov 2, 2023
f4b9a63
wip: commit progress on AvatarCard
Parkreiner Nov 2, 2023
426260d
fix: add better UI error handling
Parkreiner Nov 3, 2023
fecf41e
fix: update theme setup for AvatarCard
Parkreiner Nov 3, 2023
831d110
fix: update styling for AccountPage
Parkreiner Nov 3, 2023
69fab82
fix: make error message conditional
Parkreiner Nov 3, 2023
f7cffd1
chore: update styling for AvatarCard
Parkreiner Nov 3, 2023
2e43d5f
chore: finish AvatarCard
Parkreiner Nov 3, 2023
7c322fa
fix: add maxWidth support to AvatarCard
Parkreiner Nov 3, 2023
b92c5f7
chore: update how no max width is defined
Parkreiner Nov 3, 2023
d5b5323
chore: add AvatarCard stories
Parkreiner Nov 3, 2023
43ae56b
fix: remove incorrect semantics for AvatarCard
Parkreiner Nov 6, 2023
ba57fff
docs: add comment about flexbox behavior
Parkreiner Nov 6, 2023
387c033
docs: add clarifying text about prop
Parkreiner Nov 6, 2023
7dcddbf
fix: fix grammar for singular groups
Parkreiner Nov 6, 2023
68ae492
refactor: split off AccountUserGroups and add story
Parkreiner Nov 6, 2023
d56a9cc
fix: differentiate mock groups more
Parkreiner Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
wip: commit progress on AvatarCard
  • Loading branch information
@Parkreiner
Parkreiner committed Nov 2, 2023
commit f4b9a636ccf82632e471899cbd0e15a8ff668265
55 changes: 48 additions & 7 deletions site/src/components/AvatarCard/AvatarCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,30 @@
import { type ReactNode } from "react";
import { useTheme } from "@emotion/react";
import { Avatar, AvatarIcon } from "components/Avatar/Avatar";
import {
type CSSObject,
type Interpolation,
type Theme,
useTheme,
} from "@emotion/react";

type Width = "sm" | "md" | "lg" | "full";

type AvatarCardProps = {
header: ReactNode;
imgUrl: string;
altText: string;

subtitle?: ReactNode;
width?: "sm" | "md" | "lg" | "full";
width?: Width;
};

const renderedWidths = {
sm: (theme) => theme.spacing(2),
md: (theme) => theme.spacing(3),
lg: (theme) => theme.spacing(6),
full: { width: "100%" },
} as const satisfies Record<Width, Interpolation<Theme>>;

export function AvatarCard({
header,
imgUrl,
Expand All @@ -20,14 +35,40 @@ export function AvatarCard({
const theme = useTheme();

return (
<div css={{ backgroundColor: "blue" }}>
<div>
<span>{header}</span>
{subtitle && <span>{subtitle}</span>}
<div
css={[
renderedWidths[width],
{
display: "flex",
flexFlow: "row nowrap",
alignItems: "center",
border: `1px solid ${theme.palette.divider}`,
gap: theme.spacing(2),
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius,
cursor: "default",
},
]}
>
<div css={{ marginRight: "auto" }}>
<div css={theme.typography.body1 as CSSObject}>{header}</div>

{subtitle && (
<div
css={[
theme.typography.body2 as CSSObject,
{ color: theme.palette.text.secondary },
]}
>
{subtitle}
</div>
)}
</div>

<div>
<img src={imgUrl} alt={altText} />
<Avatar>
<AvatarIcon src={imgUrl} alt={altText} />
</Avatar>
</div>
</div>
);
Expand Down