@soul-refiner/design-system 0.2.78 → 0.2.79

package/dist/components/actions/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { COLORS } from 'common';
 type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
 export interface DropdownProps extends NativeProps, React.PropsWithChildren {
     checkbox?: boolean;
@@ -18,7 +19,7 @@ export interface DropdownProps extends NativeProps, React.PropsWithChildren {
 declare const Dropdown: {
     ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, ...rest }: DropdownProps): React.JSX.Element;
     Option: {
-        ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, }: DropdownOptionProps): React.JSX.Element;
+        ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
         displayName: string;
     };
     Spacer: {
@@ -28,7 +29,7 @@ declare const Dropdown: {
 };
 export interface DropdownOptionProps {
     checkbox?: boolean;
-    color?: string;
+    color?: (typeof COLORS)[number];
     disabled?: boolean;
     icon?: React.ReactElement;
     label?: React.ReactNode;

package/dist/components/actions/dropdown/dropdown.js

@@ -134,11 +134,11 @@ const Container = styled.div `
     : ''}
   ${({ $offset }) => $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
 `;
-const Option = ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, }) => {
+const Option = ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }) => {
     return (React.createElement(OptionWrapper, { "data-value": value, onClick: !disabled ? onClick : undefined, "$disabled": disabled, "$hasCheckbox": !!checkbox, "$hasSublabel": !!sublabel, "$selected": selected, "$sx": sx },
         checkbox ? React.createElement(Checkbox, { selected: selected }) : icon,
         React.createElement(Box, { "$dir": "column", "$display": "flex" },
-            label && (React.createElement(P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label)),
+            label && (React.createElement(P, { "$color": color || 'grey-4', "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label)),
             sublabel && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, "$textClampLines": 1 }, sublabel)))));
 };
 Option.displayName = 'Dropdown.Option';

package/dist/components/card/card.d.ts

@@ -7,9 +7,9 @@ import { PriceCardProps } from './price';
 import { RegularCardProps } from './regular';
 import { VideoEpisodeCardProps } from './video';
 import { WrittenEpisodeCardProps } from './written';
-import { MeetingCardCardProps } from './meeting';
+import { MeetingCardProps } from './meeting';
 type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode' | 'meeting';
-export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardCardProps) & {
+export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardProps) & {
     type: CardType;
 };
 export declare const Card: ({ type, ...rest }: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/components/card/meeting/index.d.ts

@@ -1,2 +1,2 @@
 export { MeetingCard } from './meeting';
-export type { MeetingCardCardProps } from './meeting';
+export type { MeetingCardProps } from './meeting';

package/dist/components/card/meeting/meeting.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-export interface MeetingCardCardProps {
+declare enum RSVP {
+    INTERESTED = "INTERESTED",
+    NOT_INTERESTED = "NOT_INTERESTED"
+}
+export interface MeetingCardProps {
     href?: string;
     image: string;
     sx?: string;
@@ -15,5 +19,7 @@ export interface MeetingCardCardProps {
     handleInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
     handleNotInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
     handleVisibleToConnectionsOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+    rsvp?: `${RSVP}`;
 }
-export declare const MeetingCard: ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, }: MeetingCardCardProps) => React.JSX.Element;
+export declare const MeetingCard: ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, }: MeetingCardProps) => React.JSX.Element;
+export {};

package/dist/components/card/meeting/meeting.js

@@ -3,7 +3,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Box, H, P, Modal, Button, Dropdown } from '../..';
 import { Calendar, GraduationCap, Clock, Pin, ForwardBold, StarFilled, Star, } from '../../../icons';
-export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, }) => {
+var RSVP;
+(function (RSVP) {
+    RSVP["INTERESTED"] = "INTERESTED";
+    RSVP["NOT_INTERESTED"] = "NOT_INTERESTED";
+})(RSVP || (RSVP = {}));
+export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, }) => {
     const secondaryActions = [];
     !!handleInterestedOnClick &&
         secondaryActions.push({
@@ -11,6 +16,7 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
             label: 'Interested',
             onClick: handleInterestedOnClick,
             icon: React.createElement(StarFilled, { color: "yellow-5" }),
+            color: rsvp === RSVP.INTERESTED ? 'primary-blue-2' : undefined,
         });
     !!handleNotInterestedOnClick &&
         secondaryActions.push({
@@ -18,6 +24,7 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
             label: 'Not Interested',
             onClick: handleNotInterestedOnClick,
             icon: React.createElement(StarFilled, { color: "red-4" }),
+            color: rsvp === RSVP.NOT_INTERESTED ? 'primary-blue-2' : undefined,
         });
     !!handleVisibleToConnectionsOnClick &&
         secondaryActions.push('break', {
@@ -33,7 +40,8 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
                     React.createElement(Modal.Trigger, null,
                         React.createElement(Button, { icon: React.createElement(ForwardBold, null), type: "outlined", size: "small", onClick: (e) => e.preventDefault(), className: "icon" })),
                     React.createElement(Modal.Content, { onClick: (e) => e.preventDefault() }, shareModal))),
-                !!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() })))),
+                !!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);" }))) ||
+                            (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() })))),
         React.createElement(Box, { "$dir": "column", "$padding": 24 },
             React.createElement(H.Eight, { "$textAlign": "center", "$color": "grey-2" }, title),
             React.createElement(MeetingInformation, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {