@galaxy-ds/core 2.0.13 → 2.0.14

package/src/Typography/Typography.stories.mdx

@@ -1,146 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-import { Typography } from "./Typography"
-
-<Meta title="components/Typography" component={Typography} />
-
-# Typography
-Tags communicate additional information to content. Use the `size`, `label`, `variant` props.
-
-<Canvas withToolbar>
-  <Story name="Default">
-    <Typography variant="body1">Typography</Typography>
-  </Story>
-</Canvas>
-
- 
-### Headings
-<Canvas withToolbar>
-  <Story name="Headings" parameters={{ docs: { source: { code: `
-<Typography variant="h1">H1. Heading</Typography>
-<Typography variant="h2">H2. Heading</Typography>
-<Typography variant="h3">H3. Heading</Typography>
-<Typography variant="h4">H4. Heading</Typography>
-<Typography variant="h5">H5. Heading</Typography>
-<Typography variant="h6">H6. Heading</Typography>
-  `}}}}>
-    <Typography variant="h1">H1. Heading</Typography><br/>
-    <Typography variant="h2">H2. Heading</Typography><br/>
-    <Typography variant="h3">H3. Heading</Typography><br/>
-    <Typography variant="h4">H4. Heading</Typography><br/>
-    <Typography variant="h5">H5. Heading</Typography><br/>
-    <Typography variant="h6">H6. Heading</Typography><br/>
-  </Story>
-</Canvas>
-
-### Subtitles
-<Canvas withToolbar>
-  <Story name="Subtitles" parameters={{ docs: { source: { code: `
-<Typography variant="subtitle1">Subtitle1</Typography>
-<Typography variant="subtitle2">Subtitle2</Typography>
-<Typography variant="caption">Caption</Typography>
-  `}}}}>
-    <Typography variant="subtitle1">Subtitle1</Typography><br/>
-    <Typography variant="subtitle2">Subtitle2</Typography><br/>
-    <Typography variant="caption">Caption</Typography><br/>
-  </Story>
-</Canvas>
-
-
-### Body
-<Canvas withToolbar>
-  <Story name="Body" parameters={{ docs: { source: { code: `
-<Typography variant="body1">
-  body1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-  Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. 
-  Aliquam feugiat maximus massa tempus pharetra.
-  Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. 
-  Sed eu ipsum ultrices nisl dictum venenatis.
-</Typography>
-<Typography variant="body2">
-  body2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-  Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. 
-  Aliquam feugiat maximus massa tempus pharetra. 
-  Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. 
-  Sed eu ipsum ultrices nisl dictum venenatis.
-</Typography>
-  `}}}}>
-    <Typography variant="body1">body1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. Aliquam feugiat maximus massa tempus pharetra. Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. Sed eu ipsum ultrices nisl dictum venenatis.</Typography><br/>
-    <Typography variant="body2">body2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. Aliquam feugiat maximus massa tempus pharetra. Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. Sed eu ipsum ultrices nisl dictum venenatis.</Typography><br/>
-  </Story>
-</Canvas>
-
-### Truncate
-<Canvas withToolbar>
-  <Story name="Truncate" parameters={{ docs: { source: { code: `
-<Typography noWrap variant="body1">
-  body1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-  Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. 
-  Aliquam feugiat maximus massa tempus pharetra. 
-  Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. 
-  Sed eu ipsum ultrices nisl dictum venenatis.
-</Typography>
-<Typography noWrap variant="body2">
-  body2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-  Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. 
-  Aliquam feugiat maximus massa tempus pharetra. 
-  Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus.
-  Sed eu ipsum ultrices nisl dictum venenatis.
-</Typography>
-  `}}}}>
-    <Typography noWrap variant="body1">body1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. Aliquam feugiat maximus massa tempus pharetra. Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. Sed eu ipsum ultrices nisl dictum venenatis.</Typography><br/>
-    <Typography noWrap variant="body2">body2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. Aliquam feugiat maximus massa tempus pharetra. Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. Sed eu ipsum ultrices nisl dictum venenatis.</Typography><br/>
-  </Story>
-</Canvas>
- 
-
-### Colour
-<Canvas withToolbar>
-  <Story name="Colour" parameters={{ docs: { source: { code: `
-<Typography color="text.primary" variant="body1">text primary</Typography>
-<Typography color="text.secondary" variant="body1">text secondary</Typography>
-<Typography color="text.disabled" variant="body1">text disabled</Typography>
-<Typography color="primary" variant="body1">primary</Typography>
-<Typography color="primary.light" variant="body1">primary light</Typography>
-<Typography color="primary.dark" variant="body1">primary dark</Typography>
-<Typography color="secondary" variant="body1">secondary</Typography>
-<Typography color="gray" variant="body1">gray</Typography>
-<Typography color="success.main" variant="body1">success</Typography>
-  `}}}}>
-    <Typography color="text.primary" variant="body1">text primary</Typography><br/>
-    <Typography color="text.secondary" variant="body1">text secondary</Typography><br/>
-    <Typography color="text.disabled" variant="body1">text disabled</Typography><br/>
-    <Typography color="primary" variant="body1">primary</Typography><br/>
-    <Typography color="primary.light" variant="body1">primary light</Typography><br/>
-    <Typography color="primary.dark" variant="body1">primary dark</Typography><br/>
-    <Typography color="secondary" variant="body1">secondary</Typography><br/>
-    <Typography color="gray" variant="body1">gray</Typography><br/>
-    <Typography color="success.main" variant="body1">success</Typography><br/>
-  </Story>
-</Canvas>
-
-### Variant
-<Canvas withToolbar>
-  <Story name="Variant" parameters={{ docs: { source: { code: `
-<Typography noWrap variant="body1" component="span">
-  body1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-  Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. 
-  Aliquam feugiat maximus massa tempus pharetra. 
-  Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. 
-  Sed eu ipsum ultrices nisl dictum venenatis.
-</Typography>
-<Typography noWrap variant="body2" component="span">
-  body2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-  Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. 
-  Aliquam feugiat maximus massa tempus pharetra. 
-  Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. 
-  Sed eu ipsum ultrices nisl dictum venenatis.
-</Typography>
-  `}}}}>
-    <Typography noWrap variant="body1" component="span">body1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. Aliquam feugiat maximus massa tempus pharetra. Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. Sed eu ipsum ultrices nisl dictum venenatis.</Typography><br/>
-    <Typography noWrap variant="body2" component="span">body2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate mauris dui, sit amet laoreet nunc tincidunt vel. Aliquam feugiat maximus massa tempus pharetra. Vestibulum metus nisl, lobortis quis enim feugiat, commodo molestie lacus. Sed eu ipsum ultrices nisl dictum venenatis.</Typography><br/>
-  </Story>
-</Canvas>
-
-
-## Properties
-<ArgsTable story="Default" />

