@ssa-ui-kit/core 0.0.21-alpha → 0.0.22-alpha

package/src/components/AccordionGroup/stories/AccordionGroup.stories.tsx

@@ -1,107 +1,107 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AccordionGroup } from '../index';
-import { AccordionGroupDecorator } from './helpers';
-import { css, useTheme } from '@emotion/react';
-import { AccordionTemplate } from './helpers';
-
-type Args = StoryObj<typeof AccordionGroup>;
-
-export default {
-  title: 'Components/AccordionGroup',
-  component: AccordionGroup,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'An AccordionGroup is a container that allows users to toggle the visibility of related content on a page',
-      },
-    },
-  },
-  decorators: [AccordionGroupDecorator],
-  argTypes: {},
-} as Meta<typeof AccordionGroup>;
-
-const StoryTemplate: Args = {
-  render: ({ ...args }) => <AccordionTemplate {...(args as any)} />,
-};
-
-export const Large = {
-  ...StoryTemplate,
-  args: {
-    size: 'large',
-  },
-};
-
-export const Medium = () => {
-  const theme = useTheme();
-  return (
-    <AccordionTemplate
-      size="medium"
-      css={css`
-        width: 340px;
-        border-radius: 5px;
-        border: 1px solid ${theme.colors.greyDropdownMain};
-      `}
-    />
-  );
-};
-
-export const Small = () => {
-  const theme = useTheme();
-  return (
-    <AccordionTemplate
-      size="small"
-      css={css`
-        width: 240px;
-        border-radius: 0;
-        background: linear-gradient(
-          108deg,
-          ${theme.colors.greyDarker} 0%,
-          ${theme.colors.greyDark} 100%
-        );
-      `}
-    />
-  );
-};
-
-export const LargeWithOnlySingleOpened = {
-  ...StoryTemplate,
-  args: {
-    size: 'large',
-    accordionsStayOpen: false,
-  },
-};
-
-export const MediumWithOnlySingleOpened = () => {
-  const theme = useTheme();
-  return (
-    <AccordionTemplate
-      size="medium"
-      accordionsStayOpen={false}
-      css={css`
-        width: 340px;
-        border-radius: 5px;
-        border: 1px solid ${theme.colors.greyDropdownMain};
-      `}
-    />
-  );
-};
-
-export const SmallWithOnlySingleOpened = () => {
-  const theme = useTheme();
-  return (
-    <AccordionTemplate
-      size="small"
-      accordionsStayOpen={false}
-      css={css`
-        width: 240px;
-        border-radius: 0;
-        background: linear-gradient(
-          108deg,
-          ${theme.colors.greyDarker} 0%,
-          ${theme.colors.greyDark} 100%
-        );
-      `}
-    />
-  );
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccordionGroup } from '../index';
+import { AccordionGroupDecorator } from './helpers';
+import { css, useTheme } from '@emotion/react';
+import { AccordionTemplate } from './helpers';
+
+type Args = StoryObj<typeof AccordionGroup>;
+
+export default {
+  title: 'Components/AccordionGroup',
+  component: AccordionGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An AccordionGroup is a container that allows users to toggle the visibility of related content on a page',
+      },
+    },
+  },
+  decorators: [AccordionGroupDecorator],
+  argTypes: {},
+} as Meta<typeof AccordionGroup>;
+
+const StoryTemplate: Args = {
+  render: ({ ...args }) => <AccordionTemplate {...(args as any)} />,
+};
+
+export const Large = {
+  ...StoryTemplate,
+  args: {
+    size: 'large',
+  },
+};
+
+export const Medium = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="medium"
+      css={css`
+        width: 340px;
+        border-radius: 5px;
+        border: 1px solid ${theme.colors.greyDropdownMain};
+      `}
+    />
+  );
+};
+
+export const Small = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="small"
+      css={css`
+        width: 240px;
+        border-radius: 0;
+        background: linear-gradient(
+          108deg,
+          ${theme.colors.greyDarker} 0%,
+          ${theme.colors.greyDark} 100%
+        );
+      `}
+    />
+  );
+};
+
+export const LargeWithOnlySingleOpened = {
+  ...StoryTemplate,
+  args: {
+    size: 'large',
+    accordionsStayOpen: false,
+  },
+};
+
+export const MediumWithOnlySingleOpened = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="medium"
+      accordionsStayOpen={false}
+      css={css`
+        width: 340px;
+        border-radius: 5px;
+        border: 1px solid ${theme.colors.greyDropdownMain};
+      `}
+    />
+  );
+};
+
+export const SmallWithOnlySingleOpened = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="small"
+      accordionsStayOpen={false}
+      css={css`
+        width: 240px;
+        border-radius: 0;
+        background: linear-gradient(
+          108deg,
+          ${theme.colors.greyDarker} 0%,
+          ${theme.colors.greyDark} 100%
+        );
+      `}
+    />
+  );
+};

package/src/components/AccordionGroup/stories/helpers.tsx

