@hellobetterdigitalnz/selwynui 0.0.1-104 → 0.0.1-105

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/Components/DataDisplay/ContentBlock/ContentBlock.stories.tsx +2 -2
  3. package/src/Components/DataDisplay/ContentBlock/contentBlock.module.scss +37 -36
  4. package/src/Components/DataDisplay/ImageContent/ImageContent.stories.tsx +9 -1
  5. package/src/Components/DataDisplay/ImageContent/ImageContent.tsx +2 -0
  6. package/src/Components/DataDisplay/ImageContent/imageContent.module.scss +27 -0
  7. package/src/Components/DataDisplay/IntroBlock/IntroBlock.stories.tsx +2 -0
  8. package/src/Components/DataDisplay/IntroBlock/IntroBlock.tsx +11 -5
  9. package/src/Components/DataDisplay/IntroBlock/IntroBlockProps.tsx +1 -6
  10. package/src/Components/DataDisplay/IntroBlock/introBlock.module.scss +4 -0
  11. package/src/Components/DataDisplay/PromoBannerBlock/PromoBanner.stories.tsx +1 -1
  12. package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlock.tsx +2 -2
  13. package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlockProps.tsx +1 -1
  14. package/src/Components/Layout/Header/Header.stories.tsx +25 -21
  15. package/src/Components/Layout/Header/MegaMenu/MegaMenu.tsx +1 -0
  16. package/src/Components/Layout/Header/MegaMenu/megaMenu.module.scss +13 -0
  17. package/src/Components/Layout/Header/MobileNavigation/MobileNavigationItem.tsx +4 -1
  18. package/src/Components/Layout/Header/MobileNavigation/MobileNavigationItemProps.tsx +3 -0
  19. package/src/Components/Layout/Header/MobileNavigation/MobileNavigationProps.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hellobetterdigitalnz/selwynui",
3
- "version": "0.0.1-104",
3
+ "version": "0.0.1-105",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
package/src/Components/DataDisplay/ContentBlock/ContentBlock.stories.tsx CHANGED
@@ -65,13 +65,13 @@ const ContentBlockTemplate: Story = {
65
65
  id est laborum.
66
66
  </p>
67
67
 
68
- {/* <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading1</h1>
68
+ <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading1</h1>
69
69
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading2</h2>
70
70
  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading3</h3>
71
71
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading4</h4>
72
72
  <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading5</h5>
73
73
  <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit Heading6</h6>
74
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Paragraph</p> */}
74
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Paragraph</p>
75
75
  </ContentBlock>
76
76
  </ElementHolder>
77
77
  </>
package/src/Components/DataDisplay/ContentBlock/contentBlock.module.scss CHANGED
@@ -54,45 +54,46 @@
54
54
  font-family: var(--font);
55
55
 
56
56
  h1, h2, h3, h4, h5, h6{
57
+ // margin-bottom: 24px;
57
58
  font-weight: 400;
58
59
  }
59
60
 
60
- h1 {
61
- font-size: var(--font-size-h3);
62
- letter-spacing: var(--letter-spacing-h3);
63
- margin-bottom: 62px;
64
- }
65
-
66
- h2 {
67
- font-size: var(--font-size-h4);
68
- letter-spacing: var(--letter-spacing-h4);
69
- margin-bottom: 28px;
70
- }
71
-
72
- h3 {
73
- font-size: var(--font-size-h5);
74
- letter-spacing: var(--letter-spacing-h5);
75
- }
76
-
77
- h4 {
78
- font-size: 28px;
79
- letter-spacing: -0.56px;
80
- margin-bottom: 20px;
81
- }
82
-
83
- h5 {
84
- font-size: var(--font-size-h6);
85
- letter-spacing: var(--letter-spacing-body-regular);
86
- }
87
-
88
- h6 {
89
- font-size: var(--font-size-body-regular);
90
- letter-spacing: var(--letter-spacing-body-sm);
91
- }
92
-
93
- p {
94
- margin-bottom: 36px;
95
- }
61
+ // h1 {
62
+ // font-size: var(--font-size-h3);
63
+ // letter-spacing: var(--letter-spacing-h3);
64
+ // margin-bottom: 62px;
65
+ // }
66
+
67
+ // h2 {
68
+ // font-size: var(--font-size-h4);
69
+ // letter-spacing: var(--letter-spacing-h4);
70
+ // margin-bottom: 28px;
71
+ // }
72
+
73
+ // h3 {
74
+ // font-size: var(--font-size-h5);
75
+ // letter-spacing: var(--letter-spacing-h5);
76
+ // }
77
+
78
+ // h4 {
79
+ // font-size: 28px;
80
+ // letter-spacing: -0.56px;
81
+ // margin-bottom: 20px;
82
+ // }
83
+
84
+ // h5 {
85
+ // font-size: var(--font-size-h6);
86
+ // letter-spacing: var(--letter-spacing-body-regular);
87
+ // }
88
+
89
+ // h6 {
90
+ // font-size: var(--font-size-body-regular);
91
+ // letter-spacing: var(--letter-spacing-body-sm);
92
+ // }
93
+
94
+ // p {
95
+ // margin-bottom: 36px;
96
+ // }
96
97
 
97
98
  }
