@galaxy-ds/core 2.0.5 → 2.0.7

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/src/DatePicker/DatePicker.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import DatePicker from './DatePicker';
-import DatePickerExample from './support/DatePickerExample.js';
+import DatePickerExample from './support/DatePickerExample';
 
 <Meta title="Form Elements/Calendars/DatePicker" component={DatePicker} />
 
@@ -12,15 +12,16 @@ import DatePickerExample from './support/DatePickerExample.js';
       docs: {
         source: {
           code: `
-function DatePickerExample() {
-  const [date, setDate] = useState(null);
-  return (
-    <DatePicker
-      onChange={(item) => setDate(item)}
-      date={date}
-    ></DatePicker>
-  );
-}
+import React, { useState } from 'react';
+import { DatePicker } from '@galaxy-ds/core';
+const DatePickerExample: React.FC = () => {
+  const [date, setDate] = useState<Date>(new Date());
+  const handleChange = (item: Date) => {
+    console.log(item);
+    setDate(item);
+  };
+  return <DatePicker onChange={handleChange} date={date}></DatePicker>;
+};
           `
           }
         }

package/src/DatePicker/support/DatePickerExample.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { DatePicker } from '../';
+
+const DatePickerExample: React.FC = () => {
+  const [date, setDate] = useState<Date>(new Date());
+  const handleChange = (item: Date) => {
+    console.log(item);
+    setDate(item);
+  };
+
+  return <DatePicker onChange={handleChange} date={date} />;
+};
+
+export default DatePickerExample;

package/src/DateRangePicker/DateRangePicker.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import DateRangePicker from './DateRangePicker';
-import DateRangePickerExample from './support/DateRangePickerExample.js';
+import DateRangePickerExample from './support/DateRangePickerExample';
 
 <Meta title="Form Elements/Calendars/DateRangePicker" component={DateRangePicker} />
 
@@ -16,22 +16,28 @@ Date range picker with default 2 months side by side.
           code: `
 import React, { useState } from 'react';
 import { DateRangePicker } from '@galaxy-ds/core';
-function DateRangePickerExample({months}) {
-  const [state, setState] = useState([
+import type { DateRangePickerProps, Range, RangeKeyDict } from '@galaxy-ds/core';
+const DateRangePickerExample: React.FC<DateRangePickerProps> = () => {
+  const [selectionRange, setSelectionRange] = useState<Range>(
     {
       startDate: new Date(),
+      endDate: new Date(),
       key: 'selection',
     },
-  ]);
+  );
+  const handleSelect = (ranges: RangeKeyDict) => {
+    console.table(ranges);
+    setSelectionRange(ranges['selection'])
+  }
   return (
     <DateRangePicker
-      onChange={(item) => setState([item.selection])}
-      ranges={state}
+      onChange={handleSelect}
+      ranges={[selectionRange]}
       months={2}
       dateDisplayFormat='dd MMMM yyyy'
-    ></DateRangePicker>
+    />
   );
-}
+};
           `
           }
         }
@@ -69,24 +75,30 @@ Show just a single month with `months={1}`.
       docs: {
         source: {
           code: `
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import { DateRangePicker } from '@galaxy-ds/core';
-function DateRangePickerExample({months}) {
-  const [state, setState] = useState([
+import type { DateRangePickerProps, Range, RangeKeyDict } from '@galaxy-ds/core';
+const DateRangePickerExample: React.FC<DateRangePickerProps> = () => {
+  const [selectionRange, setSelectionRange] = useState<Range>(
     {
       startDate: new Date(),
+      endDate: new Date(),
       key: 'selection',
     },
-  ]);
+  );
+  const handleSelect = (ranges: RangeKeyDict) => {
+    console.table(ranges);
+    setSelectionRange(ranges['selection'])
+  }
   return (
     <DateRangePicker
-      onChange={(item) => setState([item.selection])}
-      ranges={state}
+      onChange={handleSelect}
+      ranges={[selectionRange]}
       months={1}
       dateDisplayFormat='dd MMMM yyyy'
-    ></DateRangePicker>
+    />
   );
-}
+};
           `
           }
         }

