feat(menu-separator): add hasSeparators prop

src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx

@@ -47,16 +47,30 @@ const AvatarMeetingsListItem: FC<Props> = (props: Props) => {
     switch (schedulerState) {
       case SCHEDULER_STATES.available:
         return (
-          <Icon name="scheduler-available" fillColor="var(--mds-color-theme-text-success-normal)" {...iconProps} />
+          <Icon
+            name="scheduler-available"
+            fillColor="var(--mds-color-theme-text-success-normal)"
+            {...iconProps}
+          />
         );
 
       case SCHEDULER_STATES.unavailable:
         return (
-          <Icon name="scheduler-unavailable" fillColor="var(--mds-color-theme-text-warning-normal)" {...iconProps} />
+          <Icon
+            name="scheduler-unavailable"
+            fillColor="var(--mds-color-theme-text-warning-normal)"
+            {...iconProps}
+          />
         );
 
       case SCHEDULER_STATES.unknown:
-        return <Icon name="scheduler-unknown" fillColor="var(--mds-color-theme-text-error-normal)" {...iconProps} />;
+        return (
+          <Icon
+            name="scheduler-unknown"
+            fillColor="var(--mds-color-theme-text-error-normal)"
+            {...iconProps}
+          />
+        );
 
       case SCHEDULER_STATES.quietHours:
         return (

src/components/Icon/Icon.unit.test.tsx

@@ -62,7 +62,9 @@ describe('<Icon />', () => {
 
       const ariaLabel = 'This participant is muted';
 
-      container = await mountAndWait(<Icon name="draft-indicator" weight="bold" ariaLabel={ariaLabel} />);
+      container = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" ariaLabel={ariaLabel} />
+      );
 
       expect(container).toMatchSnapshot();
     });
@@ -72,7 +74,9 @@ describe('<Icon />', () => {
 
       const ariaLabel = 'This participant is muted';
 
-      container = await mountAndWait(<Icon name="draft-indicator" weight="bold" aria-label={ariaLabel} />);
+      container = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" aria-label={ariaLabel} />
+      );
 
       expect(container).toMatchSnapshot();
     });
@@ -205,7 +209,9 @@ describe('<Icon />', () => {
 
       const title = 'You have a draft message';
 
-      const wrapper = await mountAndWait(<Icon name="draft-indicator" weight="bold" title={title} />);
+      const wrapper = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" title={title} />
+      );
       const element = wrapper.find(Icon).getDOMNode();
 
       expect(element.getAttribute('title')).toBe(title);

src/components/Icon/Icon.utils.test.ts

@@ -15,6 +15,8 @@ describe('getResolvedSVGName', () => {
     ['icon-name', 'thin', true, 'icon-name'],
     ['icon-name', 'filled', true, 'icon-name'],
   ])('returns the correct name for %s, %s, %s', (name, weight, weightless, expected) => {
-    expect(getResolvedSVGName(name as InferredIconName, weight as IconWeight, weightless)).toEqual(expected);
+    expect(getResolvedSVGName(name as InferredIconName, weight as IconWeight, weightless)).toEqual(
+      expected
+    );
   });
 });

src/components/Icon/Icon.utils.ts

@@ -8,5 +8,8 @@ import { DEFAULTS } from './Icon.constants';
  * @param weightless - marks that this icon doesn't have a weight
  * @returns - resolved name of the icon
  */
-export const getResolvedSVGName = (name: InferredIconName, weight: IconWeight, weightless: boolean): string =>
-  weightless ? `${String(name)}` : `${String(name)}-${weight || DEFAULTS.WEIGHT}`;
+export const getResolvedSVGName = (
+  name: InferredIconName,
+  weight: IconWeight,
+  weightless: boolean
+): string => (weightless ? `${String(name)}` : `${String(name)}-${weight || DEFAULTS.WEIGHT}`);

src/components/MeetingListItem/MeetingListItem.tsx

@@ -1,9 +1,4 @@
-import React, {
-  FC,
-  forwardRef,
-  useRef,
-  RefObject,
-} from 'react';
+import React, { FC, forwardRef, useRef, RefObject } from 'react';
 import classnames from 'classnames';
 
 import { STYLE, DEFAULTS } from './MeetingListItem.constants';