98
99
 
package/src/Components/DataDisplay/ImageContent/ImageContent.stories.tsx CHANGED
@@ -33,9 +33,17 @@ const ImageContentTemplate: Story = {
33
33
  <ImageContent
34
34
  paddingTop={'md'}
35
35
  paddingBottom={'md'}
36
+ displayFullLogo
36
37
  title={'Lorem'}
37
38
  boldTitle={'ipsum dolor'}
38
- content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'}
39
+ content={<div><p>
40
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
41
+ </p>
42
+ <ul>
43
+ <li>list one</li>
44
+ <li>list one</li>
45
+ </ul>
46
+ </div>}
39
47
  action={<Button style={'solid'} pillar={'live'} label={'LOREM IPSUM'}/>}
40
48
  alignment={'left'}
41
49
  />
package/src/Components/DataDisplay/ImageContent/ImageContent.tsx CHANGED
@@ -45,6 +45,7 @@ const ImageContent = (props: ImageContentProps) => {
45
45
  <div className={styles.imageContentWrapper}>
46
46
  <div className={styles.content}>
47
47
  <div className={styles.contentWrapper}>
48
+ {pillarLogo}
48
49
  <div className={styles.title}>
49
50
  <h3>
50
51
  {title}
@@ -169,6 +170,7 @@ const ImageContent = (props: ImageContentProps) => {
169
170
  </div>
170
171
  <div className={styles.content}>
171
172
  <div className={styles.contentWrapper}>
173
+ {pillarLogo}
172
174
  <div className={styles.title}>
173
175
  <h3>
174
176
  {title}
package/src/Components/DataDisplay/ImageContent/imageContent.module.scss CHANGED
@@ -15,6 +15,8 @@
15
15
  }
16
16
  }
17
17
 
18
+
19
+
18
20
  &Wrapper{
19
21
  display: flex;
20
22
  flex-wrap: wrap;
@@ -74,6 +76,31 @@
74
76
  .desc{
75
77
  margin-top: 48px;
76
78
 
79
+ ul {
80
+ margin-left: 24px;
81
+ list-style: none;
82
+
83
+ li {
84
+ position: relative;
85
+ &::before {
86
+ content: "";
87
+ position: absolute;
88
+ left: -24px;
89
+ top: 2px;
90
+ width: 20px;
91
+ height: 20px;
92
+ background-repeat: no-repeat;
93
+ background-size: contain;
94
+ color: currentColor;
95
+
96
+ background-color: currentColor;
97
+ mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 3.25C13.4783 3.25 11.0132 3.99777 8.91648 5.39876C6.81976 6.79975 5.18556 8.79103 4.22054 11.1208C3.25552 13.4505 3.00303 16.0141 3.49499 18.4874C3.98696 20.9607 5.20127 23.2325 6.98439 25.0156C8.76751 26.7987 11.0393 28.0131 13.5126 28.505C15.9859 28.997 18.5495 28.7445 20.8792 27.7795C23.209 26.8144 25.2003 25.1802 26.6012 23.0835C28.0022 20.9868 28.75 18.5217 28.75 16C28.746 12.6197 27.4015 9.379 25.0112 6.98877C22.621 4.59854 19.3803 3.25397 16 3.25ZM16 27.25C13.775 27.25 11.5999 26.5902 9.74984 25.354C7.89979 24.1179 6.45785 22.3609 5.60636 20.3052C4.75488 18.2495 4.53209 15.9875 4.96617 13.8052C5.40025 11.6229 6.47171 9.61839 8.04505 8.04505C9.6184 6.47171 11.623 5.40025 13.8052 4.96617C15.9875 4.53208 18.2495 4.75487 20.3052 5.60636C22.3609 6.45784 24.1179 7.89978 25.354 9.74984C26.5902 11.5999 27.25 13.775 27.25 16C27.2467 18.9827 26.0604 21.8422 23.9513 23.9513C21.8422 26.0604 18.9827 27.2467 16 27.25ZM19.53 15.47C19.6705 15.6106 19.7493 15.8012 19.7493 16C19.7493 16.1988 19.6705 16.3894 19.53 16.53L14.53 21.53C14.3878 21.6625 14.1998 21.7346 14.0055 21.7312C13.8112 21.7277 13.6258 21.649 13.4884 21.5116C13.351 21.3742 13.2723 21.1888 13.2688 20.9945C13.2654 20.8002 13.3375 20.6122 13.47 20.47L17.9388 16L13.47 11.53C13.3375 11.3878 13.2654 11.1998 13.2688 11.0055C13.2723 10.8112 13.351 10.6258 13.4884 10.4884C13.6258 10.351 13.8112 10.2723 14.0055 10.2688C14.1998 10.2654 14.3878 10.3375 14.53 10.47L19.53 15.47Z'/></svg>");
98
+ mask-size: contain;
99
+ mask-repeat: no-repeat;
100
+ }
101
+ }
102
+ }
103
+
77
104
  p{
78
105
  font-size: var(--font-size-body-regular);
79
106
  line-height: var(--line-height-body-regular);
package/src/Components/DataDisplay/IntroBlock/IntroBlock.stories.tsx CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
  import { Meta, StoryObj } from "@storybook/react-vite";
3
3
  import IntroBlock from "./IntroBlock";
4
4
  import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
5
+ import Button from "../../Form/Button/Button";
5
6
 
6
7
  const meta: Meta = {
7
8
  title: "DataDisplay / IntroBlock",
@@ -23,6 +24,7 @@ const IntroBlockTemplate: Story = {
23
24
  <IntroBlock
24
25
  introHeading={'A district that’s growing, grounded, and full of opportunity.'}
25
26
  introText={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. This is where ideas take root, families and businesses grow, and communities come together. We don’t just dream of a better future, we make it happen.'}
27
+ action={<Button label="Call To Action" pillar="taste" style="solid"/>}
26
28
  />
27
29
  </ElementHolder>
28
30
  )
package/src/Components/DataDisplay/IntroBlock/IntroBlock.tsx CHANGED
@@ -1,3 +1,5 @@
1
+ import Button from "../../Form/Button/Button"
2
+ import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight"
1
3
  import Container from "../../Shared/Container/Container"
2
4
  import IntroBlockProps from "./IntroBlockProps"
3
5
  import styles from "./introBlock.module.scss"
@@ -6,8 +8,10 @@ const IntroBlock = (props: IntroBlockProps) => {
6
8
  const {
7
9
  introHeading,
8
10
  introText,
9
- extraClass
11
+ extraClass,
12
+ action
10
13
  } = props
14
+
11
15
 
12
16
  return (
13
17
  <div className={`${styles.introBlock} ${extraClass}`}>
@@ -25,11 +29,13 @@ const IntroBlock = (props: IntroBlockProps) => {
25
29
  <h1>
26
30
  {introText}
27
31
  </h1>
32
+ {action && <div className={styles.introBlockcta}>
33
+ {action}
34
+ </div>
35
+ }
28
36
  </div>
29
- <div className={styles.introBlockcta}>
30
-
31
- </div>
32
-
37
+
38
+
33
39
  </div>
34
40
  </Container>
35
41
  </div>
package/src/Components/DataDisplay/IntroBlock/IntroBlockProps.tsx CHANGED
@@ -5,12 +5,7 @@ interface IntroBlockProps {
5
5
  introText?: string
6
6
  children?: ReactNode
7
7
  extraClass?: string
8
- link?: {
9
- title?: string;
10
- href?: string;
11
- target?: "_blank" | "_self" | "_parent" | "_top";
12
- rel?: string;
13
- };
8
+ action?: ReactNode;
14
9
 
15
10
  }
16
11
 
package/src/Components/DataDisplay/IntroBlock/introBlock.module.scss CHANGED
@@ -13,6 +13,10 @@
13
13
  }
14
14
  }
15
15
 
16
+ .introBlockcta {
17
+ padding-top: 48px;
18
+ }
19
+
16
20
  .introBlockRight {
17
21
  h1 {
18
22
  font-size: var(--font-size-regular);
package/src/Components/DataDisplay/PromoBannerBlock/PromoBanner.stories.tsx CHANGED
@@ -30,7 +30,7 @@ const PromoBannerBlockTemplate: Story = {
30
30
  boldTitle={'in Selwyn'}
31
31
  content={'Visit Selwyn is for those who like to take the back roads, breathe mountain air, and find their own pace. Stay a little longer, explore deeper, and refuel with great kai and local stories along the way.'}
32
32
  image={'/img/promo-banner-img.png'}
33
- button={
33
+ action={
34
34
  <Button label={'START EXPLORING'} pillar={'visit'} level={'primary'} secondaryIcon={<ArrowRight />} />
35
35
  }
36
36
  />
package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlock.tsx CHANGED
@@ -14,7 +14,7 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
14
14
  boldTitle,
15
15
  content,
16
16
  image,
17
- button,
17
+ action,
18
18
  extraClass,
19
19
  } = props
20
20
 
@@ -58,7 +58,7 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
58
58
  <h2>{boldTitle}</h2>
59
59
  </div>
60
60
  <p>{content}</p>
61
- {button}
61
+ {action}
62
62
  </div>
63
63
 
64
64
  <div className={styles.promoBannerBottomRight}>
package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlockProps.tsx CHANGED
@@ -9,7 +9,7 @@ interface PromoBannerBlockProps {
9
9
  boldTitle?: string;
10
10
  content?: string;
11
11
  image?: string;
12
- button?: ReactNode;
12
+ action?: ReactNode;
13
13
  extraClass?: string;
14
14
  }
15
15
 
package/src/Components/Layout/Header/Header.stories.tsx CHANGED
@@ -45,7 +45,7 @@ const HeaderTemplate: Story = {
45
45
  // @ts-ignore
46
46
  return <Header logo={logo} logoSmall={logoSmall}>
47
47
  <HeaderRight>
48
- <HeaderRightItem extraClass={'desktop-item'} menuDropdown={<MegaMenu pillar={'business'}/>}>
48
+ <HeaderRightItem extraClass={'desktop-item'} menuDropdown={<MegaMenu pillar={'live'}/>}>
49
49
  Participate
50
50
  </HeaderRightItem>
51
51
  <HeaderRightItem extraClass={'desktop-item'}>
@@ -67,26 +67,30 @@ const HeaderTemplate: Story = {
67
67
  {/* <List/>*/}
68
68
  {/*</HeaderRightItem>*/}
69
69
  </HeaderRight>
70
- {/* <MobileSubNavigation>
71
- <li>
72
- <MobileSubNavigationItem label={'Attractions'}/>
73
- </li>
74
- <li>
75
- <MobileNavigationItem label={'Eateries'}/>
76
- </li>
77
- <li>
78
- <MobileNavigationItem label={'Accommodation'}/>
79
- </li>
80
- <li>
81
- <MobileNavigationItem label={'Why visit Selwyn'}/>
82
- </li>
83
- <li>
84
- <MobileNavigationItem label={'Events'}/>
85
- </li>
86
- <li>
87
- <MobileNavigationItem label={'Venues'}/>
88
- </li>
89
- </MobileSubNavigation> */}
70
+ <MobileNavigation>
71
+ <MobileNavigationItem label={'Business'}>
72
+ <MobileSubNavigation>
73
+ <li>
74
+ <MobileSubNavigationItem label={'Attractions'}/>
75
+ </li>
76
+ <li>
77
+ <MobileNavigationItem label={'Eateries'}/>
78
+ </li>
79
+ <li>
80
+ <MobileNavigationItem label={'Accommodation'}/>
81
+ </li>
82
+ <li>
83
+ <MobileNavigationItem label={'Why visit Selwyn'}/>
84
+ </li>
85
+ <li>
86
+ <MobileNavigationItem label={'Events'}/>
87
+ </li>
88
+ <li>
89
+ <MobileNavigationItem label={'Venues'}/>
90
+ </li>
91
+ </MobileSubNavigation>
92
+ </MobileNavigationItem>
93
+ </MobileNavigation>
90
94
  </Header>
91
95
  },
92
96
  };
package/src/Components/Layout/Header/MegaMenu/MegaMenu.tsx CHANGED
@@ -37,6 +37,7 @@ const MegaMenu = (props: MegaMenuProps) => {
37
37
  return (
38
38
  <div className={`${styles.megaMenu} megaMenu ${pillar}`}>
39
39
  <div className={`${styles.megaMenuHolder} megaMenuHolder`}>
40
+ <div></div>
40
41
  <Container border={false}>
41
42
  <div className={`${styles.megaMenuWrapper} megaMenuWrapper`}>
42
43
  {/* LEFT */}
package/src/Components/Layout/Header/MegaMenu/megaMenu.module.scss CHANGED
@@ -7,6 +7,19 @@
7
7
  border-radius: 0 0 366px 0;
8
8
  overflow-x: hidden;
9
9
 
10
+ &::before {
11
+ content: '';
12
+ width: 100%;
13
+ height: 100%;
14
+ position: absolute;
15
+ /* From https://css.glass */
16
+ background: rgba(255, 255, 255, 0.2);
17
+ border-radius: 16px;
18
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
19
+ backdrop-filter: blur(5px);
20
+ -webkit-backdrop-filter: blur(5px);
21
+ }
22
+
10
23
  .pillarIcon{
11
24
  color: var(--color-text);
12
25
  padding-bottom: 80px;
package/src/Components/Layout/Header/MobileNavigation/MobileNavigationItem.tsx CHANGED
@@ -4,7 +4,7 @@ import ArrowRight from "../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
4
4
 
5
5
  const MobileNavigationItem = (props : MobileNavigationItemProps) => {
6
6
 
7
- const {label, href, target, onClick} = props
7
+ const {label, href, target, onClick, children} = props
8
8
 
9
9
  return <div className={styles.mobileNavItem}>
10
10
  <div className={styles.mobileNavItemWrapper}>
@@ -15,6 +15,9 @@ const MobileNavigationItem = (props : MobileNavigationItemProps) => {
15
15
  <ArrowRight type={'light'}/>
16
16
  </div>
17
17
  </div>
18
+ <div>
19
+ {children}
20
+ </div>
18
21
  </div>
19
22
  }
20
23
 
package/src/Components/Layout/Header/MobileNavigation/MobileNavigationItemProps.tsx CHANGED
@@ -1,8 +1,11 @@
1
+ import { ReactNode } from "react";
2
+
1
3
  interface MobileNavigationItemProps {
2
4
  label?: string;
3
5
  href?:string
4
6
  target?:string
5
7
  onClick?:() => void;
8
+ children?: ReactNode
6
9
  }
7
10
 
8
11
  export default MobileNavigationItemProps;
package/src/Components/Layout/Header/MobileNavigation/MobileNavigationProps.tsx CHANGED
@@ -3,7 +3,7 @@ import {ReactNode} from "react";
3
3
  interface MobileNavigationProps {
4
4
  children?:ReactNode;
5
5
  extraClass?:string;
6
- pillar: 'visit' | 'live' | 'business' | 'participate' | 'taste';
6
+ pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste';
7
7
  }
8
8
 
9
9
  export default MobileNavigationProps