@stackshift-ui/newsletter 6.0.9 → 6.0.11

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 (2) hide show
  1. package/package.json +16 -16
  2. package/src/newsletter_b.tsx +24 -32
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/newsletter",
3
3
  "description": "",
4
- "version": "6.0.9",
4
+ "version": "6.0.11",
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/eslint-config": "6.0.7",
33
- "@stackshift-ui/typescript-config": "6.0.7"
32
+ "@stackshift-ui/eslint-config": "6.0.9",
33
+ "@stackshift-ui/typescript-config": "6.0.9"
34
34
  },
35
35
  "dependencies": {
36
- "@stackshift-ui/button": "6.0.8",
37
- "@stackshift-ui/form": "6.0.8",
38
- "@stackshift-ui/scripts": "6.0.7",
39
- "@stackshift-ui/heading": "6.0.8",
40
- "@stackshift-ui/system": "6.0.8",
41
- "@stackshift-ui/text": "6.0.8",
42
- "@stackshift-ui/image": "6.0.8",
43
- "@stackshift-ui/link": "6.0.8",
44
- "@stackshift-ui/input": "6.0.9",
45
- "@stackshift-ui/section": "6.0.8",
46
- "@stackshift-ui/container": "6.0.8",
47
- "@stackshift-ui/flex": "6.0.8"
36
+ "@stackshift-ui/system": "6.0.10",
37
+ "@stackshift-ui/button": "6.0.10",
38
+ "@stackshift-ui/image": "6.0.10",
39
+ "@stackshift-ui/heading": "6.0.10",
40
+ "@stackshift-ui/link": "6.0.10",
41
+ "@stackshift-ui/input": "6.0.11",
42
+ "@stackshift-ui/section": "6.0.10",
43
+ "@stackshift-ui/form": "6.0.10",
44
+ "@stackshift-ui/container": "6.0.10",
45
+ "@stackshift-ui/scripts": "6.0.9",
46
+ "@stackshift-ui/text": "6.0.10",
47
+ "@stackshift-ui/flex": "6.0.10"
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.8"
54
+ "@stackshift-ui/system": ">=6.0.10"
55
55
  },
56
56
  "peerDependenciesMeta": {
57
57
  "next": {
package/src/newsletter_b.tsx CHANGED
@@ -23,27 +23,26 @@ export default function Newsletter_B({
23
23
  return (
24
24
  <Section className="mx-auto w-full py-20 bg-background">
25
25
  <Container maxWidth={1280}>
26
- <Flex wrap align="center">
27
- <div className="w-full mb-4 text-center lg:mr-8 lg:w-auto">
28
- <Flex align="center" justify="center" className="mx-auto">
29
- <LogoSection logo={logo} />
30
- </Flex>
31
- </div>
32
- <Container
33
- maxWidth={412}
34
- className="mx-auto px-4 w-full mb-6 text-center lg:ml-0 lg:text-left">
35
- <TitleAndDescriptionText title={title} description={description} />
36
- </Container>
37
- <div className="w-full lg:w-[35%]">
38
- <NewsletterForm
39
- {...{
40
- id: form?.id,
41
- fields: form?.fields,
42
- thankYouPage: form?.thankYouPage,
43
- buttonLabel: form?.buttonLabel,
44
- }}
45
- />
26
+ <Flex
27
+ wrap
28
+ align="center"
29
+ className="flex-col [@media(min-width:900px)]:flex-row [@media(min-width:900px)]:justify-between">
30
+ <div className="flex flex-col items-center [@media(min-width:900px)]:flex-row [@media(min-width:900px)]:items-start gap-5">
31
+ <LogoSection logo={logo} />
32
+ <Container
33
+ maxWidth={412}
34
+ className="mx-auto px-4 w-full text-center [@media(min-width:900px)]:text-left">
35
+ <TitleAndDescriptionText title={title} description={description} />
36
+ </Container>
46
37
  </div>
38
+ <NewsletterForm
39
+ {...{
40
+ id: form?.id,
41
+ fields: form?.fields,
42
+ thankYouPage: form?.thankYouPage,
43
+ buttonLabel: form?.buttonLabel,
44
+ }}
45
+ />
47
46
  </Flex>
48
47
  </Container>
49
48
  </Section>
@@ -56,17 +55,10 @@ function LogoSection({ logo }: { logo?: Logo | null }) {
56
55
  return (
57
56
  <Link
58
57
  aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
59
- className="inline-block mb-6 text-3xl font-bold leading-none"
60
58
  href={logoLink(logo)}
61
59
  target={logo?.linkTarget}
62
60
  rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
63
- <Image
64
- src={logo?.image}
65
- alt={logo.alt ?? "newsletter-logo"}
66
- width={48}
67
- height={48}
68
- className="inline-block mb-6 text-3xl font-bold leading-none"
69
- />
61
+ <Image src={logo?.image} alt={logo.alt ?? "newsletter-logo"} width={48} height={48} />
70
62
  </Link>
71
63
  );
72
64
  }
@@ -103,9 +95,9 @@ function NewsletterForm({ id, fields, thankYouPage, buttonLabel }: FormFields) {
103
95
  <Form
104
96
  id={id ?? undefined}
105
97
  name="NewsletterB-Form"
106
- className="form-newsletter"
98
+ className="form-newsletter w-full sm:w-1/2 [@media(min-width:900px)]:w-2/5"
107
99
  thankyouPage={thankYouPageLink(thankYouPage)}>
108
- <Flex align="center" gap={2} className="max-w-md mx-auto">
100
+ <div className="flex flex-col [@media(min-width:900px)]:flex-row gap-3">
109
101
  <Input
110
102
  variant="outline"
111
103
  noLabel
@@ -125,11 +117,11 @@ function NewsletterForm({ id, fields, thankYouPage, buttonLabel }: FormFields) {
125
117
  as="button"
126
118
  ariaLabel={buttonLabel ?? "Newsletter form submit button"}
127
119
  type="submit"
128
- className="w-1/2 text-white">
120
+ className="text-white">
129
121
  {buttonLabel}
130
122
  </Button>
131
123
  )}
132
- </Flex>
124
+ </div>
133
125
  </Form>
134
126
  );
135
127
  }