diff --git a/.github/workflows/pull_requests.yml b/.github/workflows/pull_requests.yml index 7c5a8909..8c38ede8 100644 --- a/.github/workflows/pull_requests.yml +++ b/.github/workflows/pull_requests.yml @@ -67,32 +67,6 @@ jobs: - name: Run linter run: npm run lint - audit: - needs: [setup] - runs-on: ubuntu-latest - steps: - - name: Checkout 🛎️ - uses: actions/checkout@v3 - with: - ref: ${{ github.event.pull_request.head.ref }} - repository: ${{ github.event.pull_request.head.repo.full_name }} - fetch-depth: 0 - - - name: Setup Node.js - uses: actions/setup-node@v2 - with: - node-version: ${{ needs.setup.outputs.nvmrc }} - cache: npm - - - name: Restore npm installs and Lerna setup - run: npm ci --ignore-scripts - - - name: Audit Dependencies - run: npm run audit:ci - env: - OSSI_USERNAME: ${{ secrets.OSSI_USERNAME }} - OSSI_TOKEN: ${{ secrets.OSSI_TOKEN }} - test: needs: [setup] runs-on: ubuntu-latest diff --git a/system/core/src/components/FormBanner.ts b/system/core/src/components/FormBanner.ts deleted file mode 100644 index 9267e21a..00000000 --- a/system/core/src/components/FormBanner.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { css } from '../utils'; - -export const element = 'div'; -export const className = 'form-banner'; - -const variants = [ - 'success', - 'info', - 'error', - 'warning', - 'neutral', - 'purple', - 'orange' -] as const; - -export type FormBannerVariant = (typeof variants)[number]; - -export interface Props { - 'data-variant': FormBannerVariant; -} - -export const fullStyles = css` - display: flex; - gap: var(--spacing-l2); - color: var(--neutral-text); - background: var(--neutral-surface); - border-radius: var(--border-radius-small); - padding: var(--spacing-l4) var(--spacing-l3); - align-items: flex-start; - width: 100%; - - &[data-variant='error'] { - color: var(--error-text); - background: var(--error-surface); - } - &[data-variant='warning'] { - color: var(--warning-text); - background: var(--warning-surface); - } - &[data-variant='success'] { - color: var(--success-text); - background: var(--success-surface); - } - &[data-variant='info'] { - color: var(--info-text); - background: var(--info-surface); - } - &[data-variant='purple'] { - color: var(--purple-text); - background: var(--purple-surface); - } - &[data-variant='orange'] { - color: var(--orange-text); - background: var(--orange-surface); - } -`; diff --git a/system/core/src/index.ts b/system/core/src/index.ts index 422dddab..26c7b5d1 100644 --- a/system/core/src/index.ts +++ b/system/core/src/index.ts @@ -13,7 +13,6 @@ export * as checkboxRadioLabel from './components/CheckboxRadioLabel'; export * as childAnchors from './components/ChildAnchors'; export * as chip from './components/Chip'; export * as chipRow from './components/ChipRow'; -export * as formBanner from './components/FormBanner'; export * as iconButton from './components/IconButton'; export * as inputAlert from './components/InputAlert'; export * as inputCore from './components/InputCore'; diff --git a/system/react-css/src/index.ts b/system/react-css/src/index.ts index 5b74c8f9..660260cf 100644 --- a/system/react-css/src/index.ts +++ b/system/react-css/src/index.ts @@ -75,13 +75,6 @@ export { export type { Props as CheckboxRadioLabelProps } from './structuredComponents/CheckboxRadioLabel'; export { Chip } from './structuredComponents/Chip'; export type { Props as ChipProps } from './structuredComponents/Chip'; -export { - FormBannerCore, - FormBannerMessage, - FormBannerIconWrapper, - FormBanner -} from './structuredComponents/FormBanner'; -export type { Props as FormBannerProps } from './structuredComponents/FormBanner'; export { Input } from './structuredComponents/Input'; export type { Props as InputProps } from './structuredComponents/Input'; export { InputAlert } from './structuredComponents/InputAlert'; diff --git a/system/react-css/src/structuredComponents/Alert.tsx b/system/react-css/src/structuredComponents/Alert.tsx index dde3bbc4..ccd3098b 100644 --- a/system/react-css/src/structuredComponents/Alert.tsx +++ b/system/react-css/src/structuredComponents/Alert.tsx @@ -18,7 +18,7 @@ export const AlertTitle = React.forwardRef< React.HTMLAttributes >((props, ref) => ( // eslint-disable-next-line jsx-a11y/heading-has-content -

)); diff --git a/system/react-css/src/structuredComponents/FormBanner.tsx b/system/react-css/src/structuredComponents/FormBanner.tsx deleted file mode 100644 index d6a364b0..00000000 --- a/system/react-css/src/structuredComponents/FormBanner.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { formBanner } from '@tablecheck/tablekit-core'; -import * as React from 'react'; - -import { getSentimentIcon } from '../config'; - -export type Props = formBanner.Props; - -export const FormBannerCore = React.forwardRef< - HTMLDivElement, - Props & React.HTMLAttributes ->((props, ref) => ( -
-)); - -export const FormBannerMessage = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->((props, ref) => ( -
-)); - -export const FormBannerIconWrapper = React.forwardRef< - HTMLSpanElement, - React.HTMLAttributes ->((props, ref) => ( - -)); - -interface ComposedProps extends Props { - /** - * Icon to display in the form banner. Pass `null` to display sentiment one. - */ - icon?: React.ReactNode; - children: React.ReactNode; -} - -function getIcon(variant: Props['data-variant']): JSX.Element { - if (variant === 'purple' || variant === 'orange') - return getSentimentIcon('default', 16); - return getSentimentIcon(variant, 16); -} - -export const FormBanner = React.forwardRef< - HTMLDivElement, - ComposedProps & React.HTMLAttributes ->((props, ref) => { - const { icon, title, children, ...passThrough } = props; - return ( - - - {icon ?? getIcon(passThrough['data-variant'])} - - {children} - - ); -}); diff --git a/system/react/src/index.ts b/system/react/src/index.ts index 85f72311..1d4025ef 100644 --- a/system/react/src/index.ts +++ b/system/react/src/index.ts @@ -140,13 +140,6 @@ export { export type { Props as AlertProps } from './structuredComponents/Alert'; export { chipStyledComponents, Chip } from './structuredComponents/Chip'; export type { Props as ChipProps } from './structuredComponents/Chip'; -export { - FormBannerCore, - FormBannerMessage, - FormBannerIconWrapper, - FormBanner -} from './structuredComponents/FormBanner'; -export type { Props as FormBannerProps } from './structuredComponents/FormBanner'; export { Input } from './structuredComponents/Input'; export type { Props as InputProps } from './structuredComponents/Input'; export { InputAlertInner, InputAlert } from './structuredComponents/InputAlert'; diff --git a/system/react/src/structuredComponents/Alert.tsx b/system/react/src/structuredComponents/Alert.tsx index 726ccb49..503e83a4 100644 --- a/system/react/src/structuredComponents/Alert.tsx +++ b/system/react/src/structuredComponents/Alert.tsx @@ -11,12 +11,13 @@ export const AlertCore = styled.div` ${alert.fullStyles} `; -export const AlertTitle = styled.h4` +export const AlertTitle = styled.h5` grid-area: title; `; export const AlertDescription = styled.div` grid-area: description; + font: var(--body-2); `; export const AlertCloseButton = styled.button` diff --git a/system/react/src/structuredComponents/FormBanner.tsx b/system/react/src/structuredComponents/FormBanner.tsx deleted file mode 100644 index 46450f77..00000000 --- a/system/react/src/structuredComponents/FormBanner.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled from '@emotion/styled'; -import { formBanner } from '@tablecheck/tablekit-core'; -import * as React from 'react'; - -import { getSentimentIcon } from '../config'; - -export type Props = formBanner.Props; - -export const FormBannerCore = styled.div` - ${formBanner.fullStyles} -`; - -export const FormBannerMessage = styled.div` - font: var(--body-2); -`; - -export const FormBannerIconWrapper = React.forwardRef< - HTMLSpanElement, - React.HTMLAttributes ->((props, ref) => ( - -)); - -interface ComposedProps extends Props { - /** - * Icon to display in the form banner. Pass `null` to display sentiment one. - */ - icon?: React.ReactNode; - children: React.ReactNode; -} - -function getIcon(variant: Props['data-variant']): JSX.Element { - if (variant === 'purple' || variant === 'orange') - return getSentimentIcon('default', 16); - return getSentimentIcon(variant, 16); -} - -export const FormBanner = React.forwardRef< - HTMLDivElement, - ComposedProps & React.HTMLAttributes ->((props, ref) => { - const { icon, children, ...passThrough } = props; - return ( - - - {icon ?? getIcon(passThrough['data-variant'])} - - {children} - - ); -}); diff --git a/system/stories/src/FormBanner.stories.tsx b/system/stories/src/FormBanner.stories.tsx deleted file mode 100644 index 17e928df..00000000 --- a/system/stories/src/FormBanner.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Meta, StoryFn } from '@storybook/react'; -import { formBanner } from '@tablecheck/tablekit-core'; -import * as emotion from '@tablecheck/tablekit-react'; -import * as css from '@tablecheck/tablekit-react-css'; -import * as React from 'react'; - -const contentVariants: emotion.FormBannerProps['data-variant'][] = [ - 'success', - 'info', - 'error', - 'warning', - 'neutral', - 'purple', - 'orange' -]; - -type LayoutComponents = Record<'FormBanner', React.ElementType>; - -export default { - title: 'Components/FormBanner', - component: emotion.FormBanner, - parameters: { - ...formBanner, - variants: contentVariants, - auxiliaryComponents: [ - emotion.FormBannerIconWrapper, - emotion.FormBannerMessage - ] - } -} as Meta; - -const Template: StoryFn = ({ FormBanner }) => ( - <> - {contentVariants.map((variant) => ( - - Important message to explain a form or a section of a form. - - ))} - -); - -export const Emotion: StoryFn = Template.bind({}); -Emotion.args = { - FormBanner: emotion.FormBanner -} satisfies LayoutComponents; -Emotion.parameters = { useEmotion: true }; - -export const Class: StoryFn = Template.bind({}); -Class.args = { - FormBanner: css.FormBanner -} satisfies LayoutComponents; -Class.parameters = { useEmotion: false };