@@ -40,7 +35,12 @@ const MeetingListItem: FC<Props> = forwardRef(
         size={large ? 70 : 50}
         {...rest}
       >
-        <MeetingRowContent color={color} isDisabled={isDisabled} buttonGroup={buttonGroup} image={image}>
+        <MeetingRowContent
+          color={color}
+          isDisabled={isDisabled}
+          buttonGroup={buttonGroup}
+          image={image}
+        >
           {children}
         </MeetingRowContent>
       </ListItemBase>

src/components/MeetingRowContent/MeetingRowContent.stories.args.ts

@@ -5,11 +5,11 @@ export default {
   ...commonStyles,
   ...commonAriaPressProps,
   children: {
-    description: 'Provides the child nodes for this element.', 
+    description: 'Provides the child nodes for this element.',
     control: { type: 'none' },
     table: {
       type: {
-        summary: 'ReactNode', 
+        summary: 'ReactNode',
       },
       defaultValue: {
         summary: 'undefined',

src/components/MeetingRowContent/MeetingRowContent.stories.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { MultiTemplate, MultiTemplateWithLabel, Template } from '../../storybook/helper.stories.templates';
+import {
+  MultiTemplate,
+  MultiTemplateWithLabel,
+  Template,
+} from '../../storybook/helper.stories.templates';
 import { DocumentationPage } from '../../storybook/helper.stories.docs';
 import StyleDocs from '../../storybook/docs.stories.style.mdx';
 
@@ -26,8 +30,11 @@ export default {
   },
 };
 
-const Example = Template<MeetingRowContentProps>((args: MeetingRowContentProps) => <div style={{position:'relative'}} ><MeetingRowContent {...args} /></div>
-).bind({});
+const Example = Template<MeetingRowContentProps>((args: MeetingRowContentProps) => (
+  <div style={{ position: 'relative' }}>
+    <MeetingRowContent {...args} />
+  </div>
+)).bind({});
 
 Example.argTypes = { ...argTypes };
 
@@ -61,8 +68,11 @@ Example.args = {
 /**
  * Common variants story. This renders multiple variants of a single component.
  */
-const Common = MultiTemplateWithLabel<MeetingRowContentProps>((args: MeetingRowContentProps) => <div style={{position:'relative'}} ><MeetingRowContent {...args} /></div>
-).bind({});
+const Common = MultiTemplateWithLabel<MeetingRowContentProps>((args: MeetingRowContentProps) => (
+  <div style={{ position: 'relative' }}>
+    <MeetingRowContent {...args} />
+  </div>
+)).bind({});
 
 Common.argTypes = { ...argTypes };
 delete Common.argTypes.children;
@@ -257,8 +267,11 @@ Common.parameters = {
 };
 
 const Colors = MultiTemplate<MeetingRowContentProps>((args: MeetingRowContentProps) => {
-
-  return <div style={{position:'relative'}} ><MeetingRowContent {...args} /></div>;
+  return (
+    <div style={{ position: 'relative' }}>
+      <MeetingRowContent {...args} />
+    </div>
+  );
 }).bind({});
 
 Colors.argTypes = { ...argTypes };

src/components/MeetingRowContent/MeetingRowContent.style.scss

@@ -1,88 +1,88 @@
 .md-meeting-row-content-start-section {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    &.md-meeting-row-content-start-section-no-image {
-      margin-right: 0 !important;
-    }
+  &.md-meeting-row-content-start-section-no-image {
+    margin-right: 0 !important;
+  }
 
-    .md-meeting-row-content-border {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 0.3rem;
-      border-radius: 0.5rem 0 0 0.5rem;
-      margin-right: 0.5rem;
+  .md-meeting-row-content-border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0.3rem;
+    border-radius: 0.5rem 0 0 0.5rem;
+    margin-right: 0.5rem;
 
-      &[data-color='AcceptedActive'] {
-        background-color: var(--mds-color-theme-button-join-normal);
-      }
+    &[data-color='AcceptedActive'] {
+      background-color: var(--mds-color-theme-button-join-normal);
+    }
 
-      &[data-color='AcceptedInactive'] {
-        background-color: var(--mds-color-theme-background-secondary-active);
-      }
+    &[data-color='AcceptedInactive'] {
+      background-color: var(--mds-color-theme-background-secondary-active);
+    }
 
-      &[data-color='TentativeActive'] {
-        background: webkit-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-button-join-normal) 7%,
-          var(--mds-color-theme-button-join-normal) 14%
-        );
-        background: -o-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-button-join-normal) 7%,
-          var(--mds-color-theme-button-join-normal) 14%
-        );
-        background: repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-button-join-normal) 7%,
-          var(--mds-color-theme-button-join-normal) 14%
-        );
-      }
+    &[data-color='TentativeActive'] {
+      background: webkit-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-button-join-normal) 7%,
+        var(--mds-color-theme-button-join-normal) 14%
+      );
+      background: -o-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-button-join-normal) 7%,
+        var(--mds-color-theme-button-join-normal) 14%
+      );
+      background: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-button-join-normal) 7%,
+        var(--mds-color-theme-button-join-normal) 14%
+      );
+    }
 
-      &[data-color='TentativeInactive'] {
-        background: webkit-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-background-secondary-active) 7%,
-          var(--mds-color-theme-background-secondary-active) 14%
-        );
-        background: -o-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-background-secondary-active) 7%,
-          var(--mds-color-theme-background-secondary-active) 14%
-        );
-        background: repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-background-secondary-active) 7%,
-          var(--mds-color-theme-background-secondary-active) 14%
-        );
-      }
-    }   
+    &[data-color='TentativeInactive'] {
+      background: webkit-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-background-secondary-active) 7%,
+        var(--mds-color-theme-background-secondary-active) 14%
+      );
+      background: -o-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-background-secondary-active) 7%,
+        var(--mds-color-theme-background-secondary-active) 14%
+      );
+      background: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-background-secondary-active) 7%,
+        var(--mds-color-theme-background-secondary-active) 14%
+      );
+    }
+  }
 }
 
 .md-meeting-row-content-middle-section {
-    .md-text-wrapper:first-of-type {
-        margin-bottom: -0.25rem;
-    }
+  .md-text-wrapper:first-of-type {
+    margin-bottom: -0.25rem;
+  }
 }
 
 .md-meeting-row-content-end-section {
-    .md-button-group-wrapper > .md-icon-wrapper > svg {
-        path {
-        fill: var(--mds-color-theme-text-secondary-normal);
-        }
+  .md-button-group-wrapper > .md-icon-wrapper > svg {
+    path {
+      fill: var(--mds-color-theme-text-secondary-normal);
     }
-}
+  }
+}