package/src/Typography/Typography.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Typography } from './Typography';
-
-describe('Typography', () => {
-  it('renders without crashing', async () => {
-    render(<Typography />);
-  });
-});

package/src/Typography/Typography.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import MuiTypography from '@mui/material/Typography';
-
-import { TypographyProps, TypographyRef } from './Typography.types';
-
-export const Typography = React.forwardRef<TypographyRef, TypographyProps>(
-  function Typography(props, ref) {
-    const { upperCase, ...rest } = props;
-    return (
-      <MuiTypography
-        ref={ref}
-        {...rest}
-        sx={upperCase ? { textTransform: 'uppercase', ...props.sx } : props.sx}
-      >
-        {props.children}
-      </MuiTypography>
-    );
-  }
-);
-
-export default Typography;

package/src/Typography/Typography.types.ts

@@ -1,7 +0,0 @@
-import { TypographyProps as MuiTypographyProps } from '@mui/material/Typography/Typography';
-
-export interface TypographyProps extends MuiTypographyProps {
-  upperCase?: boolean;
-}
-
-export type TypographyRef = HTMLSpanElement;

package/src/Typography/index.ts

@@ -1,2 +0,0 @@
-export * from "./Typography"
-export * from "./Typography.types"

package/src/index.ts

@@ -1,97 +0,0 @@
-// Themes
-export * from './CssBaseline';
-export * from './Theme';
-export * from './ThemeProvider';
-
-// Components
-export * from './Accordion';
-export * from './AccordionDetails';
-export * from './AccordionPanel';
-export * from './AccordionSummary';
-export * from './ActivityLog';
-export * from './AppBar';
-export * from './Autocomplete';
-export * from './Avatar';
-export * from './AvatarGroup';
-// export * from './Badge'; // Temporarily remove Badge as it's only applicable for LawConnect theme
-export * from './BottomListButton';
-export * from './Box';
-export * from './Breadcrumbs';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './Chip';
-export * from './DatePicker';
-export * from './DateRangePicker';
-export * from './Dialog';
-export * from './Divider';
-export * from './Drawer';
-export * from './DrawerMenu';
-export * from './Dropdown';
-export * from './EmptyState';
-export * from './FooterActions';
-export * from './FormBody';
-export * from './FormContainer';
-export * from './FormGroup';
-export * from './FormHeader';
-export * from './Grid';
-export * from './HeaderToolbar';
-export * from './Icon';
-export * from './IconButton';
-export * from './ImageUpload';
-export * from './Input';
-export * from './InputLabel';
-export * from './List';
-export * from './ListItem';
-export * from './ListItemAvatar';
-export * from './ListItemHoverContent';
-export * from './ListItemIcon';
-export * from './ListItemText';
-export * from './ListSubheader';
-export * from './Loader';
-export * from './Menu';
-export * from './MenuHeader';
-export * from './MenuItem';
-export * from './Modal';
-export * from './ModalActions';
-export * from './ModalContent';
-export * from './ModalTitle';
-export * from './Pagination';
-export * from './ProgressBar';
-export * from './Popover';
-export * from './Radio';
-export * from './RibbonButton';
-export * from './RibbonButtonGroup';
-export * from './RadioGroup';
-export * from './Select';
-export * from './SidebarLayout';
-export * from './StepNavigation';
-export * from './Switch';
-export * from './Tab';
-export * from './TabListItem';
-export * from './Table';
-export * from './TableBody';
-export * from './TableCell';
-export * from './TableCellIcon';
-export * from './TableContainer';
-export * from './TableFooter';
-export * from './TableHead';
-export * from './TableRow';
-export * from './Tabs';
-export * from './Tag';
-export * from './TextField';
-export * from './Toolbar';
-export * from './ToolbarButton';
-export * from './Tooltip';
-export * from './TwoColumnLayout';
-export * from './Typography';
-
-// Icons
-export * from './AttachmentIcon';
-export * from './Icons/leap';
-export * from './Icons/common/Forms';
-export * from './Logos/Leap';
-export * from './Icons/doctypes/Doctype';
-export * from './Icons/doctypes/Doctype16';
-
-export const IconsPath = '../Icons/lawconnect/';

