@hellobetterdigitalnz/selwynui 0.0.1-155 → 0.0.1-157

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 (13) hide show
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.es.js +5 -5
  3. package/dist/selwynui.css +1 -1
  4. package/package.json +1 -1
  5. package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.stories.tsx +1 -1
  6. package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.tsx +0 -1
  7. package/src/Components/DataDisplay/DetailsCard/DetailsCard.tsx +0 -2
  8. package/src/Components/DataDisplay/DetailsCard/DetailsCardProps.tsx +1 -1
  9. package/src/Components/DataDisplay/ImageContent/ImageContent.stories.tsx +41 -0
  10. package/src/Components/DataDisplay/ImageContent/ImageContent.tsx +9 -11
  11. package/src/Components/DataDisplay/ListBlock/ListBlock.stories.tsx +6 -6
  12. package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.stories.tsx +1 -1
  13. package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hellobetterdigitalnz/selwynui",
3
- "version": "0.0.1-155",
3
+ "version": "0.0.1-157",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.stories.tsx CHANGED
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof CarouselBlock>
14
14
  const CarouselTemplate: Story = {
15
15
  render : () =>{
16
16
 
17
- return <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
17
+ return <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
18
18
  <CarouselBlock
19
19
  title={'What’s On'}
20
20
  cards={[
package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.tsx CHANGED
@@ -56,7 +56,6 @@ const CarouselBlock = (props : CarouselBlockProps) =>{
56
56
  description={card.description}
57
57
  image={card.image}
58
58
  link={card.link}
59
- pillar={card.pillar}
60
59
  variation={'long'}
61
60
  />
62
61
  </div>
package/src/Components/DataDisplay/DetailsCard/DetailsCard.tsx CHANGED
@@ -11,13 +11,11 @@ const DetailsCard = (props: DetailsCardProps) => {
11
11
  image = '',
12
12
  variation= 'long',
13
13
  link = {},
14
- pillar = 'visit'
15
14
  } = props;
16
15
 
17
16
  const classes = [
18
17
  styles.detailsCard,
19
18
  "detailsCard",
20
- `${pillar}`
21
19
  ];
22
20
 
23
21
  if(variation==='short') {
package/src/Components/DataDisplay/DetailsCard/DetailsCardProps.tsx CHANGED
@@ -9,7 +9,7 @@ interface DetailsCardProps {
9
9
  target?: "_blank" | "_self" | "_parent" | "_top";
10
10
  rel?: string;
11
11
  };
12
- pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
12
+ // pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
13
13
  image?:string,
14
14
  variation?: "long" | "short";
15
15
  }
package/src/Components/DataDisplay/ImageContent/ImageContent.stories.tsx CHANGED
@@ -48,6 +48,30 @@ const ImageContentTemplate: Story = {
48
48
  alignment={'left'}
49
49
  />
50
50
  </ElementHolder>
51
+ <ElementHolder
52
+ paddingTop={'md'}
53
+ paddingBottom={'md'}
54
+ pillar={'live'}
55
+ level={'light'}
56
+ >
57
+ <ImageContent
58
+ paddingTop={'md'}
59
+ paddingBottom={'md'}
60
+ displayFullLogo
61
+ title={'Lorem'}
62
+ boldTitle={'ipsum dolor'}
63
+ content={<div><p>
64
+ 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
65
+ </p>
66
+ <ul>
67
+ <li>list one</li>
68
+ <li>list one</li>
69
+ </ul>
70
+ </div>}
71
+ action={<Button style={'solid'} pillar={'live'} label={'LOREM IPSUM'}/>}
72
+ alignment={'left'}
73
+ />
74
+ </ElementHolder>
51
75
  </>
52
76
  )
53
77
  }
@@ -110,6 +134,23 @@ const ImageContentFluidTemplate : Story = {
110
134
  action={<Button style={'solid'} pillar={'taste'} level={"secondary"} label={'LOREM IPSUM'}/>}
111
135
  />
112
136
  </ElementHolder>
137
+ <ElementHolder
138
+ paddingTop={'md'}
139
+ paddingBottom={'md'}
140
+ pillar={'taste'}
141
+ level={'primary'}
142
+ >
143
+ <ImageContent
144
+ rendition={'fluid'}
145
+ pillar={'live'}
146
+ imageSrc={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}
147
+ title={'Lorem'}
148
+ boldTitle={'ipsum dolor'}
149
+ displayFullLogo={false}
150
+ 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'}
151
+ action={<Button style={'solid'} pillar={'taste'} level={"secondary"} label={'LOREM IPSUM'}/>}
152
+ />
153
+ </ElementHolder>
113
154
  </>
114
155
  )
115
156
  }
package/src/Components/DataDisplay/ImageContent/ImageContent.tsx CHANGED
@@ -33,23 +33,21 @@ const ImageContent = (props: ImageContentProps) => {
33
33
  watermark
34
34
  } = props;
35
35
 
36
- const svgBackgroundRef = useRef<HTMLDivElement>(null);
36
+ const paralaxRef = useRef<HTMLDivElement>(null);
37
37
 
38
38
  useEffect(() => {
39
- if (svgBackgroundRef.current && pillar && watermark) {
40
- gsap.to(svgBackgroundRef.current, {
41
- y: -150,
39
+ gsap.to(paralaxRef.current, {
40
+ y: -80,
42
41
  ease: "none",
43
42
  scrollTrigger: {
44
- trigger: svgBackgroundRef.current,
45
- start: "top bottom",
43
+ trigger: paralaxRef.current,
44
+ start: "10% 50%",
46
45
  end: "bottom top",
47
46
  scrub: 2.5,
48
47
  immediateRender: false,
49
48
  }
50
49
  });
51
- }
52
- }, [pillar, watermark]);
50
+ }, []);
53
51
 
54
52
  const pillarLogo = (
55
53
  <div className={`${styles.pillarlogo} ${displayFullLogo ? styles.pillarlogoFull : ''}`}>
@@ -65,7 +63,7 @@ const ImageContent = (props: ImageContentProps) => {
65
63
  return <div className={`${styles.imageContent} ${styles.imageContentFull} ${styles[imageBorder]} `}>
66
64
  <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
67
65
  <div className={styles.imageContentWrapper}>
68
- <div className={styles.content} ref={svgBackgroundRef}>
66
+ <div className={styles.content} ref={paralaxRef}>
69
67
  <div className={styles.contentWrapper}>
70
68
  {displayIcon && pillarLogo}
71
69
  <div className={styles.title}>
@@ -122,7 +120,7 @@ const ImageContent = (props: ImageContentProps) => {
122
120
  </div>
123
121
  </div>
124
122
  </div>
125
- <div className={styles.content}>
123
+ <div className={styles.content} ref={paralaxRef}>
126
124
  <div className={styles.contentWrapper}>
127
125
  {displayIcon && pillarLogo}
128
126
  <div className={styles.title}>
@@ -182,7 +180,7 @@ const ImageContent = (props: ImageContentProps) => {
182
180
 
183
181
  return <div className={`${styles.imageContent} ${styles[alignment]}`}>
184
182
  <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
185
- <div className={styles.imageContentWrapper}>
183
+ <div className={styles.imageContentWrapper} ref={paralaxRef}>
186
184
  <div className={styles.imageWrapper}>
187
185
  <div className={styles.imageHolder}>
188
186
  {imageSrc && <img src={imageSrc} alt={''}/>}
package/src/Components/DataDisplay/ListBlock/ListBlock.stories.tsx CHANGED
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof ListBlock>
16
16
  const GridTemplate: Story = {
17
17
  render : () =>{
18
18
 
19
- return <ElementHolder pillar={'live'} level={'light'} paddingTop={'md'} paddingBottom={"md"}>
19
+ return <ElementHolder pillar={'business'} level={'light'} paddingTop={'md'} paddingBottom={"md"}>
20
20
  <ListBlock
21
21
  title={'Food and drink'}
22
22
  description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
@@ -24,10 +24,10 @@ const GridTemplate: Story = {
24
24
  filters={["all", "adventure", "ski", "nature", "city"]}
25
25
  cards={
26
26
  [
27
- { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
28
- { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" , pillar: "live"},
29
- { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" , pillar: "live"},
30
- { title: "City Tour", link: "#", image: "./img/card-four.png" , pillar: "live"}
27
+ { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure" },
28
+ { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
29
+ { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature"},
30
+ { title: "City Tour", link: "#", image: "./img/card-four.png"}
31
31
  ]
32
32
  }
33
33
  />
@@ -38,7 +38,7 @@ const GridTemplate: Story = {
38
38
  const NoFilter: Story = {
39
39
  render : () =>{
40
40
 
41
- return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
41
+ return <ElementHolder pillar={'visit'} paddingTop={'md'} paddingBottom={"md"}>
42
42
  <ListBlock
43
43
  title={'Food and drink'}
44
44
  description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.stories.tsx CHANGED
@@ -21,7 +21,7 @@ const PathwayBlockTemplate: Story = {
21
21
  render: () => {
22
22
  return (
23
23
  <>
24
- <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
24
+ <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
25
25
  <PathwayBlock
26
26
  title="Lorem ipsum"
27
27
  cards={[
package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx CHANGED
@@ -22,7 +22,6 @@ const PathwayBlock = (props: PathwayBlockProps) => {
22
22
  description={card.description}
23
23
  image={card.image}
24
24
  link={card.link}
25
- pillar={card.pillar}
26
25
  variation={'long'}
27
26
  />
28
27
  </div>