diff --git a/packages/big-design/src/components/Form/Label/Label.tsx b/packages/big-design/src/components/Form/Label/Label.tsx index fb57361a2..1360dd840 100644 --- a/packages/big-design/src/components/Form/Label/Label.tsx +++ b/packages/big-design/src/components/Form/Label/Label.tsx @@ -2,17 +2,17 @@ import React, { LabelHTMLAttributes } from 'react'; import { StyledLabel } from './styled'; -interface Localization { +export interface LabelLocalization { optional: string; } -const defaultLocalization: Localization = { +const defaultLocalization: LabelLocalization = { optional: 'optional', }; export interface LabelProps extends LabelHTMLAttributes { renderOptional?: boolean; - localization?: Localization; + localization?: LabelLocalization; } export const FormControlLabel: React.FC = ({ diff --git a/packages/big-design/src/components/Form/Label/styled.tsx b/packages/big-design/src/components/Form/Label/styled.tsx index 529d46616..633ee1c06 100644 --- a/packages/big-design/src/components/Form/Label/styled.tsx +++ b/packages/big-design/src/components/Form/Label/styled.tsx @@ -4,10 +4,11 @@ import styled, { css, DefaultTheme, StyledComponent } from 'styled-components'; import { StyleableH4 } from '../../Typography/private'; import { HeadingProps } from '../../Typography/types'; -import { LabelProps } from './Label'; +import { LabelLocalization, LabelProps } from './Label'; -interface StyledLabelArgument extends LabelProps { +interface StyledLabelArgument extends Omit { theme: DefaultTheme; + localization: LabelLocalization; } export const StyledLabel = styled< @@ -24,7 +25,7 @@ export const StyledLabel = styled< css` &::after { color: ${theme.colors.secondary60}; - content: ' (${localization?.optional})'; + content: ' (${localization.optional})'; font-weight: ${theme.typography.fontWeight.regular}; } `} diff --git a/packages/big-design/src/components/InlineMessage/InlineMessage.tsx b/packages/big-design/src/components/InlineMessage/InlineMessage.tsx index d4e6fa127..789c74210 100644 --- a/packages/big-design/src/components/InlineMessage/InlineMessage.tsx +++ b/packages/big-design/src/components/InlineMessage/InlineMessage.tsx @@ -16,16 +16,16 @@ import { StyledMessageItem, } from './styled'; -interface Localization { +export interface InlineMessageLocalization { close: string; } -const defaultLocalization: Localization = { +const defaultLocalization: InlineMessageLocalization = { close: 'Close', }; export type InlineMessageProps = SharedMessagingProps & - MarginProps & { localization?: Localization }; + MarginProps & { localization?: InlineMessageLocalization }; export const InlineMessage: React.FC = memo( ({ className, style, header, localization = defaultLocalization, ...props }) => { diff --git a/packages/big-design/src/components/Message/Message.tsx b/packages/big-design/src/components/Message/Message.tsx index d542e0654..0303d6103 100644 --- a/packages/big-design/src/components/Message/Message.tsx +++ b/packages/big-design/src/components/Message/Message.tsx @@ -16,15 +16,16 @@ import { StyledMessageItem, } from './styled'; -interface Localization { +export interface MessageLocalization { close: string; } -const defaultLocalization: Localization = { +const defaultLocalization: MessageLocalization = { close: 'Close', }; -export type MessageProps = SharedMessagingProps & MarginProps & { localization?: Localization }; +export type MessageProps = SharedMessagingProps & + MarginProps & { localization?: MessageLocalization }; export const Message: React.FC = memo( ({ className, localization = defaultLocalization, style, header, ...props }) => { diff --git a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx index d9aa722c3..9fd86ea28 100644 --- a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx +++ b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx @@ -85,7 +85,7 @@ const InternalStatefulTable = ({ itemName, items = [], keyField, - localization: localizationProp, + localization: localizationProp = defaultLocalization, getRangeLabel, onSelectionChange, onRowDrop, diff --git a/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx b/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx index 4201c1df8..0aea6d235 100644 --- a/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx +++ b/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx @@ -19,11 +19,6 @@ interface Localization { descendingOrder: string; } -const defaultLocalization: Localization = { - ascendingOrder: 'Ascending order', - descendingOrder: 'Descending order', -}; - export interface HeaderCellProps extends TableHTMLAttributes, TableColumnDisplayProps { @@ -33,7 +28,7 @@ export interface HeaderCellProps id: string; hide?: boolean; isSorted?: boolean; - localization?: Localization; + localization: Localization; sortDirection?: 'ASC' | 'DESC'; stickyHeader?: boolean; onSortClick?(column: TableColumn): void; @@ -57,7 +52,7 @@ const InternalHeaderCell = ({ hide = false, id, isSorted, - localization = defaultLocalization, + localization, onSortClick, sortDirection, stickyHeader, diff --git a/packages/big-design/src/components/Table/Table.tsx b/packages/big-design/src/components/Table/Table.tsx index e51896c73..44ebebba9 100644 --- a/packages/big-design/src/components/Table/Table.tsx +++ b/packages/big-design/src/components/Table/Table.tsx @@ -14,6 +14,16 @@ import { Row } from './Row'; import { StyledTable, StyledTableFigure } from './styled'; import { TableColumn, TableItem, TableProps } from './types'; +interface Localization { + ascendingOrder: string; + descendingOrder: string; +} + +const defaultLocalization: Localization = { + ascendingOrder: 'Ascending order', + descendingOrder: 'Descending order', +}; + const InternalTable = ( props: TableProps, ): React.ReactElement> => { @@ -27,7 +37,7 @@ const InternalTable = ( itemName, items, keyField = 'id', - localization, + localization = defaultLocalization, onRowDrop, pagination, selectable, diff --git a/packages/big-design/src/components/Table/spec.tsx b/packages/big-design/src/components/Table/spec.tsx index 71432c74a..acfb11f9c 100644 --- a/packages/big-design/src/components/Table/spec.tsx +++ b/packages/big-design/src/components/Table/spec.tsx @@ -266,7 +266,6 @@ test('renders a pagination component with custom button labels', async () => { getRangeLabel, label: '[Custom] Pagination', localization: { - of: 'of', previousPage: '[Custom] Previous page', nextPage: '[Custom] Next page', }, diff --git a/packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx b/packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx index 1ff085c9f..180c2e96f 100644 --- a/packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx +++ b/packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx @@ -19,11 +19,6 @@ interface Localization { descendingOrder: string; } -const defaultLocalization: Localization = { - ascendingOrder: 'Ascending order', - descendingOrder: 'Descending order', -}; - export interface HeaderCellProps extends TableHTMLAttributes, TableColumnDisplayProps { @@ -33,7 +28,7 @@ export interface HeaderCellProps id: string; hide?: boolean; isSorted?: boolean; - localization?: Localization; + localization: Localization; sortDirection?: 'ASC' | 'DESC'; stickyHeader?: boolean; onSortClick?(column: TableColumn): void; @@ -57,7 +52,7 @@ const InternalHeaderCell = ({ hide = false, id, isSorted, - localization = defaultLocalization, + localization, onSortClick, sortDirection, stickyHeader, diff --git a/packages/big-design/src/components/TableNext/TableNext.tsx b/packages/big-design/src/components/TableNext/TableNext.tsx index 1a98852e1..99f07d0c6 100644 --- a/packages/big-design/src/components/TableNext/TableNext.tsx +++ b/packages/big-design/src/components/TableNext/TableNext.tsx @@ -19,6 +19,16 @@ import { RowContainer } from './RowContainer'; import { StyledTable, StyledTableFigure } from './styled'; import { TableColumn, TableItem, TableProps } from './types'; +interface Localization { + ascendingOrder: string; + descendingOrder: string; +} + +const defaultLocalization: Localization = { + ascendingOrder: 'Ascending order', + descendingOrder: 'Descending order', +}; + const InternalTableNext = ( props: TableProps, ): React.ReactElement> => { @@ -33,7 +43,7 @@ const InternalTableNext = ( itemName, items, keyField = 'id', - localization, + localization = defaultLocalization, pagination, selectable, sortable, diff --git a/packages/big-design/src/components/TableNext/spec.tsx b/packages/big-design/src/components/TableNext/spec.tsx index 275f60e4f..d9e98b91b 100644 --- a/packages/big-design/src/components/TableNext/spec.tsx +++ b/packages/big-design/src/components/TableNext/spec.tsx @@ -291,7 +291,6 @@ describe('pagination', () => { onPageChange, label: '[Custom] Pagination', localization: { - of: 'of', previousPage: '[Custom] Previous page', nextPage: '[Custom] Next page', },