equinor · oddvernes · Mar 19, 2024 · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const BaselineGrid = styled.div`
+  /*TODO: find color that work in dark mode, or use an existing token if possible*/
+  --_line: var(--baseline-grid-color, light-dark(#f2f2f2, #f2f2f2));
+  background: linear-gradient(
+    to bottom,
+    var(--_line),
+    var(--_line) 50%,
+    transparent 50%,
+    transparent
+  );
+  background-size: 100% 8px;
+  min-height: 32px;
+  padding: 4px;
+  display: flex;
+  flex-flow: column;
+  gap: 16px;
+`
@@ -2,3 +2,4 @@ export { Story } from './Story'
 export { Stack } from './Stack'
 export { Links } from './Links'
 export { InfoCard } from './InfoCard'
+export { BaselineGrid } from './BaselineGrid'
@@ -5,6 +5,6 @@
 
 <style>
   body {
-    font-family: Equinor, sans-serif !important;
+    font-family: Equinor, sans-serif;
   }
 </style>
@@ -2,6 +2,12 @@
   rel="stylesheet"
   href="https://cdn.eds.equinor.com/font/equinor-font.css"
 />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+  rel="stylesheet"
+/>
 
 <style>
   html {
@@ -10,8 +16,30 @@
   .sb-show-main {
     min-height: 100%;
   }
-  .sbdocs.sbdocs *:not(code):not(.token) {
-    font-family: Equinor, sans-serif !important;
+  body {
+    :has(.hide-grid-lines__input:checked) {
+      --baseline-grid-color: transparent;
+    }
+  }
+
+  .hide-grid-lines {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 0;
+    cursor: pointer;
+    input {
+      margin: 0;
+      cursor: inherit;
+    }
+  }
+  /*.sbdocs.sbdocs *:not(code):not(.token) {
+    font-family: Equinor, sans-serif;
+  }*/
+  @scope (body) to (.docs-story) {
+    :scope * {
+      font-family: Equinor, sans-serif;
+    }
   }
   .sbdocs.sbdocs-a {
     font-size: inherit;

@@ -0,0 +1,54 @@
+import { DocsContainer } from '@storybook/blocks'
+import * as React from 'react'
+import '@equinor/eds-tokens/css/variables-verbose.css'
+import { Preview } from '@storybook/react'
+
+const DocsContainerWithWrapper = ({ children, context, ...props }) => {
+  return (
+    <div data-density={context.store.userGlobals.globals.density}>
+      <DocsContainer context={context} {...props}>
+        {children}
+      </DocsContainer>
+    </div>
+  )
+}
+
+const preview: Preview = {
+  /*   viewMode: 'docs',*/
+  parameters: {
+    docs: {
+      container: DocsContainerWithWrapper,
+    },
+    options: {
+      storySort: {
+        method: '',
+        order: [
+          'Introduction',
+          'Data Display',
+          'Feedback',
+          'Inputs',
+          'Navigation',
+          'Surfaces',
+          'Typography',
+          'Icons',
+          ['Introduction', 'Preview', 'Icon'],
+          '*',
+          'Playground',
+        ],
+      },
+    },
+  },
+  globalTypes: {
+    density: {
+      description: 'Global density for components',
+      defaultValue: 'spacious',
+      toolbar: {
+        title: 'Density',
+        icon: 'accessibility',
+        items: ['spacious', 'comfortable'],
+        dynamicTitle: true,
+      },
+    },
+  },
+}
+export default preview
@@ -89,7 +89,7 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@equinor/eds-icons": "workspace:^",
-    "@equinor/eds-tokens": "workspace:*",
+    "@equinor/eds-tokens": "1.0.0-beta-2",
     "@equinor/eds-utils": "workspace:*",
     "@floating-ui/react": "^0.27.2",
     "@internationalized/date": "^3.6.0",

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react'
 import styled from 'styled-components'
-import { Typography } from '../Typography'
-import { TypographyProps } from '../Typography/Typography'
+import { Typography, TypographyProps } from '../Typography'
 
 const StyledBannerMessage = styled(Typography)``
 

@@ -0,0 +1,65 @@
+import { Primary, Canvas, Controls, Meta } from '@storybook/blocks'
+import { Text } from '../Text/Text'
+import * as ComponentStories from './Text.stories'
+
+<Meta of={ComponentStories} />
+
+# Text
+This component is currently available in the beta release of eds-core-React: <br />
+`npm install @equinor/eds-core-react@beta` <br />
+It requires the new eds 2.0 design tokens to be included in your app as css variables:
+```tsx
+//App.tsx or similar
+import '@equinor/eds-tokens/css/variables.css'
+```
+`Text` uses the `Inter` typeface for the `body` and `ui` variants.  We will likely bundle this on the equinor EDS CDN before the full release, but for now it is available from google fonts:
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+  rel="stylesheet"
+/>
+```
+The `header` variant currently works with the regular equinor typeface, but will later require the variable version of the equinor typeface to display properly, as the font-weights will get updated.
+The equinor variable typeface is available on the EDS CDN
+```html
+<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font-vf.css" />
+```
+We will later add a new endpoint on the cdn that should include both this and `Inter`.
+
+<label className="hide-grid-lines">
+  <input className="hide-grid-lines__input" type="checkbox" />
+  <Text className="sb-unstyled">hide grid lines</Text>
+</label>
+<Primary />
+<Controls />
+
+## Baseline grid
+TODO explain this better
+One of the fundamental aims of eds 2.0 spacing and typography is to achieve something called baseline grid. This is a concept of vertically aligning text and other elements in such a way where sizes and spacing always adds up to a multiple of 4px optically, thus creating a harmonious vertical rhythm.
+
+## Usage
+`Text` comes in three variants. `header` uses the `Equinor` typeface while `body` and `ui` uses `Inter`.
+- `header`: For use in headings. It is important to use the `as` prop to assign the context correct header-level (`as="h3"`).
+- `body`: This is the default variant, and is for use on general surfaces such as body, cards, popovers, sidesheets etc.
+- `ui`: For use within UI elements such as buttons, chips, tabs etc. The text is centered within its textbox by default, but can be set to `onGrid` for cases where this makes sense. Note that for font-sizes where the cap-height happens to be a multiple of 4, there is no difference between `onGrid` true or false regardless.
+
+
+```tsx
+import { Text } from '@equinor/eds-core-react'
+ <Text size="lg">This is text</Text>
+```
+<Canvas of={ComponentStories.Demo} />
+
+## Sizes header
+
+<Canvas of={ComponentStories.SizesHeader} />
+
+## Sizes ui/body
+
+<Canvas of={ComponentStories.Sizes} />
+
+## Trunkated
+Use `lines` to clamp number of lines  
+<Canvas of={ComponentStories.Trunkated} />