Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ApiTable): Add ability to specify function type #485

Merged
merged 7 commits into from
Mar 1, 2022
Merged

feat(ApiTable): Add ability to specify function type #485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9aebac1
fix(Storybook): Get working again
jpveooys Feb 23, 2022
fa024a3
build(NextJS): Apply automatic configuration changes
jpveooys Feb 28, 2022
7f5e186
build(Storybook): Remove dependency on CSS Framework
jpveooys Feb 28, 2022
54b143a
test(Jest): Remove redundant configuration in package.json
jpveooys Feb 28, 2022
49a578b
chore(Security): Resolve yarn audit warnings
jpveooys Feb 28, 2022
afa812a
test(E2E): Fix failing tests after Contentful updates
jpveooys Feb 28, 2022
a76fb00
feat(ApiTable): Add ability to specify function type
jpveooys Feb 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 46 additions & 18 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
module.exports = {
stories: ['../**/*.stories.tsx'],
addons: [
'@storybook/addon-postcss',
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
{
name: '@storybook/addon-storysource',
options: {
Expand All @@ -14,24 +12,54 @@ module.exports = {
},
},
},
'@storybook/preset-scss',
],
webpackFinal: async (config) => {
config.module.rules.unshift({
test: /\.svg$/i,
use: [
{
loader: '@svgr/webpack',
options: {
prettier: false,
svgo: true,
svgoConfig: { plugins: [{ removeViewBox: false }] },
titleProp: true,
core: {
builder: 'webpack5',
},
webpackFinal: (config) => {
const svgrOptions = {
prettier: false,
svgo: true,
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
minifyStyles: false,
},
},
},
},
],
})
'convertStyleToAttrs',
],
},
titleProp: true,
}

return config
return {
...config,
module: {
...config.module,
rules: [
{
oneOf: [
{
test: /\.svg$/i,
use: [
{
loader: '@svgr/webpack',
options: svgrOptions,
},
],
},
{
rules: [...config.module.rules],
},
],
},
],
},
}
},
}
11 changes: 10 additions & 1 deletion .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import '@defencedigital/css-framework/index.scss'
import '@defencedigital/fonts'

import { GlobalStyleProvider } from '@defencedigital/react-component-library'

export const parameters = {
layout: 'fullscreen',
}

