[IOPLT-89] Creating Selection components showcase

example/src/navigation/navigator.tsx

@@ -2,6 +2,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 import React from "react";
 import { Icons } from "../pages/Icons";
 import { Logos } from "../pages/Logos";
+import {Selection} from "../pages/Selection";
 
 import MainScreen from "../pages/MainScreen";
 import { Pictograms } from "../pages/Pictograms";
@@ -31,6 +32,9 @@ const AppNavigator = () => (
     <Stack.Screen name={APP_ROUTES.FOUNDATION.PICTOGRAMS.route} component={Pictograms} options={{
       headerTitle: APP_ROUTES.FOUNDATION.PICTOGRAMS.title, headerBackTitleVisible: false
     }} />
+    <Stack.Screen name={APP_ROUTES.COMPONENTS.SELECTION.route} component={Selection} options={{
+      headerTitle: "Selection", headerBackTitleVisible: false
+    }} />
   </Stack.Navigator>
 );
 

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>
+  </>
+);