@@ -1,86 +1,86 @@
-import React from 'react';
-import { DecoratorFunction } from '@storybook/types';
-import { AccordionGroupContextProvider } from '../AccordionContext';
-import Typography from '@components/Typography';
-import {
-  Accordion,
-  AccordionTitle,
-  AccordionGroup,
-  AccordionContent,
-} from '@components/AccordionGroup';
-import { AccordionGroupProps } from '../types';
-
-type Args = Parameters<typeof AccordionGroup>[0];
-
-export const AccordionGroupDecorator: DecoratorFunction<
-  {
-    component: typeof AccordionGroup;
-    storyResult: React.ReactElement;
-    canvasElement: unknown;
-  },
-  Args
-> = (Story, { args }) => {
-  return (
-    <AccordionGroupContextProvider>
-      <Story {...args} />
-    </AccordionGroupContextProvider>
-  );
-};
-
-export const AccordionTemplate = (
-  args: Pick<AccordionGroupProps, 'size' | 'accordionsStayOpen'>,
-) => (
-  <AccordionGroup {...args}>
-    <Accordion
-      id="first"
-      title="Basic"
-      ariaControls="first-panel"
-      renderContent={(props) => (
-        <AccordionContent {...props}>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-            suscipit arcu ligula non enim.
-          </Typography>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-            suscipit arcu ligula non enim.
-          </Typography>
-        </AccordionContent>
-      )}
-      renderTitle={AccordionTitle}
-    />
-    <Accordion
-      id="second"
-      title="Advanced"
-      isOpened
-      ariaControls="second-panel"
-      renderContent={(props) => (
-        <AccordionContent {...props}>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-            suscipit arcu ligula non enim.
-          </Typography>
-        </AccordionContent>
-      )}
-      renderTitle={AccordionTitle}
-    />
-    <Accordion
-      id="third"
-      title="Indicator"
-      ariaControls="third-panel"
-      renderContent={(props) => (
-        <AccordionContent {...props}>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-            suscipit arcu ligula non enim.
-          </Typography>
-        </AccordionContent>
-      )}
-      renderTitle={AccordionTitle}
-    />
-  </AccordionGroup>
-);
+import React from 'react';
+import { DecoratorFunction } from '@storybook/types';
+import { AccordionGroupContextProvider } from '../AccordionContext';
+import Typography from '@components/Typography';
+import {
+  Accordion,
+  AccordionTitle,
+  AccordionGroup,
+  AccordionContent,
+} from '@components/AccordionGroup';
+import { AccordionGroupProps } from '../types';
+
+type Args = Parameters<typeof AccordionGroup>[0];
+
+export const AccordionGroupDecorator: DecoratorFunction<
+  {
+    component: typeof AccordionGroup;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story, { args }) => {
+  return (
+    <AccordionGroupContextProvider>
+      <Story {...args} />
+    </AccordionGroupContextProvider>
+  );
+};
+
+export const AccordionTemplate = (
+  args: Pick<AccordionGroupProps, 'size' | 'accordionsStayOpen'>,
+) => (
+  <AccordionGroup {...args}>
+    <Accordion
+      id="first"
+      title="Basic"
+      ariaControls="first-panel"
+      renderContent={(props) => (
+        <AccordionContent {...props}>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </AccordionContent>
+      )}
+      renderTitle={AccordionTitle}
+    />
+    <Accordion
+      id="second"
+      title="Advanced"
+      isOpened
+      ariaControls="second-panel"
+      renderContent={(props) => (
+        <AccordionContent {...props}>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </AccordionContent>
+      )}
+      renderTitle={AccordionTitle}
+    />
+    <Accordion
+      id="third"
+      title="Indicator"
+      ariaControls="third-panel"
+      renderContent={(props) => (
+        <AccordionContent {...props}>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </AccordionContent>
+      )}
+      renderTitle={AccordionTitle}
+    />
+  </AccordionGroup>
+);

package/src/components/AccordionGroup/styles.ts

