@soul-refiner/design-system 0.2.78 → 0.2.80

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.
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { COLORS } from 'common';
2
3
  type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
3
4
  export interface DropdownProps extends NativeProps, React.PropsWithChildren {
4
5
  checkbox?: boolean;
@@ -18,7 +19,7 @@ export interface DropdownProps extends NativeProps, React.PropsWithChildren {
18
19
  declare const Dropdown: {
19
20
  ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, ...rest }: DropdownProps): React.JSX.Element;
20
21
  Option: {
21
- ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, }: DropdownOptionProps): React.JSX.Element;
22
+ ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
22
23
  displayName: string;
23
24
  };
24
25
  Spacer: {
@@ -28,7 +29,7 @@ declare const Dropdown: {
28
29
  };
29
30
  export interface DropdownOptionProps {
30
31
  checkbox?: boolean;
31
- color?: string;
32
+ color?: (typeof COLORS)[number];
32
33
  disabled?: boolean;
33
34
  icon?: React.ReactElement;
34
35
  label?: React.ReactNode;
@@ -134,11 +134,11 @@ const Container = styled.div `
134
134
  : ''}
135
135
  ${({ $offset }) => $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
136
136
  `;
137
- const Option = ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, }) => {
137
+ const Option = ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }) => {
138
138
  return (React.createElement(OptionWrapper, { "data-value": value, onClick: !disabled ? onClick : undefined, "$disabled": disabled, "$hasCheckbox": !!checkbox, "$hasSublabel": !!sublabel, "$selected": selected, "$sx": sx },
139
139
  checkbox ? React.createElement(Checkbox, { selected: selected }) : icon,
140
140
  React.createElement(Box, { "$dir": "column", "$display": "flex" },
141
- label && (React.createElement(P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label)),
141
+ label && (React.createElement(P, { "$color": color || 'grey-4', "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label)),
142
142
  sublabel && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, "$textClampLines": 1 }, sublabel)))));
143
143
  };
144
144
  Option.displayName = 'Dropdown.Option';
@@ -7,9 +7,9 @@ import { PriceCardProps } from './price';
7
7
  import { RegularCardProps } from './regular';
8
8
  import { VideoEpisodeCardProps } from './video';
9
9
  import { WrittenEpisodeCardProps } from './written';
10
- import { MeetingCardCardProps } from './meeting';
10
+ import { MeetingCardProps } from './meeting';
11
11
  type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode' | 'meeting';
12
- export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardCardProps) & {
12
+ export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardProps) & {
13
13
  type: CardType;
14
14
  };
15
15
  export declare const Card: ({ type, ...rest }: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -1,2 +1,2 @@
1
1
  export { MeetingCard } from './meeting';
2
- export type { MeetingCardCardProps } from './meeting';
2
+ export type { MeetingCardProps } from './meeting';
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
- export interface MeetingCardCardProps {
2
+ declare enum RSVP {
3
+ INTERESTED = "INTERESTED",
4
+ NOT_INTERESTED = "NOT_INTERESTED"
5
+ }
6
+ export interface MeetingCardProps {
3
7
  href?: string;
4
8
  image: string;
5
9
  sx?: string;
@@ -15,5 +19,7 @@ export interface MeetingCardCardProps {
15
19
  handleInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
16
20
  handleNotInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
17
21
  handleVisibleToConnectionsOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
22
+ rsvp?: `${RSVP}`;
18
23
  }
19
- export declare const MeetingCard: ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, }: MeetingCardCardProps) => React.JSX.Element;
24
+ export declare const MeetingCard: ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, }: MeetingCardProps) => React.JSX.Element;
25
+ export {};
@@ -3,7 +3,12 @@ import React from 'react';
3
3
  import styled from 'styled-components';
4
4
  import { Box, H, P, Modal, Button, Dropdown } from '../..';
5
5
  import { Calendar, GraduationCap, Clock, Pin, ForwardBold, StarFilled, Star, } from '../../../icons';
