@primer/react 38.24.0 → 38.25.0-rc.89740d738
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/CHANGELOG.md +6 -0
- package/dist/Card/{Card-cec366f8.css → Card-d8a02dd9.css} +2 -2
- package/dist/Card/{Card-cec366f8.css.map → Card-d8a02dd9.css.map} +1 -1
- package/dist/Card/Card.d.ts +75 -39
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +260 -160
- package/dist/Card/Card.module.css.js +2 -2
- package/dist/Card/index.d.ts +16 -16
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/Card/index.js +2 -2
- package/dist/experimental/index.d.ts +1 -1
- package/dist/experimental/index.d.ts.map +1 -1
- package/generated/components.json +57 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
+
## 38.25.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#7852](https://github.com/primer/react/pull/7852) [`5504680`](https://github.com/primer/react/commit/5504680614bacc2ce3eecaaa55d10887e6fb152d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Card: Add `data-component` attributes to `Card` and its subcomponents (`Icon`, `Image`, `Heading`, `Description`, `Metadata`, `Menu`). Add an `as` prop (`'div' | 'section'`) so standalone Cards can render as a labelled region landmark; `as="section"` requires `aria-label` or `aria-labelledby`. `Card` now requires `children`. Also improves docs and stories.
|
|
8
|
+
|
|
3
9
|
## 38.24.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.prc-Card-Card-pYjuL{background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);display:grid;gap:var(--stack-gap-normal,1rem);grid-auto-rows:max-content auto;overflow:hidden;position:relative}.prc-Card-Card-pYjuL[data-border-radius=large]{border-radius:var(--borderRadius-large,.75rem)}.prc-Card-Card-pYjuL[data-border-radius=medium]{border-radius:var(--borderRadius-medium,.375rem)}.prc-Card-Card-pYjuL[data-padding=normal]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Card-Card-pYjuL[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Card-Card-pYjuL[data-padding=none]{padding:0}.prc-Card-CardHeader-P5Qbb{display:block;height:auto;width:100%}.prc-Card-CardHeaderEdgeToEdge-3yCqT{margin-left:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-right:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-top:calc(var(--stack-padding-spacious,1.5rem)*-1);width:calc(100% + var(--stack-padding-spacious,1.5rem)*2)}.prc-Card-CardImage-2M8DM{display:block;height:auto;width:100%}.prc-Card-CardIcon-mIMfj{align-items:center;background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;height:var(--base-size-32,2rem);justify-content:center;width:var(--base-size-32,2rem)}.prc-Card-CardBody-W1o-l{display:grid;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardContent-omZDS{display:grid;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardHeading-3HXyS{color:var(--fgColor-default,#1f2328);font:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");margin:0}.prc-Card-CardDescription-MnJ3F{margin:0}.prc-Card-CardDescription-MnJ3F,.prc-Card-CardMetadataContainer-K-UlH{color:var(--fgColor-muted,#59636e);font:var(--text-body-shorthand-medium,400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Card-CardMetadataContainer-K-UlH{align-items:center;display:flex;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardMetadataItem-ellY9{align-items:center;display:flex;font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");gap:var(--stack-gap-condensed,.5rem)}.prc-Card-
|
|
2
|
-
/*# sourceMappingURL=Card-
|
|
1
|
+
.prc-Card-Card-pYjuL{background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);display:grid;gap:var(--stack-gap-normal,1rem);grid-auto-rows:max-content auto;overflow:hidden;position:relative}.prc-Card-Card-pYjuL[data-border-radius=large]{border-radius:var(--borderRadius-large,.75rem)}.prc-Card-Card-pYjuL[data-border-radius=medium]{border-radius:var(--borderRadius-medium,.375rem)}.prc-Card-Card-pYjuL[data-padding=normal]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Card-Card-pYjuL[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Card-Card-pYjuL[data-padding=none]{padding:0}.prc-Card-CardHeader-P5Qbb{display:block;height:auto;width:100%}.prc-Card-CardHeaderEdgeToEdge-3yCqT{margin-left:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-right:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-top:calc(var(--stack-padding-spacious,1.5rem)*-1);width:calc(100% + var(--stack-padding-spacious,1.5rem)*2)}.prc-Card-CardImage-2M8DM{display:block;height:auto;width:100%}.prc-Card-CardIcon-mIMfj{align-items:center;background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;height:var(--base-size-32,2rem);justify-content:center;width:var(--base-size-32,2rem)}.prc-Card-CardBody-W1o-l{display:grid;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardContent-omZDS{display:grid;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardHeading-3HXyS{color:var(--fgColor-default,#1f2328);font:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");margin:0}.prc-Card-CardDescription-MnJ3F{margin:0}.prc-Card-CardDescription-MnJ3F,.prc-Card-CardMetadataContainer-K-UlH{color:var(--fgColor-muted,#59636e);font:var(--text-body-shorthand-medium,400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Card-CardMetadataContainer-K-UlH{align-items:center;display:flex;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardMetadataItem-ellY9{align-items:center;display:flex;font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardAction-VtI49{position:absolute;right:var(--base-size-16,1rem);top:var(--base-size-16,1rem);z-index:1}
|
|
2
|
+
/*# sourceMappingURL=Card-d8a02dd9.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAOE,4CAAwC,CAFxC,gFAAgE,CAChE,kFAAuC,CALvC,YAAa,CAOb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CADhB,iBA6BF,CArBE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,6CAAsC,CADtC,gDAAyC,CAEzC,kCAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,
|
|
1
|
+
{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAOE,4CAAwC,CAFxC,gFAAgE,CAChE,kFAAuC,CALvC,YAAa,CAOb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CADhB,iBA6BF,CArBE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,6CAAsC,CADtC,gDAAyC,CAEzC,kCAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,2BACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-d8a02dd9.css","sourcesContent":[".Card {\n display: grid;\n position: relative;\n overflow: hidden;\n grid-auto-rows: max-content auto;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n box-shadow: var(--shadow-resting-small);\n background-color: var(--bgColor-default);\n gap: var(--stack-gap-normal);\n\n &[data-border-radius='large'] {\n border-radius: var(--borderRadius-large);\n }\n\n &[data-border-radius='medium'] {\n border-radius: var(--borderRadius-medium);\n }\n\n &[data-padding='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious);\n }\n\n &[data-padding='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed);\n }\n\n &[data-padding='none'] {\n padding: 0;\n }\n}\n\n.CardHeader {\n display: block;\n width: 100%;\n height: auto;\n}\n\n.CardHeaderEdgeToEdge {\n /* stylelint-disable primer/spacing */\n margin-top: calc(-1 * var(--stack-padding-spacious));\n margin-right: calc(-1 * var(--stack-padding-spacious));\n margin-left: calc(-1 * var(--stack-padding-spacious));\n width: calc(100% + 2 * var(--stack-padding-spacious));\n /* stylelint-enable primer/spacing */\n}\n\n.CardImage {\n display: block;\n width: 100%;\n height: auto;\n}\n\n.CardIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n border-radius: var(--borderRadius-medium);\n background-color: var(--bgColor-muted);\n color: var(--fgColor-muted);\n}\n\n.CardBody {\n display: grid;\n gap: var(--stack-gap-normal);\n}\n\n.CardContent {\n display: grid;\n gap: var(--stack-gap-condensed);\n}\n\n.CardHeading {\n font: var(--text-title-shorthand-small);\n color: var(--fgColor-default);\n margin: 0;\n}\n\n.CardDescription {\n font: var(--text-body-shorthand-medium);\n color: var(--fgColor-muted);\n margin: 0;\n}\n\n.CardMetadataContainer {\n display: flex;\n align-items: center;\n gap: var(--stack-gap-normal);\n font: var(--text-body-shorthand-medium);\n color: var(--fgColor-muted);\n}\n\n.CardMetadataItem {\n display: flex;\n align-items: center;\n gap: var(--stack-gap-condensed);\n font: var(--text-body-shorthand-small);\n}\n\n.CardAction {\n position: absolute;\n top: var(--base-size-16);\n right: var(--base-size-16);\n z-index: 1;\n}\n"]}
|
package/dist/Card/Card.d.ts
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
*/
|
|
2
|
+
import { type PolymorphicProps } from '../utils/modern-polymorphic';
|
|
3
|
+
type CardAs = 'div' | 'section';
|
|
4
|
+
export type CardProps<As extends CardAs = 'div'> = PolymorphicProps<As, 'div', {
|
|
5
|
+
/** Optional className for the root element. */
|
|
7
6
|
className?: string;
|
|
8
|
-
/**
|
|
9
|
-
* Controls the internal padding of the Card.
|
|
10
|
-
* @default 'normal'
|
|
11
|
-
*/
|
|
7
|
+
/** Internal padding. @default 'normal' */
|
|
12
8
|
padding?: 'none' | 'condensed' | 'normal';
|
|
9
|
+
/** Border radius. @default 'large' */
|
|
10
|
+
borderRadius?: 'medium' | 'large';
|
|
13
11
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
12
|
+
* Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
|
|
13
|
+
* `Card.Description`, `Card.Metadata`) or custom content.
|
|
16
14
|
*/
|
|
17
|
-
|
|
18
|
-
}
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
}>;
|
|
19
17
|
type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
20
18
|
type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
|
|
21
19
|
/**
|
|
@@ -25,6 +23,9 @@ type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
|
|
|
25
23
|
children: React.ReactNode;
|
|
26
24
|
};
|
|
27
25
|
type DescriptionProps = React.ComponentPropsWithoutRef<'p'> & {
|
|
26
|
+
/**
|
|
27
|
+
* Card description. Rendered as a `<p>`, so keep it to flowing text.
|
|
28
|
+
*/
|
|
28
29
|
children: React.ReactNode;
|
|
29
30
|
};
|
|
30
31
|
type IconProps = {
|
|
@@ -48,37 +49,58 @@ type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
|
|
|
48
49
|
*/
|
|
49
50
|
alt?: string;
|
|
50
51
|
};
|
|
51
|
-
type
|
|
52
|
+
type ActionProps = {
|
|
53
|
+
/** Interactive control for the top-right corner of the card. */
|
|
52
54
|
children: React.ReactNode;
|
|
53
55
|
};
|
|
54
56
|
type MetadataProps = React.ComponentPropsWithoutRef<'div'> & {
|
|
55
|
-
children: React.ReactNode;
|
|
56
|
-
};
|
|
57
|
-
declare const CardImpl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
58
57
|
/**
|
|
59
|
-
*
|
|
60
|
-
*
|
|
58
|
+
* Metadata row at the bottom of the card. Any content works: text, icons,
|
|
59
|
+
* a `Label`, an `Octicon`.
|
|
61
60
|
*/
|
|
61
|
+
children: React.ReactNode;
|
|
62
|
+
};
|
|
63
|
+
declare const CardImpl: <As extends CardAs>(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
|
|
64
|
+
/** Optional className for the root element. */
|
|
62
65
|
className?: string;
|
|
66
|
+
/** Internal padding. @default 'normal' */
|
|
67
|
+
padding?: "none" | "condensed" | "normal";
|
|
68
|
+
/** Border radius. @default 'large' */
|
|
69
|
+
borderRadius?: "medium" | "large";
|
|
63
70
|
/**
|
|
64
|
-
*
|
|
65
|
-
*
|
|
71
|
+
* Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
|
|
72
|
+
* `Card.Description`, `Card.Metadata`) or custom content.
|
|
66
73
|
*/
|
|
74
|
+
children: React.ReactNode;
|
|
75
|
+
} extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
|
|
76
|
+
/** Optional className for the root element. */
|
|
77
|
+
className?: string;
|
|
78
|
+
/** Internal padding. @default 'normal' */
|
|
67
79
|
padding?: "none" | "condensed" | "normal";
|
|
80
|
+
/** Border radius. @default 'large' */
|
|
81
|
+
borderRadius?: "medium" | "large";
|
|
68
82
|
/**
|
|
69
|
-
*
|
|
70
|
-
*
|
|
83
|
+
* Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
|
|
84
|
+
* `Card.Description`, `Card.Metadata`) or custom content.
|
|
71
85
|
*/
|
|
72
|
-
|
|
73
|
-
} &
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
86
|
+
children: React.ReactNode;
|
|
87
|
+
} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
|
|
88
|
+
as?: As | undefined;
|
|
89
|
+
} & React.RefAttributes<any>) => React.ReactNode;
|
|
90
|
+
declare function CardIcon({ icon: IconComponent, 'aria-label': ariaLabel, className }: IconProps): React.JSX.Element;
|
|
91
|
+
declare namespace CardIcon {
|
|
92
|
+
var displayName: string;
|
|
93
|
+
}
|
|
94
|
+
declare function CardImage({ src, alt, className, ...rest }: ImageProps): React.JSX.Element;
|
|
95
|
+
declare namespace CardImage {
|
|
96
|
+
var displayName: string;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Heading shown at the top of a Card.
|
|
100
|
+
*
|
|
101
|
+
* When the parent Card uses `as="section"`, the heading's `id` is
|
|
102
|
+
* automatically wired to the section's `aria-labelledby`.
|
|
103
|
+
*/
|
|
82
104
|
declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
|
|
83
105
|
/**
|
|
84
106
|
* The heading level to render. Defaults to 'h3'.
|
|
@@ -87,20 +109,34 @@ declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHT
|
|
|
87
109
|
children: React.ReactNode;
|
|
88
110
|
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
89
111
|
declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
112
|
+
/**
|
|
113
|
+
* Card description. Rendered as a `<p>`, so keep it to flowing text.
|
|
114
|
+
*/
|
|
90
115
|
children: React.ReactNode;
|
|
91
116
|
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
117
|
+
/**
|
|
118
|
+
* Top-right slot for a single interactive control.
|
|
119
|
+
*
|
|
120
|
+
* Give the control a label that names the card (e.g. `"More options for
|
|
121
|
+
* Project Alpha"`, not just `"More options"`) so users can tell which card
|
|
122
|
+
* the action applies to when several cards are visible.
|
|
123
|
+
*/
|
|
124
|
+
declare function CardAction({ children }: ActionProps): React.JSX.Element;
|
|
125
|
+
declare namespace CardAction {
|
|
126
|
+
var displayName: string;
|
|
127
|
+
}
|
|
96
128
|
declare const CardMetadata: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
129
|
+
/**
|
|
130
|
+
* Metadata row at the bottom of the card. Any content works: text, icons,
|
|
131
|
+
* a `Label`, an `Octicon`.
|
|
132
|
+
*/
|
|
97
133
|
children: React.ReactNode;
|
|
98
134
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
99
|
-
export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription,
|
|
135
|
+
export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardAction, CardMetadata };
|
|
100
136
|
export type { HeadingProps as CardHeadingProps };
|
|
101
137
|
export type { DescriptionProps as CardDescriptionProps };
|
|
102
138
|
export type { IconProps as CardIconProps };
|
|
103
139
|
export type { ImageProps as CardImageProps };
|
|
104
|
-
export type {
|
|
140
|
+
export type { ActionProps as CardActionProps };
|
|
105
141
|
export type { MetadataProps as CardMetadataProps };
|
|
106
142
|
//# sourceMappingURL=Card.d.ts.map
|
package/dist/Card/Card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}
|
package/dist/Card/Card.js
CHANGED
|
@@ -1,43 +1,39 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import React, { forwardRef } from 'react';
|
|
3
|
+
import React, { forwardRef, useContext, createContext } from 'react';
|
|
4
4
|
import classes from './Card.module.css.js';
|
|
5
|
-
import {
|
|
5
|
+
import { fixedForwardRef } from '../utils/modern-polymorphic.js';
|
|
6
|
+
import { useId } from '../hooks/useId.js';
|
|
7
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
8
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
$[4] = t1;
|
|
27
|
-
$[5] = t2;
|
|
28
|
-
} else {
|
|
29
|
-
children = $[1];
|
|
30
|
-
className = $[2];
|
|
31
|
-
rest = $[3];
|
|
32
|
-
t1 = $[4];
|
|
33
|
-
t2 = $[5];
|
|
9
|
+
const CardContext = /*#__PURE__*/createContext({});
|
|
10
|
+
function CardComponent(props, ref) {
|
|
11
|
+
const $ = c(67);
|
|
12
|
+
const {
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
padding: t0,
|
|
16
|
+
borderRadius: t1,
|
|
17
|
+
as: t2,
|
|
18
|
+
...rest
|
|
19
|
+
} = props;
|
|
20
|
+
const padding = t0 === undefined ? "normal" : t0;
|
|
21
|
+
const borderRadius = t1 === undefined ? "large" : t1;
|
|
22
|
+
const as = t2 === undefined ? "div" : t2;
|
|
23
|
+
const Component = as;
|
|
24
|
+
const generatedId = useId();
|
|
25
|
+
const titleId = as === "section" ? generatedId : undefined;
|
|
26
|
+
if (as === "section" && !("aria-label" in props) && !("aria-labelledby" in props)) {
|
|
27
|
+
rest["aria-labelledby"] = titleId;
|
|
34
28
|
}
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
let T0;
|
|
30
|
+
let T1;
|
|
37
31
|
let description;
|
|
38
32
|
let heading;
|
|
39
33
|
let menu;
|
|
40
34
|
let metadata;
|
|
35
|
+
let t10;
|
|
36
|
+
let t11;
|
|
41
37
|
let t3;
|
|
42
38
|
let t4;
|
|
43
39
|
let t5;
|
|
@@ -45,8 +41,8 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
|
|
|
45
41
|
let t7;
|
|
46
42
|
let t8;
|
|
47
43
|
let t9;
|
|
48
|
-
if ($[
|
|
49
|
-
|
|
44
|
+
if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== padding || $[5] !== ref || $[6] !== rest || $[7] !== titleId) {
|
|
45
|
+
t11 = Symbol.for("react.early_return_sentinel");
|
|
50
46
|
bb0: {
|
|
51
47
|
let icon = null;
|
|
52
48
|
let image = null;
|
|
@@ -74,7 +70,7 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
|
|
|
74
70
|
if (child.type === CardMetadata) {
|
|
75
71
|
metadata = child;
|
|
76
72
|
} else {
|
|
77
|
-
if (child.type ===
|
|
73
|
+
if (child.type === CardAction) {
|
|
78
74
|
menu = child;
|
|
79
75
|
}
|
|
80
76
|
}
|
|
@@ -84,64 +80,111 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
|
|
|
84
80
|
}
|
|
85
81
|
}
|
|
86
82
|
const hasSlotChildren = icon || image || heading || description || metadata || menu;
|
|
83
|
+
const isEmpty = !hasSlotChildren && childArray.length === 0;
|
|
84
|
+
if (isEmpty) {
|
|
85
|
+
t11 = null;
|
|
86
|
+
break bb0;
|
|
87
|
+
}
|
|
87
88
|
if (!hasSlotChildren) {
|
|
88
|
-
let
|
|
89
|
-
if ($[23] !==
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
let t12;
|
|
90
|
+
if ($[23] !== titleId) {
|
|
91
|
+
t12 = {
|
|
92
|
+
titleId
|
|
93
|
+
};
|
|
94
|
+
$[23] = titleId;
|
|
95
|
+
$[24] = t12;
|
|
93
96
|
} else {
|
|
94
|
-
|
|
97
|
+
t12 = $[24];
|
|
95
98
|
}
|
|
96
|
-
let
|
|
97
|
-
if ($[25] !==
|
|
98
|
-
|
|
99
|
+
let t13;
|
|
100
|
+
if ($[25] !== className) {
|
|
101
|
+
t13 = clsx(classes.Card, className);
|
|
102
|
+
$[25] = className;
|
|
103
|
+
$[26] = t13;
|
|
104
|
+
} else {
|
|
105
|
+
t13 = $[26];
|
|
106
|
+
}
|
|
107
|
+
let t14;
|
|
108
|
+
if ($[27] !== Component || $[28] !== borderRadius || $[29] !== children || $[30] !== padding || $[31] !== ref || $[32] !== rest || $[33] !== t13) {
|
|
109
|
+
t14 = /*#__PURE__*/jsx(Component, {
|
|
99
110
|
ref: ref,
|
|
100
|
-
className:
|
|
111
|
+
className: t13,
|
|
112
|
+
"data-component": "Card",
|
|
101
113
|
"data-padding": padding,
|
|
102
114
|
"data-border-radius": borderRadius,
|
|
103
115
|
...rest,
|
|
104
116
|
children: children
|
|
105
117
|
});
|
|
106
|
-
$[
|
|
107
|
-
$[
|
|
108
|
-
$[
|
|
109
|
-
$[
|
|
110
|
-
$[
|
|
111
|
-
$[
|
|
112
|
-
$[
|
|
118
|
+
$[27] = Component;
|
|
119
|
+
$[28] = borderRadius;
|
|
120
|
+
$[29] = children;
|
|
121
|
+
$[30] = padding;
|
|
122
|
+
$[31] = ref;
|
|
123
|
+
$[32] = rest;
|
|
124
|
+
$[33] = t13;
|
|
125
|
+
$[34] = t14;
|
|
113
126
|
} else {
|
|
114
|
-
|
|
127
|
+
t14 = $[34];
|
|
115
128
|
}
|
|
116
|
-
|
|
129
|
+
let t15;
|
|
130
|
+
if ($[35] !== t12 || $[36] !== t14) {
|
|
131
|
+
t15 = /*#__PURE__*/jsx(CardContext.Provider, {
|
|
132
|
+
value: t12,
|
|
133
|
+
children: t14
|
|
134
|
+
});
|
|
135
|
+
$[35] = t12;
|
|
136
|
+
$[36] = t14;
|
|
137
|
+
$[37] = t15;
|
|
138
|
+
} else {
|
|
139
|
+
t15 = $[37];
|
|
140
|
+
}
|
|
141
|
+
t11 = t15;
|
|
117
142
|
break bb0;
|
|
118
143
|
}
|
|
144
|
+
T1 = CardContext.Provider;
|
|
145
|
+
if ($[38] !== titleId) {
|
|
146
|
+
t10 = {
|
|
147
|
+
titleId
|
|
148
|
+
};
|
|
149
|
+
$[38] = titleId;
|
|
150
|
+
$[39] = t10;
|
|
151
|
+
} else {
|
|
152
|
+
t10 = $[39];
|
|
153
|
+
}
|
|
154
|
+
T0 = Component;
|
|
119
155
|
t3 = ref;
|
|
120
|
-
if ($[
|
|
156
|
+
if ($[40] !== className) {
|
|
121
157
|
t4 = clsx(classes.Card, className);
|
|
122
|
-
$[
|
|
123
|
-
$[
|
|
158
|
+
$[40] = className;
|
|
159
|
+
$[41] = t4;
|
|
124
160
|
} else {
|
|
125
|
-
t4 = $[
|
|
161
|
+
t4 = $[41];
|
|
126
162
|
}
|
|
127
|
-
t5 =
|
|
128
|
-
t6 =
|
|
129
|
-
t7 =
|
|
130
|
-
t8 =
|
|
163
|
+
t5 = "Card";
|
|
164
|
+
t6 = padding;
|
|
165
|
+
t7 = borderRadius;
|
|
166
|
+
t8 = rest;
|
|
167
|
+
t9 = (image || icon) && /*#__PURE__*/jsx("div", {
|
|
131
168
|
className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
|
|
132
169
|
children: image || icon
|
|
133
170
|
});
|
|
134
171
|
}
|
|
135
|
-
$[
|
|
136
|
-
$[
|
|
137
|
-
$[
|
|
138
|
-
$[
|
|
139
|
-
$[
|
|
140
|
-
$[
|
|
141
|
-
$[
|
|
142
|
-
$[
|
|
143
|
-
$[
|
|
144
|
-
$[
|
|
172
|
+
$[0] = Component;
|
|
173
|
+
$[1] = borderRadius;
|
|
174
|
+
$[2] = children;
|
|
175
|
+
$[3] = className;
|
|
176
|
+
$[4] = padding;
|
|
177
|
+
$[5] = ref;
|
|
178
|
+
$[6] = rest;
|
|
179
|
+
$[7] = titleId;
|
|
180
|
+
$[8] = T0;
|
|
181
|
+
$[9] = T1;
|
|
182
|
+
$[10] = description;
|
|
183
|
+
$[11] = heading;
|
|
184
|
+
$[12] = menu;
|
|
185
|
+
$[13] = metadata;
|
|
186
|
+
$[14] = t10;
|
|
187
|
+
$[15] = t11;
|
|
145
188
|
$[16] = t3;
|
|
146
189
|
$[17] = t4;
|
|
147
190
|
$[18] = t5;
|
|
@@ -150,10 +193,14 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
|
|
|
150
193
|
$[21] = t8;
|
|
151
194
|
$[22] = t9;
|
|
152
195
|
} else {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
196
|
+
T0 = $[8];
|
|
197
|
+
T1 = $[9];
|
|
198
|
+
description = $[10];
|
|
199
|
+
heading = $[11];
|
|
200
|
+
menu = $[12];
|
|
201
|
+
metadata = $[13];
|
|
202
|
+
t10 = $[14];
|
|
203
|
+
t11 = $[15];
|
|
157
204
|
t3 = $[16];
|
|
158
205
|
t4 = $[17];
|
|
159
206
|
t5 = $[18];
|
|
@@ -162,80 +209,98 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
|
|
|
162
209
|
t8 = $[21];
|
|
163
210
|
t9 = $[22];
|
|
164
211
|
}
|
|
165
|
-
if (
|
|
166
|
-
return
|
|
212
|
+
if (t11 !== Symbol.for("react.early_return_sentinel")) {
|
|
213
|
+
return t11;
|
|
167
214
|
}
|
|
168
|
-
let
|
|
169
|
-
if ($[
|
|
170
|
-
|
|
215
|
+
let t12;
|
|
216
|
+
if ($[42] !== description || $[43] !== heading) {
|
|
217
|
+
t12 = /*#__PURE__*/jsxs("div", {
|
|
171
218
|
className: classes.CardContent,
|
|
172
219
|
children: [heading, description]
|
|
173
220
|
});
|
|
174
|
-
$[
|
|
175
|
-
$[
|
|
176
|
-
$[
|
|
221
|
+
$[42] = description;
|
|
222
|
+
$[43] = heading;
|
|
223
|
+
$[44] = t12;
|
|
177
224
|
} else {
|
|
178
|
-
|
|
225
|
+
t12 = $[44];
|
|
179
226
|
}
|
|
180
|
-
let
|
|
181
|
-
if ($[
|
|
182
|
-
|
|
227
|
+
let t13;
|
|
228
|
+
if ($[45] !== metadata) {
|
|
229
|
+
t13 = metadata ? /*#__PURE__*/jsx("div", {
|
|
183
230
|
className: classes.CardMetadataContainer,
|
|
184
231
|
children: metadata
|
|
185
232
|
}) : null;
|
|
186
|
-
$[
|
|
187
|
-
$[
|
|
233
|
+
$[45] = metadata;
|
|
234
|
+
$[46] = t13;
|
|
188
235
|
} else {
|
|
189
|
-
|
|
236
|
+
t13 = $[46];
|
|
190
237
|
}
|
|
191
|
-
let
|
|
192
|
-
if ($[
|
|
193
|
-
|
|
238
|
+
let t14;
|
|
239
|
+
if ($[47] !== t12 || $[48] !== t13) {
|
|
240
|
+
t14 = /*#__PURE__*/jsxs("div", {
|
|
194
241
|
className: classes.CardBody,
|
|
195
|
-
children: [
|
|
242
|
+
children: [t12, t13]
|
|
196
243
|
});
|
|
197
|
-
$[
|
|
198
|
-
$[
|
|
199
|
-
$[
|
|
244
|
+
$[47] = t12;
|
|
245
|
+
$[48] = t13;
|
|
246
|
+
$[49] = t14;
|
|
200
247
|
} else {
|
|
201
|
-
|
|
248
|
+
t14 = $[49];
|
|
202
249
|
}
|
|
203
|
-
let
|
|
204
|
-
if ($[
|
|
205
|
-
|
|
206
|
-
className: classes.
|
|
250
|
+
let t15;
|
|
251
|
+
if ($[50] !== menu) {
|
|
252
|
+
t15 = menu ? /*#__PURE__*/jsx("div", {
|
|
253
|
+
className: classes.CardAction,
|
|
207
254
|
children: menu
|
|
208
255
|
}) : null;
|
|
209
|
-
$[
|
|
210
|
-
$[
|
|
256
|
+
$[50] = menu;
|
|
257
|
+
$[51] = t15;
|
|
211
258
|
} else {
|
|
212
|
-
|
|
259
|
+
t15 = $[51];
|
|
213
260
|
}
|
|
214
|
-
let
|
|
215
|
-
if ($[
|
|
216
|
-
|
|
261
|
+
let t16;
|
|
262
|
+
if ($[52] !== T0 || $[53] !== t14 || $[54] !== t15 || $[55] !== t3 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
|
|
263
|
+
t16 = /*#__PURE__*/jsxs(T0, {
|
|
217
264
|
ref: t3,
|
|
218
265
|
className: t4,
|
|
219
|
-
"data-
|
|
220
|
-
"data-
|
|
221
|
-
|
|
222
|
-
|
|
266
|
+
"data-component": t5,
|
|
267
|
+
"data-padding": t6,
|
|
268
|
+
"data-border-radius": t7,
|
|
269
|
+
...t8,
|
|
270
|
+
children: [t9, t14, t15]
|
|
223
271
|
});
|
|
224
|
-
$[
|
|
225
|
-
$[
|
|
226
|
-
$[
|
|
227
|
-
$[
|
|
228
|
-
$[
|
|
229
|
-
$[
|
|
230
|
-
$[
|
|
231
|
-
$[
|
|
232
|
-
$[
|
|
272
|
+
$[52] = T0;
|
|
273
|
+
$[53] = t14;
|
|
274
|
+
$[54] = t15;
|
|
275
|
+
$[55] = t3;
|
|
276
|
+
$[56] = t4;
|
|
277
|
+
$[57] = t5;
|
|
278
|
+
$[58] = t6;
|
|
279
|
+
$[59] = t7;
|
|
280
|
+
$[60] = t8;
|
|
281
|
+
$[61] = t9;
|
|
282
|
+
$[62] = t16;
|
|
233
283
|
} else {
|
|
234
|
-
|
|
284
|
+
t16 = $[62];
|
|
235
285
|
}
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
286
|
+
let t17;
|
|
287
|
+
if ($[63] !== T1 || $[64] !== t10 || $[65] !== t16) {
|
|
288
|
+
t17 = /*#__PURE__*/jsx(T1, {
|
|
289
|
+
value: t10,
|
|
290
|
+
children: t16
|
|
291
|
+
});
|
|
292
|
+
$[63] = T1;
|
|
293
|
+
$[64] = t10;
|
|
294
|
+
$[65] = t16;
|
|
295
|
+
$[66] = t17;
|
|
296
|
+
} else {
|
|
297
|
+
t17 = $[66];
|
|
298
|
+
}
|
|
299
|
+
return t17;
|
|
300
|
+
}
|
|
301
|
+
CardComponent.displayName = 'Card';
|
|
302
|
+
const CardImpl = fixedForwardRef(CardComponent);
|
|
303
|
+
function CardIcon(t0) {
|
|
239
304
|
const $ = c(10);
|
|
240
305
|
const {
|
|
241
306
|
icon: IconComponent,
|
|
@@ -264,6 +329,7 @@ const CardIcon = t0 => {
|
|
|
264
329
|
if ($[4] !== ariaLabel || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
|
|
265
330
|
t5 = /*#__PURE__*/jsx("span", {
|
|
266
331
|
className: t1,
|
|
332
|
+
"data-component": "Card.Icon",
|
|
267
333
|
role: t2,
|
|
268
334
|
"aria-label": ariaLabel,
|
|
269
335
|
"aria-hidden": t3,
|
|
@@ -279,9 +345,9 @@ const CardIcon = t0 => {
|
|
|
279
345
|
t5 = $[9];
|
|
280
346
|
}
|
|
281
347
|
return t5;
|
|
282
|
-
}
|
|
348
|
+
}
|
|
283
349
|
CardIcon.displayName = 'Card.Icon';
|
|
284
|
-
|
|
350
|
+
function CardImage(t0) {
|
|
285
351
|
const $ = c(12);
|
|
286
352
|
let className;
|
|
287
353
|
let rest;
|
|
@@ -317,10 +383,11 @@ const CardImage = t0 => {
|
|
|
317
383
|
let t3;
|
|
318
384
|
if ($[7] !== alt || $[8] !== rest || $[9] !== src || $[10] !== t2) {
|
|
319
385
|
t3 = /*#__PURE__*/jsx("img", {
|
|
386
|
+
...rest,
|
|
320
387
|
src: src,
|
|
321
388
|
alt: alt,
|
|
322
389
|
className: t2,
|
|
323
|
-
|
|
390
|
+
"data-component": "Card.Image"
|
|
324
391
|
});
|
|
325
392
|
$[7] = alt;
|
|
326
393
|
$[8] = rest;
|
|
@@ -331,12 +398,21 @@ const CardImage = t0 => {
|
|
|
331
398
|
t3 = $[11];
|
|
332
399
|
}
|
|
333
400
|
return t3;
|
|
334
|
-
}
|
|
401
|
+
}
|
|
335
402
|
CardImage.displayName = 'Card.Image';
|
|
403
|
+
|
|
404
|
+
/**
|
|
405
|
+
* Heading shown at the top of a Card.
|
|
406
|
+
*
|
|
407
|
+
* When the parent Card uses `as="section"`, the heading's `id` is
|
|
408
|
+
* automatically wired to the section's `aria-labelledby`.
|
|
409
|
+
*/
|
|
336
410
|
const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
|
|
337
|
-
|
|
411
|
+
var _id;
|
|
412
|
+
const $ = c(15);
|
|
338
413
|
let children;
|
|
339
414
|
let className;
|
|
415
|
+
let id;
|
|
340
416
|
let rest;
|
|
341
417
|
let t1;
|
|
342
418
|
if ($[0] !== t0) {
|
|
@@ -344,47 +420,58 @@ const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
|
|
|
344
420
|
as: t1,
|
|
345
421
|
children,
|
|
346
422
|
className,
|
|
423
|
+
id,
|
|
347
424
|
...rest
|
|
348
425
|
} = t0);
|
|
349
426
|
$[0] = t0;
|
|
350
427
|
$[1] = children;
|
|
351
428
|
$[2] = className;
|
|
352
|
-
$[3] =
|
|
353
|
-
$[4] =
|
|
429
|
+
$[3] = id;
|
|
430
|
+
$[4] = rest;
|
|
431
|
+
$[5] = t1;
|
|
354
432
|
} else {
|
|
355
433
|
children = $[1];
|
|
356
434
|
className = $[2];
|
|
357
|
-
|
|
358
|
-
|
|
435
|
+
id = $[3];
|
|
436
|
+
rest = $[4];
|
|
437
|
+
t1 = $[5];
|
|
359
438
|
}
|
|
360
439
|
const Component = t1 === undefined ? "h3" : t1;
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
440
|
+
const {
|
|
441
|
+
titleId
|
|
442
|
+
} = useContext(CardContext);
|
|
443
|
+
const t2 = (_id = id) !== null && _id !== void 0 ? _id : titleId;
|
|
444
|
+
let t3;
|
|
445
|
+
if ($[6] !== className) {
|
|
446
|
+
t3 = clsx(classes.CardHeading, className);
|
|
447
|
+
$[6] = className;
|
|
448
|
+
$[7] = t3;
|
|
366
449
|
} else {
|
|
367
|
-
|
|
450
|
+
t3 = $[7];
|
|
368
451
|
}
|
|
369
|
-
let
|
|
370
|
-
if ($[
|
|
371
|
-
|
|
372
|
-
ref: ref,
|
|
373
|
-
className: t2,
|
|
452
|
+
let t4;
|
|
453
|
+
if ($[8] !== Component || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t2 || $[13] !== t3) {
|
|
454
|
+
t4 = /*#__PURE__*/jsx(Component, {
|
|
374
455
|
...rest,
|
|
456
|
+
ref: ref,
|
|
457
|
+
id: t2,
|
|
458
|
+
className: t3,
|
|
459
|
+
"data-component": "Card.Heading",
|
|
375
460
|
children: children
|
|
376
461
|
});
|
|
377
|
-
$[
|
|
378
|
-
$[
|
|
379
|
-
$[
|
|
380
|
-
$[
|
|
381
|
-
$[
|
|
382
|
-
$[
|
|
462
|
+
$[8] = Component;
|
|
463
|
+
$[9] = children;
|
|
464
|
+
$[10] = ref;
|
|
465
|
+
$[11] = rest;
|
|
466
|
+
$[12] = t2;
|
|
467
|
+
$[13] = t3;
|
|
468
|
+
$[14] = t4;
|
|
383
469
|
} else {
|
|
384
|
-
|
|
470
|
+
t4 = $[14];
|
|
385
471
|
}
|
|
386
|
-
return
|
|
472
|
+
return t4;
|
|
387
473
|
});
|
|
474
|
+
CardHeading.displayName = 'Card.Heading';
|
|
388
475
|
const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref) {
|
|
389
476
|
const $ = c(11);
|
|
390
477
|
let children;
|
|
@@ -416,9 +503,10 @@ const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref
|
|
|
416
503
|
let t2;
|
|
417
504
|
if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
|
|
418
505
|
t2 = /*#__PURE__*/jsx("p", {
|
|
506
|
+
...rest,
|
|
419
507
|
ref: ref,
|
|
420
508
|
className: t1,
|
|
421
|
-
|
|
509
|
+
"data-component": "Card.Description",
|
|
422
510
|
children: children
|
|
423
511
|
});
|
|
424
512
|
$[6] = children;
|
|
@@ -431,14 +519,24 @@ const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref
|
|
|
431
519
|
}
|
|
432
520
|
return t2;
|
|
433
521
|
});
|
|
434
|
-
|
|
522
|
+
CardDescription.displayName = 'Card.Description';
|
|
523
|
+
|
|
524
|
+
/**
|
|
525
|
+
* Top-right slot for a single interactive control.
|
|
526
|
+
*
|
|
527
|
+
* Give the control a label that names the card (e.g. `"More options for
|
|
528
|
+
* Project Alpha"`, not just `"More options"`) so users can tell which card
|
|
529
|
+
* the action applies to when several cards are visible.
|
|
530
|
+
*/
|
|
531
|
+
function CardAction(t0) {
|
|
435
532
|
const $ = c(2);
|
|
436
533
|
const {
|
|
437
534
|
children
|
|
438
535
|
} = t0;
|
|
439
536
|
let t1;
|
|
440
537
|
if ($[0] !== children) {
|
|
441
|
-
t1 = /*#__PURE__*/jsx(
|
|
538
|
+
t1 = /*#__PURE__*/jsx("div", {
|
|
539
|
+
"data-component": "Card.Action",
|
|
442
540
|
children: children
|
|
443
541
|
});
|
|
444
542
|
$[0] = children;
|
|
@@ -447,8 +545,8 @@ const CardMenu = t0 => {
|
|
|
447
545
|
t1 = $[1];
|
|
448
546
|
}
|
|
449
547
|
return t1;
|
|
450
|
-
}
|
|
451
|
-
|
|
548
|
+
}
|
|
549
|
+
CardAction.displayName = 'Card.Action';
|
|
452
550
|
const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
|
|
453
551
|
const $ = c(11);
|
|
454
552
|
let children;
|
|
@@ -480,9 +578,10 @@ const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
|
|
|
480
578
|
let t2;
|
|
481
579
|
if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
|
|
482
580
|
t2 = /*#__PURE__*/jsx("div", {
|
|
581
|
+
...rest,
|
|
483
582
|
ref: ref,
|
|
484
583
|
className: t1,
|
|
485
|
-
|
|
584
|
+
"data-component": "Card.Metadata",
|
|
486
585
|
children: children
|
|
487
586
|
});
|
|
488
587
|
$[6] = children;
|
|
@@ -495,5 +594,6 @@ const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
|
|
|
495
594
|
}
|
|
496
595
|
return t2;
|
|
497
596
|
});
|
|
597
|
+
CardMetadata.displayName = 'Card.Metadata';
|
|
498
598
|
|
|
499
|
-
export { CardDescription, CardHeading, CardIcon, CardImage, CardImpl,
|
|
599
|
+
export { CardAction, CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMetadata };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './Card-
|
|
1
|
+
import './Card-d8a02dd9.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","
|
|
3
|
+
var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardAction":"prc-Card-CardAction-VtI49"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
package/dist/Card/index.d.ts
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { CardIcon, CardImage, CardAction } from './Card';
|
|
2
|
+
import type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps } from './Card';
|
|
3
|
+
declare const Card: (<As extends "div" | "section">(props: (import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
|
|
3
4
|
className?: string;
|
|
4
5
|
padding?: "none" | "condensed" | "normal";
|
|
5
6
|
borderRadius?: "medium" | "large";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
} extends infer T ? T extends import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
|
|
9
|
+
className?: string;
|
|
10
|
+
padding?: "none" | "condensed" | "normal";
|
|
11
|
+
borderRadius?: "medium" | "large";
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
|
|
14
|
+
as?: As | undefined;
|
|
15
|
+
} & import("react").RefAttributes<any>) => React.ReactNode) & {
|
|
16
|
+
Icon: typeof CardIcon;
|
|
17
|
+
Image: typeof CardImage;
|
|
15
18
|
Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
|
|
16
19
|
as?: "h2" | "h3" | "h4" | "h5" | "h6";
|
|
17
20
|
children: React.ReactNode;
|
|
@@ -19,14 +22,11 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react
|
|
|
19
22
|
Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
20
23
|
children: React.ReactNode;
|
|
21
24
|
} & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
22
|
-
|
|
23
|
-
({ children }: CardMenuProps): import("react").JSX.Element;
|
|
24
|
-
displayName: string;
|
|
25
|
-
};
|
|
25
|
+
Action: typeof CardAction;
|
|
26
26
|
Metadata: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
27
27
|
children: React.ReactNode;
|
|
28
28
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
29
29
|
};
|
|
30
30
|
export { Card };
|
|
31
|
-
export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps,
|
|
31
|
+
export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps, };
|
|
32
32
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/Card/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,QAAQ,EAAE,SAAS,EAAgC,UAAU,EAAe,MAAM,QAAQ,CAAA;AAC5G,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EAClB,MAAM,QAAQ,CAAA;AAEf,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA;AACb,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,GAClB,CAAA"}
|
package/dist/Card/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { CardImpl, CardMetadata,
|
|
1
|
+
import { CardImpl, CardMetadata, CardAction, CardDescription, CardHeading, CardImage, CardIcon } from './Card.js';
|
|
2
2
|
|
|
3
3
|
const Card = Object.assign(CardImpl, {
|
|
4
4
|
Icon: CardIcon,
|
|
5
5
|
Image: CardImage,
|
|
6
6
|
Heading: CardHeading,
|
|
7
7
|
Description: CardDescription,
|
|
8
|
-
|
|
8
|
+
Action: CardAction,
|
|
9
9
|
Metadata: CardMetadata
|
|
10
10
|
});
|
|
11
11
|
|
|
@@ -10,7 +10,7 @@ export type { BlankslateProps } from '../Blankslate';
|
|
|
10
10
|
export { ButtonBase } from '../Button';
|
|
11
11
|
export type { ButtonBaseProps } from '../Button';
|
|
12
12
|
export { Card } from '../Card';
|
|
13
|
-
export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps,
|
|
13
|
+
export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps, } from '../Card';
|
|
14
14
|
export { DataTable, Table, createColumnHelper } from '../DataTable';
|
|
15
15
|
export type { DataTableProps, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderProps, TableCellProps, TableContainerProps, TableTitleProps, TableSubtitleProps, TableActionsProps, Column, CellAlignment, ColumnWidth, UniqueRow, ObjectPaths, } from '../DataTable';
|
|
16
16
|
export * from '../Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAA;AAC5B,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -2126,18 +2126,40 @@
|
|
|
2126
2126
|
"stories": [
|
|
2127
2127
|
{
|
|
2128
2128
|
"id": "experimental-components-card--default",
|
|
2129
|
-
"code": "() => {\n return (\n <
|
|
2129
|
+
"code": "() => {\n return (\n <Card>\n <Card.Icon icon={RocketIcon} />\n <Card.Heading>Card Heading</Card.Heading>\n <Card.Description>\n This is a description of the card providing supplemental information.\n </Card.Description>\n <Card.Metadata>\n <PeopleIcon size={16} />3 contributors\n </Card.Metadata>\n </Card>\n )\n}"
|
|
2130
2130
|
},
|
|
2131
2131
|
{
|
|
2132
2132
|
"id": "experimental-components-card-features--with-image",
|
|
2133
|
-
"code": "() => {\n return (\n <
|
|
2133
|
+
"code": "() => {\n return (\n <Card>\n <Card.Image src=\"https://github.com/octocat.png\" alt=\"Octocat\" />\n <Card.Heading>Card with Image</Card.Heading>\n <Card.Description>\n This card uses an edge-to-edge image instead of an icon.\n </Card.Description>\n </Card>\n )\n}"
|
|
2134
2134
|
},
|
|
2135
2135
|
{
|
|
2136
2136
|
"id": "experimental-components-card-features--with-metadata",
|
|
2137
|
-
"code": "() => {\n return (\n <
|
|
2137
|
+
"code": "() => {\n return (\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Heading>primer/react</Card.Heading>\n <Card.Description>\n {\n \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n }\n </Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 1.2k stars\n </Card.Metadata>\n </Card>\n )\n}"
|
|
2138
|
+
},
|
|
2139
|
+
{
|
|
2140
|
+
"id": "experimental-components-card-features--with-menu",
|
|
2141
|
+
"code": "() => {\n return (\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Heading>primer/react</Card.Heading>\n <Card.Description>\n {\n \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n }\n </Card.Description>\n <Card.Action>\n <ActionMenu>\n <ActionMenu.Anchor>\n <IconButton\n icon={KebabHorizontalIcon}\n aria-label=\"More options for primer/react\"\n variant=\"invisible\"\n />\n </ActionMenu.Anchor>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Star</ActionList.Item>\n <ActionList.Item>Watch</ActionList.Item>\n <ActionList.Item>Fork</ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </Card.Action>\n </Card>\n )\n}"
|
|
2142
|
+
},
|
|
2143
|
+
{
|
|
2144
|
+
"id": "experimental-components-card-features--standalone-section",
|
|
2145
|
+
"code": "() => (\n <Card as=\"section\">\n <Card.Icon icon={RepoIcon} />\n <Card.Heading>primer/react</Card.Heading>\n <Card.Description>\n {\n 'Standalone cards render as a labelled <section> landmark. aria-labelledby is automatically wired to Card.Heading.'\n }\n </Card.Description>\n </Card>\n)"
|
|
2146
|
+
},
|
|
2147
|
+
{
|
|
2148
|
+
"id": "experimental-components-card-features--in-list",
|
|
2149
|
+
"code": "() => (\n <ul className={classes.CardList} aria-label=\"Repositories\">\n <li>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>primer/react</Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 1.2k stars\n </Card.Metadata>\n </Card>\n </li>\n <li>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>primer/css</Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 850 stars\n </Card.Metadata>\n </Card>\n </li>\n <li>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>primer/octicons</Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 2.1k stars\n </Card.Metadata>\n </Card>\n </li>\n </ul>\n)"
|
|
2150
|
+
},
|
|
2151
|
+
{
|
|
2152
|
+
"id": "experimental-components-card-features--interactive-content",
|
|
2153
|
+
"code": "() => {\n const repos = [\n {\n name: 'primer/react',\n },\n {\n name: 'primer/css',\n },\n {\n name: 'primer/octicons',\n },\n ]\n return (\n <ul className={classes.CardList} aria-label=\"Repositories\">\n {repos.map((repo) => (\n <li key={repo.name}>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>{repo.name}</Card.Description>\n <Card.Metadata>\n <Button leadingVisual={StarIcon} size=\"small\">\n Star <VisuallyHidden>{repo.name}</VisuallyHidden>\n </Button>\n <Button leadingVisual={RepoForkedIcon} size=\"small\">\n Fork <VisuallyHidden>{repo.name}</VisuallyHidden>\n </Button>\n </Card.Metadata>\n </Card>\n </li>\n ))}\n </ul>\n )\n}"
|
|
2138
2154
|
}
|
|
2139
2155
|
],
|
|
2140
2156
|
"props": [
|
|
2157
|
+
{
|
|
2158
|
+
"name": "children",
|
|
2159
|
+
"type": "React.ReactNode",
|
|
2160
|
+
"required": true,
|
|
2161
|
+
"description": "The contents of the card. Provide either `Card.*` subcomponents (for example `Card.Heading`, `Card.Description`, `Card.Metadata`) or any custom content. A card with no children will not render."
|
|
2162
|
+
},
|
|
2141
2163
|
{
|
|
2142
2164
|
"name": "className",
|
|
2143
2165
|
"type": "string",
|
|
@@ -2154,6 +2176,12 @@
|
|
|
2154
2176
|
"type": "'medium' | 'large'",
|
|
2155
2177
|
"defaultValue": "'large'",
|
|
2156
2178
|
"description": "Controls the border radius of the Card."
|
|
2179
|
+
},
|
|
2180
|
+
{
|
|
2181
|
+
"name": "as",
|
|
2182
|
+
"type": "'div' | 'section'",
|
|
2183
|
+
"defaultValue": "'div'",
|
|
2184
|
+
"description": "The HTML element to render. Use `'section'` for **standalone** Cards (not inside a list of cards) so screen readers announce the Card as a labelled region. When `Card.Heading` is present, `aria-labelledby` is automatically wired. Use the default `'div'` when the Card is inside an `<li>` of a list of cards."
|
|
2157
2185
|
}
|
|
2158
2186
|
],
|
|
2159
2187
|
"subcomponents": [
|
|
@@ -2195,21 +2223,42 @@
|
|
|
2195
2223
|
"name": "as",
|
|
2196
2224
|
"type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
|
|
2197
2225
|
"defaultValue": "'h3'",
|
|
2198
|
-
"description": "The heading level to render."
|
|
2226
|
+
"description": "The heading level to render. When the parent Card uses `as=\"section\"`, the heading's `id` is automatically wired to the section's `aria-labelledby`."
|
|
2199
2227
|
}
|
|
2200
2228
|
]
|
|
2201
2229
|
},
|
|
2202
2230
|
{
|
|
2203
2231
|
"name": "Card.Description",
|
|
2204
|
-
"props": [
|
|
2232
|
+
"props": [
|
|
2233
|
+
{
|
|
2234
|
+
"name": "children",
|
|
2235
|
+
"type": "React.ReactNode",
|
|
2236
|
+
"required": true,
|
|
2237
|
+
"description": "The descriptive text for the card. Rendered inside a `<p>` element so should be flowing text content."
|
|
2238
|
+
}
|
|
2239
|
+
]
|
|
2205
2240
|
},
|
|
2206
2241
|
{
|
|
2207
|
-
"name": "Card.
|
|
2208
|
-
"props": [
|
|
2242
|
+
"name": "Card.Action",
|
|
2243
|
+
"props": [
|
|
2244
|
+
{
|
|
2245
|
+
"name": "children",
|
|
2246
|
+
"type": "React.ReactNode",
|
|
2247
|
+
"required": true,
|
|
2248
|
+
"description": "Interactive control for the top-right corner of the card."
|
|
2249
|
+
}
|
|
2250
|
+
]
|
|
2209
2251
|
},
|
|
2210
2252
|
{
|
|
2211
2253
|
"name": "Card.Metadata",
|
|
2212
|
-
"props": [
|
|
2254
|
+
"props": [
|
|
2255
|
+
{
|
|
2256
|
+
"name": "children",
|
|
2257
|
+
"type": "React.ReactNode",
|
|
2258
|
+
"required": true,
|
|
2259
|
+
"description": "Metadata content for the bottom of the card. Accepts any content: plain text, icons, or other Primer components."
|
|
2260
|
+
}
|
|
2261
|
+
]
|
|
2213
2262
|
}
|
|
2214
2263
|
]
|
|
2215
2264
|
},
|
package/package.json
CHANGED