Skip to content
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

[IOPLT-91] Creating badge and tags showcase #22

Merged
merged 12 commits into from
Jul 21, 2023
Merged

[IOPLT-91] Creating badge and tags showcase #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b7a6626
Creating badge and tags showcase
drmarro Jul 14, 2023
727f52a
Fixing test
drmarro Jul 14, 2023
ab91659
Removing IOBadge because it is deprecated
drmarro Jul 18, 2023
1b90c99
Fixing navigator and tests
drmarro Jul 18, 2023
b89859c
Fixing error checks
drmarro Jul 18, 2023
a67074c
Merge branch 'main' into IOPLT-91-creating-badge-and-tag-showcase
CrisTofani Jul 19, 2023
628b944
Merge branch 'main' into IOPLT-91-creating-badge-and-tag-showcase
CrisTofani Jul 20, 2023
35811f7
Fixing error
drmarro Jul 20, 2023
d567a0f
Merge branch 'main' of github.com:pagopa/io-app-design-system into IO…
drmarro Jul 21, 2023
5aa7c2a
Removing legacy components
drmarro Jul 21, 2023
5d38913
Fixing imports
drmarro Jul 21, 2023
099a34c
Merge branches 'IOPLT-91-creating-badge-and-tag-showcase' and 'main' …
drmarro Jul 21, 2023
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
9 changes: 9 additions & 0 deletions example/src/navigation/navigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { DSAdvice } from "../pages/Advice";
import { DSAlert } from "../pages/Alert";
import { Badges } from "../pages/Badges";
import { Icons } from "../pages/Icons";
import { Layout } from "../pages/Layout";
import { Logos } from "../pages/Logos";
Expand Down Expand Up @@ -41,6 +42,14 @@ const AppNavigator = () => (
headerBackTitleVisible: false
}}
/>
<Stack.Screen
name={APP_ROUTES.COMPONENTS.BADGE.route}
component={Badges}
options={{
headerTitle: APP_ROUTES.COMPONENTS.BADGE.title,
headerBackTitleVisible: false
}}
/>
<Stack.Screen
name={APP_ROUTES.FOUNDATION.TYPOGRAPHY.route}
component={Typography}
Expand Down
105 changes: 105 additions & 0 deletions example/src/pages/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import {
Badge,
H2,
HSpacer,
IOColors,
IOStyles,
IOTagRadius,
Tag,
VSpacer
} from "@pagopa/io-app-design-system";
import React from "react";
import { View } from "react-native";
import { ComponentViewerBox } from "../components/ComponentViewerBox";
import { Screen } from "../components/Screen";

export const Badges = () => (
<Screen>
<H2 weight={"Bold"} style={{ marginBottom: 16 }}>
Tag
</H2>
{renderTag()}

<VSpacer size={16} />

<H2 weight={"Bold"} style={{ marginVertical: 16 }}>
Badge
</H2>
{renderBadge()}

<VSpacer size={40} />
</Screen>
);

const renderBadge = () => (
<>
<View style={IOStyles.row}>
<Badge text={"Default"} variant="default" />
</View>
<VSpacer size={16} />
<View style={IOStyles.row}>
<Badge text={"Info"} variant="info" />
<HSpacer size={16} />
<Badge text={"Warning"} variant="warning" />
<HSpacer size={16} />
<Badge text={"Error"} variant="error" />
<HSpacer size={16} />
<Badge text={"Success"} variant="success" />
</View>
<VSpacer size={16} />
<View style={IOStyles.row}>
<Badge text={"Purple"} variant="purple" />
<HSpacer size={16} />
<Badge text={"Light blue"} variant="lightBlue" />
<HSpacer size={16} />
<Badge text={"Blue"} variant="blue" />
<HSpacer size={16} />
<Badge text={"Turquoise"} variant="turquoise" />
<HSpacer size={16} />
</View>
<VSpacer size={16} />
<View
style={{
backgroundColor: IOColors.bluegrey,
padding: 16,
borderRadius: 8
}}
>
<View style={IOStyles.row}>
<Badge text={"Default"} variant="default" />
<HSpacer size={16} />
<Badge text={"Contrast"} variant="contrast" />
</View>
</View>
</>
);

const renderTag = () => (
<View>
<ComponentViewerBox name={"Tag, different variants"}>
<Tag text={"Entro il 30 mag"} variant="warning" />
<VSpacer size={8} />
<Tag text={"Completato"} variant="success" />
<VSpacer size={8} />
<Tag text={"Scaduto"} variant="error" />
<VSpacer size={8} />
<View style={IOStyles.row}>
<Tag text={"Certificato"} variant="qrCode" />
<HSpacer size={8} />
<Tag text={"Valore legale"} variant="legalMessage" />
</View>
</ComponentViewerBox>
<ComponentViewerBox name={"Tag, stress test"}>
<View
style={{
backgroundColor: IOColors["error-100"],
padding: 8,
width: "60%",
borderRadius: IOTagRadius + 8
}}
>
<Tag text={"Looooooooong string"} variant="error" />
</View>
</ComponentViewerBox>
</View>
);
6 changes: 4 additions & 2 deletions src/components/badge/__test__/badge.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import { Badge } from "../Badge";

describe("Test Badge Components", () => {
it("Badge Snapshot", () => {
const badge = TestRenderer.create(<Badge text={"text"} variant={"default"}></Badge>).toJSON();
const badge = TestRenderer.create(
<Badge text={"text"} variant={"default"}></Badge>
).toJSON();
expect(badge).toMatchSnapshot();
});
});
});