@agentero/design-system 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mcp/manifests/components.html +578 -19
- package/mcp/manifests/components.json +1 -1
- package/package.json +5 -1
- package/src/alert/alert.d.ts +248 -0
- package/src/alert/alert.js +311 -0
- package/src/alert/icons.d.ts +39 -0
- package/src/alert/icons.js +53 -0
- package/src/alert/index.d.ts +1 -0
- package/src/alert/index.js +2 -0
- package/src/avatar/avatar.js +18 -18
- package/src/button/button.js +6 -6
|
@@ -576,7 +576,7 @@
|
|
|
576
576
|
<header>
|
|
577
577
|
<div class="wrap">
|
|
578
578
|
<h1>Manifest Debugger</h1>
|
|
579
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
579
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">5 components ok</span><span class="filter-pill ok" aria-disabled="true">67 stories ok</span></div>
|
|
580
580
|
</div>
|
|
581
581
|
</header>
|
|
582
582
|
<main>
|
|
@@ -587,6 +587,565 @@
|
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
589
589
|
|
|
590
|
+
<article
|
|
591
|
+
class="card
|
|
592
|
+
no-error
|
|
593
|
+
no-info
|
|
594
|
+
no-story-error
|
|
595
|
+
no-doc-error"
|
|
596
|
+
role="listitem"
|
|
597
|
+
aria-label="Alert">
|
|
598
|
+
<div class="head">
|
|
599
|
+
<div class="title">
|
|
600
|
+
<h2><span class="status-dot dot-ok"></span> Alert</h2>
|
|
601
|
+
<div class="badges">
|
|
602
|
+
<label for="c-0-design-system-feedback-alert-props" class="badge ok as-toggle">6 prop types</label>
|
|
603
|
+
|
|
604
|
+
<label for="c-0-design-system-feedback-alert-stories" class="badge ok as-toggle">23 stories</label>
|
|
605
|
+
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
<div class="meta" title="./src/alert/alert.stories.tsx">design-system-feedback-alert · ./src/alert/alert.stories.tsx</div>
|
|
609
|
+
|
|
610
|
+
<div class="hint">Alert surfaces feedback about outcomes or state changes — success, danger, warning, or info. Compose it from `Alert.Content`, `Alert.Title`, `Alert.Paragraph`, `Alert.Actions`, and `Alert.Button` to build the layout your flow needs. Eight colors, two sizes, and a ghost mode cover most feedback scenarios.</div>
|
|
611
|
+
|
|
612
|
+
</div>
|
|
613
|
+
|
|
614
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
<input id="c-0-design-system-feedback-alert-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
618
|
+
|
|
619
|
+
<input id="c-0-design-system-feedback-alert-props" class="tg tg-props" type="checkbox" hidden />
|
|
620
|
+
|
|
621
|
+
<div class="panels">
|
|
622
|
+
|
|
623
|
+
|
|
624
|
+
|
|
625
|
+
<div class="panel panel-props">
|
|
626
|
+
<div class="note ok">
|
|
627
|
+
<div class="row">
|
|
628
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
629
|
+
<span class="badge ok">6 prop types</span>
|
|
630
|
+
</div>
|
|
631
|
+
<pre><code>Component: src/alert/alert.tsx::Alert</code></pre>
|
|
632
|
+
<pre><code>Props:</code></pre>
|
|
633
|
+
<pre><code>/**
|
|
634
|
+
* Semantic color. Defaults to `'neutral'`.
|
|
635
|
+
* - `neutral` — generic info; no strong signal.
|
|
636
|
+
* - `success` — positive confirmation.
|
|
637
|
+
* - `danger` — error or destructive outcome.
|
|
638
|
+
* - `warning` — caution; user attention needed.
|
|
639
|
+
* - `info` — informational highlight.
|
|
640
|
+
* - `creative`, `dynamic`, `playful` — brand-aligned accents.
|
|
641
|
+
*/
|
|
642
|
+
color?: "neutral" | "success" | "danger" | "warning" | "info" | "creative" | "dynamic" | "playful" = neutral
|
|
643
|
+
|
|
644
|
+
/**
|
|
645
|
+
* When `true`, removes background and padding so the alert blends inline
|
|
646
|
+
* with surrounding text (e.g., inline form field errors). Colors switch
|
|
647
|
+
* to the ghost token ramp for lower visual weight.
|
|
648
|
+
*/
|
|
649
|
+
ghost?: boolean = false
|
|
650
|
+
|
|
651
|
+
/**
|
|
652
|
+
* When `true` (default), renders the built-in icon for the current `color`. Set to `false` to omit the icon entirely.
|
|
653
|
+
*/
|
|
654
|
+
hasIcon?: boolean = true
|
|
655
|
+
|
|
656
|
+
/**
|
|
657
|
+
* Overrides the default icon for the current `color`. Receives the slot-computed className so color tokens still apply.
|
|
658
|
+
*/
|
|
659
|
+
icon?: ComponentType<SVGProps<SVGSVGElement>>
|
|
660
|
+
|
|
661
|
+
/**
|
|
662
|
+
* Fires when the dismiss button is clicked. When provided, renders an `iconOnly` close button with `aria-label="Dismiss"`.
|
|
663
|
+
*/
|
|
664
|
+
onDismiss?: (() => void)
|
|
665
|
+
|
|
666
|
+
/**
|
|
667
|
+
* Size treatment. Defaults to `'sm'`.
|
|
668
|
+
* - `sm` — compact inline alerts (1rem padding, 14/12px typography).
|
|
669
|
+
* - `md` — prominent standalone alerts (2rem padding, 18/14px typography).
|
|
670
|
+
*/
|
|
671
|
+
size?: AlertSizeType = sm</code></pre>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
|
|
675
|
+
<div class="panel panel-stories">
|
|
676
|
+
|
|
677
|
+
|
|
678
|
+
|
|
679
|
+
<div class="note ok">
|
|
680
|
+
<div class="row">
|
|
681
|
+
<span class="ex-name">Imports</span>
|
|
682
|
+
</div>
|
|
683
|
+
<pre><code>import { Alert } from "@agentero/design-system";</code></pre>
|
|
684
|
+
</div>
|
|
685
|
+
|
|
686
|
+
|
|
687
|
+
<div class="note ok">
|
|
688
|
+
<div class="row">
|
|
689
|
+
<span class="ex-name">Default</span>
|
|
690
|
+
<span class="badge ok">story ok</span>
|
|
691
|
+
</div>
|
|
692
|
+
<div>Default args playground for Alert</div>
|
|
693
|
+
<div class="hint">Args-controlled playground. Toggle `color`, `size`, `ghost`, `hasIcon`, and `onDismiss` from the Controls panel to explore every visual combination.</div>
|
|
694
|
+
<pre><code>const Default = () => <Alert
|
|
695
|
+
color="neutral"
|
|
696
|
+
size="sm"
|
|
697
|
+
ghost={false}
|
|
698
|
+
hasIcon
|
|
699
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
700
|
+
<Alert.Content>
|
|
701
|
+
<Alert.Title>Title</Alert.Title>
|
|
702
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
703
|
+
</Alert.Content>
|
|
704
|
+
</Alert>;</code></pre>
|
|
705
|
+
</div>
|
|
706
|
+
<div class="note ok">
|
|
707
|
+
<div class="row">
|
|
708
|
+
<span class="ex-name">Neutral</span>
|
|
709
|
+
<span class="badge ok">story ok</span>
|
|
710
|
+
</div>
|
|
711
|
+
<div>Neutral color (default)</div>
|
|
712
|
+
<div class="hint">Neutral color is the default and carries no strong semantic signal — use it for generic inline information.</div>
|
|
713
|
+
<pre><code>const Neutral = () => <Alert
|
|
714
|
+
color="neutral"
|
|
715
|
+
size="sm"
|
|
716
|
+
ghost={false}
|
|
717
|
+
hasIcon
|
|
718
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
719
|
+
<Alert.Content>
|
|
720
|
+
<Alert.Title>Title</Alert.Title>
|
|
721
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
722
|
+
</Alert.Content>
|
|
723
|
+
</Alert>;</code></pre>
|
|
724
|
+
</div>
|
|
725
|
+
<div class="note ok">
|
|
726
|
+
<div class="row">
|
|
727
|
+
<span class="ex-name">Success</span>
|
|
728
|
+
<span class="badge ok">story ok</span>
|
|
729
|
+
</div>
|
|
730
|
+
<div>Success color for positive outcomes</div>
|
|
731
|
+
<div class="hint">Success color confirms a positive outcome — saved record, completed task, healthy state.</div>
|
|
732
|
+
<pre><code>const Success = () => <Alert
|
|
733
|
+
color="success"
|
|
734
|
+
size="sm"
|
|
735
|
+
ghost={false}
|
|
736
|
+
hasIcon
|
|
737
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
738
|
+
<Alert.Content>
|
|
739
|
+
<Alert.Title>Title</Alert.Title>
|
|
740
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
741
|
+
</Alert.Content>
|
|
742
|
+
</Alert>;</code></pre>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="note ok">
|
|
745
|
+
<div class="row">
|
|
746
|
+
<span class="ex-name">Danger</span>
|
|
747
|
+
<span class="badge ok">story ok</span>
|
|
748
|
+
</div>
|
|
749
|
+
<div>Danger color for errors and destructive outcomes</div>
|
|
750
|
+
<div class="hint">Danger color flags errors and destructive outcomes that require the user's attention.</div>
|
|
751
|
+
<pre><code>const Danger = () => <Alert
|
|
752
|
+
color="danger"
|
|
753
|
+
size="sm"
|
|
754
|
+
ghost={false}
|
|
755
|
+
hasIcon
|
|
756
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
757
|
+
<Alert.Content>
|
|
758
|
+
<Alert.Title>Title</Alert.Title>
|
|
759
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
760
|
+
</Alert.Content>
|
|
761
|
+
</Alert>;</code></pre>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="note ok">
|
|
764
|
+
<div class="row">
|
|
765
|
+
<span class="ex-name">Warning</span>
|
|
766
|
+
<span class="badge ok">story ok</span>
|
|
767
|
+
</div>
|
|
768
|
+
<div>Warning color for cautionary feedback</div>
|
|
769
|
+
<div class="hint">Warning color signals caution — the user should review before proceeding.</div>
|
|
770
|
+
<pre><code>const Warning = () => <Alert
|
|
771
|
+
color="warning"
|
|
772
|
+
size="sm"
|
|
773
|
+
ghost={false}
|
|
774
|
+
hasIcon
|
|
775
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
776
|
+
<Alert.Content>
|
|
777
|
+
<Alert.Title>Title</Alert.Title>
|
|
778
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
779
|
+
</Alert.Content>
|
|
780
|
+
</Alert>;</code></pre>
|
|
781
|
+
</div>
|
|
782
|
+
<div class="note ok">
|
|
783
|
+
<div class="row">
|
|
784
|
+
<span class="ex-name">Info</span>
|
|
785
|
+
<span class="badge ok">story ok</span>
|
|
786
|
+
</div>
|
|
787
|
+
<div>Info color for informational highlights</div>
|
|
788
|
+
<div class="hint">Info color highlights tips, hints, or secondary informational content.</div>
|
|
789
|
+
<pre><code>const Info = () => <Alert
|
|
790
|
+
color="info"
|
|
791
|
+
size="sm"
|
|
792
|
+
ghost={false}
|
|
793
|
+
hasIcon
|
|
794
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
795
|
+
<Alert.Content>
|
|
796
|
+
<Alert.Title>Title</Alert.Title>
|
|
797
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
798
|
+
</Alert.Content>
|
|
799
|
+
</Alert>;</code></pre>
|
|
800
|
+
</div>
|
|
801
|
+
<div class="note ok">
|
|
802
|
+
<div class="row">
|
|
803
|
+
<span class="ex-name">Creative</span>
|
|
804
|
+
<span class="badge ok">story ok</span>
|
|
805
|
+
</div>
|
|
806
|
+
<div>Creative brand accent color</div>
|
|
807
|
+
<div class="hint">Creative color uses a brand-aligned purple accent for marketing or onboarding moments.</div>
|
|
808
|
+
<pre><code>const Creative = () => <Alert
|
|
809
|
+
color="creative"
|
|
810
|
+
size="sm"
|
|
811
|
+
ghost={false}
|
|
812
|
+
hasIcon
|
|
813
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
814
|
+
<Alert.Content>
|
|
815
|
+
<Alert.Title>Title</Alert.Title>
|
|
816
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
817
|
+
</Alert.Content>
|
|
818
|
+
</Alert>;</code></pre>
|
|
819
|
+
</div>
|
|
820
|
+
<div class="note ok">
|
|
821
|
+
<div class="row">
|
|
822
|
+
<span class="ex-name">Dynamic</span>
|
|
823
|
+
<span class="badge ok">story ok</span>
|
|
824
|
+
</div>
|
|
825
|
+
<div>Dynamic brand accent color</div>
|
|
826
|
+
<div class="hint">Dynamic color uses a brand-aligned orange accent for activity or momentum-focused content.</div>
|
|
827
|
+
<pre><code>const Dynamic = () => <Alert
|
|
828
|
+
color="dynamic"
|
|
829
|
+
size="sm"
|
|
830
|
+
ghost={false}
|
|
831
|
+
hasIcon
|
|
832
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
833
|
+
<Alert.Content>
|
|
834
|
+
<Alert.Title>Title</Alert.Title>
|
|
835
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
836
|
+
</Alert.Content>
|
|
837
|
+
</Alert>;</code></pre>
|
|
838
|
+
</div>
|
|
839
|
+
<div class="note ok">
|
|
840
|
+
<div class="row">
|
|
841
|
+
<span class="ex-name">Playful</span>
|
|
842
|
+
<span class="badge ok">story ok</span>
|
|
843
|
+
</div>
|
|
844
|
+
<div>Playful brand accent color</div>
|
|
845
|
+
<div class="hint">Playful color uses a brand-aligned pink accent for lighter or celebratory content.</div>
|
|
846
|
+
<pre><code>const Playful = () => <Alert
|
|
847
|
+
color="playful"
|
|
848
|
+
size="sm"
|
|
849
|
+
ghost={false}
|
|
850
|
+
hasIcon
|
|
851
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
852
|
+
<Alert.Content>
|
|
853
|
+
<Alert.Title>Title</Alert.Title>
|
|
854
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
855
|
+
</Alert.Content>
|
|
856
|
+
</Alert>;</code></pre>
|
|
857
|
+
</div>
|
|
858
|
+
<div class="note ok">
|
|
859
|
+
<div class="row">
|
|
860
|
+
<span class="ex-name">Ghost</span>
|
|
861
|
+
<span class="badge ok">story ok</span>
|
|
862
|
+
</div>
|
|
863
|
+
<div>Ghost mode for inline, low-emphasis alerts</div>
|
|
864
|
+
<div class="hint">Ghost mode removes the background and padding so the alert blends inline with surrounding text (e.g., form field errors). Colors switch to the ghost token ramp for lower visual weight.</div>
|
|
865
|
+
<pre><code>const Ghost = () => <Alert
|
|
866
|
+
color="danger"
|
|
867
|
+
size="sm"
|
|
868
|
+
ghost
|
|
869
|
+
hasIcon
|
|
870
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
871
|
+
<Alert.Content>
|
|
872
|
+
<Alert.Title>Title</Alert.Title>
|
|
873
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
874
|
+
</Alert.Content>
|
|
875
|
+
</Alert>;</code></pre>
|
|
876
|
+
</div>
|
|
877
|
+
<div class="note ok">
|
|
878
|
+
<div class="row">
|
|
879
|
+
<span class="ex-name">Small Size</span>
|
|
880
|
+
<span class="badge ok">story ok</span>
|
|
881
|
+
</div>
|
|
882
|
+
<div>Small size (default, compact)</div>
|
|
883
|
+
<div class="hint">Small size (default) uses compact padding and 14/12px typography — suitable for inline alerts inside forms, tables, or cards.</div>
|
|
884
|
+
<pre><code>const SmallSize = () => <Alert
|
|
885
|
+
color="neutral"
|
|
886
|
+
size="sm"
|
|
887
|
+
ghost={false}
|
|
888
|
+
hasIcon
|
|
889
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
890
|
+
<Alert.Content>
|
|
891
|
+
<Alert.Title>Title</Alert.Title>
|
|
892
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
893
|
+
</Alert.Content>
|
|
894
|
+
</Alert>;</code></pre>
|
|
895
|
+
</div>
|
|
896
|
+
<div class="note ok">
|
|
897
|
+
<div class="row">
|
|
898
|
+
<span class="ex-name">Medium Size</span>
|
|
899
|
+
<span class="badge ok">story ok</span>
|
|
900
|
+
</div>
|
|
901
|
+
<div>Medium size (prominent, standalone)</div>
|
|
902
|
+
<div class="hint">Medium size uses larger padding and 18/14px typography — suitable for standalone alerts in empty states, modals, or dedicated feedback regions.</div>
|
|
903
|
+
<pre><code>const MediumSize = () => <Alert
|
|
904
|
+
color="neutral"
|
|
905
|
+
size="md"
|
|
906
|
+
ghost={false}
|
|
907
|
+
hasIcon
|
|
908
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
909
|
+
<Alert.Content>
|
|
910
|
+
<Alert.Title>Title</Alert.Title>
|
|
911
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
912
|
+
</Alert.Content>
|
|
913
|
+
</Alert>;</code></pre>
|
|
914
|
+
</div>
|
|
915
|
+
<div class="note ok">
|
|
916
|
+
<div class="row">
|
|
917
|
+
<span class="ex-name">With Dismiss</span>
|
|
918
|
+
<span class="badge ok">story ok</span>
|
|
919
|
+
</div>
|
|
920
|
+
<div>Alert with a dismiss button</div>
|
|
921
|
+
<div class="hint">Dismissible alert. Providing `onDismiss` shows an icon-only close button with `aria-label="Dismiss"` that inherits the alert's color.</div>
|
|
922
|
+
<pre><code>const WithDismiss = () => <Alert
|
|
923
|
+
color="warning"
|
|
924
|
+
size="sm"
|
|
925
|
+
ghost={false}
|
|
926
|
+
hasIcon
|
|
927
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
928
|
+
<Alert.Content>
|
|
929
|
+
<Alert.Title>Title</Alert.Title>
|
|
930
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
931
|
+
</Alert.Content>
|
|
932
|
+
</Alert>;</code></pre>
|
|
933
|
+
</div>
|
|
934
|
+
<div class="note ok">
|
|
935
|
+
<div class="row">
|
|
936
|
+
<span class="ex-name">With Actions</span>
|
|
937
|
+
<span class="badge ok">story ok</span>
|
|
938
|
+
</div>
|
|
939
|
+
<div>Alert with a trailing action button</div>
|
|
940
|
+
<div class="hint">Alert with a trailing action pinned to the right edge. Use `Alert.Actions` + `Alert.Button` for the common "message + action" pattern.</div>
|
|
941
|
+
<pre><code>const WithActions = () => <Alert
|
|
942
|
+
color="info"
|
|
943
|
+
size="sm"
|
|
944
|
+
ghost={false}
|
|
945
|
+
hasIcon
|
|
946
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
947
|
+
<Alert.Content>
|
|
948
|
+
<Alert.Title>Update available</Alert.Title>
|
|
949
|
+
<Alert.Paragraph>Reload to apply the latest version.</Alert.Paragraph>
|
|
950
|
+
</Alert.Content>
|
|
951
|
+
<Alert.Actions>
|
|
952
|
+
<Alert.Button onClick={() => {}}>Reload</Alert.Button>
|
|
953
|
+
</Alert.Actions>
|
|
954
|
+
</Alert>;</code></pre>
|
|
955
|
+
</div>
|
|
956
|
+
<div class="note ok">
|
|
957
|
+
<div class="row">
|
|
958
|
+
<span class="ex-name">With Dismiss And Action</span>
|
|
959
|
+
<span class="badge ok">story ok</span>
|
|
960
|
+
</div>
|
|
961
|
+
<div>Alert with both dismiss and action</div>
|
|
962
|
+
<div class="hint">Alert combining a dismiss button with a trailing action. Dismiss is pinned to the right edge after the actions.</div>
|
|
963
|
+
<pre><code>const WithDismissAndAction = () => <Alert
|
|
964
|
+
color="warning"
|
|
965
|
+
size="md"
|
|
966
|
+
ghost={false}
|
|
967
|
+
hasIcon
|
|
968
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
969
|
+
<Alert.Content>
|
|
970
|
+
<Alert.Title>Session expiring</Alert.Title>
|
|
971
|
+
<Alert.Paragraph>Renew to continue editing.</Alert.Paragraph>
|
|
972
|
+
</Alert.Content>
|
|
973
|
+
<Alert.Actions>
|
|
974
|
+
<Alert.Button onClick={() => {}}>Renew session</Alert.Button>
|
|
975
|
+
</Alert.Actions>
|
|
976
|
+
</Alert>;</code></pre>
|
|
977
|
+
</div>
|
|
978
|
+
<div class="note ok">
|
|
979
|
+
<div class="row">
|
|
980
|
+
<span class="ex-name">Without Icon</span>
|
|
981
|
+
<span class="badge ok">story ok</span>
|
|
982
|
+
</div>
|
|
983
|
+
<div>Alert without the default icon</div>
|
|
984
|
+
<div class="hint">Alert rendered without the built-in color icon. Use `hasIcon={false}` when the surrounding context already conveys the semantic intent.</div>
|
|
985
|
+
<pre><code>const WithoutIcon = () => <Alert
|
|
986
|
+
color="info"
|
|
987
|
+
size="sm"
|
|
988
|
+
ghost={false}
|
|
989
|
+
hasIcon={false}
|
|
990
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
991
|
+
<Alert.Content>
|
|
992
|
+
<Alert.Title>Title</Alert.Title>
|
|
993
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
994
|
+
</Alert.Content>
|
|
995
|
+
</Alert>;</code></pre>
|
|
996
|
+
</div>
|
|
997
|
+
<div class="note ok">
|
|
998
|
+
<div class="row">
|
|
999
|
+
<span class="ex-name">With Custom Icon</span>
|
|
1000
|
+
<span class="badge ok">story ok</span>
|
|
1001
|
+
</div>
|
|
1002
|
+
<div>Alert with a custom icon override</div>
|
|
1003
|
+
<div class="hint">Alert with a caller-supplied icon that replaces the default color icon. The custom icon receives the slot-computed className so color tokens still apply.</div>
|
|
1004
|
+
<pre><code>const WithCustomIcon = () => <Alert
|
|
1005
|
+
color="creative"
|
|
1006
|
+
size="sm"
|
|
1007
|
+
ghost={false}
|
|
1008
|
+
hasIcon
|
|
1009
|
+
icon={IconLightbulb}
|
|
1010
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
1011
|
+
<Alert.Content>
|
|
1012
|
+
<Alert.Title>Title</Alert.Title>
|
|
1013
|
+
<Alert.Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert.Paragraph>
|
|
1014
|
+
</Alert.Content>
|
|
1015
|
+
</Alert>;</code></pre>
|
|
1016
|
+
</div>
|
|
1017
|
+
<div class="note ok">
|
|
1018
|
+
<div class="row">
|
|
1019
|
+
<span class="ex-name">With Paragraph Html</span>
|
|
1020
|
+
<span class="badge ok">story ok</span>
|
|
1021
|
+
</div>
|
|
1022
|
+
<div>Alert paragraph rendered from HTML</div>
|
|
1023
|
+
<div class="hint">Alert rendering a paragraph from pre-sanitized HTML via `Alert.ParagraphHtml`. The caller is responsible for sanitizing the HTML string before passing it in.</div>
|
|
1024
|
+
<pre><code>const WithParagraphHtml = () => <Alert
|
|
1025
|
+
color="success"
|
|
1026
|
+
size="sm"
|
|
1027
|
+
ghost={false}
|
|
1028
|
+
hasIcon
|
|
1029
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
1030
|
+
<Alert.Content>
|
|
1031
|
+
<Alert.Title>Formatted content</Alert.Title>
|
|
1032
|
+
<Alert.ParagraphHtml
|
|
1033
|
+
html="Review the <strong>terms</strong> or <a href='https://example.com'>read the docs</a>." />
|
|
1034
|
+
</Alert.Content>
|
|
1035
|
+
</Alert>;</code></pre>
|
|
1036
|
+
</div>
|
|
1037
|
+
<div class="note ok">
|
|
1038
|
+
<div class="row">
|
|
1039
|
+
<span class="ex-name">With Pictograms</span>
|
|
1040
|
+
<span class="badge ok">story ok</span>
|
|
1041
|
+
</div>
|
|
1042
|
+
<div>Alert with a pictogram illustration</div>
|
|
1043
|
+
<div class="hint">Alert with a 64×64 pictogram in place of the inline icon. Use `Alert.Pictograms` when the message benefits from a richer illustration.</div>
|
|
1044
|
+
<pre><code>const WithPictograms = () => <Alert
|
|
1045
|
+
color="info"
|
|
1046
|
+
size="md"
|
|
1047
|
+
ghost={false}
|
|
1048
|
+
hasIcon={false}
|
|
1049
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
1050
|
+
<Alert.Pictograms>
|
|
1051
|
+
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden>
|
|
1052
|
+
<circle cx="32" cy="32" r="28" fill="currentColor" opacity="0.15" />
|
|
1053
|
+
<circle cx="32" cy="32" r="14" fill="currentColor" />
|
|
1054
|
+
</svg>
|
|
1055
|
+
</Alert.Pictograms>
|
|
1056
|
+
<Alert.Content>
|
|
1057
|
+
<Alert.Title>Pictogram example</Alert.Title>
|
|
1058
|
+
<Alert.Paragraph>Pictograms scale to 64×64px regardless of the configured size.
|
|
1059
|
+
</Alert.Paragraph>
|
|
1060
|
+
</Alert.Content>
|
|
1061
|
+
</Alert>;</code></pre>
|
|
1062
|
+
</div>
|
|
1063
|
+
<div class="note ok">
|
|
1064
|
+
<div class="row">
|
|
1065
|
+
<span class="ex-name">Only Paragraph</span>
|
|
1066
|
+
<span class="badge ok">story ok</span>
|
|
1067
|
+
</div>
|
|
1068
|
+
<div>Alert with only a paragraph body</div>
|
|
1069
|
+
<div class="hint">Alert rendered with only a paragraph — no title. The root omits `aria-labelledby` since there is no title to reference.</div>
|
|
1070
|
+
<pre><code>const OnlyParagraph = () => <Alert
|
|
1071
|
+
color="neutral"
|
|
1072
|
+
size="sm"
|
|
1073
|
+
ghost={false}
|
|
1074
|
+
hasIcon
|
|
1075
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
1076
|
+
<Alert.Paragraph>This field is required.</Alert.Paragraph>
|
|
1077
|
+
</Alert>;</code></pre>
|
|
1078
|
+
</div>
|
|
1079
|
+
<div class="note ok">
|
|
1080
|
+
<div class="row">
|
|
1081
|
+
<span class="ex-name">With Actions Below</span>
|
|
1082
|
+
<span class="badge ok">story ok</span>
|
|
1083
|
+
</div>
|
|
1084
|
+
<div>Alert with actions placed below the content</div>
|
|
1085
|
+
<div class="hint">Action button rendered inline below the paragraphs, inside `Alert.Content`, rather than pinned to the right via `Alert.Actions`.</div>
|
|
1086
|
+
<pre><code>const WithActionsBelow = () => <Alert
|
|
1087
|
+
color="success"
|
|
1088
|
+
size="sm"
|
|
1089
|
+
ghost={false}
|
|
1090
|
+
hasIcon
|
|
1091
|
+
onDismiss={onDismiss ? () => {} : undefined}>
|
|
1092
|
+
<Alert.Content>
|
|
1093
|
+
<Alert.Title>Upload complete</Alert.Title>
|
|
1094
|
+
<Alert.Paragraph>12 documents were added to the policy.</Alert.Paragraph>
|
|
1095
|
+
<div>
|
|
1096
|
+
<Alert.Button onClick={() => {}}>View documents</Alert.Button>
|
|
1097
|
+
</div>
|
|
1098
|
+
</Alert.Content>
|
|
1099
|
+
</Alert>;</code></pre>
|
|
1100
|
+
</div>
|
|
1101
|
+
<div class="note ok">
|
|
1102
|
+
<div class="row">
|
|
1103
|
+
<span class="ex-name">All Colors</span>
|
|
1104
|
+
<span class="badge ok">story ok</span>
|
|
1105
|
+
</div>
|
|
1106
|
+
<div>Visual comparison of all Alert colors</div>
|
|
1107
|
+
<div class="hint">All eight colors in their primary (non-ghost) treatment, stacked for comparison. Each alert uses the built-in icon mapping for its color.</div>
|
|
1108
|
+
<pre><code>const AllColors = () => (
|
|
1109
|
+
<Stack>
|
|
1110
|
+
{COLORS.map(color => (
|
|
1111
|
+
<Alert key={color} color={color}>
|
|
1112
|
+
<Alert.Content>
|
|
1113
|
+
<Alert.Title>{color}</Alert.Title>
|
|
1114
|
+
<Alert.Paragraph>
|
|
1115
|
+
This is a {color} alert variant with the default icon.
|
|
1116
|
+
</Alert.Paragraph>
|
|
1117
|
+
</Alert.Content>
|
|
1118
|
+
</Alert>
|
|
1119
|
+
))}
|
|
1120
|
+
</Stack>
|
|
1121
|
+
);</code></pre>
|
|
1122
|
+
</div>
|
|
1123
|
+
<div class="note ok">
|
|
1124
|
+
<div class="row">
|
|
1125
|
+
<span class="ex-name">All Ghost Colors</span>
|
|
1126
|
+
<span class="badge ok">story ok</span>
|
|
1127
|
+
</div>
|
|
1128
|
+
<div>Visual comparison of all Alert colors in ghost mode</div>
|
|
1129
|
+
<div class="hint">All eight colors in ghost mode, stacked for comparison. Ghost alerts use a lower-weight token ramp and omit background + padding.</div>
|
|
1130
|
+
<pre><code>const AllGhostColors = () => (
|
|
1131
|
+
<Stack>
|
|
1132
|
+
{COLORS.map(color => (
|
|
1133
|
+
<Alert key={color} color={color} ghost>
|
|
1134
|
+
<Alert.Content>
|
|
1135
|
+
<Alert.Title>{color} (ghost)</Alert.Title>
|
|
1136
|
+
<Alert.Paragraph>
|
|
1137
|
+
This is a {color} ghost alert variant with the ghost icon color.
|
|
1138
|
+
</Alert.Paragraph>
|
|
1139
|
+
</Alert.Content>
|
|
1140
|
+
</Alert>
|
|
1141
|
+
))}
|
|
1142
|
+
</Stack>
|
|
1143
|
+
);</code></pre>
|
|
1144
|
+
</div>
|
|
1145
|
+
</div>
|
|
1146
|
+
|
|
1147
|
+
</div>
|
|
1148
|
+
</article>
|
|
590
1149
|
<article
|
|
591
1150
|
class="card
|
|
592
1151
|
no-error
|
|
@@ -599,9 +1158,9 @@
|
|
|
599
1158
|
<div class="title">
|
|
600
1159
|
<h2><span class="status-dot dot-ok"></span> Avatar</h2>
|
|
601
1160
|
<div class="badges">
|
|
602
|
-
<label for="c-
|
|
1161
|
+
<label for="c-1-components-avatar-props" class="badge ok as-toggle">7 prop types</label>
|
|
603
1162
|
|
|
604
|
-
<label for="c-
|
|
1163
|
+
<label for="c-1-components-avatar-stories" class="badge ok as-toggle">17 stories</label>
|
|
605
1164
|
|
|
606
1165
|
</div>
|
|
607
1166
|
</div>
|
|
@@ -614,9 +1173,9 @@
|
|
|
614
1173
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
615
1174
|
|
|
616
1175
|
|
|
617
|
-
<input id="c-
|
|
1176
|
+
<input id="c-1-components-avatar-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
618
1177
|
|
|
619
|
-
<input id="c-
|
|
1178
|
+
<input id="c-1-components-avatar-props" class="tg tg-props" type="checkbox" hidden />
|
|
620
1179
|
|
|
621
1180
|
<div class="panels">
|
|
622
1181
|
|
|
@@ -658,7 +1217,7 @@ fallback?: ReactNode
|
|
|
658
1217
|
* - `xl` (64px) — hero sections, prominent display
|
|
659
1218
|
* - `2xl` (80px), `3xl` (96px), `4xl` (128px) — large feature areas, profile pages
|
|
660
1219
|
*/
|
|
661
|
-
size?: "
|
|
1220
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
|
|
662
1221
|
|
|
663
1222
|
/**
|
|
664
1223
|
* Image URL to display. When unavailable or loading fails, `fallback` content is shown instead.
|
|
@@ -914,9 +1473,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
914
1473
|
<div class="title">
|
|
915
1474
|
<h2><span class="status-dot dot-ok"></span> Button</h2>
|
|
916
1475
|
<div class="badges">
|
|
917
|
-
<label for="c-
|
|
1476
|
+
<label for="c-2-components-button-props" class="badge ok as-toggle">12 prop types</label>
|
|
918
1477
|
|
|
919
|
-
<label for="c-
|
|
1478
|
+
<label for="c-2-components-button-stories" class="badge ok as-toggle">10 stories</label>
|
|
920
1479
|
|
|
921
1480
|
</div>
|
|
922
1481
|
</div>
|
|
@@ -929,9 +1488,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
929
1488
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
930
1489
|
|
|
931
1490
|
|
|
932
|
-
<input id="c-
|
|
1491
|
+
<input id="c-2-components-button-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
933
1492
|
|
|
934
|
-
<input id="c-
|
|
1493
|
+
<input id="c-2-components-button-props" class="tg tg-props" type="checkbox" hidden />
|
|
935
1494
|
|
|
936
1495
|
<div class="panels">
|
|
937
1496
|
|
|
@@ -1280,9 +1839,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1280
1839
|
<div class="title">
|
|
1281
1840
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
1282
1841
|
<div class="badges">
|
|
1283
|
-
<label for="c-
|
|
1842
|
+
<label for="c-3-components-divider-props" class="badge ok as-toggle">2 prop types</label>
|
|
1284
1843
|
|
|
1285
|
-
<label for="c-
|
|
1844
|
+
<label for="c-3-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
1286
1845
|
|
|
1287
1846
|
</div>
|
|
1288
1847
|
</div>
|
|
@@ -1295,9 +1854,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1295
1854
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1296
1855
|
|
|
1297
1856
|
|
|
1298
|
-
<input id="c-
|
|
1857
|
+
<input id="c-3-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1299
1858
|
|
|
1300
|
-
<input id="c-
|
|
1859
|
+
<input id="c-3-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
1301
1860
|
|
|
1302
1861
|
<div class="panels">
|
|
1303
1862
|
|
|
@@ -1575,9 +2134,9 @@ label?: ReactNode</code></pre>
|
|
|
1575
2134
|
<div class="title">
|
|
1576
2135
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
1577
2136
|
<div class="badges">
|
|
1578
|
-
<label for="c-
|
|
2137
|
+
<label for="c-4-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
1579
2138
|
|
|
1580
|
-
<label for="c-
|
|
2139
|
+
<label for="c-4-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
1581
2140
|
|
|
1582
2141
|
</div>
|
|
1583
2142
|
</div>
|
|
@@ -1590,9 +2149,9 @@ label?: ReactNode</code></pre>
|
|
|
1590
2149
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1591
2150
|
|
|
1592
2151
|
|
|
1593
|
-
<input id="c-
|
|
2152
|
+
<input id="c-4-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1594
2153
|
|
|
1595
|
-
<input id="c-
|
|
2154
|
+
<input id="c-4-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
1596
2155
|
|
|
1597
2156
|
<div class="panels">
|
|
1598
2157
|
|
|
@@ -1613,7 +2172,7 @@ label?: ReactNode</code></pre>
|
|
|
1613
2172
|
* - `md` (1.5em) — cards, panels, and standalone loading states
|
|
1614
2173
|
* - `lg` (2em) — page-level or section-level loading
|
|
1615
2174
|
*/
|
|
1616
|
-
size?: "
|
|
2175
|
+
size?: "sm" | "md" | "lg"</code></pre>
|
|
1617
2176
|
</div>
|
|
1618
2177
|
</div>
|
|
1619
2178
|
|