@@ -1,121 +1,121 @@
-import { css, Theme } from '@emotion/react';
-
-export const wrapperStyles = {
-  empty: css``,
-  small: css`
-    background: none;
-    border-radius: 0;
-    box-shadow: none;
-  `,
-  medium: css`
-    border-radius: 0;
-    box-shadow: none;
-  `,
-  large: css`
-    margin-bottom: 25px;
-    min-height: 70px;
-    border-radius: 20px;
-    padding: 0;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  `,
-};
-
-export const baseTitleStyles = css`
-  user-select: none;
-  align-items: center;
-  cursor: pointer;
-  border: none;
-`;
-
-export const createTitleStyles = (theme: Theme, isActive?: boolean) => ({
-  empty: css`
-    ${baseTitleStyles}
-  `,
-  small: css`
-    ${baseTitleStyles}
-    color: ${theme.colors.white80};
-    margin-bottom: 0;
-    height: 20px;
-    font-size: 16px;
-    font-weight: 500;
-    & svg {
-      width: 16px;
-      height: 16px;
-      & path {
-        stroke: ${theme.colors.greyArrowSidebar};
-        stroke-width: 1.6px;
-      }
-    }
-  `,
-  medium: css`
-    ${baseTitleStyles}
-    color: ${theme.colors.greyDropdownText};
-    margin-bottom: 0;
-    height: 40px;
-    font-weight: 500;
-    font-size: 14px;
-    padding: 11px 22px 9px 17px;
-    border: 1px solid ${theme.colors.greyDropdownMain};
-    border-radius: 5px;
-    & svg {
-      width: 16px;
-      height: 8px;
-      & path {
-        stroke: ${theme.colors.greyDropdownText};
-        stroke-width: 1.2px;
-      }
-    }
-  `,
-  large: css`
-    ${baseTitleStyles}
-    margin-bottom: 0;
-    height: 70px;
-    font-weight: 700;
-    font-size: 20px;
-    padding: 23px 22px 23px 30px;
-    background: ${isActive ? theme.colors.greyLighter : 'none'};
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    & svg {
-      width: 20px;
-      height: 10px;
-      & path {
-        stroke: ${theme.colors.greyDarker};
-        stroke-width: 1.2px;
-      }
-    }
-  `,
-});
-
-export const createBaseContentStyles = (isActive?: boolean) => css`
-  flex-direction: column;
-  align-self: flex-start;
-  height: ${isActive ? 'auto' : 0};
-  max-height: ${isActive ? 'initial' : 0};
-  overflow: ${isActive ? 'visible' : 'hidden'};
-  align-items: flex-start;
-`;
-
-export const createContentStyles = (theme: Theme, isActive?: boolean) => ({
-  empty: css`
-    ${createBaseContentStyles(isActive)};
-  `,
-  small: css`
-    ${createBaseContentStyles(isActive)};
-    color: ${theme.colors.white80};
-    & p {
-      color: ${theme.colors.white80};
-      margin: 15px 0;
-    }
-  `,
-  medium: css`
-    ${createBaseContentStyles(isActive)};
-    padding: ${isActive ? '18px 8px 23px 8px' : 0};
-  `,
-  large: css`
-    ${createBaseContentStyles(isActive)};
-    padding: ${isActive ? '19px 30px 23px 30px' : 0};
-  `,
-});
+import { css, Theme } from '@emotion/react';
+
+export const wrapperStyles = {
+  empty: css``,
+  small: css`
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+  `,
+  medium: css`
+    border-radius: 0;
+    box-shadow: none;
+  `,
+  large: css`
+    margin-bottom: 25px;
+    min-height: 70px;
+    border-radius: 20px;
+    padding: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  `,
+};
+
+export const baseTitleStyles = css`
+  user-select: none;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+`;
+
+export const createTitleStyles = (theme: Theme, isActive?: boolean) => ({
+  empty: css`
+    ${baseTitleStyles}
+  `,
+  small: css`
+    ${baseTitleStyles}
+    color: ${theme.colors.white80};
+    margin-bottom: 0;
+    height: 20px;
+    font-size: 16px;
+    font-weight: 500;
+    & svg {
+      width: 16px;
+      height: 16px;
+      & path {
+        stroke: ${theme.colors.greyArrowSidebar};
+        stroke-width: 1.6px;
+      }
+    }
+  `,
+  medium: css`
+    ${baseTitleStyles}
+    color: ${theme.colors.greyDropdownText};
+    margin-bottom: 0;
+    height: 40px;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 11px 22px 9px 17px;
+    border: 1px solid ${theme.colors.greyDropdownMain};
+    border-radius: 5px;
+    & svg {
+      width: 16px;
+      height: 8px;
+      & path {
+        stroke: ${theme.colors.greyDropdownText};
+        stroke-width: 1.2px;
+      }
+    }
+  `,
+  large: css`
+    ${baseTitleStyles}
+    margin-bottom: 0;
+    height: 70px;
+    font-weight: 700;
+    font-size: 20px;
+    padding: 23px 22px 23px 30px;
+    background: ${isActive ? theme.colors.greyLighter : 'none'};
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    & svg {
+      width: 20px;
+      height: 10px;
+      & path {
+        stroke: ${theme.colors.greyDarker};
+        stroke-width: 1.2px;
+      }
+    }
+  `,
+});
+
+export const createBaseContentStyles = (isActive?: boolean) => css`
+  flex-direction: column;
+  align-self: flex-start;
+  height: ${isActive ? 'auto' : 0};
+  max-height: ${isActive ? 'initial' : 0};
+  overflow: ${isActive ? 'visible' : 'hidden'};
+  align-items: flex-start;
+`;
+
+export const createContentStyles = (theme: Theme, isActive?: boolean) => ({
+  empty: css`
+    ${createBaseContentStyles(isActive)};
+  `,
+  small: css`
+    ${createBaseContentStyles(isActive)};
+    color: ${theme.colors.white80};
+    & p {
+      color: ${theme.colors.white80};
+      margin: 15px 0;
+    }
+  `,
+  medium: css`
+    ${createBaseContentStyles(isActive)};
+    padding: ${isActive ? '18px 8px 23px 8px' : 0};
+  `,
+  large: css`
+    ${createBaseContentStyles(isActive)};
+    padding: ${isActive ? '19px 30px 23px 30px' : 0};
+  `,
+});