Repository: marigold-ui/marigold
Pull request #1922 (2022-03-28 07:58:29)

docs: revmove colors page

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 499177113d063edc7bb8d09a971cbc6dcc8ea964

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/remove-colors?filename=.changeset/olive-chicken-learn.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A---%0A%0Adocs%3A%20revmove%20colors%20page%0A)



Patch:
diff --git a/docs/content/foundation/colors.mdx b/docs/content/foundation/colors.mdx
deleted file mode 100644
index b0bb87fab..000000000
--- a/docs/content/foundation/colors.mdx
+++ /dev/null
@@ -1,525 +0,0 @@
----
-title: Colors
----
-
-# Colors
-
-The following colors are used in the b2b-theme.
-
-## Color Values
-
-<div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-  <h2>Gray</h2>
-  <div style={{ display: 'inline-block', width: '260px' }}>
-    <div
-      style={{
-        background: '#ffffff',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray00</span>
-      <span>#ffffff</span>
-    </div>
-    <div
-      style={{
-        background: '#fafafa',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray10</span>
-      <span>#fafafa</span>
-    </div>
-    <div
-      style={{
-        background: '#f3f3f3',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray20</span>
-      <span>#f3f3f3</span>
-    </div>
-    <div
-      style={{
-        background: '#e3e3e3',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray30</span>
-      <span>#e3e3e3</span>
-    </div>
-    <div
-      style={{
-        background: '#cccccc',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray40</span>
-      <span>#cccccc</span>
-    </div>
-    <div
-      style={{
-        background: '#8d8d8d',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray50</span>
-      <span>#8d8d8d</span>
-    </div>
-    <div
-      style={{
-        background: '#6d6d6d',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray60</span>
-      <span>#6d6d6d</span>
-    </div>
-    <div
-      style={{
-        background: '#4b4b4b',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray70 (Text Black)</span>
-      <span>#4b4b4b</span>
-    </div>
-    <div
-      style={{
-        background: '#2b2b2b',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray80</span>
-      <span>#2b2b2b</span>
-    </div>
-    <div
-      style={{
-        background: '#0f0f0f',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Gray90</span>
-      <span>#0f0f0f</span>
-    </div>
-  </div>
-</div>
-
-<div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-  <h2>Orange</h2>
-  <div style={{ display: 'inline-block', width: '260px' }}>
-    <div
-      style={{
-        background: '#fff8f1',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Orange10</span>
-      <span>#fff8f1</span>
-    </div>
-    <div
-      style={{
-        background: '#fdcca0',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Orange20</span>
-      <span>#fdcca0</span>
-    </div>
-    <div
-      style={{
-        background: '#f8ac67',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Orange40</span>
-      <span>#f8ac67</span>
-    </div>
-    <div
-      style={{
-        background: '#fa8005',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Orange60 (Primary)</span>
-      <span>#fa8005</span>
-    </div>
-    <div
-      style={{
-        background: '#ea5200',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Orange70</span>
-      <span>#ea5200</span>
-    </div>
-    <div
-      style={{
-        background: '#ae440a',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Orange80</span>
-      <span>#ae440a</span>
-    </div>
-  </div>
-</div>
-
-<div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-  <h2>Blue</h2>
-  <div style={{ display: 'inline-block', width: '260px' }}>
-    <div
-      style={{
-        background: '#e8f4fa',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Blue10</span>
-      <span>#e8f4fa</span>
-    </div>
-    <div
-      style={{
-        background: '#c1f0fc',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Blue20</span>
-      <span>#c1f0fc</span>
-    </div>
-    <div
-      style={{
-        background: '#67dfff',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Blue40</span>
-      <span>#67dfff</span>
-    </div>
-    <div
-      style={{
-        background: '#3ab3d5',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Blue60</span>
-      <span>#3ab3d5</span>
-    </div>
-    <div
-      style={{
-        background: '#1d67b6',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Blue70</span>
-      <span>#1d67b6</span>
-    </div>
-    <div
-      style={{
-        background: '#0c3a6b',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Blue80</span>
-      <span>#0c3a6b</span>
-    </div>
-  </div>
-</div>
-
-<div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-  <h2>Green</h2>
-  <div style={{ display: 'inline-block', width: '260px' }}>
-    <div
-      style={{
-        background: '#f9fed0',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Green10</span>
-      <span>#f9fed0</span>
-    </div>
-    <div
-      style={{
-        background: '#e8f57b',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Green20</span>
-      <span>#e8f57b</span>
-    </div>
-    <div
-      style={{
-        background: '#bacb2a',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Green40</span>
-      <span>#bacb2a</span>
-    </div>
-    <div
-      style={{
-        background: '#8bbd26',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Green60</span>
-      <span>#8bbd26</span>
-    </div>
-    <div
-      style={{
-        background: '#44a112',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Green70</span>
-      <span>#44a112</span>
-    </div>
-    <div
-      style={{
-        background: '#215107',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Green80</span>
-      <span>#215107</span>
-    </div>
-  </div>
-</div>
-
-<div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-  <h2>Red</h2>
-  <div style={{ display: 'inline-block', width: '260px' }}>
-    <div
-      style={{
-        background: '#fff8f8',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Red10</span>
-      <span>#fff8f8</span>
-    </div>
-    <div
-      style={{
-        background: '#fec8c9',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Red20</span>
-      <span>#fec8c9</span>
-    </div>
-    <div
-      style={{
-        background: '#f38a8a',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Red40</span>
-      <span>#f38a8a</span>
-    </div>
-    <div
-      style={{
-        background: '#dd4142',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Red60</span>
-      <span>#dd4142</span>
-    </div>
-    <div
-      style={{
-        background: '#8b0027',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Red70</span>
-      <span>#8b0027</span>
-    </div>
-    <div
-      style={{
-        background: '#4d0419',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Red80</span>
-      <span>#4d0419</span>
-    </div>
-  </div>
-</div>
-
-<div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-  <h2>Purple</h2>
-  <div style={{ display: 'inline-block', width: '260px' }}>
-    <div
-      style={{
-        background: '#EDE7F6',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Purple10</span>
-      <span>#EDE7F6</span>
-    </div>
-    <div
-      style={{
-        background: '#D1C4E9',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Purple20</span>
-      <span>#D1C4E9</span>
-    </div>
-    <div
-      style={{
-        background: '#9575CD',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Purple40</span>
-      <span>#9575CD</span>
-    </div>
-    <div
-      style={{
-        background: '#673AB7',
-        color: 'black',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Purple60</span>
-      <span>#673AB7</span>
-    </div>
-    <div
-      style={{
-        background: '#512DA8',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Purple70</span>
-      <span>#512DA8</span>
-    </div>
-    <div
-      style={{
-        background: '#311B92',
-        color: 'white',
-        padding: '8px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      <span>Purple80</span>
-      <span>#311B92</span>
-    </div>
-  </div>
-</div>
diff --git a/packages/components/src/Field-Next/HelperText.stories.tsx b/packages/components/src/Field-Next/HelperText.stories.tsx
new file mode 100644
index 000000000..a6f9856f8
--- /dev/null
+++ b/packages/components/src/Field-Next/HelperText.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { HelperText } from './HelperText';
+
+export default {
+  title: 'Field/HelperText',
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text of the label',
+      defaultValue: 'This is the helper text!',
+    },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['description', 'error'],
+      description: 'Choose between description and error',
+      defaultValue: 'description',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof HelperText> = ({
+  children,
+  ...args
+}) => <HelperText {...args}>{children}</HelperText>;
diff --git a/packages/components/src/Field-Next/HelperText.tsx b/packages/components/src/Field-Next/HelperText.tsx
new file mode 100644
index 000000000..1daa31342
--- /dev/null
+++ b/packages/components/src/Field-Next/HelperText.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Exclamation } from '@marigold/icons';
+
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface HelperTextThemeExtension<Value> {
+  helperText?: {
+    description: Value;
+    error: Value;
+    icon: {
+      size: number | string;
+    };
+  };
+}
+
+// Props
+// ---------------
+export interface HelperTextProps {
+  variant?: 'description' | 'error';
+}
+
+// Component
+// ---------------
+export const HelperText: React.FC<HelperTextProps> = ({
+  variant = 'description',
+  children,
+}) => (
+  <Box
+    variant={`helperText.${variant}`}
+    __baseCSS={{ display: 'flex', alignItems: 'center', gap: 4 }}
+  >
+    {variant === 'error' ? <Exclamation role="presentation" /> : null}
+    {children}
+  </Box>
+);
diff --git a/packages/components/src/Field-Next/Label.tsx b/packages/components/src/Field-Next/Label.tsx
index 07e9fbcd0..1542a30c6 100644
--- a/packages/components/src/Field-Next/Label.tsx
+++ b/packages/components/src/Field-Next/Label.tsx
@@ -45,7 +45,7 @@ export const Label: React.FC<LabelProps> = ({
        * aria-required is set on the field and will already be announced,
        * so we don't need to add it here.
        */}
-      {required && <Required role="img" size={16} />}
+      {required && <Required role="presentation" size={16} />}
     </Box>
   );
 };


Test patch:
diff --git a/packages/components/src/Field-Next/HelperText.test.tsx b/packages/components/src/Field-Next/HelperText.test.tsx
new file mode 100644
index 000000000..eee607816
--- /dev/null
+++ b/packages/components/src/Field-Next/HelperText.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { HelperText } from './HelperText';
+
+const theme = {
+  colors: {
+    text: 'black',
+    error: 'red',
+  },
+  helperText: {
+    description: {
+      color: 'text',
+    },
+    error: {
+      color: 'error',
+    },
+  },
+};
+
+test('supports description variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <HelperText>label</HelperText>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: black`);
+});
+
+test('supports error variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <HelperText variant="error">label</HelperText>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: red`);
+});
+
+test('renders icon when variant is error', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <HelperText variant="error">label</HelperText>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  const icon = within(label).getByRole(/presentation/);
+  expect(icon).toBeInTheDocument();
+});
diff --git a/packages/components/src/Field-Next/Label.test.tsx b/packages/components/src/Field-Next/Label.test.tsx
index 82b5fb012..b2421d0d2 100644
--- a/packages/components/src/Field-Next/Label.test.tsx
+++ b/packages/components/src/Field-Next/Label.test.tsx
@@ -49,7 +49,7 @@ test('supports required prop', () => {
     </ThemeProvider>
   );
   const label = screen.getByTestId(/label/);
-  const requiredIcon = within(label).getByRole('img');
+  const requiredIcon = within(label).getByRole('presentation');
   expect(requiredIcon).toBeInTheDocument();
 });