package/src/DateRangePicker/DateRangePicker.test.tsx

@@ -3,5 +3,10 @@ import { render } from '@testing-library/react';
 import DateRangePicker from './DateRangePicker';
 
 test('DateRangePicker', () => {
-  render(<DateRangePicker />);
+  const ranges = {
+    startDate: new Date(),
+    endDate: new Date(),
+    key: 'selection',
+  };
+  render(<DateRangePicker ranges={[ranges]} />);
 });

package/src/DateRangePicker/DateRangePicker.types.ts

@@ -1,3 +1,13 @@
-import { DateRangePickerProps as ReactDateRangePickerProps } from 'react-date-range';
+import type {
+  DateRangePickerProps as ReactDateRangePickerProps,
+  Range,
+  RangeFocus,
+  RangeKeyDict,
+  Preview,
+  StaticRange,
+  InputRange,
+} from 'react-date-range';
 
 export interface DateRangePickerProps extends ReactDateRangePickerProps {}
+
+export { Range, RangeFocus, RangeKeyDict, Preview, StaticRange, InputRange };

package/src/DateRangePicker/support/DateRangePickerExample.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { DateRangePicker } from '../';
+import type {
+  DateRangePickerProps,
+  Range,
+  RangeKeyDict,
+} from '../DateRangePicker.types';
+
+const DateRangePickerExample: React.FC<DateRangePickerProps> = ({ months }) => {
+  const [selectionRange, setSelectionRange] = useState<Range>({
+    startDate: new Date(),
+    endDate: new Date(),
+    key: 'selection',
+  });
+
+  const handleSelect = (ranges: RangeKeyDict) => {
+    console.table(ranges);
+    setSelectionRange(ranges['selection']);
+  };
+
+  return (
+    <DateRangePicker
+      onChange={handleSelect}
+      ranges={[selectionRange]}
+      months={months}
+      dateDisplayFormat="dd MMMM yyyy"
+    />
+  );
+};
+
+export default DateRangePickerExample;

package/src/RibbonButton/RibbonButton.stories.mdx

@@ -1,6 +1,12 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-import { NewEntryRibbonIcon, MatterFolderRibbonIcon } from "../Icons/leap";
-import { RibbonButton } from "./RibbonButton"
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { 
+  NewEntryRibbonIcon, 
+  CalendarRibbonIcon, 
+  DeleteRibbonIcon, 
+  MatterFolderRibbonIcon 
+} from "../Icons/leap";
+import { Divider } from "../Divider";
+import { RibbonButton } from "./RibbonButton";
 
 <Meta title="components/Buttons/RibbonButton" component={RibbonButton} />
 
@@ -36,4 +42,22 @@ import { RibbonButton } from "./RibbonButton"
   </Story>
 </Canvas>
 
+<Canvas withToolbar>
+  <Story
+    name="Toolbar"
+  >
+    {() => (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <RibbonButton icon={<NewEntryRibbonIcon />} label="New Entry" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<CalendarRibbonIcon />} label="11th October" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<DeleteRibbonIcon />} label="Delete" />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" isWrapped />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
 <ArgsTable story="Default" />

package/src/RibbonButton/RibbonButton.styled.tsx

