Feat notificacoes

.storybook/docs/storyDocs.tsx

@@ -218,6 +218,7 @@ type StorySandboxExampleProps = {
   code: string
   notes?: string[]
   children: ReactNode
+  allowOverflow?: boolean
 }
 
 type StoryPreviewCardProps = {
@@ -312,11 +313,12 @@ export function StorySandboxExample({
   code,
   notes,
   children,
+  allowOverflow = false,
 }: StorySandboxExampleProps) {
   const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview')
 
   return (
-    <div style={storyDocsStyles.sandbox}>
+    <div style={{ ...storyDocsStyles.sandbox, overflow: allowOverflow ? 'visible' : 'hidden' }}>
       <div style={storyDocsStyles.sandboxHeader}>
         <div style={{ display: 'grid', gap: 6 }}>
           <strong style={{ color: '#0f172a', fontSize: 16 }}>{title}</strong>

src/components/Notification/Notification.scss

@@ -0,0 +1,346 @@
+.govrs-notification {
+  position: relative;
+  display: inline-block;
+}
+
+/* Painel ancorado no botão */
+.govrs-notification__modal {
+  position: absolute;
+  top: calc(100% + var(--govrs-space-2, 0.5rem));
+  z-index: var(--govrs-z-popover, 1200);
+  width: 400px;
+  border: none;
+  border-radius: 0;
+  background-color: var(--govrs-color-background, #ffffff);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.govrs-notification__modal--left {
+  left: 0;
+  right: auto;
+}
+
+.govrs-notification__modal--right {
+  left: auto;
+  right: 0;
+}
+
+/* Em previews da documentação, abre para cima para evitar recorte no card do exemplo. */
+.govrs-notification--docs-inline .govrs-notification__modal {
+  position: static;
+  width: min(32rem, 100%);
+  margin-top: var(--govrs-space-3, 0.75rem);
+  z-index: 9999;
+}
+
+/* Container interno */
+.govrs-notification__container {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  position: relative;
+}
+
+/* Botão fechar */
+.govrs-notification__close-button {
+  position: absolute;
+  top: 0.875rem;
+  right: 0.875rem;
+  background: none;
+  border: none;
+  font-size: 1.125rem;
+  color: var(--govrs-color-brand-primary, #1a7235);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+  transition: all var(--govrs-duration-fast, 0.2s) var(--govrs-easing-standard, ease);
+  z-index: 2;
+
+  &:hover {
+    background-color: transparent;
+    color: var(--govrs-color-brand-primary-dark, #155d2b);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--govrs-color-focus, #ffcd07);
+    outline-offset: 2px;
+  }
+}
+
+/* Área do usuário */
+.govrs-notification__user-area {
+  padding: 1rem 1rem 0.875rem;
+  border-bottom: 1px solid var(--govrs-color-border-divider, #e5e5e5);
+  flex-shrink: 0;
+}
+
+.govrs-notification__user-area--with-close {
+  padding-right: 2.75rem;
+}
+
+.govrs-notification__user-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--govrs-space-1, 0.25rem);
+}
+
+.govrs-notification__user-name {
+  margin: 0;
+  font-size: var(--govrs-font-size-body-md, 1rem);
+  color: var(--govrs-color-text-default, #222222);
+  line-height: 1.3;
+}
+
+.govrs-notification__user-email {
+  margin: 0;
+  font-size: var(--govrs-font-size-body-sm, 0.875rem);
+  color: var(--govrs-color-brand-primary, #1a7235);
+  line-height: 1.4;
+}
+
+/* Tabs */
+.govrs-notification__tabs {
+  border-bottom: 1px solid var(--govrs-color-border-divider, #e5e5e5);
+  flex-shrink: 0;
+  overflow-x: auto;
+  background: var(--govrs-color-background-secondary, #f5f5f5);
+}
+
+.govrs-notification__tabs--with-close {
+  padding-top: 2.125rem;
+}
+
+.govrs-notification__tab-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0 0.25rem;
+  gap: 0;
+}
+
+.govrs-notification__tab {
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.875rem 0.5rem 0.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: var(--govrs-font-size-body-lg, 1rem);
+  font-weight: var(--govrs-font-weight-regular, 400);
+  color: var(--govrs-color-text-default, #222222);
+  border-bottom: 4px solid transparent;
+  transition: all var(--govrs-duration-fast, 0.2s) var(--govrs-easing-standard, ease);
+  position: relative;
+  white-space: nowrap;
+  flex-shrink: 1;
+
+  &:hover {
+    color: var(--govrs-color-text-default, #1a1a1a);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--govrs-color-focus, #ffcd07);
+    outline-offset: -5px;
+  }
+
+  &--active {
+    color: var(--govrs-color-brand-primary, #1a7235);
+    border-bottom-color: var(--govrs-color-brand-primary, #1a7235);
+    font-weight: var(--govrs-font-weight-medium, 500);
+  }
+
+  &--icon-only {
+    padding: 0.875rem 0.5rem 0.75rem;
+  }
+}
+
+.govrs-notification__tab-icon {
+  margin-right: 0;
+}
+
+/* Conteúdo principal */
+.govrs-notification__content {
+  overflow: visible;
+  padding: 0;
+}
+
+.govrs-notification__content--with-close {
+  padding-top: 2.5rem;
+}
+
+/* Lista de notificações */
+.govrs-notification__items {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Item de notificação */
+.govrs-notification__item {
+  padding: 1rem;
+  border: 0;
+  border-bottom: 1px solid var(--govrs-color-border-divider, #d9d9d9);
+  border-radius: 0;
+  background-color: var(--govrs-color-background, #ffffff);
+  cursor: pointer;
+  transition: all var(--govrs-duration-fast, 0.2s) var(--govrs-easing-standard, ease);
+
+  &:hover {
+    background-color: var(--govrs-color-background-secondary, #f3f3f3);
+  }
+
+  &:active {
+    background-color: #adadad;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--govrs-color-focus, #ffcd07);
+    outline-offset: 2px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+/* Header do item */
+.govrs-notification__item-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.1875rem;
+  margin-bottom: 0.625rem;
+}
+
+/* Título do item */
+.govrs-notification__item-title {
+  margin: 0;
+  font-size: var(--govrs-font-size-body-md, 1rem);
+  font-weight: var(--govrs-font-weight-regular, 400);
+  color: var(--govrs-color-text-default, #222222);
+  line-height: 1.35;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.govrs-notification__item-new-indicator {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: #ffd100;
+  flex-shrink: 0;
+}
+
+/* Tempo/Data */
+.govrs-notification__item-time {
+  font-size: var(--govrs-font-size-12, 0.75rem);
+  color: #333;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Descrição do item */
+.govrs-notification__item-description {
+  margin: 0;
+  font-size: var(--govrs-font-size-body-sm, 0.875rem);
+  color: var(--govrs-color-text-default, #222222);
+  line-height: 1.4;
+}
+
+/* Estado vazio */
+.govrs-notification__empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: var(--govrs-color-text-secondary, #666666);
+  font-size: var(--govrs-font-size-body-md, 1rem);
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+  .govrs-notification__modal {
+    position: fixed;
+    top: auto;
+    right: var(--govrs-space-4, 1rem);
+    left: var(--govrs-space-4, 1rem);
+    bottom: var(--govrs-space-4, 1rem);
+    width: auto;
+  }
+
+  .govrs-notification__modal--left,
+  .govrs-notification__modal--right {
+    left: var(--govrs-space-4, 1rem);
+    right: var(--govrs-space-4, 1rem);
+  }
+
+  .govrs-notification--docs-inline .govrs-notification__modal {
+    position: static;
+    width: min(32rem, 100%);
+    max-height: none;
+    margin-top: var(--govrs-space-3, 0.75rem);
+    left: auto;
+    right: auto;
+    bottom: auto;
+    top: auto;
+  }
+
+  .govrs-notification__tab {
+    font-size: 1rem;
+    padding: 0.75rem 0.375rem 0.625rem;
+  }
+
+  .govrs-notification__item {
+    padding: 0.875rem;
+  }
+
+  .govrs-notification__item-title {
+    font-size: 1.125rem;
+  }
+
+  .govrs-notification__item-time,
+  .govrs-notification__item-description,
+  .govrs-notification__user-email {
+    font-size: 0.875rem;
+  }
+
+  .govrs-notification__user-name {
+    font-size: 1.125rem;
+  }
+}