@woovi/ui 4.0.942

package/src/collapsible/stories/CollapsibleOld.stories.tsx

@@ -0,0 +1,582 @@
+import Button from '@mui/material/Button';
+import { action } from '@storybook/addon-actions';
+import { Flex, Text } from 'rebass';
+import styled from 'styled-components';
+
+import ActionButton from '../../buttons/ActionButton';
+import Collapsible from '../Collapsible';
+import CollapsibleActions from '../CollapsibleActions';
+import CollapsibleGroup from '../CollapsibleGroup';
+import CollapsibleTree from '../CollapsibleTree';
+import { TransparencyCollapsibleWrapper } from '../TransparencyCollapsibleWrapper';
+
+const Code = styled.code`
+  display: flex;
+  align-items: center;
+  white-space: pre;
+`;
+
+const Avatar = styled.div`
+  background-color: tomato;
+  width: 45px;
+  height: 45px;
+  border-radius: 45px;
+`;
+
+const CustomAction = styled(Button)`
+  display: flex;
+  flex: 1;
+`;
+
+const CustomSummary = styled.div`
+  flex: 1;
+  background-color: #eceff1;
+  height: 40px;
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ExtendedClassesWrapper = styled.div`
+  && {
+    & .MuiAccordion-root {
+      border-radius: 50px;
+
+      background-color: #ffcfd7;
+    }
+
+    & .Collapsible-expanded {
+      border-radius: 2px;
+    }
+  }
+`;
+
+export default {
+  title: 'Collapsible',
+};
+
+export const CollapsibleSummaryProps = () => (
+  <>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      Use the <Code> children </Code> prop to render something inside the
+      details of a collapsible.
+    </Collapsible>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      Use the <Code> children </Code> prop to render something inside the
+      details of a collapsible.
+    </Collapsible>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      Use the <Code> children </Code> prop to render something inside the
+      details of a collapsible.
+    </Collapsible>
+  </>
+);
+
+CollapsibleSummaryProps.story = {
+  name: 'Collapsible summary props',
+};
+
+export const CollapsibleWithCustomRenderedSummary = () => {
+  const summary = (
+    <CustomSummary>Bunnies are great. Here is why...</CustomSummary>
+  );
+
+  return (
+    <Collapsible renderSummary={summary} expandIcon={null}>
+      they have floppy ears
+    </Collapsible>
+  );
+};
+
+CollapsibleWithCustomRenderedSummary.story = {
+  name: 'Collapsible with custom rendered summary',
+};
+
+export const CollapsibleWithPropActions = () => (
+  <>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+      primaryAction={action('Primary button action')}
+      primaryActionLabel='Primary Action'
+    >
+      This collapsible has a primary button which was passed by props
+    </Collapsible>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+      primaryAction={action('Primary button action')}
+      primaryActionLabel='Primary Action'
+      secondaryAction={action('Secondary button action')}
+      secondaryActionLabel='Secondary Action'
+    >
+      This collapsible has both a primary button and secondary button which were
+      passed by props
+    </Collapsible>
+  </>
+);
+
+CollapsibleWithPropActions.story = {
+  name: 'Collapsible with prop actions',
+};
+
+export const CollapsibleWithCustomRenderedActions = () => {
+  const actions = <CustomAction>Activate</CustomAction>;
+
+  return (
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+      renderActions={actions}
+    >
+      The action bar of this collapsible actions footer, was passed as a React
+      Element.
+    </Collapsible>
+  );
+};
+
+CollapsibleWithCustomRenderedActions.story = {
+  name: 'Collapsible with custom rendered actions',
+};
+
+export const ExtensibleByClassesToo = () => (
+  <ExtendedClassesWrapper>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      This collapsible is customized to exaustion using the classes export,
+      together with Styled Components.
+    </Collapsible>
+  </ExtendedClassesWrapper>
+);
+
+ExtensibleByClassesToo.story = {
+  name: 'Extensible by classes too',
+};
+
+export const Tranparent = () => (
+  <TransparencyCollapsibleWrapper>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      This collapsible is customized to exaustion using the classes export,
+      together with Styled Components.
+    </Collapsible>
+  </TransparencyCollapsibleWrapper>
+);
+
+export const GroupedCollapsibles = () => (
+  <CollapsibleGroup>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      Use the <Code> children </Code> prop to render something inside the
+      details of a collapsible.
+    </Collapsible>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      Use the <Code> children </Code> prop to render something inside the
+      details of a collapsible.
+    </Collapsible>
+    <Collapsible
+      heading='Heading of this collapsible'
+      secondaryHeading='Secondary Heading'
+    >
+      Use the <Code> children </Code> prop to render something inside the
+      details of a collapsible.
+    </Collapsible>
+  </CollapsibleGroup>
+);
+
+export const _CollapsibleTree = () => {
+  const summary = <Avatar />;
+
+  return (
+    <CollapsibleTree renderSummary={summary}>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      >
+        Use the <Code> children </Code> prop to render something inside the
+        details of a collapsible.
+      </Collapsible>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      >
+        Use the <Code> children </Code> prop to render something inside the
+        details of a collapsible.
+      </Collapsible>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      >
+        Use the <Code> children </Code> prop to render something inside the
+        details of a collapsible.
+      </Collapsible>
+    </CollapsibleTree>
+  );
+};
+
+export const CollapsibleFooter = () => {
+  const summary = (
+    <Flex flexDirection='column' flex={1}>
+      <Flex flexDirection='column' flex={1}>
+        <Text as='h4' fontSize={14} lineHeight='1.14' fontWeight={600} my='8px'>
+          Name of a little thing
+        </Text>
+        <Flex justifyContent='flex-start'>
+          <Avatar />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+
+  const action = (
+    <Flex
+      justifyContent='flex-end'
+      flex={1}
+      borderTop='3px'
+      borderColor='black'
+    >
+      <ActionButton onClick={() => ({})}>Details</ActionButton>
+    </Flex>
+  );
+
+  return (
+    <CollapsibleActions renderSummary={summary} renderActions={action}>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      ></Collapsible>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      ></Collapsible>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      ></Collapsible>
+      <Collapsible
+        heading='Heading of this collapsible'
+        secondaryHeading='Secondary Heading'
+      ></Collapsible>
+    </CollapsibleActions>
+  );
+};
+
+export const CollapsibleTreeDeeperThan1Level = () => {
+  const summary = <Avatar />;
+
+  return (
+    <>
+      <CollapsibleTree renderSummary={summary}>
+        <Collapsible
+          heading='Heading of this collapsible'
+          secondaryHeading='Secondary Heading'
+        >
+          Use the <Code> children </Code> prop to render something inside the
+          details of a collapsible.
+        </Collapsible>
+        <CollapsibleTree heading='Another tree'>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <CollapsibleTree heading='And another tree'>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+          </CollapsibleTree>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+        </CollapsibleTree>
+        <Collapsible
+          heading='Heading of this collapsible'
+          secondaryHeading='Secondary Heading'
+        >
+          Use the <Code> children </Code> prop to render something inside the
+          details of a collapsible.
+        </Collapsible>
+      </CollapsibleTree>
+      <CollapsibleTree renderSummary={summary}>
+        <Collapsible
+          heading='Heading of this collapsible'
+          secondaryHeading='Secondary Heading'
+        >
+          Use the <Code> children </Code> prop to render something inside the
+          details of a collapsible.
+        </Collapsible>
+        <CollapsibleTree heading='Another tree'>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <CollapsibleTree heading='And another tree'>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+          </CollapsibleTree>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+        </CollapsibleTree>
+        <Collapsible
+          heading='Heading of this collapsible'
+          secondaryHeading='Secondary Heading'
+        >
+          Use the <Code> children </Code> prop to render something inside the
+          details of a collapsible.
+        </Collapsible>
+      </CollapsibleTree>
+      <CollapsibleTree renderSummary={summary}>
+        <Collapsible
+          heading='Heading of this collapsible'
+          secondaryHeading='Secondary Heading'
+        >
+          Use the <Code> children </Code> prop to render something inside the
+          details of a collapsible.
+        </Collapsible>
+        <CollapsibleTree heading='Another tree'>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <CollapsibleTree heading='And another tree'>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+          </CollapsibleTree>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+        </CollapsibleTree>
+        <CollapsibleTree heading='Another tree'>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <CollapsibleTree heading='And another tree'>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+            <Collapsible
+              heading='Heading of this collapsible'
+              secondaryHeading='Secondary Heading'
+            >
+              Use the <Code> children </Code> prop to render something inside
+              the details of a collapsible.
+            </Collapsible>
+          </CollapsibleTree>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible renderSummary={summary}>
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+        </CollapsibleTree>
+      </CollapsibleTree>
+    </>
+  );
+};
+
+CollapsibleTreeDeeperThan1Level.story = {
+  name: 'Collapsible Tree deeper than 1 level',
+};
+
+export const GroupedCollapsibleTree = () => {
+  const summary = <Avatar />;
+
+  return (
+    <CollapsibleGroup>
+      <CollapsibleTree renderSummary={summary}>
+        <Collapsible
+          heading='Heading of this collapsible'
+          secondaryHeading='Secondary Heading'
+        >
+          Use the <Code> children </Code> prop to render something inside the
+          details of a collapsible.
+        </Collapsible>
+        <CollapsibleTree heading='Another tree'>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+          <Collapsible
+            heading='Heading of this collapsible'
+            secondaryHeading='Secondary Heading'
+          >
+            Use the <Code> children </Code> prop to render something inside the
+            details of a collapsible.
+          </Collapsible>
+        </CollapsibleTree>
+      </CollapsibleTree>
+    </CollapsibleGroup>
+  );
+};
+
+GroupedCollapsibleTree.story = {
+  name: 'Grouped collapsible Tree',
+};

package/src/collapsible/stories/CollapsibleStepHeader.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, Story } from '@storybook/react/types-6-0';
+
+import type { CollapsibleStepHeaderProps } from '../CollapsibleStepHeader';
+import CollapsibleStepHeader from '../CollapsibleStepHeader';
+
+export default {
+  title: 'CollapsibleStepHeader/CollapsibleStepHeader',
+  component: CollapsibleStepHeader,
+} as Meta;
+
+const Template: Story<CollapsibleStepHeaderProps> = (args) => (
+  <CollapsibleStepHeader {...args} />
+);
+
+export const StepWithNumber = Template.bind({});
+StepWithNumber.args = {
+  number: 1,
+  header: 'This is the header',
+  legend: 'This is the legend',
+};
+
+export const CheckedStep = Template.bind({});
+CheckedStep.args = {
+  number: 1,
+  header: 'This is the header',
+  legend: 'This is the legend',
+  status: true,
+};
+
+export const ShowEditStep = Template.bind({});
+ShowEditStep.args = {
+  number: 1,
+  header: 'This is the header',
+  legend: 'This is the legend',
+  status: true,
+  showEdit: true,
+};

package/src/company/CompanyLogo.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const Logo = styled.img`
+  object-fit: contain;
+  margin: 20px;
+`;
+
+const CompanyName = styled.h1`
+  font-weight: bold;
+  text-align: center;
+  color: #607389;
+`;
+
+type LogoType = {
+  url: string | null;
+};
+
+export type CompanyType = {
+  id: string | null;
+  name: string | null;
+  nameFriendly: string | null;
+  domainName: string | null;
+  logo: LogoType | null;
+};
+
+type CompanyLogoProps = {
+  company: CompanyType;
+};
+
+const CompanyLogo = ({ company }: CompanyLogoProps) => {
+  if (!company?.logo?.url) {
+    return <CompanyName>{company.nameFriendly}</CompanyName>;
+  }
+
+  return <Logo src={company.logo.url} />;
+};
+
+export default CompanyLogo;

package/src/company/stories/CompanyLogo.stories.tsx

@@ -0,0 +1,18 @@
+import type { CompanyType } from '../CompanyLogo';
+import CompanyLogo from '../CompanyLogo';
+
+const company: CompanyType = {
+  id: 'companyId',
+  name: 'company',
+  nameFriendly: 'Company Storybook',
+  domainName: 'company',
+  logo: {
+    url: 'https://img.feedback.house/YeDrt9GHm3qttVNtyB20g3dC4pM=/fit-in/300x300/smart/https://s3.amazonaws.com/feedbackhouse-media-development/modules%2Fcore%2Fcompany%2F58d9982a1eb4ed2cdefb4ed4%2Flogo%2F5bd4c4f31f1e80001ac10f21',
+  },
+};
+
+export default {
+  title: 'Company',
+};
+
+export const _CompanyLogo = () => <CompanyLogo company={company} />;

package/src/content/ActionMargin.stories.tsx

@@ -0,0 +1,21 @@
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import ActionButton from '../buttons/ActionButton';
+import type { ActionMarginProps } from './ActionMargin';
+import ActionMargin from './ActionMargin';
+
+export default {
+  title: 'UI/ActionMargin',
+  component: ActionMargin,
+} as Meta;
+
+const Template: Story<ActionMarginProps> = ({ ...args }) => {
+  return <ActionMargin {...args} />;
+};
+
+export const Simple = Template.bind({});
+Simple.args = {
+  leftComponent: <ActionButton label={'Left button'} />,
+  rightComponent: <ActionButton label={'Right button'} />,
+};