package/src/stories/ColorsLawconnect.stories.mdx

@@ -1,24 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import SBColorSwatchLawconnect from './resources/tokensColorsLawconnect';
-
-<Meta title="Design Tokens/LawConnect/Tokens" />
-
-# Colours
-
-```javascript
-yarn add @galaxy-ds/tokens
-```
-
-### CommonJS
-
-```javascript
-import * as tokens from '@galaxy-ds/tokens/dist/lawconnect/web/cjs/tokens';
-```
-
-#### Usage
-
-```javascript
-tokens.ColorPrimaryLight;
-```
-
-<SBColorSwatchLawconnect />

package/src/stories/ColorsLeap.stories.mdx

@@ -1,24 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs"
-import SBColorSwatchLeap from "./resources/tokensColorsLeap"
-
-<Meta title="Design Tokens/LEAP/Colours" />
-
-# Colours
-
-```javascript
-yarn add @galaxy-ds/tokens
-```
-
-### CommonJS
-
-```javascript
-import * as tokens from "@galaxy-ds/tokens/dist/leap/web/cjs/tokens"
-```
-
-#### Usage
-
-```javascript
-tokens.ColorPrimaryLight
-```
-
-<SBColorSwatchLeap />

package/src/stories/GettingStarted.stories.mdx

@@ -1,95 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-import packageJson from '../../package.json'; 
-import './introduction.css'; 
-
-<Meta title="Getting Started" id="01-GettingStarted" />
-
-<div class="tip">
-  <p>You’re browsing the documentation for version <strong>{packageJson.name}@{packageJson.version}</strong></p>
-</div>
-
-<br/>
-<br/>
-
-# Introduction
-React LEAP design system has been created to help you build UI components in isolation from the main app's business logic, data, and context.
-Explore our components, patterns, layouts and find all of the resources you need to build faster.
-
-
-### Install
-@galaxy-ds/core components are written in React, to add GDS to your project:
-
-With npm
-```
-npm install @galaxy-ds/core 
-```
-With yarn
-```
-yarn add @galaxy-ds/core
-```
-
-### ThemeProvider
-```javascript
-import { ThemeProvider, CssBaseline, theme } from '@galaxy-ds/core';
-
-<ThemeProvider theme={theme}>
-  <CssBaseline />
-  <!-- app -->
-</ThemeProvider>
-```
-
-### Components
-Import components you want into your project
-```javascript
-import { Button, Chip } from '@galaxy-ds/core';
-```
-
-### Fonts
-Web Theme requires Open Sans to be included in the HTML head.
-```html
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
-```
-
- 
-### Icons
-
-<div className="link-list link-list-ui">
-  <a className="link-item" href="/story/icons-attachment-icon--default-story">
-    <span class="link-icon">
-       <img src="/images/icons.svg" alt="Components" />
-    </span>
-    <span>
-      <strong>Doctype Icons</strong>
-      Custom icons to ensure a cleaner, more consistent, and more unified look to all LEAP applications.  
-    </span>
-  </a>
-</div>
-<br/>
-
-### UI Framework
-
-<div className="link-list link-list-ui">
-  <a className="link-item" href="/story/components-appbar--default-story">
-    <span class="link-icon">
-       <img src="/images/components.svg" alt="Components" />
-    </span>
-    <span>
-      <strong>Components</strong>
-      Our components are a collection of reusable interface elements.
-    </span>
-  </a>
-  <a className="link-item" href="/story/patterns-empty-state--default-story">
-    <span class="link-icon">
-       <img src="/images/resources.svg" alt="Patterns" />
-    </span>
-    <span>
-      <strong>Patterns</strong>
-      Patterns are a group of components that provide structure.
-    </span>
-  </a>
-</div>
-
-<br/>
-<br/>

