@ankhorage/zora 1.4.5 → 1.4.7
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAyB,SAAS,EAAE,MAAM,SAAS,CAAC;AA2GhE,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
|
|
@@ -3,16 +3,15 @@ import { Button } from '../../components/button';
|
|
|
3
3
|
import { Card } from '../../components/card';
|
|
4
4
|
import { Heading } from '../../components/heading';
|
|
5
5
|
import { Text } from '../../components/text';
|
|
6
|
-
import { Box, Stack } from '../../foundation';
|
|
6
|
+
import { Box, Grid, Stack } from '../../foundation';
|
|
7
7
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
8
8
|
function HeroInner({ themeId: _themeId, mode: _mode, title, description, eyebrow, primaryAction, secondaryAction, media, footer, align = 'start', layout = 'split', tone = 'subtle', compact = false, testID, }) {
|
|
9
9
|
const hasActions = primaryAction !== undefined || secondaryAction !== undefined;
|
|
10
10
|
const hasMedia = media !== undefined;
|
|
11
|
-
const direction = resolveDirection(layout, hasMedia);
|
|
12
11
|
const contentAlign = resolveContentAlign(align);
|
|
13
12
|
const textAlign = align === 'center' ? 'center' : undefined;
|
|
14
13
|
const mediaFirst = layout === 'mediaFirst';
|
|
15
|
-
const content = (<Box
|
|
14
|
+
const content = (<Box width="100%">
|
|
16
15
|
<Stack align={contentAlign} gap={compact ? 's' : 'm'}>
|
|
17
16
|
<Stack align={contentAlign} gap="xs">
|
|
18
17
|
{eyebrow !== undefined ? (<Text align={textAlign} tone="primary" variant="eyebrow">
|
|
@@ -21,7 +20,7 @@ function HeroInner({ themeId: _themeId, mode: _mode, title, description, eyebrow
|
|
|
21
20
|
<Heading align={textAlign} level={1} size={{ base: 'h2', md: compact ? 'h2' : 'display' }}>
|
|
22
21
|
{title}
|
|
23
22
|
</Heading>
|
|
24
|
-
{description !== undefined ? (<Text tone="muted"
|
|
23
|
+
{description !== undefined ? (<Text align={textAlign} tone="muted" variant={{ base: 'body', md: compact ? 'body' : 'lead' }}>
|
|
25
24
|
{description}
|
|
26
25
|
</Text>) : null}
|
|
27
26
|
</Stack>
|
|
@@ -34,12 +33,16 @@ function HeroInner({ themeId: _themeId, mode: _mode, title, description, eyebrow
|
|
|
34
33
|
{footer}
|
|
35
34
|
</Stack>
|
|
36
35
|
</Box>);
|
|
37
|
-
const mediaSlot = hasMedia ? <Box
|
|
38
|
-
|
|
39
|
-
<Stack align="center" direction={direction} gap={compact ? 'm' : 'l'}>
|
|
36
|
+
const mediaSlot = hasMedia ? <Box width="100%">{media}</Box> : null;
|
|
37
|
+
const body = hasMedia && layout !== 'stack' ? (<Grid cols={{ base: 1, md: 2 }} gap={compact ? 'm' : 'l'}>
|
|
40
38
|
{mediaFirst ? mediaSlot : content}
|
|
41
39
|
{mediaFirst ? content : mediaSlot}
|
|
42
|
-
</Stack>
|
|
40
|
+
</Grid>) : (<Stack align="center" direction="column" gap={compact ? 'm' : 'l'}>
|
|
41
|
+
{mediaFirst ? mediaSlot : content}
|
|
42
|
+
{mediaFirst ? content : mediaSlot}
|
|
43
|
+
</Stack>);
|
|
44
|
+
return (<Card compact={compact} testID={testID} tone={tone}>
|
|
45
|
+
{body}
|
|
43
46
|
</Card>);
|
|
44
47
|
}
|
|
45
48
|
function renderAction(action, role) {
|
|
@@ -50,10 +53,5 @@ function renderAction(action, role) {
|
|
|
50
53
|
function resolveContentAlign(align) {
|
|
51
54
|
return align === 'center' ? 'center' : 'flex-start';
|
|
52
55
|
}
|
|
53
|
-
function resolveDirection(layout, hasMedia) {
|
|
54
|
-
if (!hasMedia || layout === 'stack')
|
|
55
|
-
return 'column';
|
|
56
|
-
return { base: 'column', md: 'row' };
|
|
57
|
-
}
|
|
58
56
|
export const Hero = withZoraThemeScope(HeroInner);
|
|
59
57
|
//# sourceMappingURL=Hero.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,SAAS,CAAC,EACjB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,eAAe,EACf,KAAK,EACL,MAAM,EACN,KAAK,GAAG,OAAO,EACf,MAAM,GAAG,OAAO,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,MAAM,GACI;IACV,MAAM,UAAU,GAAG,aAAa,KAAK,SAAS,IAAI,eAAe,KAAK,SAAS,CAAC;IAChF,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC;IACrC,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAM,KAAK,YAAY,CAAC;IAE3C,MAAM,OAAO,GAAG,CACd,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CACf;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CACnD;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,IAAI,CAClC;UAAA,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACvB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CACtD;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,OAAO,CACN,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAErD;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,OAAO,CACT;UAAA,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,OAAO,CACZ,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAEzD;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,KAAK,CAEP;;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,CACZ,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CACzC,GAAG,CAAC,GAAG,CACP,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAEtD;YAAA,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5E;YAAA,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CACpF;UAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CAER;;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;IAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEpE,MAAM,IAAI,GACR,QAAQ,IAAI,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAC/B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CACvD;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CACjC;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CACnC;MAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAChE;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CACjC;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CACnC;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IAEJ,OAAO,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CACjD;MAAA,CAAC,IAAI,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,MAAkB,EAAE,IAA6B;IACrE,OAAO,CACL,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC1B,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CACrE,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACxB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAElE;MAAA,CAAC,MAAM,CAAC,KAAK,CACf;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,KAAgB;IAC3C,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;AACtD,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Grid, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { HeroAction, HeroAlign, HeroProps } from './types';\n\nfunction HeroInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n primaryAction,\n secondaryAction,\n media,\n footer,\n align = 'start',\n layout = 'split',\n tone = 'subtle',\n compact = false,\n testID,\n}: HeroProps) {\n const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n const hasMedia = media !== undefined;\n const contentAlign = resolveContentAlign(align);\n const textAlign = align === 'center' ? 'center' : undefined;\n const mediaFirst = layout === 'mediaFirst';\n\n const content = (\n <Box width=\"100%\">\n <Stack align={contentAlign} gap={compact ? 's' : 'm'}>\n <Stack align={contentAlign} gap=\"xs\">\n {eyebrow !== undefined ? (\n <Text align={textAlign} tone=\"primary\" variant=\"eyebrow\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading\n align={textAlign}\n level={1}\n size={{ base: 'h2', md: compact ? 'h2' : 'display' }}\n >\n {title}\n </Heading>\n {description !== undefined ? (\n <Text\n align={textAlign}\n tone=\"muted\"\n variant={{ base: 'body', md: compact ? 'body' : 'lead' }}\n >\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {hasActions ? (\n <Stack\n align={contentAlign}\n direction={{ base: 'column', md: 'row' }}\n gap=\"s\"\n justify={align === 'center' ? 'center' : 'flex-start'}\n >\n {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}\n {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}\n </Stack>\n ) : null}\n\n {footer}\n </Stack>\n </Box>\n );\n\n const mediaSlot = hasMedia ? <Box width=\"100%\">{media}</Box> : null;\n\n const body =\n hasMedia && layout !== 'stack' ? (\n <Grid cols={{ base: 1, md: 2 }} gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Grid>\n ) : (\n <Stack align=\"center\" direction=\"column\" gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Stack>\n );\n\n return (\n <Card compact={compact} testID={testID} tone={tone}>\n {body}\n </Card>\n );\n}\n\nfunction renderAction(action: HeroAction, role: 'primary' | 'secondary') {\n return (\n <Button\n disabled={action.disabled}\n emphasis={action.emphasis ?? (role === 'primary' ? 'solid' : 'soft')}\n onPress={action.onPress}\n tone={action.tone ?? (role === 'primary' ? 'primary' : 'neutral')}\n >\n {action.label}\n </Button>\n );\n}\n\nfunction resolveContentAlign(align: HeroAlign) {\n return align === 'center' ? 'center' : 'flex-start';\n}\n\nexport const Hero = withZoraThemeScope(HeroInner);\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.4.
|
|
4
|
+
"version": "1.4.7",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -4,9 +4,9 @@ import { Button } from '../../components/button';
|
|
|
4
4
|
import { Card } from '../../components/card';
|
|
5
5
|
import { Heading } from '../../components/heading';
|
|
6
6
|
import { Text } from '../../components/text';
|
|
7
|
-
import { Box, Stack } from '../../foundation';
|
|
7
|
+
import { Box, Grid, Stack } from '../../foundation';
|
|
8
8
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
9
|
-
import type { HeroAction, HeroAlign,
|
|
9
|
+
import type { HeroAction, HeroAlign, HeroProps } from './types';
|
|
10
10
|
|
|
11
11
|
function HeroInner({
|
|
12
12
|
themeId: _themeId,
|
|
@@ -26,13 +26,12 @@ function HeroInner({
|
|
|
26
26
|
}: HeroProps) {
|
|
27
27
|
const hasActions = primaryAction !== undefined || secondaryAction !== undefined;
|
|
28
28
|
const hasMedia = media !== undefined;
|
|
29
|
-
const direction = resolveDirection(layout, hasMedia);
|
|
30
29
|
const contentAlign = resolveContentAlign(align);
|
|
31
30
|
const textAlign = align === 'center' ? 'center' : undefined;
|
|
32
31
|
const mediaFirst = layout === 'mediaFirst';
|
|
33
32
|
|
|
34
33
|
const content = (
|
|
35
|
-
<Box
|
|
34
|
+
<Box width="100%">
|
|
36
35
|
<Stack align={contentAlign} gap={compact ? 's' : 'm'}>
|
|
37
36
|
<Stack align={contentAlign} gap="xs">
|
|
38
37
|
{eyebrow !== undefined ? (
|
|
@@ -49,8 +48,8 @@ function HeroInner({
|
|
|
49
48
|
</Heading>
|
|
50
49
|
{description !== undefined ? (
|
|
51
50
|
<Text
|
|
52
|
-
tone="muted"
|
|
53
51
|
align={textAlign}
|
|
52
|
+
tone="muted"
|
|
54
53
|
variant={{ base: 'body', md: compact ? 'body' : 'lead' }}
|
|
55
54
|
>
|
|
56
55
|
{description}
|
|
@@ -75,14 +74,24 @@ function HeroInner({
|
|
|
75
74
|
</Box>
|
|
76
75
|
);
|
|
77
76
|
|
|
78
|
-
const mediaSlot = hasMedia ? <Box
|
|
77
|
+
const mediaSlot = hasMedia ? <Box width="100%">{media}</Box> : null;
|
|
79
78
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
79
|
+
const body =
|
|
80
|
+
hasMedia && layout !== 'stack' ? (
|
|
81
|
+
<Grid cols={{ base: 1, md: 2 }} gap={compact ? 'm' : 'l'}>
|
|
82
|
+
{mediaFirst ? mediaSlot : content}
|
|
83
|
+
{mediaFirst ? content : mediaSlot}
|
|
84
|
+
</Grid>
|
|
85
|
+
) : (
|
|
86
|
+
<Stack align="center" direction="column" gap={compact ? 'm' : 'l'}>
|
|
83
87
|
{mediaFirst ? mediaSlot : content}
|
|
84
88
|
{mediaFirst ? content : mediaSlot}
|
|
85
89
|
</Stack>
|
|
90
|
+
);
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<Card compact={compact} testID={testID} tone={tone}>
|
|
94
|
+
{body}
|
|
86
95
|
</Card>
|
|
87
96
|
);
|
|
88
97
|
}
|
|
@@ -104,9 +113,4 @@ function resolveContentAlign(align: HeroAlign) {
|
|
|
104
113
|
return align === 'center' ? 'center' : 'flex-start';
|
|
105
114
|
}
|
|
106
115
|
|
|
107
|
-
function resolveDirection(layout: HeroLayout, hasMedia: boolean) {
|
|
108
|
-
if (!hasMedia || layout === 'stack') return 'column' as const;
|
|
109
|
-
return { base: 'column', md: 'row' } as const;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
116
|
export const Hero = withZoraThemeScope(HeroInner);
|