Update typescript branch with latest develop changes (#646)

* 📝 How to run docs (#639) * 📝 Start work on how to run docs #635 * Replace “getting started” with “how to run” Moved some of the text from Getting Started to How to run. Also changed some of the scripts in the package.yaml file and added some more so we don’t have to use `--filter` that much. Co-authored-by: Victor Nystad <vnys@equinor.com> * 🐛 fix missing props spread on BannerActions (#641) * 🐛 fix spacing bugs on CardMedia (#643) * 🐛 fix missing props spread on BannerActions * 🐛 fix left spacing on card media middle variant * 🐛 fix spacing on fullwidth variant of card media Co-authored-by: Wenche Tollevsen <wenche.tollevsen@gmail.com> Co-authored-by: Victor Nystad <vnys@equinor.com> Co-authored-by: Sven van Steenis <SvSven@users.noreply.github.com>
equinor · Oct 6, 2020 · 6c00742 · 6c00742
1 parent f933478
commit 6c00742
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -6,18 +6,31 @@ While the design system itself lives in [Figma][], this repository contains impl
 
 ## Table of contents
 
-- [Status](#status)
-- [Figma](#figma)
-- [Storefront](#storefront)
-- [React](#react)
-- [Icons](#icons)
-- [Tokens](#tokens)
-- [Fonts](#fonts)
-- [Logo](#logo)
-- [Browser support](#browser-support)
-- [Contribute](#contribute)
-- [Getting started](#getting-started)
-- [Get in touch](#get-in-touch)
+- [Equinor Design System](#equinor-design-system)
+  - [Table of contents](#table-of-contents)
+  - [Status](#status)
+  - [How to run](#how-to-run)
+    - [Work with the React components](#work-with-the-react-components)
+  - [Figma](#figma)
+  - [Storefront](#storefront)
+  - [React](#react)
+    - [Installation](#installation)
+    - [Usage](#usage)
+  - [Icons](#icons)
+    - [Installation](#installation-1)
+    - [Usage](#usage-1)
+  - [Tokens](#tokens)
+    - [Installation](#installation-2)
+    - [Usage](#usage-2)
+  - [Fonts](#fonts)
+    - [Usage](#usage-3)
+    - [All the fonts](#all-the-fonts)
+    - [Individual fonts](#individual-fonts)
+  - [Logo](#logo)
+    - [Usage](#usage-4)
+  - [Browser support](#browser-support)
+  - [Contributions](#contributions)
+  - [Get in touch](#get-in-touch)
 
 ## Status
 
@@ -31,7 +44,40 @@ While the design system itself lives in [Figma][], this repository contains impl
 | [Storefront](https://github.com/equinor/design-system/tree/develop/apps/storefront) (dev) | [![Build Status](https://dev.azure.com/equinor-design-system/Equinor%20Design%20System/_apis/build/status/storefront-dev?branchName=develop)](https://dev.azure.com/equinor-design-system/Equinor%20Design%20System/_build/latest?definitionId=9&branchName=develop) | [![Version](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/equinor/design-system/develop/apps/storefront/package.json&label=version&query=version&color=orange&prefix=v)](https://github.com/equinor/design-system/apps/storefront) |
 | [Storefront](https://github.com/equinor/design-system/tree/develop/apps/storefront) (prod) | [![Build Status](https://dev.azure.com/equinor-design-system/Equinor%20Design%20System/_apis/build/status/storefront-production?branchName=develop)](https://dev.azure.com/equinor-design-system/Equinor%20Design%20System/_build/latest?definitionId=8&branchName=develop) | [![Version](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/equinor/design-system/develop/apps/storefront/package.json&label=version&query=version&color=orange&prefix=v)](https://github.com/equinor/design-system/apps/storefront) |
 
+## How to run
 
+Would you like to contribute? Awesome! 👏
+
+We use a fork and pull-request workflow, so start with forking the repository on Github, then clone your fork.
+
+    $ git clone git@github.com:your-github-username/design-system
+
+We use [pnpm][] as the package manager, because it’s fast, space efficient, and has some very useful commands when working with a monorepo – so you should start off by installing it globally.
+
+    $ npm install -g pnpm
+
+Install dependencies using the shorthand version of `pnpm multi install`
+
+    $ cd design-system
+    $ pnpm m i
+
+[pnpm]: https://pnpm.js.org
+
+### Work with the React components
+We use [storybook](https://storybook.js.org/) as a development environment `(/apps/storybook-react)`.
+
+Start storybook on localhost:9000 by running the following command from root:
+
+    $ pnpm run storybook
+
+Watch the React components folder `(/libraries/core-react)`
+
+    $ pnpm run core-react
+
+Run tests once or by watching
+
+    $ pnpm run test:core-react 
+    $ pnpm run test:watch:core-react 
 
 ## Figma
 
@@ -171,22 +217,6 @@ We support the most up to date version of evergreen browsers (browsers that auto
 
 Contributions are welcome and encouraged! File bug reports and feature requests in Github issues, and [get in touch](#get-in-touch) with us if you want to help us out with implementing the components or have ideas for components we should include in the EDS.
 
-## Getting started
-
-We use [pnpm][] as the package manager, because it’s fast, space efficient, and has some very useful commands when working with a monorepo – so you should start off by installing it globally:
-
-```bash
-$ npm i -g pnpm
-```
-
-It is possible to change directory into one of the subdirectories and run pnpm commands from there, but if’s usually better to run most commands from the root, and use `--filter` to single out the package you’re working on. So to install all the dependencies in all the packages simultaneosly, run `pnpm m i`, which is the shorthand version of `pnpm multi install`.
-
-If you would like to start the storefront then, you would run `pnpm --filter @equinor/eds-storefront run start`, and if you want to install some devDependency, `pnpm --filter @equinor/eds-storefront i -D <some-module>`.
-
-There are some useful scripts in the root package.yaml for common tasks.
-
-[pnpm]: https://pnpm.js.org
-
 ## Get in touch
 
 We use [#eds-design-system][slack] on Slack as our main communication channel – but we have an [internal team][teams] on Teams as well that you can join if you want to get in touch with us. If you’re outside Equinor and want to get in touch with the team, then please create an issue.

diff --git a/libraries/core-react/src/Banner/BannerActions.jsx b/libraries/core-react/src/Banner/BannerActions.jsx
@@ -16,9 +16,9 @@ const StyledBannerActions = styled.div`
     }}
 `
 
-export const BannerActions = ({ children, placement, className }) => {
+export const BannerActions = ({ children, placement, className, ...props }) => {
   return (
-    <StyledBannerActions placement={placement} className={className}>
+    <StyledBannerActions {...props} placement={placement} className={className}>
       {children}
     </StyledBannerActions>
   )

diff --git a/libraries/core-react/src/Card/CardMedia.jsx b/libraries/core-react/src/Card/CardMedia.jsx
@@ -8,9 +8,6 @@ import { card as tokens } from './Card.tokens'
 const StyledCardMedia = styled.div`
   display: flex;
   width: 100%;
-  img {
-    margin-left: -16px;
-  }
   &:last-child {
     margin-bottom: 8px;
     /* Last child to have 24px total spacing to bottom */
@@ -21,6 +18,7 @@ const StyledCardMedia = styled.div`
           > * {
             width: calc(100% + ${spacing} + ${spacing});
             margin-left: -${spacing};
+            margin-right: -${spacing};
           }
 
           &:first-child {

diff --git a/package.yaml b/package.yaml
@@ -18,8 +18,11 @@ scripts:
     @equinor/eds-core-react run build && pnpm --filter
     @equinor/eds-storybook-react install && pnpm --filter
     @equinor/eds-storybook-react run build
-  storybook-run: pnpm --filter @equinor/eds-storybook-react  run dev
-  storefront-run: pnpm --filter @equinor/eds-storefront run dev
+  storybook: pnpm --filter @equinor/eds-storybook-react run dev
+  storefront: pnpm --filter @equinor/eds-storefront run dev
+  core-react: pnpm --filter @equinor/eds-core-react run dev
+  test:core-react: pnpm --filter @equinor/eds-core-react run test
+  test:watch:core-react: pnpm --filter @equinor/eds-core-react run test:watch
   dockerize-storybook: docker build -t eds/storybook-react -f apps/storybook-react/Dockerfile.dev .
   storybook-docker-run: 'docker run -p 8080:80 eds/storybook-react'
   storybook-docker-inspect: docker run -it eds/storybook-react /bin/sh