@stackshift-ui/blog 6.0.12 → 6.0.14

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 +17 -17
  2. package/src/blog.tsx +1 -1
  3. package/src/blog_c.tsx +14 -13
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/blog",
3
3
  "description": "",
4
- "version": "6.0.12",
4
+ "version": "6.0.14",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -30,27 +30,27 @@
30
30
  "typescript": "^5.6.2",
31
31
  "vite-tsconfig-paths": "^5.0.1",
32
32
  "vitest": "^2.1.1",
33
- "@stackshift-ui/eslint-config": "6.0.7",
34
- "@stackshift-ui/typescript-config": "6.0.7"
33
+ "@stackshift-ui/eslint-config": "6.0.9",
34
+ "@stackshift-ui/typescript-config": "6.0.9"
35
35
  },
36
36
  "dependencies": {
37
37
  "classnames": "^2.5.1",
38
- "@stackshift-ui/badge": "6.0.8",
39
- "@stackshift-ui/card": "6.0.8",
40
- "@stackshift-ui/container": "6.0.8",
41
- "@stackshift-ui/flex": "6.0.8",
42
- "@stackshift-ui/button": "6.0.8",
43
- "@stackshift-ui/heading": "6.0.8",
44
- "@stackshift-ui/image": "6.0.8",
45
- "@stackshift-ui/input": "6.0.9",
46
- "@stackshift-ui/link": "6.0.8",
47
- "@stackshift-ui/section": "6.0.8",
48
- "@stackshift-ui/system": "6.0.8",
49
- "@stackshift-ui/text": "6.0.8",
50
- "@stackshift-ui/scripts": "6.0.7"
38
+ "@stackshift-ui/badge": "6.0.10",
39
+ "@stackshift-ui/button": "6.0.10",
40
+ "@stackshift-ui/card": "6.0.10",
41
+ "@stackshift-ui/container": "6.0.10",
42
+ "@stackshift-ui/heading": "6.0.10",
43
+ "@stackshift-ui/flex": "6.0.10",
44
+ "@stackshift-ui/image": "6.0.10",
45
+ "@stackshift-ui/input": "6.0.11",
46
+ "@stackshift-ui/link": "6.0.10",
47
+ "@stackshift-ui/scripts": "6.0.9",
48
+ "@stackshift-ui/section": "6.0.10",
49
+ "@stackshift-ui/system": "6.0.10",
50
+ "@stackshift-ui/text": "6.0.10"
51
51
  },
52
52
  "peerDependencies": {
53
- "@stackshift-ui/system": ">=6.0.8",
53
+ "@stackshift-ui/system": ">=6.0.10",
54
54
  "@types/react": "16.8 - 19",
55
55
  "next": "10 - 14",
56
56
  "react": "16.8 - 19",
package/src/blog.tsx CHANGED
@@ -23,7 +23,7 @@ export const Blog: React.FC<SectionsProps> = ({ data }) => {
23
23
  const props = {
24
24
  subtitle: data?.variants?.subtitle ?? undefined,
25
25
  title: data?.variants?.title ?? undefined,
26
- posts: data?.variants?.posts ?? undefined,
26
+ posts: (data?.variants?.posts || data?.variants?.blogPosts) ?? undefined,
27
27
  primaryButton: data?.variants?.primaryButton ?? undefined,
28
28
  };
29
29
  return Variant ? <Variant {...props} /> : null;
package/src/blog_c.tsx CHANGED
@@ -19,12 +19,11 @@ export default function Blog_C({ subtitle, title, posts, primaryButton }: BlogPr
19
19
  return (
20
20
  <Section className="py-20 bg-background">
21
21
  <Container maxWidth={1280}>
22
- <Flex align="center" justify="between" className="flex-col mb-16 md:flex-row" gap={4}>
22
+ <Flex align="center" justify="between" className="flex-col mb-16 md:flex-row" gap={5}>
23
23
  <SubtitleAndTitleText subtitle={subtitle} title={title} />
24
24
  <PrimaryButton primaryButton={primaryButton} />
25
25
  </Flex>
26
26
  <BlogPosts posts={posts} blogsPerPage={blogsPerPage} />
27
- <PrimaryButton primaryButton={primaryButton} />
28
27
  </Container>
29
28
  </Section>
30
29
  );
@@ -32,7 +31,7 @@ export default function Blog_C({ subtitle, title, posts, primaryButton }: BlogPr
32
31
 
33
32
  function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
34
33
  return (
35
- <div className="text-center md:text-left">
34
+ <div className="flex flex-col gap-3 text-center md:text-left">
36
35
  {subtitle ? (
37
36
  <Text weight="bold" className="text-primary">
38
37
  {subtitle}
@@ -77,10 +76,10 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
77
76
  />
78
77
  )}
79
78
  <div className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
80
- <Flex gap={2}>
79
+ <div className="flex flex-col sm:flex-row sm:items-center gap-3">
81
80
  {post?.categories &&
82
81
  post?.categories?.map((category, index) => (
83
- <Badge className="bg-secondary/70" key={index}>
82
+ <Badge className="bg-secondary rounded-global w-fit" key={index}>
84
83
  {category?.title}
85
84
  </Badge>
86
85
  ))}
@@ -89,10 +88,10 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
89
88
  {format(new Date(post?.publishedAt), " dd MMM, yyyy")}
90
89
  </Text>
91
90
  )}
92
- </Flex>
91
+ </div>
93
92
 
94
93
  {post?.title && (
95
- <Heading className="my-4" type="h3">
94
+ <Heading className="my-4 text-xl lg:text-3xl">
96
95
  {post?.title?.length > 40 ? post?.title?.substring(0, 40) + "..." : post?.title}
97
96
  </Heading>
98
97
  )}
@@ -108,7 +107,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
108
107
  </div>
109
108
  )}
110
109
  {post?.excerpt && (
111
- <Text muted className="mb-6 leading-loose text-justify">
110
+ <Text muted className="mb-6 leading-loose lg:text-justify">
112
111
  {post?.excerpt?.length > maxExcerptLength
113
112
  ? post?.excerpt?.substring(0, maxExcerptLength) + "..."
114
113
  : post?.excerpt}
@@ -131,11 +130,13 @@ function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
131
130
  if (!primaryButton?.label) return null;
132
131
 
133
132
  return (
134
- <React.Fragment>
135
- <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
136
- {primaryButton?.label}
137
- </Button>
138
- </React.Fragment>
133
+ <Button
134
+ as="link"
135
+ link={primaryButton}
136
+ ariaLabel={primaryButton?.label}
137
+ className="inline-flex flex-wrap text-center bg-primary text-sm sm:text-base px-6 py-3 rounded-global">
138
+ {primaryButton?.label}
139
+ </Button>
139
140
  );
140
141
  }
141
142