Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@lightningtv/solid-ui

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lightningtv/solid-ui - npm Package Compare versions

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