orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
435 lines • 13.4 kB
JavaScript
import React from "react";
import Badge from "../Badge";
import Flex from "../Flex";
import Box from "../Box";
import Spacer from "../Spacer";
import StyledLink from "../StyledLink";
import Avatar from ".";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/Avatar",
component: Avatar
};
export const defaultAvatar = () => /*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
initials: "AL",
subtitle: "Senior Business Analyst",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
});
defaultAvatar.storyName = "Default";
export const noImage = () => /*#__PURE__*/_jsxs(Spacer, {
my: "r",
children: [/*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL"
}), /*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
whiteInitials: true
})]
});
noImage.storyName = "No image";
export const imageOnly = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
})
});
imageOnly.storyName = "Image only";
export const iconOnly = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst"
})
});
iconOnly.storyName = "Icon only";
export const nameLink = () => /*#__PURE__*/_jsx(Avatar, {
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre"
});
nameLink.storyName = "Name as link";
export const small = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
sizing: "small",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "small",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
imageAlt: "Avatar for Ayden Lundgre",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
})]
});
small.storyName = "Small";
export const large = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: "Ayden Lundgre",
titleLevel: "H1",
subtitle: "Senior Business Analyst",
initials: "AL"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
imageAlt: "Avatar for Ayden Lundgre",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
})]
});
large.storyName = "Large";
export const customSize = () => /*#__PURE__*/_jsxs(Flex, {
gap: "r",
children: [/*#__PURE__*/_jsx(Avatar, {
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre",
customSize: "28px"
}), /*#__PURE__*/_jsx(Avatar, {
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
customSize: "28px",
shape: "square"
}), /*#__PURE__*/_jsx(Avatar, {
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
customSize: "28px",
shape: "hexagon"
}), /*#__PURE__*/_jsx(Avatar, {
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
imageAlt: "Avatar for Tag",
customSize: "28px",
shape: "tag"
})]
});
large.storyName = "customSize";
export const titleLevel = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: "Ayden Lundgre",
titleLevel: "H1",
subtitle: "Senior Business Analyst",
initials: "AL"
})
});
titleLevel.storyName = "Title Level";
export const subtitleContent = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
imageAlt: "Avatar for Ayden Lundgre",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
subtitleContent: /*#__PURE__*/_jsx(Badge, {
mt: "xs",
children: "Senior Business Analyst"
})
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre",
subtitleContent: /*#__PURE__*/_jsx(Flex, {
flexWrap: "wrap",
children: /*#__PURE__*/_jsxs(Spacer, {
mr: "xs",
mt: "xs",
children: [/*#__PURE__*/_jsx(Badge, {
children: "Senior Business Analyst"
}), /*#__PURE__*/_jsx(Badge, {
variant: "warning",
children: "Scrum Master"
})]
})
})
})]
});
subtitleContent.storyName = "Custom subtitle content";
export const localTime = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre",
subtitleContent: /*#__PURE__*/_jsx(Badge, {
mt: "xs",
children: "Senior Business Analyst"
}),
localTime: "12:03pm local time"
})
});
localTime.storyName = "With local time";
export const inverted = () => /*#__PURE__*/_jsx(Box, {
bg: "greyDarkest",
p: "r",
children: /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
type: "inverted",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
}), /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre"
}), /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "AL"
})
}), /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre"
})]
})
});
inverted.storyName = "Inverted";
export const alternateShapes = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
shape: "square",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
sizing: "large"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "square",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "square",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
initials: "IL",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "square",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
sizing: "large"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
initials: "IL",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
imageAlt: "Avatar for Javascript",
sizing: "large"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
imageAlt: "Avatar for Javascript"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
initials: "JS",
imageAlt: "Avatar for Javascript"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
imageAlt: "Avatar for Javascript"
})]
});
alternateShapes.storyName = "Alternate Shapes";
defaultAvatar.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultAvatar"
};
noImage.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "noImage"
};
imageOnly.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "imageOnly"
};
iconOnly.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "iconOnly"
};
nameLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "nameLink"
};
small.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "small"
};
large.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "large"
};
customSize.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "customSize"
};
titleLevel.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "titleLevel"
};
subtitleContent.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "subtitleContent"
};
localTime.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "localTime"
};
inverted.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "inverted"
};
alternateShapes.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "alternateShapes"
};