From 9c8921db92d16b07ffc2a63ff3c80c4dcdd9ff9d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 10 May 2022 17:38:07 +0200
Subject: chore: add Project single pages

---
 .../organisms/widgets/links-list-widget.tsx        |  2 +-
 .../organisms/widgets/sharing.stories.tsx          | 25 +++++++++-------------
 src/components/organisms/widgets/sharing.test.tsx  | 10 +--------
 src/components/organisms/widgets/sharing.tsx       | 25 +++++++++++++++++++---
 .../templates/page/page-layout.module.scss         |  5 +++++
 5 files changed, 39 insertions(+), 28 deletions(-)

(limited to 'src/components')

diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 37a20fc..3f291e3 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -4,7 +4,7 @@ import List, {
   type ListItem,
 } from '@components/atoms/lists/list';
 import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { slugify } from '@utils/helpers/slugify';
+import { slugify } from '@utils/helpers/strings';
 import { FC } from 'react';
 import styles from './links-list-widget.module.scss';
 
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index c3c3488..47213b6 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -22,9 +22,13 @@ export default {
         type: null,
       },
       description: 'Default widget state (expanded or collapsed).',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
       type: {
         name: 'boolean',
-        required: true,
+        required: false,
       },
     },
     level: {
@@ -34,9 +38,13 @@ export default {
         max: 6,
       },
       description: 'The heading level.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 2 },
+      },
       type: {
         name: 'number',
-        required: true,
+        required: false,
       },
     },
     media: {
@@ -49,16 +57,6 @@ export default {
         required: true,
       },
     },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The widget title.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
   },
   decorators: [
     (Story) => (
@@ -78,14 +76,11 @@ const Template: ComponentStory<typeof SharingWidget> = (args) => (
  */
 export const Sharing = Template.bind({});
 Sharing.args = {
-  expanded: true,
   data: {
     excerpt:
       'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.',
     title: 'Accusantium totam nostrum',
     url: 'https://www.example.test',
   },
-  level: 2,
   media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'],
-  title: 'Sharing',
 };
diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx
index 265dbe1..48da49e 100644
--- a/src/components/organisms/widgets/sharing.test.tsx
+++ b/src/components/organisms/widgets/sharing.test.tsx
@@ -9,15 +9,7 @@ const postData: SharingData = {
 
 describe('Sharing', () => {
   it('renders a sharing widget', () => {
-    render(
-      <Sharing
-        data={postData}
-        media={['facebook', 'twitter']}
-        expanded={true}
-        title="Sharing"
-        level={2}
-      />
-    );
+    render(<Sharing data={postData} media={['facebook', 'twitter']} />);
     expect(
       screen.getByRole('link', { name: 'Share on facebook' })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 05a3f73..85dadb0 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -21,11 +21,19 @@ export type SharingData = {
   url: string;
 };
 
-export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
+export type SharingProps = {
   /**
    * The page data to share.
    */
   data: SharingData;
+  /**
+   * The widget default state.
+   */
+  expanded?: WidgetProps['expanded'];
+  /**
+   * The HTML heading level.
+   */
+  level?: WidgetProps['level'];
   /**
    * A list of active and ordered sharing medium.
    */
@@ -37,8 +45,19 @@ export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
  *
  * Render a list of sharing links inside a widget.
  */
-const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
+const Sharing: FC<SharingProps> = ({
+  data,
+  media,
+  expanded = true,
+  level = 2,
+  ...props
+}) => {
   const intl = useIntl();
+  const widgetTitle = intl.formatMessage({
+    defaultMessage: 'Share',
+    id: 'q3U6uI',
+    description: 'Sharing: widget title',
+  });
 
   /**
    * Build the Diaspora sharing url with provided data.
@@ -181,7 +200,7 @@ const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
   };
 
   return (
-    <Widget {...props}>
+    <Widget expanded={expanded} level={level} title={widgetTitle} {...props}>
       <ul className={styles.list}>{getItems()}</ul>
     </Widget>
   );
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index d5a1a2b..7602492 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -35,6 +35,11 @@
 
 .body {
   grid-column: 2;
+
+  > * + * {
+    margin-top: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
 }
 
 .sidebar {
-- 
cgit v1.2.3