@lightningtv/solid-ui
Advanced tools
Comparing version 0.23.0-rc to 0.23.0-rc1
@@ -43,2 +43,3 @@ /* | ||
justifyContent: 'flexStart', | ||
alignItems: 'center' | ||
}, | ||
@@ -45,0 +46,0 @@ tones: { |
@@ -20,3 +20,3 @@ /** | ||
import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -23,0 +23,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -32,7 +32,7 @@ /* | ||
display: 'flex', | ||
justifyContent: 'center', | ||
justifyContent: 'flexStart', | ||
color: theme.color.textNeutral, | ||
padding: [theme.spacer.md, theme.spacer.lg], // TODO themed padding values | ||
height: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
borderRadius: [theme.radius.md, theme.radius.md, theme.radius.md, theme.radius.none], | ||
height: theme.typography.caption1.lineHeight + theme.spacer.md, | ||
neutral: { | ||
@@ -62,3 +62,6 @@ backgroundColor: theme.color.fillNeutral | ||
...theme.typography.caption1, | ||
color: theme.color.textInverse | ||
color: theme.color.textInverse, | ||
lineHeight: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
marginRight: theme.spacer.lg, | ||
marginLeft: theme.spacer.lg | ||
}, | ||
@@ -65,0 +68,0 @@ tones: { |
@@ -17,3 +17,3 @@ /* | ||
*/ | ||
import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -20,0 +20,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -81,3 +81,3 @@ /* | ||
*/ | ||
bottom?: NodeProps['children']; | ||
bottomCenter?: NodeProps['children']; | ||
@@ -84,0 +84,0 @@ /** |
@@ -35,3 +35,3 @@ /* | ||
return (<BadgeContainer {...props} height={props.height || styles.Text.base.lineHeight} tone={tone()} style={props.style}> | ||
<Text color={props.textColor} lineHeight={props.height || styles.Text.base.lineHeight} style={[ | ||
<Text color={props.textColor} lineHeight={(props.height || styles.Text.base.lineHeight) + 2} style={[ | ||
styles.Text.tones[tone()], // | ||
@@ -38,0 +38,0 @@ styles.Text.base |
@@ -42,3 +42,4 @@ declare const meta: { | ||
title: string; | ||
height: number; | ||
}; | ||
}; |
@@ -58,9 +58,10 @@ /* | ||
return (<BadgeContainer {...args}> | ||
<Icon style={[styles.Icon.tones[args.tone ?? styles.tone], styles.Icon.base]} tone={args.tone ?? styles.tone} src={lightning} width={25} height={25}/> | ||
<Text style={[styles.Text.tones[args.tone ?? styles.tone], styles.Text.base]}>{args.title}</Text> | ||
<Icon style={[styles.Icon.tones[args.tone ?? styles.tone], styles.Icon.base]} tone={args.tone ?? styles.tone} src={lightning} width={25} height={25} marginLeft={10}/> | ||
<Text marginLeft={6} style={[styles.Text.tones[args.tone ?? styles.tone], styles.Text.base]}>{args.title}</Text> | ||
</BadgeContainer>); | ||
}, | ||
args: { | ||
title: 'Badge Text' | ||
title: 'Badge Text', | ||
height: 38 | ||
} | ||
}; |
@@ -39,2 +39,3 @@ /* | ||
justifyContent: 'flexStart', | ||
alignItems: 'center' | ||
}, | ||
@@ -41,0 +42,0 @@ tones: { |
@@ -19,3 +19,3 @@ /** | ||
*/ | ||
import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -22,0 +22,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -19,10 +19,6 @@ /** | ||
import {} from 'solid-js'; | ||
import { Text } from '@lightningtv/solid'; | ||
import { withPadding } from '../../utils/index.js'; | ||
import { View, Text } from '@lightningtv/solid'; | ||
import styles from './Label.styles.js'; | ||
withPadding; | ||
const Label = props => { | ||
return (<node use:withPadding={props.padding ?? | ||
styles.Container.tones[props.tone ?? styles.tone]?.padding ?? | ||
styles.Container.base.padding} {...props} color={props.backgroundColor} borderRadius={props.radius} | ||
return (<View {...props} color={props.backgroundColor} borderRadius={props.radius} | ||
// @ts-expect-error TODO type needs to be fixed in framework | ||
@@ -40,4 +36,4 @@ style={[ | ||
</Text> | ||
</node>); | ||
</View>); | ||
}; | ||
export default Label; |
@@ -28,7 +28,7 @@ /* | ||
display: 'flex', | ||
justifyContent: 'center', | ||
justifyContent: 'flexStart', | ||
color: theme.color.textNeutral, | ||
padding: [theme.spacer.md, theme.spacer.lg], // TODO themed padding values | ||
height: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
borderRadius: [theme.radius.md, theme.radius.md, theme.radius.md, theme.radius.none], | ||
height: theme.typography.caption1.lineHeight + theme.spacer.md, | ||
neutral: { | ||
@@ -57,3 +57,6 @@ backgroundColor: theme.color.fillNeutral | ||
...theme.typography.caption1, | ||
color: theme.color.textInverse | ||
color: theme.color.textInverse, | ||
lineHeight: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
marginRight: theme.spacer.lg, | ||
marginLeft: theme.spacer.lg | ||
}, | ||
@@ -60,0 +63,0 @@ tones: { |
@@ -1,2 +0,2 @@ | ||
import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -3,0 +3,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -48,3 +48,3 @@ /* | ||
const contentSpacingY = createMemo(() => getContentSpacingY(props)); | ||
return (<node use:withPadding={padding()} {...props} borderRadius={props.radius} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} | ||
return (<View {...props} borderRadius={props.radius} onFocusChanged={setIsFocused} | ||
// @ts-expect-error TODO type needs to be fixed in framework | ||
@@ -63,3 +63,3 @@ style={[ | ||
<View x={width() - padding()[0]} y={padding()[1]} mountX={1}> | ||
<View right={padding()[0]} y={padding()[1]}> | ||
{props.topRight} | ||
@@ -79,3 +79,3 @@ </View> | ||
]} x={padding()[0]} y={height() + contentSpacingY()} width={width() - padding()[1] * 2}> | ||
{props.bottom} | ||
{props.bottomCenter} | ||
</View> | ||
@@ -85,6 +85,6 @@ </Show> | ||
{/* @ts-expect-error doesn't get rendered if progress is falsy */} | ||
<ProgressBar {...props.progressBar} width={width() - padding()[0] * 2} x={padding()[0]} y={height() - paddingYProgress() - Number(props?.progressBar?.height ?? 0)}/> | ||
<ProgressBar {...props.progressBar} width={width() - padding()[0] * 2} x={padding()[0]} bottom={paddingYProgress()}/> | ||
</Show> | ||
</node>); | ||
</View>); | ||
}; | ||
export default Tile; |
@@ -105,3 +105,3 @@ /* | ||
render: args => { | ||
return (<Tile {...args} topLeft={<Badge title="HD"/>} topRight={<Label width={75} title="Label" mountX={0.5}/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottom={<Metadata {...args.metadata}/>}/>); | ||
return (<Tile {...args} topLeft={<Badge title="HD"/>} topRight={<Label width={75} title="Label" mountX={0.5}/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottomCenter={<Metadata {...args.metadata}/>}/>); | ||
}, | ||
@@ -128,3 +128,3 @@ args: { | ||
render: args => { | ||
return (<Tile {...args} topLeft={<Label width={75} title="Label"/>} topRight={<Badge title="HD"/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottom={<Metadata {...args.metadata}/>}/>); | ||
return (<Tile {...args} topLeft={<Label width={75} title="Label"/>} topRight={<Badge title="HD"/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottomCenter={<Metadata {...args.metadata}/>}/>); | ||
}, | ||
@@ -131,0 +131,0 @@ args: { |
@@ -59,3 +59,3 @@ import type { NodeProps, NodeStyles } from '@lightningtv/solid'; | ||
*/ | ||
bottom?: NodeProps['children']; | ||
bottomCenter?: NodeProps['children']; | ||
/** | ||
@@ -62,0 +62,0 @@ * props passed to the child ProgressBar, rendered at the bottom of the component. |
{ | ||
"name": "@lightningtv/solid-ui", | ||
"version": "0.23.0-rc", | ||
"version": "0.23.0-rc1", | ||
"description": "A shared library of components for the LightningJS Solid Framework.", | ||
@@ -51,4 +51,4 @@ "main": "dist/index.js", | ||
"peerDependencies": { | ||
"@lightningtv/core": "^1.5.0", | ||
"@lightningtv/solid": "^1.6.0", | ||
"@lightningtv/core": "^1.5.2", | ||
"@lightningtv/solid": "^1.6.2", | ||
"solid-js": "*" | ||
@@ -55,0 +55,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
17970
742123