Skip to content
This repository has been archived by the owner on Dec 6, 2022. It is now read-only.

Create Development Kitchen #963

Merged
merged 31 commits into from
Sep 17, 2021
Merged

Create Development Kitchen #963

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
edcb038
rename editorial directory to kitchen
Aug 31, 2021
552f931
remove web, ios and android folders from kitchen
Aug 31, 2021
d95cb6f
rename editorial package to source-kitchen-react
Aug 31, 2021
67fdd25
reset source-kitchen-react version to 0.0.1
Aug 31, 2021
66fff46
Update workspace config for kitchen
Aug 31, 2021
9601f3f
remove individual package.json files in kitchen
Aug 31, 2021
c1dfa5b
remove individual tsconfig.json files in kitchen
Aug 31, 2021
ead59ef
Rename starRating to star-rating
Aug 31, 2021
006bf57
update kitchen index.tsx
Aug 31, 2021
dcaf0c9
Update component READMEs to point to source-kitchen-react npm package
Aug 31, 2021
4982713
update kitchen storybook titles
Aug 31, 2021
703dff0
Update the kitchen README
Aug 31, 2021
a68b66e
update scripts for kitchen
Aug 31, 2021
80686d4
add release process for kitchen
Aug 31, 2021
52eb675
add kitchen to autolabeler
Aug 31, 2021
f70d3f5
Move @guardian/types to be dev and peer dep
Sep 2, 2021
a9304bd
bump version of @guardian/types
Sep 2, 2021
43c53c6
Update story titles
Sep 2, 2021
c9f8e8a
Remove kitchen script from package.json
Sep 2, 2021
2c4e56e
Update src/kitchen/README.md
Sep 2, 2021
3be6657
Apply suggestions from code review
Sep 2, 2021
d078e7f
add contributing guidelines for dev kitchen
SiAdcock Sep 2, 2021
484cd8c
set dotcom-platform as codeowners of all current kitchen components
SiAdcock Sep 2, 2021
4b7cdf5
reinstate kitchen workspace scripts
SiAdcock Sep 2, 2021
e6836b3
make package naming consistent
SiAdcock Sep 2, 2021
1868179
explicitly export components and prop types for each component
SiAdcock Sep 2, 2021
d1243af
Update kitchen package name
Sep 10, 2021
02cbc27
Move kitchen to packages/@guardian/source-react-components-developmen…
Sep 10, 2021
acbcc1e
Merge branch 'main' into development-kitchen
Sep 10, 2021
24cf88b
Pass count arg as string in stories
Sep 10, 2021
c3391a0
rename button to editorial button
Sep 17, 2021
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
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
"workspaces": [
"src/core/*",
"src/core/components/*",
"src/editorial/web",
"src/editorial/web/components/*"
"src/kitchen"
],
"scripts": {
"build-storybook": "build-storybook -o dist",
Expand Down
Empty file removed src/editorial/android/.gitkeep
View file
Open in desktop
Empty file.
Empty file removed src/editorial/ios/.gitkeep
View file
Open in desktop
Empty file.
45 changes: 0 additions & 45 deletions src/editorial/web/components/button/package.json
View file
Open in desktop

This file was deleted.

44 changes: 0 additions & 44 deletions src/editorial/web/components/lines/package.json
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions src/editorial/web/components/lines/tsconfig.json
View file
Open in desktop

This file was deleted.

45 changes: 0 additions & 45 deletions src/editorial/web/components/logo/package.json
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions src/editorial/web/components/logo/tsconfig.json
View file
Open in desktop

This file was deleted.

45 changes: 0 additions & 45 deletions src/editorial/web/components/quote-icon/package.json
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions src/editorial/web/components/quote-icon/tsconfig.json
View file
Open in desktop

This file was deleted.

46 changes: 0 additions & 46 deletions src/editorial/web/components/starRating/package.json
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions src/editorial/web/components/starRating/tsconfig.json
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/editorial/web/index.tsx
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions src/editorial/web/tsconfig.json
View file
Open in desktop

This file was deleted.

0 src/editorial/web/README.md → src/kitchen/README.md
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions .../web/components/button/Button.stories.tsx → ...chen/components/button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import { css } from '@emotion/react';
import { Design, Display, Pillar, Special } from '@guardian/types';
import { Button, ButtonProps } from './index';
import { SvgCross } from '@guardian/src-icons';
import type { Story } from '../../../../@types/storybook-emotion-10-fixes';
import { asPlayground, asChromaticStory } from '../../../../lib/story-intents';
import type { Story } from '../../../@types/storybook-emotion-10-fixes';
import { asPlayground, asChromaticStory } from '../../../lib/story-intents';

const defaultFormat = {
display: Display.Standard,
design: Design.Article,
};

export default {
title: 'Editorial/src-ed-button/Button',
title: 'Kitchen/source-kitchen-react/Button',
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this component now need to be called something else (e.g. EditorialButton) as we can't use the package name to differentiate it from the standard Source Button?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@guardian/dotcom-platform what do you think?

  • EditorialButton
  • PillarButton
  • Something else?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding an option: ThemeButton?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @oliverlloyd I personally think the word Theme is already used more generally to support, for example, the various Reader Revenue themes and the brand themes (see Figma). Do you see Theme as something specific to Format?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Format.Theme is a superset of Pillar which also includes Labs and SpecialReport

https://github.com/guardian/libs/blob/main/src/format.ts#L16

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the migration to @guardian/libs, Format becomes ArticleFormat. In fact everything related to ArticleFormat gets an Article prefix. Maybe we should reflect that in Source too, with ArticleButton?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wasn't it that ArticleFormat is named such because it specifically relates to articles? With the thinking being you would later have a ContainerFormat (or SliceFormat, SectionFormat?) which represents Fronts. SectionFormat would contain and array of articles which each have ArticleFormat.

I mention this because I don't think the same model exists for a button. They can be used everywhere in the editorial space and have a much simpler design pattern, one not limited to articles.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the other hand, if we follow this thinking through, you'd have

<EditorialButton format={myFormatObject} />

where myFormatObject would be typed as ArticleFormat. So if you can only ever pass in ArticleFormat then maybe ArticleButton works?

🤷

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good thoughts @oliverlloyd. I guess the format prop could expect something that's either an ArticleFormat or ContainerFormat But I think you're right in that <EditorialButton> better reflects the context in which this button can be used.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've renamed to EditorialButton unless anyone has any last minute alternatives

component: Button,
argTypes: {
format: {
Expand Down
0 ...ditorial/web/components/button/Button.tsx → src/kitchen/components/button/Button.tsx
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions .../components/button/LinkButton.stories.tsx → .../components/button/LinkButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import { css } from '@emotion/react';
import { Design, Display, Pillar, Special } from '@guardian/types';
import { LinkButton, LinkButtonProps } from './index';
import { SvgCross } from '@guardian/src-icons';
import type { Story } from '../../../../@types/storybook-emotion-10-fixes';
import { asPlayground, asChromaticStory } from '../../../../lib/story-intents';
import type { Story } from '../../../@types/storybook-emotion-10-fixes';
import { asPlayground, asChromaticStory } from '../../../lib/story-intents';

const defaultFormat = {
display: Display.Standard,
design: Design.Article,
};

export default {
title: 'Editorial/src-ed-button/LinkButton',
title: 'Kitchen/source-kitchen-react/LinkButton',
component: LinkButton,
argTypes: {
format: {
Expand Down
0 ...rial/web/components/button/LinkButton.tsx → src/kitchen/components/button/LinkButton.tsx
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions ...editorial/web/components/button/README.md → src/kitchen/components/button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@ Also exported is `LinkButton` which, like in core, offers a href version of the
## Install

```sh
$ yarn add @guardian/src-ed-button @guardian/src-foundations
$ yarn add @guardian/source-kitchen-react @guardian/src-foundations
jamie-lynch marked this conversation as resolved.
Show resolved Hide resolved
```

or

```sh
$ npm i @guardian/src-ed-button @guardian/src-foundations
$ npm i @guardian/source-kitchen-react @guardian/src-foundations
jamie-lynch marked this conversation as resolved.
Show resolved Hide resolved
```

## Use

### API

See [storybook](https://guardian.github.io/source/?path=/docs/editorial-src-ed-button-button--playground)
See [storybook](https://guardian.github.io/source/?path=/docs/kitchen-source-kitchen-react-button--playground)

### How to use

Expand Down
0 ...editorial/web/components/button/index.tsx → src/kitchen/components/button/index.tsx
View file
Open in desktop
File renamed without changes.
0 ...editorial/web/components/button/styles.ts → src/kitchen/components/button/styles.ts
View file
Open in desktop
File renamed without changes.
0 src/editorial/web/components/button/types.ts → src/kitchen/components/button/types.ts
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions ...al/web/components/lines/Lines.stories.tsx → ...itchen/components/lines/Lines.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Lines, LinesProps } from './index';
import type { Story } from '../../../../@types/storybook-emotion-10-fixes';
import { asPlayground, asChromaticStory } from '../../../../lib/story-intents';
import type { Story } from '../../../@types/storybook-emotion-10-fixes';
import { asPlayground, asChromaticStory } from '../../../lib/story-intents';

export default {
title: 'Editorial/src-ed-lines/Lines',
title: 'Kitchen/source-kitchen-react/Lines',
jamie-lynch marked this conversation as resolved.
Show resolved Hide resolved
component: Lines,
args: {
effect: 'straight',
Expand Down
0 src/editorial/web/components/lines/Lines.tsx → src/kitchen/components/lines/Lines.tsx
View file
Open in desktop
File renamed without changes.
Loading