@stackshift-ui/features 6.0.10 → 6.0.12

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 (3) hide show
  1. package/package.json +14 -14
  2. package/src/features_a.tsx +9 -19
  3. package/src/features_c.tsx +9 -9
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/features",
3
3
  "description": "",
4
- "version": "6.0.10",
4
+ "version": "6.0.12",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -29,28 +29,28 @@
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.7",
33
- "@stackshift-ui/eslint-config": "6.0.7"
32
+ "@stackshift-ui/typescript-config": "6.0.9",
33
+ "@stackshift-ui/eslint-config": "6.0.9"
34
34
  },
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
- "@stackshift-ui/scripts": "6.0.7",
38
- "@stackshift-ui/system": "6.0.8",
39
- "@stackshift-ui/image": "6.0.8",
40
- "@stackshift-ui/heading": "6.0.8",
41
- "@stackshift-ui/text": "6.0.8",
42
- "@stackshift-ui/button": "6.0.8",
43
- "@stackshift-ui/section": "6.0.8",
44
- "@stackshift-ui/card": "6.0.8",
45
- "@stackshift-ui/container": "6.0.8",
46
- "@stackshift-ui/flex": "6.0.8"
37
+ "@stackshift-ui/scripts": "6.0.9",
38
+ "@stackshift-ui/system": "6.0.10",
39
+ "@stackshift-ui/heading": "6.0.10",
40
+ "@stackshift-ui/text": "6.0.10",
41
+ "@stackshift-ui/button": "6.0.10",
42
+ "@stackshift-ui/card": "6.0.10",
43
+ "@stackshift-ui/section": "6.0.10",
44
+ "@stackshift-ui/container": "6.0.10",
45
+ "@stackshift-ui/flex": "6.0.10",
46
+ "@stackshift-ui/image": "6.0.10"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "@types/react": "16.8 - 19",
50
50
  "next": "10 - 14",
51
51
  "react": "16.8 - 19",
52
52
  "react-dom": "16.8 - 19",
53
- "@stackshift-ui/system": ">=6.0.8"
53
+ "@stackshift-ui/system": ">=6.0.10"
54
54
  },
