@wix/design-system 1.193.0 → 1.194.0

package/dist/docs/components/SectionHeaderExamples.md

@@ -0,0 +1,251 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Control the size of a section header with the <code>size</code> prop:</p><li><code>medium</code> (default)  is the standard used in common cases.</li><li><code>small</code> is used in dense layouts and panels.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader title="Medium" size="medium" />
+  <SectionHeader title="Small" size="small" />
+</StorybookComponents.Stack>;
+```
+
+### Horizontal padding
+- description: <p>Adjust the <code>horizontalPadding</code> of a section header according to the content padding inside the following section:</p><li><code>large</code> (default)</li><li><code>medium</code></li><li><code>small</code></li><li><code>tiny</code></li><li><code>xTiny</code></li><li><code>xxTiny</code></li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader title="Large" horizontalPadding="large" />
+  <SectionHeader title="Medium" horizontalPadding="medium" />
+  <SectionHeader title="Small" horizontalPadding="small" />
+  <SectionHeader title="Tiny" horizontalPadding="tiny" />
+  <SectionHeader title="Extra tiny" horizontalPadding="xTiny" />
+  <SectionHeader title="Extra-extra tiny" horizontalPadding="xxTiny" />
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Control the style of a section header using the <code>skin</code> prop:</p><li><code>standard</code> is the default and is used in most cases.</li><li><code>neutral</code> is used to minimize the component’s visual weight.</li><li><code>light</code> is used as a completely minimal header that blends in with rest of the content.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader title="Standard" skin="standard" />
+  <SectionHeader title="Neutral" skin="neutral" />
+ <SectionHeader title="Light" skin="light" />
+</StorybookComponents.Stack>;
+```
+
+### Dividers
+- description: <p>Control which dividers are visible with the <code>divider</code> prop:</p><li>By default, a section header has both top and bottom dividers.</li><li>Use <code>top</code> when there is already a divider at the bottom of a component.</li><li>Use <code>bottom</code> when there is already a divider at the top of a component.</li><li>Use <code>none</code> when there are already dividers at the top and bottom of a component.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader title="Default" />
+  <SectionHeader title="Top" divider="top" />
+  <SectionHeader title="Bottom" divider="bottom" />
+  <SectionHeader title="No dividers" divider="none" />
+</StorybookComponents.Stack>;
+```
+
+### Suffix
+- description: <p>Use a <code>suffix</code> container to add info or actions that relate to the content below a section header.</p><p></p><p>A variety of components can be used in the suffix:</p><li><code><InfoIcon/></code></li><li><code><TextButton/></code></li><li><code><Button/></code></li><li><code><IconButton/></code></li><li><code><Text/></code> or others</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader
+    suffix={
+      <InfoIcon
+        size="small"
+        content="Info icon gives more information about a section."
+      />
+    }
+  />
+  <SectionHeader
+    suffix={
+      <TextButton
+        size="tiny"
+        priority="secondary"
+        prefixIcon=<Icons.AddSmall />
+      >
+        Suffix
+      </TextButton>
+    }
+  />
+  <SectionHeader
+    suffix={
+      <Button size="tiny" priority="secondary">
+        Suffix
+      </Button>
+    }
+  />
+  <SectionHeader
+    suffix={
+      <IconButton size="tiny" priority="secondary">
+        <Icons.MoreSmall />
+      </IconButton>
+    }
+  />
+  <SectionHeader suffix={<Text size="tiny">Suffix</Text>} />
+</StorybookComponents.Stack>;
+```
+
+### Title
+- description: <p>Use the <code>title</code> prop to describe the content that appears below the section header.</p><p></p><p>The default is a text value, but the container can accept any component.</p><p></p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader title="Default" />
+  <SectionHeader
+    title={
+      <Text weight="bold" size="small">
+        Custom title
+      </Text>
+    }
+  />
+  <SectionHeader title=<StorybookComponents.Placeholder height="24px" /> />
+</StorybookComponents.Stack>;
+```
+
+### Title alignment
+- description: <p>Control the title's position with the <code>align</code> prop:</p><li>Use <code>start</code> (default) for left-aligned lists.</li><li>Use <code>center</code> in settings panels.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHeader title="Start" align="start" />
+  <SectionHeader title="Center" align="center" />
+</StorybookComponents.Stack>;
+```
+
+### Title overflow
+- description: <p>Title text that does not fit in one line gets truncated with an ellipsis.</p><p></p><p>The full text appears in a tooltip when hovering over the truncated text. </p><p></p>
+- example: 
+```jsx 
+<SectionHeader title="A very long section title goes into a title container in this case. It even has multiple sentences inside. It will be truncated by ellipses once it reaches the second line" />;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Group content in cards
+- description: <p>Use section headers to organize card info into separate categories.</p><p></p><p>This makes the whole card easier to scan.</p>
+- example: 
+```jsx 
+() => {
+  const items = [
+    {
+      sectionTitle: 'Monday, Feb 7',
+    },
+    {
+      time: '7:00 PM - 9:00 PM',
+      event: 'Registration & reception',
+    },
+    {
+      sectionTitle: 'Tuesday, Feb 8',
+    },
+    {
+      time: '8:00 AM - 10:00 AM',
+      event: 'Keynote address by Steven H. Kastner',
+      divider: true,
+    },
+    {
+      time: '10:00 AM - 1:00 PM',
+      event: 'Break & networking',
+      divider: true,
+    },
+    {
+      time: '1:00 PM - 3:00 PM',
+      event: 'Keynote address by Linda Contreras',
+      divider: true,
+    },
+    {
+      time: '7:00 PM - 9:00 PM',
+      event: 'Evening reception',
+    },
+    {
+      sectionTitle: 'Wednesday, Feb 9',
+    },
+    {
+      time: '8:00 AM - 10:00 AM',
+      event: 'Keynote address by Susan W. Eaton',
+      divider: true,
+    },
+    {
+      time: '10:00 AM - 1:00 PM',
+      event: 'Keynote address by Bjorn Rettig',
+    },
+  ];
+
+  const pirmaryAction = {
+    text: 'Edit',
+  };
+
+  const secondaryActions = [
+    {
+      text: 'Hide',
+      icon: <Icons.HiddenSmall />,
+      onClick: () => ({}),
+    },
+    {
+      text: 'Cancel',
+      icon: <Icons.BlockSmall />,
+      onClick: () => ({}),
+    },
+    {
+      text: 'Delete',
+      icon: <Icons.DeleteSmall />,
+      onClick: () => ({}),
+    },
+  ];
+
+  const actionsList = (
+    <TableActionCell
+      primaryAction={pirmaryAction}
+      secondaryActions={secondaryActions}
+      numOfVisibleSecondaryActions={0}
+      size="small"
+    />
+  );
+
+  const primaryAction = (
+    <Button size="small" priority="secondary" prefixIcon={<Icons.AddSmall />}>
+      Add Item
+    </Button>
+  );
+
+  return (
+    <Card hideOverflow>
+      <Card.Header
+        title="Event schedule"
+        subtitle="Build a schedule to keep guests informed throughout your event."
+        suffix={primaryAction}
+      />
+      {items.map((params) => {
+        if (params.sectionTitle) {
+          return <SectionHeader title={params.sectionTitle} size="small" />;
+        }
+        return (
+          <TableListItem
+            showDivider={params.divider}
+            onClick={() => {}}
+            options={[
+              { value: <Text size="small">{params.time}</Text>, width: '25%' },
+              { value: <Text size="small">{params.event}</Text>, width: '50%' },
+              { value: actionsList },
+            ]}
+          />
+        );
+      })}
+    </Card>
+  );
+};
+```
+
+

package/dist/docs/components/SectionHelperExamples.md

@@ -0,0 +1,332 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>The component consists of 4 majors elements: <code>title</code>, children, action and close button.</p><p></p><p>Control action label with <code>actionText</code> and its interaction with <code>onAction</code> props, close button with <code>onClose</code> prop.</p>
+- example: 
+```jsx 
+<SectionHelper title="Title" actionText="Action" onAction={() => {}} onClose={() => {}}>
+  Content
+</SectionHelper>
+
+```
+
+### Size
+- description: <p>Adjust Section helper size by using the <code>size</code> prop:</p><p></p><li><code>medium</code> (default) - can be used in all common cases.</li><li><code>small</code> - best for dense layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHelper size="medium">Medium </SectionHelper>
+  <SectionHelper size="small">Small </SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Control the style of the Section helper with the <code>appearance</code> prop. It supports 7 options: </p><li><code>standard</code> - use it to provide additional information relevant to current user task. </li><li><code>success</code> - use it to inform users about successful operation.</li><li><code>warning</code> (default) - use it to draw the user's attention to unresolved issues.</li><li><code>danger</code> - use it for error messages and information about critical issues.</li><li><code>premium</code> - use it for premium upgrades only — packages that let accept payments, connect domain and have business email. <a href="https://docs.google.com/document/d/1mALfPW9BOZgAjaFpvor5la3WGhGkXIxpbkF2GFrapU0/edit">Read more about Premium patterns</a>.</li><li><code>preview</code> - use it to present process status or related additional data.</li><li><code>experimentalDark</code> - use it to emphasize informational messages in the context of other content.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHelper appearance="standard">Standard </SectionHelper>
+  <SectionHelper appearance="success">Success </SectionHelper>
+  <SectionHelper appearance="warning">Warning </SectionHelper>
+  <SectionHelper appearance="danger">Danger </SectionHelper>
+  <SectionHelper appearance="premium">Premium</SectionHelper>
+  <SectionHelper appearance="preview">Preview </SectionHelper>
+  <SectionHelper appearance="experimentalDark">Dark </SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+### Prefix
+- description: <li>Use <code>showPrefixIcon</code> prop to show default status icon.</li><li>Add more context for the Section helper by also using <code>prefixIcon</code> prop.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHelper showPrefixIcon prefixIcon={<Icons.EmailAlert />}>Fix email value to save account details.
+ </SectionHelper>
+  <SectionHelper showPrefixIcon>Warning message</SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+### Close button
+- description: <p>Control whether Section helper can be dismissed by a user with <code>showCloseButton</code> prop.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHelper>Non-dismissable</SectionHelper>
+  <SectionHelper showCloseButton={true}>Dismissable</SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+### Border
+- description: <p>Use <code>border</code> prop to choose between: </p><p></p><li><code>standard</code> (default) -  can be used in all common cases.</li><li><code>topBottom</code> - used for banner type use cases.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHelper border="standard">Standard</SectionHelper>
+  <SectionHelper border="topBottom">Top bottom</SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+### Layout
+- description: <p>Change content direction by using layout prop:</p><p></p><li><code>vertical</code> (default) arranges content horizontally.</li><li><code>horizontal</code> arranges content vertically.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+<SectionHelper
+  title="Title"
+  actionText="Action"
+  layout="vertical"
+
+>
+  Vertical content
+</SectionHelper>
+  <SectionHelper
+  title="Title"
+  actionText="Action"
+  layout="horizontal"
+
+>
+  Horizontal content
+</SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+### Content width
+- description: <p>Enable content width to be 100% wide with <code>fullWidth</code> prop.</p><p></p><p>By default component's title and content are limited to maximum width of 420 pixels to improve text reading experience.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SectionHelper
+    title="The Life and Strange Surprizing Adventures of Robinson Crusoe, Of York,
+    Mariner: Who lived Eight and Twenty Years, all alone in an un-inhabited
+    Island on the Coast of America, near the Mouth of the Great River of
+    Oroonoque;"
+  >
+    Having been cast on Shore by Shipwreck, wherein all the Men perished but
+    himself. With An Account how he was at last as strangely deliver'd by
+    Pyrates.
+  </SectionHelper>
+  <SectionHelper
+    fullWidth
+    title="The Life and Strange Surprizing Adventures of Robinson Crusoe, Of York,
+    Mariner: Who lived Eight and Twenty Years, all alone in an un-inhabited
+    Island on the Coast of America, near the Mouth of the Great River of
+    Oroonoque;"
+  >
+    Having been cast on Shore by Shipwreck, wherein all the Men perished but
+    himself. With An Account how he was at last as strangely deliver'd by
+    Pyrates.
+  </SectionHelper>
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Application error
+- description: <p>Errors  occur because of breaches in application logic or conditions, for example when users reach storage limits or their payment method has expired. These errors can occur before users even open the application or a specific page, making it essential for them to be visible upon arrival.</p><p></p><p>Place application errors first in the page, below the page header using the error banner.</p>
+- example: 
+```jsx 
+<Page>
+  <Page.Header
+    title="Online Programs"
+    subtitle="Build and market multi-step courses."
+    actionsBar={
+      <Box gap="SP2">
+        <Button prefixIcon={<Icons.Add />}>Create New</Button>
+      </Box>
+    }
+  />
+  <Page.Content>
+    <Layout>
+      <Cell>
+        <SectionHelper
+          appearance="danger"
+          title="Payment method expired"
+          actionText="Update Payment Method"
+          onAction={() => {}}
+          onClose={() => {}}
+        >
+          The payment method linked to your account expired two days ago. To
+          continue receiving payments for your online program, updated your
+          payment details.
+        </SectionHelper>
+      </Cell>
+      <Cell>
+        <Card>
+          <Card.Content>
+            <Box height="120px" />
+          </Card.Content>
+        </Card>
+      </Cell>
+      <Cell>
+        <Card>
+          <Card.Content>
+            <Box height="120px" />
+          </Card.Content>
+        </Card>
+      </Cell>
+    </Layout>
+  </Page.Content>
+</Page>;
+
+```
+
+### Inline with content
+- description: <p>Place Section helper first in the section that they apply to.</p>
+- example: 
+```jsx 
+<Card hideOverflow>
+  <Card.Header
+    title="Earn points"
+    subtitle="These are the ways customers earn points."
+  />
+  <SectionHelper
+    fullWidth
+    size="small"
+    border="topBottom"
+    showCloseButton
+    showPrefixIcon
+    layout="horizontal"
+  >
+    You don't have ways of Earning Points enabled, so users can't collect
+    points. Enable at least one of the way below.
+  </SectionHelper>
+
+  <TableListItem
+    showDivider
+    options={[
+      {
+        value: (
+          <FormField label="Inactive" labelPlacement="right">
+            <ToggleSwitch size="medium" />
+          </FormField>
+        ),
+        width: 'auto',
+      },
+      {
+        value: (
+          <Box direction="vertical">
+            <Text size="small" weight="bold">
+              Make a Restaurant Order
+            </Text>
+            <Text size="small">Give 1 points for every 1$ spent.</Text>
+          </Box>
+        ),
+      },
+      {
+        value: (
+          <IconButton priority="secondary" size="small">
+            <Icons.MoreSmall />
+          </IconButton>
+        ),
+        width: 'auto',
+      },
+    ]}
+  />
+  <TableListItem
+    options={[
+      {
+        value: (
+          <FormField label="Inactive" labelPlacement="right">
+            <ToggleSwitch size="medium" />
+          </FormField>
+        ),
+        width: 'auto',
+      },
+      {
+        value: (
+          <Box direction="vertical">
+            <Text size="small" weight="bold">
+              Sign Up to the Site
+            </Text>
+            <Text size="small">Give 100 points after sign up.</Text>
+          </Box>
+        ),
+      },
+      {
+        value: (
+          <IconButton priority="secondary" size="small">
+            <Icons.MoreSmall />
+          </IconButton>
+        ),
+        width: 'auto',
+      },
+    ]}
+  />
+</Card>;
+
+```
+
+### In front of content
+- description: <p>Position Section helper on top of content in modals to update users about the status change.</p>
+- example: 
+```jsx 
+() => {
+  const [state, setState] = React.useState(true);
+  return (
+    <CustomModalLayout
+      title="Account details"
+      subtitle="Manage name and email details."
+      secondaryButtonText="Cancel"
+      primaryButtonText="Save"
+      showHeaderDivider
+      overflowY={false}
+      onCloseButtonClick={() => setState(true)}
+      primaryButtonOnClick={() => setState(true)}
+      secondaryButtonOnClick={() => setState(true)}
+    >
+      <Layout>
+        {state && (
+          <Box
+            position="absolute"
+            top="24px"
+            left="50%"
+            transform="translateX(-50%)"
+          >
+            <SectionHelper
+              appearance="danger"
+              size="small"
+              showCloseButton
+              showPrefixIcon
+              layout="horizontal"
+              onClose={() => setState(false)}
+            >
+              Fix email value to save account details.
+            </SectionHelper>
+          </Box>
+        )}
+        <Cell span={6}>
+          <FormField label="First name">
+            <Input defaultValue="John" />
+          </FormField>
+        </Cell>
+        <Cell span={6}>
+          <FormField label="Last name">
+            <Input defaultValue="Smith" />
+          </FormField>
+        </Cell>
+        <Cell>
+          <FormField
+            label="Email address"
+            status="error"
+            statusMessage='Provide the email in format "your@email.com"'
+          >
+            <Input defaultValue="asfljaokfjalk" type="email" />
+          </FormField>
+        </Cell>
+      </Layout>
+    </CustomModalLayout>
+  );
+};
+
+```
+
+