@stackshift-ui/team 6.0.14 → 7.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +15 -15
  2. package/src/team.test.tsx +2 -2
  3. package/src/team_a.tsx +14 -14
  4. package/src/team_b.tsx +18 -19
  5. package/src/team_c.tsx +16 -16
  6. package/src/team_d.tsx +16 -16
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/team",
3
3
  "description": "",
4
- "version": "6.0.14",
4
+ "version": "7.0.0-beta.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -29,29 +29,29 @@
29
29
  "typescript": "^5.6.2",
30
30
  "vite-tsconfig-paths": "^5.0.1",
31
31
  "vitest": "^2.1.1",
32
- "@stackshift-ui/typescript-config": "6.0.10",
33
- "@stackshift-ui/eslint-config": "6.0.10"
32
+ "@stackshift-ui/eslint-config": "6.0.10",
33
+ "@stackshift-ui/typescript-config": "6.0.10"
34
34
  },
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
- "@stackshift-ui/scripts": "6.0.10",
38
- "@stackshift-ui/button": "6.0.11",
39
- "@stackshift-ui/avatar": "6.0.13",
40
- "@stackshift-ui/card": "6.0.11",
41
- "@stackshift-ui/heading": "6.0.11",
42
- "@stackshift-ui/text": "6.0.11",
43
- "@stackshift-ui/section": "6.0.11",
44
- "@stackshift-ui/image": "6.0.11",
45
- "@stackshift-ui/container": "6.0.11",
46
- "@stackshift-ui/flex": "6.0.11",
47
- "@stackshift-ui/system": "6.0.11"
37
+ "@stackshift-ui/button": "6.1.0-beta.0",
38
+ "@stackshift-ui/card": "7.0.0-beta.0",
39
+ "@stackshift-ui/heading": "7.0.0-beta.0",
40
+ "@stackshift-ui/scripts": "6.1.0-beta.0",
41
+ "@stackshift-ui/text": "7.0.0-beta.0",
42
+ "@stackshift-ui/image": "6.1.0-beta.0",
43
+ "@stackshift-ui/flex": "7.0.0-beta.0",
44
+ "@stackshift-ui/container": "7.0.0-beta.0",
45
+ "@stackshift-ui/system": "6.1.0-beta.0",
46
+ "@stackshift-ui/section": "7.0.0-beta.0",
47
+ "@stackshift-ui/avatar": "7.0.0-beta.0"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "@types/react": "16.8 - 19",
51
51
  "next": "10 - 14",
52
52
  "react": "16.8 - 19",
53
53
  "react-dom": "16.8 - 19",
54
- "@stackshift-ui/system": ">=6.0.11"
54
+ "@stackshift-ui/system": ">=6.1.0-beta.0"
55
55
  },
56
56
  "peerDependenciesMeta": {
57
57
  "next": {
package/src/team.test.tsx CHANGED
@@ -7,7 +7,7 @@ describe.concurrent("team", () => {
7
7
 
8
8
  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
9
9
  const clx = "my-class";
10
- render(<Team />);
11
- expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
10
+ render(<Team data-testid="team" />);
11
+ expect(screen.getByTestId("team").classList).toContain(clx);
12
12
  });
13
13
  });
package/src/team_a.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Card } from "@stackshift-ui/card";
1
+ import { Card, CardContent } from "@stackshift-ui/card";
2
2
  import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
@@ -46,19 +46,19 @@ function Teams({ team }: { team?: iTeam[] }) {
46
46
  <Flex wrap align="center" justify="center" gap={6}>
47
47
  {team?.map(member => (
48
48
  <div className="w-full [@media(min-width:421px)]:w-96 sm:w-1/2 lg:w-1/3" key={member?.name}>
49
- <Card
50
- className="py-10 [@media(min-width:320px)]:py-20 items-center text-center shadow-lg bg-white flex flex-col gap-4"
51
- borderRadius="md">
52
- {member?.mainImage?.image && (
53
- <Image
54
- width={96}
55
- height={96}
56
- className="border-0 w-28 h-28 object-cover rounded-full"
57
- src={`${member?.mainImage?.image}`}
58
- alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
59
- />
60
- )}
61
- <TeamMemberText member={member} />
49
+ <Card className="py-10 [@media(min-width:320px)]:py-20 items-center text-center shadow-lg bg-white flex flex-col gap-4 rounded-md">
50
+ <CardContent className="flex gap-4 p-0">
51
+ {member?.mainImage?.image && (
52
+ <Image
53
+ width={96}
54
+ height={96}
55
+ className="border-0 w-28 h-28 object-cover rounded-full"
56
+ src={`${member?.mainImage?.image}`}
57
+ alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
58
+ />
59
+ )}
60
+ <TeamMemberText member={member} />
61
+ </CardContent>
62
62
  </Card>
63
63
  </div>
64
64
  ))}
package/src/team_b.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Button } from "@stackshift-ui/button";
2
- import { Card } from "@stackshift-ui/card";
2
+ import { Card, CardContent } from "@stackshift-ui/card";
3
3
  import { Container } from "@stackshift-ui/container";
4
4
  import { Flex } from "@stackshift-ui/flex";
5
5
  import { Image } from "@stackshift-ui/image";