55
55
  "peerDependenciesMeta": {
56
56
  "next": {
package/src/features_a.tsx CHANGED
@@ -21,12 +21,10 @@ export default function Features_A({ caption, title, description, features }: Fe
21
21
  return (
22
22
  <Section className="py-20 bg-background">
23
23
  <Container maxWidth={1280}>
24
- <Container maxWidth={448} className="mb-16 text-center ">
24
+ <Container maxWidth={640} className="mb-16 text-center">
25
25
  <CaptionAndTitleText caption={caption} title={title} description={description} />
26
26
  </Container>
27
- <Flex wrap>
28
- <FeatureItems features={features} />
29
- </Flex>
27
+ <FeatureItems features={features} />
30
28
  </Container>
31
29
  </Section>
32
30
  );
@@ -42,19 +40,15 @@ function CaptionAndTitleText({
42
40
  description?: string;
43
41
  }) {
44
42
  return (
45
- <React.Fragment>
43
+ <div className="flex flex-col gap-3">
46
44
  {caption ? (
47
45
  <Text weight="bold" className="text-secondary">
48
46
  {caption}
49
47
  </Text>
50
48
  ) : null}
51
49
  {title ? <Heading fontSize="3xl">{title}</Heading> : null}
52
- {description ? (
53
- <Text muted className="mb-6 leading-loose">
54
- {description}
55
- </Text>
56
- ) : null}
57
- </React.Fragment>
50
+ {description ? <Text muted>{description}</Text> : null}
51
+ </div>
58
52
  );
59
53
  }
60
54
 
@@ -62,17 +56,17 @@ function FeatureItems({ features }: { features?: ArrayOfImageTitleAndText[] }) {
62
56
  if (!features) return null;
63
57
 
64
58
  return (
65
- <React.Fragment>
59
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
66
60
  {features?.map(feature => {
67
61
  return <FeatureItem feature={feature} key={feature._key} />;
68
62
  })}
69
- </React.Fragment>
63
+ </div>
70
64
  );
71
65
  }
72
66
 
73
67
  function FeatureItem({ feature }: FeatureItemProps) {
74
68
  return (
75
- <div className="w-full px-4 mt-16 mb-12 md:w-1/2 lg:mb-0 lg:w-1/4">
69
+ <div className="text-center sm:text-start p-3">
76
70
  {feature?.mainImage?.image ? <FeatureImage feature={feature} /> : null}
77
71
 
78
72
  {feature?.title ? (
@@ -80,11 +74,7 @@ function FeatureItem({ feature }: FeatureItemProps) {
80
74
  {feature?.title}
81
75
  </Text>
82
76
  ) : null}
83
- {feature?.plainText ? (
84
- <Text muted className="leading-loose">
85
- {feature?.plainText}
86
- </Text>
87
- ) : null}
77
+ {feature?.plainText ? <Text muted>{feature?.plainText}</Text> : null}
88
78
  </div>
89
79
  );
90
80
  }
package/src/features_c.tsx CHANGED
@@ -12,8 +12,8 @@ import { ArrayOfImageTitleAndText } from "./types";
12
12
  export default function Features_C({ caption, title, description, features }: FeaturesProps) {
13
13
  return (
14
14
  <Section className="py-20 bg-background">
15
- <Container maxWidth={1280}>
16
- <Container maxWidth={448} className="mb-16 text-center ">
15
+ <Container maxWidth={1800}>
16
+ <Container maxWidth={640} className="mb-16 text-center">
17
17
  <CaptionAndTitleSection caption={caption} title={title} description={description} />
18
18
  </Container>
19
19
  <FeatureItems features={features} />
@@ -32,7 +32,7 @@ function CaptionAndTitleSection({
32
32
  description?: string;
33
33
  }) {
34
34
  return (
35
- <React.Fragment>
35
+ <div className="flex flex-col gap-3">
36
36
  {caption ? (
37
37
  <Text weight="bold" className="text-secondary">
38
38
  {caption}
@@ -44,7 +44,7 @@ function CaptionAndTitleSection({
44
44
  {description}
45
45
  </Text>
46
46
  ) : null}
47
- </React.Fragment>
47
+ </div>
48
48
  );
49
49
  }
50
50
 
@@ -52,17 +52,17 @@ function FeatureItems({ features }: { features?: ArrayOfImageTitleAndText[] }) {
52
52
  if (!features) return null;
53
53
 
54
54
  return (
55
- <Flex wrap justify="start" align="stretch" className="-mx-3">
55
+ <div className="grid lg:grid-cols-2 gap-3">
56
56
  {features.map(feature => {
57
57
  return <FeatureItem feature={feature} key={feature._key} />;
58
58
  })}
59
- </Flex>
59
+ </div>
60
60
  );
61
61
  }
62
62
 
63
63
  function FeatureItem({ feature }: { feature: ArrayOfImageTitleAndText }) {
64
64
  return (
65
- <div className="w-full px-3 mb-6 lg:w-1/2">
65
+ <div className="w-full p-3">
66
66
  <Card className="flex flex-wrap h-full p-6 bg-white" borderRadius="md">
67
67
  <div className="self-start inline-block p-3 mb-4 mr-6 rounded-lg bg-secondary/50 md:p-5 lg:mb-0">
68
68
  {feature?.mainImage?.image && (
@@ -75,8 +75,8 @@ function FeatureItem({ feature }: { feature: ArrayOfImageTitleAndText }) {
75
75
  />
76
76
  )}
77
77
  </div>
78
- <div className="w-full lg:w-2/3">
79
- <Text fontSize="2xl" weight="bold" className="mb-2 text-gray-500">
78
+ <div className="w-full lg:w-2/3 flex flex-col gap-2">
79
+ <Text fontSize="2xl" weight="bold">
80
80
  {feature?.title}
81
81
  </Text>
82
82
  <Text muted>{feature?.plainText}</Text>