[IOPLT-89] Creating Selection components showcase (#19)

## Short description Creating the showcase of the selection components ## List of changes proposed in this pull request Added the following components to the DS: - Checkbox - CheckboxListItem - RawCheckbox - Radiogroup - RadioListItem - RemoteSwitch - Switch - SwitchListItem - TouchableDefaultOpacity Added the following page to the Showcase: - Selection --------- Co-authored-by: Cristiano Tofani <[email protected]>
pagopa · Jul 21, 2023 · 8956cf9 · 8956cf9
1 parent 4fa54f7
commit 8956cf9
Show file tree

Hide file tree

Showing 12 changed files with 977 additions and 186 deletions.
diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
@@ -6,6 +6,8 @@ import { Badges } from "../pages/Badges";
 import { Icons } from "../pages/Icons";
 import { Layout } from "../pages/Layout";
 import { Logos } from "../pages/Logos";
+import { Selection } from "../pages/Selection";
+
 import MainScreen from "../pages/MainScreen";
 import { Pictograms } from "../pages/Pictograms";
 import { Typography } from "../pages/Typography";
@@ -90,6 +92,14 @@ const AppNavigator = () => (
         headerBackTitleVisible: false
       }}
     />
+    <Stack.Screen
+      name={APP_ROUTES.COMPONENTS.SELECTION.route}
+      component={Selection}
+      options={{
+        headerTitle: APP_ROUTES.COMPONENTS.SELECTION.title,
+        headerBackTitleVisible: false
+      }}
+    />
   </Stack.Navigator>
 );
 

