@hellobetterdigitalnz/selwynui 0.0.1-42 → 0.0.1-44

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 (22) hide show
  1. package/dist/Components/DataDisplay/CarouselBlock/CarouselBlock.d.ts +2 -1
  2. package/dist/Components/DataDisplay/CarouselBlock/CarouselBlockProps.d.ts +3 -0
  3. package/dist/Components/DataDisplay/ContentBlock/ContentBlock.d.ts +3 -0
  4. package/dist/Components/DataDisplay/ContentBlock/ContentBlockProps.d.ts +5 -0
  5. package/dist/Components/DataDisplay/ListingDetailBlock/ListingDetailBlock.d.ts +1 -1
  6. package/dist/Components/DataDisplay/ListingDetailBlock/ListingDetailBlockProps.d.ts +2 -1
  7. package/dist/Components/DataDisplay/index.d.ts +6 -0
  8. package/dist/index.cjs.js +19 -18
  9. package/dist/index.cjs.js.map +1 -1
  10. package/dist/index.es.js +5822 -2447
  11. package/dist/index.es.js.map +1 -1
  12. package/dist/selwynui.css +1 -1
  13. package/package.json +2 -1
  14. package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.stories.tsx +77 -0
  15. package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.tsx +65 -7
  16. package/src/Components/DataDisplay/CarouselBlock/CarouselBlockProps.tsx +4 -0
  17. package/src/Components/DataDisplay/CarouselBlock/carouselBlock.module.scss +54 -0
  18. package/src/Components/DataDisplay/DetailsCard/detailsCard.module.scss +1 -1
  19. package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.stories.tsx +0 -4
  20. package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx +1 -0
  21. package/src/Components/DataDisplay/index.ts +5 -0
  22. package/src/Components/DataDisplay/slider.scss +43 -0
package/src/Components/DataDisplay/CarouselBlock/carouselBlock.module.scss CHANGED
@@ -0,0 +1,54 @@
1
+ .carouselTitle{
2
+ margin: -12px;
3
+ margin-bottom: 70px;
4
+ display: flex;
5
+ flex-wrap: wrap;
6
+ justify-content: space-between;
7
+ align-items: center;
8
+
9
+ h3{
10
+ font-size: 36px;
11
+ line-height: 1;
12
+ font-weight: 700;
13
+ padding: 12px;
14
+ }
15
+
16
+ .actions{
17
+ padding: 12px;
18
+ }
19
+
20
+
21
+ @media screen and (min-width: 992px) {
22
+ margin-bottom: 84px;
23
+
24
+ h3{
25
+ font-size: var(--font-size-h3);
26
+ }
27
+
28
+ }
29
+
30
+ }
31
+
32
+ .card{
33
+ width: 312px !important;
34
+ margin-right: 16px;
35
+ }
36
+
37
+ .btn{
38
+ margin-top: 36px;
39
+ display: flex;
40
+ }
41
+
42
+ @media screen and (min-width: 992px) {
43
+
44
+ .card {
45
+ width: 456px !important;
46
+ margin-right: 24px;
47
+ }
48
+
49
+
50
+ .btn{
51
+ margin-top: 72px;
52
+ }
53
+
54
+ }
package/src/Components/DataDisplay/DetailsCard/detailsCard.module.scss CHANGED
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  .cardWrap {
60
- min-height: 400px;
60
+ min-height: 450px;
61
61
  display: flex;
62
62
  flex-direction: column;
63
63
 
package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.stories.tsx CHANGED
@@ -27,25 +27,21 @@ const PathwayBlockTemplate: Story = {
27
27
  cards={[
28
28
  {
29
29
  title: "Lorem ipsum",
30
- date: "2024-01-15",
31
30
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
32
31
  image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg"
33
32
  },
34
33
  {
35
34
  title: "Lorem ipsum",
36
- date: "2024-01-16",
37
35
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
38
36
  image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg"
39
37
  },
40
38
  {
41
39
  title: "Lorem ipsum",
42
- date: "2024-01-17",
43
40
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
44
41
  image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
45
42
  },
46
43
  {
47
44
  title: "Lorem ipsum",
48
- date: "2024-01-17",
49
45
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
50
46
  image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
51
47
  }
package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx CHANGED
@@ -23,6 +23,7 @@ const PathwayBlock = (props: PathwayBlockProps) => {
23
23
  description={card.description}
24
24
  image={card.image}
25
25
  link={card.link}
26
+ pillar={card.pillar}
26
27
  variation={'long'}
27
28
  />
28
29
  </div>
package/src/Components/DataDisplay/index.ts CHANGED
@@ -60,3 +60,8 @@ export type {default as ImageContentProps} from './ImageContent/ImageContentProp
60
60
  //List Block
61
61
  export { default as ListBlock } from './ListBlock/ListBlock'
62
62
  export type { default as ListBlockProps } from './ListBlock/ListBlockProps'
63
+
64
+ // Carousel Block
65
+
66
+ export { default as CarouselBlock } from './CarouselBlock/CarouselBlock.tsx'
67
+ export type { default as CarouselBlockProps } from './CarouselBlock/CarouselBlockProps.tsx'
package/src/Components/DataDisplay/slider.scss CHANGED
@@ -1,2 +1,45 @@
1
1
  @import "../../../node_modules/slick-carousel/slick/slick.css";
2
2
  @import "../../../node_modules/slick-carousel/slick/slick-theme.css";
3
+
4
+ .carouselBlock{
5
+ overflow-x: hidden;
6
+
7
+ .custom-arrow{
8
+ background: transparent;
9
+ outline: none;
10
+ border: 1px solid var(--color-block-text);
11
+ border-radius: 100%;
12
+ height: 40px;
13
+ width: 40px;
14
+ color: var(--color-block-text);
15
+ transition: all 0.3s ease-in-out;
16
+
17
+ &:hover{
18
+ background: var(--color-block-text);
19
+ color: var(--color-block-bg);
20
+ }
21
+
22
+ }
23
+
24
+ .slick-list{
25
+ overflow: visible;
26
+ visibility: visible;
27
+ }
28
+
29
+ .prev{
30
+ margin-right: 16px;
31
+ }
32
+
33
+ @media screen and (min-width: 992px) {
34
+
35
+ .custom-arrow{
36
+ height: 48px;
37
+ width: 48px;
38
+ }
39
+
40
+ .prev{
41
+ margin-right: 24px;
42
+ }
43
+ }
44
+
45
+ }