@@ -64,9 +64,8 @@ function TeamTab({ data, activeTab, setActiveTab }: TeamTabProps) {
64
64
  return (
65
65
  <li>
66
66
  <Button
67
- as="button"
68
67
  variant="unstyled"
69
- ariaLabel={data.name}
68
+ aria-label={data.name}
70
69
  className={`text-xl lg:text-2xl ${
71
70
  data.name === activeTab ? "text-black" : "text-gray-400"
72
71
  } font-bold hover:text-gray-500 focus:outline-none`}
@@ -93,22 +92,22 @@ function TeamMemberCard({ member }: { member?: iTeam }) {
93
92
  if (!member) return null;
94
93
 
95
94
  return (
96
- <Card
97
- className="flex flex-col gap-3 md:gap-0 md:flex-row shadow-lg bg-white md:h-96"
98
- borderRadius="md">
99
- {member.mainImage?.image && (
100
- <div className="w-full md:w-1/2 h-48 md:h-full relative overflow-hidden rounded-md">
101
- <Image
102
- className="object-cover absolute inset-0 w-full h-full"
103
- src={`${member.mainImage.image}`}
104
- sizes="100vw"
105
- width={329}
106
- height={500}
107
- alt={member.mainImage.alt ?? `team-member-${member.name}-profile-image`}
108
- />
109
- </div>
110
- )}
111
- <TeamMemberText member={member} />
95
+ <Card className="flex flex-col gap-3 md:gap-0 md:flex-row shadow-lg bg-white md:h-96 rounded-md">
96
+ <CardContent className="flex flex-col gap-3 md:gap-0 md:flex-row p-0">
97
+ {member.mainImage?.image && (
98
+ <div className="w-full md:w-1/2 h-48 md:h-full relative overflow-hidden rounded-md">
99
+ <Image
100
+ className="object-cover absolute inset-0 w-full h-full"
101
+ src={`${member.mainImage.image}`}
102
+ sizes="100vw"
103
+ width={329}
104
+ height={500}
105
+ alt={member.mainImage.alt ?? `team-member-${member.name}-profile-image`}
106
+ />
107
+ </div>
108
+ )}
109
+ <TeamMemberText member={member} />
110
+ </CardContent>
112
111
  </Card>
113
112
  );
114
113
  }
package/src/team_c.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Card } from "@stackshift-ui/card";
1
+ import { Card, CardContent } from "@stackshift-ui/card";
2
2
  import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
@@ -40,21 +40,21 @@ function TeamMemberCard({ team }: { team?: iTeam[] }) {
40
40
  <Flex wrap>
41
41
  {team.map(member => (
42
42
  <div className="w-full px-3 mb-6 md:w-1/2 lg:w-1/3" key={member?.name}>
43
- <Card
44
- className="w-full p-0 pb-8 overflow-hidden bg-white shadow-lg text-center"
45
- borderRadius="md">
46
- {member.mainImage?.image && (
47
- <div>
48
- <Image
49
- className="mb-8 h-[345px] w-full object-cover rounded-md"
50
- sizes="100vw"
51
- src={`${member?.mainImage?.image}`}
52
- width={345}
53
- height={256}
54
- alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
55
- />
56
- </div>
57
- )}
43
+ <Card className="w-full p-0 pb-8 overflow-hidden bg-white shadow-lg text-center rounded-md">
44
+ <CardContent className="p-0">
45
+ {member.mainImage?.image && (
46
+ <div>
47
+ <Image
48
+ className="mb-8 h-[345px] w-full object-cover rounded-md"
49
+ sizes="100vw"
50
+ src={`${member?.mainImage?.image}`}
51
+ width={345}
52
+ height={256}
53
+ alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
54
+ />
55
+ </div>
56
+ )}
57
+ </CardContent>
58
58
  <TeamMemberText member={member} />
59
59
  </Card>
60
60
  </div>
package/src/team_d.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Card } from "@stackshift-ui/card";
1
+ import { Card, CardContent } from "@stackshift-ui/card";
2
2
  import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
@@ -40,20 +40,20 @@ function TeamMemberCard({ team }: { team?: iTeam[] }) {
40
40
  {team &&
41
41
  team.map((member, index) => (
42
42
  <div className="w-full md:px-4 mb-6 md:w-1/2" key={index}>
43
- <Card
44
- className="flex flex-col xl:flex-row items-center gap-3 bg-white overflow-hidden shadow-lg "
45
- borderRadius="md">
46
- {member.mainImage?.image && (
47
- <Image
48
- className="h-full w-full object-cover rounded-md [@media(min-width:320px)]:h-[320px] xl:w-[179px]"
49
- sizes="100vw"
50
- src={`${member?.mainImage?.image}`}
51
- width={179}
52
- height={320}
53
- alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
54
- />
55
- )}
56
- <TeamMemberText member={member} />
43
+ <Card className="w-full h-full lg:h-fit bg-white overflow-hidden shadow-lg rounded-md">
44
+ <CardContent className="w-full h-full flex flex-col gap-3 xl:flex-row p-0">
45
+ {member.mainImage?.image && (
46
+ <Image
47
+ className="h-full w-full object-cover rounded-md [@media(min-width:320px)]:h-[320px] xl:w-[179px]"
48
+ sizes="100vw"
49
+ src={`${member?.mainImage?.image}`}
50
+ width={179}
51
+ height={320}
52
+ alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
53
+ />
54
+ )}
55
+ <TeamMemberText member={member} />
56
+ </CardContent>
57
57
  </Card>
58
58
  </div>
59
59
  ))}
@@ -63,7 +63,7 @@ function TeamMemberCard({ team }: { team?: iTeam[] }) {
63
63
 
64
64
  function TeamMemberText({ member }: MemberTextProps) {
65
65
  return (
66
- <div className="w-full xl:w-2/3 flex flex-col gap-2">
66
+ <div className="w-full xl:w-2/3 flex flex-col gap-2 p-4 xl:p-2">
67
67
  <Text weight="bold" className="text-lg sm:text-xl md:text-2xl">
68
68
  {member?.name}
69
69
  </Text>