Skip to content

Infra/ migrate Card to designTokens #1919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 3, 2022
Merged

Infra/ migrate Card to designTokens #1919

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e23d247
migrate Card to designTokens
lidord-wix Mar 23, 2022
c0fe22b
PR fixes
lidord-wix Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 33 additions & 35 deletions demo/src/screens/componentScreens/CardsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
onPress={() => this.setState({selected2: !selected2})}
activeOpacity={1}
selectionOptions={{
color: Colors.grey10,
color: Colors.$backgroundInverted,
indicatorSize: 25,
borderWidth: 3
}}
Expand All @@ -59,13 +59,13 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
return (
<Card.Section
content={[
{text: 'You’re Invited!', text70: true, grey10: true},
{text: 'You’re Invited!', text70: true, $textDefault: true},
{
text: '222 Join Old The Town Barbershop Official Store. Download the Wix app to...',
text80: true,
grey10: true
$textDefault: true
},
{text: 'wix.to/A465c', text90: true, grey50: true}
{text: 'wix.to/A465c', text90: true, $textDisabled: true}
]}
style={{padding: 20, flex: 1}}
/>
Expand All @@ -75,14 +75,14 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
renderText = () => {
return (
<View padding-20 flex>
<Text text70 grey10>
<Text text70 $textDefault>
You’re Invited!
</Text>
<Text text80 grey10>
<Text text80 $textDefault>
222 Join Old The Town Barbershop Official Store. Download the Wix app
to...
</Text>
<Text text90 grey50>
<Text text90 $textDefault>
wix.to/A465c
</Text>
</View>
Expand All @@ -98,7 +98,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
onPress={() => {}}
borderRadius={borderRadius}
useNative
backgroundColor={Colors.white}
bg-$backgroundElevated
activeOpacity={1}
activeScale={isImageOnLeft ? 0.96 : 1.04}
>
Expand All @@ -123,10 +123,9 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
return (
<Card style={{marginBottom: 10}} onPress={() => {}}>
<Card.Section
bg-white
content={[
{text: 'You’re Invited!', text70: true, grey10: true},
{text: 'join now', text90: true, grey50: true}
{text: 'You’re Invited!', text70: true, $textDefault: true},
{text: 'join now', text90: true, $textDisabled: true}
]}
style={{padding: 20}}
/>
Expand All @@ -139,20 +138,20 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
return (
<Card {...cardProps} flex height={160} onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
<Card.Section
bg-red30
bg-$backgroundDangerHeavy
padding-20
flex-3
content={[
{text: 'Special sale!', text70: true, white: true},
{text: '10%', text60: true, white: true}
{text: 'Special sale!', text70: true, $textDefaultLight: true},
{text: '10%', text60: true, $textDefaultLight: true}
]}
contentStyle={{alignItems: 'center'}}
/>
<Card.Section
bg-white
bg-$backgroundElevated
padding-20
flex
content={[{text: 'All site', text70: true, grey10: true}]}
content={[{text: 'All site', text70: true, $textDefault: true}]}
contentStyle={{alignItems: 'center', margin: 0, padding: 0}}
/>
</Card>
Expand All @@ -173,9 +172,9 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
<Card {...cardProps} flex marginV-10 onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
{image}
<Card.Section
bg-white
bg-$backgroundElevated
padding-20
content={[{text: 'All site', text70: true, grey10: true}]}
content={[{text: 'All site', text70: true, $textDefault: true}]}
contentStyle={{alignItems: 'center'}}
/>
</Card>
Expand All @@ -190,7 +189,6 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
this.renderComplexImage({'marginR-5': true},
<Card.Section
flex
backgroundColor={Colors.blue20}
imageSource={featureIcon}
imageStyle={{
width: 25,
Expand All @@ -211,8 +209,8 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
imageSource={cardImage2}
imageStyle={{height: '100%'}}
content={[
{text: 'Special sale!', text70: true, blue10: true},
{text: '10%', text60: true, blue10: true}
{text: 'Special sale!', text70: true, $textGeneral: true},
{text: '10%', text60: true, $textGeneral: true}
]}
contentStyle={{
flex: 1,
Expand All @@ -230,9 +228,9 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
<ScrollView style={{height: 100, marginBottom: 20}} horizontal showsHorizontalScrollIndicator={false}>
{_.times(4, i => {
return (
<Card key={i} width={100} style={{marginRight: 20}} backgroundColor={Colors.white}>
<Card key={i} width={100} style={{marginRight: 20}}>
<View padding-15>
<Text text30 grey30>
<Text text30 $textNeutral>
{i}
</Text>
</View>
Expand All @@ -253,7 +251,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen

renderComplexExample = () => {
return _.map(posts, (post, i) => {
const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
const statusColor = post.status === 'Published' ? Colors.$textSuccess : Colors.$textMajor;

return (
<Card
Expand All @@ -266,23 +264,23 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
imageStyle={{height: 160}}
/>

<View padding-20 bg-white>
<Text text40 color={Colors.grey10}>
<View padding-20>
<Text text40 $textDefault>
{post.title}
</Text>
<View row>
<Text text90 color={statusColor}>
{post.status}
</Text>
<Text text90> | {post.timestamp}</Text>
<Text text90 $textDefault> | {post.timestamp}</Text>
</View>

<Text text70 color={Colors.grey10}>
<Text text70 $textDefault>
{post.description}
</Text>

<View>
<Text text90 color={Colors.grey50}>
<Text text90 $textDisabled>
{post.likes} Likes
</Text>
<View row right>
Expand Down Expand Up @@ -314,25 +312,25 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen

render() {
return (
<View bg-grey70>
<View>
<ScrollView>
<View flex padding-20>
<Text h1 marginB-s4>Cards</Text>
<Text h3>Selectable Cards</Text>
<Text h1 marginB-s4 $textDefault>Cards</Text>
<Text h3 $textDefault>Selectable Cards</Text>
{this.renderSelectableCards()}
<Text h3 marginV-s5>
<Text h3 marginV-s5 $textDefault>
Horizontal Cards
</Text>
{this.renderHorizontalCard(true, 0, true)}
{this.renderHorizontalCard(true, 20, false)}
{this.renderHorizontalCard(false, 0, false)}
{this.renderHorizontalCard(false, 20, true)}
<Text h3 marginV-s5>
<Text h3 marginV-s5 $textDefault>
Card Sections
</Text>
{this.renderCoupons()}
{this.renderComplexImages()}
<Text h3 marginB-s4>
<Text h3 marginB-s4 $textDefault>
Others
</Text>
{this.renderCustomContent()}
Expand Down
8 changes: 4 additions & 4 deletions src/components/card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ const BlurView = BlurViewPackage?.BlurView;
const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
const DEFAULT_SELECTION_PROPS = {
borderWidth: 2,
color: Colors.primary,
color: Colors.$backgroundPrimaryHeavy,
indicatorSize: 20,
icon: Assets.icons.checkSmall,
iconColor: Colors.white,
iconColor: Colors.$iconDefaultLight,
hideIndicator: false
};

Expand Down Expand Up @@ -186,7 +186,7 @@ class Card extends PureComponent<PropTypes, State> {
}

get backgroundStyle() {
const {enableBlur, backgroundColor = Colors.white} = this.props;
const {enableBlur, backgroundColor = Colors.$backgroundElevated} = this.props;

if (Constants.isIOS && enableBlur) {
return {backgroundColor: Colors.rgba(backgroundColor, 0.85)};
Expand Down Expand Up @@ -308,7 +308,7 @@ function createStyles({width, height, borderRadius, selectionOptions}: CardProps
},
containerShadow: {
// sh30 bottom
shadowColor: Colors.grey40,
shadowColor: Colors.$backgroundNeutralIdle,
shadowOpacity: 0.25,
shadowRadius: 12,
shadowOffset: {height: 5, width: 0}
Expand Down