Skip to content

Commit

Permalink
Merge pull request #818 from securityscorecard/next
Browse files Browse the repository at this point in the history
🚀 Next release
  • Loading branch information
ajkl2533 authored Sep 7, 2023
2 parents d445034 + 62474b7 commit 7ac94e2
Show file tree
Hide file tree
Showing 275 changed files with 132 additions and 102 deletions.
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.
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_Tabs_Text Tabs.png
Binary file modified .storybook/image-snapshots/expected/components_Tooltip_Width.png
15 changes: 7 additions & 8 deletions src/components/Datatable/BatchModule/BatchModule.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,18 @@ import { isNonEmptyArray } from 'ramda-adjunct';
import styled from 'styled-components';
import PropTypes from 'prop-types';

import { pxToRem } from '../../../utils';
import { SpaceSizes } from '../../../theme';
import { getSpace } from '../../../utils';
import { SSCIconNames } from '../../../theme/icons/icons.enums';
import { Inline, Padbox } from '../../layout';
import { Inline } from '../../layout';
import { ColumnsControls } from '../components/ColumnsControls';
import { ControlButton } from '../components/ControlButton';
import { BatchActions } from './BatchActions';
import { ElementCounter } from './ElementCounter';
import { BatchModuleProps } from './BatchModule.types';
import { DatatableStore } from '../Datatable.store';

