Shorten ‘extra’ prefix to ‘x’ (#751)

Amsterdam · Nov 14, 2023 · 98cd2f5 · 98cd2f5
1 parent b4aaf6c
commit 98cd2f5
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 32 deletions.
diff --git a/packages/css/src/aspect-ratio/README.md b/packages/css/src/aspect-ratio/README.md
@@ -4,13 +4,13 @@ Aspect Ratio (in het Nederlands: beeldverhouding) koppelt de hoogte van een elem
 
 Om de vormgeving consistent te houden gebruiken we een vaste set verhoudingen (breedte:hoogte):
 
-| _keyword_    | verhouding |
-| :----------- | ---------: |
-| `extra-wide` |       16:9 |
-| `wide`       |        5:4 |
-| `square`     |        1:1 |
-| `tall`       |        4:5 |
-| `extra-tall` |       9:16 |
+| _keyword_ | verhouding |
+| :-------- | ---------: |
+| `x-wide`  |       16:9 |
+| `wide`    |        5:4 |
+| `square`  |        1:1 |
+| `tall`    |        4:5 |
+| `x-tall`  |       9:16 |
 
 ## Richtlijnen
 

diff --git a/packages/css/src/aspect-ratio/aspect-ratio.scss b/packages/css/src/aspect-ratio/aspect-ratio.scss
@@ -8,8 +8,8 @@
   position: relative;
 }
 
-.amsterdam-aspect-ratio--extra-tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-extra-tall);
+.amsterdam-aspect-ratio--x-tall {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
 }
 
 .amsterdam-aspect-ratio--tall {
@@ -24,6 +24,6 @@
   aspect-ratio: var(--amsterdam-aspect-ratio-wide);
 }
 
-.amsterdam-aspect-ratio--extra-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-extra-wide);
+.amsterdam-aspect-ratio--x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
 }
diff --git a/packages/css/src/screen/screen.scss b/packages/css/src/screen/screen.scss
@@ -17,6 +17,6 @@
   max-width: var(--amsterdam-screen-wide-max-width);
 }
 
