Skip to content

Commit

Permalink
Merge pull request #829 from securityscorecard/next
Browse files Browse the repository at this point in the history
🚀 Next release
  • Loading branch information
ajkl2533 authored Oct 4, 2023
2 parents ae79151 + 1e717bb commit 5928b65
Show file tree
Hide file tree
Showing 220 changed files with 349 additions and 161 deletions.
2 changes: 1 addition & 1 deletion .betterer/.betterer.results
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`no more deprecated components`] = {
"../src/components/FlexContainer/index.ts:1246547685": [
[0, 0, 59, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "3330215570"]
],
"../src/components/index.ts:3740729044": [
"../src/components/index.ts:3583195122": [
[18, 0, 32, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "726759703"]
]
}`
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Binary file modified .storybook/image-snapshots/expected/components_Filters_Default.png
Binary file modified .storybook/image-snapshots/expected/components_Icon_Icons List.png
Binary file modified .storybook/image-snapshots/expected/components_Pill_Removable.png
Diff not rendered.
1 change: 1 addition & 0 deletions src/components/CloseButton/CloseButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
ref={ref}
$isInverted={isInverted}
aria-label={ariaLabel}
type="button"
onClick={onClose}
{...props}
>
Expand Down
16 changes: 16 additions & 0 deletions src/components/Datatable/DatatableTests.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { simpleColumns } from '../_internal/BaseTable/mocks/columns';
import { DatatableProps } from './Datatable.types';
import { DatatableStore, datatableInitialState } from './Datatable.store';
import { tableActionsMock } from './mocks/actions';
import { Text } from '../typographyLegacy';
import { Stack } from '../layout';

MockDate.set('2021-03-31T00:00:00Z');

Expand Down Expand Up @@ -302,3 +304,17 @@ WithPersistedState.args = {
...MinimalConfig.args,
id: 'persisted_state',
};
WithPersistedState.parameters = {
screenshot: { skip: true },
};
WithPersistedState.decorators = [
(storyFn) => (
<Stack gap="md">
<Text>
An id must be provided to the Datatable in order to persists the table
configuration.
</Text>
{storyFn()}
</Stack>
),
];
36 changes: 36 additions & 0 deletions src/components/Signal/Signal.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { screen } from '@testing-library/react';
import React from 'react';

import { renderWithProviders } from '../../utils/tests/renderWithProviders';
import { Signal } from './index';

describe('Signal', () => {
it('should not render if empty "kind" prop is provided', () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderWithProviders(<Signal kind="" />);

expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
});
it('should not render if "kind" prop is null', () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderWithProviders(<Signal kind={null} />);

expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
});
it('should not render if "kind" prop is undefined', () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderWithProviders(<Signal kind={undefined} />);

expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
});
it('should not render if unknown "kind" prop is provided', () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderWithProviders(<Signal kind="strange" />);

expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
});
});
9 changes: 7 additions & 2 deletions src/components/Signal/Signal.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { prop } from 'ramda';
import { isNilOrEmpty } from 'ramda-adjunct';
import { isNilOrEmpty, isUndefined } from 'ramda-adjunct';
import cls from 'classnames';

import { colors } from '../../theme/colors';
Expand Down Expand Up @@ -68,11 +68,16 @@ const Signal: React.FC<SignalProps> = ({
}) => {
if (isNilOrEmpty(kind)) return null;

const { color, paths } = prop(kind.toLowerCase())(kinds);
const severityKind = prop(kind.toLowerCase(), kinds);

if (isUndefined(severityKind)) return null;

const { color, paths } = severityKind;

return (
<svg
className={cls(CLX_COMPONENT, className)}
data-testid="ds-severity-icon"
height={size}
viewBox="0 0 16 16"
width={size}
Expand Down
19 changes: 19 additions & 0 deletions src/components/StatusDot/StatusDot.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';

import StatusDot from './StatusDot';
import { Inline } from '../layout';

export default {
title: 'components/StatusDot',
component: StatusDot,
} as Meta;

export const Default: Story = () => (
<Inline gap="lg">
<StatusDot color="good" />
<StatusDot color="bad" />
<StatusDot color="neutral" />
<StatusDot color="inactive" />
</Inline>
);
34 changes: 34 additions & 0 deletions src/components/StatusDot/StatusDot.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import Styled from 'styled-components';
import PropTypes from 'prop-types';

import { getRadii, pxToRem } from '../../utils';

export const StatusDotColors = {
good: '100, 244, 81',
bad: '242, 46, 67',
neutral: '84, 129, 217',
inactive: '216, 216, 216',
} as const;

const StatusDotComponent = Styled.div`
width: ${pxToRem(12)};
height: ${pxToRem(12)};
border-radius: ${getRadii('round')};
background-color: rgb(${({ color }) => StatusDotColors[color]});
border: 2px solid white;
box-shadow: 0 0 12px 0px rgba(${({ color }) =>
`${StatusDotColors[color]}, 0.5`});
`;

const StatusDot = ({
color = 'inactive',
}: {
color: keyof typeof StatusDotColors;
}) => <StatusDotComponent color={color} role="presentation" />;

StatusDot.propTypes = {
color: PropTypes.oneOf(Object.keys(StatusDotColors)),
};

export default StatusDot;
1 change: 1 addition & 0 deletions src/components/StatusDot/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as StatusDot } from './StatusDot';
19 changes: 19 additions & 0 deletions src/components/StatusPill/StatusPill.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';

import StatusPill from './StatusPill';
import { Inline } from '../layout';

export default {
title: 'components/StatusPill',
component: StatusPill,
} as Meta;

export const Default: Story = () => (
<Inline gap="lg">
<StatusPill color="good" label="Good" />
<StatusPill color="bad" label="Bad" />
<StatusPill color="neutral" label="Neutral" />
<StatusPill color="inactive" label="Inactive" />
</Inline>
);
44 changes: 44 additions & 0 deletions src/components/StatusPill/StatusPill.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';
import Styled from 'styled-components';
import PropTypes from 'prop-types';

import { StatusDot } from '../StatusDot/index';
import { StatusDotColors } from '../StatusDot/StatusDot';
import { StatusPillProps } from './StatusPill.types';
import PillLabel from '../Pill/PillLabel';
import { SpaceSizes } from '../../theme';
import { Inline, Padbox } from '../layout';
import { PaddingTypes } from '../layout/Padbox/Padbox.enums';
import { getColor, getRadii, pxToRem } from '../../utils';

const StyledPillWrapper = Styled(Padbox)`
display: inline-block;
height: ${pxToRem(24)};
min-width: 0;
border-radius: ${getRadii('round')};
border: 1px solid ${getColor('neutral.200')};
background-color: ${getColor('neutral.0')};
padding-right: ${pxToRem(6)};
padding-top: ${pxToRem(3)};
`;

const StatusPill: React.FC<StatusPillProps> = ({
color = 'inactive',
label,
}) => (
<StyledPillWrapper
paddingSize={SpaceSizes.xs}
paddingType={PaddingTypes.squish}
>
<Inline align="center" gap="sm">
<StatusDot color={color} />
<PillLabel>{label}</PillLabel>
</Inline>
</StyledPillWrapper>
);

StatusPill.propTypes = {
label: PropTypes.string.isRequired,
color: PropTypes.oneOf(Object.keys(StatusDotColors)),
};
export default StatusPill;
6 changes: 6 additions & 0 deletions src/components/StatusPill/StatusPill.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { StatusDotColors } from '../StatusDot/StatusDot';

export interface StatusPillProps {
color?: keyof typeof StatusDotColors;
label: string;
}
1 change: 1 addition & 0 deletions src/components/StatusPill/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as StatusPill } from './StatusPill';
39 changes: 16 additions & 23 deletions src/components/_internal/BaseButton/BaseStyledButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,6 @@ const ButtonSolid = css<BaseStyledButtonProps>`
outline: 4px solid ${(p) => getToken(`color-action-${p.$color}-focus`, p)};
}
&:active,
&.active {
background-color: ${(p) => getToken(`color-action-${p.$color}-active`, p)};
}
&:disabled,
&.disabled {
background-color: ${getToken(`color-action-background-disabled`)};
Expand All @@ -53,6 +48,8 @@ const ButtonOutline = css<BaseStyledButtonProps>`
&:hover,
&.hover {
background-color: ${(p) =>
getToken(`color-action-background-${p.$color}-active`, p)};
color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
border-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
}
Expand All @@ -62,13 +59,6 @@ const ButtonOutline = css<BaseStyledButtonProps>`
border-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
outline: 4px solid ${(p) => getToken(`color-action-${p.$color}-focus`, p)};
}
&:active,
&.active {
background-color: ${(p) =>
getToken(`color-action-background-${p.$color}-active`, p)};
border-color: ${(p) => getToken(`color-action-${p.$color}-active`, p)};
color: ${(p) => getToken(`color-action-${p.$color}-active`, p)};
}
&:disabled,
&.disabled {
Expand Down Expand Up @@ -107,17 +97,6 @@ const ButtonText = css<BaseStyledButtonProps>`
outline: none;
}
&:active,
&&&.active {
color: ${(p) =>
getToken(
`color-action-${
p.$color === 'primary' || p.$color === 'secondary' ? 'link-' : ''
}${p.$color}-active`,
p,
)};
}
&:disabled,
&.disabled {
color: ${getToken(`color-action-text-disabled`)};
Expand All @@ -144,6 +123,8 @@ const BaseStyledButton = styled(Padbox).withConfig({
cursor: pointer;
text-align: center;
white-space: nowrap;
transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
transform 50ms cubic-bezier(0.55, 0.085, 0.68, 0.53), outline 0ms;
${({ $margin }) => createMarginSpacing($margin)};
${({ $isExpanded }) => $isExpanded && 'width: 100%;'};
Expand All @@ -169,6 +150,18 @@ const BaseStyledButton = styled(Padbox).withConfig({
&:active {
text-decoration: none;
}
&:active,
&&&.active {
transform: scale(0.98);
}
@media (prefers-reduced-motion) {
&:active,
&&&.active {
transform: scale(1);
}
}
`;

export default BaseStyledButton;
4 changes: 2 additions & 2 deletions src/components/_internal/BaseLink/BaseLink.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { css } from 'styled-components';
import { getFontWeight, getRadii, getToken } from '../../../utils';
import { Colors } from './BaseLink.types';

type LinkStylesProps = { $color: Colors };
type LinkStylesProps = { $color: Colors; $isExperimental: boolean };

export const LinkBaseStyles = css<LinkStylesProps>`
margin: 0;
Expand All @@ -24,7 +24,7 @@ export const LinkFocusStyles = css<LinkStylesProps>`
color: ${(p) => getToken(`color-action-link-${p.$color}-hover`, p)};
text-decoration: underline;
background-color: ${(p) =>
getToken(`color-action-link-background${p.$color}-focus`, p)};
getToken(`color-action-link-background-${p.$color}-focus`, p)};
border-radius: ${getRadii('default')};
`;
export const LinkActiveStyles = css<LinkStylesProps>`
Expand Down
2 changes: 2 additions & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export * from './Signal';
export * from './SingleDatePicker';
export * from './SortableList';
export * from './Spinner';
export * from './StatusDot';
export * from './StatusPill';
export * from './Stepper';
export * from './Table';
export * from './Tabs';
Expand Down
1 change: 0 additions & 1 deletion src/components/typographyLegacy/Heading/Heading.enums.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export const HeadingSizes = {
h0: 'h0',
h1: 'h1',
h2: 'h2',
h3: 'h3',
Expand Down
10 changes: 1 addition & 9 deletions src/components/typographyLegacy/Heading/Heading.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';

import Heading, { H0, H1, H2, H3, H4, H5 } from './Heading';
import Heading, { H1, H2, H3, H4, H5 } from './Heading';
import { HeadingProps } from './Heading.types';
import { HeadingSizes, HeadingVariants } from './Heading.enums';
import { generateControl } from '../../../utils/tests/storybook';
Expand Down Expand Up @@ -37,14 +37,6 @@ Playground.parameters = {
screenshot: { skip: true },
};

export const H0Story: Story = () => (
<>
<H0>Heading H0</H0>
<H0 variant={HeadingVariants.secondary}>Heading H0 - secondary</H0>
</>
);
H0Story.storyName = 'Heading H0';

export const H1Story: Story = () => (
<>
<H1>Heading H1</H1>
Expand Down
Loading

0 comments on commit 5928b65

Please sign in to comment.