export const decorators = [
(Story) => (
<GlobalStyleProvider>
<Story />
</GlobalStyleProvider>
),
]
8 changes: 4 additions & 4 deletions components/adapters/Framework/ApiTableAdapter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ interface ApiTableAdapterProps extends ComponentWithClass {
function renderDefaultValue(
defaultValue: ApiFieldDefaultValueType
): React.ReactElement {
const { value, args } = defaultValue || {}
const { value, args, type } = defaultValue || {}

if (args) {
return (
<ApiTableDefaultValue>
{args.map(({ type, name }) => {
<ApiTableDefaultValue type={type}>
{args.map(({ type: argType, name }) => {
return (
<ApiTableFunctionParameter key={name} type={type}>
<ApiTableFunctionParameter key={name} type={argType}>
{name}
</ApiTableFunctionParameter>
)
Expand Down
3 changes: 2 additions & 1 deletion components/layouts/Framework/Framework.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from 'react'
import Head from 'next/head'
import Script from 'next/script'

import { Masthead } from '../../presenters/Framework/Masthead'
import { Sidebar } from '../../presenters/Framework/Sidebar'
Expand All @@ -22,11 +23,11 @@ export const LayoutFramework: React.FC<LayoutFrameworkProps> = ({

return (
<>
<Script src="/static/newrelic.js" strategy="beforeInteractive" />
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script type="text/javascript" src="/static/newrelic.js" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These were generating a warning: https://nextjs.org/docs/messages/no-script-tags-in-head-component

</Head>
<Masthead
title="MOD.UK Design System"
Expand Down
3 changes: 2 additions & 1 deletion components/layouts/Homepage/Homepage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import Head from 'next/head'
import Script from 'next/script'

import { ComponentWithClass } from '../../../common/ComponentWithClass'
import { FooterProps } from '../../presenters/Docs/Footer'
Expand All @@ -24,11 +25,11 @@ export const LayoutHomepage: React.FC<LayoutHomepageProps> = ({
title,
}) => (
<>
<Script src="/static/newrelic.js" strategy="beforeInteractive" />
<Head>
<title>{title} | MOD.UK Design System</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script type="text/javascript" src="/static/newrelic.js" />
</Head>
<StyledPageWrapper>
{pageBanner}
Expand Down
3 changes: 2 additions & 1 deletion components/layouts/Legacy/Legacy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import { BreadcrumbsItemProps } from '@defencedigital/react-component-library'
import Head from 'next/head'
import { Nav } from '@defencedigital/react-component-library/dist/types/common/Nav'
import Script from 'next/script'

import { ComponentWithClass } from '../../../common/ComponentWithClass'
import { ContentBannerProps } from '../../presenters/Docs/ContentBanner'
Expand Down Expand Up @@ -42,11 +43,11 @@ export const LayoutLegacy: React.FC<LayoutComponentProps> = ({
title,
}) => (
<>
<Script src="/static/newrelic.js" strategy="beforeInteractive" />
<Head>
<title>{title} | MOD.UK Design System</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script type="text/javascript" src="/static/newrelic.js" />
</Head>
<StyledPageWrapper>
{pageBanner}
Expand Down
2 changes: 1 addition & 1 deletion components/presenters/Framework/ApiTable/ApiTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ stories.add('Default', () => (
stories.add('Function', () => (
<ApiTable>
<ApiTableItem name="render" type="Func">
<ApiTableDefaultValue>
<ApiTableDefaultValue type="(props: { name1, name2, name3 }) => void">
<ApiTableFunctionParameter type="date">name1</ApiTableFunctionParameter>
<ApiTableFunctionParameter type="number">
name2
Expand Down
32 changes: 30 additions & 2 deletions components/presenters/Framework/ApiTable/ApiTable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ describe('API table', () => {
beforeEach(() => {
wrapper = render(
<ApiTable>
<ApiTableItem name="startDate" type="Date">
<ApiTableDefaultValue>
<ApiTableItem name="render" type="func">
<ApiTableDefaultValue type="() => void">
<ApiTableFunctionParameter type="date">
name1
</ApiTableFunctionParameter>
Expand All @@ -88,6 +88,12 @@ describe('API table', () => {
)
})

it('renders the function type', () => {
expect(
wrapper.getByTestId('api-table-default-value-type')
).toHaveTextContent('() => void')
})

it('should render the parameter names', () => {
const parameterNames = wrapper.getAllByTestId('api-table-parameter-name')
expect(parameterNames[0]).toHaveTextContent('name1')
Expand All @@ -104,4 +110,26 @@ describe('API table', () => {
expect(parameterTypes).toHaveLength(3)
})
})

describe('function item with default type', () => {
beforeEach(() => {
wrapper = render(
<ApiTable>
<ApiTableItem name="render" type="func">
<ApiTableDefaultValue>
<ApiTableFunctionParameter type="date">
name1
</ApiTableFunctionParameter>
</ApiTableDefaultValue>
</ApiTableItem>
</ApiTable>
)
})

it('renders the default function type', () => {
expect(
wrapper.getByTestId('api-table-default-value-type')
).toHaveTextContent('Function')
})
})
})
6 changes: 5 additions & 1 deletion components/presenters/Framework/ApiTable/ApiTableDefaultValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import { StyledBodyRowValue } from './partials/StyledBodyRowValue'
import { StyledParameters } from './partials/StyledParameters'

export interface ApiTableDefaultValueProps {
type?: string
children?:
| string
| React.ReactElement<ApiTableFunctionParameterProps>
| React.ReactElement<ApiTableFunctionParameterProps>[]
}

export const ApiTableDefaultValue: React.FC<ApiTableDefaultValueProps> = ({
type,
children,
}) => {
if (isNil(children) || isString(children)) {
Expand All @@ -32,7 +34,9 @@ export const ApiTableDefaultValue: React.FC<ApiTableDefaultValueProps> = ({
<StyledBodyRow>
<StyledBodyRowItem>Default Value</StyledBodyRowItem>
<StyledBodyRowValue>
<code>Function</code>
<code data-testid="api-table-default-value-type">
{type || 'Function'}
</code>
<StyledParameters>{children}</StyledParameters>
</StyledBodyRowValue>
</StyledBodyRow>
Expand Down
2 changes: 1 addition & 1 deletion components/presenters/Framework/ApiTable/partials/StyledParameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ export const StyledParameters = styled.ul`
justify-content: flex-start;
border-radius: 4px;
padding: 0;
margin: 0 0 ${spacing('4')} -4px;
margin: ${spacing('6')} 0 ${spacing('4')} -4px;
`
Loading