package/src/stories/Guide.stories.mdx

@@ -1,45 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-import packageJson from '../../package.json'; 
-import './introduction.css'; 
-
-<Meta title="Guide" id="02-Guide"/>
-
-<div class="tip">
-  <p>You’re browsing the documentation for version <strong>{packageJson.name}@{packageJson.version}</strong></p>
-</div>
-
-<br/>
-<br/>
-
-# About this guide
-This guide provides an understanding on how to view the developer documentation for LEAP Galaxy React Library. 
- 
-<br/>
-<br/>
-
-## Toolbar
-Toolbar has been customised with LEAP specific time-saving tools built in with the ability to adjust how the story renders in the Canvas:
- 🎨 Background   
- ⚙️ Theme    
- 🖥 Viewport  
- 🚨 Status
-<br/>
-<br/>
-
-### ⚙️ Theme
-Custom themes are injected with the ThemeProvider providing the ability to view the component with either theme.<br/>
-Theme are based on LEAP UI Design.
-<div class="content-img"> 
-  <img src="/images/guide-theme.png" alt="Toolbar Theme" />
-</div>
-<br/>
-<br/>
-
-### 🖥 Viewport
-Viewport renders the component in a variety of dimensions and orientations. It’s ideal for checking the responsiveness of components.
-<div class="content-img"> 
-  <img src="/images/guide-viewport.png" alt="Toolbar Viewport" />
-</div>
-<br/>
-<br/>

package/src/stories/ReleaseNotes.stories.mdx

@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-import packageJson from '../../package.json'; 
-import './introduction.css'; 
-
-<Meta title="Release Notes" id="03-ReleaseNotes"/>
-
-<div class="tip">
-  <p>You’re browsing the documentation for version <strong>{packageJson.name}@{packageJson.version}</strong></p>
-</div>
-
-<br/>
-<br/>
-
-### [`@galaxy-ds/core@1.0.0`](https://npmjs.com/package/@galaxy-ds/core)
-- [Button] `color="default"` is deprecated, changed to `color="inherit"`
-- [MenuContext] is deprecated
-- [AppointmentCalendar] is deprecated
-- [Chip] `variant="primary"` is deprecated, changed to `color="primary"`

package/src/stories/TypographyLawconnect.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import SBTypography from './resources/typographyLawconnect';
-
-<Meta title="Design Tokens/LawConnect/Typography" />
-
-# Design Tokens/Typography
-
-```javascript
-yarn add @galaxy-ds/tokens
-```
-
-### CommonJS
-
-```javascript
-import * as tokens from '@galaxy-ds/tokens/dist/lawconnect/web/cjs/tokens';
-```
-
-#### Usage
-
-```javascript
-tokens.FontH1FontFamily;
-```
-
-<SBTypography />

package/src/stories/TypographyLeap.stories.mdx

@@ -1,26 +0,0 @@
-import { Meta } from "@storybook/addon-docs"
-
-import SBTypography from "./resources/typographyLeapWeb"
-
-<Meta title="Design Tokens/LEAP/Typography (Web)" />
-
-# Design Tokens/Typography
-TODO: add typography to LEAP Tokens
-
-```javascript
-yarn add @galaxy-ds/tokens
-```
-
-### CommonJS
-
-```javascript
-import * as tokens from "@galaxy-ds/tokens/dist/leap/web/cjs/tokens"
-```
-
-#### Usage
-
-```javascript
-tokens.FontH1FontFamily
-```
-
-<SBTypography />

package/src/stories/TypographyLeapDesktop.stories.mdx

@@ -1,26 +0,0 @@
-import { Meta } from "@storybook/addon-docs"
-
-import SBTypography from "./resources/typographyLeapDesktop"
-
-<Meta title="Design Tokens/LEAP/Typography (Desktop)" />
-
-# Design Tokens/Typography
-TODO: add typography to LEAP Tokens
-
-```javascript
-yarn add @galaxy-ds/tokens
-```
-
-### CommonJS
-
-```javascript
-import * as tokens from "@galaxy-ds/tokens/dist/leap/desktop/cjs/tokens"
-```
-
-#### Usage
-
-```javascript
-tokens.FontH1FontFamily
-```
-
-<SBTypography />