@soul-refiner/design-system 0.2.85 → 0.2.87

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

@@ -17,6 +17,7 @@ export interface ButtonProps extends NativeProps, React.PropsWithChildren {
     sx?: string;
     type?: ButtonTypes;
     className?: string;
+    showChevron?: boolean;
 }
-export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, ...props }: ButtonProps) => React.JSX.Element;
+export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, showChevron, ...props }: ButtonProps) => React.JSX.Element;
 export {};

package/dist/components/actions/button/button.js

@@ -14,7 +14,7 @@ const SM_ICON_SIZE = 16;
 const SM_FONT_SIZE = 14;
 const SM_PADDING = '5px 15px';
 const SM_PADDING_WO_CHILDREN = '7px';
-export const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', ...props }) => {
+export const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', showChevron = true, ...props }) => {
     const Component = Components()[type];
     const buttonIcon = React.Children.map(icon, (item) => {
         if (React.isValidElement(item))
@@ -30,7 +30,7 @@ export const Button = ({ as = 'button', children, disabled, fluid = false, href,
                 },
             };
     })?.[0];
-    const dropdownIcon = isDropdownOpen === true ? (React.createElement(ChevronUp, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : isDropdownOpen === false ? (React.createElement(ChevronDown, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : undefined;
+    const dropdownIcon = showChevron ? (isDropdownOpen === true ? (React.createElement(ChevronUp, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : isDropdownOpen === false ? (React.createElement(ChevronDown, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : undefined) : undefined;
     const padding = !!children
         ? size === 'large'
             ? LG_PADDING

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DropdownOptionProps } from '../..';
 declare enum RSVP {
     INTERESTED = "INTERESTED",
     NOT_INTERESTED = "NOT_INTERESTED"
@@ -20,6 +21,7 @@ export interface MeetingCardProps {
     handleNotInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
     handleVisibleToConnectionsOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
     rsvp?: `${RSVP}`;
+    dotsActions?: (Omit<DropdownOptionProps, 'selected'> | 'break')[];
 }
-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 declare const MeetingCard: ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, dotsActions, }: MeetingCardProps) => React.JSX.Element;
 export {};

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

@@ -2,13 +2,13 @@
 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';
+import { Calendar, GraduationCap, Clock, Pin, ForwardBold, StarFilled, Star, EllipsisHorizontal, } from '../../../icons';
 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, }) => {
+export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, dotsActions, }) => {
     const secondaryActions = [];
     !!handleInterestedOnClick &&
         secondaryActions.push({
@@ -35,7 +35,8 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
     return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
         React.createElement(Figure, null,
             React.createElement("img", { src: image, alt: "" }),
-            React.createElement(OverlayContainer, { id: "overlay" },
+            React.createElement(OverlayTopContainer, { id: "overlayTop" }, dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { hasArrow: true, maintainState: false, options: dotsActions, trigger: React.createElement(Button, { icon: React.createElement(EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() }))),
+            React.createElement(OverlayBottomContainer, { id: "overlayBottom" },
                 shareModal && (React.createElement(Modal, null,
                     React.createElement(Modal.Trigger, null,
                         React.createElement(Button, { icon: React.createElement(ForwardBold, null), type: "outlined", size: "small", onClick: (e) => e.preventDefault(), className: "icon" })),
@@ -79,7 +80,11 @@ const Wrapper = styled.div `
   &:hover {
     ${({ $isLink }) => $isLink ? 'border: 1px solid var(--color-primary-blue-3);' : ''}
 
-    #overlay {
+    #overlayBottom {
+      opacity: 1;
+    }
+
+    #overlayTop {
       opacity: 1;
     }
   }
@@ -103,7 +108,7 @@ const Figure = styled.figure `
   position: relative;
   margin: 0;
 `;
-const OverlayContainer = styled.div `
+const OverlayBottomContainer = styled.div `
   position: absolute;
   right: 0;
   bottom: 0;
@@ -112,3 +117,12 @@ const OverlayContainer = styled.div `
   display: flex;
   gap: 8px;
 `;
+const OverlayTopContainer = styled.div `
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 10px 10px 0 0;
+  opacity: 0;
+  display: flex;
+  gap: 8px;
+`;

package/dist/components/feedback/toast/toast.js

@@ -64,14 +64,28 @@ const Wrapper = styled.output `
       bottom: 24px;
       right: 24px;`}
 
-  width: 99vw;
-  max-width: 476px;
   box-sizing: border-box;
   padding: 12px 16px;
   display: flex;
   box-shadow: var(--elevation-2);
   border-radius: var(--small);
 
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0px;
+    width: 4px;
+    height: 100%;
+    background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+    border-radius: 8px 0px 0px 8px;
+  }
+
   & > svg {
     fill: ${({ $type }) => $type === 'error'
     ? 'var(--color-red-4)'

package/package.json

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