@arbor-education/design-system.components 0.3.6 → 0.4.1

package/src/components/userDropdown/userDropdown.scss

@@ -0,0 +1,377 @@
+// ========== Trigger Divider ==========
+.ds-user-dropdown__trigger-divider {
+  width: 1px;
+  height: 24px;
+}
+
+// ========== Trigger Container ==========
+.ds-user-dropdown__trigger-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  padding: var(--spacing-xsmall);
+  border: 1px solid;
+  border-radius: var(--border-radius-round);
+
+  &--with-logo {
+    padding-right: var(--spacing-medium);
+  }
+
+  // Dark variant (default)
+  &--dark {
+    background-color: var(--color-grey-900);
+    border-color: var(--color-grey-700);
+
+    .ds-avatar {
+      border-color: var(--color-grey-700);
+    }
+
+    .ds-user-dropdown__trigger-divider {
+      background-color: var(--color-grey-700);
+    }
+
+    .ds-user-dropdown__trigger:hover,
+    .ds-user-dropdown__trigger:focus-visible,
+    .ds-user-dropdown__trigger[data-state="open"] {
+      background-color: var(--color-grey-800);
+    }
+
+    .ds-icon {
+      color: var(--color-mono-white);
+    }
+  }
+
+  // Light variant
+  &--light {
+    background-color: var(--color-mono-white);
+    border-color: var(--color-grey-100);
+
+    .ds-avatar {
+      border-color: var(--color-grey-100);
+    }
+
+    .ds-user-dropdown__trigger-divider {
+      background-color: var(--color-grey-100);
+    }
+
+    .ds-user-dropdown__trigger:hover,
+    .ds-user-dropdown__trigger:focus-visible,
+    .ds-user-dropdown__trigger[data-state="open"] {
+      background-color: var(--color-grey-050);
+    }
+
+    .ds-icon {
+      color: var(--color-grey-700);
+    }
+  }
+}
+
+// ========== Trigger Button ==========
+// Higher specificity (0,3,0) to override Button component defaults without !important
+.ds-user-dropdown__trigger-container .ds-button.ds-user-dropdown__trigger {
+  background-color: transparent;
+  border-radius: var(--border-radius-round);
+  padding-right: var(--spacing-xsmall);
+  padding-left: 0;
+  border: none;
+
+  &:focus-visible,
+  &[data-state="open"] {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: 0;
+    border: none;
+  }
+}
+
+.ds-user-dropdown__trigger-logo {
+  max-height: 32px;
+  max-width: 54px;
+  height: auto;
+  width: auto;
+  border-radius: var(--border-radius-small);
+}
+
+// ========== Content ==========
+.ds-user-dropdown__content {
+  width: 304px;
+  padding: var(--spacing-large);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+// ========== User Info ==========
+.ds-user-dropdown__user-info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+    outline: none;
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__user-info-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ds-user-dropdown__user-info-name {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__user-info-role {
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__user-info-chevron {
+  color: var(--color-grey-700);
+  flex-shrink: 0;
+}
+
+// ========== User Info Sub-menu ==========
+.ds-user-dropdown__sub-content {
+  min-width: 180px;
+  padding: var(--spacing-small);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color: var(--color-mono-white);
+  border: 1px solid var(--color-grey-200);
+  border-radius: var(--border-radius-small);
+  box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
+}
+
+.ds-user-dropdown__sub-item {
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  cursor: pointer;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+    outline: none;
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+// ========== Divider ==========
+.ds-user-dropdown__divider {
+  height: 1px;
+  flex-shrink: 0;
+  background-color: var(--color-grey-200);
+}
+
+// ========== Section ==========
+.ds-user-dropdown__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__section-label {
+  padding: var(--spacing-small);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+}
+
+// ========== App Item ==========
+.ds-user-dropdown__app-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__app-item-logo {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--border-radius-xsmall);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.ds-user-dropdown__app-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ds-user-dropdown__app-item-arrow {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-xsmall);
+  border-radius: 99px;
+  background-color: var(--color-brand-050);
+  color: var(--color-brand-500);
+
+  .ds-user-dropdown__collapsible-section-content .ds-user-dropdown__app-item:hover &,
+  .ds-user-dropdown__collapsible-section-content .ds-user-dropdown__app-item[data-highlighted] & {
+    display: flex;
+  }
+}
+
+.ds-user-dropdown__app-item-name {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__app-item-description {
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ========== Collapsible Section ==========
+.ds-user-dropdown__collapsible-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__collapsible-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--color-grey-050);
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__collapsible-section-label {
+  flex: 1;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+}
+
+.ds-user-dropdown__collapsible-section-icon {
+  color: var(--color-grey-700);
+  flex-shrink: 0;
+}
+
+.ds-user-dropdown__collapsible-section-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+// ========== Sign Out ==========
+.ds-user-dropdown__sign-out {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__sign-out-label {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+}

package/src/global.scss

@@ -24,5 +24,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  font-family: var(--font-family-standard);
+}
+
+body {
+  *[class^='ds-'], *[class*=' ds-'] {
+    font-family: var(--font-family-standard);
+    font-size: var(--type-body-p-size);
+    font-weight: var(--font-weight-regular);
+    box-sizing: border-box;
+  }
 }

package/src/index.scss

@@ -28,7 +28,10 @@
 @use "components/modal/modal.scss";
 @use "components/modal/modalManager/modalManager.scss";
 @use "components/table/columnFilters/columnFilters.scss";
+@use "components/banner/banner.scss";
 @use "components/editableText/editableText.scss";
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
+@use "components/avatar/avatar.scss";
+@use "components/userDropdown/userDropdown.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -26,6 +26,11 @@ export { Modal } from 'Components/modal/Modal';
 export { ModalManager } from 'Components/modal/modalManager/ModalManager';
 export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { Banner, type BannerProps, BANNER_LEVEL } from 'Components/banner/Banner';
 export { EditableText } from 'Components/editableText/EditableText';
 export { Progress } from 'Components/progress/Progress';
 export { Toast } from 'Components/toast/Toast';
+export { Avatar } from 'Components/avatar/Avatar';
+export { UserDropdown } from 'Components/userDropdown/UserDropdown';
+export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';
+export { ArborLogo, GovhubLogo, KeyLogo, SampeopleLogo, RobinLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';

package/tsconfig.json

@@ -48,6 +48,6 @@
       "Utils/*": ["./src/utils/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.test.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.test.tsx", "vite-env.d.ts"],
   "exclude": ["src/**/*.story.tsx"]
 }

package/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.webp' {
+  const value: string;
+  export default value;
+}