Initial test changes on design system/docusaurus.

src/customizations/components/theme/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,30 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import BreadcrumbsComponent from './Breadcrumbs';
+import Wrapper from '@plone/volto/storybook';
+
+export const Breadcrumb = injectIntl(({ children, ...args }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <BreadcrumbsComponent
+          pathname=""
+          items={[
+            {
+              '@id': 'https://volto.kitconcept.com/api/Members',
+              title: 'Users',
+            },
+          ]}
+          getBreadcrumbs={() => {}}
+          {...args}
+        />
+      </div>
+    </Wrapper>
+  );
+});
+
+export default {
+  title: 'Public components/Breadcrumb',
+  component: Breadcrumb,
+  argTypes: {},
+};

src/customizations/components/theme/Button/Button.stories.jsx

@@ -0,0 +1,23 @@
+import { injectIntl } from 'react-intl';
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+export default {
+  title: 'Public components/Button',
+  component: Button,
+  argTypes: {
+    onClick:{
+      action: 'button clicked'
+    },
+  },
+};
+
+//👇 We create a “template” of how args map to rendering
+//const Template = (args) => <Button>{args.label}</Button>;
+
+// 👇 Each story then reuses that template
+export const Primary = (args) => <Button primary >{args.label}</Button>;
+Primary.args = { label: 'Primary' };
+
+export const Secondary = (args) => <Button secondary>{args.label}</Button>;
+Secondary.args = { label: 'Secondary' };

src/customizations/components/theme/Header/Header.stories.js

@@ -0,0 +1,38 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import { Input } from 'semantic-ui-react';
+import { Header } from '@plone/volto/components';
+import { Segment } from 'semantic-ui-react';
+import Wrapper from '@plone/volto/storybook';
+
+export default {
+    title:'Demo/Header',
+    cocmponent: Header,
+    argTypes:{},
+    decorators:[
+        (Story) => (
+            <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+                <Segment className="portal-footer">
+                    <Story />
+                </Segment>
+            </Wrapper>
+        ),
+    ]
+}
+
+// export const Default = injectIntl(({ children, ...args }) => {
+//     return (
+//       <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+//         <Segment className="portal-footer">
+//           <Header />
+//         </Segment>
+//       </Wrapper>
+//     );
+//   });
+
+const Template = (args) => <Header {...args}/>
+
+export const Default = Template.bind({});
+Default.args = {
+
+}

src/customizations/components/theme/Input/Input.stories.js

@@ -0,0 +1,92 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import { Input } from 'semantic-ui-react';
+
+export default {
+    title: 'Public components/Input',
+    component: Input,
+    argTypes: {
+        size:{
+            control:{
+                type:"select", 
+                options:["mini","small","large","big","huge"]
+            }
+        },
+        type:{
+            control:{
+                type:"select", 
+                options:["text","date","email","number","password"]
+            }
+        },
+        onChange:{
+            action: 'input changed'
+        },
+        onFocus:{
+            action: 'input focus'
+        }
+    },
+};
+
+const Template = (args) => <Input {...args}></Input>
+
+export const StandardInput = Template.bind({});
+StandardInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Standard Input",
+    size: 'small'
+}
+
+export const FocusInput = Template.bind({});
+FocusInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Focus Input",
+    focus:true,
+    size: 'small'
+}
+
+export const LoadingInput = Template.bind({});
+LoadingInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Loading Input",
+    loading:true,
+    size: 'small'
+}
+
+export const DisabledInput = Template.bind({});
+DisabledInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Disabled Input",
+    disabled:true,
+    size: 'small'
+}
+
+export const ErrorInput = Template.bind({});
+ErrorInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Error Input",
+    error:true,
+    size: 'small'
+}
+
+export const FluidInput = Template.bind({});
+FluidInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Fluid Input",
+    fluid:true,
+    size: 'small'
+}
+
+export const TransparentInput = Template.bind({});
+TransparentInput.args = {
+    placeholder:"Search...",
+    type:'text',
+    label:"Transparent Input",
+    transparent:true,
+    size: 'small'
+}