@kitconcept/volto-light-theme 6.0.0 → 7.0.0-alpha.0

package/src/components/Summary/Summary.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import DefaultSummary from './DefaultSummary';
+import { default as NewsItemSummaryComponent } from './NewsItemSummary';
+import { default as EventSummaryComponent } from './EventSummary';
+import { default as FileSummaryComponent } from './FileSummary';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+const meta = {
+  title: 'Primitives/Summary',
+  component: DefaultSummary,
+  parameters: {
+    layout: 'centered',
+    // backgrounds: { disable: true },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DefaultSummary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Summary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <DefaultSummary {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
+      head_title: 'Simple Card',
+    },
+  },
+};
+
+export const SummaryHideDescription: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <DefaultSummary {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
+      head_title: 'Simple Card',
+    },
+    hide_description: true,
+  },
+};
+
+export const NewsItemSummary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <NewsItemSummaryComponent {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
+      head_title: 'Simple Card',
+      start: '2023-01-01T11:00:00+00:00',
+      end: '2023-12-31T12:00:00+00:00',
+      effective: '2023-07-06T18:35:00+00:00',
+    },
+  },
+};
+
+export const EventSummary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <EventSummaryComponent {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
+      head_title: 'Simple Card',
+      start: '2023-01-01T11:00:00+00:00',
+      end: '2023-12-31T12:00:00+00:00',
+      effective: '2023-07-06T18:35:00+00:00',
+    },
+  },
+};
+
+export const FileSummary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <FileSummaryComponent {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
+      head_title: 'Simple Card',
+      start: '2023-01-01T11:00:00+00:00',
+      end: '2023-12-31T12:00:00+00:00',
+      effective: '2023-07-06T18:35:00+00:00',
+    },
+  },
+};

package/src/components/Widgets/ObjectList.tsx

@@ -176,7 +176,8 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
     setActiveObject(newIndex);
   }
 
-  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
+  const objectSchema =
+    typeof schema === 'function' ? schema({ ...props, activeObject }) : schema;
 
   function handleDragEnd(event) {
     const { active, over } = event;

package/src/stories/BlockWrapper.tsx

@@ -0,0 +1,25 @@
+import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
+
+const BlockWrapper = (props) => {
+  const { block, data, isContainer } = props;
+  const content = props.content || {
+    blocks: {},
+    blocks_layout: {
+      items: [],
+    },
+  };
+
+  return (
+    <StyleWrapper
+      content={content}
+      id={block || 'block-1'}
+      block={block || 'block-1'}
+      data={data}
+      isContainer={isContainer}
+    >
+      {props.children}
+    </StyleWrapper>
+  );
+};
+
+export default BlockWrapper;

package/src/stories/grid.teaser.stories.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import GridBlockView from '@plone/volto/components/manage/Blocks/Grid/View';
+import {
+  gridBlockOne,
+  gridBlockTwo,
+  gridBlockThree,
+  gridBlockFour,
+} from './mocks';
+import Wrapper from '@plone/volto/storybook';
+import BlockWrapper from './BlockWrapper';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Blocks/Grid Teaser',
+  component: GridBlockView,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof GridBlockView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const One: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockOne,
+  },
+};
+
+export const Two: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwo,
+  },
+};
+
+export const Three: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockThree,
+  },
+};
+
+export const Four: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockFour,
+  },
+};
+
+export const OneInversed: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <Wrapper>
+      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: { ...gridBlockOne, theme: 'grey' },
+  },
+};
+
+export const TwoInversed: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <Wrapper>
+      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: { ...gridBlockTwo, theme: 'grey' },
+  },
+};
+
+export const ThreeInversed: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <Wrapper>
+      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: { ...gridBlockThree, theme: 'grey' },
+  },
+};
+
+export const FourInversed: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <Wrapper>
+      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: { ...gridBlockFour, theme: 'grey' },
+  },
+};