diff --git a/example/src/pages/Selection.tsx b/example/src/pages/Selection.tsx
@@ -0,0 +1,274 @@
+import {
+  CheckboxLabel,
+  ListItemCheckbox,
+  Divider,
+  H2,
+  NativeSwitch,
+  NewRadioItem,
+  RadioGroup,
+  SwitchLabel,
+  ListItemSwitch,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import React, { useState } from "react";
+import { View } from "react-native";
+import { ComponentViewerBox } from "../components/ComponentViewerBox";
+import { Screen } from "../components/Screen";
+
+export const Selection = () => (
+  <Screen>
+    <H2 weight={"Bold"} style={{ marginVertical: 16 }}>
+      Checkbox
+    </H2>
+    {/* CheckboxLabel */}
+    {renderCheckboxLabel()}
+    {/* ListItemCheckbox */}
+    {renderListItemCheckbox()}
+    <H2 weight={"Bold"} style={{ marginVertical: 16 }}>
+      Radio
+    </H2>
+    {/* RadioListItem */}
+    <RadioListItemsShowroom />
+    <H2 weight={"Bold"} style={{ marginVertical: 16 }}>
+      Switch
+    </H2>
+    {/* Native Switch */}
+    <NativeSwitchShowroom />
+    {/* ListItemSwitch */}
+    <ListItemSwitchShowroom />
+    {/* SwitchLabel */}
+    {renderAnimatedSwitch()}
+  </Screen>
+);
+
+const renderCheckboxLabel = () => (
+  <>
+    <ComponentViewerBox name="CheckboxLabel">
+      <CheckboxLabel label="This is a test" />
+      <VSpacer size={16} />
+      <CheckboxLabel label="This is a test with a very loooong looooooooong loooooooong text" />
+    </ComponentViewerBox>
+    <ComponentViewerBox name="CheckboxLabel (disabled)">
+      <CheckboxLabel disabled checked={true} label="This is a test" />
+      <VSpacer size={16} />
+      <CheckboxLabel disabled label="This is a test" />
+    </ComponentViewerBox>
+  </>
+);
+
+const renderListItemCheckbox = () => (
+  <>
+    <ComponentViewerBox name="ListItemCheckbox">
+      <ListItemCheckbox
+        value="Usa configurazione rapida"
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        icon="coggle"
+        value="Usa configurazione rapida"
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        value="Usa configurazione rapida"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        value="Questa è un'altra prova ancora più lunga per andare su due righe"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        icon="bonus"
+        value="Let's try with a loooong loooooong looooooong title + icon"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        icon="coggle"
+        value="Usa configurazione rapida"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti."
+        }
+        accessibilityLabel={""}
+      />
+    </ComponentViewerBox>
+    <ComponentViewerBox name="ListItemCheckbox (disabled)">
+      <ListItemCheckbox
+        disabled
+        value="Usa configurazione rapida"
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        disabled
+        icon="coggle"
+        value="Usa configurazione rapida"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti."
+        }
+        accessibilityLabel={""}
+      />
+      <Divider />
+      <ListItemCheckbox
+        disabled
+        selected={true}
+        icon="coggle"
+        value="Usa configurazione rapida"
+        accessibilityLabel={""}
+      />
+    </ComponentViewerBox>
+  </>
+);
+
+// RADIO ITEMS
+
+const mockRadioItems = (): ReadonlyArray<NewRadioItem<string>> => [
+  {
+    icon: "coggle",
+    value: "Let's try with a basic title",
+    description:
+      "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano.",
+    id: "example-1"
+  },
+  {
+    value: "Let's try with a basic title",
+    description:
+      "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti.",
+    id: "example-2"
+  },
+  {
+    value: "Let's try with a very looong loooooong title instead",
+    id: "example-3"
+  },
+  {
+    value: "Let's try with a disabled item",
+    description:
+      "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti.",
+    id: "example-disabled",
+    disabled: true
+  }
+];
+
+const RadioListItemsShowroom = () => {
+  const [selectedItem, setSelectedItem] = useState<string | undefined>(
+    "example-1"
+  );
+
+  return (
+    <ComponentViewerBox name="RadioListItem">
+      <RadioGroup<string>
+        key="check_income"
+        items={mockRadioItems()}
+        selectedItem={selectedItem}
+        onPress={setSelectedItem}
+      />
+    </ComponentViewerBox>
+  );
+};
+
+// SWITCH
+
+const renderAnimatedSwitch = () => (
+  <ComponentViewerBox name="AnimatedSwitch, dismissed in favor of the native one">
+    <SwitchLabel label="This is a test" />
+    <VSpacer size={16} />
+    <SwitchLabel label="This is a test with a very loooong looooooong loooooooong text" />
+  </ComponentViewerBox>
+);
+
+const NativeSwitchShowroom = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <ComponentViewerBox name="NativeSwitch">
+      <View style={{ alignSelf: "flex-start" }}>
+        <NativeSwitch value={isEnabled} onValueChange={toggleSwitch} />
+      </View>
+    </ComponentViewerBox>
+  );
+};
+
+type ListItemSwitchSampleProps = Pick<
+  React.ComponentProps<typeof ListItemSwitch>,
+  "label" | "description" | "value"
+>;
+
+const ListItemSwitchSample = ({
+  value,
+  label,
+  description
+}: ListItemSwitchSampleProps) => {
+  const [isEnabled, setIsEnabled] = useState(value);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <ListItemSwitch
+      label={label}
+      description={description}
+      value={isEnabled}
+      onSwitchValueChange={toggleSwitch}
+    />
+  );
+};
+
+const ListItemSwitchShowroom = () => (
+  <>
+    <ComponentViewerBox name="ListItemSwitch">
+      <ListItemSwitchSample label="Testo molto breve" value={true} />
+      <Divider />
+      <ListItemSwitchSample
+        label="Testo molto breve"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+      />
+      <Divider />
+      <ListItemSwitchSample
+        label="Questa è un'altra prova ancora più lunga per andare su due righe"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+      />
+      <Divider />
+      <ListItemSwitchSample
+        label="Let's try with a loooong loooooong looooooong title + icon"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+      />
+    </ComponentViewerBox>
+    <ComponentViewerBox name="ListItemSwitch, disabled">
+      <ListItemSwitch disabled label="Testo molto breve" value={true} />
+      <Divider />
+      <ListItemSwitch
+        disabled
+        label="Testo molto breve"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+      />
+      <Divider />
+      <ListItemSwitch
+        disabled
+        icon="bonus"
+        label="Let's try with a loooong loooooong title + icon"
+        description={
+          "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
+        }
+      />
+    </ComponentViewerBox>
+  </>
+);