6
- export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, }) => {
6
+ var RSVP;
7
+ (function (RSVP) {
8
+ RSVP["INTERESTED"] = "INTERESTED";
9
+ RSVP["NOT_INTERESTED"] = "NOT_INTERESTED";
10
+ })(RSVP || (RSVP = {}));
11
+ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, }) => {
7
12
  const secondaryActions = [];
8
13
  !!handleInterestedOnClick &&
9
14
  secondaryActions.push({
@@ -11,6 +16,7 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
11
16
  label: 'Interested',
12
17
  onClick: handleInterestedOnClick,
13
18
  icon: React.createElement(StarFilled, { color: "yellow-5" }),
19
+ color: rsvp === RSVP.INTERESTED ? 'primary-blue-2' : undefined,
14
20
  });
15
21
  !!handleNotInterestedOnClick &&
16
22
  secondaryActions.push({
@@ -18,6 +24,7 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
18
24
  label: 'Not Interested',
19
25
  onClick: handleNotInterestedOnClick,
20
26
  icon: React.createElement(StarFilled, { color: "red-4" }),
27
+ color: rsvp === RSVP.NOT_INTERESTED ? 'primary-blue-2' : undefined,
21
28
  });
22
29
  !!handleVisibleToConnectionsOnClick &&
23
30
  secondaryActions.push('break', {
@@ -33,7 +40,8 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
33
40
  React.createElement(Modal.Trigger, null,
34
41
  React.createElement(Button, { icon: React.createElement(ForwardBold, null), type: "outlined", size: "small", onClick: (e) => e.preventDefault(), className: "icon" })),
35
42
  React.createElement(Modal.Content, { onClick: (e) => e.preventDefault() }, shareModal))),
36
- !!secondaryActions.length && (React.createElement(Dropdown, { open: "left", offset: [40, 10], maintainState: false, options: secondaryActions, trigger: React.createElement(Button, { icon: React.createElement(Star, null), type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })))),
43
+ !!secondaryActions.length && (React.createElement(Dropdown, { open: "left", offset: [40, 10], maintainState: false, options: secondaryActions, trigger: React.createElement(Button, { icon: (rsvp === RSVP.INTERESTED && (React.createElement(StarFilled, { sx: "color: var(--color-yellow-5);" }))) ||
44
+ (rsvp === RSVP.NOT_INTERESTED && (React.createElement(StarFilled, { sx: "color: var(--color-red-4);" }))) || React.createElement(Star, null), type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })))),
37
45
  React.createElement(Box, { "$dir": "column", "$padding": 24 },
38
46
  React.createElement(H.Eight, { "$textAlign": "center", "$color": "grey-2" }, title),
39
47
  React.createElement(MeetingInformation, null,
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { IconProps } from '../../components';
3
+ export declare const FolderGear: (props: IconProps) => React.JSX.Element;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { Icon } from '../../components';
3
+ export const FolderGear = (props) => {
4
+ return (React.createElement(Icon, { ...props },
5
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.3307 4.66667C15.3307 3.93029 14.7338 3.33333 13.9974 3.33333H7.99859C8.02534 3.33319 8.01685 3.32285 7.95821 3.25154C7.94381 3.23403 7.92638 3.21283 7.90572 3.18721C7.88529 3.16189 7.82814 3.08824 7.77785 3.02343C7.74219 2.97749 7.70992 2.9359 7.69671 2.91924C7.21935 2.31697 6.74406 2 5.9974 2H1.9974C1.26102 2 0.664062 2.59695 0.664062 3.33333V11.3333C0.664062 12.0697 1.26102 12.6667 1.9974 12.6667H8.44648C8.24959 12.2522 8.11199 11.8041 8.04465 11.3333H1.9974V3.33333H5.9974C6.25356 3.33333 6.40208 3.43238 6.65179 3.74744C6.6596 3.75728 6.68187 3.78599 6.70967 3.82183L6.7101 3.82238C6.76368 3.89145 6.83758 3.98671 6.86795 4.02436C7.20319 4.43994 7.51506 4.66409 7.99383 4.66666L13.9974 4.66667V6.19325C14.479 6.33659 14.9281 6.55559 15.3307 6.83646V4.66667Z" }),
6
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6974 13L11.8974 14H13.2307L13.4307 13C13.5645 12.9449 13.6896 12.8867 13.8061 12.8253C13.9225 12.764 14.0418 12.6889 14.1641 12.6L15.1307 12.9L15.7974 11.7667L15.0307 11.1C15.053 10.9667 15.0641 10.8222 15.0641 10.6667C15.0641 10.5111 15.053 10.3667 15.0307 10.2333L15.7974 9.56667L15.1307 8.43333L14.1641 8.73333C14.0423 8.64489 13.923 8.57 13.8061 8.50867C13.6892 8.44733 13.5641 8.38889 13.4307 8.33333L13.2307 7.33333H11.8974L11.6974 8.33333C11.5645 8.38933 11.4396 8.44778 11.3227 8.50867C11.2058 8.56956 11.0863 8.64444 10.9641 8.73333L9.9974 8.43333L9.33073 9.56667L10.0974 10.2333C10.0752 10.3667 10.0641 10.5111 10.0641 10.6667C10.0641 10.8222 10.0752 10.9667 10.0974 11.1L9.33073 11.7667L9.9974 12.9L10.9641 12.6C11.0858 12.6884 11.2052 12.7633 11.3221 12.8247C11.439 12.886 11.5641 12.9444 11.6974 13ZM13.897 10.6667C13.897 11.403 13.3001 12 12.5637 12C11.8273 12 11.2303 11.403 11.2303 10.6667C11.2303 9.93029 11.8273 9.33333 12.5637 9.33333C13.3001 9.33333 13.897 9.93029 13.897 10.6667Z" })));
7
+ };
@@ -29,6 +29,7 @@ export { FolderMusic } from './folder_music';
29
29
  export { FolderOpen } from './folder_open';
30
30
  export { FolderPlus } from './folder_plus';
31
31
  export { FolderZip } from './folder_zip';
32
+ export { FolderGear } from './folder_gear';
32
33
  export { Note } from './note';
33
34
  export { NoteText } from './note_text';
34
35
  export { PDF } from './pdf';
@@ -29,6 +29,7 @@ export { FolderMusic } from './folder_music';
29
29
  export { FolderOpen } from './folder_open';
30
30
  export { FolderPlus } from './folder_plus';
31
31
  export { FolderZip } from './folder_zip';
32
+ export { FolderGear } from './folder_gear';
32
33
  export { Note } from './note';
33
34
  export { NoteText } from './note_text';
34
35
  export { PDF } from './pdf';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "0.2.78",
3
+ "version": "0.2.80",
4
4
  "main": "dist/index.js",
5
5
  "license": "MIT",
6
6
  "publishConfig": {