Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

feat(Tabs): 🗑️ Change to Legacy #875

Merged
merged 3 commits into from
Oct 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/Overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ V1 er klar når følgende komponenter er markert som "✅ Felles":
| Search | 🚸 Ikke påbegynt | Figma - Search | [Github - Search](https://github.com/digdir/designsystem/issues/88) |
| [Switch](/docs/felles-switch--docs) | ✅ Felles | [Figma - Switch](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=17755-6024&mode=design&t=ztPUyfbDSQjlpEzv-0) | [Github - Switch](https://github.com/digdir/designsystem/issues/89) |
| [Table](/docs/altinn-table--docs) | 🔵 Altinn | Figma - Table | [Github - Table](https://github.com/digdir/designsystem/issues/90) |
| [Tabs](/docs/altinn-tabs--docs) | 🔵 Altinn | [Figma - Tabs](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=9551%3A54208&t=Rlfq5UyNZBL69dFr-1) | [Github - Tabs](https://github.com/digdir/designsystem/issues/91) |
| [Tabs](/docs/avviklet-legacytabs--docs) | 🔵 Altinn | [Figma - Tabs](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=9551%3A54208&t=Rlfq5UyNZBL69dFr-1) | [Github - Tabs](https://github.com/digdir/designsystem/issues/91) |
| [Tag](/docs/felles-tag--docs) | ✅ Felles | [Figma - Tag](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=10185%3A59053&t=7Q2N4sUdQGhFZrPh-1) | [Github - Tag](https://github.com/digdir/designsystem/issues/322) |
| [Textarea](/docs/felles-textarea--docs) | ✅ Felles | [Figma - Text area](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21873&t=7Q2N4sUdQGhFZrPh-1) | [Github - Textarea](https://github.com/digdir/designsystem/issues/323) |
| [Textfield](/docs/felles-textfield--docs) | ✅ Felles | [Figma - Text Field](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A22228&t=7Q2N4sUdQGhFZrPh-1) | [Github - Textfield](https://github.com/digdir/designsystem/issues/92) |
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/components/Tabs/index.ts

This file was deleted.

2 changes: 1 addition & 1 deletion packages/react/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export * from './legacy/LegacyRadioGroup';
export * from './legacy/LegacyTextField';
export * from './legacy/LegacyTextArea';
export * from './legacy/LegacyToggleButtonGroup';
export * from './legacy/LegacyTabs';

export * from './Button';
export * from './Tabs';
export * from './HelpText';
export * from './Popover';
export * from './Select';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
import { Information } from '../../../../../docs-components';
import { Information } from '../../../../../../docs-components';
import * as TabsStories from './Tabs.stories';

<Meta of={TabsStories} />

# Tabs
# LegacyTabs

<Information text='altinn' />

Expand All @@ -30,9 +30,9 @@ Disse blir automatisk generert dersom de ikke er satt.

```tsx
import '@altinn/figma-design-tokens/dist/tokens.css'; // Importeres kun én gang i din applikasjon
import { Tabs } from '@digdir/design-system-react';
import { LegacyTabs } from '@digdir/design-system-react';

<Tabs
<LegacyTabs
items={[
{
name: 'Donec finibus',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import type { Meta, StoryFn } from '@storybook/react';

import { Tabs } from './Tabs';
import { LegacyTabs } from './Tabs';

export default {
title: 'Altinn/Tabs',
component: Tabs,
title: 'Avviklet/LegacyTabs',
component: LegacyTabs,
} as Meta;

export const Eksempel: StoryFn<typeof Tabs> = (args) => <Tabs {...args} />;
export const Eksempel: StoryFn<typeof LegacyTabs> = (args) => (
<LegacyTabs {...args} />
);

Eksempel.args = {
items: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import React from 'react';
import { act, screen, render as renderRtl } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { lastItem } from '../../utils/arrayUtils';
import { lastItem } from '../../../utils/arrayUtils';

import type { TabItem, TabsProps } from './Tabs';
import { Tabs } from './Tabs';
import type { LegacyTabItem, LegacyTabsProps } from './Tabs';
import { LegacyTabs } from './Tabs';

const user = userEvent.setup();

Expand All @@ -29,20 +29,20 @@ const itemInfo = [
value: 'item3',
},
];
const items: TabItem[] = itemInfo.map((item) => ({
const items: LegacyTabItem[] = itemInfo.map((item) => ({
name: item.name,
content: <p>{item.textContent}</p>,
}));
const itemsWithValues: TabItem[] = itemInfo.map((item) => ({
const itemsWithValues: LegacyTabItem[] = itemInfo.map((item) => ({
name: item.name,
content: <p>{item.textContent}</p>,
value: item.value,
}));
const defaultProps: TabsProps = {
const defaultProps: LegacyTabsProps = {
items,
};

describe('Tabs', () => {
describe('LegacyTabs', () => {
it('Renders expected elements', () => {
render();
expect(getTablist()).toBeInTheDocument();
Expand Down Expand Up @@ -224,7 +224,7 @@ describe('Tabs', () => {
it('Switches selected tab when rerendered with a new name in the activeTab property and values are not set', () => {
const { rerender } = render();
rerender(
<Tabs
<LegacyTabs
{...defaultProps}
activeTab={items[1].name}
/>,
Expand All @@ -235,7 +235,7 @@ describe('Tabs', () => {
it('Switches selected tab when rerendered with a new value in the activeTab property and values are set', () => {
const { rerender } = render();
rerender(
<Tabs
<LegacyTabs
{...defaultProps}
items={itemsWithValues}
activeTab={itemsWithValues[1].value}
Expand Down Expand Up @@ -301,9 +301,9 @@ describe('Tabs', () => {
});
});

const render = (props?: Partial<TabsProps>) => {
const render = (props?: Partial<LegacyTabsProps>) => {
return renderRtl(
<Tabs
<LegacyTabs
{...defaultProps}
{...props}
/>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,32 @@ import type { KeyboardEventHandler } from 'react';
import React, { useEffect, useId, useRef, useState } from 'react';
import cn from 'classnames';

import { useUpdate } from '../../hooks';
import { areItemsUnique } from '../../utils/arrayUtils';
import { useUpdate } from '../../../hooks';
import { areItemsUnique } from '../../../utils/arrayUtils';

import classes from './Tabs.module.css';

export interface TabItem {
export interface LegacyTabItem {
name: string;
content: React.ReactNode;
tabId?: string;
panelId?: string;
value?: string;
}

export interface TabsProps {
export interface LegacyTabsProps {
activeTab?: string;
items: TabItem[];
items: LegacyTabItem[];
onChange?: (name: string) => void;
}

const validId = (str: string) => str.replace(/\s/, '_');

const Tabs = ({ activeTab, items, onChange }: TabsProps) => {
const LegacyTabs = ({ activeTab, items, onChange }: LegacyTabsProps) => {
const idBase = useId();

// Generate values for undefined properties
const tabs: Required<TabItem>[] = items.map(
const tabs: Required<LegacyTabItem>[] = items.map(
({
name,
content,
Expand Down Expand Up @@ -136,6 +136,6 @@ const Tabs = ({ activeTab, items, onChange }: TabsProps) => {
);
};

Tabs.displayName = 'Tabs';
LegacyTabs.displayName = 'LegacyTabs';

export { Tabs };
export { LegacyTabs };
2 changes: 2 additions & 0 deletions packages/react/src/components/legacy/LegacyTabs/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { LegacyTabs } from './Tabs';
export type { LegacyTabsProps, LegacyTabItem } from './Tabs';
Loading