Merge branch 'main' into ToastRefactor

pagopa · Nov 23, 2023 · 010f419 · 010f419
2 parents 8bd9fb2 + 68e4d85
commit 010f419
Show file tree

Hide file tree

Showing 66 changed files with 1,853 additions and 147 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,7 +1,10 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -31,7 +34,7 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {}
   },
-  staticDirs: ['../example/assets'],
+  staticDirs: ["../example/assets"],
   docs: {
     autodocs: "tag"
   },

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { sbTheme } from "./theme";
+
+addons.setConfig({
+  theme: sbTheme
+});
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,7 +1,21 @@
 import type { Preview } from "@storybook/react";
+import { IOThemeLight, IOThemeDark } from "../src/core";
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: "light",
+      values: [
+        {
+          name: "light",
+          value: IOThemeLight["appBackground-primary"]
+        },
+        {
+          name: "dark",
+          value: IOThemeDark["appBackground-primary"]
+        }
+      ]
+    },
     actions: { argTypesRegex: "^on.*" },
     controls: {
       matchers: {

diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -0,0 +1,10 @@
+import { create } from "@storybook/theming";
+
+export const sbTheme = create({
+  base: "light",
+  brandTitle: "IO App Design System",
+  brandUrl: "https://github.com/pagopa/io-app-design-system",
+  brandImage:
+    "https://raw.githubusercontent.com/pagopa/io-app/master/img/app-logo.svg",
+  brandTarget: "_self"
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.17.0](https://github.com/pagopa/io-app-design-system/compare/v1.16.1...v1.17.0)
+
+- [IOPLT-235] Create `ListItemHeader` component [`#135`](https://github.com/pagopa/io-app-design-system/pull/135)
+- feat: Add further stories and minor refactoring [`#132`](https://github.com/pagopa/io-app-design-system/pull/132)
+- [IOAPPFD0-190] Update assets docs with `How to add a new icon` and `How to add a new pictogram` pages [`#144`](https://github.com/pagopa/io-app-design-system/pull/144)
+- [IOPLT-238] Refinement ListItemNav with Badge  [`#145`](https://github.com/pagopa/io-app-design-system/pull/145)
+- [IOPLT-171] Introduces `CodeInput` component [`#143`](https://github.com/pagopa/io-app-design-system/pull/143)
+- [IOBP-400] ModuleCheckout addition [`#142`](https://github.com/pagopa/io-app-design-system/pull/142)
+- [IOBP-403] `ListItemRadioWithAmount` addition [`#139`](https://github.com/pagopa/io-app-design-system/pull/139)
+- [IOAPPFD0-189] Update the `pending` pictogram, rename the old one to `ended` [`#141`](https://github.com/pagopa/io-app-design-system/pull/141)
+- Add publiccode.yml [`#134`](https://github.com/pagopa/io-app-design-system/pull/134)
+- [IOAPPFD0-188] Update pictogram set [`#140`](https://github.com/pagopa/io-app-design-system/pull/140)
+- [IOPLT-237] Refinement of `ListItemRadio` and `RadioGroup` [`#136`](https://github.com/pagopa/io-app-design-system/pull/136)
+- [IOAPPFD0-187] Update legacy typography scale [`#138`](https://github.com/pagopa/io-app-design-system/pull/138)
+- [IOAPPFD0-186] Make `ListItem…` typographic styles compliant with design guidelines [`#137`](https://github.com/pagopa/io-app-design-system/pull/137)
+- [IOPLT-239] Creates the `Stepper` component [`#133`](https://github.com/pagopa/io-app-design-system/pull/133)
+- [IOAPPFD0-185] Improve `io-app-design-system` main README [`#131`](https://github.com/pagopa/io-app-design-system/pull/131)
+- fix: HeaderSecondLevel background color don't covers safearea [`#130`](https://github.com/pagopa/io-app-design-system/pull/130)
+- fix stepper color [`dbd434e`](https://github.com/pagopa/io-app-design-system/commit/dbd434ee5d1781a3eb0803d467b28133192388f1)
+
 #### [v1.16.1](https://github.com/pagopa/io-app-design-system/compare/v1.16.0...v1.16.1)
 
+> 7 November 2023
+
 - chore: Extends ListItemInfo with badge variant [`#129`](https://github.com/pagopa/io-app-design-system/pull/129)
+- chore: release 1.16.1 [`aed7656`](https://github.com/pagopa/io-app-design-system/commit/aed76560949cbe7cc362e7adf38ff28bf6ac704c)
 
 #### [v1.16.0](https://github.com/pagopa/io-app-design-system/compare/v1.15.0...v1.16.0)
 

diff --git a/README.md b/README.md
@@ -92,14 +92,20 @@ Essential core visual attributes of the design language. It includes:
 ## Foundation
 Essential atomic components:
 * [**Typography**](./src/components/typography/)
+  * [📖 Docs](./src/components/typography/README.md) · [Handling font files →](./src/components/typography/README.md#handling-font-files)
 * **Layout**
   * [ContentWrapper](./src/components/contentWrapper/)
   * [Spacer](./src/components/spacer/) (`VSpacer`,`HSpacing`)
   * [Divider](./src/components/divider/)
-* [**Icons**](./src/components/icons/): [📖 Relative docs →](./src/components/icons/)
-* [**Pictograms**](./src/components/pictograms/): [📖 Relative docs →](./src/components/pictograms/)
+* [**Icons**](./src/components/icons/)
+  * Assets with an intended size between `12px` and `56px`
+  * [📖 Docs](./src/components/icons/README.md) · [Add a new icon →](./src/components/icons/#add-a-new-icon)
+* [**Pictograms**](./src/components/pictograms/)
+  * Assets with an intended size greather than `56px`
+  * [📖 Docs](./src/components/pictograms/README.md) · [Add a new pictogram →](./src/components/pictograms/README.md#add-a-new-pictogram)
 * **Logos**
-  * [Payment Logos](./src/components/logos/): [📖 Relative docs →](./src/components/logos/)
+  * [Payment Logos](./src/components/logos/)
+    * [📖 Docs](./src/components/logos/)
   * [Avatar](./src/components/avatar/)
 * **Loaders**
   * [LoadingSpinner](./src/components/loadingSpinner/)

diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
@@ -4,15 +4,16 @@ import {
   IOThemeContext,
   Icon,
   ListItemAction,
+  ListItemHeader,
   ListItemInfo,
   ListItemInfoCopy,
   ListItemNav,
   ListItemNavAlert,
+  ListItemRadioWithAmount,
   ListItemSwitch,
   ListItemTransaction,
   ListItemTransactionLogo,
   ListItemTransactionStatusWithBadge,
-  ListItemRadioWithAmount,
   VSpacer,
   useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
@@ -63,6 +64,15 @@ export const ListItems = () => {
           </H2>
           {renderListItemInfo()}
 
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemHeader
+          </H2>
+          {renderListItemHeader()}
+
           <H2
             color={theme["textHeading-default"]}
             weight={"SemiBold"}
@@ -159,6 +169,40 @@ const renderListItemNav = () => (
           }}
           accessibilityLabel="Empty just for testing purposes"
         />
+        <ListItemNav
+          value={"Value"}
+          description="This is a list item nav without chevron icon"
+          onPress={() => {
+            alert("Action triggered");
+          }}
+          accessibilityLabel="Empty just for testing purposes"
+          hideChevron
+        />
+        <ListItemNav
+          value={"Value"}
+          description="This is a list item nav with badge"
+          onPress={() => {
+            alert("Action triggered");
+          }}
+          accessibilityLabel="Empty just for testing purposes"
+          badgeProps={{
+            text: "Novità",
+            variant: "blue"
+          }}
+        />
+        <ListItemNav
+          value={"Value"}
+          description="This is a list item nav with badge"
+          onPress={() => {
+            alert("Action triggered");
+          }}
+          accessibilityLabel="Empty just for testing purposes"
+          badgeProps={{
+            text: "Novità",
+            variant: "blue"
+          }}
+          hideChevron
+        />
       </View>
     </ComponentViewerBox>
     <ComponentViewerBox name="ListItemNavAlert">
@@ -370,6 +414,66 @@ const renderListItemInfo = () => (
   </ComponentViewerBox>
 );
 
+const renderListItemHeader = () => (
+  <ComponentViewerBox name="ListItemHeader">
+    <View>
+      <ListItemHeader
+        label="Label"
+        accessibilityLabel="Empty just for testing purposes"
+      />
+      <ListItemHeader
+        label="Label"
+        accessibilityLabel="Empty just for testing purposes"
+      />
+      <ListItemHeader
+        iconName="creditCard"
+        label="Label"
+        accessibilityLabel="Empty just for testing purposes"
+        endElement={{
+          type: "buttonLink",
+          componentProps: {
+            label: "Modifica",
+            accessibilityLabel: "Modifica",
+            onPress: onButtonPress
+          }
+        }}
+      />
+      <ListItemHeader
+        iconName="psp"
+        label="Label"
+        accessibilityLabel="Empty just for testing purposes"
+        endElement={{
+          type: "iconButton",
+          componentProps: {
+            icon: "info",
+            accessibilityLabel: "info",
+            onPress: onButtonPress
+          }
+        }}
+      />
+
+      <ListItemHeader
+        iconName="psp"
+        label="Label"
+        accessibilityLabel="Empty just for testing purposes"
+        endElement={{
+          type: "badge",
+          componentProps: {
+            text: "Pagato",
+            variant: "success"
+          }
+        }}
+      />
+
+      <ListItemHeader
+        label="Label"
+        iconName="gallery"
+        accessibilityLabel="Empty just for testing purposes"
+      />
+    </View>
+  </ComponentViewerBox>
+);
+
 /* LIST ITEM TRANSACTION */
 
 /* Mock assets */

diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
@@ -5,7 +5,8 @@ import {
   ListItemSwitch,
   H2,
   ModuleIDP,
-  ModulePaymentNotice
+  ModulePaymentNotice,
+  ModuleCheckout
 } from "@pagopa/io-app-design-system";
 import { Alert, ImageSourcePropType, View } from "react-native";
 import { Screen } from "../components/Screen";
@@ -100,6 +101,25 @@ const renderModulePaymentNotice = () => (
   </>
 );
 
+const renderModuleCheckout = () => (
+  <>
+    <ComponentViewerBox name="ModuleCheckout, default">
+      <ModuleCheckout
+        paymentLogo="amex"
+        title="Amex"
+        subtitle="arien_c********@**hoo.it"
+        ctaText="Modifica"
+      />
+    </ComponentViewerBox>
+    <ComponentViewerBox name="ModuleCheckout, no icon">
+      <ModuleCheckout title="3,50 $" subtitle="Piú o meno" ctaText="Modifica" />
+    </ComponentViewerBox>
+    <ComponentViewerBox name="ModuleCheckout, loading">
+      <ModuleCheckout isLoading ctaText="Loading" />
+    </ComponentViewerBox>
+  </>
+);
+
 const Modules = () => {
   const { isExperimental, setExperimental } = useIOExperimentalDesign();
   return (
@@ -127,6 +147,14 @@ const Modules = () => {
             ModulePaymentNotice
           </H2>
           {renderModulePaymentNotice()}
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ModuleCheckout
+          </H2>
+          {renderModuleCheckout()}
         </Screen>
       )}
     </IOThemeContext.Consumer>