@soul-refiner/design-system 2.14.101 → 2.14.102
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.
- package/dist/components/card/card.js +1 -1
- package/dist/components/card/learning-course/learning-course.js +121 -0
- package/dist/src/components/card/card.d.ts +3 -2
- package/dist/src/components/card/card.d.ts.map +1 -1
- package/dist/src/components/card/learning-course/index.d.ts +3 -0
- package/dist/src/components/card/learning-course/index.d.ts.map +1 -0
- package/dist/src/components/card/learning-course/learning-course.d.ts +20 -0
- package/dist/src/components/card/learning-course/learning-course.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("./action/action.js"),s=require("./audio/audio.js"),i=require("./feature/feature.js"),o=require("./person/person.js"),u=require("./price/price.js"),a=require("./regular/regular.js"),t=require("./video/video.js"),d=require("./written/written.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("./action/action.js"),s=require("./audio/audio.js"),i=require("./feature/feature.js"),o=require("./person/person.js"),u=require("./price/price.js"),a=require("./regular/regular.js"),t=require("./video/video.js"),d=require("./written/written.js"),n=require("./meeting/meeting.js"),j=require("./course-seats/course-seats.js"),c=require("./simple-course/simple-course.js"),p=require("./simple-course/horizontal-course-card.js"),C=require("./learning-course/learning-course.js");exports.Card=({type:l="regular",...x})=>({action:e.jsx(r.ActionCard,{...x}),"audio-episode":e.jsx(s.AudioEpisodeCard,{...x}),feature:e.jsx(i.FeatureCard,{...x}),person:e.jsx(o.PersonCard,{...x}),price:e.jsx(u.PriceCard,{...x}),regular:e.jsx(a.RegularCard,{...x}),"video-episode":e.jsx(t.VideoEpisodeCard,{...x}),"written-episode":e.jsx(d.WrittenEpisodeCard,{...x}),meeting:e.jsx(n.MeetingCard,{...x}),"course-seats":e.jsx(j.CourseSeatsCard,{...x}),"simple-course":e.jsx(c.SimpleCourseCard,{...x}),"horizontal-course":e.jsx(p.HorizontalCourseCard,{...x}),"learning-course":e.jsx(C.LearningCourseCard,{...x})}[l]);
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("next/image"),r=require("styled-components"),o=require("../../atoms/box/box.js"),s=require("../../atoms/typography/heading.js"),t=require("../../atoms/typography/paragraph.js"),n=require("../../../icons/basic/video.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(i);const d=r.styled.div`
|
|
3
|
+
cursor: pointer;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
position: relative;
|
|
6
|
+
z-index: 1;
|
|
7
|
+
user-select: none;
|
|
8
|
+
text-decoration: none;
|
|
9
|
+
width: 312px;
|
|
10
|
+
vertical-align: top;
|
|
11
|
+
background-color: transparent;
|
|
12
|
+
border-radius: 16px;
|
|
13
|
+
|
|
14
|
+
&[href] {
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&:not([href]) {
|
|
19
|
+
cursor: default;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&::after {
|
|
23
|
+
content: '';
|
|
24
|
+
display: block;
|
|
25
|
+
height: 288px;
|
|
26
|
+
visibility: hidden;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
figure {
|
|
30
|
+
width: 312px;
|
|
31
|
+
background-color: transparent;
|
|
32
|
+
border-radius: 16px;
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 0;
|
|
35
|
+
left: 0;
|
|
36
|
+
transition: transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.normal-card {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
visibility: visible;
|
|
42
|
+
z-index: 1;
|
|
43
|
+
transition: opacity 0.1s ease, visibility 0s ease, transform 0.3s ease,
|
|
44
|
+
width 0.3s ease, box-shadow 0.3s ease;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.hover-card {
|
|
48
|
+
opacity: 0;
|
|
49
|
+
visibility: hidden;
|
|
50
|
+
box-shadow: var(--elevation-3);
|
|
51
|
+
z-index: 2;
|
|
52
|
+
transition: opacity 0.15s ease 0.05s, visibility 0s ease 0.2s,
|
|
53
|
+
transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
|
|
54
|
+
background-color: var(--color-page-bg);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
${({$sx:e})=>e||""};
|
|
58
|
+
`,c=r.styled.figure`
|
|
59
|
+
margin: 0px;
|
|
60
|
+
border-radius: 16px;
|
|
61
|
+
overflow: visible;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
border: none;
|
|
65
|
+
gap: 0;
|
|
66
|
+
line-height: 0;
|
|
67
|
+
`,x=r.styled.div`
|
|
68
|
+
position: relative;
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: 180px;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
background-color: transparent;
|
|
74
|
+
border-radius: 16px;
|
|
75
|
+
border: none;
|
|
76
|
+
outline: none;
|
|
77
|
+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
78
|
+
|
|
79
|
+
img {
|
|
80
|
+
object-fit: cover;
|
|
81
|
+
width: 100%;
|
|
82
|
+
height: 100%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.hover-card & {
|
|
86
|
+
border-radius: 16px 16px 0 0;
|
|
87
|
+
background-color: var(--color-page-bg);
|
|
88
|
+
}
|
|
89
|
+
`,p=r.styled.figcaption`
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-flow: column nowrap;
|
|
92
|
+
padding: 5px;
|
|
93
|
+
position: relative;
|
|
94
|
+
width: 100%;
|
|
95
|
+
box-sizing: border-box;
|
|
96
|
+
line-height: normal;
|
|
97
|
+
transition: padding 0.3s ease;
|
|
98
|
+
border: none;
|
|
99
|
+
outline: none;
|
|
100
|
+
|
|
101
|
+
.hover-card & {
|
|
102
|
+
border-radius: 0 0 16px 16px;
|
|
103
|
+
background-color: var(--color-page-bg);
|
|
104
|
+
}
|
|
105
|
+
`,h=r.styled.div`
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
gap: 12px;
|
|
109
|
+
position: relative;
|
|
110
|
+
z-index: 2;
|
|
111
|
+
border: none;
|
|
112
|
+
`,g=({progressPercent:i})=>e.jsxs(u,{viewBox:"0 0 133 2",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("rect",{width:133*i,height:"2",fill:"var(--color-primary-blue-2)"}),e.jsx("rect",{x:133*i,width:133-133*i,height:"2",fill:"var(--color-grey-8)"})]}),u=r.styled.svg`
|
|
113
|
+
width: 100%;
|
|
114
|
+
`,b=r.styled.div`
|
|
115
|
+
background-color: var(--color-primary-blue-2);
|
|
116
|
+
border-radius: 10px;
|
|
117
|
+
padding: 2px 6px;
|
|
118
|
+
display: inline-flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
gap: 4px;
|
|
121
|
+
`;exports.LearningCourseCard=({content:i,href:r,image:a,creatorName:u,supportLabel:f,supportIcon:y=e.jsx(n.Video,{size:16,color:"white"}),title:v,onCardClick:w,progress:j,duration:$,watchedPercentage:m,sx:k})=>{const z=!!i,q=!!r,C=e.jsx(e.Fragment,{children:e.jsxs(c,{className:"normal-card",onClick:w,children:[e.jsx(x,{children:e.jsx(l.default,{alt:"",height:180,quality:100,src:a,width:312})}),e.jsx(p,{children:e.jsxs(h,{children:[e.jsxs(o.Box,{$dir:"column",$gap:4,children:[e.jsx(s.H,{$color:"grey-2",$textClampLines:2,$semiBold:!0,$fontSize:16,$lineHeight:26,dangerouslySetInnerHTML:{__html:v}}),e.jsxs(o.Box,{$dir:"row",$justify:"space-between",children:[e.jsxs(o.Box,{$dir:"row",$gap:5,children:[e.jsx(t.P,{$fontSize:12,$italic:!0,$lineHeight:16,$color:"grey-4",children:"by"}),e.jsx(t.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,children:u})]}),f&&e.jsxs(b,{children:[y,e.jsx(t.P,{$color:"white",$fontSize:10,$lineHeight:14,sx:"font-weight:500",children:f})]})]})]}),e.jsxs(o.Box,{$dir:"column",$justify:"space-between",$gap:10,children:[e.jsx(g,{progressPercent:j/$}),e.jsxs(t.P,{$fontSize:12,$lineHeight:16,children:[Math.round(m),"%"]})]})]})})]})});return e.jsx(d,{as:"div",$sx:k,$hasContent:z,$isClickable:q,children:C})};
|
|
@@ -11,8 +11,9 @@ import { MeetingCardProps } from './meeting/meeting';
|
|
|
11
11
|
import { CourseSeatsCardProps } from './course-seats/course-seats';
|
|
12
12
|
import { SimpleCourseCardProps } from './simple-course/simple-course';
|
|
13
13
|
import { HorizontalCourseCardProps } from './simple-course/horizontal-course-card';
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
import { LearningCourseCardProps } from './learning-course/learning-course';
|
|
15
|
+
type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode' | 'meeting' | 'course-seats' | 'simple-course' | 'horizontal-course' | 'learning-course';
|
|
16
|
+
export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardProps | CourseSeatsCardProps | SimpleCourseCardProps | HorizontalCourseCardProps | LearningCourseCardProps) & {
|
|
16
17
|
type: CardType;
|
|
17
18
|
};
|
|
18
19
|
export declare const Card: ({ type, ...rest }: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,KAAK,QAAQ,GACT,QAAQ,GACR,eAAe,GACf,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,cAAc,GACd,eAAe,GACf,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,KAAK,QAAQ,GACT,QAAQ,GACR,eAAe,GACf,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,cAAc,GACd,eAAe,GACf,mBAAmB,GACnB,iBAAiB,CAAC;AAEtB,MAAM,MAAM,SAAS,GAAG,CACpB,eAAe,GACf,qBAAqB,GACrB,gBAAgB,GAChB,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,qBAAqB,GACrB,yBAAyB,GACzB,uBAAuB,CAC1B,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,IAAI,sBAAmC,SAAS,uEAwB5D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/learning-course/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type CourseStatus = 'draft' | 'published' | 'pending-review' | 'in-review' | 'change-required' | 'edited';
|
|
3
|
+
export interface LearningCourseCardProps {
|
|
4
|
+
actions?: React.ReactElement;
|
|
5
|
+
content?: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
image: string;
|
|
8
|
+
creatorName: string;
|
|
9
|
+
supportLabel?: string;
|
|
10
|
+
supportIcon?: React.ReactElement;
|
|
11
|
+
title: string;
|
|
12
|
+
additionalIcons?: React.ReactElement[];
|
|
13
|
+
onCardClick?: () => void;
|
|
14
|
+
watchedPercentage: number;
|
|
15
|
+
progress: number;
|
|
16
|
+
duration: number;
|
|
17
|
+
sx?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare const LearningCourseCard: ({ content, href, image, creatorName, supportLabel, supportIcon, title, onCardClick, progress, duration, watchedPercentage, sx, }: LearningCourseCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=learning-course.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"learning-course.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/learning-course/learning-course.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,WAAW,GACX,gBAAgB,GAChB,WAAW,GACX,iBAAiB,GACjB,QAAQ,CAAC;AAEb,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAEjC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,kBAAkB,qIAa5B,uBAAuB,4CAqEzB,CAAC"}
|