-.amsterdam-screen--extra-wide {
-  max-width: var(--amsterdam-screen-extra-wide-max-width);
+.amsterdam-screen--x-wide {
+  max-width: var(--amsterdam-screen-x-wide-max-width);
 }
diff --git a/packages/react/src/AspectRatio/AspectRatio.test.tsx b/packages/react/src/AspectRatio/AspectRatio.test.tsx
@@ -28,17 +28,17 @@ describe('Aspect ratio', () => {
   })
 
   it('renders the right size classes', () => {
-    const { container: extraTall } = render(<AspectRatio ratio="extra-tall" />)
+    const { container: xTall } = render(<AspectRatio ratio="x-tall" />)
     const { container: tall } = render(<AspectRatio ratio="tall" />)
     const { container: square } = render(<AspectRatio ratio="square" />)
     const { container: wide } = render(<AspectRatio ratio="wide" />)
-    const { container: extraWide } = render(<AspectRatio ratio="extra-wide" />)
+    const { container: xWide } = render(<AspectRatio ratio="x-wide" />)
 
-    expect(extraTall.firstChild).toHaveClass('amsterdam-aspect-ratio--extra-tall')
+    expect(xTall.firstChild).toHaveClass('amsterdam-aspect-ratio--x-tall')
     expect(tall.firstChild).toHaveClass('amsterdam-aspect-ratio--tall')
     expect(square.firstChild).toHaveClass('amsterdam-aspect-ratio--square')
     expect(wide.firstChild).toHaveClass('amsterdam-aspect-ratio--wide')
-    expect(extraWide.firstChild).toHaveClass('amsterdam-aspect-ratio--extra-wide')
+    expect(xWide.firstChild).toHaveClass('amsterdam-aspect-ratio--x-wide')
   })
 
   it('renders an additional class name', () => {

diff --git a/packages/react/src/AspectRatio/AspectRatio.tsx b/packages/react/src/AspectRatio/AspectRatio.tsx
@@ -6,7 +6,7 @@
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export type Ratio = 'extra-tall' | 'tall' | 'square' | 'wide' | 'extra-wide'
+export type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide'
 
 export interface AspectRatioProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
   ratio?: Ratio

diff --git a/packages/react/src/Screen/Screen.test.tsx b/packages/react/src/Screen/Screen.test.tsx
@@ -22,11 +22,11 @@ describe('Screen', () => {
   })
 
   it('renders the max-width class name', () => {
-    const { container } = render(<Screen maxWidth="extra-wide" />)
+    const { container } = render(<Screen maxWidth="x-wide" />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-screen--extra-wide')
+    expect(component).toHaveClass('amsterdam-screen--x-wide')
   })
 
   it('renders an additional class name', () => {

diff --git a/packages/react/src/Screen/Screen.tsx b/packages/react/src/Screen/Screen.tsx
@@ -6,7 +6,7 @@
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-type ScreenMaxWidth = 'wide' | 'extra-wide'
+type ScreenMaxWidth = 'wide' | 'x-wide'
 
 export interface ScreenProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
   maxWidth?: ScreenMaxWidth

diff --git a/proprietary/tokens/src/brand/amsterdam/proportion.tokens.json b/proprietary/tokens/src/brand/amsterdam/proportion.tokens.json
@@ -1,11 +1,11 @@
 {
   "amsterdam": {
     "proportion": {
-      "extra-tall": { "value": "9 / 16" },
+      "x-tall": { "value": "9 / 16" },
       "tall": { "value": "4 / 5" },
       "square": { "value": "1 / 1" },
       "wide": { "value": "5 / 4" },
-      "extra-wide": { "value": "16 / 9" }
+      "x-wide": { "value": "16 / 9" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/aspect-ratio.tokens.json b/proprietary/tokens/src/components/amsterdam/aspect-ratio.tokens.json
@@ -1,11 +1,11 @@
 {
   "amsterdam": {
     "aspect-ratio": {
-      "extra-tall": { "value": "{amsterdam.proportion.extra-tall}" },
+      "x-tall": { "value": "{amsterdam.proportion.x-tall}" },
       "tall": { "value": "{amsterdam.proportion.tall}" },
       "square": { "value": "{amsterdam.proportion.square}" },
       "wide": { "value": "{amsterdam.proportion.wide}" },
-      "extra-wide": { "value": "{amsterdam.proportion.extra-wide}" }
+      "x-wide": { "value": "{amsterdam.proportion.x-wide}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/screen.tokens.json b/proprietary/tokens/src/components/amsterdam/screen.tokens.json
@@ -4,7 +4,7 @@
       "wide": {
         "max-width": { "value": "100rem" }
       },
-      "extra-wide": {
+      "x-wide": {
         "max-width": { "value": "132rem" }
       }
     }

diff --git a/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx b/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
   argTypes: {
     ratio: {
       control: 'radio',
-      options: ['extra-wide', 'wide', 'square', 'tall', 'extra-tall'],
+      options: ['x-wide', 'wide', 'square', 'tall', 'x-tall'],
     },
   },
 } satisfies Meta<typeof AspectRatio>
@@ -25,7 +25,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 const storyConfig = {
-  'extra-wide': {
+  'x-wide': {
     image: 'https://picsum.photos/640/360',
   },
   wide: {
@@ -37,7 +37,7 @@ const storyConfig = {
   tall: {
     image: 'https://picsum.photos/360/450',
   },
-  'extra-tall': {
+  'x-tall': {
     image: 'https://picsum.photos/360/640',
   },
 }
@@ -64,7 +64,7 @@ export const Default: Story = {
 export const ExtraWide: Story = {
   ...StoryTemplate,
   args: {
-    ratio: 'extra-wide',
+    ratio: 'x-wide',
   },
 }
 
@@ -92,6 +92,6 @@ export const Tall: Story = {
 export const ExtraTall: Story = {
   ...StoryTemplate,
   args: {
-    ratio: 'extra-tall',
+    ratio: 'x-tall',
   },
 }
diff --git a/storybook/storybook-react/src/Screen/Screen.stories.tsx b/storybook/storybook-react/src/Screen/Screen.stories.tsx
@@ -25,6 +25,6 @@ export const Default: Story = {
 export const ExtraWide: Story = {
   args: {
     children: <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">Ik pas in een extra breed scherm.</p>,
-    maxWidth: 'extra-wide',
+    maxWidth: 'x-wide',
   },
 }