@soul-refiner/design-system 0.2.50 → 0.2.53
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/actions/switch/switch.js +1 -1
- package/dist/components/atoms/typography/paragraph.js +1 -1
- package/dist/components/atoms/typography/typography.js +1 -1
- package/dist/components/card/feature/feature.js +4 -4
- package/dist/components/editor/editor.js +1 -1
- package/dist/components/editor/simple_editor/simple_editor.js +1 -1
- package/dist/components/feedback/badge/badge.js +1 -1
- package/dist/components/feedback/chip/chip.js +1 -1
- package/dist/components/input/date/date.js +3 -3
- package/dist/components/input/search/search.js +1 -1
- package/dist/components/input/text_input/text_input.js +4 -4
- package/dist/components/navigation/breadcrumb/breadcrumb.js +1 -1
- package/dist/components/navigation/inner/inner.js +2 -2
- package/dist/components/surfaces/message/message.js +1 -1
- package/dist/components/surfaces/modal/modal.d.ts +6 -1
- package/dist/components/surfaces/modal/modal.js +15 -2
- package/dist/components/table/table/table.js +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import { Styles } from '../../../common';
|
|
|
5
5
|
export const P = ({ as = 'p', children, $fontSize = 16, $lineHeight = 24, $textAlign = 'left', sx, ...rest }) => (React.createElement(StyledP, { as: as, "$fontSize": $fontSize, "$lineHeight": $lineHeight, "$textAlign": $textAlign, "$sx": sx, ...rest }, children));
|
|
6
6
|
const StyledP = styled.p `
|
|
7
7
|
margin: 0px;
|
|
8
|
-
font-family:
|
|
8
|
+
font-family: var(--font-inter);
|
|
9
9
|
font-size: ${({ $fontSize }) => $fontSize + 'px'};
|
|
10
10
|
line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
|
|
11
11
|
text-align: ${({ $textAlign }) => $textAlign || 'left'};
|
|
@@ -133,7 +133,7 @@ const Title = styled.figcaption `
|
|
|
133
133
|
padding-right: 32px;
|
|
134
134
|
color: var(--color-grey-2);
|
|
135
135
|
font-size: 18px;
|
|
136
|
-
font-family:
|
|
136
|
+
font-family: var(--font-inter);
|
|
137
137
|
font-weight: 500;
|
|
138
138
|
line-height: 26px;
|
|
139
139
|
letter-spacing: -0.252px;
|
|
@@ -141,7 +141,7 @@ const Title = styled.figcaption `
|
|
|
141
141
|
`;
|
|
142
142
|
const Content = styled.figcaption `
|
|
143
143
|
font-size: 14px;
|
|
144
|
-
font-family:
|
|
144
|
+
font-family: var(--font-inter);
|
|
145
145
|
font-weight: 400;
|
|
146
146
|
line-height: 20px;
|
|
147
147
|
letter-spacing: -0.084px;
|
|
@@ -151,7 +151,7 @@ const EditTitle = styled.input `
|
|
|
151
151
|
padding: 12px;
|
|
152
152
|
background-color: var(--color-white);
|
|
153
153
|
font-size: 18px;
|
|
154
|
-
font-family:
|
|
154
|
+
font-family: var(--font-inter);
|
|
155
155
|
font-weight: 500;
|
|
156
156
|
line-height: 26px;
|
|
157
157
|
letter-spacing: -0.252px;
|
|
@@ -162,7 +162,7 @@ const EditTitle = styled.input `
|
|
|
162
162
|
const EditContent = styled(EditTitle) `
|
|
163
163
|
padding: 6px 12px;
|
|
164
164
|
font-size: 14px;
|
|
165
|
-
font-family:
|
|
165
|
+
font-family: var(--font-inter);
|
|
166
166
|
font-weight: 400;
|
|
167
167
|
line-height: 20px;
|
|
168
168
|
letter-spacing: -0.084px;
|
|
@@ -47,7 +47,7 @@ const Component = styled.div `
|
|
|
47
47
|
background-color: ${({ $bgColor }) => $bgColor};
|
|
48
48
|
color: ${({ $textColor }) => $textColor};
|
|
49
49
|
border: 1px solid ${({ $borderColor }) => $borderColor};
|
|
50
|
-
font-family:
|
|
50
|
+
font-family: var(--font-inter);
|
|
51
51
|
font-size: 12px;
|
|
52
52
|
font-weight: 500;
|
|
53
53
|
line-height: 16px;
|
|
@@ -207,7 +207,7 @@ export const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate
|
|
|
207
207
|
const Wrapper = styled.div `
|
|
208
208
|
position: relative;
|
|
209
209
|
width: fit-content;
|
|
210
|
-
font-family:
|
|
210
|
+
font-family: var(--font-inter);
|
|
211
211
|
`;
|
|
212
212
|
const Trigger = styled.button `
|
|
213
213
|
padding: 12px 24px;
|
|
@@ -217,7 +217,7 @@ const Trigger = styled.button `
|
|
|
217
217
|
color: var(--color-grey-3);
|
|
218
218
|
outline: none;
|
|
219
219
|
line-height: 100%;
|
|
220
|
-
font-family:
|
|
220
|
+
font-family: var(--font-inter);
|
|
221
221
|
font-size: 14px;
|
|
222
222
|
line-height: 20px;
|
|
223
223
|
cursor: pointer;
|
|
@@ -351,7 +351,7 @@ const Day = styled.button `
|
|
|
351
351
|
height: 32px;
|
|
352
352
|
border-radius: 50%;
|
|
353
353
|
cursor: pointer;
|
|
354
|
-
font-family:
|
|
354
|
+
font-family: var(--font-inter);
|
|
355
355
|
font-size: 16px;
|
|
356
356
|
line-height: 24px;
|
|
357
357
|
|
|
@@ -66,7 +66,7 @@ const Label = styled.label `
|
|
|
66
66
|
gap: 4px;
|
|
67
67
|
flex-flow: column nowrap;
|
|
68
68
|
color: var(--color-grey-2);
|
|
69
|
-
font-family:
|
|
69
|
+
font-family: var(--font-inter);
|
|
70
70
|
font-size: ${({ $size }) => ($size === 'small' ? 16 : 18)}px;
|
|
71
71
|
font-weight: 500;
|
|
72
72
|
line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
|
|
@@ -108,7 +108,7 @@ const InputWrapper = styled.div `
|
|
|
108
108
|
const Input = styled.input `
|
|
109
109
|
padding: 0px;
|
|
110
110
|
flex: 1;
|
|
111
|
-
font-family:
|
|
111
|
+
font-family: var(--font-inter);
|
|
112
112
|
font-size: ${({ $size }) => ($size === 'small' ? 14 : 16)}px;
|
|
113
113
|
line-height: ${({ $size }) => ($size === 'small' ? 20 : 24)}px;
|
|
114
114
|
color: var(--color-grey-3);
|
|
@@ -123,13 +123,13 @@ const Input = styled.input `
|
|
|
123
123
|
`;
|
|
124
124
|
const HelperText = styled.span `
|
|
125
125
|
color: var(--color-grey-4);
|
|
126
|
-
font-family:
|
|
126
|
+
font-family: var(--font-inter);
|
|
127
127
|
font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
|
|
128
128
|
line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
|
|
129
129
|
`;
|
|
130
130
|
const MaxCharactersText = styled.span `
|
|
131
131
|
color: var(--color-grey-6);
|
|
132
|
-
font-family:
|
|
132
|
+
font-family: var(--font-inter);
|
|
133
133
|
font-size: 14px;
|
|
134
134
|
font-style: normal;
|
|
135
135
|
font-weight: 400;
|
|
@@ -61,7 +61,7 @@ const Item = styled.button `
|
|
|
61
61
|
gap: 16px;
|
|
62
62
|
align-items: center;
|
|
63
63
|
border-radius: 8px;
|
|
64
|
-
font-family:
|
|
64
|
+
font-family: var(--font-inter);
|
|
65
65
|
font-weight: 500;
|
|
66
66
|
font-size: 16px;
|
|
67
67
|
line-height: 24px;
|
|
@@ -117,7 +117,7 @@ const BackButton = styled.a `
|
|
|
117
117
|
display: flex;
|
|
118
118
|
align-items: center;
|
|
119
119
|
gap: 8px;
|
|
120
|
-
font-family:
|
|
120
|
+
font-family: var(--font-inter);
|
|
121
121
|
font-weight: 500;
|
|
122
122
|
font-size: 16px;
|
|
123
123
|
line-height: 24px;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface ModalProps extends React.PropsWithChildren {
|
|
3
|
+
/**
|
|
4
|
+
* This will always render the content, but not display it
|
|
5
|
+
* Defaults to true
|
|
6
|
+
*/
|
|
7
|
+
alwaysRender?: boolean;
|
|
3
8
|
/**
|
|
4
9
|
* This is to make the Modal a controlled component,
|
|
5
10
|
* instead of it managing its own state
|
|
@@ -8,7 +13,7 @@ export interface ModalProps extends React.PropsWithChildren {
|
|
|
8
13
|
onChange?: (open?: boolean) => void;
|
|
9
14
|
}
|
|
10
15
|
declare const Modal: {
|
|
11
|
-
({ controlledOpen, onChange, ...props }: ModalProps): React.JSX.Element;
|
|
16
|
+
({ alwaysRender, controlledOpen, onChange, children, ...props }: ModalProps): React.JSX.Element;
|
|
12
17
|
Trigger: {
|
|
13
18
|
({ children: child, }: {
|
|
14
19
|
children: React.ReactElement;
|
|
@@ -5,7 +5,7 @@ import { Button } from '../../';
|
|
|
5
5
|
import { Close } from '../../../icons';
|
|
6
6
|
import { callAll } from '../../../utils';
|
|
7
7
|
const ModalContext = React.createContext([false, (() => undefined)]);
|
|
8
|
-
const Modal = ({ controlledOpen, onChange, ...props }) => {
|
|
8
|
+
const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
|
|
9
9
|
const [open, setOpen] = React.useState(controlledOpen || false);
|
|
10
10
|
React.useEffect(() => {
|
|
11
11
|
if (controlledOpen !== undefined) {
|
|
@@ -15,7 +15,20 @@ const Modal = ({ controlledOpen, onChange, ...props }) => {
|
|
|
15
15
|
React.useEffect(() => {
|
|
16
16
|
onChange && onChange(open);
|
|
17
17
|
}, [open]);
|
|
18
|
-
|
|
18
|
+
let trigger;
|
|
19
|
+
const rest = [];
|
|
20
|
+
React.Children.forEach(children, (child) => {
|
|
21
|
+
const type = React.isValidElement(child) && child.type?.displayName;
|
|
22
|
+
if (type && type.toLowerCase().includes('trigger')) {
|
|
23
|
+
trigger = child;
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
rest.push(child);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
return (React.createElement(ModalContext.Provider, { value: [open, setOpen], ...props },
|
|
30
|
+
trigger,
|
|
31
|
+
(open || alwaysRender) && rest));
|
|
19
32
|
};
|
|
20
33
|
const ModalTrigger = ({ children: child, }) => {
|
|
21
34
|
const [, setOpen] = React.useContext(ModalContext);
|
|
@@ -147,7 +147,7 @@ const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left',
|
|
|
147
147
|
const CellElement = styled.td `
|
|
148
148
|
width: ${({ $width }) => $width};
|
|
149
149
|
height: 20px;
|
|
150
|
-
font-family:
|
|
150
|
+
font-family: var(--font-inter);
|
|
151
151
|
font-size: 14px;
|
|
152
152
|
font-weight: 400;
|
|
153
153
|
line-height: 20px;
|