@@ -49,12 +49,11 @@ export const RibbonLabelStyled = styled(Typography)({
 export const RibbonContentStyled = styled('div', {
   shouldForwardProp: (prop) => prop !== 'isWrapped',
 })<{ isWrapped?: boolean }>(({ isWrapped }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: '100%',
   ...(isWrapped && {
-    height: '80px',
     width: '54px',
-    p: {
-      position: 'relative',
-      bottom: '8px',
-    },
   }),
 }));

package/src/RibbonButton/RibbonButton.tsx

@@ -8,8 +8,9 @@ import { RibbonButtonProps, RibbonButtonRef } from './RibbonButton.types';
 
 export const RibbonButton = forwardRef<RibbonButtonRef, RibbonButtonProps>(
   function RibbonMenuListButton(props, ref) {
+    const { isWrapped, icon, label, ...rest } = props;
     return (
-      <RibbonButtonStyled ref={ref} variant="outlined" {...props}>
+      <RibbonButtonStyled ref={ref} variant="outlined" {...rest}>
         <RibbonContentStyled isWrapped={props.isWrapped}>
           {props.icon}
           <RibbonLabelStyled variant="body2">{props.label}</RibbonLabelStyled>

package/src/RibbonButtonGroup/RibbonButtonGroup.stories.mdx

@@ -1,5 +1,12 @@
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-import { MatterFolderRibbonIcon, NewEntryRibbonIcon } from "../Icons/leap";
+import { 
+  NewEntryRibbonIcon, 
+  CalendarRibbonIcon, 
+  DeleteRibbonIcon, 
+  MatterFolderRibbonIcon 
+} from "../Icons/leap";
+import { Divider } from "../Divider";
+import { RibbonButton } from "../RibbonButton";
 import { RibbonButtonGroup } from "./RibbonButtonGroup"
 import { RibbonButtonGroupMenuExample } from "./RibbonButtonGroupMenuExample"
 
@@ -22,7 +29,25 @@ import { RibbonButtonGroupMenuExample } from "./RibbonButtonGroupMenuExample"
     name="Wrapped"
   >
     {() => (
-      <RibbonButtonGroup icon={<MatterFolderRibbonIcon />} label="Open Matter"  isWrapped/>
+      <RibbonButtonGroup icon={<MatterFolderRibbonIcon />} label="Open Matter"  isWrapped />
+    )}
+  </Story>
+</Canvas>
+
+<Canvas withToolbar>
+  <Story
+    name="Toolbar"
+  >
+    {() => (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <RibbonButtonGroup icon={<NewEntryRibbonIcon />} label="New Entry" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<CalendarRibbonIcon />} label="11th October" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<DeleteRibbonIcon />} label="Delete" />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" isWrapped />
+      </div>
     )}
   </Story>
 </Canvas>

package/src/RibbonButtonGroup/RibbonButtonGroup.tsx

@@ -14,14 +14,14 @@ export const RibbonButtonGroup = forwardRef<
   RibbonButtonGroupRef,
   RibbonButtonGroupProps
 >(function RibbonButtonGroup(props, ref) {
-  const { icon, label, isWrapped, onToggle, onClick } = props;
+  const { icon, label, isWrapped, onToggle, onClick, ...rest } = props;
 
   return (
     <RibbonButtonGroupStyled
       variant="outlined"
       disableRipple
       ref={ref}
-      {...props}
+      {...rest}
     >
       <RibbonButtonStyled
         variant="outlined"

package/src/RibbonButtonGroup/RibbonButtonGroup.types.ts

@@ -1,18 +1,17 @@
 import { ButtonGroupProps as MuiButtonGroupProps } from '@mui/material';
 import { RibbonButtonProps } from '../RibbonButton/RibbonButton.types';
 
-type ButtonGroupProps = MuiButtonGroupProps;
+type ButtonGroupProps = MuiButtonGroupProps & RibbonButtonProps;
 
-export type RibbonButtonGroupProps = ButtonGroupProps &
-  RibbonButtonProps & {
-    /**
-     * Primary Action
-     * */
-    onClick?: () => void;
-    /**
-     * Secondary Action
-     * */
-    onToggle?: () => void;
-  };
+export interface RibbonButtonGroupProps extends ButtonGroupProps {
+  /**
+   * Primary Action
+   * */
+  onClick?: () => void;
+  /**
+   * Secondary Action
+   * */
+  onToggle?: () => void;
+}
 
 export type RibbonButtonGroupRef = HTMLDivElement;

package/src/Theme/leap/desktop/design-tokens/typography.ts

@@ -1,73 +1,69 @@
 import { TypographyOptions } from "@mui/material/styles/createTypography"
 
+const FONT_FAMILY = [
+  "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+].join(",");
+
 const typography: TypographyOptions = {
-  fontFamily: [
-    "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-  ].join(","),
+  fontFamily: FONT_FAMILY,
   h1: {
-    fontFamily: [
-      "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-    ].join(","),
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 24,
     lineHeight: 1.25,
     letterSpacing: "-0.5px",
   },
   h2: {
-    fontFamily: [
-      "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-    ].join(","),
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 16,
     lineHeight: 1.1667,
     letterSpacing: "-0.5px",
   },
   h3: {
-    fontFamily: [
-      "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-    ].join(","),
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 12,
     lineHeight: 1.2,
     letterSpacing: "-0.5px",
   },
   h4: {
-    fontFamily: [
-      "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-    ].join(","),
+    fontFamily: FONT_FAMILY,
     fontWeight: 500,
     fontSize: 14,
     lineHeight: "1.5rem",
     letterSpacing: "0",
   },
   h5: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 13,
     lineHeight: "2rem",
     letterSpacing: "0",
   },
   h6: {
-    fontFamily: [
-      "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-    ].join(","),
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 16,
     lineHeight: 1.1667,
     letterSpacing: "-0.5px",
   },
   body1: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 14,
     lineHeight: "1.5rem",
     letterSpacing: "0",
   },
   body2: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 12,
     lineHeight: "1.25rem", // Use rem here for accurate height calculation
     letterSpacing: "0",
   },
   button: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 400,
     fontSize: 14,
     lineHeight: "1.371",
@@ -75,18 +71,21 @@ const typography: TypographyOptions = {
     textTransform: 'capitalize'
   },
   caption: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 500,
     fontSize: 12,
     lineHeight: '0.875rem',
     letterSpacing: '0.07px'
   },
   subtitle1: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 500,
     fontSize: 14,
     lineHeight: "1.5rem",
     letterSpacing: "0",
   },
   subtitle2: {
+    fontFamily: FONT_FAMILY,
     fontWeight: 500,
     fontSize: 12,
     lineHeight: "1.25rem", // Use rem here for accurate height calculation

package/src/index.ts

@@ -91,5 +91,7 @@ export * from './AttachmentIcon';
 export * from './Icons/leap';
 export * from './Icons/common/Forms';
 export * from './Logos/Leap';
+export * from './Icons/doctypes/Doctype';
+export * from './Icons/doctypes/Doctype16';
 
 export const IconsPath = '../Icons/lawconnect/';

package/src/DatePicker/support/DatePickerExample.js

@@ -1,15 +0,0 @@
-import React, {useState} from 'react';
-import DatePicker from '../DatePicker';
-
-function DatePickerExample() {
-  const [date, setDate] = useState(null);
-
-  return (
-    <DatePicker
-      onChange={(item) => setDate(item)}
-      date={date}
-    ></DatePicker>
-  );
-}
-
-export default DatePickerExample;

package/src/DateRangePicker/support/DateRangePickerExample.js

@@ -1,22 +0,0 @@
-import React, {useState} from 'react';
-import DateRangePicker from '../DateRangePicker';
-
-function DateRangePickerExample({months}) {
-  const [state, setState] = useState([
-    {
-      startDate: new Date(),
-      key: 'selection',
-    },
-  ]);
-
-  return (
-    <DateRangePicker
-      onChange={(item) => setState([item.selection])}
-      ranges={state}
-      months={months}
-      dateDisplayFormat='dd MMMM yyyy'
-    ></DateRangePicker>
-  );
-}
-
-export default DateRangePickerExample;