├── .babelrc ├── .browserslistrc ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── dependency-update.md │ └── feature_request.md ├── actions │ ├── build-prod │ │ ├── action.yml │ │ ├── awaiting.js │ │ ├── build │ │ │ └── index.js │ │ └── script.js │ └── log-github │ │ ├── action.yml │ │ ├── build │ │ └── index.js │ │ └── script.js ├── issue-branch.yml └── workflows │ └── main.yml ├── .gitignore ├── .markdownlint.json ├── .npmignore ├── LICENSE ├── README.md ├── bitbucket-pipelines.yml ├── favicon.ico ├── jestconfig.json ├── lib ├── assets │ ├── images │ │ └── grape-ui-header-logo.svg │ └── json │ │ ├── border.json │ │ ├── breakpoints.json │ │ ├── buttonVariant.json │ │ ├── colors.json │ │ ├── fontFamily.json │ │ ├── fontSize.json │ │ ├── grid.json │ │ ├── shadow.json │ │ └── zIndex.json ├── elements │ ├── Button │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ ├── Button.test.js │ │ │ └── Button.theme.test.js │ │ └── utils.js │ ├── Card │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── subComponents │ │ │ ├── CardActions │ │ │ │ └── index.js │ │ │ ├── CardBody │ │ │ │ └── index.js │ │ │ ├── CardHeader │ │ │ │ └── index.js │ │ │ ├── CardInner │ │ │ │ └── index.js │ │ │ ├── CardRichMedia │ │ │ │ └── index.js │ │ │ ├── CardSecondaryMedia │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── tests │ │ │ └── Card.test.js │ │ └── utils │ │ │ ├── index.js │ │ │ └── props.js │ ├── Image │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ └── tests │ │ │ └── Image.test.js │ ├── Progress │ │ ├── CircleProgress │ │ │ ├── component.js │ │ │ └── index.js │ │ ├── LinearProgress │ │ │ ├── component.js │ │ │ └── index.js │ │ ├── getProgress.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ ├── Progress.test.js │ │ │ └── getProgress.test.js │ │ └── utils │ │ │ ├── index.js │ │ │ ├── keyframes.js │ │ │ ├── props.js │ │ │ └── styledHelpers.js │ ├── Table │ │ ├── Paginator │ │ │ ├── index.js │ │ │ └── tests │ │ │ │ └── Paginator.test.js │ │ ├── component.js │ │ ├── examples │ │ │ └── utils │ │ │ │ ├── data.js │ │ │ │ ├── index.js │ │ │ │ └── sortHelpers.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ ├── Table.expandedRows.test.js │ │ │ ├── Table.fetchData.test.js │ │ │ ├── Table.hiddenColumns.test.js │ │ │ ├── Table.test.js │ │ │ └── utils │ │ │ │ ├── columns.js │ │ │ │ ├── index.js │ │ │ │ └── testData.js │ │ └── utils │ │ │ ├── constants.js │ │ │ ├── cssDefaults.js │ │ │ ├── index.js │ │ │ ├── props.js │ │ │ ├── styled │ │ │ ├── StyledTable │ │ │ │ └── index.js │ │ │ ├── StyledTableBody │ │ │ │ └── index.js │ │ │ ├── StyledTableCell │ │ │ │ └── index.js │ │ │ ├── StyledTableHeader │ │ │ │ └── index.js │ │ │ ├── StyledTableResponsiveWrapper │ │ │ │ └── index.js │ │ │ ├── StyledTableRow │ │ │ │ └── index.js │ │ │ ├── StyledTableWrapper │ │ │ │ └── index.js │ │ │ └── index.js │ │ │ └── viewState.js │ ├── Toolbar │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ └── Toolbar.test.js │ │ └── utils │ │ │ ├── index.js │ │ │ └── props.js │ ├── forms │ │ ├── CheckboxField │ │ │ ├── CheckboxInput │ │ │ │ └── index.js │ │ │ ├── CheckboxLabel │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── CheckboxField.test.js │ │ │ │ └── CheckboxField.theme.test.js │ │ ├── DateField │ │ │ ├── component.js │ │ │ ├── constants.js │ │ │ ├── index.js │ │ │ ├── props.js │ │ │ ├── styled.js │ │ │ ├── styledHelpers.js │ │ │ ├── tests │ │ │ │ ├── DateField.ref.test.js │ │ │ │ ├── DateField.test.js │ │ │ │ ├── DateFieldComponent.test.js │ │ │ │ └── DateFieldUtils.test.js │ │ │ └── utils.js │ │ ├── Form │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ └── Form.test.js │ │ ├── SelectField │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── SelectField.ref.test.js │ │ │ │ ├── SelectField.test.js │ │ │ │ ├── SelectField.theme.test.js │ │ │ │ ├── SelectFieldComponent.test.js │ │ │ │ └── examples │ │ │ │ │ └── index.js │ │ │ └── utils.js │ │ ├── TextField │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── TextField.ref.test.js │ │ │ │ ├── TextField.test.js │ │ │ │ ├── TextField.theme.test.js │ │ │ │ ├── TextField.utils.test.js │ │ │ │ └── TextFieldComponent.test.js │ │ │ └── utils.js │ │ ├── examples │ │ │ └── index.js │ │ ├── index.js │ │ └── utils │ │ │ ├── AssistiveText │ │ │ ├── component.js │ │ │ ├── helpers.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── AssistiveText.test.js │ │ │ │ └── AssistiveText.theme.test.js │ │ │ ├── ControlGroup │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ └── styled.js │ │ │ ├── ControlLabel │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── ControlLabel.test.js │ │ │ │ └── ControlLabel.theme.test.js │ │ │ ├── PlainText │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── PlainText.test.js │ │ │ │ └── PlainText.theme.test.js │ │ │ └── index.js │ ├── grid │ │ ├── Box │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Box.flexbox.test.js │ │ │ │ └── Box.test.js │ │ ├── Flex │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ └── Flex.test.js │ │ ├── examples │ │ │ └── index.js │ │ ├── index.js │ │ └── utils │ │ │ └── index.js │ ├── typography │ │ ├── Header │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Header.test.js │ │ │ │ └── Header.theme.test.js │ │ ├── Link │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── Link.test.js │ │ │ │ └── Link.theme.test.js │ │ │ └── utils.js │ │ ├── List │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── List.test.js │ │ │ │ └── List.theme.test.js │ │ ├── ListItem │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── ListItem.test.js │ │ │ │ └── ListItem.theme.test.js │ │ ├── Paragraph │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Paragraph.test.js │ │ │ │ └── Paragraph.theme.test.js │ │ ├── Text │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Text.test.js │ │ │ │ └── Text.theme.test.js │ │ ├── codeElements │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ └── CodeBlock.test.js │ │ │ └── utils │ │ │ │ ├── index.js │ │ │ │ ├── props.js │ │ │ │ └── styles.js │ │ └── index.js │ └── utils │ │ ├── Hideable │ │ └── index.js │ │ ├── index.js │ │ └── tests │ │ └── Hideable.test.js ├── global-styles │ ├── index.js │ └── tests │ │ ├── getGlobalOverrides.test.js │ │ └── getGlobalStyles.test.js ├── index.js ├── internals │ ├── mocks │ │ └── cssModule.js │ ├── testing │ │ └── test-bundler.js │ └── webpack │ │ ├── webpack.config.js │ │ └── webpack.config.test.js └── utils │ ├── componentHelpers │ ├── componentHelpers.js │ └── index.js │ ├── momentHelpers │ ├── index.js │ └── momentLocaleUtils.js │ ├── objectHelpers │ ├── index.js │ ├── objectHelpers.js │ └── tests │ │ └── objectHelpers.test.js │ └── styledHelpers │ ├── controlStyles.js │ ├── core.js │ ├── cssDefaults.js │ ├── index.js │ ├── tests │ └── controlStyles.test.js │ └── utils │ ├── buttonThemes.js │ ├── index.js │ ├── props.js │ ├── resolvers.js │ ├── scaleFont.js │ └── tests │ ├── buttonThemes.test.js │ ├── colorCore.test.js │ ├── fontFamilyCore.test.js │ ├── getButtonThemesByVariant.test.js │ ├── resolveBorderRadius.test.js │ ├── resolveBoxShadow.test.js │ ├── resolveColor.test.js │ ├── resolveElevation.test.js │ ├── resolveFontFamily.test.js │ ├── resolveGlobal.test.js │ ├── resolveZIndex.test.js │ └── scaleFont.test.js ├── package-lock.json ├── package.json ├── src ├── assets │ ├── images │ │ └── grape-ui-header-logo.svg │ └── json │ │ ├── border.json │ │ ├── breakpoints.json │ │ ├── buttonVariant.json │ │ ├── colors.json │ │ ├── fontFamily.json │ │ ├── fontSize.json │ │ ├── grid.json │ │ ├── shadow.json │ │ └── zIndex.json ├── elements │ ├── Button │ │ ├── Readme.md │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ ├── Button.test.js │ │ │ ├── Button.theme.test.js │ │ │ └── __snapshots__ │ │ │ │ ├── Button.test.js.snap │ │ │ │ └── Button.theme.test.js.snap │ │ └── utils.js │ ├── Card │ │ ├── Readme.md │ │ ├── cardPadding.md │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── subComponents │ │ │ ├── AdditionalCardProps.md │ │ │ ├── CardActions.md │ │ │ ├── CardActions │ │ │ │ └── index.js │ │ │ ├── CardBody.md │ │ │ ├── CardBody │ │ │ │ └── index.js │ │ │ ├── CardHeader.md │ │ │ ├── CardHeader │ │ │ │ └── index.js │ │ │ ├── CardInner │ │ │ │ └── index.js │ │ │ ├── CardMedia.md │ │ │ ├── CardRichMedia │ │ │ │ └── index.js │ │ │ ├── CardSecondaryMedia │ │ │ │ └── index.js │ │ │ ├── Readme.md │ │ │ └── index.js │ │ ├── tests │ │ │ ├── Card.test.js │ │ │ └── __snapshots__ │ │ │ │ └── Card.test.js.snap │ │ └── utils │ │ │ ├── index.js │ │ │ └── props.js │ ├── Image │ │ ├── Readme.md │ │ ├── component.js │ │ ├── examples │ │ │ └── nacho-dominguez-argenta-cCVzi_mKovs-unsplash.jpg │ │ ├── index.js │ │ ├── styled.js │ │ └── tests │ │ │ ├── Image.test.js │ │ │ └── __snapshots__ │ │ │ └── Image.test.js.snap │ ├── Progress │ │ ├── CircleProgress │ │ │ ├── component.js │ │ │ └── index.js │ │ ├── LinearProgress │ │ │ ├── component.js │ │ │ └── index.js │ │ ├── Readme.md │ │ ├── getProgress.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ ├── Progress.test.js │ │ │ ├── __snapshots__ │ │ │ │ └── Progress.test.js.snap │ │ │ └── getProgress.test.js │ │ └── utils │ │ │ ├── index.js │ │ │ ├── keyframes.js │ │ │ ├── props.js │ │ │ └── styledHelpers.js │ ├── Table │ │ ├── Paginator │ │ │ ├── index.js │ │ │ └── tests │ │ │ │ └── Paginator.test.js │ │ ├── Readme.md │ │ ├── component.js │ │ ├── examples │ │ │ ├── examples.md │ │ │ ├── expandedRows.md │ │ │ ├── hideComponents.md │ │ │ ├── loadingState.md │ │ │ ├── manualPagination.md │ │ │ ├── pagination.md │ │ │ ├── tableStriped.md │ │ │ └── utils │ │ │ │ ├── data.js │ │ │ │ ├── index.js │ │ │ │ └── sortHelpers.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── styles.md │ │ ├── tests │ │ │ ├── Table.expandedRows.test.js │ │ │ ├── Table.fetchData.test.js │ │ │ ├── Table.hiddenColumns.test.js │ │ │ ├── Table.test.js │ │ │ ├── __snapshots__ │ │ │ │ └── Table.test.js.snap │ │ │ └── utils │ │ │ │ ├── columns.js │ │ │ │ ├── index.js │ │ │ │ └── testData.js │ │ └── utils │ │ │ ├── constants.js │ │ │ ├── cssDefaults.js │ │ │ ├── index.js │ │ │ ├── props.js │ │ │ ├── styled │ │ │ ├── StyledTable │ │ │ │ └── index.js │ │ │ ├── StyledTableBody │ │ │ │ └── index.js │ │ │ ├── StyledTableCell │ │ │ │ └── index.js │ │ │ ├── StyledTableHeader │ │ │ │ └── index.js │ │ │ ├── StyledTableResponsiveWrapper │ │ │ │ └── index.js │ │ │ ├── StyledTableRow │ │ │ │ └── index.js │ │ │ ├── StyledTableWrapper │ │ │ │ └── index.js │ │ │ └── index.js │ │ │ └── viewState.js │ ├── Toolbar │ │ ├── Readme.md │ │ ├── component.js │ │ ├── index.js │ │ ├── styled.js │ │ ├── tests │ │ │ ├── Toolbar.test.js │ │ │ └── __snapshots__ │ │ │ │ └── Toolbar.test.js.snap │ │ └── utils │ │ │ ├── index.js │ │ │ └── props.js │ ├── forms │ │ ├── CheckboxField │ │ │ ├── CheckboxInput │ │ │ │ └── index.js │ │ │ ├── CheckboxLabel │ │ │ │ └── index.js │ │ │ ├── Readme.md │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── CheckboxField.test.js │ │ │ │ ├── CheckboxField.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── CheckboxField.test.js.snap │ │ │ │ └── CheckboxField.theme.test.js.snap │ │ ├── DateField │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── constants.js │ │ │ ├── index.js │ │ │ ├── props.js │ │ │ ├── styled.js │ │ │ ├── styledHelpers.js │ │ │ ├── tests │ │ │ │ ├── DateField.ref.test.js │ │ │ │ ├── DateField.test.js │ │ │ │ ├── DateFieldComponent.test.js │ │ │ │ ├── DateFieldUtils.test.js │ │ │ │ └── __snapshots__ │ │ │ │ │ ├── DateField.test.js.snap │ │ │ │ │ └── DateFieldComponent.test.js.snap │ │ │ └── utils.js │ │ ├── Form │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Form.test.js │ │ │ │ └── __snapshots__ │ │ │ │ └── Form.test.js.snap │ │ ├── Readme.md │ │ ├── SelectField │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── SelectField.ref.test.js │ │ │ │ ├── SelectField.test.js │ │ │ │ ├── SelectField.theme.test.js │ │ │ │ ├── SelectFieldComponent.test.js │ │ │ │ ├── __snapshots__ │ │ │ │ │ ├── SelectField.test.js.snap │ │ │ │ │ ├── SelectField.theme.test.js.snap │ │ │ │ │ └── SelectFieldComponent.test.js.snap │ │ │ │ └── examples │ │ │ │ │ └── index.js │ │ │ └── utils.js │ │ ├── TextField │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── TextField.ref.test.js │ │ │ │ ├── TextField.test.js │ │ │ │ ├── TextField.theme.test.js │ │ │ │ ├── TextField.utils.test.js │ │ │ │ ├── TextFieldComponent.test.js │ │ │ │ └── __snapshots__ │ │ │ │ │ ├── TextField.test.js.snap │ │ │ │ │ ├── TextField.theme.test.js.snap │ │ │ │ │ └── TextFieldComponent.test.js.snap │ │ │ └── utils.js │ │ ├── components.md │ │ ├── examples │ │ │ └── index.js │ │ ├── index.js │ │ └── utils │ │ │ ├── AssistiveText │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── helpers.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── AssistiveText.test.js │ │ │ │ ├── AssistiveText.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── AssistiveText.test.js.snap │ │ │ │ └── AssistiveText.theme.test.js.snap │ │ │ ├── ControlGroup │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ └── styled.js │ │ │ ├── ControlLabel │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── ControlLabel.test.js │ │ │ │ ├── ControlLabel.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── ControlLabel.test.js.snap │ │ │ │ └── ControlLabel.theme.test.js.snap │ │ │ ├── PlainText │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── PlainText.test.js │ │ │ │ ├── PlainText.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── PlainText.test.js.snap │ │ │ │ └── PlainText.theme.test.js.snap │ │ │ ├── Readme.md │ │ │ ├── index.js │ │ │ └── validationError.md │ ├── grid │ │ ├── Box │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Box.flexbox.test.js │ │ │ │ ├── Box.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── Box.flexbox.test.js.snap │ │ │ │ └── Box.test.js.snap │ │ ├── Flex │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Flex.test.js │ │ │ │ └── __snapshots__ │ │ │ │ └── Flex.test.js.snap │ │ ├── Readme.md │ │ ├── advancedExamples.md │ │ ├── breakpointsAndSpace.md │ │ ├── components.md │ │ ├── examples │ │ │ ├── amos-bar-zeev-GibvqWh_OcE-unsplash.jpg │ │ │ ├── index.js │ │ │ └── karly-jones-6aRIh3j_F4I-unsplash.jpg │ │ ├── index.js │ │ └── utils │ │ │ └── index.js │ ├── typography │ │ ├── Header │ │ │ ├── Readme.md │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Header.test.js │ │ │ │ ├── Header.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── Header.test.js.snap │ │ │ │ └── Header.theme.test.js.snap │ │ ├── Link │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── Link.test.js │ │ │ │ ├── Link.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ │ ├── Link.test.js.snap │ │ │ │ │ └── Link.theme.test.js.snap │ │ │ └── utils.js │ │ ├── List │ │ │ ├── Readme.md │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── List.test.js │ │ │ │ ├── List.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── List.test.js.snap │ │ │ │ └── List.theme.test.js.snap │ │ ├── ListItem │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── ListItem.test.js │ │ │ │ ├── ListItem.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── ListItem.test.js.snap │ │ │ │ └── ListItem.theme.test.js.snap │ │ ├── Paragraph │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Paragraph.test.js │ │ │ │ ├── Paragraph.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── Paragraph.test.js.snap │ │ │ │ └── Paragraph.theme.test.js.snap │ │ ├── Readme.md │ │ ├── Text │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ └── tests │ │ │ │ ├── Text.test.js │ │ │ │ ├── Text.theme.test.js │ │ │ │ └── __snapshots__ │ │ │ │ ├── Text.test.js.snap │ │ │ │ └── Text.theme.test.js.snap │ │ ├── codeElements │ │ │ ├── Readme.md │ │ │ ├── component.js │ │ │ ├── index.js │ │ │ ├── styled.js │ │ │ ├── tests │ │ │ │ ├── CodeBlock.test.js │ │ │ │ └── __snapshots__ │ │ │ │ │ └── CodeBlock.test.js.snap │ │ │ └── utils │ │ │ │ ├── index.js │ │ │ │ ├── props.js │ │ │ │ └── styles.js │ │ ├── color.md │ │ ├── components.md │ │ ├── fontFamily.md │ │ ├── fontSizes.md │ │ ├── fontUtilities.md │ │ └── index.js │ └── utils │ │ ├── Hideable │ │ ├── Readme.md │ │ └── index.js │ │ ├── components.md │ │ ├── index.js │ │ └── tests │ │ ├── Hideable.test.js │ │ └── __snapshots__ │ │ └── Hideable.test.js.snap ├── global-styles │ ├── index.js │ └── tests │ │ ├── getGlobalOverrides.test.js │ │ └── getGlobalStyles.test.js ├── index.js ├── internals │ ├── mocks │ │ └── cssModule.js │ ├── testing │ │ └── test-bundler.js │ └── webpack │ │ ├── webpack.config.js │ │ └── webpack.config.test.js └── utils │ ├── componentHelpers │ ├── componentHelpers.js │ └── index.js │ ├── momentHelpers │ ├── index.js │ └── momentLocaleUtils.js │ ├── objectHelpers │ ├── index.js │ ├── objectHelpers.js │ └── tests │ │ └── objectHelpers.test.js │ └── styledHelpers │ ├── controlStyles.js │ ├── core.js │ ├── cssDefaults.js │ ├── index.js │ ├── tests │ └── controlStyles.test.js │ └── utils │ ├── buttonThemes.js │ ├── index.js │ ├── props.js │ ├── resolvers.js │ ├── scaleFont.js │ └── tests │ ├── buttonThemes.test.js │ ├── colorCore.test.js │ ├── fontFamilyCore.test.js │ ├── getButtonThemesByVariant.test.js │ ├── resolveBorderRadius.test.js │ ├── resolveBoxShadow.test.js │ ├── resolveColor.test.js │ ├── resolveElevation.test.js │ ├── resolveFontFamily.test.js │ ├── resolveGlobal.test.js │ ├── resolveZIndex.test.js │ └── scaleFont.test.js ├── styleguide.config.js └── styleguide ├── build ├── bundle.02d0c177.js └── bundle.02d0c177.js.LICENSE.txt ├── components ├── AppBar │ └── index.js ├── Footer │ └── index.js ├── constants.js └── index.js ├── containers ├── CodeRenderer │ └── index.js ├── ComponentsListRenderer │ └── index.js ├── HeadingRenderer │ └── index.js ├── LinkRenderer │ └── index.js ├── ParaRenderer │ └── index.js ├── PathlineRenderer │ └── index.js ├── StyleGuideRenderer │ └── index.js ├── TabButtonRenderer │ └── index.js ├── TableOfContentsRenderer │ └── index.js ├── ToolbarButtonRenderer │ └── index.js └── index.js ├── default.css ├── index.html ├── static └── media │ ├── amos-bar-zeev-GibvqWh_OcE-unsplash.45520a43.jpg │ ├── grape-ui-header-logo.4e78d99f.svg │ ├── karly-jones-6aRIh3j_F4I-unsplash.3d4e4073.jpg │ └── nacho-dominguez-argenta-cCVzi_mKovs-unsplash.7ca92b41.jpg ├── styles.js └── themes.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "@babel/plugin-transform-modules-commonjs", 4 | "@babel/plugin-proposal-class-properties", 5 | [ "babel-plugin-webpack-alias", { "config": "src/internals/webpack/webpack.config.js" } ], 6 | [ "@babel/transform-runtime", { "corejs": 3 } ] 7 | ], 8 | "presets": [ 9 | [ 10 | "@babel/preset-env", 11 | { 12 | "corejs": 13 | { 14 | "version": 3.6 15 | }, 16 | "useBuiltIns": "entry" 17 | } 18 | ], 19 | "@babel/preset-react" 20 | ], 21 | "env": { 22 | "test": { 23 | "plugins": [ 24 | "transform-es2015-modules-commonjs", 25 | "dynamic-import-node", 26 | [ "babel-plugin-webpack-alias", { "config": "src/internals/webpack/webpack.config.test.js" } ] 27 | ] 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 0.25% 2 | not dead 3 | not IE 11 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | coverage/* 2 | dist/* 3 | lib/* 4 | node_modules/* 5 | src/internals/* 6 | styleguide/* 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG] Bug Title" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | 1. Go to '...' 17 | 2. Click on '....' 18 | 3. Scroll down to '....' 19 | 4. See error 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Desktop (please complete the following information):** 28 | 29 | - OS: [e.g. iOS] 30 | - Browser [e.g. chrome, safari] 31 | - Version [e.g. 22] 32 | 33 | **Smartphone (please complete the following information):** 34 | 35 | - Device: [e.g. iPhone6] 36 | - OS: [e.g. iOS8.1] 37 | - Browser [e.g. stock browser, safari] 38 | - Version [e.g. 22] 39 | 40 | **Additional context** 41 | Add any other context about the problem here. 42 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/dependency-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Dependency Update 3 | about: Suggest what existing dependency needs to update 4 | title: '' 5 | labels: dependencies 6 | assignees: '' 7 | 8 | --- 9 | 10 | * Dependency Name: ??? 11 | * Version Number: #.#.# 12 | 13 | Additional Notes: 14 | * If any, enter them here. 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/actions/build-prod/action.yml: -------------------------------------------------------------------------------- 1 | name: 'Build for Production' 2 | description: 'Build artifacts and push to grape-ui-production' 3 | outputs: 4 | time: # id of output 5 | description: 'The time of build' 6 | runs: 7 | using: 'node12' 8 | main: 'build/index.js' -------------------------------------------------------------------------------- /.github/actions/build-prod/awaiting.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | const core = require('@actions/core'); 3 | const github = require('@actions/github'); 4 | const exec = require('@actions/exec'); 5 | 6 | let output = ''; 7 | let myError = ''; 8 | const buildProcess = (async () => { 9 | try { 10 | const options = {}; 11 | options.listeners = { 12 | stdout: data => { 13 | output += data.toString(); 14 | }, 15 | stderr: data => { 16 | myError += data.toString(); 17 | } 18 | }; 19 | await exec.exec('pwd', null, options); 20 | console.log({ output, myError }); 21 | const { payload } = github.context; 22 | 23 | const time = (new Date()).toTimeString(); 24 | core.setOutput('time', time); 25 | // Get the JSON webhook payload for the event that triggered the workflow 26 | const payloadAsStr = JSON.stringify(payload, undefined, 2); 27 | console.log(`The event payload: ${payloadAsStr}`); 28 | } catch (error) { 29 | core.setFailed(error.message); 30 | } 31 | }) (); 32 | export { buildProcess, output }; 33 | -------------------------------------------------------------------------------- /.github/actions/build-prod/script.js: -------------------------------------------------------------------------------- 1 | const { buildProcess, output } = require('./awaiting.js'); 2 | buildProcess.then(() => { 3 | console.log({ output }); 4 | }); -------------------------------------------------------------------------------- /.github/actions/log-github/action.yml: -------------------------------------------------------------------------------- 1 | name: 'Log Github Events' 2 | description: 'Logs Github events' 3 | outputs: 4 | time: # id of output 5 | description: 'The time of event' 6 | runs: 7 | using: 'node12' 8 | main: 'build/index.js' -------------------------------------------------------------------------------- /.github/actions/log-github/script.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | const core = require('@actions/core'); 3 | const github = require('@actions/github'); 4 | 5 | try { 6 | const { payload } = github.context; 7 | const time = (new Date()).toTimeString(); 8 | core.setOutput('time', time); 9 | // Get the JSON webhook payload for the event that triggered the workflow 10 | const payloadAsStr = JSON.stringify(payload, undefined, 2); 11 | console.log(`The event payload: ${payloadAsStr}`); 12 | } catch (error) { 13 | core.setFailed(error.message); 14 | } 15 | -------------------------------------------------------------------------------- /.github/issue-branch.yml: -------------------------------------------------------------------------------- 1 | branches: 2 | - label: enhancement 3 | prefix: feature/ 4 | - label: bug 5 | prefix: bugfix/ 6 | - label: dependencies 7 | prefix: dependencyupdate/ 8 | - label: devops 9 | prefix: devops/ 10 | - label: '*' 11 | prefix: issues/ 12 | branchName: '${issue.number}' 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Don't check auto-generated stuff into git 2 | coverage 3 | node_modules 4 | stats.json 5 | .vscode 6 | 7 | # Cruft 8 | .DS_Store 9 | .idea 10 | *.log 11 | dist/ 12 | npm-debug.log.* 13 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD013": false, 3 | "MD041": false 4 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | CODE_OF_CONDUCT.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-2020 Napa Group, LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![grape-ui logo](http://www.grapeui.com/assets/images/grape-ui-header-logo.svg) 2 | 3 | ## Getting Started 4 | 5 | These instructions will allow you to use the extensible grape-ui component library in any React project. 6 | 7 | ### Prerequisites 8 | 9 | * [ReactJS](https://reactjs.org/) 10 | * [Styled Components](https://www.styled-components.com/) 11 | 12 | ### Installing 13 | 14 | Add grape-ui as a dependency to your project 15 | 16 | ```bash 17 | npm install grape-ui-react 18 | ``` 19 | 20 | ### Usage 21 | 22 | Import grape-ui components into your project 23 | 24 | ```jsx static 25 | import { Paragraph } from 'grape-ui-react'; 26 | ``` 27 | 28 | Use the components in your app 29 | 30 | ```jsx static 31 | render() { 32 | return ( 33 |
34 | ... 35 | grape-ui is Groovy 36 | ... 37 |
38 | ); 39 | }; 40 | ``` 41 | 42 | And that's it! 43 | -------------------------------------------------------------------------------- /bitbucket-pipelines.yml: -------------------------------------------------------------------------------- 1 | image: node:10.15.3 2 | clone: 3 | depth: full 4 | 5 | definitions: 6 | caches: 7 | sonar: ~/.sonar/cache 8 | steps: 9 | - step: &build-test-sonarcloud 10 | name: Build, test and analyze on SonarCloud 11 | caches: 12 | - sonar 13 | script: 14 | - npm install 15 | - npm run build 16 | - step: &check-quality-gate-sonarcloud 17 | name: Check the Quality Gate on SonarCloud 18 | script: 19 | - pipe: sonarsource/sonarcloud-quality-gate:0.1.3 20 | 21 | pipelines: # More info here: https://confluence.atlassian.com/bitbucket/configure-bitbucket-pipelines-yml-792298910.html 22 | branches: 23 | master: 24 | - step: *build-test-sonarcloud 25 | - step: *check-quality-gate-sonarcloud 26 | pull-requests: 27 | '**': 28 | - step: *build-test-sonarcloud 29 | - step: *check-quality-gate-sonarcloud -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/favicon.ico -------------------------------------------------------------------------------- /jestconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "testURL": "http://localhost", 3 | "collectCoverageFrom": [ 4 | "src/**/*.{js,jsx}", 5 | "!src/**/*.test.{js,jsx}", 6 | "!src/*/RbGenerated*/*.{js,jsx}", 7 | "!src/index.js", 8 | "!src/global-styles.js", 9 | "!src/*/*/Loadable.{js,jsx}", 10 | "!src/**/examples/**", 11 | "!src/utils/momentHelpers/*" 12 | ], 13 | "coverageThreshold": { 14 | "global": { 15 | "statements": 91, 16 | "branches": 91, 17 | "functions": 91, 18 | "lines": 91 19 | } 20 | }, 21 | "moduleDirectories": [ 22 | "node_modules", 23 | "src" 24 | ], 25 | "moduleNameMapper": { 26 | ".*\\.(css|less|styl|scss|sass)$": "/internals/mocks/cssModule.js", 27 | ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/internals/mocks/image.js" 28 | }, 29 | "modulePathIgnorePatterns": [ 30 | "/lib", 31 | "/src/internals", 32 | "/src/elements/typography/index.js" 33 | ], 34 | "resolver": null, 35 | "setupFilesAfterEnv": [ 36 | "/src/internals/testing/test-bundler.js" 37 | ], 38 | "testRegex": "tests/.*\\.test\\.js$", 39 | "snapshotSerializers": [ 40 | "enzyme-to-json/serializer" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /lib/assets/json/border.json: -------------------------------------------------------------------------------- 1 | { 2 | "borderRadius": { 3 | "sm": "2px", 4 | "base": "4px", 5 | "lg": "8px" 6 | } 7 | } -------------------------------------------------------------------------------- /lib/assets/json/breakpoints.json: -------------------------------------------------------------------------------- 1 | { 2 | "xs": "28em", 3 | "sm": "40em", 4 | "md": "52em", 5 | "lg": "64em", 6 | "xl": "76em" 7 | } -------------------------------------------------------------------------------- /lib/assets/json/fontFamily.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"", 3 | "monospace": "Consolas, \"Andale Mono WT\", \"Andale Mono\", \"Lucida Console\", \"Lucida Sans Typewriter\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", \"Liberation Mono\", \"Nimbus Mono L\", Monaco, \"Courier New\", Courier, monospace", 4 | "native": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"", 5 | "sansSerif": "Frutiger, \"Frutiger Linotype\", Univers, Calibri, \"Gill Sans\", \"Gill Sans MT\", \"Myriad Pro\", Myriad, \"DejaVu Sans Condensed\", \"Liberation Sans\", \"Nimbus Sans L\", Tahoma, Geneva, \"Helvetica Neue\", Helvetica, Arial, sans-serif", 6 | "serif": "\"Palatino Linotype\", Palatino, Palladio, \"URW Palladio L\", \"Book Antiqua\", Baskerville, \"Bookman Old Style\", \"Bitstream Charter\", \"Nimbus Roman No9 L\", Garamond, \"Apple Garamond\", \"ITC Garamond Narrow\", \"New Century Schoolbook\", \"Century Schoolbook\", \"Century Schoolbook L\", Georgia, serif" 7 | } 8 | -------------------------------------------------------------------------------- /lib/assets/json/fontSize.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseFontSize": "1rem", 3 | "displayHeader": { 4 | "h1": "6rem", 5 | "h2": "4.8rem", 6 | "h3": "4.2rem", 7 | "h4": "3.6rem", 8 | "h5": "3rem", 9 | "h6": "2.4rem" 10 | }, 11 | "h1": "2.5rem", 12 | "h2": "2rem", 13 | "h3": "1.75rem", 14 | "h4": "1.5rem", 15 | "h5": "1.25rem", 16 | "h6": "1rem", 17 | "sizeVariants": { 18 | "sm": ".8", 19 | "base": "1", 20 | "lg": "1.2" 21 | } 22 | } -------------------------------------------------------------------------------- /lib/assets/json/grid.json: -------------------------------------------------------------------------------- 1 | { 2 | "gutter": "1rem" 3 | } -------------------------------------------------------------------------------- /lib/assets/json/shadow.json: -------------------------------------------------------------------------------- 1 | { 2 | "01": "0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)", 3 | "02": "0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3)", 4 | "03": "0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2)", 5 | "04": "0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2)", 6 | "05": "0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2)", 7 | "06": "0 32px 59px 3px rgba(0,0,0,0.14), 0 12px 72px 11px rgba(0,0,0,0.12), 0 14px 20px -8px rgba(0,0,0,0.2)" 8 | } -------------------------------------------------------------------------------- /lib/assets/json/zIndex.json: -------------------------------------------------------------------------------- 1 | { 2 | "01": "1010", 3 | "02": "1020", 4 | "03": "1030", 5 | "04": "1040", 6 | "05": "1050", 7 | "06": "1060" 8 | } -------------------------------------------------------------------------------- /lib/elements/Button/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2, _context3; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); 40 | 41 | var _utils = require("./utils"); 42 | 43 | _forEachInstanceProperty(_context3 = _Object$keys(_utils)).call(_context3, function (key) { 44 | if (key === "default" || key === "__esModule") return; 45 | 46 | _Object$defineProperty(exports, key, { 47 | enumerable: true, 48 | get: function get() { 49 | return _utils[key]; 50 | } 51 | }); 52 | }); -------------------------------------------------------------------------------- /lib/elements/Button/utils.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 4 | 5 | _Object$defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | exports.hoverColorButton = exports.activeColorButton = void 0; 10 | 11 | var _styledHelpers = require("../../utils/styledHelpers"); 12 | 13 | const hasVariant = variant => { 14 | if (!variant) { 15 | return false; 16 | } 17 | 18 | return !!variant; 19 | }; 20 | 21 | const activeColorButton = props => { 22 | const bgActiveColor = props.bgActiveColor, 23 | variant = props.variant; 24 | 25 | if (hasVariant(variant)) { 26 | return null; 27 | } 28 | 29 | const color = !bgActiveColor || bgActiveColor === null ? (0, _styledHelpers.resolveColor)('white.light') : (0, _styledHelpers.resolveColor)(bgActiveColor); 30 | return "background-color: ".concat(color); 31 | }; 32 | 33 | exports.activeColorButton = activeColorButton; 34 | 35 | const hoverColorButton = props => { 36 | const bgHoverColor = props.bgHoverColor, 37 | variant = props.variant; 38 | 39 | if (hasVariant(variant)) { 40 | return null; 41 | } 42 | 43 | const color = !bgHoverColor || bgHoverColor === null ? (0, _styledHelpers.resolveColor)('white.dark') : (0, _styledHelpers.resolveColor)(bgHoverColor); 44 | return "background-color: ".concat(color); 45 | }; 46 | 47 | exports.hoverColorButton = hoverColorButton; -------------------------------------------------------------------------------- /lib/elements/Card/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/Card/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _props = require("./props"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_props)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _props[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/Image/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/Progress/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _getProgress = require("./getProgress"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_getProgress)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _getProgress[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/Progress/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2, _context3; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _keyframes = require("./keyframes"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_keyframes)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _keyframes[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _props = require("./props"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_props)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _props[key]; 37 | } 38 | }); 39 | }); 40 | 41 | var _styledHelpers = require("./styledHelpers"); 42 | 43 | _forEachInstanceProperty(_context3 = _Object$keys(_styledHelpers)).call(_context3, function (key) { 44 | if (key === "default" || key === "__esModule") return; 45 | 46 | _Object$defineProperty(exports, key, { 47 | enumerable: true, 48 | get: function get() { 49 | return _styledHelpers[key]; 50 | } 51 | }); 52 | }); -------------------------------------------------------------------------------- /lib/elements/Table/examples/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _data = require("./data"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_data)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _data[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _sortHelpers = require("./sortHelpers"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_sortHelpers)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _sortHelpers[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/Table/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _styled = require("./styled"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_styled)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _styled[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/Table/styled.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 6 | 7 | _Object$defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | 11 | exports.Table = void 0; 12 | 13 | var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral")); 14 | 15 | var _styledComponents = _interopRequireDefault(require("styled-components")); 16 | 17 | var _styledSystem = require("styled-system"); 18 | 19 | var _Hideable = require("../../elements/utils/Hideable"); 20 | 21 | var _component = require("./component"); 22 | 23 | var _utils = require("./utils"); 24 | 25 | function _templateObject() { 26 | const data = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n"]); 27 | 28 | _templateObject = function _templateObject() { 29 | return data; 30 | }; 31 | 32 | return data; 33 | } 34 | 35 | const Table = (0, _styledComponents.default)((0, _Hideable.withHideable)(_component.TableComponent))(_templateObject(), _utils.defaultTableStylesBase, _styledSystem.flexbox); 36 | /** @component */ 37 | 38 | exports.Table = Table; -------------------------------------------------------------------------------- /lib/elements/Table/tests/utils/columns.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 4 | 5 | _Object$defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | exports.columns = void 0; 10 | const columns = [{ 11 | columns: [{ 12 | accessor: 'firstName', 13 | Header: 'First Name', 14 | title: 'test-first-name-column' 15 | }, { 16 | accessor: 'lastName', 17 | Header: 'Last Name', 18 | title: 'test-last-name-column' 19 | }], 20 | Header: 'Name', 21 | title: 'test-name-column' 22 | }, { 23 | columns: [{ 24 | accessor: 'age', 25 | Header: 'Age', 26 | title: 'test-age-column' 27 | }], 28 | Header: 'Info', 29 | title: 'test-info-column' 30 | }]; 31 | exports.columns = columns; -------------------------------------------------------------------------------- /lib/elements/Table/tests/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _columns = require("./columns"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_columns)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _columns[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _testData = require("./testData"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_testData)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _testData[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/Table/utils/constants.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 4 | 5 | _Object$defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | exports.defaultPageOptions = void 0; 10 | const defaultPageOptions = [10, 15, 25, 30, 50]; 11 | exports.defaultPageOptions = defaultPageOptions; -------------------------------------------------------------------------------- /lib/elements/Toolbar/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/Toolbar/tests/Toolbar.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _react = _interopRequireDefault(require("react")); 6 | 7 | var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer")); 8 | 9 | require("jest-styled-components"); 10 | 11 | var _styledComponents = require("styled-components"); 12 | 13 | var _Toolbar = require("../../../elements/Toolbar"); 14 | 15 | const emptyTheme = {}; 16 | 17 | const assertReactElement = element => { 18 | const component = _reactTestRenderer.default.create(element); 19 | 20 | return component.toJSON(); 21 | }; 22 | 23 | describe('Box Component base', () => { 24 | it('should return an empty Toolbar with base styling', () => { 25 | const element = /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, { 26 | theme: emptyTheme 27 | }, /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, null)); 28 | 29 | expect(assertReactElement(element)).toMatchSnapshot(); 30 | }); 31 | }); -------------------------------------------------------------------------------- /lib/elements/Toolbar/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _props = require("./props"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_props)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _props[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/forms/CheckboxField/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _styled = require("./styled"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_styled)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _styled[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/forms/DateField/tests/DateField.ref.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find")); 6 | 7 | var _react = _interopRequireDefault(require("react")); 8 | 9 | require("jest-styled-components"); 10 | 11 | var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16")); 12 | 13 | var _enzyme = require("enzyme"); 14 | 15 | var _styledComponents = require("styled-components"); 16 | 17 | var _ = require(".."); 18 | 19 | (0, _enzyme.configure)({ 20 | adapter: new _enzymeAdapterReact.default() 21 | }); 22 | describe('When supporting a forward ref for TextField ', () => { 23 | it('should reference the underlying input element', () => { 24 | const ref = _react.default.createRef(); 25 | 26 | const register = e => { 27 | ref.current = e; 28 | }; 29 | 30 | const component = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, { 31 | theme: {} 32 | }, /*#__PURE__*/_react.default.createElement(_.DateField, { 33 | inputRef: register, 34 | labelText: "Desired Date", 35 | name: "desiredDate" 36 | }))); 37 | expect((0, _find.default)(component).call(component, 'input').instance()).toEqual(ref.current); 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/forms/Form/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/forms/SelectField/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/forms/SelectField/tests/SelectField.ref.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find")); 6 | 7 | var _react = _interopRequireDefault(require("react")); 8 | 9 | require("jest-styled-components"); 10 | 11 | var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16")); 12 | 13 | var _enzyme = require("enzyme"); 14 | 15 | var _styledComponents = require("styled-components"); 16 | 17 | var _ = require(".."); 18 | 19 | (0, _enzyme.configure)({ 20 | adapter: new _enzymeAdapterReact.default() 21 | }); 22 | describe('When supporting a forward ref for SelectField ', () => { 23 | it('should reference the underlying input element', () => { 24 | const ref = _react.default.createRef(); 25 | 26 | const register = e => { 27 | ref.current = e; 28 | }; 29 | 30 | const component = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, { 31 | theme: {} 32 | }, /*#__PURE__*/_react.default.createElement(_.SelectField, { 33 | inputRef: register, 34 | labelText: "Name", 35 | name: "name" 36 | }))); 37 | const instance = (0, _find.default)(component).call(component, 'input').at(0).getDOMNode(); 38 | expect(instance).toEqual(ref.current.select.inputRef); 39 | }); 40 | }); -------------------------------------------------------------------------------- /lib/elements/forms/SelectField/tests/examples/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 4 | 5 | _Object$defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | exports.colorOptions = void 0; 10 | const colorOptions = [{ 11 | color: '#FF5630', 12 | label: 'Red', 13 | value: 'red' 14 | }, { 15 | color: '#FFC400', 16 | label: 'Yellow', 17 | value: 'yellow' 18 | }, { 19 | color: '#36B37E', 20 | label: 'Green', 21 | value: 'green' 22 | }]; 23 | exports.colorOptions = colorOptions; -------------------------------------------------------------------------------- /lib/elements/forms/TextField/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2, _context3; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); 40 | 41 | var _utils = require("./utils"); 42 | 43 | _forEachInstanceProperty(_context3 = _Object$keys(_utils)).call(_context3, function (key) { 44 | if (key === "default" || key === "__esModule") return; 45 | 46 | _Object$defineProperty(exports, key, { 47 | enumerable: true, 48 | get: function get() { 49 | return _utils[key]; 50 | } 51 | }); 52 | }); -------------------------------------------------------------------------------- /lib/elements/forms/utils/AssistiveText/helpers.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 4 | 5 | _Object$defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | 9 | exports.getAssistiveText = void 0; 10 | 11 | const getAssistiveText = props => { 12 | const assistiveText = props.assistiveText, 13 | isRequired = props.isRequired; 14 | 15 | if (isRequired && !assistiveText) { 16 | return '*Required'; 17 | } 18 | 19 | return assistiveText || ''; 20 | }; 21 | 22 | exports.getAssistiveText = getAssistiveText; -------------------------------------------------------------------------------- /lib/elements/forms/utils/AssistiveText/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2, _context3; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); 40 | 41 | var _helpers = require("./helpers"); 42 | 43 | _forEachInstanceProperty(_context3 = _Object$keys(_helpers)).call(_context3, function (key) { 44 | if (key === "default" || key === "__esModule") return; 45 | 46 | _Object$defineProperty(exports, key, { 47 | enumerable: true, 48 | get: function get() { 49 | return _helpers[key]; 50 | } 51 | }); 52 | }); -------------------------------------------------------------------------------- /lib/elements/forms/utils/AssistiveText/tests/AssistiveText.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _react = _interopRequireDefault(require("react")); 6 | 7 | var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer")); 8 | 9 | var _styledComponents = require("styled-components"); 10 | 11 | var _ = require(".."); 12 | 13 | require("jest-styled-components"); 14 | 15 | const emptyTheme = {}; 16 | 17 | const assertReactElement = element => { 18 | const component = _reactTestRenderer.default.create(element); 19 | 20 | return component.toJSON(); 21 | }; 22 | 23 | describe('Assistive Text Component base', () => { 24 | it('should return an Assistive Text object', () => { 25 | const element = /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, { 26 | theme: emptyTheme 27 | }, /*#__PURE__*/_react.default.createElement(_.AssistiveText, { 28 | id: "assitiveTextIdHelp" 29 | }, "Helper text is here")); 30 | 31 | expect(assertReactElement(element)).toMatchSnapshot(); 32 | }); 33 | it('should return an Assistive Text object with danger text color', () => { 34 | const element = /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, { 35 | theme: emptyTheme 36 | }, /*#__PURE__*/_react.default.createElement(_.AssistiveText, { 37 | color: "brandDanger", 38 | id: "assitiveTextIdError" 39 | }, "Error text is here")); 40 | 41 | expect(assertReactElement(element)).toMatchSnapshot(); 42 | }); 43 | }); -------------------------------------------------------------------------------- /lib/elements/forms/utils/ControlGroup/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/forms/utils/ControlLabel/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/forms/utils/ControlLabel/tests/ControlLabel.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _react = _interopRequireDefault(require("react")); 6 | 7 | var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer")); 8 | 9 | var _styledComponents = require("styled-components"); 10 | 11 | var _ = require(".."); 12 | 13 | require("jest-styled-components"); 14 | 15 | describe('ControlLabel Component base', () => { 16 | it('should return a ControlLabel object', () => { 17 | const component = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, { 18 | theme: {} 19 | }, /*#__PURE__*/_react.default.createElement(_.ControlLabel, { 20 | htmlFor: "forWhatId" 21 | }, "Label text is here"))); 22 | 23 | const tree = component.toJSON(); 24 | expect(tree).toMatchSnapshot(); 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/forms/utils/PlainText/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/grid/Box/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/grid/Flex/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/grid/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _Box = require("./Box"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_Box)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _Box[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _Flex = require("./Flex"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_Flex)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _Flex[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/grid/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 6 | 7 | _Object$defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | 11 | exports.defaultFlexBoxStylesPropsToTrim = void 0; 12 | 13 | var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys")); 14 | 15 | var _propTypes = _interopRequireDefault(require("@styled-system/prop-types")); 16 | 17 | var _Progress = require("../../../elements/Progress"); 18 | 19 | const defaultFlexBoxStylesPropsToTrim = [...(0, _keys.default)(_propTypes.default.background), ...(0, _keys.default)(_propTypes.default.border), ...(0, _keys.default)(_propTypes.default.flexbox), ...(0, _keys.default)(_propTypes.default.grid), ...(0, _keys.default)(_propTypes.default.layout), ...(0, _keys.default)(_propTypes.default.position), ...(0, _keys.default)(_propTypes.default.shadow), ...(0, _keys.default)(_propTypes.default.space), ...(0, _keys.default)(_Progress.getProgressPropTypes), 'boxSizing']; 20 | exports.defaultFlexBoxStylesPropsToTrim = defaultFlexBoxStylesPropsToTrim; -------------------------------------------------------------------------------- /lib/elements/typography/Header/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _styled = require("./styled"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_styled)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _styled[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/typography/Link/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/typography/Link/utils.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 6 | 7 | _Object$defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | 11 | exports.emailHrefString = emailHrefString; 12 | 13 | var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat")); 14 | 15 | var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys")); 16 | 17 | var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter")); 18 | 19 | var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map")); 20 | 21 | function emailHrefString(props) { 22 | var _context, _context2, _context4, _context5; 23 | 24 | const otherProps = { 25 | bcc: props.bcc, 26 | body: props.body, 27 | cc: props.cc, 28 | subject: props.subject 29 | }; 30 | const trimmedProps = (0, _map.default)(_context = (0, _filter.default)(_context2 = (0, _keys.default)(otherProps)).call(_context2, key => !!props[key])).call(_context, key => { 31 | var _context3; 32 | 33 | return encodeURI((0, _concat.default)(_context3 = "".concat(key, "=")).call(_context3, props[key])); 34 | }).join('&'); 35 | return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = "".concat(props.to || trimmedProps ? 'mailto:' : '')).call(_context5, props.to || '')).call(_context4, trimmedProps ? "?".concat(trimmedProps) : ''); 36 | } -------------------------------------------------------------------------------- /lib/elements/typography/List/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _styled = require("./styled"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_styled)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _styled[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/elements/typography/ListItem/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/typography/Paragraph/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/typography/Text/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/typography/codeElements/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _component = require("./component"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_component)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _component[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styled = require("./styled"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styled)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styled[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/typography/codeElements/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context, _context2; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _props = require("./props"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_props)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _props[key]; 24 | } 25 | }); 26 | }); 27 | 28 | var _styles = require("./styles"); 29 | 30 | _forEachInstanceProperty(_context2 = _Object$keys(_styles)).call(_context2, function (key) { 31 | if (key === "default" || key === "__esModule") return; 32 | 33 | _Object$defineProperty(exports, key, { 34 | enumerable: true, 35 | get: function get() { 36 | return _styles[key]; 37 | } 38 | }); 39 | }); -------------------------------------------------------------------------------- /lib/elements/utils/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _Hideable = require("./Hideable"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_Hideable)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _Hideable[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/internals/mocks/cssModule.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = 'CSS_MODULE'; -------------------------------------------------------------------------------- /lib/internals/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = { 6 | entry: path.join(process.cwd(), 'src/index.js'), 7 | output: { 8 | filename: 'bundle.js', 9 | path: path.resolve(process.cwd(), 'dist') 10 | }, 11 | module: { 12 | rules: [{ 13 | test: /\.jsx?$/, 14 | exclude: /node_modules/, 15 | use: { 16 | loader: 'babel-loader', 17 | options: { 18 | presets: ['@babel/preset-react', '@babel/preset-env'] 19 | } 20 | } 21 | }, { 22 | test: /\.css$/, 23 | use: ['style-loader', 'css-loader'] 24 | }, { 25 | test: /\.(png|svg|jpg|gif)$/, 26 | loader: 'file-loader', 27 | query: { 28 | name: 'static/media/[name].[hash:8].[ext]' 29 | } 30 | }] 31 | }, 32 | resolve: { 33 | modules: ['node_modules'], 34 | alias: { 35 | src: path.join(process.cwd(), 'src') 36 | } 37 | } 38 | }; -------------------------------------------------------------------------------- /lib/internals/webpack/webpack.config.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = { 6 | entry: path.join(process.cwd(), 'src/index.js'), 7 | output: { 8 | filename: 'bundle.js', 9 | path: path.resolve(process.cwd(), 'dist') 10 | }, 11 | module: { 12 | rules: [{ 13 | test: /\.css$/i, 14 | use: ['style-loader', 'css-loader'] 15 | }, { 16 | test: /\.js$/, 17 | // Transform all .js files required somewhere with Babel 18 | exclude: /node_modules/, 19 | use: { 20 | loader: 'babel-loader' 21 | } 22 | }] 23 | }, 24 | plugins: [], 25 | resolve: { 26 | modules: ['node_modules'], 27 | alias: { 28 | src: path.join(process.cwd(), 'src') 29 | } 30 | } 31 | }; -------------------------------------------------------------------------------- /lib/utils/componentHelpers/componentHelpers.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 6 | 7 | _Object$defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | 11 | exports.removeSomeProps = exports.passThrough = void 0; 12 | 13 | var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys")); 14 | 15 | var _except = _interopRequireDefault(require("except")); 16 | 17 | const removeSomeProps = (originalProps, toBeRemovedProps) => (0, _except.default)(originalProps, toBeRemovedProps); 18 | 19 | exports.removeSomeProps = removeSomeProps; 20 | 21 | const passThrough = (component, props) => { 22 | const omit = (0, _keys.default)(component.propTypes || {}); 23 | return (0, _except.default)(props, omit); 24 | }; 25 | 26 | exports.passThrough = passThrough; -------------------------------------------------------------------------------- /lib/utils/componentHelpers/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _componentHelpers = require("./componentHelpers"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_componentHelpers)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _componentHelpers[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/utils/momentHelpers/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _momentLocaleUtils = require("./momentLocaleUtils"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_momentLocaleUtils)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _momentLocaleUtils[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/utils/objectHelpers/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys"); 4 | 5 | var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each"); 6 | 7 | var _context; 8 | 9 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 10 | 11 | _Object$defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | 15 | var _objectHelpers = require("./objectHelpers"); 16 | 17 | _forEachInstanceProperty(_context = _Object$keys(_objectHelpers)).call(_context, function (key) { 18 | if (key === "default" || key === "__esModule") return; 19 | 20 | _Object$defineProperty(exports, key, { 21 | enumerable: true, 22 | get: function get() { 23 | return _objectHelpers[key]; 24 | } 25 | }); 26 | }); -------------------------------------------------------------------------------- /lib/utils/objectHelpers/objectHelpers.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); 4 | 5 | var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); 6 | 7 | _Object$defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | 11 | exports.isKeyNestedProp = exports.resolveToProperty = void 0; 12 | 13 | var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce")); 14 | 15 | /* 16 | * Allows access to nested JavaScript objects with a string key. 17 | * Example usage: 18 | * resolveToProperty("style.width", document.body) 19 | */ 20 | const resolveToProperty = (path, obj) => { 21 | var _context; 22 | 23 | return typeof path !== 'string' ? undefined : (0, _reduce.default)(_context = path.split('.')).call(_context, (prev, curr) => prev ? prev[curr] : undefined, obj); 24 | }; 25 | /** 26 | * Returns true if path is represented as a nested prop. Otherwise false. 27 | * @param {string} path the string representation of a path to the nested property. 28 | */ 29 | 30 | 31 | exports.resolveToProperty = resolveToProperty; 32 | 33 | const isKeyNestedProp = path => /[a-zA-Z_](\w*\.[a-z_]\w*)+/i.test(path); 34 | 35 | exports.isKeyNestedProp = isKeyNestedProp; -------------------------------------------------------------------------------- /lib/utils/styledHelpers/utils/tests/colorCore.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _globalStyles = require("../../../../global-styles"); 4 | 5 | var _ = require("../.."); 6 | 7 | /* eslint-disable import/no-duplicates */ 8 | const _getGlobalStyles = (0, _globalStyles.getGlobalStyles)(), 9 | colorSchema = _getGlobalStyles.colors; 10 | 11 | describe('When given props with undefined color and bg', () => { 12 | it('should return the default styling for background and color', () => { 13 | const props = {}; 14 | const expected = { 15 | backgroundColor: _.defaultStylesBase.bg, 16 | color: _.defaultStylesBase.color 17 | }; 18 | expect((0, _.colorCore)(props)).toEqual(expected); 19 | }); 20 | }); 21 | describe('When given props with color and bg', () => { 22 | it('should return the default styling for background and color', () => { 23 | const props = { 24 | bg: 'green.dark', 25 | color: 'green' 26 | }; 27 | const expected = { 28 | backgroundColor: colorSchema.green.dark, 29 | color: colorSchema.green.base 30 | }; 31 | expect((0, _.colorCore)(props)).toEqual(expected); 32 | }); 33 | }); 34 | describe('When given props with non-variable color and bg', () => { 35 | it('should return the default styling for background and color', () => { 36 | const props = { 37 | bg: '#ff0000', 38 | color: '#ffffff' 39 | }; 40 | const expected = { 41 | backgroundColor: props.bg, 42 | color: props.color 43 | }; 44 | expect((0, _.colorCore)(props)).toEqual(expected); 45 | }); 46 | }); -------------------------------------------------------------------------------- /lib/utils/styledHelpers/utils/tests/resolveBoxShadow.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssDefaults = require("../../cssDefaults"); 4 | 5 | var _resolvers = require("../resolvers"); 6 | 7 | describe('resolveBoxShadow', () => { 8 | it('should return the inherit value if no depth or globalOverrides given', () => { 9 | // Act 10 | const actual = (0, _resolvers.resolveBoxShadow)(); // Assert 11 | 12 | expect(actual).toBe(_cssDefaults.CSS_INHERIT_VALUE); 13 | }); 14 | it('should return the inherit value depth is not a string', () => { 15 | // Act 16 | const actual = (0, _resolvers.resolveBoxShadow)(5); // Assert 17 | 18 | expect(actual).toBe(_cssDefaults.CSS_INHERIT_VALUE); 19 | }); 20 | it('should return the inherit value depth is a string but not valid', () => { 21 | // Act 22 | const actual = (0, _resolvers.resolveBoxShadow)('07'); // Assert 23 | 24 | expect(actual).toBe(_cssDefaults.CSS_INHERIT_VALUE); 25 | }); 26 | it('should return the specified box shadow value', () => { 27 | // Arrange 28 | const depth = '06'; // Act 29 | 30 | const actual = (0, _resolvers.resolveBoxShadow)(depth); // Assert 31 | 32 | expect(actual).toBe('0 32px 59px 3px rgba(0,0,0,0.14), 0 12px 72px 11px rgba(0,0,0,0.12), 0 14px 20px -8px rgba(0,0,0,0.2)'); 33 | }); 34 | }); -------------------------------------------------------------------------------- /lib/utils/styledHelpers/utils/tests/resolveZIndex.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _cssDefaults = require("../../cssDefaults"); 4 | 5 | var _resolvers = require("../resolvers"); 6 | 7 | describe('resolveZIndex', () => { 8 | it('should return the inherit value if no depth or globalOverrides given', () => { 9 | // Act 10 | const actual = (0, _resolvers.resolveZIndex)(); // Assert 11 | 12 | expect(actual).toBe(_cssDefaults.CSS_INHERIT_VALUE); 13 | }); 14 | it('should return the inherit value depth is not a string', () => { 15 | // Act 16 | const actual = (0, _resolvers.resolveZIndex)(5); // Assert 17 | 18 | expect(actual).toBe(_cssDefaults.CSS_INHERIT_VALUE); 19 | }); 20 | it('should return the inherit value depth is a string but not valid', () => { 21 | // Act 22 | const actual = (0, _resolvers.resolveZIndex)('07'); // Assert 23 | 24 | expect(actual).toBe(_cssDefaults.CSS_INHERIT_VALUE); 25 | }); 26 | it('should return the specified z-index value', () => { 27 | // Arrange 28 | const depth = '06'; // Act 29 | 30 | const actual = (0, _resolvers.resolveZIndex)(depth); // Assert 31 | 32 | expect(actual).toBe('1060'); 33 | }); 34 | }); -------------------------------------------------------------------------------- /src/assets/json/border.json: -------------------------------------------------------------------------------- 1 | { 2 | "borderRadius": { 3 | "sm": "2px", 4 | "base": "4px", 5 | "lg": "8px" 6 | } 7 | } -------------------------------------------------------------------------------- /src/assets/json/breakpoints.json: -------------------------------------------------------------------------------- 1 | { 2 | "xs": "28em", 3 | "sm": "40em", 4 | "md": "52em", 5 | "lg": "64em", 6 | "xl": "76em" 7 | } -------------------------------------------------------------------------------- /src/assets/json/fontFamily.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"", 3 | "monospace": "Consolas, \"Andale Mono WT\", \"Andale Mono\", \"Lucida Console\", \"Lucida Sans Typewriter\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", \"Liberation Mono\", \"Nimbus Mono L\", Monaco, \"Courier New\", Courier, monospace", 4 | "native": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"", 5 | "sansSerif": "Frutiger, \"Frutiger Linotype\", Univers, Calibri, \"Gill Sans\", \"Gill Sans MT\", \"Myriad Pro\", Myriad, \"DejaVu Sans Condensed\", \"Liberation Sans\", \"Nimbus Sans L\", Tahoma, Geneva, \"Helvetica Neue\", Helvetica, Arial, sans-serif", 6 | "serif": "\"Palatino Linotype\", Palatino, Palladio, \"URW Palladio L\", \"Book Antiqua\", Baskerville, \"Bookman Old Style\", \"Bitstream Charter\", \"Nimbus Roman No9 L\", Garamond, \"Apple Garamond\", \"ITC Garamond Narrow\", \"New Century Schoolbook\", \"Century Schoolbook\", \"Century Schoolbook L\", Georgia, serif" 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/json/fontSize.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseFontSize": "1rem", 3 | "displayHeader": { 4 | "h1": "6rem", 5 | "h2": "4.8rem", 6 | "h3": "4.2rem", 7 | "h4": "3.6rem", 8 | "h5": "3rem", 9 | "h6": "2.4rem" 10 | }, 11 | "h1": "2.5rem", 12 | "h2": "2rem", 13 | "h3": "1.75rem", 14 | "h4": "1.5rem", 15 | "h5": "1.25rem", 16 | "h6": "1rem", 17 | "sizeVariants": { 18 | "sm": ".8", 19 | "base": "1", 20 | "lg": "1.2" 21 | } 22 | } -------------------------------------------------------------------------------- /src/assets/json/grid.json: -------------------------------------------------------------------------------- 1 | { 2 | "gutter": "1rem" 3 | } -------------------------------------------------------------------------------- /src/assets/json/shadow.json: -------------------------------------------------------------------------------- 1 | { 2 | "01": "0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)", 3 | "02": "0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3)", 4 | "03": "0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2)", 5 | "04": "0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2)", 6 | "05": "0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2)", 7 | "06": "0 32px 59px 3px rgba(0,0,0,0.14), 0 12px 72px 11px rgba(0,0,0,0.12), 0 14px 20px -8px rgba(0,0,0,0.2)" 8 | } -------------------------------------------------------------------------------- /src/assets/json/zIndex.json: -------------------------------------------------------------------------------- 1 | { 2 | "01": "1010", 3 | "02": "1020", 4 | "03": "1030", 5 | "04": "1040", 6 | "05": "1050", 7 | "06": "1060" 8 | } -------------------------------------------------------------------------------- /src/elements/Button/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | export * from './utils'; 4 | -------------------------------------------------------------------------------- /src/elements/Button/utils.js: -------------------------------------------------------------------------------- 1 | import { resolveColor } from 'src/utils/styledHelpers'; 2 | 3 | const hasVariant = variant => { 4 | if (!variant) { 5 | return false; 6 | } 7 | return !!variant; 8 | }; 9 | 10 | export const activeColorButton = props => { 11 | const { bgActiveColor, variant } = props; 12 | if (hasVariant(variant)) { 13 | return null; 14 | } 15 | const color = (!bgActiveColor || bgActiveColor === null) ? resolveColor('white.light') : resolveColor(bgActiveColor); 16 | return `background-color: ${color}`; 17 | }; 18 | 19 | export const hoverColorButton = props => { 20 | const { bgHoverColor, variant } = props; 21 | if (hasVariant(variant)) { 22 | return null; 23 | } 24 | const color = (!bgHoverColor || bgHoverColor === null) ? resolveColor('white.dark') : resolveColor(bgHoverColor); 25 | return `background-color: ${color}`; 26 | }; 27 | -------------------------------------------------------------------------------- /src/elements/Card/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box } from 'src/elements/grid'; 3 | import { removeSomeProps } from 'src/utils/componentHelpers'; 4 | import { 5 | cardDefaultProps, 6 | cardPropTypes, 7 | } from './utils'; 8 | import { 9 | CardHeader, 10 | CardInner, 11 | getCardActions, 12 | getCardBody, 13 | getCardRichMedia, 14 | getCardSecondaryMedia, 15 | } from './subComponents'; 16 | 17 | export const CardComponent = props => { 18 | const { 19 | cardPadding, 20 | cardSecondaryMedia, 21 | children, 22 | } = props; 23 | return ( 24 | 25 | {getCardRichMedia(props)} 26 | 27 | 28 | {!cardSecondaryMedia ? getCardBody(props) : ''} 29 | {children ? {children} : ''} 30 | 31 | {getCardSecondaryMedia(props)} 32 | {getCardActions(props)} 33 | 34 | ); 35 | }; 36 | 37 | CardComponent.propTypes = { 38 | ...cardPropTypes, 39 | }; 40 | 41 | CardComponent.defaultProps = { 42 | ...cardDefaultProps, 43 | }; 44 | -------------------------------------------------------------------------------- /src/elements/Card/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/Card/subComponents/CardActions/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box } from 'src/elements/grid'; 3 | import { Card } from 'src/elements/Card'; 4 | 5 | export const getCardActions = ({ 6 | cardActions, 7 | cardActionsProps, 8 | cardActionsLeft, 9 | cardActionsLeftProps, 10 | cardActionsRight, 11 | cardActionsRightProps, 12 | cardPadding, 13 | }) => { 14 | if (cardActions || cardActionsLeft) { 15 | return ( 16 | 22 | {cardActions} 23 | 24 | {cardActionsLeft} 25 | 26 | 27 | {cardActionsRight} 28 | 29 | 30 | ); 31 | } 32 | if (cardActionsRight) { 33 | return ( 34 | 39 | 40 | {cardActionsRight} 41 | 42 | 43 | ); 44 | } 45 | return ''; 46 | }; 47 | -------------------------------------------------------------------------------- /src/elements/Card/subComponents/CardBody.md: -------------------------------------------------------------------------------- 1 | Card body is reserved for the content of the card. It appears below the secondary media area and above the actions area. It is a [``](#/Flexbox/Components/Box) component. 2 | 3 | #### Examples 4 | 5 | ```jsx in Markdown 6 | import { Card } from 'src/elements/Card'; 7 | import { Box, Flex } from 'src/elements/grid'; 8 | 9 | const baseCardStyleProps = { 10 | m: 1, 11 | maxWidth: 300, 12 | width: 1, 13 | }; 14 | 15 | const containerStyleProps = { 16 | alignItems: 'center', 17 | background: '#fdf4fb', 18 | flexWrap: 'wrap', 19 | justifyContent: 'space-evenly', 20 | p: [2, null, 3], 21 | }; 22 | 23 | 24 | 25 | 29 | 30 | 31 | ``` 32 | 33 | ### List of Props 34 | 35 | | Prop Name | Passed Props | SubComponent | Root Component | Default Props | Description | 36 | | - | - | - | - | - | - | 37 | | `cardBody` | `cardBodyProps` | `` | [``](#/Flexbox/Components/Box) | None | Container for the body content of the card. | 38 | -------------------------------------------------------------------------------- /src/elements/Card/subComponents/CardBody/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'src/elements/Card'; 3 | import { 4 | cardBaseDefaultProps, 5 | cardBasePropTypes, 6 | cardBodyBaseDefaultProps, 7 | cardBodyBasePropTypes, 8 | cardSecondaryMediaBasePropTypes, 9 | cardSecondaryMediaBaseDefaultProps, 10 | } from 'src/elements/Card/utils'; 11 | 12 | const getPaddingTop = ({ 13 | cardPadding, 14 | cardSubtitle, 15 | cardThumbnail, 16 | cardTitle, 17 | }) => { 18 | if (!cardTitle && !cardThumbnail && !cardSubtitle) { 19 | return cardPadding; 20 | } 21 | return ''; 22 | }; 23 | 24 | export const getCardBody = props => { 25 | const { 26 | cardBody, 27 | cardBodyProps, 28 | cardPadding, 29 | cardSecondaryMedia, 30 | } = props; 31 | if (cardBody) { 32 | return ( 33 | 38 | {cardBody} 39 | 40 | ); 41 | } 42 | return null; 43 | }; 44 | 45 | getCardBody.propTypes = { 46 | ...cardBasePropTypes, 47 | ...cardBodyBasePropTypes, 48 | ...cardSecondaryMediaBasePropTypes, 49 | }; 50 | 51 | getCardBody.defaultProps = { 52 | ...cardBaseDefaultProps, 53 | ...cardBodyBaseDefaultProps, 54 | ...cardSecondaryMediaBaseDefaultProps, 55 | }; 56 | -------------------------------------------------------------------------------- /src/elements/Card/subComponents/CardRichMedia/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'src/elements/Card'; 3 | import { 4 | cardRichMediaBasePropTypes, 5 | cardRichMediaBaseDefaultProps, 6 | } from 'src/elements/Card/utils'; 7 | 8 | export const getCardRichMedia = ({ 9 | cardRichMedia, 10 | cardRichMediaProps, 11 | }) => { 12 | if (cardRichMedia) { 13 | return {cardRichMedia}; 14 | } 15 | return null; 16 | }; 17 | 18 | getCardRichMedia.propTypes = { 19 | ...cardRichMediaBasePropTypes, 20 | }; 21 | 22 | getCardRichMedia.defaultProps = { 23 | ...cardRichMediaBaseDefaultProps, 24 | }; 25 | -------------------------------------------------------------------------------- /src/elements/Card/subComponents/CardSecondaryMedia/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'src/elements/Card'; 3 | import { 4 | cardBasePropTypes, 5 | cardBaseDefaultProps, 6 | cardSecondaryMediaBasePropTypes, 7 | cardSecondaryMediaBaseDefaultProps, 8 | } from 'src/elements/Card/utils'; 9 | import { Box } from 'src/elements/grid'; 10 | import { getCardBody } from 'src/elements/Card/subComponents'; 11 | import { getCardActions } from '../CardActions'; 12 | 13 | export const getCardSecondaryMedia = props => { 14 | const { 15 | cardBody, 16 | cardPadding, 17 | cardSecondaryMedia, 18 | cardSecondaryMediaProps, 19 | } = props; 20 | if (cardSecondaryMedia) { 21 | return ( 22 | 23 | 27 | {cardSecondaryMedia} 28 | 29 | {getCardBody(props)} 30 | 31 | ); 32 | } 33 | return null; 34 | }; 35 | 36 | getCardSecondaryMedia.propTypes = { 37 | ...cardBasePropTypes, 38 | ...cardSecondaryMediaBasePropTypes, 39 | }; 40 | 41 | getCardSecondaryMedia.defaultProps = { 42 | ...cardBaseDefaultProps, 43 | ...cardSecondaryMediaBaseDefaultProps, 44 | }; 45 | -------------------------------------------------------------------------------- /src/elements/Card/subComponents/index.js: -------------------------------------------------------------------------------- 1 | export * from './CardActions'; 2 | export * from './CardBody'; 3 | export * from './CardHeader'; 4 | export * from './CardInner'; 5 | export * from './CardRichMedia'; 6 | export * from './CardSecondaryMedia'; 7 | -------------------------------------------------------------------------------- /src/elements/Card/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './props'; 2 | -------------------------------------------------------------------------------- /src/elements/Image/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { removeSomeProps } from 'src/utils/componentHelpers'; 4 | import { Img } from 'react-image'; 5 | import propTypes from '@styled-system/prop-types'; 6 | 7 | const componentPropsToRemove = { 8 | ...propTypes.border, 9 | ...propTypes.layout, 10 | ...propTypes.space, 11 | }; 12 | 13 | export const ImageComponent = ({ alt, ...props }) => ( 14 | {alt} 15 | ); 16 | 17 | ImageComponent.propTypes = { 18 | alt: PropTypes.string, 19 | }; 20 | 21 | ImageComponent.defaultProps = { 22 | alt: '', 23 | }; 24 | -------------------------------------------------------------------------------- /src/elements/Image/examples/nacho-dominguez-argenta-cCVzi_mKovs-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/src/elements/Image/examples/nacho-dominguez-argenta-cCVzi_mKovs-unsplash.jpg -------------------------------------------------------------------------------- /src/elements/Image/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/Image/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import PropTypes from 'prop-types'; 3 | import { border, layout } from 'styled-system'; 4 | import propTypes from '@styled-system/prop-types'; 5 | import { withHideable } from 'src/elements/utils/Hideable'; 6 | import { ImageComponent } from './component'; 7 | 8 | const Image = styled(withHideable(ImageComponent))` 9 | ${border} 10 | ${layout} 11 | `; 12 | 13 | Image.propTypes = { 14 | /** Required for web accessibility. Should be short and descriptive. */ 15 | alt: PropTypes.string.isRequired, 16 | /** Hides component */ 17 | isHidden: PropTypes.bool, 18 | ...propTypes.border, 19 | ...propTypes.layout, 20 | }; 21 | 22 | Image.defaultProps = { 23 | isHidden: false, 24 | maxWidth: '100%', 25 | width: '100%', 26 | }; 27 | 28 | /** @component */ 29 | export { Image }; 30 | -------------------------------------------------------------------------------- /src/elements/Progress/CircleProgress/component.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { Box } from 'src/elements/grid'; 5 | import { removeSomeProps } from 'src/utils/componentHelpers'; 6 | import { defaultProgressPropsToTrim } from '../utils'; 7 | 8 | export const RootComponent = ({ children, ...props }) => ( 9 | 10 | {children} 11 | 12 | ); 13 | RootComponent.propTypes = { 14 | children: PropTypes.any, 15 | }; 16 | 17 | RootComponent.defaultProps = { 18 | children: null, 19 | }; 20 | 21 | export const CircleComponent = ({ children, ...props }) => { 22 | const { indicatorPropsToTrim, trackPropsToTrim } = props; 23 | const propsToTrim = [ 24 | ...defaultProgressPropsToTrim, 25 | ...indicatorPropsToTrim, 26 | ...trackPropsToTrim, 27 | ]; 28 | return ( 29 | 30 | {children} 31 | 32 | ); 33 | }; 34 | 35 | CircleComponent.propTypes = { 36 | children: PropTypes.any, 37 | indicatorPropsToTrim: PropTypes.arrayOf(PropTypes.string), 38 | trackPropsToTrim: PropTypes.arrayOf(PropTypes.string), 39 | }; 40 | 41 | CircleComponent.defaultProps = { 42 | children: null, 43 | indicatorPropsToTrim: [], 44 | trackPropsToTrim: [], 45 | }; 46 | -------------------------------------------------------------------------------- /src/elements/Progress/LinearProgress/component.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { Box } from 'src/elements/grid'; 5 | import { removeSomeProps } from 'src/utils/componentHelpers'; 6 | import { defaultProgressPropsToTrim } from '../utils'; 7 | 8 | export const TrackComponent = ({ children, ...props }) => ( 9 | 10 | {children} 11 | 12 | ); 13 | 14 | TrackComponent.propTypes = { 15 | children: PropTypes.any, 16 | }; 17 | 18 | TrackComponent.defaultProps = { 19 | children: null, 20 | }; 21 | 22 | export const LineComponent = ({ children, ...props }) => { 23 | const { indicatorPropsToTrim, trackPropsToTrim } = props; 24 | const propsToTrim = [ 25 | ...defaultProgressPropsToTrim, 26 | ...indicatorPropsToTrim, 27 | ...trackPropsToTrim, 28 | ]; 29 | return ( 30 | 31 | {children} 32 | 33 | ); 34 | }; 35 | 36 | LineComponent.propTypes = { 37 | children: PropTypes.any, 38 | indicatorPropsToTrim: PropTypes.arrayOf(PropTypes.string), 39 | trackPropsToTrim: PropTypes.arrayOf(PropTypes.string), 40 | }; 41 | 42 | LineComponent.defaultProps = { 43 | children: null, 44 | indicatorPropsToTrim: [], 45 | trackPropsToTrim: [], 46 | }; 47 | -------------------------------------------------------------------------------- /src/elements/Progress/getProgress.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Progress } from 'src/elements/Progress'; 4 | 5 | export const getProgressDefaultProps = { 6 | progress: null, 7 | progressPlacement: 'top', 8 | progressProps: {}, 9 | showProgress: false, 10 | }; 11 | 12 | export const getProgressPropTypes = { 13 | progress: PropTypes.any, 14 | progressPlacement: PropTypes.oneOf([ 15 | 'bottom', 16 | 'left', 17 | 'right', 18 | 'top', 19 | ]), 20 | progressProps: PropTypes.object, 21 | showProgress: PropTypes.bool, 22 | }; 23 | 24 | export const getProgress = options => { 25 | const { 26 | progress, 27 | progressProps, 28 | showProgress, 29 | } = options; 30 | if (React.isValidElement(progress)) { 31 | return progress; 32 | } 33 | return ( 34 | 38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /src/elements/Progress/index.js: -------------------------------------------------------------------------------- 1 | export * from './getProgress'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/Progress/tests/getProgress.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '@testing-library/jest-dom'; 3 | import 'jest-styled-components'; 4 | import { 5 | getProgress, 6 | Progress, 7 | } from 'src/elements/Progress'; 8 | 9 | describe('Util Test - getProgress', () => { 10 | const linearProgress = ( 11 | 17 | ); 18 | const options = { 19 | progress: linearProgress, 20 | progressPlacement: 'top', 21 | progressProps: {}, 22 | showProgress: true, 23 | }; 24 | it('should return the provided progress when given as a valid element', () => { 25 | const actual = getProgress(options); 26 | expect(actual).toEqual(options.progress); 27 | }); 28 | it('should return the built-in progress when progress is not a valid element', () => { 29 | const actual = getProgress({ ...options, progress: null }); 30 | expect(actual).not.toEqual(options.progress); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /src/elements/Progress/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './keyframes'; 2 | export * from './props'; 3 | export * from './styledHelpers'; 4 | -------------------------------------------------------------------------------- /src/elements/Progress/utils/keyframes.js: -------------------------------------------------------------------------------- 1 | import { css, keyframes } from 'styled-components'; 2 | 3 | const determinateKeyframesBase = keyframes` 4 | 0% { 5 | transform: translate(-100%, 0); 6 | } 7 | 100% { 8 | transform: translate(0, 0); 9 | } 10 | `; 11 | 12 | export const determinateKeyframes = () => css` 13 | ${determinateKeyframesBase} 14 | `; 15 | 16 | const indeterminateKeyframesBase = keyframes` 17 | 0% { 18 | transform: translate(-100%, 0); 19 | } 20 | 50% { 21 | transform: translate(60%, 0); 22 | } 23 | 65% { 24 | transform: translate(100%, 0); 25 | } 26 | 65.1% { 27 | transform: translate(-100%, 100%); 28 | } 29 | 65.2% { 30 | transform: translate(-100%, 0); 31 | } 32 | 100% { 33 | transform: translate(100%, 0); 34 | } 35 | `; 36 | 37 | export const indeterminateKeyframes = () => css` 38 | ${indeterminateKeyframesBase} 39 | `; 40 | -------------------------------------------------------------------------------- /src/elements/Progress/utils/styledHelpers.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | import { system } from 'styled-system'; 3 | import { resolveColor } from 'src/utils/styledHelpers'; 4 | import { getGlobalOverrides } from 'src/global-styles'; 5 | 6 | export const getAnimationIterationCount = props => { 7 | const { 8 | animationIterationCount, 9 | loop, 10 | } = props; 11 | if (animationIterationCount) { 12 | return animationIterationCount; 13 | } 14 | if (loop) { 15 | return 'infinite'; 16 | } 17 | return 1; 18 | }; 19 | 20 | export const makeColorResolver = (styleName, propName) => props => ({ 21 | [styleName]: resolveColor(props[propName], getGlobalOverrides(props)), 22 | }); 23 | 24 | export const styledSystemAnimation = css` 25 | ${system({ animationDuration: true })} 26 | ${system({ animationTimingFunction: true })} 27 | ${system({ animationDelay: true })} 28 | ${system({ animationIterationCount: true })} 29 | ${system({ animationDirection: true })} 30 | ${system({ animationFillMode: true })} 31 | ${system({ animationPlayState: true })} 32 | ${system({ animation: true })} 33 | `; 34 | -------------------------------------------------------------------------------- /src/elements/Table/examples/examples.md: -------------------------------------------------------------------------------- 1 | ## [`Pagination`](#/Table/Examples/Pagination) 2 | 3 | Example on controlled pagination. 4 | *** 5 | 6 | ## [`Manual Pagination`](#/Table/Examples/Manual%20Pagination) 7 | 8 | Example on manual pagination. 9 | *** 10 | 11 | ## [`Expandable Rows`](#/Table/Examples/Expandable%20Rows) 12 | 13 | Example on expandable rows. 14 | *** 15 | 16 | ## [`Table Striped`](#/Table/Examples/Table%20Striped) 17 | 18 | Example on striped table. 19 | *** 20 | 21 | ## [`Hide Components`](#/Table/Examples/Hide%20Components) 22 | 23 | Examples on hideable components. 24 | *** 25 | 26 | ## [`Loading State`](#/Table/Examples/Loading%20State) 27 | 28 | How to use the progress component in Table. 29 | *** 30 | -------------------------------------------------------------------------------- /src/elements/Table/examples/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './data'; 2 | export * from './sortHelpers'; 3 | -------------------------------------------------------------------------------- /src/elements/Table/examples/utils/sortHelpers.js: -------------------------------------------------------------------------------- 1 | 2 | export const makeSanitizeString = (isCaseSensitive = false) => a => (isCaseSensitive ? String(a) : String(a).toLowerCase()); 3 | export const makeSanitizeNumber = () => a => Number(a); 4 | 5 | const sanitizeItem = (sanitizer, a, propName) => sanitizer(propName ? a[propName] : a); 6 | 7 | export const sortComparison = (sanitizer, isDescending = false, propName = '') => (a, b) => { 8 | const aValue = sanitizeItem(sanitizer, a, propName); 9 | const bValue = sanitizeItem(sanitizer, b, propName); 10 | let result = 0; 11 | if (aValue > bValue) { 12 | result = 1; 13 | } 14 | if (aValue < bValue) { 15 | result = -1; 16 | } 17 | return isDescending ? result * -1 : result; 18 | }; 19 | 20 | export const sortAsString = (isDescending = false, propName = '', isCaseSensitive = false) => sortComparison(makeSanitizeString(isCaseSensitive), isDescending, propName); 21 | 22 | export const sortAsNumber = (isDescending = false, propName = '') => sortComparison(makeSanitizeNumber(), isDescending, propName); 23 | -------------------------------------------------------------------------------- /src/elements/Table/index.js: -------------------------------------------------------------------------------- 1 | export * from './styled'; 2 | -------------------------------------------------------------------------------- /src/elements/Table/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { flexbox } from 'styled-system'; 3 | import { withHideable } from 'src/elements/utils/Hideable'; 4 | import { TableComponent } from './component'; 5 | import { defaultTableStylesBase } from './utils'; 6 | 7 | const Table = styled(withHideable(TableComponent))` 8 | ${defaultTableStylesBase} 9 | ${flexbox} 10 | `; 11 | 12 | /** @component */ 13 | export { Table }; 14 | -------------------------------------------------------------------------------- /src/elements/Table/tests/utils/columns.js: -------------------------------------------------------------------------------- 1 | export const columns = [ 2 | { 3 | columns: [ 4 | { 5 | accessor: 'firstName', 6 | Header: 'First Name', 7 | title: 'test-first-name-column', 8 | }, 9 | { 10 | accessor: 'lastName', 11 | Header: 'Last Name', 12 | title: 'test-last-name-column', 13 | }, 14 | ], 15 | Header: 'Name', 16 | title: 'test-name-column', 17 | }, 18 | { 19 | columns: [ 20 | { 21 | accessor: 'age', 22 | Header: 'Age', 23 | title: 'test-age-column', 24 | }, 25 | ], 26 | Header: 'Info', 27 | title: 'test-info-column', 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /src/elements/Table/tests/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './columns'; 2 | export * from './testData'; 3 | -------------------------------------------------------------------------------- /src/elements/Table/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const defaultPageOptions = [10, 15, 25, 30, 50]; 2 | -------------------------------------------------------------------------------- /src/elements/Table/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './constants'; 2 | export * from './cssDefaults'; 3 | export * from './props'; 4 | export * from './styled'; 5 | export * from './viewState'; 6 | -------------------------------------------------------------------------------- /src/elements/Table/utils/props.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import propTypes from '@styled-system/prop-types'; 3 | import { typography } from 'src/utils/styledHelpers'; 4 | 5 | export const defaultTableStylesPropsToTrim = [ 6 | ...Object.keys(propTypes.border), 7 | ...Object.keys(propTypes.layout), 8 | ...Object.keys(propTypes.space), 9 | ]; 10 | 11 | const defaultTableStylesBasePropTypes = { 12 | ...propTypes.border, 13 | ...propTypes.layout, 14 | ...propTypes.space, 15 | }; 16 | 17 | export const defaultTableStripedPropTypes = { 18 | even: PropTypes.shape({ 19 | bg: PropTypes.string, 20 | }), 21 | odd: PropTypes.shape({ 22 | bg: PropTypes.string, 23 | }), 24 | }; 25 | 26 | export const tablePropTypes = { 27 | ...typography.propTypes, 28 | ...defaultTableStylesBasePropTypes, 29 | }; 30 | 31 | export const tableBodyPropTypes = {}; 32 | 33 | export const tableCellPropTypes = { 34 | ...defaultTableStylesBasePropTypes, 35 | ...propTypes.fontWeight, 36 | }; 37 | 38 | export const tableHeadPropTypes = { 39 | ...defaultTableStylesBasePropTypes, 40 | ...propTypes.fontWeight, 41 | }; 42 | 43 | export const tableHeaderPropTypes = { 44 | ...defaultTableStylesBasePropTypes, 45 | }; 46 | 47 | export const tableResponsiveWrapperPropTypes = {}; 48 | 49 | export const tableRowPropTypes = { 50 | ...defaultTableStylesBasePropTypes, 51 | }; 52 | 53 | export const tableWrapperPropTypes = { 54 | ...typography.propTypes, 55 | ...propTypes.border, 56 | }; 57 | -------------------------------------------------------------------------------- /src/elements/Table/utils/styled/StyledTable/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | import { 6 | defaultTableProps, 7 | defaultTableStylesBase, 8 | defaultTableStylesPropsToTrim, 9 | tablePropTypes, 10 | } from '../..'; 11 | 12 | function StyledTableComponent(props) { 13 | const { children, ...otherProps } = props; 14 | return ( 15 | 16 | {children} 17 |
18 | ); 19 | } 20 | 21 | StyledTableComponent.propTypes = { 22 | children: PropTypes.node, 23 | }; 24 | 25 | StyledTableComponent.defaultProps = { 26 | children: '', 27 | }; 28 | 29 | const StyledTable = styled(StyledTableComponent)` 30 | border-spacing: 0; 31 | ${defaultTableStylesBase} 32 | `; 33 | 34 | StyledTable.propTypes = { 35 | ...tablePropTypes, 36 | }; 37 | 38 | StyledTable.defaultProps = { 39 | ...defaultTableProps, 40 | }; 41 | 42 | export { StyledTable }; 43 | -------------------------------------------------------------------------------- /src/elements/Table/utils/styled/StyledTableHeader/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | import { 6 | defaultTableHeaderProps, 7 | defaultTableStylesBase, 8 | defaultTableStylesPropsToTrim, 9 | tableHeaderPropTypes, 10 | } from '../..'; 11 | 12 | function StyledTableHeaderComponent(props) { 13 | const { children, ...otherProps } = props; 14 | return {children}; 15 | } 16 | 17 | StyledTableHeaderComponent.propTypes = { 18 | children: PropTypes.node, 19 | }; 20 | 21 | StyledTableHeaderComponent.defaultProps = { 22 | children: '', 23 | }; 24 | 25 | const StyledTableHeader = styled(StyledTableHeaderComponent)(defaultTableStylesBase); 26 | 27 | StyledTableHeader.propTypes = { 28 | ...tableHeaderPropTypes, 29 | }; 30 | 31 | StyledTableHeader.defaultProps = { 32 | ...defaultTableHeaderProps, 33 | }; 34 | 35 | export { StyledTableHeader }; 36 | -------------------------------------------------------------------------------- /src/elements/Table/utils/styled/StyledTableResponsiveWrapper/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | import { Box } from 'src/elements/grid'; 6 | import { 7 | defaultTableResponsiveWrapperProps, 8 | defaultTableStylesBase, 9 | defaultTableStylesPropsToTrim, 10 | tableResponsiveWrapperPropTypes, 11 | } from '../..'; 12 | 13 | function StyledTableResponsiveWrapperComponent(props) { 14 | const { children, ...otherProps } = props; 15 | return {children}; 16 | } 17 | 18 | StyledTableResponsiveWrapperComponent.propTypes = { 19 | children: PropTypes.node, 20 | }; 21 | 22 | StyledTableResponsiveWrapperComponent.defaultProps = { 23 | children: '', 24 | }; 25 | 26 | const StyledTableResponsiveWrapper = styled(StyledTableResponsiveWrapperComponent)(defaultTableStylesBase); 27 | 28 | StyledTableResponsiveWrapper.propTypes = { 29 | ...tableResponsiveWrapperPropTypes, 30 | }; 31 | 32 | StyledTableResponsiveWrapper.defaultProps = { 33 | ...defaultTableResponsiveWrapperProps, 34 | }; 35 | 36 | export { StyledTableResponsiveWrapper }; 37 | -------------------------------------------------------------------------------- /src/elements/Table/utils/styled/StyledTableRow/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | import { 6 | defaultTableRowProps, 7 | defaultTableStylesBase, 8 | defaultTableStylesPropsToTrim, 9 | tableRowPropTypes, 10 | } from '../..'; 11 | 12 | function StyledTableRowComponent(props) { 13 | const { children, ...otherProps } = props; 14 | return {children}; 15 | } 16 | 17 | StyledTableRowComponent.propTypes = { 18 | children: PropTypes.node, 19 | }; 20 | 21 | StyledTableRowComponent.defaultProps = { 22 | children: '', 23 | }; 24 | 25 | const StyledTableRow = styled(StyledTableRowComponent)(defaultTableStylesBase); 26 | 27 | StyledTableRow.propTypes = { 28 | ...tableRowPropTypes, 29 | }; 30 | 31 | StyledTableRow.defaultProps = { 32 | ...defaultTableRowProps, 33 | }; 34 | 35 | export { StyledTableRow }; 36 | -------------------------------------------------------------------------------- /src/elements/Table/utils/styled/StyledTableWrapper/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { Box } from 'src/elements/grid'; 5 | import { 6 | defaultTableWrapperProps, 7 | tableWrapperPropTypes, 8 | } from '../..'; 9 | 10 | function StyledTableWrapperComponent(props) { 11 | const { children, ...otherProps } = props; 12 | return {children}; 13 | } 14 | 15 | StyledTableWrapperComponent.propTypes = { 16 | children: PropTypes.node, 17 | }; 18 | 19 | StyledTableWrapperComponent.defaultProps = { 20 | children: '', 21 | }; 22 | 23 | const StyledTableWrapper = styled(StyledTableWrapperComponent)``; 24 | 25 | StyledTableWrapper.propTypes = { 26 | ...tableWrapperPropTypes, 27 | }; 28 | 29 | StyledTableWrapper.defaultProps = { 30 | ...defaultTableWrapperProps, 31 | }; 32 | 33 | export { StyledTableWrapper }; 34 | -------------------------------------------------------------------------------- /src/elements/Table/utils/styled/index.js: -------------------------------------------------------------------------------- 1 | export * from './StyledTable'; 2 | export * from './StyledTableBody'; 3 | export * from './StyledTableCell'; 4 | export * from './StyledTableHeader'; 5 | export * from './StyledTableResponsiveWrapper'; 6 | export * from './StyledTableRow'; 7 | export * from './StyledTableWrapper'; 8 | -------------------------------------------------------------------------------- /src/elements/Table/utils/viewState.js: -------------------------------------------------------------------------------- 1 | export const getPaginationViewState = props => { 2 | const { 3 | showPagination, 4 | showPaginationBottom, 5 | showPaginationTop, 6 | } = props; 7 | return { 8 | paginationBottom: { 9 | visible: (showPagination && showPaginationBottom) || (showPagination && !showPaginationTop), 10 | }, 11 | paginationTop: { 12 | visible: showPagination && showPaginationTop, 13 | }, 14 | }; 15 | }; 16 | export const getTableViewState = props => ({ 17 | ...getPaginationViewState(props), 18 | }); 19 | -------------------------------------------------------------------------------- /src/elements/Toolbar/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/Toolbar/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { 3 | background, 4 | border, 5 | color, 6 | flexbox, 7 | layout, 8 | position, 9 | shadow, 10 | space, 11 | system, 12 | } from 'styled-system'; 13 | import { withHideable } from 'src/elements/utils/Hideable'; 14 | import { ToolbarComponent } from './component'; 15 | import { toolbarDefaultProps, toolbarPropTypes } from './utils'; 16 | 17 | const Toolbar = styled(withHideable(ToolbarComponent))` 18 | ${system({ boxSizing: true })} 19 | ${background} 20 | ${border} 21 | ${color} 22 | ${flexbox} 23 | ${layout} 24 | ${position} 25 | ${shadow} 26 | ${space} 27 | `; 28 | 29 | Toolbar.propTypes = { 30 | ...toolbarPropTypes, 31 | }; 32 | 33 | Toolbar.defaultProps = { 34 | ...toolbarDefaultProps, 35 | }; 36 | 37 | /** @component */ 38 | export { Toolbar }; 39 | -------------------------------------------------------------------------------- /src/elements/Toolbar/tests/Toolbar.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import 'jest-styled-components'; 4 | import { ThemeProvider } from 'styled-components'; 5 | import { Toolbar } from 'src/elements/Toolbar'; 6 | 7 | const emptyTheme = {}; 8 | 9 | const assertReactElement = element => { 10 | const component = renderer.create(element); 11 | return component.toJSON(); 12 | }; 13 | 14 | describe('Box Component base', () => { 15 | it('should return an empty Toolbar with base styling', () => { 16 | const element = ( 17 | 18 | 19 | 20 | ); 21 | expect(assertReactElement(element)).toMatchSnapshot(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/elements/Toolbar/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './props'; 2 | -------------------------------------------------------------------------------- /src/elements/Toolbar/utils/props.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import propTypes from '@styled-system/prop-types'; 3 | import { resolveBoxShadow } from 'src/utils/styledHelpers'; 4 | import { 5 | getProgressDefaultProps, 6 | getProgressPropTypes, 7 | } from 'src/elements/Progress'; 8 | 9 | export const toolbarPropTypes = { 10 | ...propTypes.background, 11 | ...propTypes.border, 12 | ...propTypes.color, 13 | ...propTypes.flexbox, 14 | ...propTypes.layout, 15 | ...propTypes.position, 16 | ...propTypes.shadow, 17 | ...propTypes.space, 18 | ...getProgressPropTypes, 19 | boxSizing: PropTypes.oneOfType([ 20 | PropTypes.array, 21 | PropTypes.string, 22 | ]), 23 | containerComponent: PropTypes.node, 24 | /** Hides component */ 25 | isHidden: PropTypes.bool, 26 | toolbarInnerProps: PropTypes.object, 27 | }; 28 | 29 | export const toolbarDefaultProps = { 30 | ...getProgressDefaultProps, 31 | alignItems: 'center', 32 | boxShadow: resolveBoxShadow('01'), 33 | boxSizing: 'border-box', 34 | centerAreaProps: { 35 | flex: 1, 36 | }, 37 | containerComponent: 'header', 38 | display: 'flex', 39 | flex: 'none', 40 | isHidden: false, 41 | justifyContent: 'center', 42 | minHeight: [48, 5, 64], 43 | progressPlacement: 'bottom', 44 | px: [3, null, 4], 45 | toolbarInnerProps: { 46 | display: 'flex', 47 | justifyContent: 'space-between', 48 | maxWidth: 960, 49 | width: 1, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/elements/forms/CheckboxField/index.js: -------------------------------------------------------------------------------- 1 | export * from './styled'; 2 | -------------------------------------------------------------------------------- /src/elements/forms/DateField/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './constants'; 3 | export * from './styled'; 4 | export * from './utils'; 5 | -------------------------------------------------------------------------------- /src/elements/forms/DateField/props.js: -------------------------------------------------------------------------------- 1 | import { typography } from 'src/utils/styledHelpers'; 2 | 3 | export const defaultControlColorProps = { 4 | captionColor: 'inherit', 5 | dayHoverBgColor: 'brandLinkHover', 6 | dayHoverColor: 'white.light', 7 | disabledColor: 'gray.light', 8 | menuBgColor: 'white.light', 9 | outsideColor: 'gray.dark', 10 | selectedBetweenBgColor: 'brandLink.light', 11 | selectedBetweenColor: 'black', 12 | selectedBgColor: 'brandLink', 13 | selectedColor: 'white.light', 14 | todayBorderColor: 'black', 15 | weekdayColor: 'gray.light', 16 | weekNumberBorderColor: 'gray.light', 17 | weekNumberColor: 'gray', 18 | }; 19 | 20 | export const defaultDayPickerProps = { 21 | numberOfMonths: 1, 22 | weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], 23 | }; 24 | 25 | export const propsToTrim = [ 26 | 'assistiveText', 27 | 'color', 28 | 'controlId', 29 | 'isHidden', 30 | 'isRequired', 31 | 'plainText', 32 | ]; 33 | 34 | export const styledWrapperPropsToTrim = [ 35 | ...Object.keys(propsToTrim), 36 | ...Object.keys(typography.propTypes), 37 | 'disabled', 38 | 'format', 39 | 'value', 40 | ]; 41 | -------------------------------------------------------------------------------- /src/elements/forms/DateField/tests/DateField.ref.test.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | import Adapter from 'enzyme-adapter-react-16'; 5 | import { configure, mount } from 'enzyme'; 6 | import { ThemeProvider } from 'styled-components'; 7 | import { DateField } from '..'; 8 | 9 | configure({ adapter: new Adapter() }); 10 | describe('When supporting a forward ref for TextField ', () => { 11 | it('should reference the underlying input element', () => { 12 | const ref = React.createRef(); 13 | const register = e => { ref.current = e; }; 14 | const component = mount( 15 | 16 | 21 | 22 | ); 23 | expect(component.find('input').instance()).toEqual(ref.current); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/elements/forms/DateField/utils.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | import { dayPickerClassTypes, DEFAULT_DATE_FORMAT, DEFAULT_DATE_VALUE_FORMAT } from './constants'; 3 | 4 | export const dayPickerInputClassNames = dayPickerClassTypes.reduce((dayPickerClassNames, classType) => ({ 5 | ...dayPickerClassNames, 6 | [classType]: `grape-ui-day-picker-${classType}`, 7 | }), {}); 8 | 9 | /** 10 | * Converts the Date from react-day-picker to a string value based on the valueFormat for saving to form controls, etc. 11 | */ 12 | export const formatForOnChange = (value, format, locale) => { 13 | if (value && value instanceof Date) { 14 | return moment(`${(value.getMonth() + 1)}/${value.getDate()}/${value.getFullYear()}}`, DEFAULT_DATE_FORMAT) 15 | .local() 16 | .locale(locale || 'en') 17 | .format(format || DEFAULT_DATE_VALUE_FORMAT); 18 | } 19 | return ''; 20 | }; 21 | 22 | /** 23 | * Converts the Date from react-day-picker to a string value based on the formate for display on the input controls, etc. 24 | * Not Used for now as we are using the default parseDate and formatDate 25 | */ 26 | export const formatForSelectedDay = (value, valueFormat, format, locale) => { 27 | if (value && typeof value === 'string') { 28 | const result = moment(value, valueFormat) 29 | .local() 30 | .locale(locale || 'en') 31 | .format(format); 32 | return result === 'Invalid date' ? undefined : result; 33 | } 34 | return undefined; 35 | }; 36 | -------------------------------------------------------------------------------- /src/elements/forms/Form/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/forms/Form/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { 3 | flexbox, 4 | position, 5 | layout, 6 | space, 7 | } from 'styled-system'; 8 | import PropTypes from 'prop-types'; 9 | import { withHideable } from 'src/elements/utils/Hideable'; 10 | import { FormComponent } from './component'; 11 | 12 | const Form = styled(withHideable(FormComponent))` 13 | ${flexbox} 14 | ${position} 15 | ${layout} 16 | ${space} 17 | `; 18 | 19 | Form.propTypes = { 20 | /** Define which style of form controls should be used 21 | * @see See [Material Design/Components/Text Fields/Usage](https://material.io/components/text-fields/#usage) for more on these styles. */ 22 | formStyle: PropTypes.string, 23 | /** Hides component */ 24 | isHidden: PropTypes.bool, 25 | }; 26 | 27 | Form.defaultProps = { 28 | display: 'flex', 29 | flexDirection: 'column', 30 | formStyle: '', 31 | isHidden: false, 32 | }; 33 | 34 | /** @component */ 35 | export { Form }; 36 | -------------------------------------------------------------------------------- /src/elements/forms/SelectField/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/forms/SelectField/tests/SelectField.ref.test.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | import Adapter from 'enzyme-adapter-react-16'; 5 | import { configure, mount } from 'enzyme'; 6 | import { ThemeProvider } from 'styled-components'; 7 | import { SelectField } from '..'; 8 | 9 | configure({ adapter: new Adapter() }); 10 | describe('When supporting a forward ref for SelectField ', () => { 11 | it('should reference the underlying input element', () => { 12 | const ref = React.createRef(); 13 | const register = e => { ref.current = e; }; 14 | const component = mount( 15 | 16 | 21 | 22 | ); 23 | const instance = component.find('input').at(0).getDOMNode(); 24 | expect(instance).toEqual(ref.current.select.inputRef); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /src/elements/forms/SelectField/tests/examples/index.js: -------------------------------------------------------------------------------- 1 | export const colorOptions = [ 2 | { color: '#FF5630', label: 'Red', value: 'red' }, 3 | { color: '#FFC400', label: 'Yellow', value: 'yellow' }, 4 | { color: '#36B37E', label: 'Green', value: 'green' }, 5 | ]; 6 | -------------------------------------------------------------------------------- /src/elements/forms/TextField/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | export * from './utils'; 4 | -------------------------------------------------------------------------------- /src/elements/forms/TextField/utils.js: -------------------------------------------------------------------------------- 1 | const cleaveMap = new Map(); 2 | cleaveMap.set('phone', { 3 | delimiter: '-', 4 | phone: true, 5 | phoneRegionCode: 'US', 6 | }); 7 | cleaveMap.set('currency', { 8 | numeral: true, 9 | numeralThousandsGroupStyle: 'thousand', 10 | prefix: '$', 11 | }); 12 | cleaveMap.set('integer', { 13 | numeral: true, 14 | numeralDecimalScale: 0, 15 | numeralThousandsGroupStyle: 'thousand', 16 | }); 17 | cleaveMap.set('numeric', { 18 | numeral: true, 19 | numeralThousandsGroupStyle: 'thousand', 20 | }); 21 | cleaveMap.set('postalCode', { 22 | blocks: [5, 4], 23 | delimiter: '-', 24 | delimiterLazyShow: true, 25 | numericOnly: true, 26 | }); 27 | 28 | export const isCleaveInput = props => { 29 | if (props.email || props.password) { 30 | return false; 31 | } 32 | if (props.formatterOptions) { 33 | return true; 34 | } 35 | let foundKey = false; 36 | const checkKeys = (value, key) => { 37 | if (props[key] && !foundKey) { 38 | foundKey = true; 39 | } 40 | }; 41 | 42 | cleaveMap.forEach(checkKeys); 43 | return foundKey; 44 | }; 45 | 46 | export const cleaveOption = props => { 47 | if (props.formatterOptions) { 48 | return props.formatterOptions; 49 | } 50 | let options = null; 51 | const setOptionWhenFound = (value, key) => { 52 | if (props[key]) { 53 | options = value; 54 | } 55 | }; 56 | 57 | cleaveMap.forEach(setOptionWhenFound); 58 | return options; 59 | }; 60 | -------------------------------------------------------------------------------- /src/elements/forms/components.md: -------------------------------------------------------------------------------- 1 | ## [``](#/Forms/Components/CheckboxField) 2 | 3 | Learn about our CheckboxField component. 4 | *** 5 | 6 | ## [``](#/Forms/Components/DateField) 7 | 8 | Learn about our DateField component, which is built on react-day-picker. 9 | *** 10 | 11 | ## [`
`](#/Forms/Components/Form) 12 | 13 | Learn about our Form component, including defining the formStyle. 14 | *** 15 | 16 | ## [``](#/Forms/Components/SelectField) 17 | 18 | Learn about our SelectField component, which is built on react-select. 19 | *** 20 | 21 | ## [``](#/Forms/Components/TextField) 22 | 23 | Learn about our TextField component, including integration with Cleave.js, multiline text fields, and react-hook implementations. 24 | *** 25 | -------------------------------------------------------------------------------- /src/elements/forms/index.js: -------------------------------------------------------------------------------- 1 | export * from './CheckboxField'; 2 | export * from './DateField'; 3 | export * from './Form'; 4 | export * from './SelectField'; 5 | export * from './TextField'; 6 | -------------------------------------------------------------------------------- /src/elements/forms/utils/AssistiveText/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { spaceProps, typography } from 'src/utils/styledHelpers'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | 6 | const propsToTrim = { 7 | ...spaceProps.propTypes, 8 | ...typography.propTypes, 9 | }; 10 | 11 | export const AssistiveTextComponent = ({ children, ...props }) => ( 12 |
13 | {children} 14 |
15 | ); 16 | AssistiveTextComponent.propTypes = { 17 | children: PropTypes.any, 18 | }; 19 | 20 | AssistiveTextComponent.defaultProps = { 21 | children: null, 22 | }; 23 | -------------------------------------------------------------------------------- /src/elements/forms/utils/AssistiveText/helpers.js: -------------------------------------------------------------------------------- 1 | 2 | export const getAssistiveText = props => { 3 | const { assistiveText, isRequired } = props; 4 | if (isRequired && !assistiveText) { 5 | return '*Required'; 6 | } 7 | return assistiveText || ''; 8 | }; 9 | -------------------------------------------------------------------------------- /src/elements/forms/utils/AssistiveText/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | export * from './helpers'; 4 | -------------------------------------------------------------------------------- /src/elements/forms/utils/AssistiveText/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { fontWeight, space } from 'styled-system'; 3 | import { 4 | colorCore, 5 | defaultStylesBase, 6 | ellipsisCore, 7 | fontFamilyCore, 8 | fontSizeCore, 9 | fontStyleCore, 10 | letterSpacingCore, 11 | lineHeightCore, 12 | spaceProps, 13 | textAlignCore, 14 | textDecorationCore, 15 | typography, 16 | } from 'src/utils/styledHelpers'; 17 | import { AssistiveTextComponent } from './component'; 18 | 19 | const fontSizeAssistiveText = props => fontSizeCore({ ...props, sm: true }); 20 | 21 | const AssistiveText = styled(AssistiveTextComponent)` 22 | ${colorCore} 23 | ${ellipsisCore} 24 | ${fontFamilyCore} 25 | ${fontSizeAssistiveText} 26 | ${fontWeight} 27 | ${letterSpacingCore} 28 | ${lineHeightCore} 29 | ${fontStyleCore} 30 | ${space} 31 | ${textAlignCore} 32 | ${textDecorationCore} 33 | `; 34 | 35 | AssistiveText.propTypes = { 36 | ...spaceProps.propTypes, 37 | ...typography.propTypes, 38 | }; 39 | 40 | AssistiveText.defaultProps = { 41 | ...defaultStylesBase, 42 | color: 'gray', 43 | px: 3, 44 | }; 45 | 46 | /** @component */ 47 | export { AssistiveText }; 48 | -------------------------------------------------------------------------------- /src/elements/forms/utils/AssistiveText/tests/AssistiveText.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import { ThemeProvider } from 'styled-components'; 4 | import { AssistiveText } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | const emptyTheme = {}; 8 | 9 | const assertReactElement = element => { 10 | const component = renderer.create(element); 11 | return component.toJSON(); 12 | }; 13 | describe('Assistive Text Component base', () => { 14 | it('should return an Assistive Text object', () => { 15 | const element = Helper text is here; 16 | expect(assertReactElement(element)).toMatchSnapshot(); 17 | }); 18 | it('should return an Assistive Text object with danger text color', () => { 19 | const element = Error text is here; 20 | expect(assertReactElement(element)).toMatchSnapshot(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlGroup/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlGroup/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { space } from 'styled-system'; 3 | import { 4 | colorCore, 5 | spaceProps, 6 | typography, 7 | } from 'src/utils/styledHelpers'; 8 | import { withHideable } from 'src/elements/utils/Hideable'; 9 | import { ControlGroupComponent } from './component'; 10 | 11 | const ControlGroup = styled(withHideable(ControlGroupComponent))` 12 | position: relative; 13 | ${colorCore} 14 | ${space} 15 | width: 100%; 16 | `; 17 | 18 | ControlGroup.propTypes = { 19 | ...spaceProps.propTypes, 20 | ...typography.propTypes, 21 | }; 22 | 23 | ControlGroup.defaultProps = { 24 | pb: 3, 25 | pt: 1, 26 | }; 27 | 28 | /** @component */ 29 | export { ControlGroup }; 30 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlLabel/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { removeSomeProps } from 'src/utils/componentHelpers'; 4 | import { 5 | layoutProps, 6 | positionProps, 7 | spaceProps, 8 | typography, 9 | } from 'src/utils/styledHelpers'; 10 | 11 | const propsToTrim = { 12 | ...layoutProps.propTypes, 13 | ...positionProps.propTypes, 14 | ...spaceProps.propTypes, 15 | ...typography.propTypes, 16 | activeColor: '', 17 | disabled: false, 18 | validationError: '', 19 | }; 20 | 21 | export const ControlLabelComponent = ({ children, ...props }) => ( 22 | // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for 23 | 26 | ); 27 | ControlLabelComponent.propTypes = { 28 | children: PropTypes.any, 29 | }; 30 | 31 | ControlLabelComponent.defaultProps = { 32 | children: null, 33 | }; 34 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlLabel/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlLabel/tests/ControlLabel.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import { ThemeProvider } from 'styled-components'; 4 | import { ControlLabel } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('ControlLabel Component base', () => { 8 | it('should return a ControlLabel object', () => { 9 | const component = renderer.create(Label text is here); 10 | const tree = component.toJSON(); 11 | expect(tree).toMatchSnapshot(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlLabel/tests/ControlLabel.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'jest-styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { ThemeProvider } from 'styled-components'; 5 | import { ControlLabel } from '..'; 6 | 7 | describe('ControlLabel using Theme color', () => { 8 | it('should return a ControlLabel object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | 20 | Lorem Ipsum 21 | 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('ControlLabel using Theme Font Family', () => { 30 | it('should return a ControlLabel object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | 38 | Lorem Ipsum 39 | 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/forms/utils/ControlLabel/tests/__snapshots__/ControlLabel.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`ControlLabel Component base should return a ControlLabel object 1`] = ` 4 | .c0 { 5 | background-color: hsl(0,0%,100%); 6 | color: inherit; 7 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 8 | font-size: 0.8rem; 9 | font-weight: inherit; 10 | height: 0.5rem; 11 | -webkit-letter-spacing: inherit; 12 | -moz-letter-spacing: inherit; 13 | -ms-letter-spacing: inherit; 14 | letter-spacing: inherit; 15 | line-height: 0.8; 16 | left: 8px; 17 | position: absolute; 18 | top: -1px; 19 | padding-left: 8px; 20 | padding-right: 8px; 21 | text-align: inherit; 22 | -webkit-text-decoration: inherit; 23 | text-decoration: inherit; 24 | } 25 | 26 | 32 | `; 33 | -------------------------------------------------------------------------------- /src/elements/forms/utils/PlainText/Readme.md: -------------------------------------------------------------------------------- 1 | Sometimes, you may find yourself wanting to show a form control as just plain text. Luckily, `` handles this. Simply use the `plainText` attribute on any form control to show the results as plain text. 2 | 3 | ```jsx inside Markdown 4 | import { 5 | Box, 6 | Flex, 7 | } from 'src/elements/grid'; // ... from 'grape-ui-react' 8 | import { 9 | CheckboxField, 10 | DateField, 11 | SelectField, 12 | TextField, 13 | } from 'src/elements/forms'; 14 | 15 | const swallowOptions = [ 16 | { 17 | label: 'They migrated', 18 | value: 'migrated' 19 | }, 20 | { 21 | label: 'One African swallow', 22 | value: 'african' 23 | }, 24 | { 25 | label: 'Two European swallows with a line', 26 | value: 'european' 27 | }, 28 | ]; 29 | 30 | <Flex flexDirection="column"> 31 | <PlainText> 32 | I'm just a plain text component. 33 | </PlainText> 34 | <CheckboxField 35 | labelText="How did the coconuts get to England?" 36 | options={swallowOptions} 37 | plainText 38 | /> 39 | <DateField 40 | labelText="When is it?" 41 | plainText 42 | value="12/25/932" 43 | /> 44 | <SelectField 45 | labelText="How did the coconuts get to England?" 46 | options={swallowOptions} 47 | plainText 48 | value={[ 49 | swallowOptions[1], 50 | swallowOptions[2] 51 | ]} 52 | /> 53 | <TextField 54 | labelText="What is your quest?" 55 | name="plainTextTextFieldExample" 56 | plainText 57 | value="To seek the holy grail." 58 | /> 59 | </Flex> 60 | ``` 61 | -------------------------------------------------------------------------------- /src/elements/forms/utils/PlainText/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { removeSomeProps } from 'src/utils/componentHelpers'; 4 | import { control, spaceProps, typography } from 'src/utils/styledHelpers'; 5 | 6 | const isArrayOptionsValue = value => !!value && Array.isArray(value); 7 | const getDisplayValue = props => { 8 | const { value } = props; 9 | if (isArrayOptionsValue(value)) { 10 | return value.map(e => e.label).join(', '); 11 | } 12 | if (!!value && !!value.label) { 13 | return value.label; 14 | } if (typeof value === 'string') { 15 | return value; 16 | } 17 | return ''; 18 | }; 19 | 20 | const propsToTrim = [ 21 | 'labelText', 22 | ...Object.keys(control.propTypes), 23 | ...Object.keys(spaceProps.propTypes), 24 | ...Object.keys(typography.propTypes), 25 | 'value', 26 | ]; 27 | export const PlainTextComponent = props => { 28 | const displayString = getDisplayValue(props); 29 | return ( 30 | <div {...removeSomeProps(props, propsToTrim)}> 31 | <div>{displayString}</div> 32 | </div> 33 | ); 34 | }; 35 | 36 | PlainTextComponent.propTypes = { 37 | ...control.propTypes, 38 | ...typography.propTypes, 39 | value: PropTypes.any, 40 | }; 41 | 42 | PlainTextComponent.defaultProps = { 43 | value: null, 44 | }; 45 | -------------------------------------------------------------------------------- /src/elements/forms/utils/PlainText/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/forms/utils/PlainText/tests/PlainText.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import { ThemeProvider } from 'styled-components'; 4 | import { PlainText } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('PlainText Component base', () => { 8 | it('should return a PlainText object', () => { 9 | const component = renderer.create(<ThemeProvider theme={{}}><PlainText>Lorem Ipsum</PlainText></ThemeProvider>); 10 | const tree = component.toJSON(); 11 | expect(tree).toMatchSnapshot(); 12 | }); 13 | it('should return a PlainText object with ellipsis', () => { 14 | const component = renderer.create(<ThemeProvider theme={{}}><PlainText ellipsis>Lorem Ipsum</PlainText></ThemeProvider>); 15 | const tree = component.toJSON(); 16 | expect(tree).toMatchSnapshot(); 17 | }); 18 | it('should return a PlainText object with multi line ellipsis', () => { 19 | const component = renderer.create(<ThemeProvider theme={{}}><PlainText ellipsis={2}>Lorem Ipsum</PlainText></ThemeProvider>); 20 | const tree = component.toJSON(); 21 | expect(tree).toMatchSnapshot(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/elements/forms/utils/PlainText/tests/PlainText.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'jest-styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { ThemeProvider } from 'styled-components'; 5 | import { PlainText } from '..'; 6 | 7 | describe('PlainText using Theme color', () => { 8 | it('should return a PlainText object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | <ThemeProvider theme={theme}> 20 | <PlainText bg="grapeSoda.dark" color="grapeSoda.light">Lorem Ipsum</PlainText> 21 | </ThemeProvider> 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('PlainText using Theme Font Family', () => { 30 | it('should return a PlainText object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | <ThemeProvider theme={theme}> 38 | <PlainText fontFamily="trueSpace">Lorem Ipsum</PlainText> 39 | </ThemeProvider> 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/forms/utils/Readme.md: -------------------------------------------------------------------------------- 1 | ## [`validationError`](#/Forms/Form%20Utilities/Validation%20Error) 2 | 3 | Learn about the validationError prop, which is intended for definining inline error text. 4 | *** 5 | 6 | ## [`assistiveText`](#/Forms/Form%20Utilities/AssistiveText) 7 | 8 | Learn about the assistiveText prop, which is intended for definining inline helper text. 9 | *** 10 | 11 | ## [`<ControlGroup>`](#/Forms/Form%20Utilities/ControlGroup) 12 | 13 | Learn about the ControlGroup component, which wraps all input field form controls. 14 | *** 15 | 16 | ## [`controlLabel`](#/Forms/Form%20Utilities/ControlLabel) 17 | 18 | Learn about the controlLabel prop, which is intended for defining a control's label text. 19 | *** 20 | 21 | ## [`plainText`](#/Forms/Form%20Utilities/PlainText) 22 | 23 | Learn about the plainText prop, which allows a form control to appear as plain text. 24 | *** 25 | -------------------------------------------------------------------------------- /src/elements/forms/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './AssistiveText'; 2 | export * from './ControlGroup'; 3 | export * from './ControlLabel'; 4 | export * from './PlainText'; 5 | -------------------------------------------------------------------------------- /src/elements/grid/Box/component.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { 5 | getProgress, 6 | getProgressDefaultProps, 7 | getProgressPropTypes, 8 | } from 'src/elements/Progress'; 9 | import { Hideable } from 'src/elements/utils'; 10 | import { removeSomeProps } from 'src/utils/componentHelpers'; 11 | import { defaultFlexBoxStylesPropsToTrim } from '../utils'; 12 | 13 | export const BoxComponent = props => { 14 | const { 15 | children, 16 | progressPlacement, 17 | } = props; 18 | return ( 19 | <div {...removeSomeProps(props, defaultFlexBoxStylesPropsToTrim)}> 20 | <Hideable 21 | isHidden={ 22 | progressPlacement !== 'top' 23 | } 24 | > 25 | {getProgress(props)} 26 | </Hideable> 27 | {children} 28 | <Hideable 29 | isHidden={ 30 | progressPlacement !== 'bottom' 31 | } 32 | > 33 | {getProgress(props)} 34 | </Hideable> 35 | </div> 36 | ); 37 | }; 38 | 39 | BoxComponent.propTypes = { 40 | ...getProgressPropTypes, 41 | children: PropTypes.any, 42 | }; 43 | 44 | BoxComponent.defaultProps = { 45 | ...getProgressDefaultProps, 46 | children: null, 47 | }; 48 | -------------------------------------------------------------------------------- /src/elements/grid/Box/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/grid/Box/styled.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import styled from 'styled-components'; 3 | import { 4 | background, 5 | border, 6 | flexbox, 7 | grid, 8 | layout, 9 | position, 10 | shadow, 11 | space, 12 | system, 13 | } from 'styled-system'; 14 | import { withHideable } from 'src/elements/utils/Hideable'; 15 | import { BoxComponent } from './component'; 16 | 17 | const Box = styled(withHideable(BoxComponent))` 18 | ${system({ boxSizing: true })} 19 | ${background} 20 | ${border} 21 | ${flexbox} 22 | ${grid} 23 | ${layout} 24 | ${position} 25 | ${shadow} 26 | ${space} 27 | `; 28 | 29 | Box.propTypes = { 30 | /** Defines the boxSizing of the Box component. */ 31 | boxSizing: PropTypes.oneOfType([ 32 | PropTypes.array, 33 | PropTypes.string, 34 | ]), 35 | /** Hides component */ 36 | isHidden: PropTypes.bool, 37 | }; 38 | 39 | Box.defaultProps = { 40 | boxSizing: 'border-box', 41 | isHidden: false, 42 | }; 43 | 44 | /** @component */ 45 | export { Box }; 46 | -------------------------------------------------------------------------------- /src/elements/grid/Flex/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | getProgress, 5 | getProgressDefaultProps, 6 | getProgressPropTypes, 7 | } from 'src/elements/Progress'; 8 | import { Hideable } from 'src/elements/utils'; 9 | import { removeSomeProps } from 'src/utils/componentHelpers'; 10 | import { defaultFlexBoxStylesPropsToTrim } from '../utils'; 11 | 12 | export const FlexComponent = props => { 13 | const { children, progressPlacement } = props; 14 | return ( 15 | <div {...removeSomeProps(props, defaultFlexBoxStylesPropsToTrim)}> 16 | <Hideable 17 | isHidden={ 18 | progressPlacement !== 'top' 19 | } 20 | > 21 | {getProgress(props)} 22 | </Hideable> 23 | {children} 24 | <Hideable 25 | isHidden={ 26 | progressPlacement !== 'bottom' 27 | } 28 | > 29 | {getProgress(props)} 30 | </Hideable> 31 | </div> 32 | ); 33 | }; 34 | 35 | FlexComponent.propTypes = { 36 | ...getProgressPropTypes, 37 | children: PropTypes.any, 38 | }; 39 | 40 | FlexComponent.defaultProps = { 41 | ...getProgressDefaultProps, 42 | children: null, 43 | }; 44 | -------------------------------------------------------------------------------- /src/elements/grid/Flex/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/grid/Flex/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { 3 | background, 4 | border, 5 | flexbox, 6 | grid, 7 | layout, 8 | position, 9 | shadow, 10 | space, 11 | } from 'styled-system'; 12 | import { withHideable } from 'src/elements/utils/Hideable'; 13 | import PropTypes from 'prop-types'; 14 | import { FlexComponent } from './component'; 15 | 16 | const Flex = styled(withHideable(FlexComponent))` 17 | ${background} 18 | ${border} 19 | ${flexbox} 20 | ${grid} 21 | ${layout} 22 | ${position} 23 | ${shadow} 24 | ${space} 25 | `; 26 | 27 | Flex.propTypes = { 28 | /** Hides component */ 29 | isHidden: PropTypes.bool, 30 | }; 31 | 32 | Flex.defaultProps = { 33 | display: 'flex', 34 | isHidden: false, 35 | }; 36 | 37 | /** @component */ 38 | export { Flex }; 39 | -------------------------------------------------------------------------------- /src/elements/grid/breakpointsAndSpace.md: -------------------------------------------------------------------------------- 1 | Breakpoints and space are two keys in the theme object that are needed for styled-system to work. If you would like to override the defaults, you are able to. The breakpoints and space for `<Flex>` & `<Box>` are capable of being overridden via the `<ThemeProvider>`. Below we import the providers and define overrides for our custom theme. 2 | 3 | ```jsx in Markdown 4 | import { ThemeProvider } from 'styled-components'; 5 | import { Box, Flex } from './'; 6 | 7 | const theme = { 8 | breakpoints: [ 9 | '35em', '47em', '59em', 10 | ], 11 | space: [2, 7, 8, 18, 27, 39], 12 | }; 13 | 14 | <ThemeProvider theme={theme}> 15 | <Flex flexDirection={['column', null, 'row']}> 16 | <Box m={[1, 2, 3, 4]}> 17 | Margin is 7px at 0 - 35em, 8px at 35em - 47em, 18px at 47em - 59em, 27px at 59em+. 18 | </Box> 19 | <Box m={[2, 3, 4]}> 20 | Margin is 8px at 0 - 35em, 18px at 35em - 47em, 27px at 47em+. 21 | </Box> 22 | <Box m={[3, null, 4]}> 23 | Margin is 18px at 0 - 47em, and 27px at 47em+. 24 | </Box> 25 | <Box m={4}> 26 | Margin is 27px at all resolutions. 27 | </Box> 28 | </Flex> 29 | </ThemeProvider> 30 | ``` 31 | 32 | [Additional reading on styled-system theme keys can be found here](https://styled-system.com/theme-specification#keys). 33 | -------------------------------------------------------------------------------- /src/elements/grid/components.md: -------------------------------------------------------------------------------- 1 | ## [`<Box>`](#/Flexbox/Components/Box) 2 | 3 | Learn about the child component in flexbox, including its variants and how `<Box>` works in a flexbox frid. 4 | *** 5 | 6 | ## [`<Flex>`](#/Flexbox/Components/Flex) 7 | 8 | Learn about the parent component in flexbox, including its variants and how `<Flex>` works in a flexbox frid. 9 | *** 10 | -------------------------------------------------------------------------------- /src/elements/grid/examples/amos-bar-zeev-GibvqWh_OcE-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/src/elements/grid/examples/amos-bar-zeev-GibvqWh_OcE-unsplash.jpg -------------------------------------------------------------------------------- /src/elements/grid/examples/karly-jones-6aRIh3j_F4I-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/src/elements/grid/examples/karly-jones-6aRIh3j_F4I-unsplash.jpg -------------------------------------------------------------------------------- /src/elements/grid/index.js: -------------------------------------------------------------------------------- 1 | 2 | export * from './Box'; 3 | export * from './Flex'; 4 | -------------------------------------------------------------------------------- /src/elements/grid/utils/index.js: -------------------------------------------------------------------------------- 1 | import propTypes from '@styled-system/prop-types'; 2 | import { getProgressPropTypes } from 'src/elements/Progress'; 3 | 4 | export const defaultFlexBoxStylesPropsToTrim = [ 5 | ...Object.keys(propTypes.background), 6 | ...Object.keys(propTypes.border), 7 | ...Object.keys(propTypes.flexbox), 8 | ...Object.keys(propTypes.grid), 9 | ...Object.keys(propTypes.layout), 10 | ...Object.keys(propTypes.position), 11 | ...Object.keys(propTypes.shadow), 12 | ...Object.keys(propTypes.space), 13 | ...Object.keys(getProgressPropTypes), 14 | 'boxSizing', 15 | ]; 16 | -------------------------------------------------------------------------------- /src/elements/typography/Header/index.js: -------------------------------------------------------------------------------- 1 | export * from './styled'; 2 | -------------------------------------------------------------------------------- /src/elements/typography/Link/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { removeSomeProps } from 'src/utils/componentHelpers'; 4 | import { Link as ReactRouterLink } from 'react-router-dom'; 5 | import { spaceProps, typography } from 'src/utils/styledHelpers'; 6 | import { emailHrefString } from './utils'; 7 | 8 | export const LinkComponent = ({ 9 | children, 10 | emailHref, 11 | to, 12 | ...props 13 | }) => { 14 | const trimmedProps = removeSomeProps(props, Object.keys({ ...spaceProps.propTypes, ...typography.propTypes })); 15 | const emailLinkHref = emailHrefString(emailHref); 16 | if (to) { 17 | const linkProps = { 18 | to, 19 | ...trimmedProps, 20 | }; 21 | return ( 22 | <ReactRouterLink {...linkProps}> 23 | {children} 24 | </ReactRouterLink> 25 | ); 26 | } 27 | if (emailLinkHref) { 28 | return ( 29 | <a href={emailLinkHref} {...trimmedProps}> 30 | {children} 31 | </a> 32 | ); 33 | } 34 | return ( 35 | <a {...trimmedProps}> 36 | {children} 37 | </a> 38 | ); 39 | }; 40 | 41 | LinkComponent.propTypes = { 42 | children: PropTypes.any.isRequired, 43 | emailHref: PropTypes.shape({ 44 | bcc: PropTypes.string, 45 | body: PropTypes.string, 46 | cc: PropTypes.string, 47 | subject: PropTypes.string, 48 | to: PropTypes.string, 49 | }), 50 | to: PropTypes.string, 51 | }; 52 | 53 | LinkComponent.defaultProps = { 54 | emailHref: {}, 55 | to: '', 56 | }; 57 | -------------------------------------------------------------------------------- /src/elements/typography/Link/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/typography/Link/tests/Link.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { Link } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('Link using Theme color', () => { 8 | it('should return a Link object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | <ThemeProvider theme={theme}> 20 | <Link bg="grapeSoda.dark" color="grapeSoda.light">Lorem Ipsum</Link> 21 | </ThemeProvider> 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('Link using Theme Font Family', () => { 30 | it('should return a Link object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | <ThemeProvider theme={theme}> 38 | <Link fontFamily="trueSpace">Lorem Ipsum</Link> 39 | </ThemeProvider> 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/typography/Link/utils.js: -------------------------------------------------------------------------------- 1 | export function emailHrefString(props) { 2 | const otherProps = { 3 | bcc: props.bcc, 4 | body: props.body, 5 | cc: props.cc, 6 | subject: props.subject, 7 | }; 8 | const trimmedProps = Object.keys(otherProps).filter(key => !!props[key]).map(key => encodeURI(`${key}=${props[key]}`)).join('&'); 9 | return `${props.to || trimmedProps ? 'mailto:' : ''}${props.to || ''}${trimmedProps ? `?${trimmedProps}` : ''}`; 10 | } 11 | -------------------------------------------------------------------------------- /src/elements/typography/List/index.js: -------------------------------------------------------------------------------- 1 | export * from './styled'; 2 | -------------------------------------------------------------------------------- /src/elements/typography/List/tests/List.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { List } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('List using Theme color', () => { 8 | it('should return a List object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | <ThemeProvider theme={theme}> 20 | <List bg="grapeSoda.dark" color="grapeSoda.light">Lorem Ipsum</List> 21 | </ThemeProvider> 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('List using Theme Font Family', () => { 30 | it('should return a List object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | <ThemeProvider theme={theme}> 38 | <List fontFamily="trueSpace">Lorem Ipsum</List> 39 | </ThemeProvider> 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/typography/List/tests/__snapshots__/List.theme.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`List using Theme Font Family should return a List object with a custom font family 1`] = ` 4 | .c0 { 5 | background-color: transparent; 6 | color: inherit; 7 | font-family: "DejaVu Sans Mono","Bitstream Vera Sans Mono",Courier; 8 | font-size: inherit; 9 | font-weight: inherit; 10 | -webkit-letter-spacing: inherit; 11 | -moz-letter-spacing: inherit; 12 | -ms-letter-spacing: inherit; 13 | letter-spacing: inherit; 14 | line-height: 1.5; 15 | text-align: inherit; 16 | -webkit-text-decoration: inherit; 17 | text-decoration: inherit; 18 | margin: 0 0 1rem; 19 | padding-left: 2.5rem; 20 | } 21 | 22 | <ul 23 | className="c0" 24 | > 25 | Lorem Ipsum 26 | </ul> 27 | `; 28 | 29 | exports[`List using Theme color should return a List object with custom color 1`] = ` 30 | .c0 { 31 | background-color: hsl(305,33.9%,23.7%); 32 | color: hsl(313,67.8%,47.5%); 33 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 34 | font-size: inherit; 35 | font-weight: inherit; 36 | -webkit-letter-spacing: inherit; 37 | -moz-letter-spacing: inherit; 38 | -ms-letter-spacing: inherit; 39 | letter-spacing: inherit; 40 | line-height: 1.5; 41 | text-align: inherit; 42 | -webkit-text-decoration: inherit; 43 | text-decoration: inherit; 44 | margin: 0 0 1rem; 45 | padding-left: 2.5rem; 46 | } 47 | 48 | <ul 49 | className="c0" 50 | > 51 | Lorem Ipsum 52 | </ul> 53 | `; 54 | -------------------------------------------------------------------------------- /src/elements/typography/ListItem/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { spaceProps, typography } from 'src/utils/styledHelpers'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | 6 | const propsToTrim = { 7 | ...spaceProps.propTypes, 8 | ...typography.propTypes, 9 | }; 10 | export const ListItemComponent = ({ children, ...props }) => ( 11 | <li {...removeSomeProps(props, Object.keys(propsToTrim))}> 12 | {children} 13 | </li> 14 | ); 15 | ListItemComponent.propTypes = { 16 | children: PropTypes.any.isRequired, 17 | }; 18 | -------------------------------------------------------------------------------- /src/elements/typography/ListItem/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/typography/ListItem/styled.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import styled from 'styled-components'; 3 | import { getGlobalStyles } from 'src/global-styles'; 4 | import { fontWeight, space } from 'styled-system'; 5 | import { 6 | colorCore, 7 | defaultStylesBase, 8 | ellipsisCore, 9 | fontFamilyCore, 10 | fontSizeCore, 11 | fontStyleCore, 12 | letterSpacingCore, 13 | lineHeightCore, 14 | scaleFont, 15 | textAlignCore, 16 | textDecorationCore, 17 | typography, 18 | } from 'src/utils/styledHelpers'; 19 | import { withHideable } from 'src/elements/utils/Hideable'; 20 | import { ListItemComponent } from './component'; 21 | 22 | const { grid: { gutter } } = getGlobalStyles(); 23 | 24 | const ListItem = styled(withHideable(ListItemComponent))` 25 | ${colorCore} 26 | ${ellipsisCore} 27 | ${fontFamilyCore} 28 | ${fontSizeCore} 29 | ${fontWeight} 30 | ${letterSpacingCore} 31 | ${lineHeightCore} 32 | ${fontStyleCore} 33 | ${space} 34 | ${textAlignCore} 35 | ${textDecorationCore} 36 | `; 37 | 38 | ListItem.propTypes = { 39 | ...typography.propTypes, 40 | /** Hides component */ 41 | isHidden: PropTypes.bool, 42 | }; 43 | 44 | ListItem.defaultProps = { 45 | ...defaultStylesBase, 46 | isHidden: false, 47 | mb: scaleFont(gutter, 0.25), 48 | }; 49 | 50 | /** @component */ 51 | export { ListItem }; 52 | -------------------------------------------------------------------------------- /src/elements/typography/ListItem/tests/ListItem.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { ListItem } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('ListItem using Theme color', () => { 8 | it('should return a ListItem object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | <ThemeProvider theme={theme}> 20 | <ListItem bg="grapeSoda.dark" color="grapeSoda.light">Lorem Ipsum</ListItem> 21 | </ThemeProvider> 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('ListItem using Theme Font Family', () => { 30 | it('should return a ListItem object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | <ThemeProvider theme={theme}> 38 | <ListItem fontFamily="trueSpace">Lorem Ipsum</ListItem> 39 | </ThemeProvider> 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/typography/ListItem/tests/__snapshots__/ListItem.theme.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`ListItem using Theme Font Family should return a ListItem object with a custom font family 1`] = ` 4 | .c0 { 5 | background-color: transparent; 6 | color: inherit; 7 | font-family: "DejaVu Sans Mono","Bitstream Vera Sans Mono",Courier; 8 | font-size: inherit; 9 | font-weight: inherit; 10 | -webkit-letter-spacing: inherit; 11 | -moz-letter-spacing: inherit; 12 | -ms-letter-spacing: inherit; 13 | letter-spacing: inherit; 14 | line-height: 1.5; 15 | margin-bottom: 0.25rem; 16 | text-align: inherit; 17 | -webkit-text-decoration: inherit; 18 | text-decoration: inherit; 19 | } 20 | 21 | <li 22 | className="c0" 23 | > 24 | Lorem Ipsum 25 | </li> 26 | `; 27 | 28 | exports[`ListItem using Theme color should return a ListItem object with custom color 1`] = ` 29 | .c0 { 30 | background-color: hsl(305,33.9%,23.7%); 31 | color: hsl(313,67.8%,47.5%); 32 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 33 | font-size: inherit; 34 | font-weight: inherit; 35 | -webkit-letter-spacing: inherit; 36 | -moz-letter-spacing: inherit; 37 | -ms-letter-spacing: inherit; 38 | letter-spacing: inherit; 39 | line-height: 1.5; 40 | margin-bottom: 0.25rem; 41 | text-align: inherit; 42 | -webkit-text-decoration: inherit; 43 | text-decoration: inherit; 44 | } 45 | 46 | <li 47 | className="c0" 48 | > 49 | Lorem Ipsum 50 | </li> 51 | `; 52 | -------------------------------------------------------------------------------- /src/elements/typography/Paragraph/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { spaceProps, typography } from 'src/utils/styledHelpers'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | 6 | const propsToTrim = { 7 | lead: '', 8 | ...spaceProps.propTypes, 9 | ...typography.propTypes, 10 | }; 11 | export const ParagraphComponent = ({ children, ...props }) => ( 12 | <p {...removeSomeProps(props, Object.keys(propsToTrim))}> 13 | {children} 14 | </p> 15 | ); 16 | ParagraphComponent.propTypes = { 17 | children: PropTypes.any.isRequired, 18 | lead: PropTypes.bool, 19 | }; 20 | 21 | ParagraphComponent.defaultProps = { 22 | lead: false, 23 | }; 24 | -------------------------------------------------------------------------------- /src/elements/typography/Paragraph/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/typography/Paragraph/tests/Paragraph.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { Paragraph } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('Paragraph using Theme color', () => { 8 | it('should return a Paragraph object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | <ThemeProvider theme={theme}> 20 | <Paragraph bg="grapeSoda.dark" color="grapeSoda.light">Lorem Ipsum</Paragraph> 21 | </ThemeProvider> 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('Paragraph using Theme Font Family', () => { 30 | it('should return a Paragraph object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | <ThemeProvider theme={theme}> 38 | <Paragraph fontFamily="trueSpace">Lorem Ipsum</Paragraph> 39 | </ThemeProvider> 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/typography/Paragraph/tests/__snapshots__/Paragraph.theme.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Paragraph using Theme Font Family should return a Paragraph object with a custom font family 1`] = ` 4 | .c0 { 5 | background-color: transparent; 6 | color: inherit; 7 | font-family: "DejaVu Sans Mono","Bitstream Vera Sans Mono",Courier; 8 | font-size: inherit; 9 | font-weight: inherit; 10 | -webkit-letter-spacing: inherit; 11 | -moz-letter-spacing: inherit; 12 | -ms-letter-spacing: inherit; 13 | letter-spacing: inherit; 14 | line-height: 1.5; 15 | text-align: inherit; 16 | -webkit-text-decoration: inherit; 17 | text-decoration: inherit; 18 | margin-bottom: 1rem; 19 | margin-top: 0; 20 | } 21 | 22 | <p 23 | className="c0" 24 | > 25 | Lorem Ipsum 26 | </p> 27 | `; 28 | 29 | exports[`Paragraph using Theme color should return a Paragraph object with custom color 1`] = ` 30 | .c0 { 31 | background-color: hsl(305,33.9%,23.7%); 32 | color: hsl(313,67.8%,47.5%); 33 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 34 | font-size: inherit; 35 | font-weight: inherit; 36 | -webkit-letter-spacing: inherit; 37 | -moz-letter-spacing: inherit; 38 | -ms-letter-spacing: inherit; 39 | letter-spacing: inherit; 40 | line-height: 1.5; 41 | text-align: inherit; 42 | -webkit-text-decoration: inherit; 43 | text-decoration: inherit; 44 | margin-bottom: 1rem; 45 | margin-top: 0; 46 | } 47 | 48 | <p 49 | className="c0" 50 | > 51 | Lorem Ipsum 52 | </p> 53 | `; 54 | -------------------------------------------------------------------------------- /src/elements/typography/Text/Readme.md: -------------------------------------------------------------------------------- 1 | There are times when inline text needs the a different font property. All of the base styles can be applied to `<Text>`, which can be utilized nested inside any typography element. 2 | 3 | ```jsx inside Markdown 4 | import { Code, Paragraph } from 'src/elements/typography'; 5 | 6 | <Paragraph> 7 | If I want to highlight an individual word 8 | <Text color="red">red</Text> 9 | , or make it 10 | <Text fontWeight="bold">bold</Text> 11 | , or 12 | <Text color="red" fontWeight="bold">both</Text> 13 | {', I can just use the inline '} 14 | <Code code="<Text>" /> 15 | {' element.'} 16 | </Paragraph> 17 | ``` 18 | 19 | #### Hide Text 20 | 21 | ```jsx inside Markdown 22 | import { useState } from 'react'; 23 | import { ThemeProvider } from 'styled-components'; 24 | import { Button } from 'src/elements/Button'; 25 | import { Paragraph } from 'src/elements/typography'; 26 | 27 | const [hide, setHidden] = useState(false); 28 | <ThemeProvider theme={{}}> 29 | <Button 30 | onClick={() => setHidden(!hide)} 31 | > 32 | Toggle Visibility 33 | </Button> 34 | <Paragraph> 35 | <Text isHidden={hide}> 36 | This text is hideable. 37 | </Text> 38 | </Paragraph> 39 | </ThemeProvider> 40 | ``` 41 | -------------------------------------------------------------------------------- /src/elements/typography/Text/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { spaceProps, typography } from 'src/utils/styledHelpers'; 4 | import { removeSomeProps } from 'src/utils/componentHelpers'; 5 | 6 | const propsToTrim = { 7 | ...spaceProps.propTypes, 8 | ...typography.propTypes, 9 | }; 10 | 11 | export const TextComponent = ({ children, ...props }) => ( 12 | <span {...removeSomeProps(props, Object.keys(propsToTrim))}> 13 | {children} 14 | </span> 15 | ); 16 | 17 | TextComponent.propTypes = { 18 | children: PropTypes.any.isRequired, 19 | }; 20 | -------------------------------------------------------------------------------- /src/elements/typography/Text/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/typography/Text/styled.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import styled from 'styled-components'; 3 | import { fontWeight, space } from 'styled-system'; 4 | import { 5 | colorCore, 6 | defaultStylesBase, 7 | ellipsisCore, 8 | fontFamilyCore, 9 | fontSizeCore, 10 | fontStyleCore, 11 | letterSpacingCore, 12 | lineHeightCore, 13 | textAlignCore, 14 | textDecorationCore, 15 | typography, 16 | } from 'src/utils/styledHelpers'; 17 | import { withHideable } from 'src/elements/utils/Hideable'; 18 | import { TextComponent } from './component'; 19 | 20 | const Text = styled(withHideable(TextComponent))` 21 | ${colorCore} 22 | ${ellipsisCore} 23 | ${fontFamilyCore} 24 | ${fontSizeCore} 25 | ${fontStyleCore} 26 | ${fontWeight} 27 | ${letterSpacingCore} 28 | ${lineHeightCore} 29 | ${textAlignCore} 30 | ${textDecorationCore} 31 | ${space} 32 | `; 33 | 34 | Text.propTypes = { 35 | ...typography.propTypes, 36 | /** Hides component */ 37 | isHidden: PropTypes.bool, 38 | }; 39 | 40 | Text.defaultProps = { 41 | ...defaultStylesBase, 42 | isHidden: false, 43 | }; 44 | 45 | /** @component */ 46 | export { Text }; 47 | -------------------------------------------------------------------------------- /src/elements/typography/Text/tests/Text.theme.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import renderer from 'react-test-renderer'; 4 | import { Text } from '..'; 5 | import 'jest-styled-components'; 6 | 7 | describe('Text using Theme color', () => { 8 | it('should return a Text object with custom color', () => { 9 | const theme = { 10 | colors: { 11 | grapeSoda: { 12 | base: 'hsl(325, 84.6%, 28%)', 13 | dark: 'hsl(305, 33.9%, 23.7%)', 14 | light: 'hsl(313, 67.8%, 47.5%)', 15 | }, 16 | }, 17 | }; 18 | const element = ( 19 | <ThemeProvider theme={theme}> 20 | <Text bg="grapeSoda.dark" color="grapeSoda.light">Lorem Ipsum</Text> 21 | </ThemeProvider> 22 | ); 23 | const component = renderer.create(element); 24 | const tree = component.toJSON(); 25 | expect(tree).toMatchSnapshot(); 26 | }); 27 | }); 28 | 29 | describe('Text using Theme Font Family', () => { 30 | it('should return a Text object with a custom font family', () => { 31 | const theme = { 32 | fonts: { 33 | trueSpace: '"DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier', 34 | }, 35 | }; 36 | const element = ( 37 | <ThemeProvider theme={theme}> 38 | <Text fontFamily="trueSpace">Lorem Ipsum</Text> 39 | </ThemeProvider> 40 | ); 41 | const component = renderer.create(element); 42 | const tree = component.toJSON(); 43 | expect(tree).toMatchSnapshot(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/elements/typography/Text/tests/__snapshots__/Text.theme.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Text using Theme Font Family should return a Text object with a custom font family 1`] = ` 4 | .c0 { 5 | background-color: transparent; 6 | color: inherit; 7 | font-family: "DejaVu Sans Mono","Bitstream Vera Sans Mono",Courier; 8 | font-size: inherit; 9 | font-weight: inherit; 10 | -webkit-letter-spacing: inherit; 11 | -moz-letter-spacing: inherit; 12 | -ms-letter-spacing: inherit; 13 | letter-spacing: inherit; 14 | line-height: 1.5; 15 | text-align: inherit; 16 | -webkit-text-decoration: inherit; 17 | text-decoration: inherit; 18 | } 19 | 20 | <span 21 | className="c0" 22 | > 23 | Lorem Ipsum 24 | </span> 25 | `; 26 | 27 | exports[`Text using Theme color should return a Text object with custom color 1`] = ` 28 | .c0 { 29 | background-color: hsl(305,33.9%,23.7%); 30 | color: hsl(313,67.8%,47.5%); 31 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 32 | font-size: inherit; 33 | font-weight: inherit; 34 | -webkit-letter-spacing: inherit; 35 | -moz-letter-spacing: inherit; 36 | -ms-letter-spacing: inherit; 37 | letter-spacing: inherit; 38 | line-height: 1.5; 39 | text-align: inherit; 40 | -webkit-text-decoration: inherit; 41 | text-decoration: inherit; 42 | } 43 | 44 | <span 45 | className="c0" 46 | > 47 | Lorem Ipsum 48 | </span> 49 | `; 50 | -------------------------------------------------------------------------------- /src/elements/typography/codeElements/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import reactElementToJSXString from 'react-element-to-jsx-string'; 4 | import SyntaxHighlighter from 'react-syntax-highlighter'; 5 | import { removeSomeProps } from 'src/utils/componentHelpers'; 6 | import { codePropTypes, grapeUICustomStyle } from './utils'; 7 | 8 | const getCode = props => { 9 | const { 10 | code, 11 | codeOptions, 12 | } = props; 13 | if (React.isValidElement(code)) { 14 | return reactElementToJSXString(code, codeOptions); 15 | } 16 | return code; 17 | }; 18 | 19 | export const CodeComponent = ({ 20 | language, 21 | style, 22 | ...props 23 | }) => ( 24 | <SyntaxHighlighter 25 | language={language} 26 | style={style} 27 | {...removeSomeProps(props, Object.keys(codePropTypes))} 28 | > 29 | {getCode(props)} 30 | </SyntaxHighlighter> 31 | ); 32 | 33 | CodeComponent.propTypes = { 34 | language: PropTypes.string, 35 | style: PropTypes.any, 36 | }; 37 | 38 | CodeComponent.defaultProps = { 39 | language: 'javascript', 40 | style: grapeUICustomStyle, 41 | }; 42 | -------------------------------------------------------------------------------- /src/elements/typography/codeElements/index.js: -------------------------------------------------------------------------------- 1 | export * from './component'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /src/elements/typography/codeElements/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { 3 | background, 4 | border, 5 | fontWeight, 6 | layout, 7 | space, 8 | } from 'styled-system'; 9 | import { withHideable } from 'src/elements/utils/Hideable'; 10 | import { 11 | colorCore, 12 | ellipsisCore, 13 | fontFamilyCore, 14 | fontSizeCore, 15 | fontStyleCore, 16 | letterSpacingCore, 17 | lineHeightCore, 18 | textAlignCore, 19 | textDecorationCore, 20 | } from 'src/utils/styledHelpers'; 21 | import { CodeComponent } from './component'; 22 | import { codeDefaultProps, codePropTypes } from './utils'; 23 | 24 | const Code = styled(withHideable(CodeComponent))` 25 | ${background} 26 | ${border} 27 | ${colorCore} 28 | ${ellipsisCore} 29 | ${fontSizeCore} 30 | ${fontStyleCore} 31 | ${fontWeight} 32 | ${layout} 33 | ${letterSpacingCore} 34 | ${lineHeightCore} 35 | ${space} 36 | ${textAlignCore} 37 | ${textDecorationCore} 38 | > code { 39 | ${fontFamilyCore} 40 | } 41 | `; 42 | 43 | Code.propTypes = { 44 | ...codePropTypes, 45 | }; 46 | 47 | Code.defaultProps = { 48 | ...codeDefaultProps, 49 | }; 50 | 51 | const CodeBlock = styled(withHideable(Code))``; 52 | 53 | CodeBlock.propTypes = { 54 | ...codePropTypes, 55 | }; 56 | 57 | CodeBlock.defaultProps = { 58 | ...codeDefaultProps, 59 | display: 'block', 60 | my: [1, null, 2], 61 | overflowX: 'auto', 62 | p: [1, 2, 3], 63 | }; 64 | 65 | /** @component */ 66 | export { Code, CodeBlock }; 67 | -------------------------------------------------------------------------------- /src/elements/typography/codeElements/tests/CodeBlock.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import 'jest-styled-components'; 4 | import { ThemeProvider } from 'styled-components'; 5 | import { Code } from 'src/elements/typography'; 6 | 7 | const emptyTheme = {}; 8 | 9 | const assertReactElement = element => { 10 | const component = renderer.create(element); 11 | return component.toJSON(); 12 | }; 13 | 14 | describe('Code Component base', () => { 15 | it('should return an empty Code with base styling', () => { 16 | const element = ( 17 | <ThemeProvider theme={emptyTheme}> 18 | <Code code={'<Code code="" />'} /> 19 | </ThemeProvider> 20 | ); 21 | expect(assertReactElement(element)).toMatchSnapshot(); 22 | }); 23 | it('should return an empty Code with a valid JSX element', () => { 24 | const element = ( 25 | <ThemeProvider theme={emptyTheme}> 26 | <Code code={<Code code={'<Code code="" />'} />} /> 27 | </ThemeProvider> 28 | ); 29 | expect(assertReactElement(element)).toMatchSnapshot(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/elements/typography/codeElements/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './props'; 2 | export * from './styles'; 3 | -------------------------------------------------------------------------------- /src/elements/typography/codeElements/utils/props.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import propTypes from '@styled-system/prop-types'; 3 | import { defaultStylesBase, typography } from 'src/utils/styledHelpers'; 4 | 5 | export const codePropTypes = { 6 | ...typography.propTypes, 7 | ...propTypes.background, 8 | ...propTypes.border, 9 | ...propTypes.color, 10 | ...propTypes.flexbox, 11 | ...propTypes.layout, 12 | ...propTypes.position, 13 | ...propTypes.shadow, 14 | ...propTypes.space, 15 | code: PropTypes.any, 16 | codeOptions: PropTypes.object, 17 | isHidden: PropTypes.bool, 18 | }; 19 | 20 | export const codeDefaultProps = { 21 | ...defaultStylesBase, 22 | background: 'whitesmoke', 23 | border: '1px solid #eee', 24 | borderRadius: 4, 25 | code: '', 26 | codeOptions: { 27 | showDefaultProps: false, 28 | }, 29 | color: 'inherit', 30 | display: 'inline-block', 31 | fontFamily: 'monospace', 32 | fontSize: '80%', 33 | isHidden: false, 34 | my: 0, 35 | p: 1, 36 | }; 37 | -------------------------------------------------------------------------------- /src/elements/typography/components.md: -------------------------------------------------------------------------------- 1 | ## [`<Code>`](#/Typography/Components/Code) 2 | 3 | Learn about our Code and CodeBlock components, built upon [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter). 4 | *** 5 | 6 | ## [`<Header>`](#/Typography/Components/Header) 7 | 8 | Learn about our header title components, including display headers and style overrides for it. 9 | *** 10 | 11 | ## [`<Link>`](#/Typography/Components/Link) 12 | 13 | Learn about link components, including how it can be used with [react-router](https://reacttraining.com/react-router/). 14 | *** 15 | 16 | ## [`<List>`](#/Typography/Components/List) 17 | 18 | Learn about list and listitem components, including how it can be used as an ordered list and style variations. 19 | *** 20 | 21 | ## [`<Paragraph>`](#/Typography/Components/Paragraph) 22 | 23 | Learn about paragraph components, including lead paragraphs. 24 | *** 25 | 26 | ## [`<Text>`](#/Typography/Components/Text) 27 | 28 | Learn about inline text components, including inline styling. 29 | *** 30 | -------------------------------------------------------------------------------- /src/elements/typography/fontSizes.md: -------------------------------------------------------------------------------- 1 | To update font sizes, you can try adding `lg` for large text and `sm` for small text. 2 | 3 | ```jsx in Markdown 4 | import { 5 | Header, 6 | Paragraph, 7 | } from './'; 8 | 9 | <div> 10 | <Paragraph lg> 11 | This paragraph is large. 12 | </Paragraph> 13 | <Paragraph> 14 | This paragraph is normal. 15 | </Paragraph> 16 | <Paragraph sm> 17 | This paragraph is small. 18 | </Paragraph> 19 | <Header.h5 lg> 20 | This Header.h5 is large. 21 | </Header.h5> 22 | <Header.h5> 23 | This Header.h5 is normal. 24 | </Header.h5> 25 | <Header.h5 sm> 26 | This Header.h5 is small. 27 | </Header.h5> 28 | <Header.h5 29 | displayHeader 30 | lg 31 | > 32 | This Display Header.h5 is large. 33 | </Header.h5> 34 | <Header.h5 35 | displayHeader 36 | > 37 | This Display Header.h5 is normal. 38 | </Header.h5> 39 | <Header.h5 40 | displayHeader 41 | sm 42 | > 43 | This Display Header.h5 is small. 44 | </Header.h5> 45 | </div> 46 | ``` 47 | -------------------------------------------------------------------------------- /src/elements/typography/index.js: -------------------------------------------------------------------------------- 1 | export * from './codeElements'; 2 | export * from './Header'; 3 | export * from './List'; 4 | export * from './ListItem'; 5 | export * from './Paragraph'; 6 | export * from './Text'; 7 | export * from './Link'; 8 | -------------------------------------------------------------------------------- /src/elements/utils/Hideable/Readme.md: -------------------------------------------------------------------------------- 1 | The `<Hideable>` component is a utility component to allow developers to not return DOM elements based on a bool. 2 | 3 | ```jsx in Markdown 4 | <div>View the code to see the hidden component.</div> 5 | <br /> 6 | <Hideable isHidden={true}>I am hidden!</Hideable> 7 | <Hideable isHidden={false}>I am not hidden!</Hideable> 8 | ``` 9 | 10 | The `withHideable` function allows developers to wrap a `<Hideable>` around a custom component. This will allow the `isHidden` prop to be active for that component. 11 | 12 | ```jsx in Markdown 13 | import styled from 'styled-components'; 14 | import { withHideable } from './'; 15 | 16 | const CustomDiv = styled(withHideable('div'))``; 17 | 18 | <div> 19 | <CustomDiv isHidden={true}>I am hidden!</CustomDiv> 20 | <CustomDiv isHidden={false}>I am not hidden!</CustomDiv> 21 | </div> 22 | ``` 23 | -------------------------------------------------------------------------------- /src/elements/utils/Hideable/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const Hideable = props => { 5 | const { isHidden, children } = props; 6 | if (isHidden) { 7 | return null; 8 | } 9 | return ( 10 | <> 11 | {children} 12 | </> 13 | ); 14 | }; 15 | 16 | Hideable.propTypes = { 17 | children: PropTypes.any, 18 | /** Use this prop to pass in a boolean statement. */ 19 | isHidden: PropTypes.bool, 20 | }; 21 | 22 | Hideable.defaultProps = { 23 | children: undefined, 24 | isHidden: false, 25 | }; 26 | 27 | /** 28 | * Decorator to compose a Child (target) component within Hideable. 29 | * @param {object} Child The target or child component to be composed within Hideable. The hide attribute is used to hide the Child. 30 | * @return {object} Returns the decorated object; The Child component is now composed within a Hideable. 31 | */ 32 | 33 | const withHideable = Child => { 34 | function HideableComponent(props) { 35 | const { isHidden, ...otherProps } = props; 36 | return (<Hideable isHidden={isHidden}><Child {...otherProps} /></Hideable>); 37 | } 38 | HideableComponent.propTypes = { 39 | isHidden: PropTypes.bool, 40 | }; 41 | HideableComponent.defaultProps = { 42 | isHidden: false, 43 | }; 44 | return HideableComponent; 45 | }; 46 | 47 | export { Hideable, withHideable }; 48 | -------------------------------------------------------------------------------- /src/elements/utils/components.md: -------------------------------------------------------------------------------- 1 | ## [`<Hideable>`](#/Utilities/Hideable) 2 | 3 | Quick component to hide things. 4 | *** 5 | -------------------------------------------------------------------------------- /src/elements/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './Hideable'; 2 | -------------------------------------------------------------------------------- /src/elements/utils/tests/__snapshots__/Hideable.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Table - basic rendering should not have rendered children when hide is true 1`] = `<div />`; 4 | 5 | exports[`Table - basic rendering should not return any markup if no children 1`] = `<div />`; 6 | 7 | exports[`Table - basic rendering should render children when hide is false 1`] = ` 8 | <div> 9 | <div> 10 | innerText 11 | </div> 12 | </div> 13 | `; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import * as styledComponents from 'styled-components'; 2 | import { Button } from './elements/Button'; 3 | import { Card } from './elements/Card'; 4 | import { 5 | CheckboxField, 6 | DateField, 7 | Form, 8 | SelectField, 9 | TextField, 10 | } from './elements/forms'; 11 | import { Box, Flex } from './elements/grid'; 12 | import { Image } from './elements/Image'; 13 | import { Progress } from './elements/Progress'; 14 | import { Table } from './elements/Table'; 15 | import { Toolbar } from './elements/Toolbar'; 16 | import { 17 | Code, 18 | CodeBlock, 19 | Header, 20 | Link, 21 | List, 22 | ListItem, 23 | Paragraph, 24 | Text, 25 | } from './elements/typography'; 26 | import { Hideable, withHideable } from './elements/utils'; 27 | import { getGlobalStyles, getGlobalOverrides } from './global-styles'; 28 | import * as styledHelpers from './utils/styledHelpers'; 29 | 30 | export { 31 | Box, 32 | Button, 33 | Card, 34 | CheckboxField, 35 | Code, 36 | CodeBlock, 37 | DateField, 38 | Flex, 39 | Form, 40 | getGlobalOverrides, 41 | getGlobalStyles, 42 | Header, 43 | Hideable, 44 | Image, 45 | Link, 46 | List, 47 | ListItem, 48 | Paragraph, 49 | Progress, 50 | SelectField, 51 | styledComponents, 52 | styledHelpers, 53 | Table, 54 | Text, 55 | TextField, 56 | Toolbar, 57 | withHideable, 58 | }; 59 | -------------------------------------------------------------------------------- /src/internals/mocks/cssModule.js: -------------------------------------------------------------------------------- 1 | module.exports = 'CSS_MODULE'; 2 | -------------------------------------------------------------------------------- /src/internals/testing/test-bundler.js: -------------------------------------------------------------------------------- 1 | // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill 2 | import "core-js/stable"; 3 | import "regenerator-runtime/runtime"; 4 | -------------------------------------------------------------------------------- /src/internals/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | module.exports = { 3 | entry: path.join(process.cwd(), 'src/index.js'), 4 | output: { 5 | filename: 'bundle.js', 6 | path: path.resolve(process.cwd(), 'dist'), 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.jsx?$/, 12 | exclude: /node_modules/, 13 | use: { 14 | loader: 'babel-loader', 15 | options: { 16 | presets: ['@babel/preset-react', '@babel/preset-env'] 17 | } 18 | } 19 | }, 20 | { 21 | test: /\.css$/, 22 | use: ['style-loader', 'css-loader'] 23 | }, 24 | { 25 | test: /\.(png|svg|jpg|gif)$/, 26 | loader: 'file-loader', 27 | query: { 28 | name: 'static/media/[name].[hash:8].[ext]', 29 | }, 30 | }, 31 | ] 32 | }, 33 | resolve: { 34 | modules: ['node_modules'], 35 | alias: { 36 | src: path.join(process.cwd(), 'src') 37 | } 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /src/internals/webpack/webpack.config.test.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | module.exports = { 3 | entry: path.join(process.cwd(), 'src/index.js'), 4 | output: { 5 | filename: 'bundle.js', 6 | path: path.resolve(process.cwd(), 'dist'), 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.css$/i, 12 | use: ['style-loader', 'css-loader'], 13 | }, 14 | { 15 | test: /\.js$/, // Transform all .js files required somewhere with Babel 16 | exclude: /node_modules/, 17 | use: { 18 | loader: 'babel-loader', 19 | }, 20 | }, 21 | ] 22 | }, 23 | plugins: [], 24 | resolve: { 25 | modules: ['node_modules'], 26 | alias: { 27 | src: path.join(process.cwd(), 'src') 28 | } 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/utils/componentHelpers/componentHelpers.js: -------------------------------------------------------------------------------- 1 | import except from 'except'; 2 | 3 | const removeSomeProps = (originalProps, toBeRemovedProps) => except(originalProps, toBeRemovedProps); 4 | 5 | const passThrough = (component, props) => { 6 | const omit = Object.keys(component.propTypes || {}); 7 | return except(props, omit); 8 | }; 9 | 10 | export { 11 | passThrough, 12 | removeSomeProps, 13 | }; 14 | -------------------------------------------------------------------------------- /src/utils/componentHelpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './componentHelpers'; 2 | -------------------------------------------------------------------------------- /src/utils/momentHelpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './momentLocaleUtils'; 2 | -------------------------------------------------------------------------------- /src/utils/momentHelpers/momentLocaleUtils.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies, no-underscore-dangle */ 2 | 3 | import moment from 'moment'; 4 | 5 | export function formatDay(day, locale = 'en') { 6 | return moment(day) 7 | .locale(locale) 8 | .format('ddd ll'); 9 | } 10 | 11 | export function formatMonthTitle(date, locale = 'en') { 12 | return moment(date) 13 | .locale(locale) 14 | .format('MMMM YYYY'); 15 | } 16 | 17 | export function formatWeekdayShort(day, locale = 'en') { 18 | return moment.localeData(locale).weekdaysMin()[day]; 19 | } 20 | 21 | export function formatWeekdayLong(day, locale = 'en') { 22 | return moment.localeData(locale).weekdays()[day]; 23 | } 24 | 25 | export function getFirstDayOfWeek(locale = 'en') { 26 | return moment.localeData(locale).firstDayOfWeek(); 27 | } 28 | 29 | export function getMonths(locale = 'en') { 30 | return moment.localeData(locale).months(); 31 | } 32 | 33 | export function formatDate(date, format = 'L', locale = 'en') { 34 | return moment(date) 35 | .locale(locale) 36 | .format(Array.isArray(format) ? format[0] : format); 37 | } 38 | 39 | export function parseDate(str, format = 'L', locale = 'en') { 40 | const m = moment(str, format, locale, true); 41 | if (m.isValid()) { 42 | return m.toDate(); 43 | } 44 | return undefined; 45 | } 46 | 47 | export default { 48 | formatDate, 49 | formatDay, 50 | formatMonthTitle, 51 | formatWeekdayLong, 52 | formatWeekdayShort, 53 | getFirstDayOfWeek, 54 | getMonths, 55 | parseDate, 56 | }; 57 | -------------------------------------------------------------------------------- /src/utils/objectHelpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './objectHelpers'; 2 | -------------------------------------------------------------------------------- /src/utils/objectHelpers/objectHelpers.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Allows access to nested JavaScript objects with a string key. 3 | * Example usage: 4 | * resolveToProperty("style.width", document.body) 5 | */ 6 | const resolveToProperty = (path, obj) => (typeof path !== 'string' ? undefined : path.split('.').reduce((prev, curr) => (prev ? prev[curr] : undefined), obj)); 7 | 8 | /** 9 | * Returns true if path is represented as a nested prop. Otherwise false. 10 | * @param {string} path the string representation of a path to the nested property. 11 | */ 12 | const isKeyNestedProp = path => /[a-zA-Z_](\w*\.[a-z_]\w*)+/i.test(path); 13 | 14 | export { resolveToProperty, isKeyNestedProp }; 15 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/cssDefaults.js: -------------------------------------------------------------------------------- 1 | export const CSS_INHERIT_VALUE = 'inherit'; 2 | export const POSITION_DEFAULT_VALUE = 'relative'; 3 | export const CSS_DEFAULT_FONT_FAMILY_VALUE = 'base'; 4 | 5 | import { getGlobalStyles } from 'src/global-styles'; 6 | 7 | const { grid: gridSchema } = getGlobalStyles(); 8 | 9 | export const defaultStylesBase = { 10 | bg: 'transparent', 11 | color: CSS_INHERIT_VALUE, 12 | ellipsis: false, 13 | fontFamily: CSS_DEFAULT_FONT_FAMILY_VALUE, 14 | fontSize: CSS_INHERIT_VALUE, 15 | fontWeight: CSS_INHERIT_VALUE, 16 | italic: false, 17 | kerning: CSS_INHERIT_VALUE, 18 | lg: false, 19 | lineHeight: 1.5, 20 | sm: false, 21 | textAlign: CSS_INHERIT_VALUE, 22 | textDecoration: CSS_INHERIT_VALUE, 23 | }; 24 | export const defaultControlStyles = { 25 | activeColor: 'brandPrimary', 26 | bg: 'white.light', 27 | borderColor: 'borderColor', 28 | fontFamily: CSS_DEFAULT_FONT_FAMILY_VALUE, 29 | isFocused: false, 30 | isRequired: false, 31 | padding: gridSchema.gutter, 32 | placeholderColor: 'gray.light', 33 | plainText: false, 34 | }; 35 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './cssDefaults'; 2 | export * from './utils'; 3 | export * from './core'; 4 | export * from './controlStyles'; 5 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './resolvers'; 2 | export * from './scaleFont'; 3 | export * from './props'; 4 | export { buttonThemes } from './buttonThemes'; 5 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/utils/scaleFont.js: -------------------------------------------------------------------------------- 1 | import { getGlobalStyles } from 'src/global-styles'; 2 | 3 | const { 4 | fontSize: fontSizeSchema, 5 | } = getGlobalStyles(); 6 | 7 | export const scaleFactor = props => { 8 | const { sizeVariants: { sm: schemaSm, lg: schemaLg } } = fontSizeSchema; 9 | let value = null; 10 | const { sm, lg } = props; 11 | if (lg) { 12 | value = schemaLg; 13 | } else if (sm) { 14 | value = schemaSm; 15 | } 16 | return value; 17 | }; 18 | const getUnit = (size, defaultUnit) => { 19 | // Get the unit of measurement 20 | let unit = defaultUnit; 21 | if (size.toString().indexOf('%') !== -1) { 22 | unit = '%'; 23 | } else if (size.toString().indexOf('px') !== -1) { 24 | unit = 'px'; 25 | } else if (size.toString().indexOf('rem') !== -1) { 26 | unit = 'rem'; 27 | } else if (size.toString().indexOf('em') !== -1) { 28 | unit = 'em'; 29 | } 30 | return unit; 31 | }; 32 | export const scaleFont = (size, factor = 1, defaultSize = 1, defaultUnit = 'rem') => { 33 | // Convert the font size and scale factor to floats for calculation 34 | const floatSize = parseFloat(size) || defaultSize; 35 | const floatScaleFactor = parseFloat(factor); 36 | const unit = size ? getUnit(size, defaultUnit) : defaultUnit; 37 | // Calculate the final font size 38 | return (floatSize * floatScaleFactor).toString() + unit; 39 | }; 40 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/utils/tests/colorCore.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-duplicates */ 2 | import { getGlobalStyles } from 'src/global-styles'; 3 | import { colorCore, defaultStylesBase } from '../..'; 4 | 5 | const { 6 | colors: colorSchema, 7 | } = getGlobalStyles(); 8 | 9 | describe('When given props with undefined color and bg', () => { 10 | it('should return the default styling for background and color', () => { 11 | const props = {}; 12 | const expected = { 13 | backgroundColor: defaultStylesBase.bg, 14 | color: defaultStylesBase.color, 15 | }; 16 | expect(colorCore(props)).toEqual(expected); 17 | }); 18 | }); 19 | 20 | describe('When given props with color and bg', () => { 21 | it('should return the default styling for background and color', () => { 22 | const props = { 23 | bg: 'green.dark', 24 | color: 'green', 25 | }; 26 | const expected = { 27 | backgroundColor: colorSchema.green.dark, 28 | color: colorSchema.green.base, 29 | }; 30 | expect(colorCore(props)).toEqual(expected); 31 | }); 32 | }); 33 | 34 | describe('When given props with non-variable color and bg', () => { 35 | it('should return the default styling for background and color', () => { 36 | const props = { 37 | bg: '#ff0000', 38 | color: '#ffffff', 39 | }; 40 | const expected = { 41 | backgroundColor: props.bg, 42 | color: props.color, 43 | }; 44 | expect(colorCore(props)).toEqual(expected); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/utils/tests/resolveBoxShadow.test.js: -------------------------------------------------------------------------------- 1 | import { CSS_INHERIT_VALUE } from '../../cssDefaults'; 2 | import { resolveBoxShadow } from '../resolvers'; 3 | 4 | describe('resolveBoxShadow', () => { 5 | it('should return the inherit value if no depth or globalOverrides given', () => { 6 | // Act 7 | const actual = resolveBoxShadow(); 8 | // Assert 9 | expect(actual).toBe(CSS_INHERIT_VALUE); 10 | }); 11 | it('should return the inherit value depth is not a string', () => { 12 | // Act 13 | const actual = resolveBoxShadow(5); 14 | // Assert 15 | expect(actual).toBe(CSS_INHERIT_VALUE); 16 | }); 17 | it('should return the inherit value depth is a string but not valid', () => { 18 | // Act 19 | const actual = resolveBoxShadow('07'); 20 | // Assert 21 | expect(actual).toBe(CSS_INHERIT_VALUE); 22 | }); 23 | it('should return the specified box shadow value', () => { 24 | // Arrange 25 | const depth = '06'; 26 | // Act 27 | const actual = resolveBoxShadow(depth); 28 | // Assert 29 | expect(actual).toBe('0 32px 59px 3px rgba(0,0,0,0.14), 0 12px 72px 11px rgba(0,0,0,0.12), 0 14px 20px -8px rgba(0,0,0,0.2)'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/utils/tests/resolveElevation.test.js: -------------------------------------------------------------------------------- 1 | import { CSS_INHERIT_VALUE } from '../../cssDefaults'; 2 | import { resolveElevation } from '../resolvers'; 3 | 4 | const inheritExpected = `z-index: ${CSS_INHERIT_VALUE}; box-shadow: ${CSS_INHERIT_VALUE}`; 5 | 6 | describe('resolveElevation', () => { 7 | // TODO: Discuss this test case with the team 8 | xit('should return the inherit value if no depth or globalOverrides given', () => { 9 | // Act 10 | const actual = resolveElevation(); 11 | // Assert 12 | expect(actual).toBe(inheritExpected); 13 | }); 14 | // TODO: Discuss this test case with the team 15 | xit('should return the inherit value depth is not a string', () => { 16 | // Act 17 | const actual = resolveElevation(5); 18 | // Assert 19 | expect(actual).toBe(inheritExpected); 20 | }); 21 | it('should return the inherit value depth is a string but not a valid value', () => { 22 | // Act 23 | const actual = resolveElevation('07'); 24 | // Assert 25 | expect(actual).toBe(inheritExpected); 26 | }); 27 | it('should return the specified elevation value', () => { 28 | // Arrange 29 | const depth = '06'; 30 | // Act 31 | const actual = resolveElevation(depth); 32 | // Assert 33 | expect(actual).toBe('z-index: 1060; box-shadow: 0 32px 59px 3px rgba(0,0,0,0.14), 0 12px 72px 11px rgba(0,0,0,0.12), 0 14px 20px -8px rgba(0,0,0,0.2)'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/utils/styledHelpers/utils/tests/resolveZIndex.test.js: -------------------------------------------------------------------------------- 1 | import { CSS_INHERIT_VALUE } from '../../cssDefaults'; 2 | import { resolveZIndex } from '../resolvers'; 3 | 4 | describe('resolveZIndex', () => { 5 | it('should return the inherit value if no depth or globalOverrides given', () => { 6 | // Act 7 | const actual = resolveZIndex(); 8 | // Assert 9 | expect(actual).toBe(CSS_INHERIT_VALUE); 10 | }); 11 | it('should return the inherit value depth is not a string', () => { 12 | // Act 13 | const actual = resolveZIndex(5); 14 | // Assert 15 | expect(actual).toBe(CSS_INHERIT_VALUE); 16 | }); 17 | it('should return the inherit value depth is a string but not valid', () => { 18 | // Act 19 | const actual = resolveZIndex('07'); 20 | // Assert 21 | expect(actual).toBe(CSS_INHERIT_VALUE); 22 | }); 23 | it('should return the specified z-index value', () => { 24 | // Arrange 25 | const depth = '06'; 26 | // Act 27 | const actual = resolveZIndex(depth); 28 | // Assert 29 | expect(actual).toBe('1060'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /styleguide/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | import { Flex, Link, Paragraph } from 'src'; 2 | import React from 'react'; 3 | import styled from 'styled-components'; 4 | import urlRoutes from '../constants'; 5 | 6 | const FooterParagraph = styled(Paragraph)` 7 | white-space: nowrap; 8 | `; 9 | 10 | FooterParagraph.defaultProps = { 11 | m: 0, 12 | mx: 1, 13 | sm: true, 14 | textAlign: 'center', 15 | }; 16 | 17 | const Footer = () => ( 18 | <Flex 19 | alignItems="center" 20 | flex="none" 21 | flexWrap="wrap" 22 | justifyContent="center" 23 | p={[1, 2, 3]} 24 | style={{ backgroundColor: '#dbdbdb' }} 25 | > 26 | <FooterParagraph> 27 | {'grape-ui created by '} 28 | <Link href={urlRoutes.externalNapa}>Napa Group LLC</Link> 29 | . 30 | </FooterParagraph> 31 | <FooterParagraph> 32 | {'Documentation created with '} 33 | <Link href={urlRoutes.externalReactStyleguidist}>React Styleguidist</Link> 34 | . 35 | </FooterParagraph> 36 | <FooterParagraph> 37 | {'Site generated with '} 38 | <Link href={urlRoutes.externalGatsby}>Gatsby</Link> 39 | . 40 | </FooterParagraph> 41 | </Flex> 42 | ); 43 | 44 | export { Footer }; 45 | -------------------------------------------------------------------------------- /styleguide/components/constants.js: -------------------------------------------------------------------------------- 1 | const urlRoutes = { 2 | docsPage: '/docs', 3 | externalGatsby: 'https://www.gatsbyjs.org', 4 | externalGithub: 'https://www.github.com/napagroup', 5 | externalNapa: 'https://www.napa.com', 6 | externalReactStyleguidist: 'https://react-styleguidist.js.org/', 7 | externalStyledComponents: 'https://styled-components.com/', 8 | externalTwitter: 'https://www.twitter.com/grapeui', 9 | homePage: 'http://www.grapeui.com', 10 | }; 11 | 12 | export default urlRoutes; 13 | -------------------------------------------------------------------------------- /styleguide/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './Footer'; 2 | export * from './AppBar'; 3 | -------------------------------------------------------------------------------- /styleguide/containers/CodeRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Code } from 'src'; 4 | 5 | const CodeRenderer = ({ children }) => ( 6 | <Code code={children} PreTag="span" /> 7 | ); 8 | 9 | CodeRenderer.propTypes = { 10 | children: PropTypes.node.isRequired, 11 | }; 12 | 13 | export default CodeRenderer; 14 | -------------------------------------------------------------------------------- /styleguide/containers/HeadingRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Header } from 'src'; 4 | 5 | const HeadingRenderer = ({ 6 | level, 7 | children, 8 | ...props 9 | }) => { 10 | const HeaderComponent = Header[`h${level}`]; 11 | return ( 12 | <HeaderComponent {...props}> 13 | {children} 14 | </HeaderComponent> 15 | ); 16 | }; 17 | 18 | HeadingRenderer.propTypes = { 19 | children: PropTypes.node, 20 | level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired, 21 | }; 22 | 23 | HeadingRenderer.defaultProps = { 24 | children: '', 25 | }; 26 | 27 | export default HeadingRenderer; 28 | -------------------------------------------------------------------------------- /styleguide/containers/LinkRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Link } from 'src'; 4 | 5 | const LinkRenderer = ({ 6 | children, 7 | ...props 8 | }) => ( 9 | <Link {...props}> 10 | {children} 11 | </Link> 12 | ); 13 | 14 | LinkRenderer.propTypes = { 15 | children: PropTypes.node, 16 | }; 17 | 18 | LinkRenderer.defaultProps = { 19 | children: '', 20 | }; 21 | 22 | export default LinkRenderer; 23 | -------------------------------------------------------------------------------- /styleguide/containers/ParaRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Paragraph } from 'src'; 4 | 5 | const ParaRenderer = ({ 6 | children, 7 | ...props 8 | }) => ( 9 | <Paragraph {...props}> 10 | {children} 11 | </Paragraph> 12 | ); 13 | 14 | ParaRenderer.propTypes = { 15 | children: PropTypes.node, 16 | }; 17 | 18 | ParaRenderer.defaultProps = { 19 | children: '', 20 | }; 21 | 22 | export default ParaRenderer; 23 | -------------------------------------------------------------------------------- /styleguide/containers/PathlineRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import copy from 'clipboard-copy'; 4 | import { Button, Code, Flex } from 'src'; 5 | import { faCopy } from '@fortawesome/free-regular-svg-icons'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 7 | 8 | const PathlineRenderer = ({ 9 | children, 10 | }) => ( 11 | <Flex alignItems="Center" mt={-3}> 12 | <Code code={children} /> 13 | <Button 14 | color="gray" 15 | onClick={() => children && copy(children.toString())} 16 | sm 17 | title="Copy to clipboard" 18 | > 19 | <FontAwesomeIcon icon={faCopy} /> 20 | </Button> 21 | </Flex> 22 | ); 23 | 24 | PathlineRenderer.propTypes = { 25 | children: PropTypes.node.isRequired, 26 | }; 27 | 28 | export default PathlineRenderer; 29 | -------------------------------------------------------------------------------- /styleguide/containers/TabButtonRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Button } from 'src'; 4 | 5 | const TabButtonRenderer = ({ 6 | active, 7 | children, 8 | name, 9 | onClick, 10 | }) => ( 11 | <Button 12 | aria-pressed={active} 13 | fontFamily="monospace" 14 | name={name} 15 | onClick={onClick} 16 | type="button" 17 | variant={active ? 'contained-primary' : 'info'} 18 | > 19 | {children} 20 | {' </>'} 21 | </Button> 22 | ); 23 | 24 | TabButtonRenderer.propTypes = { 25 | active: PropTypes.bool, 26 | children: PropTypes.node.isRequired, 27 | name: PropTypes.string.isRequired, 28 | onClick: PropTypes.func.isRequired, 29 | }; 30 | 31 | TabButtonRenderer.defaultProps = { 32 | active: false, 33 | }; 34 | 35 | export default TabButtonRenderer; 36 | -------------------------------------------------------------------------------- /styleguide/containers/ToolbarButtonRenderer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ToolbarButtonRenderer = () => ( 4 | <React.Fragment /> 5 | ); 6 | 7 | export default ToolbarButtonRenderer; 8 | -------------------------------------------------------------------------------- /styleguide/containers/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | CodeRenderer: path.join( 5 | __dirname, 6 | './CodeRenderer' 7 | ), 8 | ComponentsListRenderer: path.join( 9 | __dirname, 10 | './ComponentsListRenderer' 11 | ), 12 | HeadingRenderer: path.join( 13 | __dirname, 14 | './HeadingRenderer' 15 | ), 16 | LinkRenderer: path.join( 17 | __dirname, 18 | './LinkRenderer' 19 | ), 20 | ParaRenderer: path.join( 21 | __dirname, 22 | './ParaRenderer' 23 | ), 24 | PathlineRenderer: path.join( 25 | __dirname, 26 | './PathlineRenderer' 27 | ), 28 | StyleGuideRenderer: path.join( 29 | __dirname, 30 | './StyleGuideRenderer' 31 | ), 32 | TabButtonRenderer: path.join( 33 | __dirname, 34 | './TabButtonRenderer' 35 | ), 36 | TableOfContentsRenderer: path.join( 37 | __dirname, 38 | './TableOfContentsRenderer' 39 | ), 40 | ToolbarButtonRenderer: path.join( 41 | __dirname, 42 | './ToolbarButtonRenderer' 43 | ) 44 | }; 45 | -------------------------------------------------------------------------------- /styleguide/default.css: -------------------------------------------------------------------------------- 1 | body, 2 | html, 3 | #rsg-root { 4 | height: 100%; 5 | } 6 | 7 | [data-preview="Paragraph"] { 8 | display: block; 9 | } -------------------------------------------------------------------------------- /styleguide/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html> 3 | <head> 4 | <meta charset="utf-8"> 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 | <title>Docs | grape-ui</title> 8 | </head> 9 | <body> 10 | <div id="rsg-root"></div> 11 | <script src="build/bundle.02d0c177.js"></script> 12 | </body> 13 | </html> -------------------------------------------------------------------------------- /styleguide/static/media/amos-bar-zeev-GibvqWh_OcE-unsplash.45520a43.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/styleguide/static/media/amos-bar-zeev-GibvqWh_OcE-unsplash.45520a43.jpg -------------------------------------------------------------------------------- /styleguide/static/media/karly-jones-6aRIh3j_F4I-unsplash.3d4e4073.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/styleguide/static/media/karly-jones-6aRIh3j_F4I-unsplash.3d4e4073.jpg -------------------------------------------------------------------------------- /styleguide/static/media/nacho-dominguez-argenta-cCVzi_mKovs-unsplash.7ca92b41.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/napagroup/grape-ui-react/c8a4da679e30197d947b4fa9c6a79f97f1845790/styleguide/static/media/nacho-dominguez-argenta-cCVzi_mKovs-unsplash.7ca92b41.jpg -------------------------------------------------------------------------------- /styleguide/styles.js: -------------------------------------------------------------------------------- 1 | import * as colors from 'src/assets/json/colors.json'; 2 | 3 | export default { 4 | Logo: { 5 | '@keyframes blink': { 6 | to: { opacity: 0 }, 7 | }, 8 | logo: { 9 | animation: 'blink ease-in-out 300ms infinite', 10 | color: colors.black.base, 11 | }, 12 | }, 13 | Version: { 14 | version: { 15 | color: colors.black.light, 16 | }, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /styleguide/themes.js: -------------------------------------------------------------------------------- 1 | import * as colors from 'src/assets/json/colors.json'; 2 | import * as fontFamily from 'src/assets/json/fontFamily.json'; 3 | 4 | export default { 5 | color: { 6 | base: colors.black.base, 7 | baseBackground: colors.white.light, 8 | border: colors.white.dark, 9 | codeBackground: colors.white.base, 10 | codeBase: colors.black.base, 11 | codeComment: colors.gray.dark, 12 | codeDeleted: colors.grape.base, 13 | codeFunction: colors.pink.base, 14 | codeInserted: colors.teal.light, 15 | codeKeyword: colors.blue.base, 16 | codeOperator: colors.orange.dark, 17 | codeProperty: colors.grape.base, 18 | codePunctuation: colors.gray.base, 19 | codeString: colors.teal.base, 20 | codeVariable: colors.orange.base, 21 | error: colors.brandDanger.base, 22 | focus: colors.brandLinkHover.light, 23 | light: colors.gray.base, 24 | lightest: colors.gray.light, 25 | link: colors.brandLink.base, 26 | linkHover: colors.brandLinkHover.base, 27 | name: colors.green.base, 28 | ribbonBackground: colors.orange.base, 29 | ribbonText: colors.white.light, 30 | sidebarBackground: colors.white.base, 31 | type: colors.grape.base, 32 | }, 33 | fontFamily: { 34 | base: fontFamily.base, 35 | monospace: fontFamily.monospace, 36 | }, 37 | }; 38 | --------------------------------------------------------------------------------