const BatchModuleWrapper = styled(Padbox)`
min-height: ${pxToRem(64)};
const BatchModuleWrapper = styled.div`
padding: ${getSpace('md')};
`;

const BatchModule: React.FC<BatchModuleProps> = ({
Expand Down Expand Up @@ -49,9 +48,9 @@ const BatchModule: React.FC<BatchModuleProps> = ({
}, []);

return (
<BatchModuleWrapper paddingSize={SpaceSizes.md}>
<BatchModuleWrapper>
<Inline align="center" justify="space-between">
<Inline align="center">
<Inline align="center" gap="md">
{isButtonDisplayed && (
<ColumnsControls
isOpen={isColumnsActive}
Expand All @@ -67,7 +66,7 @@ const BatchModule: React.FC<BatchModuleProps> = ({
}}
>
<ControlButton
iconName={SSCIconNames.table}
iconName={SSCIconNames.columns3}
label="Toggle columns"
onClick={() => {
setIsColumnsActive((prev) => !prev);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { isPositive } from 'ramda-adjunct';
import styled from 'styled-components';
import styled, { useTheme } from 'styled-components';

import { Text } from '../../../typographyLegacy';
import { HeadingVariants } from '../../../typographyLegacy/Heading/Heading.enums';
Expand All @@ -17,9 +17,8 @@ import { Icon } from '../../../Icon';
import { SSCIconNames } from '../../../../theme/icons/icons.enums';
import { DatatableStore } from '../../Datatable.store';
import { ElementCounterProps } from './ElementCounter.types';
import { Inline, Padbox } from '../../../layout';
import { Inline } from '../../../layout';
import { SpaceSizes } from '../../../../theme';
import { PaddingTypes } from '../../../layout/Padbox/Padbox.enums';

const SelectionButton = styled.button`
display: inline-flex;
Expand Down Expand Up @@ -55,17 +54,15 @@ export const getCounterContent = (

function ElementCounterWrapper({ children, ...props }) {
return (
<Padbox paddingSize={SpaceSizes.sm} paddingType={PaddingTypes.squish}>
<Inline align="center" gap={SpaceSizes.xs} {...props}>
{children}
</Inline>
</Padbox>
<Inline align="center" gap={SpaceSizes.xs} {...props}>
{children}
</Inline>
);
}
ElementCounterWrapper.displayName = 'ElementCounterWrapper';

const CounterText = styled(Text).attrs(() => ({
size: 'h4',
size: 'md',
margin: 'none',
variant: HeadingVariants.secondary,
}))`
Expand All @@ -77,6 +74,7 @@ const ElementCounter: React.FC<ElementCounterProps> = ({
hasSelection,
hasOnlyPerPageSelection,
}) => {
const theme = useTheme();
const { selectedIds, hasExclusiveSelection } = DatatableStore.useState(
(s) => ({
selectedIds: s.selectedIds,
Expand Down Expand Up @@ -133,7 +131,10 @@ const ElementCounter: React.FC<ElementCounterProps> = ({
type="button"
onClick={handleSelectNoneClick}
>
<Icon name={SSCIconNames.times} />
<Icon
name={SSCIconNames.times}
style={{ fontSize: getFontSize('md', { theme }) }}
/>
</SelectionButton>
)}
</ElementCounterWrapper>
Expand Down Expand Up @@ -168,6 +169,7 @@ const ElementCounter: React.FC<ElementCounterProps> = ({
<Icon
data-testid="selection-dropdown"
name={SSCIconNames.angleDown}
style={{ fontSize: getFontSize('md', { theme }) }}
/>
</SelectionButton>
</DropdownMenu>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Datatable/ControlsModule/ControlsModule.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ function ControlsModule<D extends Record<string, unknown>>({
>
{(props) => (
<ControlButton
iconName={SSCIconNames.table}
iconName={SSCIconNames.columns3}
label="Toggle columns"
onClick={() =>
handleControlOnClick(
Expand Down
4 changes: 2 additions & 2 deletions src/components/Datatable/Datatable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const StyledDatatable = styled(Padbox)`
flex-direction: column;
position: relative;
border: 1px solid ${getColor('neutral.400')};
border-radius: ${getRadii('default')};
background: ${getColor('neutral.200')};
border-radius: ${getRadii('double')};
background: ${getColor('neutral.0')};
`;

const mapSelectedRows = <D,>(defaultSelectedRowIds: IdType<D>[]) =>
Expand Down
40 changes: 23 additions & 17 deletions src/components/Datatable/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ import { TextSizes } from '../../typographyLegacy/Text/Text.enums';
import { SpaceSizes } from '../../../theme';
import { Button, ButtonEnums } from '../../Button';

const NoDataOutline = styled.div`
border-top: 1px solid ${getColor('neutral.400')};
`;

const NoDataContainer = styled(Padbox)`
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -347,24 +351,26 @@ function Table<D extends Record<string, unknown>>({
)}
</BaseTableAndLoadingOverlayContainer>
{hiddenColumnsLength === columns.length && (
<NoDataContainer>
<Stack gap={SpaceSizes.sm} justify="flex-start">
<Stack gap={SpaceSizes.md}>
<H4>
{dataSize} {dataSize === 1 ? 'items' : 'item'} found
</H4>
<Paragraph size={TextSizes.md}>
But all columns are hidden at the moment.
</Paragraph>
<NoDataOutline>
<NoDataContainer>
<Stack gap={SpaceSizes.sm} justify="flex-start">
<Stack gap={SpaceSizes.md}>
<H4>
{dataSize} {dataSize === 1 ? 'items' : 'item'} found
</H4>
<Paragraph size={TextSizes.md}>
But all columns are hidden at the moment.
</Paragraph>
</Stack>
<Button
variant={ButtonEnums.ButtonVariants.text}
onClick={resetHiddenColumns}
>
Show Default Columns
</Button>
</Stack>
<Button
variant={ButtonEnums.ButtonVariants.text}
onClick={resetHiddenColumns}
>
Show Default Columns
</Button>
</Stack>
</NoDataContainer>
</NoDataContainer>
</NoDataOutline>
)}
{tableDataSize === 0 ? (
<NoDataContainer>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const NoDataContainer = styled(Padbox)`
const TableWrapper = styled.div`
border: 1px solid ${getColor('neutral.400')};
border-top-width: 0;
background: ${getColor('neutral.200')};
background: ${getColor('neutral.0')};
border-radius: ${getRadii('default')};
`;

Expand Down
6 changes: 3 additions & 3 deletions src/components/_internal/BaseTable/BaseTable.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ export const BaseTableContainer = styled.div`
}
&::-webkit-scrollbar-thumb {
border-radius: ${getRadii('round')};
background-color: ${getColor('neutral.600')};
border: 6px solid ${getColor('neutral.200')};
background-color: ${getColor('primary.500')};
border: 6px solid ${getColor('neutral.0')};
}
&::-webkit-scrollbar-track-piece {
border-radius: ${getRadii('round')};
background-color: ${getColor('neutral.300')};
border: 6px solid ${getColor('neutral.200')};
border: 6px solid ${getColor('neutral.0')};
}
&:focus-visible {
outline-color: ${getColor('primary.500')};
Expand Down
8 changes: 5 additions & 3 deletions src/components/_internal/BaseTable/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,19 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { pxToRem } from '../../../../utils';
import { getColor, pxToRem } from '../../../../utils';
import { Padbox } from '../../../layout';
import { Spinner } from '../../../Spinner';
import { FooterProps } from './Footer.types';
import GoToPage from './GoToPage';
import { Pagination } from '../../../Pagination';
import { SpaceSizes } from '../../../../theme';
import { PaddingTypes } from '../../../layout/Padbox/Padbox.enums';

const StyledFooter = styled(Padbox)`
display: flex;
flex: 0 0 ${pxToRem(64)};
height: ${pxToRem(64)};
align-items: center;
border-top: 1px solid ${getColor('neutral.400')};
`;
const LoadingContainer = styled.div`
padding: ${pxToRem(8, 24, 8, 8)};
Expand All @@ -38,6 +39,7 @@ const Footer: React.FC<FooterProps> = ({
data-testid="footer"
flexDirection="row"
paddingSize={SpaceSizes.md}
paddingType={PaddingTypes.squish}
>
<LoadingContainer>
{isDataLoading && (
Expand Down
2 changes: 1 addition & 1 deletion src/components/_internal/BaseTable/Head/Head.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const StyledTh = styled.th<{ sticky?: string }>`
line-height: ${getLineHeight('md')};
text-align: left;
padding: ${pxToRem(12, 8)};
background-color: ${getColor('neutral.200')};
background-color: ${getColor('neutral.0')};
border-color: ${getColor('neutral.400')};
border-style: solid;
border-width: 1px 0 1px 1px;
Expand Down
2 changes: 1 addition & 1 deletion src/theme/DSProvider/DSProvider.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('DSProvider', () => {
renderComponent();
const button = screen.getByRole('button');

expect(button).toHaveStyleRule('background', '#f0ecfe');
expect(button).toHaveStyleRule('background', '#E7F0FF');
expect(button).toHaveStyleRule('color', '#2a2a2a');
});

Expand Down
57 changes: 30 additions & 27 deletions src/theme/colors.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
const primary = {
50: '#f0ecfe',
100: '#e5dffd',
200: '#cabdfb',
300: '#a995f4',
400: '#8263f5',
500: '#6641f3',
600: '#4d29d4',
700: '#3b1ab7',
800: '#2c1193',
900: '#1b0471',
50: '#E7F0FF',
100: '#D3E4FF',
200: '#B4D0FF',
300: '#81B0FF',
400: '#3E85FA',
500: '#1163EA',
600: '#014FCF',
700: '#003B9D',
800: '#002B72',
900: '#001A45',
};

const neutral = {
Expand All @@ -26,13 +26,16 @@ const neutral = {
};

const info = {
50: '#f0ecfe',
100: '#dad1fc',
500: '#6641f3',
600: '#5433d2',
700: '#41299a',
800: '#26146D',
900: '#160944',
50: '#E7F0FF',
100: '#D3E4FF',
200: '#B4D0FF',
300: '#81B0FF',
400: '#3E85FA',
500: '#1163EA',
600: '#014FCF',
700: '#003B9D',
800: '#002B72',
900: '#001A45',
};

const success = {
Expand Down Expand Up @@ -66,11 +69,11 @@ const error = {
};

const grade = {
A: '#4aba00',
B: '#e5bd00',
C: '#f08f00',
D: '#f1431c',
F: '#b40000',
A: '#4BBA76',
B: '#FFB147',
C: '#FB7A4F',
D: '#F32E43',
F: '#B81143',
};

const brand = {
Expand All @@ -91,11 +94,11 @@ const brandSecondary = {
} as const;

const severity = {
informational: '#0275D8',
positive: '#49A25A',
low: '#E4BE00',
medium: '#E5883C',
high: '#B21F24',
informational: '#5580D7',
positive: '#4BBA76',
low: '#FFB147',
medium: '#FB7A4F',
high: '#F32E43',
};

export const colors = {
Expand Down
16 changes: 16 additions & 0 deletions src/theme/icons/columns-3.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type {
IconDefinition,
IconName,
IconPrefix,
} from '@fortawesome/fontawesome-svg-core';

export const width = 18;
export const height = 14;
export const unicode = 'e032';
export const svgPathData =
'M16.25 0.625C17.207 0.625 18 1.41797 18 2.375V11.125C18 12.1094 17.207 12.875 16.25 12.875H2.25C1.26562 12.875 0.5 12.1094 0.5 11.125V2.375C0.5 1.41797 1.26562 0.625 2.25 0.625H16.25ZM5.75 2.375H2.25V11.125H5.75V2.375ZM7.5 11.125H11V2.375H7.5V11.125ZM16.25 2.375H12.75V11.125H16.25V2.375Z';
export const columns3 = {
prefix: 'ssc' as IconPrefix,
iconName: 'columns-3' as IconName,
icon: [width, height, [], unicode, svgPathData],
} as IconDefinition;
6 changes: 3 additions & 3 deletions src/theme/icons/filter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
IconPrefix,
} from '@fortawesome/fontawesome-svg-core';

export const width = 512;
export const height = 512;
export const width = 16;
export const height = 14;
export const unicode = 'e00f';
export const svgPathData =
'M3.853 54.87C10.47 40.9 24.54 32 40 32H472C487.5 32 501.5 40.9 508.1 54.87C514.8 68.84 512.7 85.37 502.1 97.33L320 320.9V448C320 460.1 313.2 471.2 302.3 476.6C291.5 482 278.5 480.9 268.8 473.6L204.8 425.6C196.7 419.6 192 410.1 192 400V320.9L9.042 97.33C-.745 85.37-2.765 68.84 3.854 54.87L3.853 54.87z';
'M0.5 1.375C0.5 0.910156 0.882812 0.5 1.375 0.5H11.875C12.3398 0.5 12.75 0.910156 12.75 1.375C12.75 1.86719 12.3398 2.25 11.875 2.25H1.375C0.882812 2.25 0.5 1.86719 0.5 1.375ZM2.25 5.75C2.25 5.28516 2.63281 4.875 3.125 4.875H10.125C10.5898 4.875 11 5.28516 11 5.75C11 6.24219 10.5898 6.625 10.125 6.625H3.125C2.63281 6.625 2.25 6.24219 2.25 5.75ZM7.5 11H5.75C5.25781 11 4.875 10.6172 4.875 10.125C4.875 9.66016 5.25781 9.25 5.75 9.25H7.5C7.96484 9.25 8.375 9.66016 8.375 10.125C8.375 10.6172 7.96484 11 7.5 11Z';

export const filter = {
prefix: 'ssc' as IconPrefix,
Expand Down
1 change: 1 addition & 0 deletions src/theme/icons/icons.enums.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const SSCIconNames = {
angleDown: 'angle-down',
table: 'table',
infoCircleOutline: 'info-circle-outline',
columns3: 'columns-3',
} as const;

export const IconTypes = {
Expand Down
1 change: 1 addition & 0 deletions src/theme/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,4 @@ export { angleUp } from './angleUp';
export { angleDown } from './angleDown';
export { table } from './table';
export { infoCircleOutline } from './infoCircleOutline';
export { columns3 } from './columns-3';
Loading

0 comments on commit 7ac94e2

Please sign in to comment.